/* ════════════════════════════════════════════════════════════════════
   FUTURISTICA® · _xestudio_2026-09-03.css
   CAPA 3 · /estudio · /metodo · /contacto
   ────────────────────────────────────────────────────────────────────
   Depende de _xprimitivos + _xsitio + _xhome.

   NO declara colores, familias ni tamaños: todo baja de abajo.
   NO declara padding vertical de sección: lo pone la costura de _xsitio.

   LEY DE MEDIDA — la razón de existir de este archivo.
   clamp() gobierna el TAMAÑO de la letra y ya está resuelto en _xsitio.
   Lo que clamp NO gobierna es cuántos caracteres caben por línea: en
   1512px un párrafo suelto va a ~80 caracteres y en 2560px a ~130.
   Por eso toda medida se fija en `ch`, que escala con la fuente igual
   que un clamp. R40 ya lo hace (hero 17ch, titulares 20-22ch, prosa
   46-58ch); esto extiende la misma regla a las secciones nuevas.

        titular display    12–18ch
        prosa de lectura   58–66ch
        pie de foto        libre (una línea)
   ════════════════════════════════════════════════════════════════════ */

/* ── KICKER · etiqueta mono con guion ──────────────────────────────── */
.kicker{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);
  display:flex;align-items:center;gap:var(--s2);}
.kicker::before{content:'';width:56px;height:1px;background:var(--t3);flex:none;}
.kicker--vida{color:var(--tad-vida);}
.kicker--vida::before{background:var(--tad-vida);}

.banda-rev{background:var(--tad-vida);color:var(--void);font-family:var(--f-mono);
  font-size:var(--u-label);letter-spacing:var(--tr-micro);text-transform:uppercase;
  padding:var(--s1) var(--marco);text-align:center;line-height:1.5;}

/* ── HERO ──────────────────────────────────────────────────────────── */
.hero-titulo{font-family:var(--f-display);font-weight:300;
  font-size:var(--t-hero);line-height:var(--il-hero);letter-spacing:-.035em;
  margin-top:var(--aire-label);max-width:14ch;}
.hero-titulo em{font-style:italic;color:var(--t2);}

/* ── BLOQUE DE DOS COLUMNAS ────────────────────────────────────────── */
.dos{display:grid;grid-template-columns:1fr;gap:var(--s5);
  margin-top:var(--aire-linea);}
@media (min-width:900px){
  .dos{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
       gap:var(--s6);align-items:start;}
}
.dos h2{font-family:var(--f-display);font-weight:300;font-size:var(--t-display);
  line-height:var(--il-titular);letter-spacing:-.035em;max-width:13ch;}
.dos h2 em{font-style:italic;color:var(--t2);}
.dos p{font-family:var(--f-display);font-weight:300;font-size:var(--t-lead);
  line-height:var(--il-bajada);color:var(--t2);margin-bottom:var(--s4);
  max-width:62ch;}
.dos p:last-child{margin-bottom:0;}
.dos strong{color:var(--t1);font-weight:400;}

/* ── TITULAR SUELTO ────────────────────────────────────────────────── */
.titular{font-family:var(--f-display);font-weight:300;font-size:var(--t-display);
  line-height:var(--il-titular);letter-spacing:-.035em;
  margin-top:var(--aire-label);max-width:16ch;}
.titular em{font-style:italic;color:var(--t2);}

/* Una bajada suelta bajo un titular tampoco cruza la pantalla. */
.titular + .sub,
.kicker + .sub{max-width:62ch;margin-top:var(--aire-linea);}

/* ── FASE · el nombre es UNA palabra: pide cuerpo, no caja ─────────── */
.fase h2{font-size:var(--t-hero);line-height:var(--il-hero);
  letter-spacing:-.045em;max-width:9ch;}
.fase .lema{font-family:var(--f-display);font-weight:400;font-style:italic;
  font-size:var(--t-sub);line-height:1.25;color:var(--t1);
  margin-bottom:var(--s4);max-width:26ch;}
.fase .entregable{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--linea);
  max-width:46ch;}
.fase .entregable b{color:var(--t2);font-weight:400;}

/* ── MANIFIESTO · lectura larga ────────────────────────────────────── */
.manifiesto .intro{margin-bottom:var(--s5);max-width:62ch;}
.manifiesto .intro:last-child{margin-bottom:0;}
@media (min-width:768px){.manifiesto .grande{margin-bottom:var(--aire-linea);}}

