/* ============================================================
   FIBREMOS SOLUCIONES — SISTEMA DE DISEÑO
   Dirección visual «D · Mix A+B», aprobada por Lau el 2026-08-05.

   LA BASE ES A: negro profundo #070708, foto protagonista,
   condensada enorme, grano de película y el ROJO del logo como
   único acento de energía. De B se conservan SOLO las FORMAS de
   ingeniería (marcos de escuadra, cotas, globos ①②③, FIG. 0X),
   redibujadas como plano de arquitecto sobre negro: hairlines
   blanco/gris + tick rojo. El azul #2E6FD8 existe únicamente en
   la esfera central del tetraedro del logo.

   ⚠️ ARCHIVO COMPARTIDO POR TODAS LAS PÁGINAS.
   No lo edites desde una página: si necesitas un componente
   nuevo, pídelo. Rutas relativas a  landing/assets/.
   ============================================================ */

/* ---------- Fuentes (locales, sin CDN) ---------- */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('fuentes/barlow-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('fuentes/space-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fuentes/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fuentes/inter-latin-600-normal.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --bg:#070708;            /* negro profundo de A */
  --bg2:#0B0D10;           /* banda un paso arriba */
  --panel:#101318;         /* superficie de lectura */
  --line:#20242C;          /* hairlines de interfaz */
  --line2:#2E333D;
  --line-soft:rgba(255,255,255,.06);
  --txt:#F2F4F7;
  --txt2:#C7CDD6;
  --mut:#98A1AD;
  --trazo:rgba(242,244,247,.78);       /* trazo de plano: marcos, cotas */
  --trazo-suave:rgba(242,244,247,.42); /* aristas ocultas, ejes */
  --rojo:#E8362A;          /* rojo del logo */
  --rojo-vivo:#FF4438;     /* acento eléctrico (AA sobre negro) */
  --rojo-cta:#D92B20;      /* relleno de botón (AA con blanco) */
  --azul-logo:#2E6FD8;     /* esfera de sílice — SOLO en el logo */
  --wa:#25d366;            /* WhatsApp flotante */
  --ambar:#ff8577;         /* marcador [POR CONFIRMAR] */
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --grot:'Space Grotesk',ui-monospace,monospace;
  --sans:'Inter',system-ui,sans-serif;
  --wrap:1440px;   /* era 1240 · 2026-08-19: menos margen muerto en pantalla ancha */
  --gut:clamp(1.1rem,4vw,3.5rem);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* el reset de arriba no toca `border`: sin esto el navegador dibuja el marco
   groove del fieldset. `min-width:0` evita que un hijo ancho (una tabla) estire
   el contenedor por el min-width:auto de flex/grid y saque scroll horizontal. */
fieldset{border:0;min-width:0}
.wide{grid-column:1/-1;min-width:0}
html{overflow-x:clip;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;scrollbar-color:#3A414C var(--bg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  color:var(--txt);
  font:400 1rem/1.65 var(--sans);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  /* retícula de plano de B, redibujada en gris neutro sobre el negro de A */
  background:
    linear-gradient(rgba(242,244,247,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,244,247,.05) 1px,transparent 1px),
    linear-gradient(rgba(242,244,247,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,244,247,.024) 1px,transparent 1px),
    var(--bg);
  background-size:130px 130px,130px 130px,26px 26px,26px 26px;
}
::selection{background:var(--rojo);color:#fff}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700}
:focus-visible{outline:2px solid var(--rojo-vivo);outline-offset:3px;border-radius:2px}

/* grano de película de A, casi subliminal */
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='120'%20height='120'%20filter='url(%23n)'%20opacity='.6'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:.6rem;left:.6rem;z-index:200;transform:translateY(-300%);
  background:var(--rojo-cta);color:#fff;font:600 .85rem/1 var(--sans);
  padding:.7rem 1rem;border-radius:3px;text-decoration:none;transition:transform .2s;
}
.skip:focus{transform:none}

/* ============================================================
   CABECERA
   ============================================================ */
.top{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  /* el logo cae en la misma vertical que los títulos: cuando la pantalla es
     más ancha que la caja, la cabecera hereda el margen de la caja */
  padding:.85rem max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  transition:background .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.top.lleno{
  background:rgba(7,7,8,.84);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-color:var(--line);
}
/* páginas interiores: la cabecera arranca llena porque no hay foto a sangre */
.top--solida{background:rgba(7,7,8,.92);border-color:var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand svg{width:32px;height:37px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__f{font:700 .92rem/1 var(--grot);letter-spacing:.26em;color:var(--txt)}
.brand__s{font:600 .55rem/1 var(--sans);letter-spacing:.44em;color:var(--mut);margin-top:.32em}
.menu{display:none;align-items:center;gap:clamp(1.2rem,3vw,2.4rem)}
@media (min-width:720px){.menu{display:flex}}
.menu a{
  font:700 .68rem/1 var(--grot);letter-spacing:.24em;text-transform:uppercase;
  color:var(--txt2);text-decoration:none;padding:.4rem 0;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.menu a:hover{color:var(--txt);border-color:var(--rojo)}
.menu a[aria-current="page"]{color:var(--txt);border-color:var(--rojo)}
/* El CTA de la cabecera era un botón «fantasma» (borde fino, fondo transparente)
   y se perdía sobre la foto del hero (Lau, 2026-09-09). Ahora va en el rojo de
   relleno —el mismo de los botones que convierten— con texto blanco: 5,1:1. */
.top__cta{
  display:inline-flex;align-items:center;gap:.5rem;
  font:700 .8rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  background:var(--rojo-cta);border:1px solid var(--rojo-cta);border-radius:999px;
  padding:.72rem 1.3rem;min-height:44px;
  box-shadow:0 6px 20px rgba(217,43,32,.32);
  transition:background .25s,border-color .25s,transform .15s;
}
.top__cta:hover{background:var(--rojo);border-color:var(--rojo);transform:translateY(-1px)}
.top__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* en un celular «Solicitar cotización» parte el botón en dos líneas y choca
   con el logo: ahí se dice corto, y desde 560 px completo */
.ct-largo{display:none}
@media (min-width:560px){.ct-corto{display:none}.ct-largo{display:inline}}

/* ============================================================
   HERO — cartel de película de A + escuadra y UNA cota de B
   ============================================================ */
.hero{
  position:relative;
  /* El alto lo manda el CONTENIDO, no la ventana (Lau, 2026-08-19). Con
     `min-height:100svh` y el contenido abajo, el hueco entre el menú y el
     titular crecía con la pantalla: 149 px en un portátil, 237 en un monitor
     grande y 294 en el celular. Midiéndolo por contenido el hueco es el mismo
     —unos 64 px— en todas partes, y de paso asoma la cinta, que invita a bajar. */
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:clip;
}
.hero__media{position:absolute;inset:-6% 0;z-index:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:44% 32%;
  filter:brightness(.78) saturate(.82) contrast(1.1);
  animation:heroZoom 6.5s cubic-bezier(.16,.6,.2,1) both;
}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 80% at 50% 108%, rgba(7,7,8,.55), transparent 62%),
    linear-gradient(180deg,
      rgba(7,7,8,.68) 0%, rgba(7,7,8,.2) 22%, rgba(7,7,8,.05) 42%,
      rgba(7,7,8,.52) 66%, rgba(7,7,8,.9) 86%, var(--bg) 100%);
}
/* escuadras de plano en las 4 esquinas del encuadre */
.esq{
  position:absolute;width:22px;height:22px;border:0 solid var(--trazo);
  opacity:.95;z-index:3;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75));
}
.esq--tl{top:12px;left:12px;border-top-width:2px;border-left-width:2px}
.esq--tr{top:12px;right:12px;border-top-width:2px;border-right-width:2px}
.esq--bl{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px}
.esq--br{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px}

.hero__cota.cota{
  position:absolute;z-index:3;right:clamp(10px,2vw,28px);top:50%;
  transform:translateY(-52%);height:min(50vh,430px);
  display:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
@media (min-width:880px){.hero__cota.cota{display:flex}}
.hero__cota .cota-label{
  background:rgba(7,7,8,.8);border:1px solid var(--line2);border-radius:2px;
  color:var(--txt);padding:14px 6px;
}

.hero__frame{position:relative;z-index:2;width:100%;
  /* deja pasar la cabecera fija (~72 px) y deja 64 px de aire bajo el menú */
  /* valor fijo a propósito: con un término en vh el hueco crecía 8 px en
     ventanas muy altas. 8,5rem = cabecera (72 px) + 64 px de aire. */
  padding-top:8.5rem;padding-bottom:clamp(1.4rem,3.5vh,2.6rem)}
/* UN SOLO BORDE IZQUIERDO EN TODA LA PÁGINA (Lau, 2026-08-19).
   Primero se sacó el hero de la caja para pegarlo a la cabecera, y entonces el
   hero quedó desalineado con las secciones de abajo. La solución correcta es la
   contraria: el hero se queda en la caja y es la CABECERA la que se alinea con
   ella (ver `.top`). La caja pasó de 1240 a 1440 px para que en pantalla ancha
   el margen deje de leerse como un hueco. */

/* ============================================================
   PÁGINA DE GRACIAS (2026-09-09 · simplificada esa misma noche)
   Es la URL que Google Ads marca como conversión. Solo confirma y ofrece
   WhatsApp para quien tenga prisa — aquí ya no cuesta medición, porque la
   conversión se cuenta al cargar la página.
   ⚠️ Excepción consciente al borde izquierdo único del sitio: una página de
   confirmación se lee centrada, y es lo que se pidió («en medio de la página»).
   ============================================================ */
.gracias{
  min-height:100svh;
  display:grid;place-items:center;
  padding:7rem var(--gut) 4rem;
  text-align:center;
}
.gracias__caja{max-width:46rem}
.gracias h1{
  font:700 clamp(2.2rem,6.4vw,4.4rem)/1 var(--cond);
  text-transform:uppercase;letter-spacing:-.005em;
}
.gracias h1 i{font-style:normal;color:var(--rojo-vivo)}
.gracias__linea{
  margin:clamp(1.4rem,3.4vw,2.2rem) 0 clamp(1.2rem,3vw,1.8rem);
  font-size:clamp(1rem,2.2vw,1.15rem);line-height:1.6;color:var(--txt2);
}

/* ============================================================
   HERO EN DOS COLUMNAS + FORMULARIO (Lau, 2026-09-09)
   El titular manda a la izquierda y el formulario —el CTA de la landing—
   se para a su derecha. Por debajo de 1000 px es UNA columna y el
   formulario cae debajo del titular, que es como se pidió para el móvil.
   ============================================================ */
.hero__cols{display:grid;gap:clamp(1.5rem,4vw,2.2rem)}
@media (min-width:1000px){
  .hero__cols{
    grid-template-columns:minmax(0,1fr) minmax(330px,410px);
    gap:clamp(1.8rem,3.6vw,3.2rem);
    /* las dos columnas miden lo mismo (`stretch`) y el pie del texto se empuja
       hasta abajo: así el titular y el formulario CIERRAN EN LA MISMA LÍNEA
       (Lau, 2026-09-09: «haz que el hero coincida con el formulario»). */
    align-items:stretch;
  }
  .hero__texto{display:flex;flex-direction:column}
  .hero__texto .hero__meta{margin-top:auto}
  /* el formulario no se estira: mide lo que miden sus campos */
  .hero__form{align-self:start}
}
.hero__form{position:relative;z-index:2}
/* DÓNDE ATERRIZA EL CLIC EN «Solicitar cotización» (Lau, 2026-09-09).
   Todos los botones de la página apuntan a #cotizar. Sin margen de anclaje el
   navegador pegaba el formulario al borde de arriba: la cabecera fija le tapaba
   el rótulo y el hero quedaba cortado a media palabra.
   · En celular el formulario va debajo del titular: basta con dejar pasar la
     cabecera (72 px) y un poco de aire.
   · En escritorio el formulario está a ~136 px del tope, así que un margen mayor
     que esa distancia hace que el destino quede por encima del inicio de la
     página: el navegador lo recorta a 0 y se ve EL HERO ENTERO, con el
     formulario completo dentro. Que es lo que se quiere ver al pulsar. */
#cotizar{scroll-margin-top:88px}
@media (min-width:1000px){#cotizar{scroll-margin-top:280px}}
/* la cota vertical del hero vive pegada al borde derecho: justo donde ahora
   se para el formulario. Con dos columnas se retira para no pisarse con él. */
@media (min-width:1000px){.hero__cota.cota{display:none}}

/* ---------- El formulario ---------- */
.frm{
  border:1px solid var(--line2);
  background:rgba(7,7,8,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:clamp(1.1rem,2.6vw,1.6rem);
}
.frm__rotulo{
  font:700 .6rem/1 var(--grot);letter-spacing:.2em;text-transform:uppercase;color:var(--rojo-vivo);
}
.frm__t{
  margin-top:.5rem;
  font:700 clamp(1.35rem,2.6vw,1.8rem)/1 var(--cond);text-transform:uppercase;letter-spacing:-.005em;
}
.frm__t i{font-style:normal;color:var(--rojo-vivo)}
.frm__campo{display:block;margin-top:.9rem}
.frm__campo label{
  display:block;margin-bottom:.4rem;
  font:700 .6rem/1.5 var(--grot);letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);
}
.frm__campo .opc,.campo legend .opc{color:var(--mut);letter-spacing:.08em}
/* un solo control visual en todo el sitio: el del cotizador */
.frm input[type="text"],.frm input[type="tel"],.frm input[type="email"],.frm select,
.campo input[type="tel"],.campo input[type="email"],.campo textarea{
  width:100%;min-height:48px;padding:.7rem .9rem;
  background:var(--bg2);border:1px solid var(--line2);border-radius:3px;
  color:var(--txt);font:400 1rem/1.4 var(--sans);
}
.frm select{color-scheme:dark}   /* que el desplegable nativo salga oscuro */
.campo textarea{min-height:96px;resize:vertical;display:block}
.frm input::placeholder,.campo textarea::placeholder{color:#6C7480}
.frm input:focus,.frm select:focus,
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--rojo)}
.frm input:focus-visible,.frm select:focus-visible,
.campo input:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--rojo-vivo);outline-offset:2px}
.btn--bloque{width:100%;margin-top:1.2rem;justify-content:center}
/* Aviso de autorización de datos — va DEBAJO del botón a propósito: se lee
   antes de enviar sin meter un clic más (Ley 1581, art. 7 del Dto. 1377:
   la autorización puede darse por una conducta inequívoca). #98A1AD sobre
   el fondo del formulario = 7,7:1. */
