/* ════════════════════════════════════════════════════════════════════
   FUTURISTICA® · _xhome_2026-08-18.css
   CAPA 3 · SECCIONES EXCLUSIVAS DEL HOME
   ════════════════════════════════════════════════════════════════════
   Origen: std-home-futuristica-2026-08-12-R40-approved.html
   DEPENDE DE: _xprimitivos → _xsitio → este archivo (en ese orden)

   Aquí vive SOLO lo que ninguna otra página usa: hero, lanzamientos,
   cifras, fiduciaria, obra, proceso, FAQ, cierre, colección donada.
   Si un bloque de aquí se necesita en otra página, SUBE a _xsitio —
   no se copia.
   ════════════════════════════════════════════════════════════════════ */

/* ═══ HERO ═══ */
.hero{position:relative;display:flex;align-items:flex-end;min-height:86svh;
  overflow:hidden;}
@media (min-width:768px){.hero{min-height:82vh;align-items:center;}}
.hero-bg{position:absolute;inset:0;
  background:linear-gradient(155deg,#1c2739 0%,#0C1220 58%,#141c2b 100%);}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,18,32,.92) 0%,rgba(12,18,32,.72) 38%,rgba(12,18,32,.18) 72%,rgba(12,18,32,.06) 100%);}
@media (min-width:768px){.hero-bg::after{
  background:linear-gradient(to right,rgba(12,18,32,.94) 0%,rgba(12,18,32,.5) 62%,transparent 100%);}}
.hero .limite{position:relative;width:100%;}
.kicker{font-family:var(--f-mono);font-size:var(--u-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--t3);margin-bottom:var(--aire-label);line-height:1.6;}
h1{font-family:var(--f-display);font-weight:300;font-size:var(--t-hero);
  /* .88 aporta tanto como el tamano: un titular grande con interlineado
     suelto se sigue leyendo chico. */
  /* N9: que se toquen no molesta. .82 es densidad de revista. */
  line-height:var(--il-hero);letter-spacing:-0.03em;margin-bottom:var(--s3);}
h1 em{font-style:italic;color:var(--t2);}
@media (min-width:768px){h1{max-width:17ch;line-height:1.02;}}
/* BAJADAS · voz del titular, no cuerpo de lectura: serif, un escalon
   por debajo del titulo, interlineado de revista (1.28 no 1.5). */
/* El hero usa la MISMA voz; solo sube un escalon por ser portada. */
.hero .sub{font-style:italic;font-size:var(--t-sub);
  margin-top:var(--aire-linea);margin-bottom:var(--s4);}
@media (min-width:768px){.hero .sub{max-width:46ch;}}
@media (min-width:768px) and (max-width:1199px){.hero .limite{max-width:82%;}}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);}
/* Móvil: el principal manda solo; los dos secundarios comparten fila.
   Desde 600px los tres van al ancho de su texto — nunca estirados. */
.hero-cta .btn{flex:0 0 auto;}
@media (max-width:599px){
  .hero-cta .btn:first-child{flex:1 1 100%;}
  .hero-cta .btn:not(:first-child){flex:1 1 0;min-width:0;}
}


/* ── PROXIMOS PROYECTOS ──────────────────────────────────────────
   Lenguaje del HERO: lamina a sangre, titulo ENCIMA, texto al minimo.
   El formulario NO lleva caja: campos con linea inferior, en fila.
   Una caja con borde al lado de un parrafo es un widget de contacto,
   no una pieza editorial. */
.kicker--vida{color:var(--tad-vida);}
/* Separador entre los dos lanzamientos: la misma linea de 1px del resto
   de la pagina, pero en VIDA — verde sobre VOID, como manda la ley de
   color. Marca que empieza otro proyecto, no otra seccion. */
/* OJO: este separador vive ENTRE dos <section>, o sea sobre el body —
   y el body es WARM. Sin fondo propio, el verde de accion caeria sobre
   claro y eso viola la ley de color (VIDA solo sobre VOID). Por eso el
   contenedor lleva su propio VOID y la linea va dentro. */
.regla-vida{background:var(--void);padding-inline:var(--marco);}
.regla-vida::before{content:'';display:block;height:1px;
  background:var(--tad-vida);opacity:.55;}

