/* ---------- hero a pantalla completa ----------
   El velo es DELIBERADAMENTE ligero del lado derecho:
   la foto del agua debe leerse con sus cianes reales.
   Solo se oscurece la franja izquierda, donde va el texto. */
.hero{
  /* --top-h la actualiza app.js con la altura real de .top (el .mast,
     único hijo desde que la franja .util se quitó del marcado), así el
     hero llena exacto desde abajo del header hasta el fondo del viewport
     a cualquier ancho, sin restar un número fijo a mano.
     El 70px de respaldo es el alto del mast por si el JS no corriera. */
  position:relative;min-height:calc(100svh - var(--top-h, 70px));
  display:flex;align-items:center;padding:60px 0;overflow:hidden;color:var(--stone);
  background:var(--deep) url('../assets/agua.jpg') center 45%/cover no-repeat;
}
/* Sin src en el HTML (app.js lo agrega solo en ancho >= 880px y sin
   prefers-reduced-motion): sin <source>, el <video> solo muestra su
   poster, y si eso fallara el background:url('../assets/agua.jpg') de .hero
   de arriba sigue ahí debajo. z-index:0 lo deja por debajo de .hero-veil
   (z-index:1) y del .wrap del contenido (z-index:3), sin tocar ninguno. */
.hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(5,32,31,.90) 0%,
    rgba(6,40,39,.76) 30%,
    rgba(7,52,50,.40) 55%,
    rgba(8,62,60,.10) 78%,
    rgba(8,62,60,0) 100%);
}
.hero .wrap{position:relative;z-index:3;width:100%}
/* Dos columnas en ancha: texto a la izquierda (más ancha), bifurcación a
   la derecha, alineada al fondo del bloque de texto (align-items:end).
   Abajo de 880px vuelve a apilarse, igual que antes. */
.hero-in{display:grid;grid-template-columns:3fr 2fr;gap:48px;align-items:end}
@media(max-width:880px){.hero-in{display:block}}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--glow);margin-bottom:20px}
.hero h1{font-size:clamp(42px,6.2vw,74px);font-weight:800;margin-bottom:20px;
  text-shadow:0 2px 34px rgba(0,0,0,.42)}
/* white-space:nowrap: "Sin instalación." (el tramo verde) no se parte entre
   renglones — o cae entero en una línea o baja entero a la siguiente, nunca
   "Sin" arriba e "instalación." abajo. Cabe en un renglón hasta en 360px
   (mide ~288px sobre ~312px disponibles). */
.hero h1 em{font-style:normal;color:var(--glow);white-space:nowrap}
/* Medida de lectura en ch, independiente del ancho real del antetítulo.
   48ch en ancha (tope ~50), 32ch en angosta (piso ~30, con respiro a la
   derecha en vez de correr hasta el borde). */
.lede{font-size:18.5px;max-width:48ch;color:rgba(235,233,226,.92);margin-bottom:0;
  text-shadow:0 1px 16px rgba(0,0,0,.4)}
@media(max-width:880px){.lede{max-width:32ch;margin-bottom:44px}}

.fork-q{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;
  margin-bottom:14px;color:var(--stone);text-shadow:0 1px 14px rgba(0,0,0,.4)}
.fork-o{display:flex;gap:14px;flex-wrap:wrap}
.fo{flex:1 1 250px;max-width:310px;text-decoration:none;padding:18px 20px;
  background:rgba(5,32,31,.55);backdrop-filter:blur(3px);
  border-bottom:2px solid rgba(235,233,226,.3);border-radius:3px 3px 0 0;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.fo:hover,.fo:focus-visible{background:rgba(5,32,31,.72);border-bottom-color:var(--glow)}
.fo b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:17.5px;
  font-weight:700;margin-bottom:3px;color:var(--stone)}
.fo span{display:block;font-size:13.5px;color:rgba(235,233,226,.9);line-height:1.4;
  text-shadow:0 1px 10px rgba(5,32,31,.55)}
/* La tarjeta "Ayúdenme" ya no es ancla en la misma página (ahora va a
   calculadora.html): un aro y resplandor discretos en --glow la distinguen de
   "Sé lo que busco", sin volverla un botón aparte. El resplandor late muy
   suave; el @media prefers-reduced-motion global (más abajo) apaga la
   animación y deja el aro estático. */
.fo-hi{border-bottom-color:var(--glow);
  box-shadow:0 0 0 1px rgba(79,227,193,.4),0 6px 20px rgba(79,227,193,.13);
  animation:foGlow 3.4s ease-in-out infinite}
@keyframes foGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(79,227,193,.32),0 6px 18px rgba(79,227,193,.1)}
  50%{box-shadow:0 0 0 1px rgba(79,227,193,.58),0 10px 30px rgba(79,227,193,.22)}
}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  opacity:.55;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- estructura de secciones ---------- */
.sec{padding:78px 0}
/* .sec-top: el padding-top de 78px de .sec está pensado para una sección
   que viene DESPUÉS de otra (rail, calculadora, franjas...); en
   catalogo.html, categoria.html y producto.html la sección es la primera
   cosa tras la cabecera, sin hero de por medio, y ese mismo valor se veía
   como hueco de más. Solo se ajusta el padding-top — el inferior lo sigue
   dando .sec, sin tocar. Un solo lugar para las tres páginas.
   Selector compuesto .sec.sec-top (no .sec-top solo): más abajo en el
   archivo hay un @media(max-width:520px){.sec{padding:54px 0}} general
   para todas las secciones del sitio; con la misma especificidad que un
   .sec-top suelto, esa regla general (que viene después en el archivo)
   le ganaría en angosto por orden de aparición. .sec.sec-top sube la
   especificidad a propósito para no depender de en qué línea quede cada
   una. */
