/* Secciones Services (blanco y negro) y The Agency (retrato + 0/1 animados),
   con la estructura tipo Locomotive: etiqueta | imagen | texto, filas con líneas finas. */
:root {
  --lc-blanco: #f1efea;   /* blanco cálido */
  --lc-negro: #121211;    /* negro tinta */
  --lc-amarillo: #f6fa97;
  --lc-pad: clamp(16px, 2.5vw, 36px);
}

/* Base común */
#idContenedor > section#secServices.activo,
#idContenedor > section#secTheAgency.activo { display: block; position: relative; }
#secServices .lc-scroll, #secTheAgency .lc-scroll {
  position: relative; z-index: 2; height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, #000 150px, #000 calc(100% - 100px), transparent calc(100% - 50px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, #000 150px, #000 calc(100% - 100px), transparent calc(100% - 50px));
}
#secServices .lc-scroll::-webkit-scrollbar, #secTheAgency .lc-scroll::-webkit-scrollbar { display: none; }
#secServices, #secTheAgency { font-family: "Neue Montreal", Helvetica, Arial, sans-serif; }
#secServices .t-r, #secTheAgency .t-r { font-family: "Instrument Serif", Georgia, serif; font-style: normal; }
#secServices .t-i, #secTheAgency .t-i { font-family: "Instrument Serif", Georgia, serif; font-style: italic; }

.lc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: var(--lc-pad); row-gap: 24px; padding: 16vh var(--lc-pad); align-items: start; }
.lc-label { grid-column: 1; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.2; }
.lc-media { grid-column: 1; grid-row: 2; margin: 0; max-width: 340px; }
.lc-media img { width: 100%; height: auto; display: block; }
.lc-texto { grid-column: 2 / span 2; grid-row: 1 / span 2; display: grid; gap: 1em; max-width: 44em; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.32; }
.lc-texto p { margin: 0; }
.lc-grande { margin: 0 0 .2em; font-weight: 400; font-size: clamp(56px, 8vw, 140px); line-height: .88; letter-spacing: -.02em; }
.lc-link { justify-self: start; margin-top: .6em; font-size: clamp(40px, 5vw, 86px); line-height: .9; text-decoration: none; color: inherit; }
.lc-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* ---- Services: blanco y negro ---- */
#secServices { background: var(--lc-blanco); color: var(--lc-negro); }
#secServices .lc-bn { filter: grayscale(1) contrast(1.08); }
.lc-capacidades { padding: 0 0 6vh; }
.lc-fila {
  display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: var(--lc-pad);
  padding: 4.5vh var(--lc-pad); border-top: 1px solid currentColor;
  font-size: clamp(20px, 1.9vw, 30px); line-height: 1.12;
}
.lc-fila:last-child { border-bottom: 1px solid currentColor; }
.lc-num { margin: 0; font-family: "Pixelify Sans", monospace; font-size: .62em; }
.lc-area { margin: 0; grid-column: 2; font-weight: 400; font-family: "Instrument Serif", Georgia, serif; font-size: 2.1em; line-height: .9; }
.lc-lista { grid-column: 3; margin: 0; padding: 0; list-style: none; }
.lc-lista li { display: block; padding: .04em 0; transition: transform .2s ease; }
.lc-fila:hover .lc-area { font-style: italic; }
.lc-lista li:hover { transform: translateX(.35em); }
body.en-servicios .newfooter { background: var(--lc-negro); }
body.en-servicios .newfooter .cont .item .abtnredes, body.en-servicios .newfooter .cont .item .ptexto { color: var(--lc-blanco); }