/* PORTADA — el titulo va sobre la imagen, como en el hero. */
.lanz{position:relative;}
.lanz-bg{position:absolute;top:0;left:0;right:0;height:78svh;overflow:hidden;
  background:linear-gradient(155deg,#1c2739 0%,#0C1220 58%,#141c2b 100%);}
.lanz-bg img{width:100%;height:100%;object-fit:cover;}
.lanz-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--void) 2%,rgba(12,18,32,.72) 34%,rgba(12,18,32,.15) 78%,rgba(12,18,32,.05) 100%);}
.lanz-portada{position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:78svh;
  padding-block:var(--costura-ini) var(--aire-linea);}
/* Sin lamina el bloque no necesita altura de portada. */
.lanz:not(:has(.lanz-bg)) .lanz-portada{min-height:0;
  padding-block:var(--costura-ini) var(--aire-linea);}
.lanz-portada h2{max-width:16ch;}

/* CUERPO — texto al minimo, en una sola columna estrecha. */
.lanz-cuerpo{position:relative;padding-bottom:var(--costura-fin);}
.lanz-texto{max-width:58ch;}
/* La ubicacion es DATO DE CONTEXTO, no prosa: mono. */
.lanz .ubicacion{font-family:var(--f-mono);font-size:var(--u-link);
  line-height:1.75;color:var(--t3);margin-top:var(--aire-linea);}
/* ═══ CIFRAS ═══ */
.cifras .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) 0;}
@media (min-width:900px){.cifras .rejilla{grid-template-columns:repeat(4,1fr);}}
.cifra{padding:0 var(--s3);border-left:1px solid var(--linea);}
.cifra:first-child{padding-left:0;border-left:none;}
@media (max-width:899px){.cifra:nth-child(odd){padding-left:0;border-left:none;}}
.cifra .n{font-family:var(--f-display);font-weight:300;
  font-size:var(--t-display);line-height:var(--il-cifra);letter-spacing:-.02em;color:var(--c-brand);
  font-variant-numeric:lining-nums tabular-nums;}
.cifra .linea-crece{margin:var(--s3) 0 var(--s2);}
.cifra .l{font-family:var(--f-mono);font-size:var(--u-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--t3);line-height:1.5;}

/* ═══ FIDUCIARIA · subida a posición 3 ═══ */
/* Todo h2 respira abajo POR DEFECTO. Antes cada seccion se lo ponia a
   mano (.origami s3, .razones s5...) y .equipo no tenia ninguna: por eso
   ahi el subtitulo quedaba pegado al titulo. El default cierra el hueco;
   las secciones que quieran mas, lo suben — pero nadie queda en cero. */
h2{font-family:var(--f-display);font-weight:300;font-size:var(--t-title);
  line-height:var(--il-titular);letter-spacing:-.025em;
  margin-bottom:var(--aire-label);}
h2 em{font-style:italic;color:var(--t2);}
.fiduciaria h2{margin-bottom:var(--s3);}
@media (min-width:768px){.fiduciaria h2{max-width:22ch;}}
/* Ya hereda todo de la regla de bajada; solo conserva su aire inferior. */
.fiduciaria .intro{margin-bottom:var(--aire-linea);}
@media (min-width:768px){.fiduciaria .intro{max-width:58ch;}}

/* Móvil: tarjetas. Escritorio: rejilla de 5 columnas.
   NO se usa display:table — `display:contents` no funciona dentro de tablas
   CSS y rompe el reparto de celdas. Con Grid el mismo HTML se reorganiza. */
.fid-lista{list-style:none;}
.fid-cab{display:none;}
.fid-item{border-top:1px solid var(--linea);padding:var(--s3) 0;}
.fid-item b{display:block;font-family:var(--f-display);font-weight:400;
  font-size:var(--t-sub);line-height:var(--il-menor);margin-bottom:var(--s3);}
.fid-datos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
.fid-datos div{font-family:var(--f-mono);font-size:var(--u-micro);
  letter-spacing:.04em;color:var(--t2);line-height:1.4;}
.fid-datos span{display:block;font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);margin-bottom:4px;}

@media (min-width:900px){
  .fid-cab{display:grid;grid-template-columns:2.2fr 1.4fr .8fr 1fr 1.1fr;
    gap:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--linea-2);}
  .fid-cab span{font-family:var(--f-mono);font-size:var(--u-label);
    letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);}
  .fid-item{display:grid;grid-template-columns:2.2fr 1.4fr .8fr 1fr 1.1fr;
    gap:var(--s3);align-items:baseline;border-top:none;
    border-bottom:1px solid var(--linea);padding:var(--s3) 0;}
  .fid-item b{font-family:var(--f-cuerpo);font-size:var(--u-link);margin:0;}
  /* Los 4 datos ocupan las columnas 2 a 5 con su propia sub-rejilla */
  .fid-datos{grid-column:2 / -1;display:grid;
    grid-template-columns:1.4fr .8fr 1fr 1.1fr;gap:var(--s3);align-items:baseline;}
  .fid-datos span{display:none;}
}