.sec.sec-top{padding-top:40px}
@media(max-width:520px){.sec.sec-top{padding-top:24px}}
/* Ficha de producto (maqueta 2026-10-14): menos aire bajo la cabecera para
   que la primera pantalla empiece arriba. Acotado a body.pg-prod (puesta por
   JS en el bloque 6 de app.js) para no tocar catalogo.html/categoria.html/
   guia.html, que comparten .sec.sec-top. El alto real de la imagen fija lo
   calcula 09-producto.css con --top-h y --prod-top-h. */
body.pg-prod .sec.sec-top{padding-top:24px}
.sec-stone{background:var(--stone)}
.sec-2{background:var(--stone-2)}
.sec-head{margin-bottom:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:10px}
.sec-head p{color:var(--ink-mid);font-size:16.5px;max-width:56ch}
/* El h2 del riel es el enlace a catalogo.html (el <a> vive DENTRO del
   h2, la jerarquía de encabezados no se toca): tamaño y peso los hereda
   del h2, no se declaran aquí. Mismo tratamiento de hover que el resto
   de los enlaces de texto del sitio (.cat-back, .rescol-go): sin
   subrayado en reposo, subrayado en hover/foco — se ve clicable sin
   convertirse en botón. */
.rail-h2-link{text-decoration:none}
.rail-h2-link:hover,.rail-h2-link:focus-visible{text-decoration:underline}

/* ---------- riel de catálogo ---------- */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:10px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 262px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:5px;overflow:hidden;text-decoration:none;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,36,34,.13)}
.card-img{height:130px;position:relative;overflow:hidden;background:var(--deep-2)}
.card-img .ph{position:absolute;inset:0;background:url('../assets/agua.jpg') center/cover}
.card-img .tone{position:absolute;inset:0}

/* Categorías sin datos todavía: sin comportamiento de enlace (div, no
   a), sin el hover de elevación. Solo la foto se atenúa — el texto de
   la tarjeta y la insignia se quedan a contraste pleno, si no el aviso
   de "no disponible" sería lo menos legible de la tarjeta. */
.card-soon{cursor:default}
.card-soon:hover{transform:none;box-shadow:none}
.card-soon .ph,.card-soon .tone{opacity:.55}
.card-soon-badge{position:absolute;right:12px;top:12px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
  background:rgba(10,36,34,.75);padding:4px 8px;border-radius:2px;z-index:3}
.card-b{padding:16px 18px 18px}
/* overflow-wrap:break-word en las tres — no es para achicar nada, es para
   que una palabra sin espacio (p. ej. "Transformadores") pase a su propio
   renglón partiéndose ahí si no cabe entera, en vez de desbordar su caja
   y quedar recortada a la mitad por el overflow:hidden de .card (que sí
   hace falta: recorta las esquinas cuadradas de .card-img al radio de
   5px de la tarjeta, no se toca). Compartidas con el riel de index.html;
   ahí el ancho fijo de 262px ya alcanza para estos mismos textos, así que
   la regla no cambia nada ahí — solo entra en juego donde .card se angosta.
   hyphens:auto en el título (solo ahí, no en .card-r/.card-c, que son
   datos/cifras y no deben partirse con guion): en catalogo.html, con la
   rejilla de 2 columnas angosta, "Transformadores" necesita bajar a 13.6px
   para caber entero — menos de los 16px mínimos de cuerpo de texto, así
   que en vez de achicar la letra se corta por sílaba (diccionario es-MX,
   de lang="es-MX" en <html>, las 8 páginas). overflow-wrap:break-word se
   queda como red: hyphens actúa primero y solo si una palabra no tiene
   dónde partir en sílaba, el navegador cae al corte arbitrario de antes. */
/* color:var(--ink) explícito, no heredado: esta tarjeta puede vivir dentro
   de una caja oscura (guia.html, .prod-q-oscuro) y su fondo sigue siendo
   blanco — sin esto, el título heredaría el texto claro de la caja y
   quedaría casi invisible sobre su propio fondo. */
.card-b h3{font-size:18px;font-weight:700;margin-bottom:5px;overflow-wrap:break-word;
  -webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--ink)}
.card-r{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--glow-aa);margin-bottom:3px;overflow-wrap:break-word}
.card-c{font-size:12.5px;color:var(--ink-mid);overflow-wrap:break-word}
.rail-nav{display:flex;gap:8px}
.rn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;
  display:grid;place-items:center;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.rn:hover:not([disabled]){background:var(--deep);border-color:var(--deep);color:var(--stone)}
.rn[disabled]{opacity:.3;cursor:default}