/* ── FICHA DE OBRA ─────────────────────────────────────────────────── */
.ficha-obra .sub{margin-bottom:var(--aire-linea);max-width:60ch;}

/* ── EQUIPO ────────────────────────────────────────────────────────── */
.equipo .encabezado .intro{margin-top:var(--aire-linea);max-width:60ch;}
.equipo .cola .intro{max-width:60ch;}

/* ── CLIENTES ──────────────────────────────────────────────────────── */
.clientes{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  margin-top:var(--aire-linea);padding-top:var(--s4);border-top:1px solid var(--linea);}
.clientes span{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t2);}

/* ── SERVICIOS · tres columnas, no cuatro ──────────────────────────────
   Con 4 columnas los títulos de tres palabras se parten
   ("Búsqueda y análisis de / predios"). A 3 respiran. */
@media (min-width:1200px){
  .proceso .pasos{grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s6);}
}
.paso h4{max-width:20ch;}
.paso p{max-width:34ch;}

/* ── LÁMINA A SANGRE ───────────────────────────────────────────────── */
/* ── ETIQUETA DE PIE DE FOTO ───────────────────────────────────────────
   Va DENTRO del <figure>, sobre la imagen, alineada al --marco (el
   mismo punto donde arranca todo el texto del sitio).
   Bloque void sólido: sin sombra, sin borde redondo, sin desenfoque
   — el reset del sistema fija border-radius:0 y la casa no usa sombras. */
.lamina{position:relative;}
/* El color del texto NO puede ser --t1: ese token es CONTEXTUAL — lo
   fija el mundo de la seccion. En una seccion warm vale casi negro, y
   como el fondo de la cinta es --void siempre, quedaba negro sobre
   negro (visible en /metodo, lamina de Via 7). La cinta es un bloque
   oscuro llueva o truene, asi que su texto va al primitivo --warm. */
.pie-foto{position:absolute;z-index:2;left:var(--marco);bottom:var(--marco);
  background:var(--void);color:var(--warm);
  font-family:var(--f-mono);font-size:var(--u-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;line-height:1;
  padding:var(--s2) var(--s3);max-width:calc(100% - (var(--marco) * 2));}
@media (max-width:640px){
  .pie-foto{left:0;bottom:0;padding:var(--s1) var(--marco);max-width:100%;}
}

/* Dos secciones .sangra seguidas del MISMO mundo dejaban una banda
   vacía entre la cola de una y la lámina de la otra. */
main > .sangra + .sangra{margin-top:var(--s7);}
main > .sangra > .cola:empty{display:none;}

/* ── CIERRE ────────────────────────────────────────────────────────── */
.cierre-frase{font-family:var(--f-display);font-weight:300;font-style:italic;
  font-size:var(--t-sub);line-height:var(--il-titular);letter-spacing:-.02em;
  color:var(--t1);max-width:24ch;margin-top:var(--aire-label);}
.cta{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--aire-linea);
  font-family:var(--f-mono);font-size:var(--u-nav);letter-spacing:var(--tr-nav);
  text-transform:uppercase;color:var(--void);background:var(--t1);
  padding:var(--s3) var(--s4);transition:background .3s var(--ease);}
.cta:hover{background:var(--tad-vida);}
.cta::after{content:'→';}
.cierre-cta h2{max-width:16ch;margin-inline:auto;}
.cierre-cta p{max-width:52ch;}
/* La bajada quedaba PEGADA a los botones: .btns no traia separacion y
   con una bajada de una sola linea el boton se montaba encima. */
.cierre-cta .btns{margin-top:var(--aire-linea);}

/* ── PUERTAS DE CONTACTO ───────────────────────────────────────────────
   Cuatro entradas a WhatsApp. NO son botones: son líneas editoriales
   enlazadas enteras. Un .cta oscuro sobre fondo warm no se lee — ese
   componente está definido para fondo void y solo se usa una vez por
   página, en el cierre. */
/* HOVER ESTÁNDAR DEL SITIO (N9, 03-sep)
   Filete de 1px que crece de izquierda a derecha con la curva del
   sistema — el mismo gesto de .linea-crece y .regla-sec — más cambio
   de color y la flecha que avanza. Todo se mueve hacia la derecha, a
   distinta velocidad: la línea lenta, la flecha rápida.
   Color de interacción: --c-brand sobre WARM, --tad-vida sobre VOID.
   NUNCA opacidad, nunca sombra, nunca borde redondo. */