.frm__aviso{
  margin-top:1.15rem;
  font:400 .78rem/1.55 var(--sans);color:var(--mut);text-align:center;
}
.frm__aviso a{color:var(--txt2);border-bottom:1px solid var(--rojo);text-decoration:none}
/* área táctil de 44 px sin romper el renglón: la banda va en un ::after, y el
   margin-top de arriba (18 px) es mayor que lo que sobresale (13 px), así que
   NO le roba clics al botón de enviar. */
.frm__aviso a{position:relative}
.frm__aviso a::after{
  content:"";position:absolute;left:0;right:0;top:50%;translate:0 -50%;height:44px;
}
.frm__aviso a:hover{color:var(--rojo-vivo)}
.campo--datos .frm__campo:first-of-type{margin-top:0}
/* Dentro del formulario del hero todo va un punto más apretado que en una sección.
   Estuvo en 1.55rem porque los chips de opciones quedaban pegados al rótulo de abajo;
   esos chips se fueron con la pregunta de la medida (Lau, 2026-09-10), así que el
   hueco vuelve a ser el justo: 18 px separa sin desparramar. */
.frm .campo+.campo{margin-top:1.15rem}
.frm .frm__detalle{margin-top:1.15rem}
/* «¿Cómo te contactamos?» es hermano del DIV que se pliega, no de un .campo, así
   que la regla de arriba no lo alcanzaba y su rótulo se montaba sobre el campo
   anterior (Lau, 2026-09-10) */
.frm .frm__detalle+.campo{margin-top:1.15rem}

/* ---------- Cada pregunta se pliega con su respuesta a la vista ----------
   El rótulo se vuelve botón (lo monta el JS) con tres partes: la pregunta, la
   respuesta dada y la flecha. Cerrada, el cuerpo desaparece pero la respuesta
   se queda leyéndose — nunca se pierde de vista lo que se contestó. */
.frm .campo--paso>legend{width:100%;margin-bottom:0;padding:0}
.campo__tog{
  display:flex;align-items:center;gap:.7rem;width:100%;min-height:44px;
  padding:0;margin:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;
}
.campo__t{
  font:700 .6rem/1.5 var(--grot);letter-spacing:.16em;text-transform:uppercase;color:var(--rojo-vivo);
}
.campo__eco{
  margin-left:auto;text-align:right;
  font:400 .85rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--txt);
}
.campo__fl{
  flex:none;width:8px;height:8px;
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  /* abierta apunta arriba (recoger); recogida apunta abajo (desplegar) */
  transform:rotate(-135deg) translate(-2px,-2px);transition:transform .2s ease;
}
.campo--paso.cerrado .campo__fl{transform:rotate(45deg) translate(-2px,-2px)}
.campo__tog:hover .campo__fl{border-color:var(--txt)}
.campo__tog:focus-visible{outline:2px solid var(--rojo-vivo);outline-offset:3px}
/* sin padding propio: el margin-bottom del <legend> (.55rem) ya separa el rótulo de
   su campo, y sumados daban 17,6 px — el doble que en las preguntas que no son paso */
