/* ============================================================
   FACOMT v2 — sistema de diseño
   Concepto nuevo. NO es una evolución de la hoja anterior: el
   registro cambió de editorial duro (bandas de color a sangre,
   Poppins 800, filos rectos) a claro y aireado (fondo hueso,
   tarjetas pálidas, tipografía ligera, píldoras).

   Lo que SÍ se conserva del sitio anterior, porque ya estaba
   aprobado: el hero de scroll-scrub, el corte de dos barras y la
   maqueta del cierre.
   ============================================================ */

:root{
  /* --- color de marca (no se toca) --- */
  --vino:#8d2f57;
  --vino-osc:#6c2342;
  --teal:#2a8380;
  --teal-fondo:#226f6c;     /* teal como FONDO con texto: el de marca da 4.5:1 justo */
  --magenta:#d51c5b;
  --magenta-osc:#a81145;   /* magenta como FONDO con texto blanco: el de marca da 4.4:1 */

  /* --- el fondo del concepto nuevo --- */
  --hueso:#f7f6f2;          /* el fondo de toda la página */
  --papel:#ffffff;
  --sage:#e9eee7;
           /* banda verde pálido */
  --sage-claro:#eff2ec;     /* tarjeta verde pálido */
  --sage-hondo:#dbe3d8;     /* filos y separadores sobre sage */
  --sage-panel:#e0e7dd;     /* escalón de tono: el panel de la ficha */
  --sage-panel-filo:#cdd8c9;/* el canto oscuro que marca la división */

  /* Tinta suave, no negro. El negro se fue del proyecto a propósito. */
  --tinta:#26282c;
  --gris:#64686c;
  --linea:rgba(38,40,44,.14);
  --linea-sutil:rgba(38,40,44,.07);

  /* --- tipografía ---
     El peso ligero es la mitad del concepto. Los titulares van en
     300-400; el 700/800 se reserva para versalitas y cifras. */
  --f-display:'Poppins','Gilroy','Avenir Next',system-ui,-apple-system,sans-serif;
  --f-texto:'Nunito Sans','Avenir Next','Avenir',system-ui,-apple-system,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1320px;
  /* El alto del menú. Vive aquí porque no lo usa sólo la barra: la franja
     de las fichas arranca exactamente donde el menú termina, y si cada uno
     llevara su propio número se separarían al cambiar el alto de ventana
     —el clamp va en vh, no en px fijos—. */
  --nav-alto:clamp(66px,7.4vh,84px);
  --seccion:clamp(58px,8vw,124px);
  /* La cuña de la cabecera de ficha. El tono que pidió el cliente es el
     de la cara iluminada; los otros dos son el mismo color oscurecido,
     para que el volumen se lea como sombra propia y no como otro color. */
  --magenta-cuna:#c4345c;
  --magenta-cuna-media:#a72b4d;
  --magenta-cuna-honda:#7e1f38;
  --radio:14px;             /* esquinas redondeadas: antes eran 3px */
  --radio-chico:10px;

  --sombra:0 1px 2px rgba(38,40,44,.04),0 12px 34px rgba(38,40,44,.06);
  --sombra-alta:0 2px 6px rgba(38,40,44,.06),0 26px 60px rgba(38,40,44,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;background:var(--hueso);color:var(--tinta);
  font-family:var(--f-texto);font-size:clamp(1rem,1.05vw,1.06rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--f-display);margin:0;letter-spacing:-.02em;line-height:1.12}
h1{font-weight:300;font-size:clamp(2.2rem,5.2vw,4rem)}
h2{font-weight:300;font-size:clamp(1.8rem,3.8vw,3rem)}
h3{font-weight:400;font-size:clamp(1.2rem,2vw,1.6rem)}
h4{font-weight:600;font-size:1.02rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:min(100%,var(--maxw));margin-inline:auto;padding-inline:var(--gutter)}
.seccion{padding-block:var(--seccion)}
.seccion--sage{background:var(--sage)}
.seccion--papel{background:var(--papel)}

.salta{position:absolute;left:-9999px;top:0;z-index:999}
.salta:focus{left:12px;top:12px;background:var(--vino);color:#fff;padding:12px 18px;border-radius:100px}

/* ---------- versalitas: la etiqueta del concepto ---------- */
.epigrafe{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(.66rem,.9vw,.74rem);
  letter-spacing:.26em;text-transform:uppercase;color:var(--gris);
  margin:0 0 1.4em;
}
.epigrafe--vino{color:var(--vino)}
.epigrafe--claro{color:#fff}

/* El filo corto bajo los titulares, como en la referencia. */
.filo{width:54px;height:2px;background:var(--vino);border:0;margin:1.4em 0}
.filo--teal{background:var(--teal)}

/* ---------- píldoras ---------- */
.pildora{
  display:inline-flex;align-items:center;gap:.9em;
  min-height:52px;padding:.9em 1.7em;border-radius:100px;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.72rem,.95vw,.8rem);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.pildora .flecha{transition:transform .25s ease}
.pildora:hover .flecha{transform:translateX(6px)}
.pildora--vino{background:var(--vino);color:#fff;box-shadow:0 12px 30px -14px rgba(141,47,87,.8)}
.pildora--vino:hover{background:var(--vino-osc)}
.pildora--blanca{background:var(--papel);color:var(--tinta);box-shadow:var(--sombra)}
.pildora--blanca:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.pildora--linea{border-color:var(--linea);color:var(--tinta)}
.pildora--linea:hover{background:var(--tinta);color:var(--hueso);border-color:var(--tinta)}

/* ---------- enlace con flecha ---------- */
.mas{
  display:inline-flex;align-items:center;gap:.7em;text-decoration:none;
  font-family:var(--f-display);font-weight:600;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta);padding-block:10px;
}
.mas .flecha{transition:transform .25s ease}
.mas:hover .flecha{transform:translateX(6px)}

/* ============================================================
   BARRA
   Sin banda propia: flota sobre el fondo hueso. Sólo el imagotipo,
   sin la palabra — instrucción de Johonatan. El layout de
   referencia la trae con palabra; cambiarlo es una línea.
   ============================================================ */
/* Sin banda propia: la barra flota sobre lo que haya detrás. Con fondo
   translúcido se marcaba un renglón de otro tono encima del hero. */
/* Sin banda mientras se ve el hero: ahí abajo hay render y video, y la
   barra tiene que dejarlos pasar. Ya en el contenido sí toma fondo, o el
   menú se pierde contra las secciones. Lo enciende facomt.js. */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;background:none;
  transition:background .3s ease,box-shadow .3s ease;
}
/* Velo, no banda. Sin nada los enlaces se caían a 2.93:1 sobre el tramo
   de calle del video. Esto es un degradado que se desvanece: no marca
   filo ni cambia el tono del hero, sólo le da piso al texto. Se apaga
   cuando la barra ya tiene su fondo propio.

   Y arranca APAGADO: sólo hace falta cuando atrás corre el video, que
   trae cuadros oscuros. Sobre el render de portada estorba — en las
   interiores, cuyo render es de un verde hondo, se leía como una banda
   blanca pegada arriba al cargar. Lo enciende hero.js (--velo-nav) en el
   mismo instante en que las barras del corte destapan el video; en
   contacto.html, que no tiene scrub, nunca se enciende. */
.nav::before{
  content:"";position:absolute;inset:0 0 auto 0;height:190%;z-index:-1;
  pointer-events:none;transition:opacity .3s ease;
  opacity:var(--velo-nav, 0);
  background:linear-gradient(to bottom,
    rgba(247,246,242,.92) 0%, rgba(247,246,242,.62) 42%, rgba(247,246,242,0) 100%);
}
.nav--fondo::before{opacity:0}
.nav--fondo{
  background:rgba(247,246,242,.92);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 rgba(38,40,44,.07);
}
.nav__in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);min-height:var(--nav-alto)}
.nav__logo{display:block;flex:none;padding-block:8px}
.nav__logo img{height:clamp(32px,3.8vw,42px);width:auto}
.nav__links{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,38px);
  list-style:none;margin:0 auto 0 clamp(12px,3vw,52px);padding:0;
}
.nav__links a{
  text-decoration:none;position:relative;white-space:nowrap;
  font-family:var(--f-display);font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:14px 2px;color:var(--tinta);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;
  background:var(--vino);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:none}
.nav__links .movil-tel{display:none}
.nav__cta{flex:none}

.hamb{
  display:none;flex:none;width:46px;height:46px;margin-left:auto;
  background:none;border:1px solid var(--linea);border-radius:100px;
  cursor:pointer;position:relative;
}
.hamb span{
  position:absolute;left:13px;right:13px;height:2px;background:var(--tinta);
  transition:transform .25s ease,opacity .2s ease;
}
.hamb span:nth-child(1){top:16px}
.hamb span:nth-child(2){top:22px}
.hamb span:nth-child(3){top:28px}
body.menu-abierto .hamb span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-abierto .hamb span:nth-child(2){opacity:0}
body.menu-abierto .hamb span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1060px){
  .hamb{display:block}
  .nav__cta{display:none}
  /* .nav trae backdrop-filter, y eso lo vuelve el bloque contenedor de
     sus hijos position:fixed: el alto va explícito o la capa se queda
     del alto de la barra. Es el mismo tropiezo de la versión anterior. */
  .nav__links{
    position:fixed;top:0;left:0;width:100%;
    height:100vh;height:100dvh;z-index:-1;
    margin:0;flex-direction:column;justify-content:center;align-items:flex-start;
    gap:clamp(10px,3vh,26px);padding:22vh var(--gutter) var(--gutter);
    background:var(--hueso);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
    overflow-y:auto;
  }
  body.menu-abierto .nav__links{opacity:1;visibility:visible;transform:none}
  .nav__links a{font-size:clamp(1.5rem,6.5vw,2.2rem);letter-spacing:-.02em;text-transform:none;font-weight:300}
  .nav__links a::after{display:none}
  .nav__links li:last-child{margin-top:auto;padding-top:24px}
  .nav__links .movil-tel{
    display:inline-block;color:var(--vino);font-weight:700;
    font-size:1.05rem !important;letter-spacing:0 !important;font-family:var(--f-texto) !important;
  }
}
body.menu-abierto{overflow:hidden}