/* El esqueleto y el filete se movieron a _xsitio (.filas) el 2026-09-08:
   estaban escritos identicos aqui y en la hoja del diario. Aqui queda
   SOLO la rejilla propia de contacto — cuatro columnas: numero, que,
   descripcion, flecha. El comportamiento de .puertas no cambia: sigue
   enganchada al selector base y sigue siendo una fila que GENERA
   (WhatsApp), asi que sobre void conserva el verde vida. */

.puertas a{display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);
  padding:var(--s4) 0;align-items:baseline;
  transition:color .4s var(--ease);}
@media (min-width:900px){
  .puertas a{grid-template-columns:4ch minmax(0,18ch) minmax(0,1fr) auto;
             gap:var(--s5);align-items:baseline;}
}
.puertas .n{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);color:var(--t3);
  transition:color .4s var(--ease);}
.puertas .qu{font-family:var(--f-display);font-weight:300;font-size:var(--t-sub);
  line-height:1.15;letter-spacing:-.02em;color:var(--t1);
  transition:color .4s var(--ease);}
.puertas .de{font-size:var(--u-link);line-height:1.55;color:var(--t2);max-width:44ch;}
.puertas a::after{content:'→';font-family:var(--f-mono);color:var(--t3);
  justify-self:end;align-self:center;
  transition:color .4s var(--ease),transform .5s var(--ease);}

.puertas a:hover .n,
.puertas a:hover .qu{color:var(--c-brand);}
.puertas a:hover::after{color:var(--c-brand);transform:translateX(10px);}
section.void .puertas a:hover .n,
section.void .puertas a:hover .qu,
section.void .puertas a:hover::after{color:var(--tad-vida);}

@media (prefers-reduced-motion:reduce){
  .puertas li::after{transition:none;}
  .puertas a::after{transition:color .4s var(--ease);}
  .puertas a:hover::after{transform:none;}
}
@media (max-width:899px){
  .puertas a::after{display:none;}
  .puertas .n{grid-column:1;}
  .puertas .qu,.puertas .de{grid-column:2;}
}

/* ── CANALES · lista de datos, no cifras ───────────────────────────────
   .datos--fila y .cifra son para números grandes (278.596, 1994).
   Una dirección de tres líneas ahí se parte y se ve rota. */
.canales{display:grid;grid-template-columns:1fr;gap:var(--s4);
  margin:var(--aire-linea) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--linea);}
@media (min-width:640px){.canales{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.canales{grid-template-columns:repeat(3,1fr);gap:var(--s5);}}
.canales dt{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);
  margin-bottom:var(--s1);}
.canales dd{margin:0;font-size:var(--u-link);line-height:1.6;color:var(--t2);}
.canales dd a{color:var(--t1);border-bottom:1px solid var(--linea-2);
  transition:color .4s var(--ease),border-color .4s var(--ease);}
.canales dd a:hover{color:var(--c-brand);border-bottom-color:var(--c-brand);}
section.void .canales dd a:hover{color:var(--tad-vida);border-bottom-color:var(--tad-vida);}

/* ── HOVER ESTÁNDAR · enlaces sueltos ──────────────────────────────────
   Misma norma que las puertas, para cualquier enlace de las páginas de
   esta capa: cambio de color, nunca opacidad.
   --c-brand sobre WARM · --tad-vida sobre VOID. */
.dos a,.manifiesto a,.ficha-obra a,.equipo a{
  color:inherit;border-bottom:1px solid var(--linea-2);
  transition:color .4s var(--ease),border-color .4s var(--ease);}
.dos a:hover,.manifiesto a:hover,.ficha-obra a:hover,.equipo a:hover{
  color:var(--c-brand);border-bottom-color:var(--c-brand);}
section.void .dos a:hover,
section.void .manifiesto a:hover,
section.void .ficha-obra a:hover,
section.void .equipo a:hover{
  color:var(--tad-vida);border-bottom-color:var(--tad-vida);}

/* ── HOVER · botones del cierre ────────────────────────────────────────
   .cta y .btn viven sobre VOID, así que su color de acción es tad-vida.
   El cambio es de fondo, no de opacidad. */
.cta{transition:background .4s var(--ease),color .4s var(--ease);}
.cta::after{transition:transform .5s var(--ease);}
.cta:hover::after{transform:translateX(10px);}