.campo--paso .campo__cuerpo{padding-top:0}
.campo--paso.cerrado .campo__cuerpo{display:none}
@media (prefers-reduced-motion:reduce){.campo__fl{transition:none}}
.frm .campo>legend{margin-bottom:.55rem;font-size:.6rem}
.frm .opciones{gap:.4rem}
.frm .opciones label{min-height:44px;padding:.5rem .75rem;font-size:.85rem}   /* 44 px: se toca en obra, con guantes */
.frm .campo textarea{min-height:72px}
.frm__t{margin-bottom:1.1rem}
/* trampa para robots: invisible para la persona, tentadora para el bot */
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.kicker{
  display:flex;align-items:center;gap:.8rem;
  font:700 clamp(.68rem,1.9vw,.8rem)/1.4 var(--grot);
  letter-spacing:.24em;text-transform:uppercase;color:var(--txt2);
}
.kicker::before{content:"";width:34px;height:2px;background:var(--rojo-vivo);flex:none}

.hero__title{
  margin-top:clamp(.9rem,2.2vh,1.6rem);
  font:700 clamp(2.5rem,11.6vw,7.6rem)/0.94 var(--cond);
  text-transform:uppercase;letter-spacing:-.005em;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.03em;margin-bottom:-.03em;white-space:nowrap}
.hero__title .line>span{display:block;transform:translateY(112%);animation:subir 1s cubic-bezier(.19,.75,.22,1) both}
.hero__title .line:nth-child(1)>span{animation-delay:.18s}
.hero__title .line:nth-child(2)>span{animation-delay:.3s}
.hero__title .line:nth-child(3)>span{animation-delay:.42s}
.hero__title .line:nth-child(4)>span{animation-delay:.54s}
.hero__title em{font-style:normal;color:var(--rojo-vivo)}
.hero__title .pt{font-style:normal;color:var(--rojo-vivo)}
@keyframes subir{to{transform:translateY(0)}}
@media (max-width:349px){.hero__title{font-size:2.25rem}}
@media (min-width:920px) and (max-height:840px){.hero__title{font-size:clamp(2.5rem,10.5vh,7rem)}}
/* Con el formulario al lado (≥1000 px) el titular se queda con media pantalla.
   Sus líneas van en `nowrap`, así que si no encoge se corta: la más larga es
   «Vertederos triangulares», del rotador. Va DESPUÉS de las dos reglas de
   arriba a propósito — misma especificidad, gana la última. */
/* Con el formulario al lado, el titular vive en media pantalla. Antes se ataba a
   `vw` y quedaba chico: la columna derecha es fija, así que el ancho real de la
   izquierda no crece igual que la ventana. Ahora se mide contra SU PROPIA COLUMNA
   (`cqw`), así llena el espacio en cualquier pantalla sin cortarse — sus líneas
   van en `nowrap`. La regla en `vw` se queda debajo como respaldo para navegadores
   sin container queries. */
@media (min-width:1000px){
  .hero__title{font-size:clamp(2.1rem,3.9vw,3.9rem)}
  .hero__texto{container-type:inline-size}
  .hero__title{font-size:clamp(2.4rem,13cqw,7rem)}
}

.hero__sub{
  margin-top:clamp(1rem,2.4vh,1.6rem);
  max-width:38em;
  font-size:clamp(.98rem,2.6vw,1.13rem);line-height:1.6;color:var(--txt2);
  animation:aparecer .9s ease .85s both;
}
.hero__ctas{
  display:flex;flex-wrap:wrap;gap:.8rem;
  margin-top:clamp(1.3rem,3vh,2rem);
  animation:aparecer .9s ease 1.05s both;
}
@keyframes aparecer{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.6rem;border-radius:3px;
  font:600 1rem/1 var(--sans);text-decoration:none;
  transition:background .25s,border-color .25s,transform .25s,color .25s;
}
.btn:active{transform:translateY(1px)}
.btn--rojo{background:var(--rojo-cta);color:#fff;border:1px solid var(--rojo-cta)}
.btn--rojo:hover{background:#B92218;border-color:#B92218}
.btn--rojo svg{width:19px;height:19px;fill:#fff;flex:none}
.btn--ghost{border:1px solid var(--line2);color:var(--txt);background:none}
.btn--ghost:hover{border-color:var(--txt2)}
.btn--ghost .fl{color:var(--rojo-vivo);font-weight:400;transition:transform .3s}
.btn--ghost:hover .fl{transform:translateY(3px)}
.btn--sm{min-height:46px;padding:.7rem 1.2rem;font-size:.88rem}
.btn--xl{min-height:64px;padding:1.15rem clamp(1.5rem,3.4vw,2.3rem);font-size:clamp(1rem,2.4vw,1.18rem);border-radius:4px}
.btn--xl svg{width:23px;height:23px}
@media (max-width:420px){.hero__ctas .btn{width:100%}}

.hero__meta{
  position:relative;z-index:2;
  margin-top:clamp(1.5rem,3.5vh,2.4rem);
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:.95rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font:700 .62rem/1.5 var(--grot);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  animation:aparecer .9s ease 1.25s both;
}
.hero__meta b{color:var(--txt2);font-weight:700}
.cue{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
.cue i{width:1px;height:30px;background:var(--line2);position:relative;overflow:hidden;display:block}
.cue i::after{
  content:"";position:absolute;left:0;top:-8px;width:1px;height:8px;background:var(--rojo-vivo);
  animation:gota 1.9s ease-in-out infinite;
}
@keyframes gota{60%,100%{transform:translateY(46px)}}
/* en móvil el WhatsApp flotante ocupa la esquina: se retiran los datos
   secundarios y se despeja el ancho del botón para que el texto no pase por debajo */
@media (max-width:560px){
  .hero__meta span.oc,.hero__meta .cue{display:none}
  .hero__meta{padding-right:72px;flex-wrap:wrap}
}

/* ============================================================
   CABEZA DE SECCIÓN
   ============================================================ */
/* Encabezado de sección: en pantalla ancha el título ocupa su columna y la
   entradilla se va a la derecha, apoyada en la misma línea base. Antes ambos
   colgaban de la izquierda y la mitad derecha quedaba muerta. */
.shead{padding-top:clamp(3rem,7vw,5.5rem)}
@media (min-width:1000px){
  .shead{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(2rem,4vw,4rem);align-items:end;
  }
  .shead .eyebrow{grid-column:1/-1}
  .shead h2{margin-top:1rem;align-self:end}
  .shead .intro{margin-top:0;padding-bottom:.45rem;max-width:none}
  /* sin entradilla no hay segunda columna que llenar */
  .shead--solo{display:block}
}
.eyebrow{
  display:flex;align-items:center;gap:.8rem;
  font:700 .7rem/1.4 var(--grot);letter-spacing:.26em;text-transform:uppercase;color:var(--rojo-vivo);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--rojo-vivo);flex:none}
.eyebrow .idx{border:1px solid var(--line2);color:var(--rojo-vivo);padding:.32em .6em;letter-spacing:.1em;background:rgba(232,54,42,.07)}
.shead h2{
  margin-top:1rem;
  font:700 clamp(2rem,7.6vw,4.4rem)/0.96 var(--cond);
  text-transform:uppercase;color:var(--txt);
}
.shead h2 i{font-style:normal;color:var(--rojo-vivo)}
.shead .intro{margin-top:1.3rem;max-width:46em;font-size:clamp(.98rem,2.5vw,1.1rem);line-height:1.7;color:var(--txt2)}

/* ============================================================
   CIFRAS
   ============================================================ */
.cifras{border-top:1px solid var(--line);background:rgba(7,7,8,.55)}
.cifras__grid{
  display:grid;grid-template-columns:1fr 1fr;
  padding-block:clamp(2.2rem,6vw,4.5rem);
  gap:clamp(1.8rem,4vw,0rem) clamp(1.4rem,3vw,0rem);
}
.cifra{position:relative;padding-inline:clamp(0rem,2vw,2.4rem)}
.cifra::before{content:"";display:block;width:22px;height:3px;background:var(--rojo);margin-bottom:.9rem}
.cifra__idx{display:block;font:700 .6rem/1 var(--grot);letter-spacing:.22em;color:var(--mut);margin-bottom:.55rem}
.cifra__n{
  display:block;
  font:700 clamp(3.1rem,9.5vw,5.9rem)/0.9 var(--cond);
  color:var(--txt);font-variant-numeric:tabular-nums;
}
.cifra__l{display:block;margin-top:.7rem;max-width:17em;font-size:.86rem;line-height:1.5;color:var(--mut)}
.cifra__l b{color:var(--txt2);font-weight:600}
.cifra--tbd .cifra__tbd{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px dashed var(--rojo-vivo);border-radius:3px;
  padding:.9rem 1.1rem;
  font:700 clamp(.74rem,2vw,.92rem)/1 var(--grot);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ambar);
  min-height:clamp(2.9rem,8vw,5.3rem);
}
.cifra__nota{display:block;margin-top:.55rem;font-size:.68rem;letter-spacing:.05em;color:#7A828E}
@media (min-width:900px){
  .cifras__grid{grid-template-columns:repeat(4,1fr)}
  .cifra+.cifra{border-left:1px solid var(--line)}
}

/* regla graduada como bisagra entre secciones */
.regla{
  height:44px;position:relative;border-top:1px solid var(--line-soft);
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12px) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--line2) 0 1px, transparent 1px 72px) left bottom / 100% 26px no-repeat;
}
.regla::after{
  content:"";position:absolute;left:calc(var(--gut) + 22px);bottom:0;width:2px;height:34px;background:var(--rojo);
}