/* ============================================================
   PORTADA — el render, encima del lienzo del hero
   Vive DENTRO de #heroStage, no como sección aparte. Separadas
   quedaba un corte duro entre el render (maqueta sage) y el primer
   cuadro del video (estudio gris): dos materiales a tope. Aquí el
   render se disuelve sobre el cuadro con el scroll — --p lo escribe
   hero.js — y la costura desaparece.
   ============================================================ */
#portada{
  position:absolute;inset:0;z-index:5;isolation:isolate;
  display:grid;align-content:center;
  padding-block:clamp(96px,13vh,150px) clamp(40px,8vh,90px);
  opacity:calc(1 - var(--p, 0));
  pointer-events:none;
}
#portada > *{pointer-events:auto}
#portada__img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:right center;
}
/* El render tiene el monumento a la derecha y aire a la izquierda: ahí
   va la copy. En angosto se recorre para no perder el monumento. */
/* El velo toma el color del render de su página. Los renders de las
   interiores vienen sobre un verde mucho más hondo que el de la portada;
   con un velo pálido salía un parche claro encima del verde. */
#portada{--velo:226,233,225}
body.verde-hondo #portada{--velo:160,187,174}
/* El vino de marca sobre el verde hondo de los renders nuevos da 3.9:1.
   Aquí va el tono profundo, que sí pasa. */
body.verde-hondo #portada .epigrafe--vino{color:var(--vino-osc)}
#portada::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to right,
    rgba(var(--velo),.94) 0%, rgba(var(--velo),.7) 34%, rgba(var(--velo),0) 62%);
}
/* En las interiores ese velo de lado a lado APLANA el render: su tono
   coincide casi exacto con el de la imagen (Δluminancia .01), así que no
   se lee como un cambio de color sino como un bloque liso que se come el
   marco blanco y el arbolado. En index no se nota porque ahí la mitad
   izquierda del render ya es cielo vacío.

   Aquí va HALO, no velo: una mancha suave detrás de la copy que se
   desvanece antes de llegar al contenido de la imagen. Mismo recurso del
   cierre inmersivo, que ya está aprobado.

   Y va colgado del BLOQUE DE TEXTO, no del viewport: la copy tiene
   max-width, así que en pantallas anchas ocupa una fracción cada vez
   menor. Un halo medido en % de pantalla se le despegaba — a 1024 el
   titular de contacto se salía por la derecha y caía a 2.84:1.

   El texto conserva su piso —sin nada, el titular aterriza sobre pixeles
   oscuros del render y se cae a 1.0:1— y la imagen se ve entera. */
@media (min-width:901px){
  /* El velo de lado a lado APLANA el render: su tono coincide casi exacto
     con el de la imagen (Δluminancia .01), así que no se lee como un
     cambio de color sino como un bloque liso que se come el marco blanco
     y el arbolado. En index no se nota porque ahí la mitad izquierda del
     render ya es cielo vacío.

     Aquí el mismo velo se recoge a una mancha centrada en la copy, que
     se desvanece antes de llegar al contenido de la imagen. El texto
     conserva su piso —sin nada, el titular aterriza sobre pixeles oscuros
     del render y se cae a 1.0:1— y la imagen se ve entera.

     Se probaron dos alternativas que NO funcionan, por si alguien las
     vuelve a intentar: colgar el halo del bloque de texto (en las orillas
     del bloque —epígrafe arriba, subtítulos abajo— el degradado ya viene
     desvanecido y el contraste se cae), y resplandor por glifo con
     text-shadow (se ve bien, pero con tipografía ligera el piso real
     entre trazo y trazo es el render, no el resplandor). */
  body.verde-hondo #portada::before{
    background:radial-gradient(52% 54% at 23% 50%,
      rgba(var(--velo),.97) 0%, rgba(var(--velo),.92) 56%, rgba(var(--velo),0) 84%);
  }
}

/* Va dentro del .wrap, no ES el .wrap: encimarle max-width al wrap lo
   centraba (gana sobre el width y el margin-inline:auto lo manda al
   medio) y el titular chocaba con la pista de arranque. */
.portada__dicho{max-width:min(100%,620px);margin-right:auto}
#portada h1{font-size:clamp(2rem,4.2vw,3.35rem);margin-bottom:.1em}
.portada__sub{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.7rem,.95vw,.78rem);letter-spacing:.24em;text-transform:uppercase;
  color:var(--tinta);margin:0 0 .5em;
}
/* El segundo subtítulo va un punto más claro que el primero, pero no
   tanto: #4a4e52 se calibró contra el velo pálido de index y sobre el
   verde hondo de las interiores se queda en 3.6:1. Este tono aguanta los
   dos fondos y sigue leyéndose como secundario. */
.portada__sub + .portada__sub{color:#353a3f;margin-bottom:0}
.portada__lado{
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
  display:grid;gap:.9em;text-align:right;
  font-family:var(--f-display);font-weight:600;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  /* Va sobre la parte cargada del render: en --gris daba 3.16:1. */
  color:var(--tinta);
}
@media (max-width:900px){
  /* La vertical trae el sujeto centrado; el 64% era para salvar el
     monumento cuando se recortaba la horizontal.

     Y se SUBE. El render es 9:16 y la pantalla del teléfono es más
     alargada, así que a "cover" la imagen cabe exacta de alto y no sobra
     nada que recorrer: object-position vertical no mueve un pixel. Para
     subirla hay que agrandarla un punto y anclarla abajo. Con --sube-img
     al 14%, lo que estaba a la mitad del render queda al 43% de la
     pantalla: el sujeto se despega del bloque de texto, que empieza al
     59%. Es el único mando que hay que tocar si se quiere más o menos. */
  /* SUBIR EL RENDER. Hay dos formas y se usa la que cada imagen admite.

     Las tres interiores traen el render ya ALARGADO hasta la proporción
     del teléfono (941x2037): su borde de abajo es verde liso, así que se
     prolongó en el propio archivo. Así entran a "cover" sin recortar un
     solo pixel de ancho —el letrero del muro se ve completo— y el sujeto
     sube solo, porque abajo hay una franja limpia donde cae la copy.

     Index no admite eso: su render remata en follaje desenfocado y al
     prolongarlo salía una mancha turbia. Ahí se sube a la antigua,
     agrandando un punto y anclando abajo. Cuesta ancho: se ve el 72% en
     vez del 82%. Si algún día llega un render de inicio con el borde
     limpio, se alarga como los otros y esto se puede quitar. */
  #portada__img{
    object-position:center;
    --sube-img:0%;
    top:calc(-1 * var(--sube-img));
    height:calc(100% + var(--sube-img));
  }
  body.inicio #portada__img{--sube-img:14%}
  /* Las alargadas se anclan ABAJO. En una pantalla alta su proporción
     coincide con la del teléfono y no se recorta nada, pero en una corta
     —un 375x667— la imagen queda más alta que la ventana y sí hay recorte
     vertical. Centrada, ese recorte se come parte de la franja limpia de
     abajo y la copy vuelve a caer sobre la parte cargada: el epígrafe de
     obra-publica se iba a 3.78:1. Anclada abajo, lo que se pierde es
     cielo, que es lo que sobra. */
  body.verde-hondo #portada__img{object-position:center bottom}
  #portada::before{
    /* Aquí lo usan LAS CUATRO páginas: el halo del verde hondo sólo vive
       de 901px para arriba, así que en teléfono las interiores caen a este
       mismo velo. (El comentario anterior decía lo contrario.)

       Va anclado en PÍXELES DESDE ABAJO, no en % del alto. La copy está
       pegada al canto inferior, así que su distancia al borde es casi la
       misma en un 667 que en un 932 —medido: 319, 325 y 335px—, mientras
       que en % el velo se le despegaba en cada pantalla. De ahí venía la
       meseta al 95% hasta el 58% del alto: estirarlo era la única forma de
       que alcanzara al texto en la pantalla más corta. El precio era que
       el render quedaba limpio en un 2% del alto, o sea tapado.

       Medido contra los tres renders, componiendo imagen y velo y buscando
       el pixel más oscuro bajo cada renglón: el peor contraste —el
       epígrafe de las interiores, que es el que manda— pasa de 4.78:1 a
       4.73:1, y la imagen queda limpia en un 35% del alto en vez de un 2%.

       El texto SIGUE necesitando velo: sin él el titular de index cae a
       1.27:1, porque el logo del render queda justo detrás. Lo que sobraba
       era todo lo que cubría por encima de la copy. */
    background:linear-gradient(to top,
      rgba(var(--velo),calc(var(--velo-a) * .92)) 0,
      rgba(var(--velo),var(--velo-a)) var(--velo-sube),
      rgba(var(--velo),calc(var(--velo-a) * .28)) calc(var(--velo-sube) + 50px),
      rgba(var(--velo),0) calc(var(--velo-sube) + 110px));
  }
  /* Hasta dónde sube la copy sobre el canto de abajo, medido en cada
     página a 375x812: index llega a 335px (el titular), obra-publica y
     mantenimiento a 314px (su epígrafe) y contacto a 404px, porque su
     bloque es más alto. La meseta se corta justo encima de eso; lo que
     sigue es el desvanecido.

     Index lleva la suya porque es la que más imagen puede enseñar: con la
     de contacto perdería once puntos de render por un texto que no tiene.
     Las tres verde-hondo comparten número —la clase no las distingue— y
     manda la más alta, que es contacto. */
  #portada{--velo-sube:425px}
  body.inicio #portada{--velo-sube:355px}

  /* CUÁNTO velo, no sólo hasta dónde.
     Con los renders horizontales recortados la copy caía encima del sujeto
     y hacía falta un 95% de opacidad: el resultado era una plancha verde
     que se comía el render, que es justo de lo que se quejó el cliente.

     Con los renders verticales el sujeto queda arriba y abajo hay aire, así
     que se puede bajar mucho. Se midió, elemento por elemento, la opacidad
     mínima que mantiene 4.5:1 sobre el peor pixel de cada renglón:

       index        titular .62  subtítulo .60                -> se usa .66
       interiores   subtítulo .10  titular .62  epígrafe .66  -> se usa .68

     El .66 del epígrafe es DESPUÉS de alargar los renders: antes pedía
     .74, porque la copy caía sobre la parte cargada de la imagen.

     Quien manda es el epígrafe de 11px en vino: los subtítulos no
     necesitan casi nada porque caen sobre el aire claro del render.

     Y el velo se aclara: con el verde de 160,187,174 —calibrado para los
     renders viejos— el epígrafe no pasaba de 4.73:1 ni con opacidad total,
     porque el techo lo ponía el propio color del velo. Con el claro, el
     mismo epígrafe pasa con .74 en vez de .94. */
  /* Con la misma especificidad que body.verde-hondo #portada, que si no
     gana y las interiores se quedan con el velo oscuro. */
  #portada,
  body.verde-hondo #portada{--velo:226,233,225;--velo-a:.68}
  body.inicio #portada{--velo-a:.66}
  /* Contacto pide más: su bloque de copy es el más alto de las cuatro
     —el epígrafe le queda a 404px del canto de abajo contra 314 de las
     otras— y ahí ya no cae sobre la franja limpia sino sobre el cristal
     del edificio. Con .68 su epígrafe se quedaba en 3.93:1. */
  body.contacto #portada{--velo-a:.80}
  /* La copy se va al canto de abajo, y ahí abajo vive la pista
     "Desplaza" — que va en z-index 7, encima de la portada. Sin este
     colchón el aro animado late literalmente sobre los subtítulos: a
     390x844 el aro ocupa y 724-774 y el segundo subtítulo y 758-776.
     El colchón deja la copy arriba del aro, con aire. */
  #portada{align-content:end;padding-block:clamp(88px,12vh,140px) clamp(128px,17vh,180px)}
  .portada__lado{display:none}
}