/* ═══ RAZONES ═══ */
.razones h2{margin-bottom:var(--s5);}
@media (min-width:768px){.razones h2{max-width:20ch;margin-bottom:var(--s6);}}
.razones .rejilla{display:grid;grid-template-columns:1fr;gap:var(--s5);}
@media (min-width:900px){.razones .rejilla{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6);}}
.razon .n{font-family:var(--f-mono);font-size:var(--u-label);letter-spacing:var(--tr-label);
  color:var(--c-brand);margin-bottom:var(--s2);}
.razon h3{font-family:var(--f-display);font-weight:400;font-size:var(--t-sub);
  line-height:var(--il-menor);margin-bottom:var(--s2);}
.razon p{color:var(--t2);line-height:1.55;}
@media (min-width:768px){.razon p{max-width:46ch;}}

/* ═══ OBRA · imagen limpia + ficha debajo ═══
   El texto NO va sobre la imagen: la imagen es la protagonista. */
.obra .encabezado{padding-inline:var(--marco);padding-bottom:var(--s4);}
.proyecto{border-top:1px solid var(--linea);}
.proyecto:first-of-type{border-top:none;}
.lamina{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(140deg,#22304a,#101828 70%,#1a2438);}
@media (min-width:768px){.lamina{aspect-ratio:16/9;}}
@media (min-width:1600px){.lamina{aspect-ratio:21/9;}}
.lamina img{width:100%;height:100%;object-fit:cover;}
/* Foto de CONJUNTO (equipo, planos generales): se ve completa, sin recorte.
   La lamina toma la proporcion real de la imagen. Foto de OBJETO (fachada,
   interior) sigue recortando con .lamina: gana presencia. */
.lamina--completa{aspect-ratio:auto;background:transparent;}
.lamina--completa img{height:auto;object-fit:contain;}
.lamina img[alt]{background:linear-gradient(140deg,#22304a,#101828 70%,#1a2438);}
/* Ficha sobre fondo sólido, debajo de la imagen */
.ficha-obra{padding:var(--s5) var(--marco);}
.ficha-obra .fila-1{display:flex;flex-direction:column;gap:var(--s3);
  margin-bottom:var(--s4);}
@media (min-width:900px){.ficha-obra .fila-1{flex-direction:row;
  align-items:baseline;justify-content:space-between;gap:var(--s5);}}
.ficha-obra .lugar{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);
  margin-bottom:var(--aire-label);}
.ficha-obra .titulo{font-family:var(--f-display);font-weight:300;
  font-size:var(--t-display);line-height:var(--il-titular);letter-spacing:-.01em;}
.ficha-obra .datos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
  margin-top:var(--aire-linea);
  padding-top:var(--s3);border-top:1px solid var(--linea);}
@media (min-width:768px){.ficha-obra .datos{grid-template-columns:repeat(4,1fr);gap:var(--s4);}}
.ficha-obra .datos div{font-family:var(--f-mono);font-size:var(--u-micro);
  letter-spacing:.05em;color:var(--t2);line-height:1.4;}
.ficha-obra .datos span{display:block;font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);margin-bottom:4px;}
.ficha-obra .ver{margin-top:var(--s4);}
.obra .cola{padding-inline:var(--marco);}

/* ═══ PROCESO ═══ */
.proceso h2{margin-bottom:var(--s5);}
@media (min-width:768px){.proceso h2{max-width:22ch;margin-bottom:var(--s6);}}
.pasos{display:grid;grid-template-columns:1fr;gap:var(--s4);}
@media (min-width:600px){.pasos{grid-template-columns:1fr 1fr;}}
@media (min-width:1200px){.pasos{grid-template-columns:repeat(4,1fr);}}
.paso{padding-top:var(--s3);}
/* El divisor de cierre de PROCESO respira mas: cierra una lista de pasos,
   no un parrafo. Antes esto vivia como style= inline en el marcado. */
.proceso .regla-sec{margin-top:var(--s6);}
.paso .linea-crece{margin-bottom:var(--s3);}
/* Los pasos abren con linea igual que los servicios: mismo aire. */
.proceso .pasos{margin-top:var(--aire-linea);}
.paso .n{font-family:var(--f-mono);font-size:var(--u-label);letter-spacing:var(--tr-label);
  color:var(--c-brand);margin-bottom:var(--s2);}
.paso h4{font-family:var(--f-display);font-weight:400;font-size:var(--t-sub);
  margin-bottom:var(--s2);}
.paso p{font-size:var(--u-link);color:var(--t2);line-height:1.5;}

/* ═══ FAQ ═══ */
.faq h2{margin-bottom:var(--s5);}
.faq details{border-bottom:1px solid var(--linea);}
.faq details[open]{padding-bottom:var(--s3);}
.faq summary{font-family:var(--f-display);font-weight:400;font-size:var(--t-sub);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s3);padding:var(--s3) 0;min-height:52px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--f-mono);font-size:var(--u-link);
  color:var(--c-brand);flex-shrink:0;}