/* ============================================================
   FIGURAS ANOTADAS — marco de escuadra + globos + pie FIG. + cota
   ============================================================ */
.fig{margin:0}
.fig-row{display:flex;gap:clamp(10px,1.4vw,16px);align-items:stretch}
.fig-frame{
  position:relative;flex:1;min-width:0;
  border:1px solid var(--line);background:var(--bg2);
  padding:clamp(8px,1vw,12px);
}
.tk{position:absolute;width:13px;height:13px;border:0 solid var(--trazo);z-index:4;pointer-events:none}
.tk-tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.tk-tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.tk-bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.tk-br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.fig-img{position:relative}
.fig-img img{width:100%;filter:brightness(.9) saturate(.9) contrast(1.06)}
.fig-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,8,.10),rgba(7,7,8,0) 28%,rgba(7,7,8,0) 64%,rgba(7,7,8,.42));
}
.bln{
  position:absolute;z-index:3;width:25px;height:25px;margin:-13px 0 0 -13px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(7,7,8,.82);border:1.5px solid var(--rojo-vivo);
  color:#fff;font:600 .74rem var(--sans);
  box-shadow:0 0 0 3px rgba(255,68,56,.16);
  backdrop-filter:blur(2px);
}
.fig-cap{
  margin-top:10px;
  font:700 .64rem/1.7 var(--grot);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);
}
.fig-cap .fno{color:var(--rojo-vivo)}
.legend{margin-top:8px;display:grid;gap:5px;counter-reset:lg;text-transform:none;letter-spacing:0}
.legend li{
  counter-increment:lg;position:relative;padding-left:30px;
  font:400 .84rem/1.5 var(--sans);color:var(--txt2);
}
.legend li::before{
  content:counter(lg);position:absolute;left:0;top:1px;
  width:19px;height:19px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--rojo);color:var(--txt2);
  font:600 .62rem var(--sans);
}

/* cotas — línea clara, flecha roja */
.cota{flex:none;width:30px;display:flex;flex-direction:column;align-items:center}
.cota-tick{width:14px;height:1px;background:var(--trazo)}
.cota-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}
.cota-arrow.up{border-bottom:7px solid var(--rojo-vivo)}
.cota-arrow.down{border-top:7px solid var(--rojo-vivo)}
.cota-line{width:1px;flex:1;background:var(--trazo);min-height:14px}
.cota-line.l1{transform-origin:bottom}
.cota-line.l2{transform-origin:top}
.cota-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:700 .6rem var(--grot);letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt2);padding:10px 0;white-space:nowrap;
}
@media (max-width:400px){.cota{width:24px}.cota-label{font-size:.55rem}}

/* chip «por confirmar» */
.chip{
  display:inline-block;
  border:1px dashed var(--ambar);color:var(--ambar);
  font:700 .58rem var(--grot);letter-spacing:.16em;text-transform:uppercase;
  padding:5px 8px;
}

/* ============================================================
   LÁMINA MEDIDA
   ============================================================ */
.lamina{scroll-margin-top:70px}
.lamina__grid{
  display:grid;gap:clamp(1.8rem,4vw,3.4rem);
  padding-block:clamp(1.8rem,4vw,3rem) clamp(3rem,7vw,5.5rem);
}
@media (min-width:960px){
  .lamina__grid{grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);align-items:center}
}
.lamina__copy p{color:var(--txt2);max-width:52ch;margin-top:1rem;line-height:1.7}
.lamina__copy p b{color:var(--txt);font-weight:600}
.lamina__firma{
  margin-top:1.6rem;display:flex;align-items:center;gap:.7rem;
  font:700 .64rem/1.5 var(--grot);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
}
.lamina__firma::before{content:"";width:8px;height:8px;background:var(--rojo);border-radius:50%;flex:none}

/* ============================================================
   PIEZAS — catálogo en tarjetas
   ============================================================ */