/* ============================================================
   HERO SCROLL-SCRUB — se conserva del sitio anterior
   El scroll mueve el video cuadro por cuadro. --hero-screens es
   cuántas pantallas dura. HOLD (en hero.js) y --hero-screens están
   ATADOS: si se mueve uno, se mueve el otro en la misma proporción
   o cambia el ritmo de la animación.
   ============================================================ */
/* Estos valores son los de las dos interiores (la portada trae los
   suyos, más abajo). Bajaron de 12/7/5 con la cuenta 12 x (1 - 0.14) =
   10.75 x (1 - 0.04), o sea el mismo ritmo de video con pantalla y
   media menos de scroll muerto.

   OJO: esa cuenta partía de que las interiores tenían hold 0.14. Hoy
   manifest-calle.js y manifest-sala.js traen hold 0.04 — el mismo de la
   portada—, así que a estas pantallas les sobra un poco de scroll y su
   video corre ~4% más lento que el de la portada. Se deja como está
   porque se ve bien; para emparejarlo, bajar a 10.5 / 6.1 / 4.4. */
#hero{--hero-screens:10.75;position:relative;
  height:calc((var(--hero-screens) + 1) * 100vh);
  height:calc((var(--hero-screens) + 1) * 100svh)}
#heroStage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--hueso)}
#heroCanvas{width:100%;height:100%;display:block}
@media (max-width:760px){ #hero{--hero-screens:6.3} }
@media (max-width:760px) and (orientation:landscape){ #hero{--hero-screens:4.5} }

/* La portada lleva sus propias pantallas porque lleva su propia pausa
   final: su HOLD bajó de 0.16 a 0.04 (ver hero.js) y las pantallas
   bajan con él para que el video se siga viendo al mismo ritmo.
   12 x (1 - 0.16) = 10.5 x (1 - 0.04). Las interiores llevan las suyas,
   arriba. */
body.inicio #hero{--hero-screens:10.5}
@media (max-width:760px){ body.inicio #hero{--hero-screens:6.1} }
@media (max-width:760px) and (orientation:landscape){ body.inicio #hero{--hero-screens:4.4} }

.layer{position:absolute;inset:0;display:grid;pointer-events:none;opacity:0;transition:opacity .45s ease}
.layer.on{opacity:1}
.layer .inner{align-self:end;padding:0 var(--gutter) clamp(48px,10vh,120px);max-width:calc(980px + var(--gutter))}
.layer h2{margin:0 0 .35em;font-weight:300}
.layer p{font-size:clamp(.98rem,1.5vw,1.25rem);line-height:1.5;max-width:46ch;opacity:.94}
.on-dark{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.on-dark::before{
  content:"";position:absolute;inset:auto 0 0 0;height:68%;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.66),transparent);
}

/* ---------- pista de arranque ----------
   Va ABAJO del hero, no al centro: centrada chocaba con el titular.
   Y es un gesto gráfico, no un renglón de texto: un aro con la flecha
   cayendo y una onda que sale del aro. La palabra queda de apoyo. */
#desplaza{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:clamp(10px,1.4vh,16px);
  padding-bottom:clamp(24px,5vh,56px);
  opacity:0;transition:opacity .55s ease;
}
#desplaza.on{opacity:1}
#desplaza.fuera{opacity:0}

.desplaza__aro{
  position:relative;display:grid;place-content:center;
  width:clamp(50px,5vw,62px);aspect-ratio:1;
  border-radius:100px;border:1.5px solid rgba(38,40,44,.28);
  background:rgba(247,246,242,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* La onda que sale del aro: es lo que lo hace leerse como invitación
   y no como un icono quieto. */
.desplaza__aro::before,.desplaza__aro::after{
  content:"";position:absolute;inset:-1.5px;border-radius:100px;
  border:1.5px solid var(--vino);
  animation:desplazaOnda 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.desplaza__aro::after{animation-delay:1.3s}
@keyframes desplazaOnda{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(1.75);opacity:0}
}
.desplaza__flecha{
  width:clamp(18px,1.9vw,22px);height:auto;
  fill:none;stroke:var(--vino);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  animation:desplazaCae 1.9s cubic-bezier(.5,0,.35,1) infinite;
}
@keyframes desplazaCae{
  0%{transform:translateY(-22%);opacity:0}
  28%{opacity:1}
  62%{transform:translateY(22%);opacity:1}
  100%{transform:translateY(46%);opacity:0}
}
/* Velo bajo la pista: la palabra se caía a 3.12:1 sobre el render. */
#desplaza::after{
  content:"";position:absolute;inset:auto 0 0 0;height:clamp(150px,22vh,230px);
  z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(238,242,235,.88),rgba(238,242,235,0));
}
.desplaza__txt{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.6rem,.82vw,.68rem);letter-spacing:.28em;text-transform:uppercase;
  color:var(--tinta);
}

/* ---------- EL CORTE: las dos barras del cambio de secuencia ----------
   Entran del filo, se topan al centro y se separan. El filo donde se
   topan lleva la diagonal del isotipo. La barra teal es --traslape más
   ANCHA y su diagonal es la MISMA que la vino: así monta parejo de
   arriba a abajo. Si el traslape se mete en el punto del clip-path en
   vez de en el ancho, el encimado sale en cuña y se ve una línea de
   aire. Y ojo: "#corte i" (1,0,1) le gana a ".corte__teal" (0,1,0), por
   eso el ancho va con el id delante. */
/* z-index 70: por ENCIMA de la barra (60). El corte es un barrido a
   pantalla completa —si pasa por debajo del menú se lee como error, y
   además dejaba el texto del menú sobre el vino a 2.3:1 durante el
   segundo y pico que dura. Ni #hero ni #heroStage abren contexto de
   apilamiento (sticky sin z-index), así que los dos números compiten
   directo y este gana. */
#corte{--filo:clamp(40px,7vw,130px);--traslape:3px;position:fixed;inset:0;z-index:70;pointer-events:none;visibility:hidden}
#corte.activo{visibility:visible}
#corte i{
  position:absolute;top:-1px;bottom:-1px;display:block;
  width:calc(50% + var(--filo) / 2);
  transition:transform .52s cubic-bezier(.62,.02,.24,1);will-change:transform;
}
.corte__vino{left:0;background:var(--vino);clip-path:polygon(0 0, 100% 0, calc(100% - var(--filo)) 100%, 0 100%);transform:translate3d(-101%,0,0)}
.corte__teal{right:0;background:var(--teal-fondo);clip-path:polygon(var(--filo) 0, 100% 0, 100% 100%, 0 100%);transform:translate3d(101%,0,0)}
#corte .corte__teal{width:calc(50% + var(--filo) / 2 + var(--traslape))}
#corte.cerrando i{transform:translate3d(0,0,0)}
#corte.abriendo i{transition-duration:.62s;transition-timing-function:cubic-bezier(.36,.06,.2,1)}
#corte.abriendo .corte__vino{transform:translate3d(-101%,0,0)}
#corte.abriendo .corte__teal{transform:translate3d(101%,0,0)}

/* ---------- pantalla de carga ---------- */
#boot{position:fixed;inset:0;z-index:80;background:var(--hueso);display:grid;place-content:center;gap:18px;justify-items:center;transition:opacity .5s ease}
#boot.gone{opacity:0;pointer-events:none}
#bootBar{width:min(280px,60vw);height:2px;background:rgba(38,40,44,.12);overflow:hidden}
#bootFill{height:100%;width:0;background:var(--vino);transition:width .2s ease}
#bootTxt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;font-family:var(--f-display);font-weight:600}

/* ============================================================
   ACCESOS + DECLARACIÓN
   Cuatro tarjetas pálidas a la izquierda, filo vertical, y a la
   derecha el claim. Es el bloque que sigue al hero en el layout.
   ============================================================ */