.faq details[open] summary::after{content:'—';}
.faq details p{color:var(--t2);line-height:1.6;padding-bottom:var(--s3);}
.faq details p + p{padding-top:var(--s2);}
@media (min-width:768px){.faq details p{max-width:72ch;}}
.accion{font-family:var(--f-mono);font-size:var(--u-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--t3);
  margin-top:var(--s3);padding:var(--s3) 0 var(--s5);}
.accion a{color:var(--c-brand);border-bottom:1px solid var(--c-brand);}
.mono-in{font-family:var(--f-mono);font-size:.92em;letter-spacing:.03em;}

/* ═══ CIERRE ═══ */
.cierre-cta{text-align:center;}
.cierre-cta h2{margin-bottom:var(--s3);}
.cierre-cta p{color:var(--t2);margin:0 auto var(--s4);}
@media (min-width:768px){.cierre-cta p{max-width:52ch;}}
.cierre-cta .btns{display:flex;flex-direction:column;gap:var(--s2);}
@media (min-width:600px){.cierre-cta .btns{flex-direction:row;justify-content:center;flex-wrap:wrap;}}

/* ═══════════════════════════════════════════════════════════════════
   AÑADIDO R2 · 2026-08-09 · secciones nuevas de la ficha del home.
   Nada de lo anterior fue modificado. Todo reusa tokens existentes.
   ═══════════════════════════════════════════════════════════════════ */

/* HERO · poster del video (la imagen vive bajo el degradado del aprobado) */
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;}
/* El glifo del play tambien va por token: la ley no exceptua iconos. */
.btn--play i{font-style:normal;font-size:var(--u-micro);line-height:1;}

/* MANIFIESTO */
/* Este es un TITULAR aunque el marcado sea <p>: hereda el mismo
   interlineado y tracking que h2. Un titular que no es h2 no puede
   quedarse fuera del sistema — era la causa de que este respirara
   distinto que el de servicios. */
.manifiesto .grande{font-family:var(--f-display);font-weight:300;font-size:var(--t-title);
  line-height:var(--il-titular);letter-spacing:-.025em;margin-bottom:var(--s5);}
@media (min-width:768px){.manifiesto .grande{max-width:22ch;}}
.manifiesto p.cuerpo{color:var(--t2);line-height:1.6;max-width:58ch;}
.manifiesto p.cuerpo + p.cuerpo{margin-top:var(--s3);}

/* SERVICIOS · misma rejilla que .pasos, tres columnas */
.servicios h2{margin-bottom:var(--s5);}
.servicios .rejilla{display:grid;grid-template-columns:1fr;gap:var(--s5);
  margin-top:var(--aire-linea);}
@media (min-width:900px){.servicios .rejilla{grid-template-columns:repeat(3,1fr);gap:var(--s6);}}
.servicio .linea-crece{margin-bottom:var(--s3);}
.servicio .n{font-family:var(--f-mono);font-size:var(--u-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--c-brand);margin-bottom:var(--s2);}
.servicio h3{font-family:var(--f-display);font-weight:400;font-size:var(--t-sub);
  line-height:var(--il-menor);margin-bottom:var(--s2);}
.servicio p{color:var(--t2);line-height:1.55;margin-bottom:var(--s3);}

.credito-obra{font-family:var(--f-mono);font-size:var(--u-label);letter-spacing:var(--tr-micro);
  color:var(--t3);margin-top:var(--s4);line-height:1.8;}
.credito-obra a{color:var(--t2);border-bottom:1px solid var(--linea-2);text-decoration:none;}
.ficha-obra .sub{max-width:58ch;}