/* ── CORRECCIONES DE RITMO Y FAMILIA (N9, 03-sep) ──────────────────────

   1 · Los títulos de .paso son titulares, no prosa: cuando parten en
   dos líneas ("Estructura del acuerdo") el interlineado de párrafo los
   abre demasiado. Van con la interlínea de titular menor. */
.paso h4{line-height:var(--il-menor);letter-spacing:-.015em;}

/* 2 · Los párrafos de .dos usan la familia DISPLAY, que es correcta
   para una bajada editorial pero no para prosa de lectura larga: en
   /jvf hacía que la página se sintiera de otra familia que /metodo.
   La prosa corrida va en la familia de cuerpo; el primer párrafo,
   cuando es bajada, conserva el display. */
.dos p{font-family:var(--f-cuerpo);font-size:var(--u-link);
  line-height:1.65;}
.dos > div > p:first-child{font-family:var(--f-display);
  font-weight:300;font-size:var(--t-lead);line-height:var(--il-bajada);}

/* ── OBRAS JVF · dos proyectos a mitad y mitad ─────────────────────────
   La pieza gráfica manda; los datos van debajo, en mono, como pie
   técnico. Formato único de promoción: una imagen por proyecto. */
.obras-jvf{display:grid;grid-template-columns:1fr;gap:var(--s6);
  margin-top:var(--aire-linea);}
@media (min-width:900px){.obras-jvf{grid-template-columns:1fr 1fr;gap:var(--s6);}}
.obras-jvf .lamina{aspect-ratio:16/9;overflow:hidden;background:var(--void);}
.obras-jvf .lamina img{width:100%;height:100%;object-fit:cover;display:block;}
.obras-jvf .datos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--linea);}
.obras-jvf .datos > div{font-size:var(--u-link);line-height:1.5;color:var(--t2);}
.obras-jvf .datos span{display:block;font-family:var(--f-mono);
  font-size:var(--u-micro);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--t3);margin-bottom:var(--s1);}

/* ── DATOS DE OBRA bajo lámina a sangre ────────────────────────────── */
.obra-datos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--linea);}
@media (min-width:900px){.obra-datos{grid-template-columns:repeat(4,1fr);}}
.obra-datos > div{font-size:var(--u-link);line-height:1.5;color:var(--t2);}
.obra-datos span{display:block;font-family:var(--f-mono);font-size:var(--u-micro);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);margin-bottom:var(--s1);}

/* ── COSTURA ENTRE SECCIONES · patrón del home (index.php, 12 usos) ────
   .regla-sec abre un bloque y .regla-sec.regla-cierre lo cierra.
   1px, --linea-2, crece de izquierda a derecha en 1.6s. Sin esto dos
   secciones a sangre quedan pegadas y se leen como error de montaje. */
.regla-sec{height:1px;background:var(--linea-2);
  margin-top:var(--s5);margin-bottom:var(--s5);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.6s var(--ease);}
.regla-sec.vis{transform:scaleX(1);}
.regla-sec.regla-cierre{margin-bottom:0;}

/* Aire real entre dos láminas a sangre seguidas. */
main > .sangra + .sangra{margin-top:var(--s7);}

@media (prefers-reduced-motion:reduce){
  .linea-crece,.regla-sec{transform:scaleX(1);}
}

/* ── TABLA DE DECISIÓN · vender o aportar ─────────────────────────────
   Aquí el lector deja de leer y empieza a calcular. Sin bordes de caja:
   solo filete de 1px entre filas, como el resto del sistema.
   La columna de la derecha es la que se propone; se marca con el color
   de interacción, no con fondo. */
.tabla-decision{margin-top:var(--aire-linea);overflow-x:auto;}
.tabla-decision table{width:100%;border-collapse:collapse;text-align:left;}
.tabla-decision th,.tabla-decision td{padding:var(--s3) var(--s4) var(--s3) 0;
  vertical-align:top;border-bottom:1px solid var(--linea);}
.tabla-decision thead th{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);
  font-weight:400;padding-bottom:var(--s3);}
.tabla-decision thead th:last-child{color:var(--tad-vida);}
section.warm .tabla-decision thead th:last-child{color:var(--c-brand);}
.tabla-decision .vacio{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}
.tabla-decision tbody th{font-family:var(--f-mono);font-size:var(--u-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3);
  font-weight:400;width:22%;}