.accesos-bloque{
  display:grid;gap:clamp(30px,4.4vw,66px);
  grid-template-columns:1.3fr 1fr;
  align-items:center;
}
@media (max-width:1000px){ .accesos-bloque{grid-template-columns:1fr} }
.accesos{display:grid;gap:clamp(10px,1.2vw,14px);grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))}
.acceso{
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(22px,3vw,34px);
  background:var(--sage-claro);border-radius:var(--radio);
  padding:clamp(16px,1.9vw,22px);text-decoration:none;color:var(--tinta);
  min-height:clamp(142px,15vw,172px);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.acceso:hover{background:var(--papel);transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.acceso__icono{width:36px;height:36px;stroke:var(--tinta);stroke-width:1.15;fill:none;stroke-linecap:round;stroke-linejoin:round}
.acceso__pie{display:grid;gap:clamp(8px,1vw,12px);justify-items:start}
.acceso__t{font-family:var(--f-display);font-weight:500;font-size:clamp(.82rem,.98vw,.94rem);letter-spacing:-.01em;line-height:1.3}
.acceso .flecha{transition:transform .25s ease}
.acceso:hover .flecha{transform:translateX(5px)}

.declaracion{border-left:1px solid var(--linea);padding-left:clamp(22px,3.4vw,52px)}
.declaracion h2{max-width:14ch}
.declaracion p{color:var(--gris);max-width:44ch;margin-top:1.2em}
.declaracion .pildora{margin-top:clamp(22px,3vw,34px)}
@media (max-width:860px){ .declaracion{border-left:0;padding-left:0;border-top:1px solid var(--linea);padding-top:clamp(26px,4vw,40px)} }

/* ============================================================
   LAS DOS LÍNEAS — tarjeta con foto sangrando
   ============================================================ */
.lineas2{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.linea2{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radio);background:var(--sage-claro);
  min-height:clamp(300px,30vw,380px);
  display:grid;align-content:end;
  padding:clamp(26px,3vw,40px);
  text-decoration:none;color:var(--tinta);
  transition:transform .3s cubic-bezier(.3,0,.2,1),box-shadow .3s ease;
}
.linea2:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.linea2__img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 56%;
  /* La foto va lavada para que el registro siga siendo claro: a plena
     saturación rompe el aire del concepto. */
  filter:saturate(.62) brightness(1.06);
  transition:transform .6s cubic-bezier(.3,0,.2,1);
}
.linea2:hover .linea2__img{transform:scale(1.04)}
.linea2::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(247,246,242,.97) 0%,rgba(247,246,242,.86) 38%,rgba(247,246,242,.3) 74%,transparent 100%);
}
.linea2 h3{font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem)}
/* Sobre la foto lavada el --gris se queda en 4.30:1: aquí va un
   punto más oscuro, que no depende de qué foto le toque. */
.linea2 p{color:#4a4e52;max-width:34ch;margin:.7em 0 1.2em;font-size:.97rem}

/* ============================================================
   CIFRAS — banda sage con filos verticales
   ============================================================ */
.cifras2{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.cifra2{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);
  padding:clamp(16px,2.2vw,26px) clamp(14px,2vw,30px);
  border-left:1px solid var(--sage-hondo);
}
.cifra2:first-child{border-left:0;padding-left:0}
@media (max-width:980px){ .cifra2{border-left:0;border-top:1px solid var(--sage-hondo);padding-inline:0} .cifra2:first-child{border-top:0} }
.cifra2__icono{width:42px;height:42px;flex:none;stroke:var(--tinta);stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cifra2__n{font-family:var(--f-display);font-weight:300;font-size:clamp(2.1rem,3.8vw,3rem);line-height:1;letter-spacing:-.035em}
.cifra2__t{display:block;color:var(--gris);font-size:.9rem;margin-top:.3em;line-height:1.4}

/* ============================================================
   CONTACTO — el bloque del layout
   ============================================================ */
/* ============================================================
   NOSOTROS — historia, misión, visión y valores
   Todo el contenido sale del perfil institucional del cliente
   (FACOMT - Curriculum Organizado/Informacion para Pagina Web).
   Nada aquí es relleno inventado.
   ============================================================ */
.nos{display:grid;gap:clamp(46px,5.4vw,88px);margin-top:clamp(46px,5.4vw,88px)}
.nos-dos{
  display:grid;gap:clamp(26px,3.4vw,64px);
  grid-template-columns:minmax(min(100%,300px),.72fr) minmax(min(100%,420px),1fr);
}
@media (max-width:860px){ .nos-dos{grid-template-columns:1fr} }
.nos-dos h3{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.12;letter-spacing:-.025em;
  margin:0;
}
.nos-dos > div > p{
  margin:0 0 1em;color:var(--gris);
  font-size:clamp(.98rem,1.08vw,1.06rem);line-height:1.62;max-width:62ch;
}
.nos-dos > div > p:last-child{margin-bottom:0}

/* --- la línea de tiempo --- */
.hitos{
  display:grid;border-left:1px solid rgba(38,40,44,.16);
  margin-left:clamp(4px,.5vw,9px);
}
.hito{position:relative;padding:0 0 clamp(24px,2.8vw,38px) clamp(22px,2.3vw,40px)}
.hito:last-child{padding-bottom:0}
.hito::before{
  content:"";position:absolute;left:-4.5px;top:.42em;
  width:9px;height:9px;border-radius:50%;background:var(--vino);
}
.hito__anio{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(.68rem,.76vw,.76rem);letter-spacing:.2em;
  color:var(--vino);margin-bottom:.55em;
}
.hito h4{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.012em;
  font-size:clamp(1.02rem,1.32vw,1.18rem);line-height:1.3;margin:0 0 .35em;
  color:var(--tinta);
}
.hito p{
  margin:0;color:var(--gris);line-height:1.58;
  font-size:clamp(.9rem,1.02vw,.98rem);max-width:58ch;
}

/* --- misión y visión: una banda con filo, sin tarjetas ---
   Se probaron primero como dos tarjetas en papel sobre el sage. Pesaban
   de más: son dos párrafos, no dos productos. Con filo arriba y abajo
   quedan a la misma jerarquía que el resto de la sección. */
.mv{
  display:grid;gap:clamp(24px,3vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  padding-block:clamp(30px,3.4vw,54px);
  border-top:1px solid rgba(38,40,44,.14);
  border-bottom:1px solid rgba(38,40,44,.14);
}
.mv h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.68rem,.76vw,.76rem);letter-spacing:.22em;text-transform:uppercase;
  color:var(--vino);margin:0 0 .85em;
}
.mv p{
  margin:0;color:var(--tinta);line-height:1.58;
  font-size:clamp(.98rem,1.1vw,1.08rem);font-weight:300;
}

/* --- valores numerados, no píldoras ---
   En píldoras parecían etiquetas de filtro, algo en lo que se puede dar
   clic. Numerados se leen como lo que son: una lista de principios. */
.valoresB{
  display:grid;gap:clamp(18px,2.2vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));
}
.valorB{border-top:1px solid rgba(38,40,44,.16);padding-top:clamp(11px,1.2vw,17px)}
.valorB span{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(.64rem,.72vw,.72rem);letter-spacing:.16em;
  color:var(--vino);margin-bottom:.5em;
}
.valorB b{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(.98rem,1.12vw,1.08rem);letter-spacing:-.01em;color:var(--tinta);
}

/* ============================================================
   RESPONSIVO — el endurecido
   Nada de esto cambia el dibujo en escritorio. Son las cuatro cosas
   que se rompen en un teléfono de verdad y que no se ven en el
   emulador si sólo se mira el ancho.
   ============================================================ */

/* Safari en horizontal infla el texto por su cuenta y desarma las
   escalas de clamp(). */
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* el menú va fijo: sin esto, un salto a #nosotros deja el título
     debajo de la barra */
  scroll-padding-top:calc(var(--nav-alto) + 14px);
}

/* Palabras que no se pueden partir y a 320px se salen solas:
   números de contrato, correos y direcciones. */
.pie-dato dd,.obra-dato dd,.obra-riel dd,.error404__pie,
.hilada__pro,.sigue__meta,.mega__obra b{overflow-wrap:anywhere}

/* Renglones sueltos: una palabra sola en el último renglón de un
   titular se ve como error de armado. */
.obra-tope h1,.nos-dos h3,.error404 h1,.sigue__titulo,.hilada__nom,
.linea2 h3,.ctam__dicho h2,.pie-dicho h2{text-wrap:balance}
p,.hilada__d,.obra-riel dd{text-wrap:pretty}

/* Área táctil. El teléfono y el correo del pie son DESTINOS, no
   palabras dentro de una frase: con 20px de alto se fallan con el
   pulgar. El relleno crece el área sin mover el dibujo, porque va
   compensado con margen negativo. */
.pie-dato dd a,.pie-credito a,.error404__pie a,.obra-texto a,
.declaracion a,.formato a{padding-block:12px;margin-block:-12px}

/* Un enlace que el dedo va a tocar necesita foco visible también con
   teclado. El sitio ya lo tenía por partes; aquí queda parejo. */
a:focus-visible,button:focus-visible{outline:2px solid var(--vino);outline-offset:3px;border-radius:3px}

/* ============================================================
   404 — la página de error
   Vive en la raíz y por eso TODAS sus rutas son absolutas (/assets/…):
   el servidor la entrega desde cualquier profundidad de URL y con
   rutas relativas se quedaría sin hoja de estilos.
   ============================================================ */
.error404{display:grid;align-content:center;
  min-height:calc(100vh - var(--nav-alto));min-height:calc(100svh - var(--nav-alto))}
.error404__in{
  display:grid;gap:clamp(20px,3.4vw,58px);align-items:center;
  grid-template-columns:auto minmax(0,1fr);
}
@media (max-width:760px){ .error404__in{grid-template-columns:1fr;gap:clamp(12px,3vw,20px)} }
.error404__n{
  font-family:var(--f-display);font-weight:200;line-height:.86;
  font-size:clamp(5.2rem,14vw,13rem);letter-spacing:-.05em;
  color:var(--vino);opacity:.92;
}
.error404 h1{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.025em;
  font-size:clamp(1.6rem,3.2vw,2.7rem);line-height:1.08;margin:0;color:var(--tinta);
}
.error404 p{margin:1em 0 0;color:var(--gris);line-height:1.6;max-width:52ch;font-size:clamp(.98rem,1.08vw,1.06rem)}
.error404__ligas{display:flex;flex-wrap:wrap;gap:clamp(9px,1vw,14px);margin-top:clamp(20px,2.4vw,34px)}
.error404__pie{font-size:clamp(.88rem,.96vw,.94rem)}
.error404__pie a{color:var(--vino)}

/* --- el renglón legal y el crédito de autoría ---
   Va abajo de todo, separado por filo: es lo último que se lee y no
   compite con la navegación del pie. La opacidad es .74 y no menos:
   abajo de eso el gris se cae de AA contra la franja clara. */