.equipo .cuerpo{color:var(--t2);max-width:62ch;line-height:1.6;}
.equipo .cuerpo + .cuerpo{margin-top:var(--s3);}
.cierre-equipo{font-family:var(--f-display);font-weight:300;font-size:var(--t-sub);
  line-height:var(--il-menor);margin-top:var(--s5);margin-bottom:var(--s4);max-width:28ch;}

/* ── LA OBRA DONADA · rescatada del index.php de junio ──
   Se trata como gratitud, no como logro de portafolio:
   el hecho y punto, sin adjetivos. */
.donada .par{display:grid;grid-template-columns:1fr;gap:var(--s5);}
@media (min-width:900px){.donada .par{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:end;}}
.donada h2{margin-bottom:var(--s4);}
/* La donación no gana peso con una foto: lo gana con la CIFRA y con su
   posición. Una imagen de stock la equipararía con lo que se vende —
   y una donación pesa por sobriedad, no por producción. */
.donada .cifra{font-family:var(--f-display);font-weight:300;
  font-size:var(--t-hero);line-height:var(--il-cifra);color:var(--c-brand);
  letter-spacing:-.03em;}
.donada .par{align-items:center;}
/* La donacion no puede anunciarse con el mismo kicker gris que todo lo
   demas. Se distingue con la marca institucional y una regla corta —
   sobria, no publicitaria: una donacion pesa por contencion. */
.kicker--donada{color:var(--c-brand);display:flex;align-items:center;
  gap:var(--s3);}
.kicker--donada::after{content:'';flex:1;max-width:120px;height:1px;
  background:var(--c-brand);opacity:.4;}
.donada h2 em{color:var(--c-brand);}
.donada .cifra-pie{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);
  margin-top:var(--s2);}
.donada p.cuerpo{color:var(--t2);max-width:56ch;}

/* Ficha de obra sin imagen: no debe heredar el aire de una lámina ausente */
.proyecto--sin-imagen .ficha-obra{padding-top:var(--s5);}
.proyecto--sin-imagen{border-top:1px solid var(--linea);}

/* MARCA DE PENDIENTE · solo standalone, se borra al cortar */
.pendiente{font-family:var(--f-mono);font-size:var(--u-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;background:var(--tad-vida);color:var(--void);
  padding:4px 9px;display:inline-block;margin-bottom:var(--s3);}
.lamina--vacia{display:flex;align-items:center;justify-content:center;}

/* ORIGAMI · captura */
.origami-cuerpo{padding-block:var(--costura-ini) var(--costura-fin);}
.origami .par{display:grid;grid-template-columns:1fr;gap:var(--s6);}
@media (min-width:900px){.origami .par{grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:start;}}


/* EQUIPO · lámina a sangre, como las obras */
.equipo .encabezado{padding-inline:var(--marco);padding-bottom:var(--s5);}
.equipo .cola{padding-inline:var(--marco);padding-top:var(--s5);}

/* TESTIMONIOS */
.testimonios h2{margin-bottom:var(--s5);}
.testimonios .rejilla{display:grid;grid-template-columns:1fr;gap:var(--s5);}
@media (min-width:768px){.testimonios .rejilla{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6);}}
.testimonio{border-left:1px solid var(--linea);padding-left:var(--s4);}
.testimonio q{display:block;font-family:var(--f-display);font-weight:300;font-style:italic;
  font-size:var(--t-sub);line-height:var(--il-bajada);quotes:'\201C' '\201D';}
.testimonio .quien{font-family:var(--f-mono);font-size:var(--u-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--t3);margin-top:var(--s3);}

/* LIGHTBOX DEL VIDEO */
.caja-video{position:fixed;inset:0;background:rgba(12,18,32,.97);display:none;
  align-items:center;justify-content:center;z-index:90;padding:var(--marco);}
.caja-video.abierta{display:flex;}
.caja-video .marco16{width:100%;max-width:1200px;aspect-ratio:16/9;}
.caja-video iframe{width:100%;height:100%;border:0;}
.caja-video .cerrar{position:absolute;top:var(--s4);right:var(--marco);background:transparent;
  border:1px solid var(--linea-2);color:var(--t1);font-family:var(--f-mono);
  font-size:var(--u-label);letter-spacing:var(--tr-label);padding:12px 18px;
  min-height:48px;cursor:pointer;}

/* BANDA DE REVISIÓN · se borra al cortar */
.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:10px var(--marco);text-align:center;line-height:1.5;}