.piezas{scroll-margin-top:70px;background:rgba(11,13,16,.6);border-block:1px solid var(--line-soft)}
.piezas__grid{
  display:grid;gap:clamp(1.6rem,3vw,2rem);
  padding-block:clamp(1.8rem,4vw,3rem) clamp(3rem,7vw,5rem);
}
@media (min-width:880px){.piezas__grid{grid-template-columns:repeat(3,1fr)}}
.pz{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);
  transition:border-color .25s,transform .25s;
}
.pz:hover{border-color:var(--line2);transform:translateY(-2px)}
.pz__media{position:relative;padding:clamp(8px,1vw,12px);border-bottom:1px solid var(--line-soft)}
.pz__media .fig-img img{aspect-ratio:4/3.1;object-fit:cover}
.pz__esquema{position:relative;background:var(--bg2)}
.pz__esquema svg{display:block;width:100%;height:auto}
.pz__body{padding:clamp(1.1rem,2.4vw,1.5rem);display:flex;flex-direction:column;gap:.6rem;flex:1}
.pz__body h3{
  font:700 clamp(1.5rem,4.4vw,1.9rem)/1 var(--cond);
  text-transform:uppercase;display:flex;align-items:baseline;gap:.55rem;
}
.pz__body h3 a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pz__body h3 a:hover{color:var(--rojo-vivo)}
.pz__idx{font:700 .66rem/1 var(--grot);letter-spacing:.18em;color:var(--rojo-vivo)}
.pz__body>p{font-size:.92rem;color:var(--txt2);line-height:1.6}
.pz__cap{font:700 .58rem/1.6 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.pz__cap .fno{color:var(--rojo-vivo)}
.pz__cta{
  margin-top:auto;padding-top:.9rem;min-height:44px;
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font:600 .9rem/1 var(--sans);color:var(--txt);text-decoration:none;
  border-bottom:1px solid var(--rojo);padding-bottom:.35rem;
  transition:color .2s,border-color .2s;
}
.pz__cta:hover{color:var(--rojo-vivo)}
.pz__cta .fl{color:var(--rojo-vivo)}

/* ============================================================
   RITMO DE PÁGINA — para que no todo cuelgue de la izquierda
   `.dos`      sección en dos columnas: encabezado fijo + contenido que corre
   `.dos--esp` la misma, con el contenido a la izquierda (rompe la simetría)
   `.rej`      rejilla de tarjetas a todo el ancho
   ============================================================ */
/* el espacio superior lo pone la sección, no el <h2>: así las dos
   columnas arrancan a la misma altura y no se ven desfasadas */
.dos{display:grid;gap:clamp(1.6rem,3.4vw,3rem);margin-top:clamp(2.4rem,5vw,3.4rem)}
.dos__cab .prosa,.dos__cab{max-width:34em}
.dos__cab .prosa h2,.dos__cuerpo .prosa h2{margin-top:0}
@media (min-width:960px){
  .dos{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .dos__cab{position:sticky;top:90px}
  .dos--esp .dos__cab{order:2}
  .dos--esp .dos__cuerpo{order:1}
  .dos--medio{align-items:center}
}
.dos__cuerpo>.prosa{max-width:none}
.dos__cuerpo>.prosa h2:first-child{margin-top:0}

.rej{display:grid;gap:clamp(.7rem,1.4vw,1rem);margin-top:clamp(1.4rem,3vw,2rem)}
@media (min-width:640px){.rej--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:860px){.rej--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:640px){.rej--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.rej--4{grid-template-columns:repeat(4,1fr)}}
.tar{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(1rem,2vw,1.35rem);
  display:flex;flex-direction:column;gap:.45rem;
}
.tar__n{font:700 .62rem/1 var(--grot);letter-spacing:.18em;color:var(--rojo-vivo)}
.tar h3{margin:0;font:600 1rem/1.35 var(--sans);color:var(--txt)}
.tar p{margin:0;font-size:.9rem;line-height:1.65;color:var(--txt2)}
.tar p b{color:var(--txt);font-weight:600}

/* ============================================================
   PASE — varias fotos de la misma pieza que rotan solas,
   con su pie de figura cambiando a la par.
   SIN JS: se apilan todas y se leen todos los pies (regla del proyecto).
   CON JS: una a la vez. El fundido solo existe si el visitante no pidió
   movimiento reducido; con `reduce` el cambio es seco y no hay avance solo.
   ============================================================ */
.pase__vis{position:relative;background:var(--bg2)}
.pase__it{display:block}
.pase__it + .pase__it{margin-top:10px}
.pase__it img{display:block;width:100%;height:auto}
.pase__pies{list-style:none;margin:0;padding:0}
.pase__pie + .pase__pie{margin-top:.5rem}
/* si el pase vive dentro de .prosa, la lista de pies NO es una lista de prosa:
   sin sangría y sin el contador rojo que numera los pasos */
.prosa .pase__pies{display:block;margin-top:0;gap:0}
.prosa .pase__pies .pase__pie{padding-left:0}
.prosa .pase__pies .pase__pie::before{content:none}

.js .pase__vis{aspect-ratio:4/3.1;overflow:hidden}
.js .pase__it{position:absolute;inset:0;margin:0;display:none}
.js .pase__it.is-on{display:block}
.js .pase__it img{width:100%;height:100%;object-fit:cover}
.js .pase__pie{display:none}
.js .pase__pie.is-on{display:block}

@media (prefers-reduced-motion:no-preference){
  .js .pase__it{display:block;opacity:0;transition:opacity .7s ease;pointer-events:none}
  .js .pase__it.is-on{opacity:1;pointer-events:auto}
}

/* mandos: puntos de 44 px de área táctil con la marca dibujada dentro */
.pase__mandos{display:none;gap:2px;margin-top:6px}
.js .pase__mandos{display:flex}
.pase__pt{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.pase__pt::before{
  content:"";width:26px;height:2px;background:var(--line2);
  transition:background-color .25s;
}
.pase__pt[aria-current="true"]::before{background:var(--rojo-vivo)}
.pase__pt:hover::before{background:var(--txt2)}
.pase__pt:focus-visible{outline:2px solid var(--rojo-vivo);outline-offset:-6px}

/* ============================================================
   CLIP — video corto de planta, sin sonido y en bucle.
   Reglas: nunca reemplaza a una foto, siempre lleva `poster` (lo que se ve
   sin JS y mientras carga) y NO trae el atributo `autoplay`: quien lo arranca
   es el IntersectionObserver de la página, y solo si el visitante no pidió
   movimiento reducido. `controls` siempre presente para poder detenerlo.
   ============================================================ */
.clip{position:relative;background:var(--bg2);line-height:0}
.clip video{display:block;width:100%;height:auto;background:var(--bg2)}
.clip__rot{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:.3rem .6rem;background:rgba(7,7,8,.78);
  font:700 .58rem/1.6 var(--grot);letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt2);pointer-events:none;
}

/* ============================================================
   SERVICIOS — cinta de verbos + tetraedro como marca de agua
   ============================================================ */
.serv{scroll-margin-top:70px;position:relative;overflow:clip}
.serv__marca{
  position:absolute;z-index:0;pointer-events:none;
  right:max(-130px,-13vw);top:1.5rem;
  width:min(62vw,580px);opacity:.16;
}
@media (max-width:720px){.serv__marca{width:92vw;right:-30vw;top:3rem;opacity:.11}}
.serv .wrap{position:relative;z-index:1}
.serv__grid{
  display:grid;gap:clamp(1.6rem,4vw,2.4rem);
  padding-block:clamp(1.8rem,4vw,2.8rem) clamp(3rem,7vw,5rem);
}
@media (min-width:720px){.serv__grid{grid-template-columns:repeat(3,1fr)}}
.serv__it{border-top:1px solid var(--line);padding-top:1.1rem}
.serv__it .n{font:700 .66rem/1 var(--grot);letter-spacing:.2em;color:var(--rojo-vivo)}
.serv__it h3{
  margin-top:.55rem;
  font:700 clamp(1.6rem,5vw,2.2rem)/1 var(--cond);text-transform:uppercase;
}
.serv__it h3 i{font-style:normal;color:var(--rojo-vivo)}
.serv__it p{margin-top:.6rem;font-size:.9rem;color:var(--txt2);line-height:1.6;max-width:30em}

/* ============================================================
   PIE
   ============================================================ */
.pie{border-top:1px solid var(--line);background:var(--bg2);position:relative;z-index:1}
.pie__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;
  padding-block:1.8rem;
}
.pie__brand{display:flex;align-items:center;gap:.6rem;font:700 .8rem/1 var(--grot);letter-spacing:.24em;color:var(--txt2)}
.pie__brand svg{width:24px;height:28px}
.pie__dir{font-size:.78rem;color:var(--mut);flex:1;min-width:230px}
.pie__dir a{color:var(--txt2);text-decoration:none;border-bottom:1px solid var(--line2)}
.pie__dir a:hover{color:var(--txt);border-color:var(--rojo)}
.pie__nav{
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;
  padding-block:1.3rem;border-top:1px solid var(--line-soft);
  font:400 .82rem/1.5 var(--sans);
}
.pie__nav a{color:var(--mut);text-decoration:none;transition:color .2s}
.pie__nav a:hover{color:var(--txt2)}
.pie__base{
  border-top:1px solid var(--line-soft);padding-block:.9rem;
  display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  font:700 .58rem/1.6 var(--grot);letter-spacing:.2em;text-transform:uppercase;color:#7A828E;
}
.pie__base a{color:#98A1AD;text-decoration:none;border-bottom:1px solid var(--line2)}
.pie__base a:hover{color:var(--txt2);border-color:var(--rojo)}

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */

/* ============================================================
   ▼▼▼  COMPONENTES DE PÁGINA INTERIOR  ▼▼▼
   (pieza de proceso y línea de producto)
   ============================================================ */

/* ---------- Migas de pan ---------- */
.migas{
  padding-top:5.6rem;
  font:700 .62rem/1.6 var(--grot);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
}
.migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.migas a{color:var(--mut);text-decoration:none;transition:color .2s}
.migas a:hover{color:var(--txt2)}
.migas li+li::before{content:"/";margin-right:.5rem;color:var(--line2)}
.migas [aria-current="page"]{color:var(--txt2)}

/* ---------- Encabezado de página interior ---------- */
.ph{padding-block:clamp(1.6rem,4vw,2.6rem) clamp(2rem,5vw,3.4rem);border-bottom:1px solid var(--line)}
.ph__grid{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media (min-width:960px){.ph__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}}
.ph h1{
  margin-top:1rem;
  font:700 clamp(2.4rem,8.6vw,4.8rem)/0.95 var(--cond);
  text-transform:uppercase;
}
.ph h1 i{font-style:normal;color:var(--rojo-vivo)}
.ph__lead{margin-top:1.3rem;max-width:44em;font-size:clamp(1rem,2.6vw,1.14rem);line-height:1.7;color:var(--txt2)}
.ph__lead b{color:var(--txt);font-weight:600}
.ph__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
@media (max-width:420px){.ph__ctas .btn{width:100%}}

/* ---------- Bloque de prosa técnica ---------- */
.prosa{max-width:44em}
.prosa h2{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  font:700 clamp(1.7rem,5.4vw,2.6rem)/1.02 var(--cond);text-transform:uppercase;
}
.prosa h2 i{font-style:normal;color:var(--rojo-vivo)}
.prosa h3,
.prosa h4{
  margin-top:2rem;
  font:600 1.06rem/1.4 var(--sans);color:var(--txt);letter-spacing:.01em;
}
.prosa p{margin-top:1rem;color:var(--txt2);line-height:1.75}
.prosa p b,.prosa li b{color:var(--txt);font-weight:600}
.prosa a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--rojo);transition:color .2s}
.prosa a:hover{color:var(--rojo-vivo)}
.prosa ul{margin-top:1rem;display:grid;gap:.6rem}
.prosa ul li{position:relative;padding-left:1.4rem;color:var(--txt2);line-height:1.7}
.prosa ul li::before{
  content:"";position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--rojo-vivo);
}

/* ---------- Página legal (privacidad) ---------- */
.legal{padding-block:clamp(2.2rem,5vw,3.4rem) clamp(3rem,7vw,4.6rem)}
.legal .prosa h2:first-child{margin-top:0}