.tabla-decision td{font-size:var(--u-link);line-height:1.5;color:var(--t2);width:39%;}
.tabla-decision td:last-child{color:var(--t1);}
.tabla-decision tbody tr:last-child th,
.tabla-decision tbody tr:last-child td{border-bottom:none;}
.nota-tabla{margin-top:var(--s5);max-width:58ch;}
@media (max-width:640px){
  .tabla-decision tbody th{width:34%;}
  .tabla-decision td{width:33%;font-size:var(--u-micro);}
}

/* ── DIARIO · lenguaje de revista ──────────────────────────────────────
   La foto ocupa la página completa y el texto viene debajo, con aire.
   El vacío es activo: es lo que hace que el titular se sienta
   inevitable. Nada de columnas de texto sin imagen. */
.entrada{display:block;text-decoration:none;color:inherit;}
.entrada .lamina{overflow:hidden;aspect-ratio:21/9;background:var(--void);}
.entrada .lamina img{object-fit:cover;height:100%;}
.entrada .lamina img{display:block;width:100%;height:auto;
  transition:transform 1.2s var(--ease);}
.entrada:hover .lamina img{transform:scale(1.02);}
.entrada .meta{font-family:var(--f-mono);font-size:var(--u-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--t3);
  margin-bottom:var(--s4);}
.entrada h2{font-family:var(--f-display);font-weight:300;font-size:var(--t-display);
  line-height:var(--il-titular);letter-spacing:-.035em;max-width:16ch;
  transition:color .4s var(--ease);}
.entrada h2 em{font-style:italic;color:var(--t2);transition:color .4s var(--ease);}
.entrada .baja{font-family:var(--f-display);font-weight:300;font-size:var(--t-lead);
  line-height:var(--il-bajada);color:var(--t2);max-width:52ch;
  margin-top:var(--aire-linea);}
.entrada .leer{display:inline-flex;align-items:center;gap:var(--s1);
  font-family:var(--f-mono);font-size:var(--u-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--t3);margin-top:var(--s5);
  transition:color .4s var(--ease),transform .5s var(--ease);}
.entrada .leer::after{content:'→';}
/* Selector huerfano cerrado 2026-09-06: 'section.void' quedaba abierto y
   encadenaba la regla .cita, que vive en una seccion warm. Resultado: la
   cita no recibia NINGUN estilo. */




/* ── CITA DESTACADA ────────────────────────────────────────────────────
   Rompe la monotonía del texto y da entrada al que hojea sin leer.
   Es el recurso más antiguo de la revista y el que más funciona. */
.cita{font-family:var(--f-display);font-weight:300;font-size:var(--t-display);
  line-height:var(--il-titular);letter-spacing:-.03em;color:var(--t1);
  max-width:20ch;margin:0 auto;text-align:center;padding:var(--s6) 0;}
.cita em{font-style:italic;color:var(--t2);}

/* ── PRÓXIMAS · lo que no tiene imagen todavía, en voz baja ──────────── */
.proximas{list-style:none;margin:var(--aire-linea) 0 0;padding:0;
  border-top:1px solid var(--linea);}
.proximas li{display:grid;grid-template-columns:4ch 1fr;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--linea);align-items:baseline;}
.proximas .n{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);color:var(--t3);}
.proximas .t{font-family:var(--f-display);font-weight:300;font-size:var(--t-sub);
  line-height:1.2;letter-spacing:-.02em;color:var(--t3);max-width:32ch;}

/* ── HOVER DE .entrada · criterio del diario original ──────────────────
   El diario no usa color de acción en el hover: usa LUMINOSIDAD.
   El titular sube de --t2 a --t1, el "leer" de --t3 a --t2. Nada más.
   Verificado contra ver1/diario.html (.articulo:hover .articulo-titulo
   → color:var(--on-void-1)). El verde es solo para acciones que
   generan, nunca para reforzar un enlace de lectura. */
.entrada h2{color:var(--t2);transition:color .4s var(--ease);}
.entrada:hover h2{color:var(--t1);}
.entrada .leer{color:var(--t3);}
.entrada:hover .leer{color:var(--t2);transform:translateX(10px);}

/* Las próximas van apagadas de verdad, como en el original. */
.proximas li{opacity:.35;}

/* El hero y la lámina no se tocan. */
main > .hero + .sangra{margin-top:var(--s7);}