.pie-credito{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(6px,1.4vw,26px);
  margin-top:clamp(18px,1.8vw,30px);
  padding-block-start:clamp(13px,1.3vw,21px);
  padding-inline:var(--pie-pad-bajo);
  border-top:1px solid var(--pie-borde);
}
/* Color explícito, NO opacidad. Con opacity el renglón se atenúa
   entero y el enlace de CAUCE se iba con él: el vino al 74% sobre la
   franja clara da 4.16:1 y se cae de AA. Con color propio, el gris da
   5.8:1 y el enlace conserva sus 7.5:1. */
.pie-credito p{
  margin:0;color:#5e6562;
  font-size:clamp(.72rem,.78vw,.82rem);line-height:1.5;
}
/* El subrayado va como text-decoration y NO como border-bottom: el
   relleno que le da área táctil al enlace empuja el borde 12px abajo
   y la raya se despega de la palabra. text-decoration sigue al texto. */
.pie-credito a{
  color:var(--vino);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(141,47,87,.4);
  transition:text-decoration-color .25s ease;
}
.pie-credito a:hover,.pie-credito a:focus-visible{text-decoration-color:var(--vino)}
.pie-credito a:focus-visible{outline:2px solid var(--vino);outline-offset:3px;border-radius:2px}
@media (max-width:640px){ .pie-credito{flex-direction:column;align-items:flex-start;gap:.5em} }

/* ============================================================
   ORGANIGRAMA — quién ejecuta la obra
   Tres niveles apilados, como las hiladas de un muro: el rótulo de
   la izquierda nombra el nivel y las personas corren a la derecha.

   Por qué NO es un árbol con líneas: el perfil institucional da
   nombre, cargo, profesión y responsabilidad — no da la línea de
   mando. Un árbol obliga a inventar quién le reporta a quién; las
   hiladas dicen lo mismo sin afirmar de más. Si algún día el cliente
   confirma el mando, el árbol vuelve; mientras tanto esto es lo
   verificable.

   Agregar a alguien es agregar un .hilada__p a su nivel. No hay
   cálculo de columnas que se despegue.
   ============================================================ */
.hiladas{display:grid;margin-top:clamp(28px,3.4vw,52px)}
.hilada{
  display:grid;gap:clamp(20px,2.8vw,48px);
  grid-template-columns:minmax(min(100%,210px),.36fr) minmax(0,1fr);
  padding-block:clamp(22px,2.8vw,38px);
  border-top:1px solid var(--linea);
}
.hilada:last-child{border-bottom:1px solid var(--linea)}
@media (max-width:820px){ .hilada{grid-template-columns:1fr;gap:clamp(14px,3vw,20px)} }

.hilada__rot{display:grid;align-content:start;gap:.5em}
.hilada__n{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1;letter-spacing:-.03em;
  color:var(--c);
}
.hilada__t{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.66rem,.74vw,.74rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta);
}
.hilada__d{color:var(--gris);font-size:clamp(.88rem,.96vw,.94rem);line-height:1.5;max-width:30ch}

.hilada__gente{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
/* Filo de color a la izquierda, no tarjeta: en tarjeta cada persona
   se volvía un producto en venta y la sección pesaba de más. */
.hilada__p{display:grid;gap:.3em;padding-left:clamp(13px,1.2vw,18px);border-left:3px solid var(--c)}
.hilada__cargo{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.6rem,.68vw,.68rem);letter-spacing:.18em;text-transform:uppercase;
  color:var(--c);
}
.hilada__nom{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1rem,1.16vw,1.1rem);line-height:1.22;color:var(--tinta);
  margin:0;
}
.hilada__pro{margin:0;color:var(--gris);font-size:clamp(.86rem,.94vw,.92rem);line-height:1.45}

/* Entra hilada por hilada, de arriba abajo: el orden lo da --i en el
   marcado, así se reordena sin tocar la hoja. */
.hiladas .hilada{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,0,.2,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.equipo-bloque.visto .hilada{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hiladas .hilada{opacity:1;transform:none;transition:none}
}

/* ============================================================
   FICHA DE OBRA — una página por proyecto
   Va sin scroll-scrub: son 16 y el peso se paga por página. El
   encabezado es la foto de remate con los datos duros encima.
   ============================================================ */
.obra-tope{
  /* BLOQUE, no banda. La banda a sangre no leía como contenedor: arrancaba
     en y=0 del documento —o sea sin techo— y el aire salía 2 a 1 (143px
     arriba contra 74 abajo) por el menú fijo. Aquí tiene los cuatro filos
     dichos y el aire parejo. */
  position:relative;overflow:hidden;background:var(--sage);
  /* Continuo hacia los lados: la franja va a sangre. Lo que la cierra no
     son cuatro filos sino DOS —el techo, que antes no existía porque
     arrancaba en y=0 del documento, y el piso, donde el sage cambia a
     blanco—. Sin bordes laterales ni esquinas: encajonarla la volvía el
     único elemento del sitio con contorno. */
  /* El verde pasa POR DETRÁS del menú: arranca en el canto de arriba de
     la página. Con margen —aunque fuera exacto al alto de la barra— el
     menú quedaba sobre hueso y ese escalón de tono se leía como una
     división. El alto de la barra se reserva con padding, no con margen,
     así que el contenido sigue librándola y el aire queda parejo: lo que
     se ve arriba del epígrafe es el mismo que queda abajo de los datos. */
  padding-block:calc(var(--nav-alto) + clamp(40px,4.6vw,78px)) clamp(40px,4.6vw,78px);
}
/* --- la cuña del canto izquierdo ---
   La misma idea de la pared del pie: un volumen de marca cortado en
   diagonal por arriba, a sangre por la izquierda y saliéndose por
   abajo. Aquí en el magenta que pidió el cliente.

   El ancho reproduce EXACTAMENTE dónde arranca el texto y le resta el
   aire: el .wrap va centrado con max-width, así que la primera letra cae
   a (100% - --maxw)/2 + --gutter de la orilla. Atado así, la cuña muere
   siempre a la misma distancia del titular en cualquier pantalla, y no
   hay ancho en el que se le encime. Antes salía del gutter a secas y en
   pantallas anchas quedaba a 70px del texto, despegada.

   La caída de la diagonal va en PX, atada al propio ancho (×1.4, la
   pendiente del boceto), no en porcentaje del alto: en porcentaje la
   inclinación cambia con lo que mida la banda, y como la cuña es
   angosta salía una espiga casi vertical en vez de un corte. */
.obra-tope{
  /* El aire entre la cuña y el texto. Lo usan la cuña y la rayita de los
     datos, que arranca exactamente donde la cuña termina: así las dos
     forman una L que sostiene el texto en vez de ignorarse. */
  --cuna-aire:clamp(12px,1.4vw,30px);
  /* Dónde MUERE la cuña: justo antes de la primera letra del titular.
     El .wrap va centrado con max-width, así que el texto arranca a
     (100% - --maxw)/2 + --gutter de la orilla; se le resta el aire. */
  --cuna-filo:calc(
    max(0px, (100% - var(--maxw)) / 2)
    + var(--gutter)
    - var(--cuna-aire)
  );
  /* Cuánto MIDE. Con tope: sin él, en pantallas anchas el margen
     izquierdo es enorme y la cuña llegaba a 1300px — dejaba de ser una
     cuña y se volvía medio fondo magenta. */
  --cuna:clamp(70px, 8.2vw, 160px);
}
.obra-tope::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  /* Se ancla por su filo DERECHO, no por el izquierdo: así queda
     siempre a la misma distancia del texto. Donde el margen es angosto
     el left sale negativo y la cuña se sale por la orilla, que es como
     debe verse; donde sobra margen, se queda flotando junto al texto. */
  left:calc(var(--cuna-filo) - var(--cuna));bottom:0;
  width:var(--cuna);
  height:85%;
  /* Degradado para que la cuña se lea SALIDA del plano y no como una
     mancha plana. Corre de la orilla de la pantalla hacia el texto: el
     tono limpio afuera y la sombra del lado del contenido, como si la
     pieza girara para meterse en la página. Mismo recurso que la pared
     del pie, que tampoco va en color plano. */
  background:linear-gradient(to right,
    var(--magenta-cuna) 0%,
    var(--magenta-cuna) 30%,
    var(--magenta-cuna-media) 70%,
    var(--magenta-cuna-honda) 100%);
  clip-path:polygon(100% 0, 100% 100%, 0 100%, 0 calc(var(--cuna) * 1.4));
}
/* La respuesta del lado derecho. Callada a propósito: sólo un escalón de
   tono. Sin ella la izquierda gritaba —118px de magenta con degradado— y
   la derecha la decía nada más la rayita de 1px; ese desnivel era lo que
   dejaba la composición abierta. Ancho simétrico al filo de la cuña. */
.obra-tope::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  /* Arranca abajo del menú: si sube hasta el canto se asoma por detrás de
     la barra, justo donde va el botón. */
  top:var(--nav-alto);right:0;bottom:0;
  /* Con tope, igual que la cuña: sin él, de 1920 para arriba se comía un
     tercio de la franja y dejaba de ser un filo para volverse una losa.

     El degradado va del tono hondo —pegado a la división, como sombra
     que proyecta el filo del bloque de texto— al verde plano hacia la
     orilla. El corte va en PX y no en porcentaje: en porcentaje el
     desvanecido se estira con el ancho de la barra y el canto se
     desdibuja; así el efecto se ve igual mida lo que mida. */
  width:min(var(--cuna-filo), clamp(56px,7vw,190px));
  background:linear-gradient(to right,
    var(--sage-panel-filo) 0,
    var(--sage-panel) 12px,
    var(--sage-panel) 100%);
}
.obra-tope > .wrap{position:relative;z-index:1}

/* --- la cuña y el escalón, en teléfono ---
   Los dos están atados a --cuna-filo, que es donde arranca el texto menos
   el aire. En escritorio ese número es grande —el .wrap va centrado con
   max-width de 1320px, así que sobra margen— y las dos piezas se leen. En
   teléfono no sobra nada: el filo cae a 8px, así que de una cuña de 70px
   se veían 8 y el escalón de la derecha medía 8px. O sea, los dos efectos
   desaparecían justo donde la ficha se ve más desnuda.

   Aquí la cuña se ancla al canto izquierdo y se hace angosta para que
   quepa ENTERA, y el texto se recorre lo que ella ocupa. Es la misma
   pieza, a la escala de la pantalla: sigue cortada en diagonal por arriba
   y saliéndose por abajo. */