/* ---------- Ficha técnica (la tabla que nadie más publica) ---------- */
.ficha{
  border:1px solid var(--line);background:var(--panel);
  position:relative;
}
.ficha__cab{
  padding:clamp(1rem,2.4vw,1.3rem);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.ficha__cab h2,.ficha__cab h3{
  font:700 clamp(1.3rem,4vw,1.7rem)/1 var(--cond);text-transform:uppercase;
}
.ficha__sello{
  font:700 .58rem/1 var(--grot);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line2);padding:.45em .7em;
}
.ficha table{width:100%;border-collapse:collapse;font-size:.92rem}
.ficha caption{
  padding:clamp(1rem,2.4vw,1.3rem) clamp(1rem,2.4vw,1.3rem) 0;
  text-align:left;font:700 .62rem/1.6 var(--grot);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);
}
.ficha th,.ficha td{
  padding:.9rem clamp(1rem,2.4vw,1.3rem);
  border-bottom:1px solid var(--line-soft);
  text-align:left;vertical-align:top;line-height:1.6;
}
.ficha tbody th{
  font:600 .78rem/1.5 var(--sans);letter-spacing:.02em;color:var(--mut);
  width:40%;text-transform:uppercase;
}
.ficha td{color:var(--txt2)}
.ficha td b{color:var(--txt);font-weight:600}
.ficha tr:last-child th,.ficha tr:last-child td{border-bottom:0}
.ficha tbody tr:hover{background:rgba(255,255,255,.017)}
/* tabla de modelos/dimensiones, con scroll propio */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-scroll table{min-width:34rem}
/* el caption hereda el ancho mínimo de la tabla y en móvil se sale del encuadre:
   anclado a la izquierda, se queda legible mientras la tabla se desliza debajo */
.tabla-scroll caption{position:sticky;left:0;width:min(100%,34rem);box-sizing:border-box}
.tabla-scroll thead th{
  font:700 .62rem/1.5 var(--grot);letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt2);border-bottom:1px solid var(--line);white-space:nowrap;
}
.tabla-scroll tbody td{font-variant-numeric:tabular-nums}

/* ---------- Preguntas frecuentes ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:1.15rem 2.6rem 1.15rem 0;position:relative;
  font:600 1.02rem/1.5 var(--sans);color:var(--txt);
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rojo-vivo)}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:1.5rem;
  width:11px;height:11px;border-right:1.6px solid var(--rojo-vivo);border-bottom:1.6px solid var(--rojo-vivo);
  transform:rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.faq details>div{padding-bottom:1.3rem;max-width:46em}
.faq details>div p{color:var(--txt2);line-height:1.75}
.faq details>div p+p{margin-top:.8rem}

/* ---------- Banda de cierre / CTA ---------- */
.cierre{border-top:1px solid var(--line);background:rgba(11,13,16,.75);position:relative;overflow:clip}
.cierre__in{
  padding-block:clamp(2.6rem,7vw,4.6rem);
  display:grid;gap:1.6rem;
}
@media (min-width:860px){.cierre__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.cierre h2{font:700 clamp(1.9rem,6.4vw,3.2rem)/1 var(--cond);text-transform:uppercase}
.cierre h2 i{font-style:normal;color:var(--rojo-vivo)}
.cierre p{margin-top:1rem;color:var(--txt2);line-height:1.7;max-width:42em}
.cierre__ctas{display:flex;flex-wrap:wrap;gap:.8rem}
@media (max-width:420px){.cierre__ctas .btn{width:100%}}

/* ---------- Piezas relacionadas ---------- */
.rel{border-top:1px solid var(--line);padding-block:clamp(2.2rem,5vw,3.4rem)}
.rel h2{font:700 .68rem/1.6 var(--grot);letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.rel ul{margin-top:1.2rem;display:grid;gap:.8rem}
@media (min-width:720px){.rel ul{grid-template-columns:repeat(3,1fr)}}
.rel a{
  display:block;padding:1.1rem;border:1px solid var(--line);background:var(--panel);
  text-decoration:none;transition:border-color .2s,transform .2s;min-height:44px;
}
.rel a:hover{border-color:var(--rojo);transform:translateY(-2px)}
.rel .t{display:block;font:700 1.15rem/1.1 var(--cond);text-transform:uppercase;color:var(--txt)}
.rel .d{display:block;margin-top:.35rem;font-size:.84rem;color:var(--mut);line-height:1.5}

/* ---------- Cotizador (determinista: arma el mensaje de WhatsApp) ---------- */
.cotizar{scroll-margin-top:70px;border-top:1px solid var(--line)}
.cotizar__grid{
  display:grid;gap:clamp(1.6rem,4vw,2.6rem);
  padding-block:clamp(1.8rem,4vw,2.6rem) clamp(3rem,7vw,5rem);
}
@media (min-width:900px){.cotizar__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.cotizador{border:1px solid var(--line);background:var(--panel);padding:clamp(1.2rem,3vw,2rem)}
.campo+.campo{margin-top:1.5rem}
.campo>legend,.campo>label{
  display:block;
  font:700 .64rem/1.5 var(--grot);letter-spacing:.2em;text-transform:uppercase;color:var(--rojo-vivo);
  margin-bottom:.8rem;
}
.opciones{display:flex;flex-wrap:wrap;gap:.6rem}
.opciones input{position:absolute;opacity:0;width:1px;height:1px}
.opciones label{
  display:inline-flex;align-items:center;min-height:46px;
  padding:.65rem 1rem;border:1px solid var(--line2);border-radius:3px;
  font:400 .92rem/1.2 var(--sans);color:var(--txt2);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.opciones label:hover{border-color:var(--txt2);color:var(--txt)}
.opciones input:checked+label{border-color:var(--rojo);background:rgba(232,54,42,.1);color:var(--txt)}
.opciones input:focus-visible+label{outline:2px solid var(--rojo-vivo);outline-offset:3px}
.campo input[type="text"]{
  width:100%;min-height:48px;padding:.7rem .9rem;
  background:var(--bg2);border:1px solid var(--line2);border-radius:3px;
  color:var(--txt);font:400 1rem/1.4 var(--sans);
}
.campo input[type="text"]::placeholder{color:#6C7480}
.campo input[type="text"]:focus{outline:none;border-color:var(--rojo)}
.vista{
  margin-top:1.6rem;padding:1.1rem;border:1px dashed var(--line2);background:var(--bg2);
}
.vista .rotulo{
  display:block;font:700 .58rem/1.6 var(--grot);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
}
.vista p{margin-top:.6rem;color:var(--txt2);line-height:1.6;font-size:.95rem}
/* Cierra la landing desde el 2026-09-09: aquí vivía el cotizador y ahora
   solo quedan los datos de contacto —el NAP visible— y un botón que sube al
   formulario, que es el único que hay. */
.contacto__grid{
  display:grid;gap:clamp(1.2rem,3vw,2rem);
  padding-block:clamp(1.6rem,4vw,2.4rem) clamp(3rem,7vw,5rem);
}
.contacto{border:1px solid var(--line);background:var(--bg2);padding:clamp(1.2rem,3vw,1.7rem)}
.contacto h2,.contacto h3{font:700 clamp(1.3rem,4vw,1.7rem)/1 var(--cond);text-transform:uppercase}
.contacto ul{margin-top:1.2rem;display:grid;gap:1rem}
/* seis datos en una sola fila vertical dejaban media sección vacía: van en dos
   columnas en cuanto hay ancho (Lau, 2026-09-09) */
@media (min-width:760px){.contacto ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem 2.4rem}}
.contacto li{display:flex;gap:.8rem;align-items:flex-start;font-size:.94rem;line-height:1.5}
.contacto li svg{width:18px;height:18px;flex:none;margin-top:.2rem;fill:var(--rojo-vivo)}
.contacto a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--line2);
  display:inline-flex;align-items:center;min-height:44px}
.contacto a:hover{border-color:var(--rojo)}
.contacto .sub{display:block;font-size:.8rem;color:var(--mut);margin-top:.2rem}

/* ---------- Sectores (prueba social sin nombrar clientes) ---------- */
.sectores{display:grid;gap:.7rem;margin-top:1.6rem}
@media (min-width:640px){.sectores{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.sectores{grid-template-columns:repeat(3,1fr)}}
.sector{
  border:1px solid var(--line);background:var(--panel);padding:1rem 1.1rem;
  display:flex;align-items:baseline;gap:.7rem;
}
.sector .n{font:700 .62rem/1 var(--grot);letter-spacing:.16em;color:var(--rojo-vivo);flex:none}
.sector .t{font:400 .92rem/1.5 var(--sans);color:var(--txt2)}

/* ---------- Normas ---------- */
.normas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.norma{
  border:1px solid var(--line2);background:rgba(255,255,255,.02);
  padding:.6rem .9rem;
  font:700 .68rem/1.3 var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--txt2);
}
.norma b{color:var(--txt);font-weight:700}

/* ============================================================
   ÁREAS TÁCTILES — el lector está en obra, con guantes y a pleno sol
   Los enlaces de navegación suben a 44 px. Los enlaces EN MEDIO DE UN
   PÁRRAFO quedan como están: WCAG los exceptúa y partir la línea base
   de la prosa por un hitbox sería peor.
   ============================================================ */
.migas a,
.pie__nav a,
.menu a{display:inline-flex;align-items:center;min-height:44px}
.migas li{display:inline-flex;align-items:center}
.migas ol{gap:0 .5rem}
.brand{min-height:44px}
.skip{min-height:44px;display:inline-flex;align-items:center}
/* el WhatsApp y el correo del pie son CTA, no prosa: van a 44 px */
.pie__dir a{display:inline-flex;align-items:center;min-height:44px}
.pie__base a{display:inline-flex;align-items:center;min-height:44px}

/* ============================================================
   AJUSTES DE FIGURA Y TABLA (pedidos por las páginas interiores)
   ============================================================ */

/* figuras sueltas: una foto vertical a 1240 px es absurda */
.fig--media{max-width:620px}
.fig--estrecha{max-width:400px}

/* esquema acotado que necesita ancho mínimo para que los rótulos se lean:
   en móvil se desliza, no se encoge a 4 px. Mismo gesto que .tabla-scroll. */
.esquema-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.esquema-scroll>svg{min-width:34rem}

/* el pie de figura va en versalitas, pero a veces el rótulo debe
   respetar su caja exacta (una cota «a» minúscula no es una «A») */
.fig-cap .lit{text-transform:none}
.legend li b{color:var(--txt);font-weight:600}

/* separador de bloque dentro de la ficha: el corte A→B se ve, no se deduce */
.ficha .banda th{
  background:rgba(255,255,255,.028);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font:700 .62rem/1.5 var(--grot);letter-spacing:.2em;text-transform:uppercase;
  color:var(--rojo-vivo);width:auto;padding-block:.75rem;
}

/* aviso de que la tabla se desliza — si no, en móvil nadie lo descubre */
.tabla-scroll{
  position:relative;
  background:
    linear-gradient(90deg,var(--panel) 30%,rgba(16,19,24,0)) left / 32px 100% no-repeat,
    linear-gradient(90deg,rgba(16,19,24,0),var(--panel) 70%) right / 32px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.5),transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.5),transparent) right / 14px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}