/* ---- The Agency: retrato + 0/1 ---- */
#secTheAgency { background: #1b1714; color: var(--lc-amarillo); overflow: hidden; }
#secTheAgency .ag-fondo { position: absolute; inset: 0; z-index: 0; }
#secTheAgency .ag-retrato { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.62) saturate(.9); }
#secTheAgency .ag-binario { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s ease; }
.ag-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--lc-pad); }
.ag-hero .lc-label { margin-bottom: 1em; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.ag-titulo { margin: 0; font-weight: 400; font-size: clamp(64px, 10vw, 180px); line-height: .85; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
/* Agency: bloques con jerarquía y apariciones */
.ag-kicker { margin: 0 0 1.2em; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ag-scrollhint { margin-top: 2.5em; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ag-titulo .ap { display: inline-block; }
.ag-bloque { position: relative; padding: 14vh var(--lc-pad); display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--lc-pad); row-gap: 3vh;
  background: linear-gradient(to bottom, rgba(18, 14, 12, .62), rgba(18, 14, 12, .62)); text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.ag-bloque > * { grid-column: 2; }
.ag-bloque > .lc-label { grid-column: 1; grid-row: 1 / span 3; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ag-statement { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(46px, 6.4vw, 112px); line-height: .92; letter-spacing: -.02em; }
.ag-statement .ap { display: block; }
.ag-h3 { margin: 0; font-weight: 400; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(34px, 4vw, 68px); line-height: 1; max-width: 16em; }
.ag-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lc-pad); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.4; }
.ag-cols p { margin: 0; }
.ag-lista { list-style: none; margin: 0; padding: 0; counter-reset: ag; }
.ag-lista li { display: grid; grid-template-columns: 3.2em 1fr 1fr; column-gap: var(--lc-pad); align-items: baseline; padding: 3.4vh 0; border-top: 1px solid rgba(246, 250, 151, .45); }
.ag-lista li:last-child { border-bottom: 1px solid rgba(246, 250, 151, .45); }
.ag-n { font-family: "Pixelify Sans", monospace; font-size: 15px; }
.ag-lista h4 { margin: 0; font-weight: 400; font-size: clamp(28px, 2.8vw, 48px); line-height: .95; }
.ag-lista p { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.4; }
.ag-datos { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lc-pad); }
.ag-datos dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5em; }
.ag-datos dd { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(56px, 7vw, 120px); line-height: .85; }
.ag-nota { margin: 0; max-width: 34em; font-size: 15px; opacity: .85; }
.ag-ciudades { list-style: none; margin: 0; padding: 0; font-size: clamp(44px, 6vw, 104px); line-height: .98; }
.ag-ciudades li { border-bottom: 1px solid rgba(246, 250, 151, .3); padding: .08em 0; }
.ag-cierre { grid-template-columns: 1fr; padding-bottom: 22vh; }
.ag-cierre > * { grid-column: 1; }
/* Aparición al hacer scroll */
#secTheAgency .ap { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
#secTheAgency .ap.visto { opacity: 1; transform: none; }
body.en-agencia .newfooter { background: #120f0d; }
body.en-agencia .newfooter .cont .item .abtnredes, body.en-agencia .newfooter .cont .item .ptexto { color: var(--lc-amarillo); }

/* Triángulo "we believe in" visible en todas las secciones */
.classtriangulo.global { position: fixed !important; z-index: 6; }

@media (max-width: 820px) {
  .lc-grid, .lc-fila { grid-template-columns: 1fr; row-gap: 12px; }
  .lc-media, .lc-texto, .lc-label, .lc-area, .lc-lista { grid-column: 1; grid-row: auto; }
  .lc-media { max-width: 70%; }
  .ag-bloque, .ag-cols, .ag-lista li { grid-template-columns: 1fr; }
  .ag-bloque > * , .ag-bloque > .lc-label { grid-column: 1; grid-row: auto; }
  .ag-datos { grid-template-columns: 1fr 1fr; }
  .lc-grid { padding: 14vh var(--lc-pad) 10vh; }
}
@media (prefers-reduced-motion: reduce) { .lc-lista li { transition: none; } #secTheAgency .ap { opacity: 1; transform: none; transition: none; } }

/* Cada sección encierra sus capas: el menú (z-index 3) queda siempre arriba */
#idContenedor > section#secServices, #idContenedor > section#secTheAgency,
#idContenedor > section#secClients, #idContenedor > section#secContactUs { isolation: isolate; }

/* Agency y Services: aire a los costados para no chocar con las misceláneas verticales */
@media (min-width: 821px) {
  #secTheAgency, #secServices { --lc-pad: clamp(64px, 5vw, 96px); }
}

/* Agency: párrafos en escalera editorial (en vez de dos columnas planas) */
#secTheAgency .ag-cols { display: block; position: relative; max-width: 62em; }
#secTheAgency .ag-cols p { position: relative; max-width: 21em; padding-left: 4.2em; }
#secTheAgency .ag-cols p::before {
  position: absolute; left: 0; top: .15em; font-family: "Pixelify Sans", monospace; font-size: .78em; letter-spacing: .04em; opacity: .9;
}
#secTheAgency .ag-cols p:nth-child(1)::before { content: "↳ 01"; }
#secTheAgency .ag-cols p:nth-child(2)::before { content: "↳ 02"; }
#secTheAgency .ag-cols p:nth-child(2) { margin: 9vh 0 0 auto; }
#secTheAgency .ag-cols::after { /* línea que une los dos pasos */
  content: ""; position: absolute; left: 1.1em; top: 2.2em; width: calc(100% - 21em - 1.1em); height: calc(9vh + 2.4em);
  border-left: 1px solid rgba(246, 250, 151, .5); border-bottom: 1px solid rgba(246, 250, 151, .5); pointer-events: none;
}
#secTheAgency .ag-h3 + .ag-cols, #secTheAgency .ag-statement + .ag-cols { margin-top: 3vh; }
@media (max-width: 820px) {
  #secTheAgency .ag-cols p { max-width: none; padding-left: 3.4em; }
  #secTheAgency .ag-cols p:nth-child(2) { margin: 4vh 0 0 1.6em; }
  #secTheAgency .ag-cols::after { display: none; }
}

/* el contenido se desvanece antes de pasar por debajo de logo y misceláneas */
#secServices .lc-scroll, #secTheAgency .lc-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 140px, #000 200px, #000 calc(100% - var(--pie, 48px) - 70px), transparent calc(100% - var(--pie, 48px) - 30px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent 140px, #000 200px, #000 calc(100% - var(--pie, 48px) - 70px), transparent calc(100% - var(--pie, 48px) - 30px));
}