@media (max-width:900px){
  .obra-tope{
    --cuna-aire:12px;
    --cuna:clamp(22px,6.5vw,30px);
  }
  .obra-tope::before{
    /* Pegada a la orilla y entera, no asomada. */
    left:0;
    height:72%;
    /* La diagonal es la misma pendiente del boceto (×1.4), pero sobre un
       ancho chico da una punta muy corta; se le da un mínimo para que el
       corte se lea como corte. */
    clip-path:polygon(100% 0, 100% 100%, 0 100%, 0 max(28px, calc(var(--cuna) * 1.4)));
  }
  .obra-tope::after{
    /* Sin el min() de escritorio, que aquí lo dejaba en 8px. */
    width:clamp(14px,4.5vw,20px);
  }
  /* El texto se quita de encima de la cuña: su ancho más el aire. El
     padding del .wrap ya trae el gutter, así que sólo se suma lo que
     ocupa la pieza. */
  .obra-tope > .wrap{
    padding-left:calc(var(--gutter) + var(--cuna) + var(--cuna-aire));
  }
}
.obra-miga{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6em;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.66rem,.74vw,.74rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-bottom:clamp(16px,1.8vw,26px);
}
.obra-miga a{color:var(--vino);text-decoration:none}
.obra-miga a:hover{text-decoration:underline}
.obra-tope h1{
  font-size:clamp(1.9rem,3.6vw,3.1rem);font-weight:300;
  line-height:1.08;letter-spacing:-.028em;margin:0;max-width:20ch;
}
.obra-tope > .wrap > p{
  margin:clamp(14px,1.5vw,22px) 0 0;color:var(--gris);
  font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.5;max-width:52ch;
}
/* --- los datos duros --- */
.obra-datos{
  /* El filo se alarga hasta tocar la cuña: margen negativo del mismo aire
     que las separa, y padding igual para que el texto no se recorra. */
  margin-left:calc(-1 * var(--cuna-aire));
  padding-left:var(--cuna-aire);
  display:grid;gap:clamp(18px,2vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin-top:clamp(30px,3.4vw,54px);
  padding-top:clamp(24px,2.6vw,40px);
  border-top:1px solid rgba(38,40,44,.14);
}
.obra-dato dt{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.64rem,.72vw,.72rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-bottom:.6em;
}
.obra-dato dd{
  margin:0;color:var(--tinta);line-height:1.45;
  font-size:clamp(.94rem,1.04vw,1.02rem);
}
.obra-dato dd.n{font-family:var(--f-display);letter-spacing:.02em;font-size:clamp(.86rem,.96vw,.94rem)}

/* --- el cuerpo de la ficha: riel pegado + secuencia ---
   Dos columnas. En la izquierda los datos duros, que se quedan pegados
   mientras se baja por la secuencia: si alguien llega desde una liga que
   le mandaron, el número de contrato lo tiene a la vista todo el tiempo.
   En la derecha la entradilla, el relato y las fotos. */
.obra-dos{
  display:grid;gap:clamp(30px,4vw,74px);
  grid-template-columns:minmax(min(100%,290px),.6fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){ .obra-dos{grid-template-columns:1fr} }
.obra-riel{
  display:grid;gap:clamp(20px,2.2vw,32px);
}
@media (min-width:901px){
  .obra-riel{position:sticky;top:clamp(96px,12vh,132px)}
}
.obra-riel > div{border-top:1px solid rgba(38,40,44,.16);padding-top:clamp(11px,1.2vw,16px)}
.obra-riel dt{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.62rem,.7vw,.7rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-bottom:.55em;
}
.obra-riel dd{
  margin:0;color:var(--tinta);line-height:1.45;
  font-size:clamp(.94rem,1.04vw,1.02rem);
}
.obra-riel dd.n{font-family:var(--f-display);letter-spacing:.02em}

.obra-texto p{
  margin:0 0 1em;color:var(--gris);line-height:1.62;
  font-size:clamp(.98rem,1.08vw,1.06rem);max-width:60ch;
}
.obra-texto p:first-child{
  color:var(--tinta);font-weight:300;
  font-size:clamp(1.12rem,1.42vw,1.38rem);line-height:1.45;
}
.obra-texto p:last-child{margin-bottom:0}

/* la secuencia: foto a todo el ancho de su columna, pie debajo */
.secuencia{display:grid;gap:clamp(30px,3.4vw,56px);margin-top:clamp(34px,4vw,62px)}
.secuencia figure{margin:0;display:grid;gap:clamp(10px,1.1vw,16px)}
.secuencia img{
  width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radio);background:var(--sage-claro);
}
.secuencia figcaption{display:grid;gap:.35em}
.paso2__n{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.62rem,.7vw,.7rem);letter-spacing:.2em;color:var(--vino);
}
.secuencia figcaption p{margin:0;color:var(--gris);line-height:1.55;font-size:clamp(.92rem,1.02vw,1rem);max-width:56ch}

/* --- siguiente obra: la ficha encadena con la que sigue ---
   Para que el visitante pueda recorrer la línea completa sin volver al
   índice. Cierra el ciclo: la última obra de cada línea lleva a la
   primera. */
.sigue__obra{
  display:grid;gap:clamp(16px,2.4vw,40px);align-items:center;
  grid-template-columns:minmax(min(100%,180px),.5fr) minmax(0,1fr);
  margin-top:clamp(20px,2.4vw,34px);
  text-decoration:none;color:inherit;
}
@media (max-width:640px){ .sigue__obra{grid-template-columns:1fr} }
.sigue__obra img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radio);
  filter:saturate(.74) brightness(1.03);transition:filter .35s ease;
}
.sigue__obra:hover img,.sigue__obra:focus-visible img{filter:saturate(1) brightness(1)}
.sigue__obra:focus-visible{outline:2px solid var(--vino);outline-offset:6px;border-radius:var(--radio)}
.sigue__txt{display:grid;gap:.45em}
.sigue__titulo{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.1vw,1.95rem);line-height:1.14;color:var(--tinta);
}
.sigue__meta{color:var(--gris);font-size:clamp(.9rem,1vw,.98rem);line-height:1.45}
.sigue__mas{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.68rem,.76vw,.76rem);letter-spacing:.18em;text-transform:uppercase;
  color:var(--vino);margin-top:.3em;
}

/* ============================================================
   MEGAMENÚ — el panel de cada línea
   Se abre al pasar el puntero (o al enfocar con teclado) sobre «Obra
   pública» o «Mantenimiento». El contenido lo arma assets/megamenu.js
   desde una sola tabla: agregar una obra es editar esa tabla, no las
   veinte páginas.
   Sólo de escritorio: abajo de 1120px manda la hamburguesa.
   ============================================================ */