/* lista de pasos numerada: `ul,ol{list-style:none}` deja los <ol> mudos */
.prosa ol{margin-top:1rem;display:grid;gap:.6rem;counter-reset:paso}
.prosa ol li{
  counter-increment:paso;position:relative;padding-left:2.6rem;
  color:var(--txt2);line-height:1.7;
}
.prosa ol li::before{
  content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font:700 .72rem/1.6 var(--grot);letter-spacing:.1em;color:var(--rojo-vivo);
}

/* ============================================================
   REVELADOS AL SCROLL (sin JS = todo visible)
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .js [data-io] .rv{opacity:0;transform:translateY(18px);
    transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
  .js [data-io] .rv:nth-child(2){transition-delay:.08s}
  .js [data-io] .rv:nth-child(3){transition-delay:.16s}
  .js [data-io] .rv:nth-child(4){transition-delay:.24s}
  .js [data-io].in .rv{opacity:1;transform:none}

  .js [data-io] .cota-line{transform:scaleY(0);transition:transform .9s cubic-bezier(.3,0,.2,1) .45s}
  .js [data-io] .cota-arrow,.js [data-io] .cota-tick{opacity:0;transition:opacity .4s ease 1.2s}
  .js [data-io].in .cota-line{transform:scaleY(1)}
  .js [data-io].in .cota-arrow,.js [data-io].in .cota-tick{opacity:1}

  .js [data-io] .bln{opacity:0;transform:scale(.4)}
  .js [data-io].in .bln{opacity:1;transform:scale(1);
    transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.4,.4,1)}
  .js [data-io].in .bln:nth-of-type(1){transition-delay:.7s}
  .js [data-io].in .bln:nth-of-type(2){transition-delay:.85s}
  .js [data-io].in .bln:nth-of-type(3){transition-delay:1s}

  .js [data-io] .tk{opacity:0;transition:opacity .5s ease .5s}
  .js [data-io].in .tk{opacity:1}
}

/* ============================================================
   MOVIMIENTO REDUCIDO — todo quieto, todo visible
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .hero__title .line>span{transform:none}
  .hero__sub,.hero__ctas,.hero__meta{opacity:1}
}

/* ============================================================
   JUSTIFICADO — decisión de Lau (2026-08-17)
   Se justifica SOLO la prosa corrida. Títulos, rótulos, botones,
   celdas de tabla y pies de figura siguen a la izquierda: justificar
   un texto de una o dos líneas abre huecos en vez de cerrarlos.
   `hyphens:auto` es obligatorio aquí — sin partición de palabras, el
   justificado en columna estrecha (celular) abre ríos blancos.
   Depende de `lang="es-CO"` en el <html>, que todas las páginas tienen.
   ============================================================ */
.prosa p,
.prosa ul li,
.prosa ol li,
.shead .intro,
.ph__lead,
.lamina__copy p,
.serv__it p,
.pz__body>p,
.tar p,
.faq details>div p,
.cierre p{
  text-align:justify;
  text-align-last:left;   /* la última línea nunca se estira */
  /* Partir palabras SOLO en columna estrecha. En pantalla ancha no hacen falta
     ríos que cerrar y la partición se lee mal: «alma-cenamiento» (Lau, 2026-09-10).
     Además se sube el mínimo a 10 letras y 5 antes del guion, para que cuando
     parta en el celular corte por un sitio razonable. */
  -webkit-hyphens:auto;
  hyphens:auto;
  hyphenate-limit-chars:10 5 4;
}
@media (min-width:760px){
  .prosa p,.prosa ul li,.prosa ol li,.shead .intro,.ph__lead,.lamina__copy p,
  .serv__it p,.pz__body>p,.tar p,.faq details>div p,.cierre p{
    -webkit-hyphens:manual;hyphens:manual;
  }
}

/* ============================================================
   ROT — el nombre del producto que rota dentro del titular.
   La frase es fija («Fabricamos … en PRFV a la medida») y solo
   cambia el sustantivo, como el verbo de la referencia de Lau.
   SIN JS: se ve el primero (`.is-on` viene puesto en el HTML) y los
   nueve nombres se leen completos en la entradilla y en el catálogo.
   CON `reduce`: no rota — queda quieto en el primero, como el pase.
   Los ítems se apilan en la misma celda de rejilla: la caja mide lo
   que el nombre más ancho, así el titular no salta al cambiar.
   ============================================================ */
/* El titular quedó ESTÁTICO el 2026-09-09 (Lau): «Fabricamos piezas y tanques
   en PRFV a la medida». El nombre resaltado sigue en el rojo del logo con letra
   negra (4,99:1), que es uno de los dos únicos sitios con rojo de fondo. */
.hero__title .marca{
  font-style:normal;background:var(--rojo);color:#070708;
  padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}


/* ============================================================
   CINTAS — dos bandas que corren en sentidos opuestos bajo el hero:
   arriba QUÉ fabricamos, abajo POR QUÉ con Fibremos.
   Puro CSS: cada vía lleva el juego de fichas dos veces y se corre
   media vía, así el bucle no tiene costura. La copia va `aria-hidden`
   para que el lector de pantalla no lea todo dos veces.
   Con `reduce` el `*{animation:none}` global la detiene: por eso la
   cinta pasa a poder arrastrarse con el dedo y la copia desaparece.
   ============================================================ */
.cintas{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden}
.cinta{overflow:hidden;position:relative}
.cinta + .cinta{border-top:1px solid var(--line)}
.cinta--b{background:var(--panel)}
.cinta__via{
  display:flex;width:max-content;
  animation:cintaIzq 46s linear infinite;
  will-change:transform;
}
.cinta--b .cinta__via{animation-name:cintaDer}
.cinta:hover .cinta__via,.cinta:focus-within .cinta__via{animation-play-state:paused}
@keyframes cintaIzq{from{transform:translateX(0)}   to{transform:translateX(-50%)}}
@keyframes cintaDer{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.cinta__set{
  display:flex;align-items:center;list-style:none;margin:0;padding:0;
  gap:clamp(.5rem,1.2vw,.75rem);
  padding-block:clamp(.6rem,1.4vw,.85rem);
  padding-inline:0 clamp(.5rem,1.2vw,.75rem);
}
.cinta__it{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  border:1px solid var(--line2);border-radius:999px;
  padding:.5rem clamp(.8rem,1.6vw,1.05rem);
  background:rgba(255,255,255,.03);
  font:700 clamp(.68rem,1.7vw,.8rem)/1 var(--grot);
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);
}
/* el tick rojo de plano, el mismo de las cotas */
.cinta__it::before{content:"";width:6px;height:6px;flex:none;background:var(--rojo-vivo)}
.cinta--b .cinta__it{border-color:transparent;background:none;color:var(--mut);letter-spacing:.14em}
.cinta--b .cinta__it::before{background:var(--trazo-suave);width:14px;height:1px}