.mega{
  position:fixed;left:0;right:0;top:var(--nav-alto);z-index:59;
  background:var(--papel);
  border-top:1px solid var(--sage-hondo);
  box-shadow:0 24px 50px -30px rgba(38,40,44,.45);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.mega.abierto{opacity:1;visibility:visible;transform:none}
.mega__in{padding-block:clamp(26px,3.2vw,52px)}
/* El [hidden] del panel que no toca PIERDE contra display:grid si no se
   dice aquí: la especificidad de la clase le gana al estilo del navegador. */
.mega-a[hidden]{display:none}
.mega-a{
  display:grid;gap:clamp(22px,3vw,58px);
  grid-template-columns:minmax(min(100%,220px),.8fr) minmax(min(100%,200px),.7fr) minmax(0,1.6fr);
}
.mega__linea{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.025em;
  font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.1;margin:0 0 .5em;color:var(--tinta);
}
.mega__pie{margin:0 0 1.1em;color:var(--gris);font-size:clamp(.92rem,1.02vw,1rem);line-height:1.5;max-width:34ch}
.mega__rotulo{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(.64rem,.72vw,.72rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-bottom:1em;
}
.mega__esp{list-style:none;margin:0;padding:0;display:grid;gap:.75em}
.mega__esp li{color:var(--tinta);font-size:clamp(.92rem,1.02vw,1rem);line-height:1.35}
.mega__obras{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.mega__obra{display:block;text-decoration:none;color:inherit}
.mega__obra img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio-chico);
  filter:saturate(.74) brightness(1.03);transition:filter .3s ease;
}
.mega__obra:hover img,.mega__obra:focus-visible img{filter:saturate(1) brightness(1)}
.mega__obra:focus-visible{outline:2px solid var(--vino);outline-offset:4px;border-radius:var(--radio-chico)}
.mega__obra b{
  display:block;margin-top:.6em;font-family:var(--f-display);font-weight:400;
  font-size:clamp(.86rem,.96vw,.94rem);line-height:1.3;color:var(--tinta);letter-spacing:-.01em;
}
.mega__obra span{display:block;margin-top:.2em;color:var(--gris);font-size:.82rem}
.mega__todas{
  display:inline-block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(.66rem,.74vw,.74rem);letter-spacing:.18em;text-transform:uppercase;
  color:var(--vino);text-decoration:none;
}
.mega__todas:hover,.mega__todas:focus-visible{text-decoration:underline}
@media (max-width:1120px){ .mega{display:none} }

/* ============================================================
   PIE — reconstrucción fiel de la referencia
   Dos franjas: área superior ~455px y franja inferior ~188px sobre
   un ancho de referencia de 2048. Todas las medidas van en clamp()
   calibradas para aterrizar en esos valores a 2048 y encoger sin
   romperse. Las decoraciones (trama, obra, panel) son lo único con
   posición absoluta; el contenido va en grid.
   ============================================================ */
/* El pie va A SANGRE, no en tarjeta.
   Se probó metido en una tarjeta redondeada con aire alrededor y el
   efecto se cae: las decoraciones de las esquinas —la trama del canto
   izquierdo y el panel con la cuchilla del derecho— son lo que da el
   golpe, y sólo funcionan si tocan la orilla de la PANTALLA. Dentro de
   una caja quedaban recortadas contra un filo redondeado a 70 px de la
   orilla y se leían como adorno suelto, no como esquina.

   Las dos franjas son independientes: el área alta con las esquinas y,
   debajo, la barra blanca del logo y el menú, separada por su filo.
   `.cierre` ya no encajona nada — sólo es el alcance de las variables. */
.cierre{
  --pie-marfil:#f8f6ef;       /* área superior: marfil cálido, sin gris */
  --pie-blanco:#fcfaf5;       /* franja inferior, un punto más clara */
  --pie-panel:#f2eee4;        /* el panel texturado de la derecha */
  --pie-verde:#3f5f55;        /* fichas de los iconos: verde desaturado */
  --pie-tinta:#2f3a36;        /* verde-gris oscuro de los titulares */
  --pie-borde:rgba(47,58,54,.12);
  /* El margen de la tarjeta desapareció, así que el gutter que antes lo
     ponía la caja ahora lo pone el padding: el dicho sigue cayendo en el
     mismo 8.4% de la pantalla que pide la referencia. */
  --pie-pad:calc(var(--gutter) + clamp(22px,4.8vw,98px));
  --pie-pad-bajo:calc(var(--gutter) + clamp(20px,1.7vw,34px));

  /* UNA sola perilla para todo el lado derecho: a cuánto de la orilla
     muere la cuchilla. De ahí cuelgan las otras dos medidas, así que no
     se pueden desincronizar:
       · el panel gris arranca justo ahí (su filo izquierdo ES la línea);
       · el contenido se detiene antes del filo IZQUIERDO de la cuchilla,
         que cae --pie-cuchilla-der + su propio ancho (0.2527 del alto)
         más 40px de aire. Con dos clamps sueltos que no se hablaban, el
         botón aterrizaba sobre la cuchilla de 1024 a 1800. */
  --pie-cuchilla-der:clamp(110px,10.4vw,200px);
  /* El alto de la cuchilla manda también el del panel: los dos van con
     bottom:0 y este mismo alto, así que la punta de arriba de la pared
     cae EXACTA en la esquina del panel. Cuando eran medidas sueltas sólo
     empataban por casualidad a 2048; a 1440 la punta llegaba 16px abajo
     de la esquina y se veía el desfase. */
  --pie-cuchilla-alto:clamp(200px,18.65vw,375px);
  /* Aire entre el titular y la línea divisoria. Lo usan la línea y el
     canto de arriba de la barra izquierda: una sola medida para los dos
     o se despegan al cambiar el cuerpo de la tipografía. */
  --pie-filo-arriba:clamp(20px,1.9vw,36px);
  /* La barra izquierda: aire hasta el titular y, de ahí, ancho hasta la
     orilla de la pantalla. Como el titular arranca a --pie-pad de la
     orilla, el ancho visible es esa medida menos el aire. */
  --pie-barra-hueco:clamp(10px,1.2vw,24px);
  --pie-barra-ancho:calc(var(--pie-pad) - var(--pie-barra-hueco));
  /* El filo IZQUIERDO de la cuchilla cae a --pie-cuchilla-der más su
     propio ancho, que con el viewBox apretado es 0.229 del alto. Más
     40px de aire. */
  --pie-zona:clamp(196px, calc(14.7vw + 40px), 326px);
}

/* ---------- ÁREA SUPERIOR ---------- */
.pie-alto{
  position:relative;overflow:hidden;
  background:var(--pie-marfil);
  min-height:clamp(360px,22.2vw,455px);
  display:grid;align-content:center;
  padding-block:clamp(28px,2.24vw,46px);
}
.pie-alto__in{
  display:grid;align-items:center;
  /* minmax(0,1fr), no min(100%,700px): con un mínimo duro de 700 px la
     columna del dicho no cedía, la del contacto se desbordaba por la
     derecha y de 1440 a 1800 el botón aterrizaba encima de la cuchilla.
     Antes no se veía porque la tarjeta lo recortaba con overflow:hidden
     —o sea que el botón salía cortado, que es peor. */
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,1.95vw,40px);
  /* Reserva la zona de las decoraciones: cuchilla y columna de
     palabras. Sin esto el botón se montaba sobre la cuchilla. */
  padding-inline:var(--pie-pad) var(--pie-zona);
  position:relative;z-index:2;
}

/* --- la barra del extremo izquierdo ---
   Banda a sangre por la izquierda, con el canto de arriba EN TALUD: en
   la orilla de la pantalla arranca a la altura de la línea divisoria y
   sube en diagonal hasta el canto del titular, ya pegada a la columna
   de texto.

   Van dos piezas, las dos colgadas del titular:
     ::before  el talud — alto = el titular más el aire de la línea, así
               que la diagonal toca los dos puntos exactos sin suponer
               cuántos renglones trae el titular;
     ::after   el cuerpo — de la divisoria para abajo; el 100vh de alto
               lo recorta el overflow:hidden de .pie-alto.

   Por qué las dos cuelgan del titular y no de la propia línea: .pie-filo
   lleva opacity:.55, y eso abre contexto de apilamiento — la barra
   habría heredado la transparencia y se habría pintado al 55%.

   Antes aquí vivía una trama en abanico colgada de la esquina de
   arriba; se quitó. */
.pie-dicho h2{position:relative}
.pie-dicho h2::before,
.pie-dicho h2::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:calc(100% + var(--pie-barra-hueco));
  width:var(--pie-barra-ancho);
  background:var(--pie-panel);
}
.pie-dicho h2::before{
  top:0;height:calc(100% + var(--pie-filo-arriba));
  /* triángulo: orilla izquierda abajo -> orilla derecha arriba */
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
.pie-dicho h2::after{
  top:calc(100% + var(--pie-filo-arriba));height:100vh;
}

/* --- columna izquierda: el dicho --- */
.pie-dicho h2{
  font-family:var(--f-display);font-weight:200;
  font-size:clamp(1.9rem,2.66vw,3.4rem);   /* 54px a 2048, piso del rango */
  line-height:1.08;letter-spacing:-.032em;
  color:var(--pie-tinta);margin:0;
}
.pie-filo{
  width:clamp(44px,3.4vw,66px);height:1.5px;border:0;
  background:var(--pie-tinta);opacity:.55;
  margin:var(--pie-filo-arriba) 0 clamp(18px,1.7vw,32px);
}
.pie-dicho p{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1rem,1.32vw,1.63rem);    /* ~26px a 2048 */
  line-height:1.42;color:var(--pie-tinta);opacity:.82;
  max-width:34ch;margin:0;
}

/* --- columna central: datos + botón --- */
.pie-medio{display:grid;grid-template-columns:auto auto;align-items:end;gap:clamp(20px,2.4vw,48px)}
.pie-datos{display:grid;gap:clamp(18px,1.5vw,30px);margin:0}
.pie-dato{display:flex;align-items:center;gap:clamp(14px,1.15vw,23px)}
.pie-dato__ficha{
  flex:none;display:grid;place-content:center;
  width:clamp(50px,3.85vw,78px);aspect-ratio:1;border-radius:100px;
  background:var(--pie-verde);
}
/* Medida fija, no porcentaje: con place-content:center el área del grid
   se dimensiona por contenido y un width en % se vuelve circular — los
   iconos salían de tamaño cero y las fichas se veían vacías. */
.pie-dato__ficha svg{
  width:clamp(22px,1.68vw,34px);height:auto;
  fill:none;stroke:#fff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.pie-dato dt{
  font-family:var(--f-texto);font-weight:600;
  font-size:clamp(.94rem,1.02vw,1.26rem);
  color:var(--pie-tinta);margin-bottom:.12em;
}
.pie-dato dd{
  margin:0;font-size:clamp(.92rem,1.02vw,1.26rem);
  color:var(--pie-tinta);opacity:.78;line-height:1.35;
}
.pie-dato a{color:inherit;text-decoration:none}
.pie-dato a:hover{color:var(--vino);opacity:1;text-decoration:underline}

.pie-cta{
  display:inline-flex;align-items:center;justify-content:center;
  gap:clamp(14px,1.3vw,26px);
  width:clamp(215px,14.9vw,305px);height:clamp(50px,3.32vw,68px);
  border-radius:100px;background:var(--vino);color:#fff;text-decoration:none;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(.7rem,.74vw,.92rem);
  letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s ease,box-shadow .3s ease;
  box-shadow:0 12px 30px -16px rgba(141,47,87,.85);
  margin-bottom:clamp(2px,.25vw,5px);
}
.pie-cta:hover{background:var(--vino-osc);box-shadow:0 14px 34px -14px rgba(141,47,87,.9)}
.pie-cta__flecha{width:clamp(26px,1.85vw,38px);height:8px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.pie-cta:hover .pie-cta__flecha{transform:translateX(6px)}

/* --- la cuchilla de la derecha ---
   La pared verde del isotipo. Anclada, fuera de la rejilla: dentro
   empujaba el alto del área a 584 —un SVG con alto en % dentro de una
   fila que se dimensiona por contenido entra en referencia circular. */
.pie-obra{
  position:absolute;bottom:0;z-index:1;pointer-events:none;
  right:var(--pie-cuchilla-der);
  /* En vw y no en %: .pie-alto define min-height, no height, y un alto
     porcentual no resuelve contra eso — la cuchilla se quedaba chica. */
  height:var(--pie-cuchilla-alto);
}
.pie-obra__svg{
  height:100%;width:auto;display:block;
  filter:drop-shadow(0 18px 30px rgba(47,58,54,.18));
}

/* --- el panel de la derecha ---
   Arranca donde muere la cuchilla y corre hasta la orilla: su filo
   izquierdo ES la línea gris. Antes pasaba por DETRÁS de la cuchilla y
   subía hasta el canto de arriba del pie.

   Mismo bottom:0 y mismo alto que la cuchilla: así su esquina de arriba
   a la izquierda y la punta de la pared son EL MISMO PUNTO, en cualquier
   ancho. Y va abajo de .pie-obra en el apilado, para que la sombra de la
   cuchilla caiga sobre el panel en vez de quedar cortada a filo. */
.pie-alto::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  bottom:0;height:var(--pie-cuchilla-alto);right:0;
  width:var(--pie-cuchilla-der);
  background:var(--pie-panel);
}