@media (prefers-reduced-motion:reduce){
  .cinta{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cinta__via{width:auto}
  .cinta__set[aria-hidden="true"]{display:none}
}

/* ============================================================
   FW — la ficha técnica como ventana emergente (`<dialog>`).
   Regla del proyecto: sin JS todo debe verse. Por eso la ficha nace
   con el atributo `open` y se lee dentro de la tarjeta como un bloque
   más. Cuando hay JS, el motor la cierra, le pone `.lista` y a partir
   de ahí se abre con `showModal()`: foco atrapado, Esc, y al cerrar el
   navegador devuelve el foco al enlace que la abrió — la persona
   vuelve al mismo punto de la página. El desenfoque de atrás es
   `::backdrop`, que solo existe en modo modal.
   ============================================================ */
.fw{
  position:static;display:block;width:auto;max-width:none;margin:.9rem 0 0;
  border:1px solid var(--line);background:var(--panel);color:var(--txt);padding:0;
}
.js .fw{display:none}
/* navegador sin <dialog>: la ficha se lee como bloque dentro de la tarjeta */
.js .fw--plana{display:block}
.js .fw.lista[open]{
  display:block;position:fixed;inset:0;margin:auto;
  width:min(680px,94vw);max-height:min(86vh,880px);overflow:auto;
  border:1px solid var(--line2);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  animation:fwEntra .28s cubic-bezier(.2,.7,.3,1) both;
  overscroll-behavior:contain;
}
@keyframes fwEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fw::backdrop{background:rgba(7,7,8,.74);-webkit-backdrop-filter:blur(9px) saturate(.55);backdrop-filter:blur(9px) saturate(.55)}

.fw__cab{
  position:sticky;top:0;z-index:2;
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:.6rem;
  padding:clamp(.9rem,2.2vw,1.2rem) clamp(.9rem,2.4vw,1.4rem);
  border-bottom:1px solid var(--line);background:var(--panel);
}
.fw__idx{font:700 .6rem/1.6 var(--grot);letter-spacing:.18em;text-transform:uppercase;color:var(--rojo-vivo)}
.fw__cab h4{margin:.1rem 0 0;font:700 clamp(1.25rem,3.4vw,1.7rem)/1.05 var(--cond);text-transform:uppercase;letter-spacing:.01em}
.fw__x{
  width:44px;height:44px;margin:-10px -8px 0 0;padding:0;border:0;background:none;cursor:pointer;
  display:none;place-items:center;color:var(--mut);font:400 1.5rem/1 var(--sans);
}
.js .fw.lista .fw__x{display:grid}
.fw__x:hover{color:var(--rojo-vivo)}
.fw__x:focus-visible{outline:2px solid var(--rojo-vivo);outline-offset:-4px}

.fw__cuerpo{padding:clamp(.9rem,2.4vw,1.4rem)}
.fw__tabla{width:100%;border-collapse:collapse}
.fw__tabla th,.fw__tabla td{
  text-align:left;vertical-align:top;padding:.6rem .2rem;
  border-bottom:1px solid var(--line-soft);font-size:.9rem;line-height:1.55;
}
.fw__tabla th{
  width:38%;color:var(--mut);font:700 .62rem/1.6 var(--grot);
  letter-spacing:.12em;text-transform:uppercase;padding-right:.9rem;
}
.fw__tabla td{color:var(--txt2)}
.fw__tabla td b{color:var(--txt);font-weight:600}
.fw__tabla tr:last-child th,.fw__tabla tr:last-child td{border-bottom:0}

.fw__cot{margin-top:clamp(.9rem,2.2vw,1.2rem);border:1px solid var(--line);background:var(--bg2);padding:clamp(.8rem,2vw,1.05rem)}
.fw__rot{font:700 .62rem/1.6 var(--grot);letter-spacing:.16em;text-transform:uppercase;color:var(--txt)}
.fw__cot ul{list-style:none;margin:.55rem 0 0;padding:0;display:grid;gap:.4rem}
.fw__cot li{position:relative;padding-left:1.15rem;font-size:.88rem;line-height:1.55;color:var(--txt2)}
.fw__cot li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:2px;background:var(--rojo-vivo)}

@media (max-width:560px){
  .fw__tabla th,.fw__tabla td{display:block;width:auto;padding-inline:0}
  .fw__tabla th{border-bottom:0;padding-bottom:.1rem}
  .fw__tabla td{padding-top:0}
}

.fw__pie{
  position:sticky;bottom:0;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  padding:clamp(.85rem,2.2vw,1.15rem) clamp(.9rem,2.4vw,1.4rem);
  border-top:1px solid var(--line);background:var(--bg2);
}
.fw__nota{font-size:.78rem;line-height:1.5;color:var(--mut);flex:1 1 12rem}

/* ============================================================
   GAL — galería de fotos que corren solas, en dos filas y en
   sentidos opuestos. Mismo motor que las cintas (puro CSS: cada
   fila lleva su juego dos veces y se corre media fila), y las
   mismas reglas: se detiene con el puntero encima o con el foco
   dentro, y con `reduce` se para y se puede arrastrar.
   Todas son fotos propias de planta y obra: ninguna generada.
   ============================================================ */
.gal{background:var(--bg2);border-block:1px solid var(--line);padding-block:clamp(1.6rem,4vw,2.6rem)}
.gal>.wrap{margin-bottom:clamp(1.3rem,3.4vw,2.2rem)}
.gal__fila{overflow:hidden}
.gal__fila + .gal__fila{margin-top:clamp(.5rem,1.2vw,.8rem)}
.gal__via{display:flex;width:max-content;animation:cintaIzq 72s linear infinite;will-change:transform}
.gal__fila--b .gal__via{animation-name:cintaDer;animation-duration:84s}
.gal__fila:hover .gal__via,.gal__fila:focus-within .gal__via{animation-play-state:paused}
.gal__set{display:flex;list-style:none;margin:0;padding:0;gap:clamp(.5rem,1.2vw,.8rem);padding-right:clamp(.5rem,1.2vw,.8rem)}
.gal__it{
  position:relative;flex:none;
  width:clamp(200px,24vw,320px);
  border:1px solid var(--line);background:var(--bg);
}
.gal__it img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
/* rótulo de plano en la esquina, como los pies de figura del resto del sitio */
.gal__rot{
  position:absolute;left:0;bottom:0;
  padding:.34rem .55rem;
  background:rgba(7,7,8,.78);
  font:700 .56rem/1 var(--grot);letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);
}
.gal__rot::before{content:"";display:inline-block;width:10px;height:1px;background:var(--rojo-vivo);
  vertical-align:middle;margin-right:.4rem}

@media (prefers-reduced-motion:reduce){
  .gal__fila{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gal__via{width:auto}
  .gal__set[aria-hidden="true"]{display:none}
}

/* ============================================================
   BANDA — el banner de cierre, a todo el ancho y en el rojo del
   logo. Es el único bloque del sitio con el rojo de fondo: por eso
   funciona como parada. Texto en negro (4,99:1 sobre el rojo) y
   botón negro con texto blanco.
   ============================================================ */
.banda{
  background:var(--rojo);color:#070708;
  padding:clamp(2.8rem,8vw,5rem) var(--gut);
  text-align:center;
}
.banda__caja{max-width:44rem;margin:0 auto;display:grid;gap:clamp(1.2rem,3vw,1.8rem);justify-items:center}
.banda h2{
  font:700 clamp(2.1rem,6.6vw,4.4rem)/0.98 var(--cond);
  text-transform:uppercase;letter-spacing:-.005em;color:#070708;
}
.banda h2 i{font-style:normal;color:#F2F4F7}
.banda__nota{font:400 clamp(.82rem,2.1vw,.95rem)/1.6 var(--sans);color:#070708;opacity:.82}
.banda .btn--negro{
  background:#070708;color:#F2F4F7;border:0;
  padding:1rem clamp(1.3rem,3vw,1.9rem);
}
.banda .btn--negro:hover{background:#17191d;color:#fff}
.banda .btn--negro svg{width:20px;height:20px;fill:currentColor;flex:none}
.banda .btn--negro:focus-visible{outline:3px solid #070708;outline-offset:3px}

/* ============================================================
   IMPRESIÓN — la ficha técnica se imprime y se lleva a obra
   ============================================================ */
@media print{
  body{background:#fff;color:#000}
  body::after,.top,.wa-float,.skip,.cierre__ctas,.cotizar,.rel,.cintas,.gal{display:none !important}
  /* si alguien imprime con la ficha abierta, se imprime como bloque normal */
  .js .fw.lista[open]{position:static !important;max-height:none;box-shadow:none;animation:none}
  .banda{background:#fff;color:#000;border-block:1px solid #999}
  .ficha,.ficha__cab{border-color:#999}
  .ficha th,.ficha td{border-color:#ccc;color:#000}
  .prosa p,.prosa li,.ficha td{color:#000}
}