/* --- columna de palabras --- */
.pie-valores{
  /* Centrada en el bloque color arena, en los dos ejes: el panel ocupa
     --pie-cuchilla-der de ancho y --pie-cuchilla-alto de alto, pegado a
     la esquina de abajo a la derecha, así que su centro cae a la mitad
     de cada una de esas dos medidas. El translate del 50% remata el
     centrado sin tener que saber cuánto mide la columna. */
  position:absolute;
  right:calc(var(--pie-cuchilla-der) / 2);
  bottom:calc(var(--pie-cuchilla-alto) / 2);
  transform:translate(50%,50%);
  list-style:none;margin:0;display:grid;gap:clamp(12px,1.1vw,22px);
  justify-items:center;text-align:center;
  /* El interletrado deja .3em de aire DESPUÉS de la última letra; al
     centrar, eso recorre el renglón .15em a la izquierda. El sangrado
     del mismo tamaño al principio lo empareja. */
  text-indent:.3em;
  /* z-index 3: empatada con .pie-alto__in perdía por orden de marcado y
     el contenido le pasaba encima. */
  padding:0;z-index:3;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.6rem,.62vw,.78rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--pie-tinta);opacity:.72;
}
.pie-valores::after{
  content:"";display:block;width:clamp(34px,2.6vw,52px);height:1px;
  background:var(--pie-tinta);opacity:.3;margin:clamp(6px,.7vw,14px) auto 0;
}

/* ---------- FRANJA INFERIOR ---------- */
.pie-bajo{
  background:var(--pie-blanco);
  border-top:1px solid var(--pie-borde);
  min-height:clamp(120px,9.2vw,188px);
  display:grid;align-content:center;
  padding-block:clamp(22px,2vw,34px);
}
.pie-bajo__in{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(18px,2.2vw,46px);
  padding-inline:var(--pie-pad-bajo);
}
/* Sin el descriptivo chico, el logo puede crecer: antes el tope de 73px
   lo mandaba el renglón de "Grupo Mexicano de…", que a ese tamaño ya no
   se leía. Ahora manda la palabra FACOMT. */
.pie-logo img{height:clamp(46px,4.4vw,92px);width:auto}
.pie-nav{margin-inline:auto}
.pie-nav ul{display:flex;flex-wrap:wrap;gap:clamp(16px,2.35vw,48px);list-style:none;margin:0;padding:0}
.pie-nav a{
  text-decoration:none;color:var(--pie-tinta);opacity:.78;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(.62rem,.66vw,.82rem);
  letter-spacing:.22em;text-transform:uppercase;
  padding-block:10px;transition:opacity .25s ease,color .25s ease;
}
.pie-nav a:hover,.pie-nav a[aria-current="page"]{opacity:1;color:var(--vino)}
.pie-redes{display:flex;align-items:center;gap:clamp(14px,1.5vw,30px)}
.pie-red{display:grid;place-content:center;color:var(--pie-verde)}
.pie-red svg{width:clamp(17px,1.1vw,23px);height:auto;fill:currentColor}
.pie-divisor{width:1px;height:clamp(34px,2.7vw,54px);background:var(--pie-borde)}
.pie-frase{
  margin:0;color:var(--pie-tinta);opacity:.72;line-height:1.42;
  font-size:clamp(.82rem,.86vw,1.06rem);
}

/* ---------- RESPONSIVE ----------
   En escritorio NO se apila: la composición de la referencia se conserva.
   De tablet para abajo sí se reorganiza. */
@media (max-width:1439px){
  .pie-alto__in{grid-template-columns:minmax(0,1fr) auto}
  .pie-valores{display:none}
}
@media (max-width:1023px){
  .pie-alto__in{
    grid-template-columns:1fr;justify-items:start;
    gap:clamp(26px,4vw,44px);
    padding-inline:var(--pie-pad);
  }
  .pie-medio{grid-template-columns:1fr;align-items:start;gap:clamp(22px,3vw,34px);justify-items:start}
  .pie-obra,.pie-alto::after,
  .pie-dicho h2::before,.pie-dicho h2::after{display:none}
  .pie-alto{min-height:0}
  .pie-bajo__in{flex-direction:column;align-items:flex-start;gap:clamp(20px,3vw,30px)}
  .pie-nav{margin-inline:0}
  .pie-divisor{display:none}
}
@media (max-width:767px){
  .pie-dicho h2{font-size:clamp(1.7rem,7vw,2.2rem)}
  .pie-dicho p{font-size:clamp(.98rem,4vw,1.12rem)}
  .pie-dato dd{overflow-wrap:anywhere}
  .pie-nav ul{gap:14px 22px}
  .pie-cta{width:100%;max-width:320px}
}

/* ============================================================
   ENTRADAS Y ACCESIBILIDAD
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,0,.2,1)}
.reveal.visto{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .acceso:hover,.linea2:hover,.pildora--blanca:hover{transform:none}
  .linea2:hover .linea2__img{transform:none}
  #hero{height:auto}
  #heroStage{position:static;height:auto}
  #heroCanvas{height:auto;aspect-ratio:16/9}
  .layer{position:static;opacity:1;padding:24px 0}
  .layer .inner{padding:0 var(--gutter)}
  .on-dark{color:var(--tinta);text-shadow:none}
  .on-dark::before{display:none}
  #desplaza,#corte{display:none}
  .desplaza__aro::before,.desplaza__aro::after,.desplaza__flecha{animation:none}
  /* Sin barras el cambio sería un salto seco: aquí sí se cruza, que es
     menos movimiento que un corte, no más. */
  #portada{min-height:0;transition:opacity .45s linear}
}

@media print{
  .nav,#boot,#corte,#desplaza,.ctam__escena{display:none !important}
  #hero,#portada{height:auto;min-height:0}
  body{background:#fff}
  .seccion{padding-block:24px}
}

/* ============================================================
   PÁGINAS INTERIORES
   ============================================================ */

/* --- la portada de interior: el render de su línea --- */
#portada.portada--sola{position:relative;min-height:100vh;min-height:100svh;opacity:1}
.portada--sola .desplaza-hueco{display:none}

/* --- especialidades: tarjetas pálidas numeradas --- */
.esp2{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
.esp2__item{
  background:var(--sage-claro);border-radius:var(--radio);
  padding:clamp(20px,2.4vw,30px);
  display:grid;gap:clamp(12px,1.6vw,18px);align-content:start;
}
.esp2__n{
  font-family:var(--f-display);font-weight:600;font-size:.66rem;
  letter-spacing:.24em;color:var(--vino);
}
.esp2__item h3{font-weight:400;font-size:clamp(1.02rem,1.4vw,1.18rem)}
.esp2__item p{color:var(--gris);font-size:.93rem;margin:0}

/* --- mosaico de obra: foto con pie --- */
.mosaico2{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.foto2{margin:0}
.foto2 img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radio);
  filter:saturate(.74) brightness(1.03);
}
.foto2 figcaption{
  margin-top:.85em;color:var(--gris);font-size:.86rem;line-height:1.45;
  padding-left:14px;border-left:2px solid var(--vino);
}
.foto2:nth-child(3n+2) figcaption{border-left-color:var(--teal)}
.foto2:nth-child(3n+3) figcaption{border-left-color:var(--magenta)}

/* --- la rejilla y la tabla llevan a su ficha ---
   Cada tarjeta es una obra, no una foto suelta: por eso son <a> y no
   <figure>. Sin transform en el hover: la imagen va con border-radius y
   escalarla exige un contenedor que la recorte; con el filtro basta. */
a.foto2{display:block;text-decoration:none;color:inherit}
a.foto2 img{transition:filter .35s ease}
a.foto2:hover img,a.foto2:focus-visible img{filter:saturate(1) brightness(1)}
a.foto2 figcaption{transition:color .25s ease}
a.foto2:hover figcaption,a.foto2:focus-visible figcaption{color:var(--tinta)}
a.foto2:focus-visible{outline:2px solid var(--vino);outline-offset:5px;border-radius:var(--radio)}
a.foto2 .foto2__mas{
  display:block;margin-top:.5em;font-family:var(--f-display);font-weight:600;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vino);
}

a.contrato2{text-decoration:none;color:inherit;transition:background .25s ease}
a.contrato2:hover,a.contrato2:focus-visible{background:rgba(38,40,44,.04)}
a.contrato2:hover .contrato2__objeto,a.contrato2:focus-visible .contrato2__objeto{color:var(--tinta)}
a.contrato2:focus-visible{outline:2px solid var(--vino);outline-offset:-2px}

/* --- contratos: renglones sobre la banda sage --- */
.contratos2{display:grid;gap:0}
.contrato2{
  display:grid;gap:clamp(6px,1vw,20px);
  grid-template-columns:minmax(110px,auto) 1fr minmax(150px,auto);
  align-items:baseline;
  padding-block:clamp(16px,2vw,22px);
  border-top:1px solid var(--sage-hondo);
}
.contrato2:last-child{border-bottom:1px solid var(--sage-hondo)}
.contrato2__periodo{font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.contrato2__objeto{color:var(--gris);font-size:.95rem}
.contrato2__n{font-size:.8rem;color:var(--gris);font-family:var(--f-display);letter-spacing:.04em;text-align:right}
@media (max-width:820px){
  .contrato2{grid-template-columns:1fr;gap:4px}
  .contrato2__n{text-align:left}
}

/* --- formulario de contacto --- */
.forma{display:grid;gap:clamp(14px,1.8vw,20px)}
.forma__par{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.forma label{display:grid;gap:7px}
.forma span{
  font-family:var(--f-display);font-weight:600;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
}
.forma input,.forma select,.forma textarea{
  font:inherit;font-size:.98rem;color:var(--tinta);
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio-chico);padding:.85em 1em;width:100%;
  min-height:50px;
}
.forma textarea{min-height:130px;resize:vertical}
.forma input:focus,.forma select:focus,.forma textarea:focus{
  outline:2px solid var(--vino);outline-offset:1px;border-color:transparent;
}
.forma .pildora{justify-self:start;margin-top:6px;border:0}
.forma__aviso{color:var(--gris);font-size:.85rem;margin:0}