/*
 * estilos.css — paleta y tipografia de ZU (09_TEXTOS_Y_MARCA.md §8).
 *
 * 🔴 GAP CONOCIDO: doc 09 dice "la paleta vive en parametros_empresa",
 * pero esquema/01_catalogo.sql no tiene ninguna columna de color en esa
 * tabla -- ver el plan aprobado. Hasta que exista esa columna (o se decida
 * otra cosa), la paleta de ZU queda fija aca, no inventada como columna
 * nueva sin confirmar. Si llega un segundo cliente de otro rubro, este
 * archivo tiene que dejar de ser el CSS del sistema y pasar a ser el de
 * UN cliente (la misma advertencia que doc 09 hace de si mismo).
 */

/*
 * Fuentes auto-alojadas, rescatadas de v1 (public-landing/fonts/) el
 * 13-sep-2026 -- ver problemas_v2.md #4 para el detalle completo de la
 * verificacion. Dos hallazgos reales al analizarlas (no se copiaron a
 * ciegas):
 *
 * 1. fraunces.woff2 es una fuente variable pero SOLO en el eje `opsz`
 *    (9 a 144), fija en peso 700 (instancia nombrada "Bold" en el propio
 *    archivo). Su valor por defecto es opsz:9 -- el corte pensado para
 *    texto chico -- y este archivo se usa unicamente en titulos grandes.
 *    Sin fijar el eje, el navegador rendermeria el corte de texto
 *    estirado a tamano de titular, no el corte de titular real. Por eso
 *    el font-variation-settings de abajo fuerza opsz:144 (el corte
 *    "display" de Fraunces) en los selectores que la usan.
 * 2. inter.woff2 de v1 tenia el cmap recortado a caracteres basicos:
 *    le faltaban TODAS las vocales con tilde, la ñ y los signos ¿¡
 *    (verificado con fontTools). En un sitio en es-CL eso rompe el
 *    render de casi cualquier palabra con tilde: cae al respaldo
 *    (system-ui) a mitad de palabra. El archivo de aca es un subset
 *    nuevo, generado desde la fuente variable oficial de Inter
 *    (github.com/google/fonts, licencia OFL, no es material propio de
 *    ZU) con Latin + Latin-1 Supplement + Latin Extended-A + puntuacion
 *    tipografica -- mismo rango de pesos (100-900), cobertura completa
 *    de espanol verificada.
 */
@font-face {
  font-family: 'Fraunces';
  src: url('/fuentes/fraunces.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fuentes/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/*
 * Fredoka -- sumada el 14-sep-2026 (problemas_v2.md #11) para rescatar la
 * TIPOGRAFIA de la presentacion institucional de ZU en Prezi (sans-serif
 * redondeada y con peso, no la fuente de titulos que ya usa el resto del
 * sitio) para la seccion de inicio, sin tocar los textos ni el logo del
 * Prezi. Bajada de @fontsource/fredoka (npm, licencia OFL 1.1, "Copyright
 * 2016 The Fredoka Project Authors"), cmap verificado con fontTools para
 * espanol completo. Un solo corte estatico (600) -- no es fuente variable
 * como Fraunces, por eso los selectores que la usan fijan font-weight:600
 * a mano, para que el navegador no la "engorde" de forma sintetica.
 */
@font-face {
  font-family: 'Fredoka';
  src: url('/fuentes/fredoka.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #f7fafc;
  --superficie: #ffffff;
  --azul-oscuro: #0c3a5b;
  --azul: #1f8fd6;
  --azul-claro: #59c4ef;
  --texto: #2b3a4a;
  --texto-secundario: #5b6b7c;
  --borde: #dce6f0;
  --exito: #15803d;
  --alerta: #b45309;
  --error: #b91c1c;
}

* {
  box-sizing: border-box;
}

/*
 * Skip-link (PROGRESO.md 5.2: "la v1 no lo tiene") -- deja que alguien
 * navegando con teclado o lector de pantalla salte el menu y vaya directo
 * al contenido de cada pagina, sin pasar tabulando por el logo y el menu
 * de servicios en cada carga. Oculto visualmente hasta que recibe foco
 * (primer Tab de la pagina), como pide el patron estandar de accesibilidad.
 */
.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azul-oscuro);
  color: #fff;
  padding: 12px 20px;
  z-index: 2000;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.saltar-al-contenido:focus {
  left: 0;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3,
.titular {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--azul-oscuro);
  line-height: 1.2;
  /* corte "display" del eje opsz -- ver la nota de @font-face arriba */
  font-variation-settings: 'opsz' 144;
}

a {
  color: var(--azul-oscuro);
}

/*
 * Mobile-first, 3 quiebres (doc 47 §2.2): 0 (base) / 768px / 1200px
 * ("Amplio" -- el ancho del contenedor pasa a 1200px recien aca, no antes).
 * Antes de esto no habia ningun @media de ancho; las grillas con
 * auto-fit/minmax daban fluidez incidental pero no el sistema de 3
 * quiebres que pide el doc (problema #5.6 de problemas_v2.md).
 */
.contenedor {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .contenedor {
    padding: 0 32px;
  }
  .hero h1 {
    font-size: 2.6rem;
  }
  .hero {
    padding: 72px 0 56px;
  }
}

@media (min-width: 1200px) {
  .contenedor {
    max-width: 1200px;
  }
  .hero h1 {
    font-size: 3rem;
  }
}

/* 🩹 24-sep-2026 (problemas_v2.md #69): Franco pidio "un buen
   delimitante" entre la barra blanca y el contenido -- el `border-bottom`
   de siempre (`var(--borde)`, #dce6f0) es casi blanco sobre blanco, se
   nota apenas. Se agrega una sombra suave debajo, mismo criterio de tinte
   que ya usa `.menu-servicios-escritorio` (azul oscuro a baja opacidad,
   `rgba(12, 58, 91, ...)`) en vez de un tono nuevo -- la barra queda
   "flotando" sobre lo que sea que tenga debajo (el fondo de agua celeste
   de inicio/obras-destacadas/tipo-de-trabajo, o el blanco de las demas
   paginas), a diferencia de un borde de color fijo que solo se notaria
   bien contra un fondo particular. Se mantiene el `border-bottom`
   original ademas de la sombra -- mismo patron de "borde + sombra" que ya
   usa esa misma tarjeta de Servicios. */
header.sitio {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 4px 12px rgba(12, 58, 91, 0.12);
  position: relative;
  z-index: 20;
  /* 🩹 23-sep-2026 (problemas_v2.md #48): la "anclada a la pantalla" del
     #42 (sticky) queda SOLO desde el breakpoint de escritorio (768px, ver
     `@media (min-width: 768px)` mas abajo) -- Franco aclaro que en movil
     la barra blanca NO debe quedar fija al hacer scroll, a diferencia de
     escritorio. Por eso `position`/`top`/`z-index` se sacan de esta regla
     base (mobile-first) y se mueven dentro de ese media query.

     🩹 24-sep-2026 (problemas_v2.md #69): sigue sin ser sticky en movil,
     pero SI necesita su propio `position: relative` + `z-index` fijo aca
     para que la sombra nueva de arriba quede POR ENCIMA de la seccion de
     agua que arranca justo debajo. `.destacados-agua` en si no crea un
     contexto de apilamiento propio (tiene `position: relative` pero
     ningun `z-index`), pero su hijo directo `.destacados-agua >
     .contenedor` SI trae `z-index: 1` (mas abajo en este archivo, para
     ganarle al `::after` animado de las ondas) -- sin un z-index propio
     en el header, ese hijo positioned podia terminar pintando por encima
     del borde/sombra del header en el limite entre ambas secciones.
     Mismo valor (20) que ya usaba el media query de escritorio (mismo
     comentario del #48, regla sticky mas abajo) para no introducir un
     numero nuevo sin motivo -- esa regla lo vuelve a declarar junto a
     `position: sticky`/`top: 0`, pero ya no hace falta que sea distinto
     de este. */
}
header.sitio nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 🩹 23-sep-2026 (problemas_v2.md #42): 16px -> 10px de alto, pedido de
     Franco de "disminuir el grosor" de la barra ahora que queda siempre
     visible (ancla) durante el scroll -- una barra fija mas alta le come
     mas espacio de pantalla al contenido de forma permanente. El logo
     (56px de alto, #38) no se toco -- solo el aire arriba/abajo. */
  padding: 10px 20px;
  /* 🩹 23-sep-2026 (problemas_v2.md #43): 1080px -> 1500px, pedido de
     Franco de acercar el grupo de enlaces+botones (Inicio/Obras
     destacadas/Servicios/Solicitar diagnostico/WhatsApp) al borde
     derecho de la pantalla -- con el ancho de siempre (1080px, el mismo
     que usa `.contenedor` para el contenido de las secciones) quedaba un
     margen muy grande sin usar a cada lado en pantallas anchas. Con
     1500px ese margen se reduce a la mitad aprox. en una pantalla de
     1920px (a los costados quedaban ~420px sueltos, ahora quedan ~210px)
     -- el logo, que es el otro extremo de este mismo `space-between`, se
     corre la misma distancia hacia la izquierda como efecto secundario
     (se queda igual de lejos del borde que antes le quedaba el grupo de
     botones, por simetria). Es una aproximacion -- Franco pidio "mas o
     menos la mitad... o 3/4", no un valor exacto; se puede seguir
     ajustando desde aca si hace falta mas o menos. */
  max-width: 1500px;
  margin: 0 auto;
  /* 🩹 16-sep-2026 (problemas_v2.md #18): flex-wrap/row-gap que existian
     ANTES de esta consolidacion (14-sep, "header.sitio nav siempre trae al
     menos logo + Tipos de trabajo + 2 botones -- flex-wrap evita que se
     corte en pantallas muy angostas") se habian sacado por error al
     reemplazar todo el bloque de CSS del menu -- se asumio que sacar
     "Servicios ▾" de esta fila (ahora vive dentro de .menu-panel) dejaba
     suficiente espacio sin necesitar el resguardo. Verificado con
     Playwright a 390px de ancho: NO alcanzaba -- logo + boton "☰ Menú" +
     "Solicitar diagnóstico" + WhatsApp seguian sin entrar en una sola
     fila, y el boton de WhatsApp quedaba cortado fuera de la pantalla (sin
     wrap, un flex row nunca angosta sus items por si solo). Se restaura.
  */
  flex-wrap: wrap;
  row-gap: 10px;
}
header.sitio nav a.logo {
  /* font-weight/color/font-size de ESTE selector solo importan si el
     <img> no carga y el navegador cae al texto de "alt" (empresa.nombre). */
  font-weight: 700;
  color: var(--azul-oscuro);
  text-decoration: none;
  font-size: 1.1rem;
  margin-right: auto;
  display: flex;
  align-items: center;
}
header.sitio nav a.logo img {
  display: block;
  /* 🩹 22-sep-2026 (problemas_v2.md #38): 42px -> 56px, pedido de Franco
     ("agranda el tamano del logo en todas las pags"). Esta regla es la
     que manda el tamano real (los atributos height/width del <img> en
     plantilla.js solo reservan el espacio contra CLS, se actualizaron
     igual para que coincidan).
     🩹 23-sep-2026 (problemas_v2.md #48): ese 56px queda como tamano de
     ESCRITORIO -- pasa a la regla de abajo, dentro del media query de
     768px. Aca (mobile-first) el alto base baja a 40px, pedido de Franco
     ("en la version movil, haz mas chico el logo"). */
  height: 40px;
  width: auto;
}
/* 🩹 23-sep-2026 (problemas_v2.md #60): "Impermeabilizaciones" al lado
   del logo (agregado en el #45, agrandado en el #46/#48) SE SACA -- Franco
   pidio eliminarlo "ARRIBA Y ABAJO" (header y pie). El <span class=
   "logo-texto"> se saca del HTML en los dos lugares (ver plantilla.js);
   esta regla y su contraparte de escritorio (mas abajo, dentro del media
   query de 768px) quedarian sin ningun elemento que las use, asi que se
   eliminan tambien -- mismo criterio que "Como trabajamos" en el #20
   (nunca se deja CSS muerto de una seccion que ya no existe). */
/* 🩹 23-sep-2026 (problemas_v2.md #52): mobile-first, se achica (Perfil
   B) para que los 3 botones del header (Menu/Solicitar diagnostico/
   WhatsApp) entren en una sola linea en pantallas chicas -- el tamano de
   escritorio (9px 16px / 0.88rem) se restaura mas abajo, dentro del
   media query de hover:fine (mismo criterio que el logo, #48/#49). */
header.sitio nav .boton {
  padding: 7px 10px;
  font-size: 0.7rem;
  white-space: nowrap;
}

/*
 * 🩹 16-sep-2026 (problemas_v2.md #18): menu unico, para TODOS los anchos --
 * reemplaza por completo tres cosas que existian sueltas hasta ayer: la
 * barra de enlaces en linea de escritorio, el dropdown "Servicios ▾"
 * aparte, y el panel de movil de problemas_v2.md #16 (con solo 4 enlaces,
 * sin Servicios). Pedido explicito de Franco, confirmado punto por punto
 * via AskUserQuestion:
 *   - El boton (".menu-boton") vive junto al logo, en cualquier ancho, con
 *     el icono de 3 lineas Y la palabra "Menu" visible.
 *   - El panel (".menu-panel") es un CAJON (drawer) fijo anclado al borde
 *     IZQUIERDO de la PANTALLA -- no un dropdown que cae desde el boton
 *     hacia abajo. "Que en escritorio no se despliegue hacia abajo sino a
 *     la izquierda, como en la version PC" -- por eso `position:fixed`
 *     (no relativo al nav) con un `transform:translateX()` que lo desliza
 *     desde/hacia ese borde. Mismo comportamiento en movil y escritorio;
 *     solo el ancho maximo cambia entre uno y otro.
 *   - Los botones "Solicitar diagnostico"/WhatsApp NUNCA entran al panel
 *     (siguen en el nav, fuera de el) -- instruccion explicita.
 *   - ".menu-fondo" oscurece el resto de la pagina mientras el panel esta
 *     abierto (mismo criterio que un modal) y lo cierra al tocarlo.
 * El submenu de Servicios (menuServicios() en plantilla.js, clase
 * ".menu-servicios-sub" mas abajo) vive DENTRO de este panel y se
 * comporta igual en todos los anchos: un <details> que se expande hacia
 * abajo, como un acordeon -- no necesita flyout propio porque el drawer ya
 * resuelve el "hacia la izquierda" pedido.
 */
/*
 * 🩹 21-sep-2026 (problemas_v2.md #29): Franco califico el menu y los
 * botones "Solicitar diagnostico"/WhatsApp de "feos, muy basicos" y pidio
 * 3 variantes (recatado/intermedio/atrevido) antes de tocar nada -- se
 * simularon en vivo con CSS inyectado sobre zu-v2-landing.onrender.com
 * (nunca contra el repo), se le mostraron capturas de las 3, y eligio la
 * Variante 2 (Intermedio): pildora + degrade + sombra con color en los
 * botones, y el boton de menu pasa de invisible (fondo transparente) a un
 * chip azul solido a juego. Mismo criterio "todas las paginas" que ya
 * establecio la entrada #18 para `.boton.primario`/`.boton.whatsapp` (mas
 * abajo en este archivo) -- compartidas por header, hero de inicio, hero
 * de cada tipo de trabajo y el boton submit del formulario.
 */
/* 🩹 23-sep-2026 (problemas_v2.md #52): achicado (Perfil B, aprobado por
   Franco tras ver simulaciones) -- nunca se ve en escritorio real (el
   media query de hover:fine oculta este boton por completo), asi que no
   necesita restauracion aparte. */
.menu-boton {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 7px 8px;
  margin-right: 12px;
  border: none;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 143, 214, 0.35);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.menu-boton:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31, 143, 214, 0.45);
}
.menu-boton-lineas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 16px;
}
.menu-boton-lineas span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}
.menu-boton-texto {
  font-weight: 600;
  font-size: 0.7rem;
  color: #fff;
}
.menu-fondo {
  position: fixed;
  inset: 0;
  background: rgba(12, 58, 91, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 40;
}
.menu-fondo.abierto {
  opacity: 1;
  pointer-events: auto;
}
.menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 41;
  width: min(320px, 88vw);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px 24px;
  background: var(--superficie);
  border-radius: 0 24px 24px 0;
  box-shadow: 4px 0 24px rgba(12, 58, 91, 0.18);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
/* 🩹 21-sep-2026 (problemas_v2.md #29): franja con degrade arriba del
   panel (Variante 2). El radio va SOLO en la esquina superior derecha (la
   unica que puede sobresalir del panel, ya redondeado del mismo lado) en
   vez de `overflow:hidden` en `.menu-panel`, que hubiera cortado el
   `overflow-y:auto` que ese elemento necesita si el panel llega a medir
   mas que la pantalla (ej. con "Servicios" desplegado en un telefono
   chico).
   🩹 23-sep-2026 (problemas_v2.md #51): pasa de pseudo-elemento vacio
   (`::before`) a elemento real (`.menu-panel-cabecera`, plantilla.js) para
   poder llevar el logo de ZU adentro -- un `::before` no puede contener
   una imagen real con su propio alt. Mismo alto/margen/degrade/radio de
   antes, ahora en flex para centrar verticalmente el logo. */
.menu-panel-cabecera {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 88px;
  margin: 0 -20px 20px;
  padding: 0 20px;
  border-top-right-radius: 24px;
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
}
/* El logo (ZU en negro + gota en tonos azules, publico/comun/img/logo.png)
   se ve mal directo sobre este degrade -- la gota comparte casi los
   mismos tonos de azul que el fondo y se pierde. Se le agrega una tarjeta
   blanca redondeada detras (background+padding sobre el propio <img>, sin
   necesidad de un wrapper aparte) para que quede legible, mismo criterio
   de contraste que se penso originalmente para ".logo-texto" (#45,
   eliminado en el #60; el criterio de fondo blanco solido igual aplica
   puntual, no el azul de marca, para que se lea bien). */
.menu-panel-cabecera img {
  height: 40px;
  width: auto;
  background: #fff;
  padding: 8px 14px;
  border-radius: 12px;
}
.menu-panel.abierto {
  transform: translateX(0);
}
.menu-panel > a {
  padding: 12px 16px;
  border-radius: 999px;
  color: var(--texto);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s ease;
}
.menu-panel > a:hover {
  background: rgba(31, 143, 214, 0.1);
}
/* Submenu de Servicios (menuServicios(), plantilla.js) -- mismo <details>
   accesible de siempre, ahora dentro del panel: se expande hacia abajo
   (acordeon), igual en cualquier ancho. */
.menu-servicios-sub {
  padding: 12px 16px;
  border-radius: 12px;
}
.menu-servicios-sub summary {
  cursor: pointer;
  list-style: none;
  color: var(--texto);
  font-weight: 500;
}
.menu-servicios-sub summary:hover {
  color: var(--azul);
}
.menu-servicios-sub summary::-webkit-details-marker {
  display: none;
}
.menu-servicios-sub ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.menu-servicios-sub li a {
  display: block;
  padding: 8px 4px 8px 12px;
  text-decoration: none;
  color: var(--texto-secundario);
}
.menu-servicios-sub li a:hover {
  color: var(--azul);
}

/*
 * 🩹 23-sep-2026 (problemas_v2.md #39): Franco pidio deshacer el menu tipo
 * boton (drawer del #18) EN ESCRITORIO -- "eliminando tambien de la barra
 * blanca los botones de formulario y wsp, quedando todo lo restante en la
 * barra blanca" -- pero mantenerlo TAL CUAL en movil, sacandole solo
 * "Preguntas"/"Tipos de membrana" (ver ENLACES_MENU en plantilla.js).
 *
 * En vez de reescribir el CSS del drawer (`.menu-boton`/`.menu-fondo`/
 * `.menu-panel`, arriba, ya afinado en el #29 -- "Variante 2") para que
 * sirva de dos formas distintas, plantilla.js ahora renderiza SIEMPRE los
 * dos bloques (`.menu-movil`, el mismo drawer de antes; `.nav-escritorio`,
 * la barra en linea nueva) mas `.nav-cta` (los 2 botones) -- y estas 3
 * reglas son las que deciden cual se ve segun el ancho. `.menu-movil` y
 * `.nav-cta` usan `display:contents` (no `display:flex`) para que sus
 * hijos sigan siendo items directos de `header.sitio nav` -- exactamente
 * el mismo layout de flex que tenian sueltos antes de este cambio, sin
 * necesidad de tocar ninguna medida existente.
 */
.menu-movil,
.nav-cta {
  display: contents;
}
/* Barra de escritorio (navEscritorio(), plantilla.js) -- oculta por
   defecto (mobile-first, mismo criterio que .enlaces-inicio tenia antes
   del #18), visible desde el breakpoint de escritorio de siempre
   (768px, ver el resto de este archivo). */
.nav-escritorio {
  display: none;
  align-items: center;
  gap: 20px;
  margin-right: 24px;
}
.nav-escritorio > a {
  color: var(--texto);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav-escritorio > a:hover {
  color: var(--azul);
}
/* "Servicios ▾" de la barra de escritorio -- dropdown normal que cae
   hacia ABAJO desde la barra (a diferencia de .menu-servicios-sub, que es
   un acordeon DENTRO del panel/drawer). Mismo patron -- y el mismo
   z-index explicito -- que tenia el "Servicios ▾" suelto de antes del
   #18: sin el z-index, este <ul> (position:absolute) y el ::after de
   .hero-agua (tambien position:absolute, sin z-index) compiten en el
   mismo stacking context raiz y el menu queda tapado por el hero
   (encontrado y confirmado en vivo esa vez -- ver el historial en el
   commit 20b4df4 de este mismo archivo). */
.menu-servicios-escritorio {
  position: relative;
}
.menu-servicios-escritorio summary {
  cursor: pointer;
  list-style: none;
  color: var(--texto);
  font-weight: 500;
}
.menu-servicios-escritorio summary:hover {
  color: var(--azul);
}
.menu-servicios-escritorio summary::-webkit-details-marker {
  display: none;
}
/* 🩹 24-sep-2026 (problemas_v2.md #70): Franco pidio el mismo arreglo
   del #69 ("la barra blanca del menu", esta vez la del desplegable de
   Servicios) -- mismo diagnostico: el `border` de siempre (`var(--borde)`,
   #dce6f0) es casi blanco sobre blanco, y como este panel abre pegado
   contra la barra blanca del header (mismo fondo `var(--superficie)` de
   los dos lados), el borde superior practicamente no se notaba contra
   ESE fondo -- a diferencia del `box-shadow` (que por su offset vertical
   positivo se ve sobre todo abajo/a los costados, no arriba, asi que no
   alcanzaba para separarlo del header). Se cambia el borde a un tono
   azul oscuro a baja opacidad en vez del gris casi blanco de siempre
   (mismo tinte que ya usan `.menu-panel`/este mismo box-shadow,
   `rgba(12, 58, 91, ...)`, nunca un color nuevo) -- un borde con color
   real se nota en las 4 caras, incluida la de arriba, a diferencia de un
   borde practicamente incoloro. Se sube tambien la sombra de 0.1 a 0.18
   de opacidad, mismo valor que ya usa `.menu-panel` (el cajon movil) para
   que las dos "barras blancas del menu" (escritorio y movil) queden con
   el mismo criterio de presencia. */
.menu-servicios-escritorio ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  background: var(--superficie);
  border: 1px solid rgba(12, 58, 91, 0.18);
  border-radius: 8px;
  padding: 14px 0 8px;
  list-style: none;
  margin: 0;
  min-width: 220px;
  box-shadow: 0 8px 20px rgba(12, 58, 91, 0.18);
}
.menu-servicios-escritorio li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--texto);
}
.menu-servicios-escritorio li a:hover {
  background: var(--fondo);
}
/* 🩹 23-sep-2026 (problemas_v2.md #50): Franco confirmo que el mismo
   problema del #49 (celulares en horizontal, que miden mas de 768px de
   ancho -- ej. iPhone 12/13/14: 844px -- y por eso activaban por error la
   rama de "escritorio") tambien afectaba el cambio de menu: un celular
   acostado veia la barra de enlaces en linea de escritorio en vez del
   boton hamburguesa de siempre. En el #49 esto se habia dejado aparte a
   proposito porque todavia no estaba confirmado como problema. Ahora que
   si lo esta, se unifica TODO bajo un solo media query con la misma
   condicion del #49 (`hover: hover` and `pointer: fine`, la sena de un
   mouse/trackpad real que ningun celular ni tablet cumple sin importar su
   ancho ni orientacion) -- ya no hace falta tenerlo separado en dos
   bloques con la condicion repetida. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .menu-movil {
    display: none;
  }
  .nav-escritorio {
    display: flex;
  }
  /* 🩹 23-sep-2026 (problemas_v2.md #41): .nav-cta NO se oculta en
     escritorio -- Franco aclaro que los botones "Solicitar
     diagnostico"/WhatsApp deben quedar visibles en la barra blanca (el
     #39 los habia sacado de ahi por error de interpretacion; ver la
     entrada #41 de este mismo archivo). Se queda con su `display:
     contents` de siempre (ver mas arriba), como item mas del flex de
     `header.sitio nav`, junto a `.nav-escritorio`. */
  header.sitio {
    /* 🩹 23-sep-2026 (problemas_v2.md #42; condicion ajustada en el
       #49/#50): ver el comentario original de esta regla mas arriba
       (regla base, mobile-first) para el porque del sticky. */
    position: sticky;
    top: 0;
    z-index: 20;
  }
  header.sitio nav a.logo img {
    height: 56px;
  }
  /* 🩹 23-sep-2026 (problemas_v2.md #52): restaura el tamano de
     escritorio de los botones del header -- ver el comentario de la
     regla base (mobile-first) mas arriba. */
  header.sitio nav .boton {
    padding: 9px 16px;
    font-size: 0.88rem;
  }
  /* 🩹 01-oct-2026: Franco pidio que los menus "Servicios ▾"/"Obras
     destacadas ▾" del header de escritorio se desplieguen solos al pasar
     el mouse por encima, en vez de necesitar un click -- hasta ahora
     abrian unicamente con el comportamiento nativo de <details>/<summary>
     (plantilla.js, menuServiciosEscritorio()/menuObrasDestacadasEscritorio())
     -- comun.js (inicializarMenuDetails()) solo los CIERRA, nunca los
     abre.
     Verificado con Playwright (Chromium 141) contra el render real antes
     de elegir el mecanismo: ESTE navegador ya no abre/cierra <details>
     poniendole `display:none` al <ul> -- envuelve todo el contenido
     (menos el <summary>) en un pseudo-elemento interno,
     `::details-content`, y es ESE el que lleva `content-visibility:
     hidden` + `block-size: 0` cuando el <details> esta cerrado (un
     primer intento con `.menu-servicios-escritorio:hover > ul {
     display:block }` no hacia nada -- medido en vivo, el <ul> YA
     reportaba `display:block` incluso cerrado; lo que lo ocultaba era
     el wrapper, no el <ul>). Por eso la regla apunta al pseudo-elemento:
     `content-visibility: visible` lo vuelve a pintar, `block-size: auto`
     le devuelve su alto real (si no, queda en 0 aunque ya sea visible).
     Se agrega tambien `:focus-within` para que el menu abra igual
     navegando con teclado (tab hasta "Servicios ▾"/"Obras destacadas ▾"),
     no solo con mouse. El click normal sigue funcionando igual (el
     atributo `open` nativo no se toca) -- esto solo agrega una segunda
     forma de abrir el menu. Mismo query `hover:hover` + `pointer:fine`
     que ya usa este bloque para activar `.nav-escritorio` -- ningun
     celular/tablet lo cumple sin importar su ancho, asi que en esa
     version el click sigue siendo el unico metodo.

     Tambien hizo falta cambiar, arriba en este archivo,
     `.menu-servicios-escritorio ul` de `margin: 6px 0 0` a
     `padding: 14px 0 8px` + `margin: 0`: con el espacio como margin (un
     hueco fuera de cualquier caja), mover el mouse del boton hacia abajo
     en linea recta cruzaba ese hueco ANTES de que el panel (ya) visible
     llegara a cubrirlo, y ese instante sin ningun elemento bajo el mouse
     cerraba el menu de nuevo -- confirmado con Playwright moviendo el
     mouse en pasos de 4px: con margin, el panel se cerraba apenas se
     salia del boton y jamas se volvia a abrir; con el espacio como
     padding (parte de la caja del propio <ul>, que ya cubre esa franja
     en cuanto `content-visibility` lo vuelve a pintar) el recorrido fue
     continuo, sin ningun punto muerto. Mismo espacio visible de siempre
     (14px de padding-top en vez de 8px, para compensar el padding-top
     que antes ponia el `margin: 6px` + el `padding: 8px` original). */
  .menu-servicios-escritorio:hover::details-content,
  .menu-servicios-escritorio:focus-within::details-content {
    content-visibility: visible;
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel,
  .menu-fondo,
  .menu-boton,
  .menu-panel > a,
  .boton.primario,
  .boton.whatsapp {
    transition: none;
  }
}

.hero {
  padding: 56px 0 40px;
  text-align: center;
}
.hero .franja {
  color: var(--texto-secundario);
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.hero h1 {
  font-size: 2.1rem;
  max-width: 720px;
  margin: 0 auto 16px;
}
.hero p.bajada {
  max-width: 620px;
  margin: 0 auto 28px;
  color: var(--texto-secundario);
}

/*
 * 🩹 15-sep-2026: `.hero-agua` (fondo+tipografia rescatados de la
 * presentacion institucional de ZU en Prezi, aplicados antes SOLO al hero
 * de inicio.js) se saca de aca -- Franco corrigio un primer intento mio de
 * este mismo cambio, donde habia recreado este mismo fondo aparte, estatico,
 * para envolver el carrusel: "conservaste el fondo de inicio original", no
 * lo que pidio. Lo que pidio es el fondo REAL del carrusel (`.destacados-agua`
 * / `.destacados-agua-lienzo`, mas abajo en este archivo -- la capa animada
 * que hace zoom/paneo por diapositiva) agrandado para que tambien pinte
 * detras del texto de arriba/abajo. Con el hero de inicio.js ya sacado (y
 * el de tipo-de-trabajo.js movido adentro de `.destacados-agua`, ver ese
 * comentario), `.hero-agua` queda sin ningun uso en el codigo -- se elimina
 * en vez de dejarlo muerto; sus declaraciones utiles (tipografia sobre
 * fondo oscuro) se suman directo a `.destacados-agua` mas abajo, que es
 * ahora el unico lugar real con este fondo.
 */
/* 🩹 24-sep-2026 (problemas_v2.md #62): Franco reporto que las ondas
   "se reinician en vez de seguir expandiendose", visible puntualmente en
   la seccion de "Tipos de membrana" (inicio) y "Resumen tecnico"
   (tipo-de-trabajo) -- es decir, justo en la zona donde cae el origen del
   `circle at 50% 76%` de mas abajo (medido en el #23/#30). No es un
   problema de posicion (esa zona sigue siendo la correcta para el
   origen, no se toco `76%`): es que esta animacion solo tenia DOS
   fotogramas (`from`/`to`) con `linear infinite` -- al llegar a
   `scale(1.2) translateY(-3%)` a los 22s, el navegador vuelve de un salto
   a `scale(1) translateY(0)` para arrancar el siguiente ciclo, sin
   transicion. Ese salto es geometricamente imposible de disimular solo
   con la escala (un `repeating-radial-gradient` tiene anillos a
   distancia FIJA en pixeles -- 56px de paso -- y `scale()` los estira de
   forma multiplicativa, no aditiva, asi que ningun factor de escala hace
   que el patron vuelva a coincidir consigo mismo en TODOS los radios a
   la vez). Por eso el corte se ve en cualquier parte donde el fondo sea
   lo bastante oscuro como para que el anillo (maximo 0.09 de opacidad)
   se note -- el hero con foto nunca lo mostro porque ahi el anillo ya es
   invisible contra la imagen, no porque ahi no ocurra el mismo salto.
   Solucion: enmascarar el salto con una entrada/salida de opacidad (0 al
   0%/100%, 1 entre 8% y 92%) para que el reinicio ocurra mientras la capa
   es invisible -- el efecto pasa a leerse como un pulso continuo, no como
   un corte. No requiere volver a medir ningun porcentaje (esto no es una
   recalibracion de posicion, es una correccion de como se enmascara el
   loop) -- confirmar visualmente con Franco igual, porque el efecto es
   demasiado sutil para verificarlo de forma confiable por captura. */
@keyframes zu-ondas {
  0% {
    transform: scale(1) translateY(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2) translateY(-3%);
    opacity: 0;
  }
}

.botones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* 🩹 24-sep-2026 (problemas_v2.md #71): `display:inline-block` -> `inline-
   flex` para poder alinear el <img> del icono (agregado primero en
   .boton.primario.nav/.boton.whatsapp del header, plantilla.js, y luego
   -- problemas_v2.md #72 -- en .boton.secundario de cada obra y en el
   submit del formulario) con el texto sin depender de vertical-align.
   `gap` en vez de margin en el <img> para que la separacion quede
   controlada en un solo lugar.

   🩹 24-sep-2026, correccion (problemas_v2.md #72): la primera version de
   este comentario decia que este cambio era "inofensivo" para los botones
   que en ese momento seguian siendo solo texto -- eso era cierto para los
   de ancho automatico (contenido centrado por `text-align` en vez de
   `justify-content` no se nota si no hay espacio libre que repartir), pero
   NO para el submit del formulario (`formulario.js`, unico boton con
   `width:100%` en todo el sitio): con un solo hijo, inline-flex igual lo
   empuja al INICIO del eje principal (izquierda), a diferencia de
   inline-block, que sigue el `text-align:center` que traen los <button>
   por defecto -- se agrega `justify-content: center` para no perder ese
   centrado ahora que ademas gano un icono. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
}
.boton img {
  display: block;
  height: 1.1em;
  width: auto;
  flex-shrink: 0;
}
/* 🩹 16-sep-2026 (problemas_v2.md #18): "en los botones Formulario y
   WhatsApp de TODAS las paginas debe quedar el texto en negrita... no
   cambiar el color de la fuente" (Franco, confirmado "negrita" via
   AskUserQuestion, no subrayado). Un solo lugar (estas dos clases, ya
   compartidas por los 5 usos reales: header, hero de inicio, hero de cada
   tipo de trabajo, y el boton submit del propio formulario) alcanza para
   las "todas las paginas" pedidas -- font-weight nada mas, sin tocar
   `color` ni `background`. */
/* 🩹 21-sep-2026 (problemas_v2.md #29): ver la nota grande junto a
   `.menu-boton`, mas arriba, sobre por que -- Variante 2 (Intermedio),
   misma pildora + degrade + sombra con color en las dos clases, solo
   cambia el color base. */
.boton.primario {
  background: linear-gradient(135deg, var(--azul), var(--azul-oscuro));
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(31, 143, 214, 0.45);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.boton.primario:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(31, 143, 214, 0.55);
}
.boton.whatsapp {
  background: linear-gradient(135deg, #22c55e, var(--exito));
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.45);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.boton.whatsapp:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(21, 128, 61, 0.55);
}

/* 🩹 21-sep-2026 (problemas_v2.md #23): `.cifras`/`.cifra`/`.cifra .numero`/
   `.cifra .texto` (las 3 tarjetas grandes de cifras que iban DESPUES del
   carrusel en inicio.js, `destacadosDespues`) se sacan -- Franco pidio
   consolidar el inicio en una sola pantalla y las cifras pasan a una
   linea compacta al pie de la columna de texto (`.destacados-agua-
   cifras-linea`, mas abajo). Era el unico lugar que usaba estas 4 reglas
   (verificado con grep contra publico/ entero). */

section {
  padding: 48px 0;
}
section.superficie {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 24px;
}
.tarjeta .emoji {
  font-size: 1.6rem;
}

/*
 * Carrusel de servicios (inicio.js #servicios, comun.js
 * inicializarCarruseles()) -- mejora progresiva real, no decorativa:
 * .carrusel-pista por defecto es una grilla comun (reutiliza .rejilla/
 * .tarjeta, los 6 servicios se ven todos sin JS). Recien cuando JS agrega
 * .js-activo se convierte en una pista deslizante de a una diapositiva --
 * el "efecto al pasar de diapo" del Prezi institucional, hecho con
 * transform/transition CSS, sin libreria. problemas_v2.md #11.
 */
.carrusel-pista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.carrusel-slide {
  text-align: center;
}
/* 🩹 26-sep-2026 (problemas_v2.md #79): entre el primer pintado y que
   /comun.js termine de descargar/inicializar (`inicializarCarruseles()`),
   este carrusel se quedaba en su estado SIN JS de arriba -- la grilla
   completa, TODAS las fichas visibles a la vez ("cascada" de imagenes,
   reportado por Franco). Al pasar de golpe a un carrusel de una sola
   ficha (`.js-activo` mas abajo), el alto de la seccion colapsaba de
   golpe -- en algunas cargas eso hacia que el navegador reacomodara el
   scroll mas abajo en la pagina, cerca de donde termino quedando el
   formulario ("la pantalla salta al formulario", tambien reportado por
   Franco): mismo origen, dos sintomas del mismo colapso de alto.

   `html.js` lo agrega un script al principio del <head> (plantilla.js,
   servido aparte desde marca-js.js -- nunca inline, ver ese archivo para
   el porque) -- sincronico, corre antes de que el resto de la pagina se
   pinte, asi que esto NO depende de cuanto tarde en llegar /comun.js.
   Con esa marca puesta, se oculta cada diapositiva EXCEPTO la
   marcada `.carrusel-slide-inicial` (calculada en el servidor con el
   mismo indice que ya usa `data-carrusel-inicio` -- ver destacados.js/
   carrusel-obras.js/carrusel-servicios.js) desde el primer pintado: el
   mismo resultado visual al que `inicializarCarruseles()` va a llegar de
   todos modos, asi que cuando ese script recien termina de cargar no hay
   ningun cambio que notar (ni cascada, ni colapso de alto, ni salto de
   scroll).

   `:not(.js-activo)` en el propio `[data-carrusel]` apaga esta regla
   sola en cuanto comun.js le agrega esa clase -- de ahi en mas mandan
   las reglas de `.js-activo`/`.carrusel-listo` de mas abajo, sin pelea
   de especificidad (el selector completo deja de calzar con nada, no
   compite por prioridad con las de abajo).

   Un visitante SIN JS nunca tiene `html.js`: sigue viendo la grilla
   completa de siempre, sin ningun cambio -- la mejora progresiva real
   que ya describia el comentario de mas arriba no se toca. */
html.js [data-carrusel]:not(.js-activo) .carrusel-slide {
  display: none;
}
html.js [data-carrusel]:not(.js-activo) .carrusel-slide.carrusel-slide-inicial {
  display: block;
}
.js-activo .carrusel-viewport {
  overflow: hidden;
}
/* 🩹 14-sep-2026 (2da vuelta, video real del Prezi): esto era
   `display:flex` + `transform:translateX()` (deslizamiento lateral,
   "diapositivas una al lado de la otra"). El video que mando Franco
   navegando la presentacion real muestra que Prezi NO desliza tarjetas de
   lado a lado: hace zoom -- la camara se aleja de la ficha actual y se
   acerca a la siguiente, sobre un fondo fijo (.destacados-agua, mas
   abajo). Se reemplaza por una pila de capas (grid con una sola celda,
   `grid-area:1/1` en cada slide -- asi el contenedor toma la altura del
   slide mas alto sin necesidad de medirlo con JS) donde solo la
   diapositiva con `aria-hidden="false"` es visible; el cambio anima
   opacity+scale en vez de una posicion lateral. `prefers-reduced-motion`
   ya esta cubierto por la regla global de mas abajo (`transition:none
   !important`) -- sin movimiento, el cambio de tarjeta pasa a ser
   instantaneo en vez de con zoom, mismo criterio que el resto del sitio. */
.js-activo .carrusel-pista {
  display: grid;
  margin-top: 28px;
}
.js-activo .carrusel-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(1.12);
  pointer-events: none;
}
/* 🩹 14-sep-2026: la transicion vive en una clase aparte (`.carrusel-listo`,
   comun.js la agrega recien despues del primer pintado) en vez de estar
   directo en `.js-activo .carrusel-slide` de arriba -- si estuviera ahi, el
   primer cambio de "sin JS" (grilla con todas las fichas) a "con JS" (una
   sola visible) TAMBIEN se anima, y se ve como un parpadeo de todas las
   fichas apagandose al cargar la pagina en vez de aparecer ya resuelto. Los
   cambios de diapositiva de ahi en mas (flecha/punto/autoavance) si tienen
   que animar, por eso la clase se agrega, nunca se saca. */
.carrusel-listo .carrusel-slide {
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.js-activo .carrusel-slide[aria-hidden='false'] {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
/* Los controles nacen con el atributo `hidden` (inicio.js) -- solo JS los
   revela, al mismo tiempo que agrega .js-activo. Con `display:flex` suelto
   aca (sin el ancestro .js-activo) le ganaria en cascada al `display:none`
   por defecto de `[hidden]` -- se veria un carrusel "roto" sin JS
   (flechas/puntos sueltos sobre la grilla de tarjetas). */
.js-activo .carrusel-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}
.carrusel-flecha {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--azul-oscuro);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carrusel-flecha:hover {
  background: var(--fondo);
  border-color: var(--azul);
  color: var(--azul);
}
.carrusel-puntos {
  display: flex;
  gap: 8px;
}
.carrusel-punto {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--borde);
  cursor: pointer;
}
.carrusel-punto[aria-current='true'] {
  background: var(--azul);
}

/*
 * .destacados-agua -- el fondo de agua real del Prezi (destacados.js tiene
 * el detalle completo de por que existe), pero ACOTADO: es el mismo truco
 * visual de .hero-agua de arriba (gradientes + `::after` animado, sin foto
 * ni asset externo), aplicado a `#destacados` en vez de a un contenedor de
 * pantalla completa. Como esta seccion no tiene `min-height` ni alto fijo
 * (la regla general de `section` de mas arriba solo pone padding), el
 * fondo termina exactamente donde termina su contenido -- nunca "toda la
 * pagina", que es lo que Franco pidio explicitamente.
 *
 * En vez de repintar el color de cada texto de la ficha para que contraste
 * con el agua, la ficha (.destacado-tarjeta) flota en un panel claro tipo
 * "vidrio esmerilado" (mismo patron que .tarjeta sobre section.superficie,
 * mas abajo, adaptado a fondo oscuro) -- asi el titulo, el texto y el
 * boton de cada ficha se quedan con los mismos colores de siempre (ya
 * pensados para fondo claro) sin tocarlos uno por uno.
 */
/*
 * 🩹 16-sep-2026 (problemas_v2.md #19, 7ma correccion): "Tipos de membrana"
 * ya no tiene su propia seccion/fondo -- vive DENTRO de esta misma seccion
 * (ver destacados.js, `opciones.membranas`, y membranas.js), sobre el mismo
 * lienzo/ondulacion real de "Trabajos destacados" (nunca dos fondos
 * independientes tratando de sincronizarse, ver el comentario grande de
 * comun.js). El unico cambio para "avisar" que zona es cual es de color:
 * este degradado vertical, agua arriba (mismos tonos de siempre) y
 * metalico abajo (mismos tonos que tenia `.membranas-oscuro`, reusados
 * tal cual) -- pedido explicito de Franco: "el mismo cambio de color
 * deberia bastar como frontera", sin dibujar una linea/borde aparte que
 * cortaria la continuidad del lienzo y la ondulacion (los dos siguen
 * siendo UNA sola capa continua de punta a punta de esta seccion, ahora
 * mas alta). Los porcentajes son una estimacion de donde termina el
 * bloque de "Trabajos destacados" y empieza "Tipos de membrana" -- medida
 * con Playwright contra el fixture de prueba (6 destacados + 4 membranas):
 * el h2 "Tipos de membrana" arranca al 74.6% del alto total de la seccion,
 * asi que la transicion se centra ahi (70%-82%, terminada de lleno unos
 * puntos despues de que arranca esa zona). Si el contenido de cualquiera
 * de las dos zonas cambia mucho de alto (mas fichas no deberia, ya que el
 * carrusel muestra una sola a la vez -- pero un titulo/texto mucho mas
 * largo si podria), vale la pena volver a medir y ajustar estos 2 stops.
 *
 * 🩹 20-sep-2026 (problemas_v2.md #19.9): la primera version de este
 * degradado (`#081826 0%, var(--azul-oscuro) 70%, ...`) arrancaba en un
 * azul casi negro desde el primer pixel -- Franco lo vio desplegado y
 * marco que "solo la parte de membrana debe tener colores oscuros y la
 * parte de destacados colores claros, como los que ya tenia antes". Tenia
 * razon: `--azul-oscuro` (#0c3a5b) y sobre todo el #081826 agregado a mano
 * son mucho mas oscuros que el celeste/agua que de verdad predominaba
 * antes de esta fusion (el ultimo `linear-gradient` que tenia
 * `.destacados-agua-lienzo`, sacado en la 7ma correccion, iba de
 * `--azul-oscuro` a `--azul` a `--azul-claro` -- el tono dominante era
 * claro, no oscuro). Se corrige mantieniendo TODO "Trabajos destacados"
 * (0% a ~68%, bien pasado el 74.6% donde en realidad termina su
 * contenido) en la familia clara/media (`--azul`/`--azul-claro`), y
 * recien a partir de ahi -- ya entrado en la zona de "Tipos de membrana"
 * medida en la correccion anterior -- se pasa a los tonos oscuros
 * metalicos. La frontera de color sigue siendo la unica frontera (sin
 * linea, pedido de Franco en la 7ma correccion) y las ondas siguen
 * expandiendose igual (no se toco `::after`/`zu-ondas`).
 *
 * 🩹 21-sep-2026 (problemas_v2.md #23): se vuelve a medir y ajustar --
 * exactamente el "vale la pena volver a medir" que ya avisaba el parrafo
 * de arriba. El layout de 2 columnas de inicio.js (`opciones.dosColumnas`)
 * hace mas BAJO el bloque de "Trabajos destacados" (texto y carrusel lado
 * a lado, no uno arriba del otro), asi que "Tipos de membrana" pasa a
 * ocupar una porcion MAS GRANDE del alto total de la seccion. Medido con
 * Playwright contra un fixture representativo (2 columnas + 6 destacados +
 * 4 membranas): `.membranas-zona` arranca al 62.6% del alto total (antes
 * 74.6%) y su `<h2>` al 65%. Se corrige el mismo criterio de siempre --
 * TODO "Trabajos destacados" en la familia clara/media, la transicion
 * centrada donde arranca "Tipos de membrana" -- corrida ~10 puntos antes
 * para reflejar el nuevo alto. (🩹 21-sep-2026, problemas_v2.md #30: la
 * ultima frase de este parrafo -- "esto solo afecta a inicio.js... no
 * cambiaron de alto... se verifico que sigue leyendose bien" -- quedo
 * INCORRECTA con el cambio de mas abajo, se deja tal cual como registro
 * de lo que se penso en su momento.)
 *
 * 🩹 21-sep-2026 (problemas_v2.md #30): Franco pidio "bajar la seccion de
 * membranas para que quede mas en la zona oscura" en TODOS los
 * carruseles. Se remidio en vivo (Chrome, sitio desplegado) las 3
 * variantes de esta seccion -- inicio.js (`/`), obras-destacadas.js
 * (`/obras-destacadas`) y una pagina de tipo-de-trabajo (`/tipos-de-
 * trabajo/piscinas`) -- porque el parrafo de arriba asumia que solo
 * inicio.js usaba `dosColumnas`; desde #27 (este mismo historial, un poco
 * mas abajo) las tres usan el mismo layout de 2 columnas. Resultado: las
 * 3 dan EXACTAMENTE el mismo numero hoy -- `.membranas-zona` arranca al
 * 44.2% del alto total (ya no 62.6%) y su `<h2>` al 46.1% -- porque las
 * tres comparten ahora el mismo `dosColumnas` con contenido de ancho
 * equivalente. La vieja frase "no cambiaron de alto" resulta que ya no
 * aplicaba desde #27, pero por suerte las tres terminaron IGUAL entre si,
 * asi que un solo set de stops sirve para las 3 sin excepciones. No se
 * pudo remedir en el quiebre movil (`max-width:860px`, columnas apiladas)
 * por una limitacion del entorno de esta sesion (la ventana del navegador
 * no se pudo redimensionar) -- por calculo (el bloque de texto+carrusel
 * apilado agranda mucho mas el "antes" que el propio `.membranas-zona`,
 * que es un carrusel de una tarjeta a la vez igual en ambos anchos), el
 * quiebre movil deberia empujar el arranque de membranas a un % MAS ALTO
 * todavia (mas margen, no menos) -- queda pendiente confirmar en vivo la
 * proxima vez que se revise en un celular real.
 *
 * Se corren los stops oscuros bastante antes para que la zona oscura ya
 * este bien entrada al 44.2% (arranque de `.membranas-zona`): antes
 * recien empezaba a oscurecer al 70%, dejando la mayor parte de
 * "Tipos de membrana" todavia en celeste medio. Ahora al 44.2% el fondo
 * ya esta a mitad de camino entre `--azul` y `--azul-oscuro`, al 46.1%
 * (el propio `<h2>`) ya es `--azul-oscuro` solido, y para cuando aparece
 * la primera tarjeta (unos puntos mas abajo) ya se ve el metalico
 * (`#2b2f36`) camino a negro (`#0d0f12`), sostenido hasta el final de la
 * seccion. "Trabajos destacados" (0% a ~38%) se queda igual de claro/
 * medio que antes, con el mismo criterio de siempre -- el cambio de color
 * sigue siendo la unica frontera, sin linea aparte.
 */
.destacados-agua {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(
    180deg,
    var(--azul) 0%,
    var(--azul-claro) 22%,
    var(--azul) 38%,
    var(--azul-oscuro) 46%,
    #2b2f36 58%,
    #0d0f12 74%,
    #0d0f12 100%
  );
}
/* 🩹 14-sep-2026 (7ma correccion, tecnica real de "zooming UI"): Franco
   marco que mover solo `background-position` (la version anterior) se
   sentia "ridiculamente basico" -- tenia razon: eso desliza el fondo,
   pero nunca ZOOM, y el zoom es la firma real de Prezi/impress.js (el
   propio impress.js lo resume asi: "posicionas 'pasos' en el espacio, la
   camara se mueve entre ellos"). La tecnica real (investigada: el efecto
   Ken Burns de pan+zoom en CSS, que es el mismo truco que usan Prezi e
   impress.js) es transformar una capa MAS GRANDE que la seccion con
   `translate()+scale()`, no mover un `background-position`. Por eso el
   fondo ahora vive en `.destacados-agua-lienzo`, una capa real (no un
   pseudo-elemento: hace falta poder ponerle `element.style.transform`
   desde JS, ver comun.js) 3 veces mas grande que la seccion, y es ESA
   capa la que anima -- nunca el texto ni las tarjetas, que quedan
   normales encima (`.contenedor` de mas abajo necesita z-index explicito
   por la misma razon que ya se documento para el menu de Servicios: un
   hijo absolute sin z-index gana por sobre contenido normal, sin importar
   el orden del documento).

   🩹 14-sep-2026 (8va correccion, centro matematico unico): Franco pidio
   anclar cada tipo de servicio a un angulo preciso (360°/total) alrededor
   del centro de las lineas circulares del fondo -- pero la version
   anterior tenia CUATRO centros de gradiente distintos (18%/24%, 82%/12%,
   30%/70%, 88%/85%), ninguno coincidia con el centro real de la camara
   (50%/50% de este mismo lienzo, que por el `inset:-100%` de arriba cae
   justo en el centro de la seccion -- el mismo punto que usa
   `transform-origin` por default). Los 4 gradientes ahora comparten ESE
   unico centro (50% 50%): dos anillos concentricos repetidos (radios
   distintos, mismo centro) mas dos glows circulares suaves para
   profundidad -- ninguno tiene "lineas" que no sean circulos perfectos
   alrededor de ese punto. Con esto, `posicionCamara(indice, total)` en
   comun.js puede repartir 360° entre los tipos de servicio sabiendo que
   ese centro es real y unico, no aproximado. (🩹 16-sep-2026: el quinto
   gradiente que habia aca, un `linear-gradient` diagonal opaco de color de
   fondo, se saco -- ver el comentario junto a `background-image` de mas
   abajo, ahora ese color lo pone `.destacados-agua` por detras.)
*/
.destacados-agua-lienzo {
  position: absolute;
  inset: -100%;
  width: 300%;
  height: 300%;
  /* 🩹 16-sep-2026 (problemas_v2.md #19, 7ma correccion): este lienzo ya
     NO pinta su propio color de fondo (antes: background-color +
     un ultimo linear-gradient opaco) -- ese color ahora es el degradado
     compartido de `.destacados-agua` (ver arriba), que se ve A TRAVES de
     este lienzo porque los 4 anillos/glows que quedan son semitransparentes
     (rgba). Es lo que permite que la MISMA capa de anillos, panéandose y
     haciendo zoom exactamente igual que siempre, se vea celeste arriba y
     acero abajo sin tener dos lienzos ni recolorear nada a mano: el color
     lo pone lo que hay detras, no esta capa. */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 12%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 30%),
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(89, 196, 239, 0.32) 0px,
      rgba(89, 196, 239, 0.1) 34px,
      transparent 70px,
      transparent 140px
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.02) 24px,
      transparent 50px,
      transparent 100px
    );
  transform: scale(1.15);
  /* 🩹 14-sep-2026 (9na correccion, textura): Franco pidio que el fondo se
     asemeje mas al agua real, pero fue explicito en no querer "mierda
     rara" en el codigo -- se descarto a proposito una alternativa mas
     vistosa investigada (filtro SVG feTurbulence+feDisplacementMap, la
     tecnica real de "caustics" de agua) por ser justo eso: una pieza
     nueva y mas fragil (SVG, animacion SMIL, scripting propio) para un
     sitio que hasta ahora es solo CSS/JS plano. En su lugar, mismo
     recurso que ya se usaba (gradientes CSS), pero con los anillos
     suavizados (stops intermedios en vez de un corte duro, ver arriba)
     y un blur leve: eso solo alcanza para que el "blanco de tiro"
     nitido se vea como un reflejo/ondulacion de agua, no como circulos
     impresos.
  */
  filter: blur(1.5px);
  pointer-events: none;
}
.destacados-agua.carrusel-listo .destacados-agua-lienzo {
  /* cubic-bezier propio: arranca rapido y frena suave, "efecto camara"
     en vez de un ease parejo -- mismo espiritu que describe el articulo
     del efecto Ken Burns (ease-in hacia el final del movimiento). */
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.destacados-agua > .contenedor {
  position: relative;
  z-index: 1;
}
/*
 * 🩹 15-sep-2026: texto que envuelve al carrusel, sobre el mismo fondo real
 * de arriba -- pedido explicito de Franco: "expandir los limites del fondo
 * del carrusel" (no un fondo aparte que se le parezca, ver el comentario
 * junto a `@keyframes zu-ondas` mas arriba). `renderDestacados()`
 * (destacados.js) y `renderCarruselServicios()` (carrusel-servicios.js)
 * aceptan `opciones.antes`: HTML ya armado por quien llama, insertado
 * DENTRO de esta misma `<section class="destacados-agua">`, en modo
 * `opciones.dosColumnas` envuelto por esas mismas funciones en
 * `.destacados-agua-columna-texto` (ver ese selector mas abajo) -- por eso
 * ya queda alcanzado por el `.destacados-agua > .contenedor` de arriba
 * (mismo selector, sin tocarlo) y pinta por encima del `::after` animado
 * de mas abajo (z-index:1 explicito le gana a un pseudo-elemento con
 * z-index:auto, sin importar el orden del documento -- a diferencia de lo
 * que hubiera pasado envolviendo TODO en una seccion aparte por fuera, que
 * es el error que se evito no haciendo esta vez).
 * 🩹 21-sep-2026 (problemas_v2.md #27): `.destacados-agua-arriba` (la
 * clase que envolvia este texto antes de `dosColumnas`) se elimina de este
 * archivo -- tipo-de-trabajo.js (el unico que la seguia usando; inicio.js
 * ya la habia dejado en el #23) paso hoy al mismo modo `dosColumnas`, asi
 * que ningun HTML real la aplica mas (confirmado con grep en todo el
 * repo).
 *
 * Estas reglas de tipografia son las mismas que tenia `.hero-agua` (arriba
 * se explica por que se sacaron de ahi) -- mismo look de "texto blanco
 * sobre el agua", ahora en el unico lugar real donde existe ese fondo.
 */
/* 🩹 15-sep-2026: estas tres reglas juntan lo que antes eran DOS reglas
   separadas (`.hero .franja/h1/p.bajada` para tamano/margen + `.hero-agua
   .franja/h1/p.bajada` para color/tipografia sobre fondo oscuro) -- el
   texto que ahora vive aca ya no esta envuelto en un `.hero`, asi que sin
   este merge se perdia el tamano de fuente/max-width/margen (quedaba el
   h1 por defecto del navegador, sin limite de ancho).
   `text-shadow` en todo lo de aca abajo por el mismo motivo que ya tiene
   `.destacados-agua .destacado-tarjeta p` (mas abajo en este archivo):
   este fondo ahora es la capa animada real (`.destacados-agua-lienzo`),
   que cambia de brillo segun a que parte del "lienzo" apunte la camara en
   cada diapositiva -- un blanco piso sin sombra se leia bien solo contra
   las zonas mas oscuras, y quedaba con poco contraste en las zonas mas
   claras del gradiente (verificado con Playwright, diapositiva inicial). */
/* 🆕 23-sep-2026 (problemas_v2.md #60): "ZU Impermeabilizaciones Ltda."
   arriba de la franja "Cobertura nacional" (ver inicio.js) -- mas chica y
   sin mayusculas que .franja (un nombre legal, no una etiqueta de
   marketing), mismo criterio de text-shadow que el resto de este bloque
   (fondo animado, no un color piso). */
/* 🩹 23-sep-2026 (problemas_v2.md #61): Franco vio "ZU Impermeabilizaciones
   Ltda." ya en vivo y pidio mas grande y en negrita, "manteniendo la
   fuente de color blanco" -- 0.82rem/sin negrita/70% opacidad (pensado
   como una linea chica subordinada a la franja) pasa a 1.15rem/700/blanco
   solido. Sigue mas chica que el h1 (2.1rem) para no competir con el
   titulo real de la pagina.
   🩹 26-sep-2026: Franco pidio agrandarla de nuevo -- 1.15rem -> 1.4rem.
   Se mantiene bajo el h1 (2.1rem) por el mismo motivo de arriba. Esta
   misma clase (y el mismo texto fijo) se replica ahora en las 9 paginas
   de /tipos-de-trabajo/:tipo y las 9 de /obras-destacadas/:tipo (ver
   heroTipo en tipo-de-trabajo.js y heroObras en obras-destacadas.js) --
   pedido de Franco de replicar "ZU Impermeabilizaciones" a esas paginas,
   asi que esta regla ya no es exclusiva del hero de inicio.js. */
/* 🩹 01-oct-2026: Franco pidio agrandar "ZU Impermeabilizaciones Ltda."
   un 30% -- 1.4rem -> 1.82rem (1.4 * 1.3). Se aplica en todos los anchos
   (sin quiebre de escritorio). */
.destacados-agua-marca {
  font-size: 1.82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* 🩹 01-oct-2026 (segunda vuelta, mismo dia): pidio un 30% MAS encima de
   eso, aclarado despues "solo para escritorio" -- 1.82rem -> 2.366rem
   (1.82 * 1.3), solo desde 1250px (mismo quiebre de "escritorio" que ya
   usan los carruseles). Debajo de 1250px se queda en 1.82rem, de la
   primera vuelta. */
@media (min-width: 1250px) {
  .destacados-agua-marca {
    font-size: 2.366rem;
  }
}
.destacados-agua .franja {
  font-family: 'Fredoka', 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.destacados-agua h1 {
  font-family: 'Fredoka', 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-variation-settings: normal;
  font-size: 2.1rem;
  max-width: 720px;
  margin: 0 auto 16px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* 🩹 26-sep-2026: icono de servicio antepuesto al <h1> de
   /tipos-de-trabajo/:tipo (ver ICONOS_SERVICIO en tipo-de-trabajo.js) --
   alto relativo (1.1em) al tamaño de letra del propio <h1>, para que
   escale igual que el texto en el quiebre de movil (.destacados-agua h1
   mas abajo en este archivo) sin necesitar una segunda regla en ese
   media query. drop-shadow en vez de text-shadow porque es un PNG con
   transparencia, no texto -- mismo tono/opacidad que el text-shadow de
   franja/h1/bajada de arriba, para que se sienta parte del mismo grupo. */
.icono-titulo-tipo {
  height: 1.1em;
  width: auto;
  vertical-align: -0.15em;
  margin-right: 0.35em;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.destacados-agua p.bajada {
  max-width: 620px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* Leyenda chica bajo los botones del bloque de arriba ("Escribenos y un
   asesor te responde..."), pedida por Franco junto con el resto del texto.
   No existia una clase generica para un parrafo chico -- se agrega esta. */
.destacados-agua-cta {
  margin-top: 14px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* 🩹 15-sep-2026: `padding-top`/`padding-bottom` en LONGHAND a proposito,
   nunca el shorthand `padding` -- estos dos bloques tambien llevan la
   clase `.contenedor` (`padding:0 20px` shorthand, mas arriba en este
   archivo) para el ancho maximo y el margen horizontal; si esta regla
   tambien usara el shorthand `padding`, pisaria ese margen horizontal
   entero (ya paso antes en este archivo, ver el historial del menu de
   header.sitio nav). Con longhand, cada declaracion toca solo su propio
   lado -- top/bottom de aca, left/right de `.contenedor` -- sin
   depender del orden en que aparezcan. */
/* 🩹 21-sep-2026 (problemas_v2.md #23): `.destacados-agua-abajo` se saca --
   era el envoltorio del bloque `destacadosDespues` de inicio.js (cifras +
   confianza), eliminado por completo.
   🩹 21-sep-2026 (problemas_v2.md #27): `.destacados-agua-arriba` (la
   regla que iba justo aca) tambien se saca -- tipo-de-trabajo.js, su
   ultimo usuario, paso a `dosColumnas` en esta misma entrada. Ver el
   comentario de mas arriba (junto a "texto que envuelve al carrusel")
   para el detalle completo.
   ============ Layout de 2 columnas (inicio.js/tipo-de-trabajo.js) ============
   `opciones.dosColumnas` en destacados.js -- el bloque de texto
   (franja+h1+botones+leyenda+cifras) y el carrusel de "Trabajos
   destacados" van lado a lado en vez de uno arriba del otro, para que el
   hero completo quepa en una sola pantalla sin scroll. Valores (grid de
   1.05fr/0.95fr, gap 48px, columna del carrusel a 380px) tomados
   directamente de la simulacion que Franco aprobo -- ver problemas_v2.md
   #23. `obras-destacadas.js` y las 9 paginas de tipo de trabajo no usan
   `dosColumnas`, siguen con el marcado apilado de siempre. */
.destacados-agua-columnas {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  /* 🩹 21-sep-2026 (problemas_v2.md #25): padding-top baja de 40px a 0 --
     Franco vio en vivo que las flechas del carrusel (.carrusel-controles,
     al pie de la columna del carrusel, que es la mas alta de las dos y
     por eso define el alto de esta fila) quedaban debajo del borde
     inferior de la ventana en su propio monitor (1536x686 de espacio util
     real, medido en vivo con Chrome) -- no un bug de overflow, la fila
     completa (columna del carrusel, ~582px) mas el padding de arriba de
     esta regla y el padding-top generico de `section` (ver
     `.destacados-agua:has(.destacados-agua-columnas)` mas abajo -- ese
     otro padding SI se toco de nuevo, ver el comentario de esa regla
     para el valor final) sumaban mas alto que una pantalla. Este de aca
     (el de la propia grilla) se queda en 0 desde la primera vuelta -- la
     correccion de la 2da vuelta (25.3) fue solo en el otro padding, mas
     abajo. */
  padding-top: 0;
  padding-bottom: 32px;
}
/* 🩹 21-sep-2026 (problemas_v2.md #25): `:has()` para tocar el
   padding-top de arriba SOLO en el inicio (unico lugar donde
   `.destacados-agua-columnas` existe dentro de `.destacados-agua`) --
   `tipo-de-trabajo.js`/`carrusel-servicios.js`/`obras-destacadas.js`
   comparten la misma clase `.destacados-agua` para su propio hero
   apilado, y ese no tiene este problema (su columna unica no es tan alta
   como la del carrusel de 2 columnas) -- no se les debia tocar el
   padding-top generico de 48px (regla de `section`, mas arriba en este
   archivo). Soportado por Chrome/Edge/Firefox actuales (2026), no hace
   falta fallback. */
.destacados-agua:has(.destacados-agua-columnas) {
  /* 🩹 21-sep-2026 (problemas_v2.md #25.3): Franco vio esto en vivo ya
     desplegado y marco "te pasaste, subiste demasiado la columna de
     imagenes" -- 8px de por si es casi cero espacio bajo el menu.
     Subido a 18px: sigue liberando lo suficiente para que las flechas
     entren completas (verificado de nuevo en vivo, mismo monitor: quedan
     ~11px de margen bajo las flechas, contra los ~21px que dejaba el 8px
     original de este cambio) pero ya no se ve pegado al header. */
  padding-top: 18px;
}
.destacados-agua-columna-texto {
  text-align: left;
}
.destacados-agua-columna-texto .botones {
  justify-content: flex-start;
}
.destacados-agua-columna-carrusel {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 860px) {
  /* 🩹 23-sep-2026 (problemas_v2.md #53): Franco vio en el celular real,
     ya desplegado, que quedaba un espacio vacio grande entre la linea de
     cifras y el carrusel. Es el `gap: 48px` de la regla base de arriba
     -- pensado para separar las 2 columnas EN HORIZONTAL en escritorio,
     pero que al apilarse en 1 columna aca (`grid-template-columns: 1fr`)
     pasa a ser un espacio VERTICAL entre el texto y el carrusel. Se
     achica a 16px, solo en este quiebre -- no toca el gap de escritorio. */
  .destacados-agua-columnas {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .destacados-agua-columna-texto {
    text-align: center;
  }
  .destacados-agua-columna-texto .botones {
    justify-content: center;
  }
}
/* Linea compacta de cifras al pie de la columna de texto (reemplaza las 3
   tarjetas de `.cifras`/`.cifra`, sacadas arriba) -- mismo tratamiento
   visual que `.destacados-agua-cta` (chico, blanco translucido, con
   sombra para legibilidad sobre el lienzo animado). */
.destacados-agua-cifras-linea {
  margin-top: 6px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* 🩹 24-sep-2026 (problemas_v2.md #76): Franco pidio "encerrar" (recuadro)
   la franja+h1+cifras de inicio.js y la bajada de tipo-de-trabajo.js,
   "como en la seccion de resumen tecnico" -- mismo fondo/borde/radio que
   `.resumen-tecnico-tarjeta` (mas abajo en este archivo), la misma
   superficie de "vidrio esmerilado" ya usada sobre este mismo fondo
   oscuro compartido. Se saca aparte de esa clase (no se reusa tal cual)
   por 2 diferencias reales: esta va SIN centrar (esta columna es
   text-align:left, no una tarjeta aislada) y con bastante menos padding
   -- el pedido de Franco deja afuera del recuadro la marca ("ZU
   Impermeabilizaciones Ltda.", inicio.js) o el <h1> (tipo-de-trabajo.js),
   asi que adentro solo queda una franja+titulo+cifras o un parrafo corto,
   nunca el titulo+intro+listas de "Resumen tecnico". Padding elegido
   (20px 24px) y verificado con Playwright a 1536px de ancho (mismo
   monitor de referencia que las entradas #25/#26 de este archivo) para
   no romper el "nunca en 2 lineas" que el #25 le fijo a
   `.destacados-agua-cifras-linea` en su propio quiebre de 1200px: a ese
   ancho la columna de texto mide 708px (igual que en el #25) y el
   recuadro le deja 658px utiles a la linea de cifras -- la linea real
   mide ~632px, entra con margen de sobra (medido, no una suposicion).
   Ver problemas_v2.md #76 para el detalle completo, con capturas. */
.destacados-agua-recuadro {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 20px 24px;
  /* 🩹 01-oct-2026: Franco pidio negrita en el texto de la columna
     izquierda de home/obras destacadas/servicios "para que sea mas facil
     de leer". `h1`/`.franja` ya fijan su propio font-weight (600) en
     reglas mas especificas, asi que no les afecta esta herencia -- esto
     solo engrosa lo que hoy queda en el peso normal del body: `p.bajada`
     (servicios), `.destacados-agua-cifras-linea` (home) y las celdas
     `td` de `.obras-tabla` (obras destacadas; `th` ya tiene su propio
     600 y tampoco cambia). */
  font-weight: 700;
}
/* `.destacados-agua p.bajada` (mas abajo en este archivo) trae su propio
   `max-width:620px; margin:0 auto` -- pensado para cuando ese parrafo iba
   SUELTO en la columna (centrarlo un poco, sin ocupar los 708px enteros).
   Adentro del recuadro nuevo eso se ve mal: el parrafo queda angosto y
   centrado DENTRO de una caja mas ancha, con aire disparejo a los lados
   que no es aire real (no hay nada mas ahi) -- se verifico en la captura
   de prueba antes de commitear. Se anula ambas propiedades solo dentro
   del recuadro (selector con 3 clases, mas especifico que las 2 clases +
   1 elemento de la regla original, para no depender del orden en el
   archivo) para que el parrafo use el ancho completo del recuadro, igual
   que ya hace `.resumen-tecnico-tarjeta > p` en su propia caja. */
.destacados-agua .destacados-agua-recuadro .bajada {
  max-width: none;
  margin: 0;
}
/* 🩹 26-sep-2026: tabla de proyectos reales dentro de
   .destacados-agua-recuadro, en las paginas nuevas /obras-destacadas/:tipo
   (ver obras-tablas.js/obras-destacadas.js) -- mismo recuadro "vidrio
   esmerilado" de siempre, ya usado para la bajada de tipo-de-trabajo.js,
   ahora con una tabla adentro en vez de un parrafo. `.obras-tabla-
   envoltorio` con scroll horizontal es la red de seguridad para el celu
   angosto (< ~380px) con las tablas de mas columnas (lagunas_tranques/
   techos, 4 columnas) -- el resto del ajuste de tamaño (fuente chica,
   celdas con wrap normal en vez de nowrap) esta pensado para que la
   mayoria de los casos NO necesiten ese scroll y la tabla "se visualice
   por completo" (pedido de Franco), no para depender de el. */
.obras-tabla-envoltorio {
  overflow-x: auto;
}
.obras-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.obras-tabla th,
.obras-tabla td {
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.obras-tabla th {
  color: #fff;
  font-weight: 600;
}
.obras-tabla td {
  color: rgba(255, 255, 255, 0.92);
}
.obras-tabla tbody tr:last-child td {
  border-bottom: none;
}
/* 🩹 21-sep-2026 (problemas_v2.md #25): Franco pidio agrandar esta linea
   y la de `.destacados-agua-cta` (arriba), y que esta en particular
   ("HACEGURATE DE QUE ESTE ULTIMO TEXTO SE MANTENGA EN UNA SOLO LINEA")
   nunca se parta en dos. El texto completo ("+10 años en el rubro | 100%
   efectividad reportada | 2-5 años de garantia escrita") mide ~632px sin
   cortar a 1.05rem -- eso NO entra en la columna de texto en todo el
   rango de ancho de 2 columnas (861px a 1199px, donde esa columna mide
   entre 369px y 588px segun el quiebre de `.contenedor` de mas arriba en
   este archivo). Entra comodo (708px, ~76px de sobra) recien desde el
   tercer quiebre del sitio (1200px, "Amplio", doc47 §2.2) -- por eso el
   tamaño mas grande y el `white-space:nowrap` viven DENTRO de ese mismo
   `@media (min-width:1200px)` (uno nuevo, especifico de esta seccion, no
   el generico de `.contenedor`/`.hero h1` de mas arriba en el archivo) --
   por debajo de 1200px esta linea se queda exactamente como estaba antes
   de este cambio (0.92rem, con salto de linea normal si hace falta), cero
   riesgo de que el texto se corte o se salga de la columna. Dentro de ese
   mismo quiebre, `grid-template-columns` pasa de `1.05fr 0.95fr` a
   `1fr 380px` -- la columna del carrusel ya rendeaba siempre a 380px real
   (su propio max-width, ver `.destacados-agua-columna-carrusel` arriba)
   aun con la fr vieja, asi que fijarla en 380px no cambia en nada su
   ancho visible -- solo le saca a su columna el espacio que le sobraba
   sin usar (antes quedaba centrada con margen muerto a los lados) y se
   lo pasa a la columna de texto (de 571px a 708px en el monitor real de
   Franco), que es lo que hace falta para que la linea entre sin cortarse.
   Medido en vivo (inyectando el CSS antes de commitear, con Playwright/
   JS contra la pagina real) en el monitor de Franco (1536px utiles): la
   linea de cifras queda en una sola linea con ~76px de sobra. */
/* 🩹 21-sep-2026 (problemas_v2.md #26): Franco pidio aprovechar el
   espacio vacio a la derecha de la columna del carrusel (el margen
   exterior del `.contenedor`, que a 1200px de tope se nota bastante en
   un monitor ancho) para agrandar las fotos. La columna sube de 380px a
   430px (+50px, el ancho de la imagen sigue 4:3 asi que tambien crece en
   alto, +37.5px) y `.destacados-agua-columnas` sube su propio tope de
   1200px a 1250px para que ese crecimiento salga del margen exterior, no
   de la columna de texto (`grid-template-columns` sigue con la misma
   idea del #25: `1fr` + un valor fijo en px para la columna del
   carrusel) -- la columna de texto se queda exactamente en 708px, la
   misma que ya se verifico que le alcanza a la linea de cifras.
   Los +37.5px de alto de la imagen se compensan achicando los margenes
   internos de la ficha (imagen/h3/p/boton/flechas, todos con selectores
   `.destacados-agua-columna-carrusel ...` para que esto NO alcance a
   `obras-destacadas.js`, que usa la misma ficha pero apilada, sin este
   problema de alto) -- medido en vivo, el ahorro de esos margenes deja
   las flechas del carrusel exactamente en el mismo margen de sobra que
   ya tenian antes de este cambio (~11px en el monitor real de Franco,
   1536x686), asi que no se reabre el problema de las entradas 25/25.3.
   Todo esto vive en el mismo `@media (min-width:1200px)` de la entrada
   25 -- por debajo de ese quiebre nada cambia (imagen en 380px, margenes
   de siempre). */
@media (min-width: 1200px) {
  .destacados-agua-columnas {
    max-width: 1250px;
    grid-template-columns: 1fr 430px;
  }
  .destacados-agua-cta {
    font-size: 1rem;
  }
  .destacados-agua-cifras-linea {
    font-size: 1.05rem;
    white-space: nowrap;
  }
  .destacados-agua-columna-carrusel {
    max-width: 430px;
  }
  .destacados-agua-columna-carrusel .destacado-tarjeta {
    max-width: 430px;
  }
  .destacados-agua-columna-carrusel .destacado-imagen,
  .destacados-agua-columna-carrusel .destacado-imagen-pendiente {
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .destacado-tarjeta h3 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .destacado-tarjeta p {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .destacado-tarjeta .boton {
    margin-top: 10px;
  }
  .destacados-agua-columna-carrusel .carrusel-controles {
    margin-top: 16px;
  }
  /* 🩹 21-sep-2026 (problemas_v2.md #27): duplicado exacto del bloque de
     arriba (`.destacado-tarjeta`/`.destacado-imagen`), mismos valores,
     para `.servicio-tarjeta`/`.servicio-imagen` -- las 9 paginas de tipo
     de trabajo (carrusel-servicios.js) recien pasan a usar
     `.destacados-agua-columna-carrusel` con este cambio, y esa clase NO
     comparte CSS con `.destacado-tarjeta` (fork a proposito, ver el
     comentario de la entrada #21/#26 mas arriba) -- sin este duplicado, la
     tarjeta de servicio quedaria mas alta que la de destacado al mismo
     ancho (430px) y se reabriria el problema de las flechas tapadas de
     las entradas 25/25.3. Confirmado identico via grep: `.destacado-
     tarjeta`/`.servicio-tarjeta` no tienen ninguna regla de margen propia
     fuera de este bloque, los dos heredan el mismo `h3`/`p` base. */
  .destacados-agua-columna-carrusel .servicio-tarjeta {
    max-width: 430px;
  }
  .destacados-agua-columna-carrusel .servicio-imagen,
  .destacados-agua-columna-carrusel .servicio-imagen-pendiente {
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .servicio-tarjeta h3 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .servicio-tarjeta p {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .servicio-tarjeta .boton {
    margin-top: 10px;
  }
  /* 🩹 22-sep-2026 (problemas_v2.md #31): duplicado exacto de los dos
     bloques de arriba (`.destacado-tarjeta`/`.servicio-tarjeta`), mismos
     valores, para `.obra-tarjeta` -- mismo motivo ya documentado en la
     entrada #27 (sin este duplicado, la tarjeta quedaria mas alta que
     sus pares al mismo ancho de columna, 430px, y se reabriria el
     problema de las flechas tapadas de las entradas 25/25.3). */
  .destacados-agua-columna-carrusel .obra-tarjeta {
    max-width: 430px;
  }
  .destacados-agua-columna-carrusel .obra-imagen,
  .destacados-agua-columna-carrusel .obra-imagen-pendiente {
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .obra-tarjeta h3 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .obra-tarjeta p {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .destacados-agua-columna-carrusel .obra-tarjeta .boton {
    margin-top: 10px;
  }
}
/* 🩹 01-oct-2026: Franco pidio agrandar un 15% las imagenes de los
   carruseles (inicio/obras-destacadas/servicios) SOLO en la version de
   escritorio -- aclarado despues de una primera vuelta que lo aplico
   tambien en mobile/tablet por error de alcance mio, revertida (ver
   `.destacados-agua-columna-carrusel`/`.destacado-tarjeta`/
   `.servicio-tarjeta`/`.obra-tarjeta`, base de este archivo: se quedan en
   380px/420px de siempre, SIN cambios). El de "Tipos de membrana"
   (`.membrana-imagen`, archivo aparte, no usa esta columna ni estas
   clases -- ver membranas.js) tampoco se toca, pedido explicito de
   Franco desde el principio. Este bloque es el unico lugar del cambio:
   430px->495px (430*1.15=494.5, redondeado a 495), tramo de escritorio.

   Se separa en un segundo quiebre, >=1250px (no se tocan los valores de
   >=1200px de mas arriba), para no reabrir el problema de la entrada #25:
   entre 1200px y 1250px de ancho real de ventana, `.destacados-agua-
   columnas` (la grilla completa) todavia NO llego a su propio tope
   (1250px, ahora 1315px, ver abajo) -- su ancho REAL ahi es el del
   viewport, no el del tope. Si esta regla se aplicara ya desde 1200px,
   la columna de texto (`1fr`) perderia ahi los mismos 65px que gana la
   columna del carrusel, y se iria por debajo de los ~632px que la
   entrada #25 verifico que necesita la linea de cifras para no partirse
   en 2 lineas -- exactamente el bug que esa entrada arreglo. Separando el
   quiebre en 1250px (el mismo valor que ya tenia el tope de `.destacados-
   agua-columnas`) y subiendo ESE tope en los mismos 65px (1250->1315),
   la columna de texto se queda en los 708px de siempre en TODO este
   nuevo quiebre -- igual que ya hacia el de 1200px con 430px, ver el
   comentario de la entrada #26 mas arriba.

   Lo que este cambio NO resuelve (Franco lo pidio igual, informado): las
   flechas del carrusel (`.carrusel-controles`) quedan ~49px mas abajo
   (430px->495px de columna, *0.75 por el aspect-ratio 4:3 = +48.75px de
   alto de imagen) -- los margenes internos de la ficha ya estaban al
   minimo practico (10px/16px, bajados en la entrada #26 para que el
   cambio de 380 a 430 entrara en los ~11px de sobra que ese dia quedaron
   bajo las flechas en el monitor real de Franco, 1536x686). No queda mas
   margen para compensar esos 49px sin volver a achicarlos a un valor que
   se veria apretado -- es probable que en monitores como ese las flechas
   quieden pegadas o levemente cortadas bajo el borde de la ventana.

   🩹 01-oct-2026 (segunda vuelta): Franco pidio agrandar un 7% MAS, otra
   vez solo en escritorio -- 495px->530px (495*1.07=529.65, redondeado a
   530). Mismo mecanismo que arriba: se compensa `.destacados-agua-
   columnas` en el mismo delta (1315px->1350px, +35px) para que la columna
   de texto se seguya quedando en 708px. El problema de las flechas de
   arriba se agrava un poco mas (+26px de alto de imagen adicionales,
   ~75px en total desde el 430px original) -- Franco ya veia el resultado
   en vivo al pedir esta segunda vuelta, no es informacion nueva para el. */
@media (min-width: 1250px) {
  .destacados-agua-columnas {
    max-width: 1350px;
    grid-template-columns: 1fr 530px;
  }
  .destacados-agua-columna-carrusel {
    max-width: 530px;
  }
  .destacados-agua-columna-carrusel .destacado-tarjeta {
    max-width: 530px;
  }
  .destacados-agua-columna-carrusel .servicio-tarjeta {
    max-width: 530px;
  }
  .destacados-agua-columna-carrusel .obra-tarjeta {
    max-width: 530px;
  }
}
.destacados-agua::after {
  content: '';
  position: absolute;
  inset: -10%;
  /* 🩹 14-sep-2026 (9na correccion): la linea de 2px de .hero-agua (de
     donde se copio este mismo patron) se ve bien fina/nitida sobre un
     fondo estatico, pero animada aca se leia como un "ping" de sonar en
     vez de una ondulacion de agua -- se ensancha la franja y se le pone
     una entrada/salida suave (en vez de un corte duro) para que cada
     anillo se vea como una cresta de onda, no como una linea dibujada.

     🩹 16-sep-2026 (problemas_v2.md #19, 7ma correccion): el centro del
     origen baja de "50% 115%" a "50% 82%" -- antes quedaba siempre fuera
     de la vista, debajo del final de esta seccion (que solo llegaba hasta
     el final de "Trabajos destacados"). Ahora que la seccion se extiende
     hacia abajo para incluir tambien "Tipos de membrana", Franco pidio
     explicitamente que el origen de estas ondas (de donde salen las que
     "se expandian hacia afuera" en la version de siempre de este mismo
     carrusel) quede VISIBLE dentro de esa zona de mas abajo, en vez de
     seguir escondido fuera de la pagina. El calculo es geometria simple:
     con `inset:-10%` esta capa mide 120% del alto de la seccion, empieza
     10% mas arriba -- un origen a Y% de ESTA capa cae, medido desde el
     borde de arriba de la seccion, a `1.2*Y/100 - 0.1` de su alto total.
     Medido con Playwright contra el fixture de prueba: "Tipos de
     membrana" arranca al 74.6% del alto y termina en el 100% -- 82% da
     ~88.4%, cerca del centro de esa franja (no pegado a ninguno de sus
     dos bordes). Si el alto real de cualquiera de las dos zonas cambia
     mucho, vale la pena volver a mirar este numero contra una captura
     real (mismo criterio que el degradado de color de `.destacados-agua`,
     arriba).

     🩹 21-sep-2026 (problemas_v2.md #23): vuelto a medir -- el layout de 2
     columnas de inicio.js corre "Tipos de membrana" a ocupar del 62.6% al
     100% del alto total (antes 74.6%-100%). Centro nuevo de esa franja:
     ~81%. Despejando la misma formula de arriba para que el origen caiga
     ahi: Y = (81/100 + 0.1) / 1.2 * 100 ≈ 76%.
  */
  background: repeating-radial-gradient(
    circle at 50% 76%,
    transparent 0,
    transparent 32px,
    rgba(255, 255, 255, 0.09) 40px,
    rgba(255, 255, 255, 0.02) 48px,
    transparent 56px
  );
  animation: zu-ondas 22s linear infinite;
  pointer-events: none;
}
.destacados-agua h2 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* 🩹 16-sep-2026 (problemas_v2.md #19, 7ma correccion): antes solo
   ".membranas-oscuro" pisaba las flechas/puntos del carrusel generico con
   una version "vidrio esmerilado" (blanco translucido) -- el circulo claro
   por defecto (`.carrusel-flecha` base, mas arriba) igual se lee bien
   sobre el agua, pero ahora que los dos carruseles ("Trabajos destacados"
   y "Tipos de membrana") comparten esta misma seccion de punta a punta,
   conviene que los dos usen el mismo tratamiento -- se mueve aca (sin
   cambiar valores) en vez de mantenerlo bajo una clase que ya no existe. */
.destacados-agua .carrusel-flecha {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.destacados-agua .carrusel-flecha:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}
.destacados-agua .carrusel-punto {
  background: rgba(255, 255, 255, 0.3);
}
.destacados-agua .carrusel-punto[aria-current='true'] {
  background: #fff;
}

/*
 * Ficha de "Trabajos destacados" (destacados.js) -- el contenido de cada
 * `.carrusel-slide`. Imagen arriba (real cuando exista `imagen`, o un
 * marcador neutro mientras tanto -- nunca una foto de relleno ni un
 * emoji), titulo, texto, y un boton a la pagina propia de ese tipo.
 */
.destacado-tarjeta {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 8px;
}
/* 🩹 14-sep-2026: `comun.js` (inicializarTarjetasDestacadas) agrega esta
   clase cuando la tarjeta ya tiene su click-a-toda-el-area funcionando --
   el cursor de mano es la unica señal visual que hace falta, el link "Ver
   X" ya se ve como boton. */
.destacado-tarjeta-clickeable {
  cursor: pointer;
}
/*
 * 🩹 14-sep-2026 (4ta correccion): la primera version de esto ponia la
 * ficha en un panel blanco tipo tarjeta de producto flotando sobre el
 * agua. Franco marco que eso seguia siendo "la forma de la version
 * vieja", no el diseño real de Prezi -- reviso el video que el mismo
 * mando cuadro por cuadro (0.1s, seg 15 a 25) y ahi NO hay ninguna tarjeta
 * ni panel: el titulo, el texto y hasta los logos de las empresas
 * proveedoras estan escritos DIRECTO sobre la foto de agua, sin caja
 * blanca atras -- exactamente el mismo tratamiento que ya usa `.hero-agua`
 * de mas arriba (texto blanco directo sobre el fondo). Se saca el panel:
 * el texto pasa a blanco con sombra (para que no se pierda contra la
 * textura del agua, igual que se ve en el video), y la imagen queda como
 * una foto suelta con una sombra suave, no adentro de una tarjeta.
 */
.destacados-agua .destacado-tarjeta {
  position: relative;
  z-index: 1;
}
.destacados-agua .destacado-tarjeta h3 {
  color: #fff;
}
.destacados-agua .destacado-tarjeta p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* 🩹 24-sep-2026 (problemas_v2.md #67): Franco pidio un "recuadro que
   rodea la misma foto" en el carrusel de inicio y en el de servicios
   (tipo de trabajo), "algo asi como" la caja de `.membrana-tarjeta`. Se
   le mostro el conflicto real: el 14-sep (revision del video de Prezi
   cuadro por cuadro) se saco a proposito el panel/sombra/radio de esta
   misma imagen porque ahi la foto va suelta sobre el agua, sin caja --
   ver el comentario grande junto a `.destacados-agua .destacado-imagen`
   mas abajo, todavia vigente. Franco eligio el punto medio: sin volver a
   poner el panel de fondo (eso si habria revertido la decision del
   14-sep), pero con un marco fino directo sobre la foto para que se
   note un borde alrededor de ella. Por eso solo se agrega `border` aca
   (nunca `box-shadow` ni se toca `border-radius`, que sigue en 0 dentro
   de `.destacados-agua` un poco mas abajo) -- el mismo criterio se aplica
   igual en `.obra-imagen` (carrusel de servicios), pero NO en
   `.servicio-imagen` (esa es la de /obras-destacadas, fuera del alcance
   de este pedido).

   🩹 24-sep-2026 (problemas_v2.md #67.6): el valor original de este
   borde (1px, opacidad 0.25 -- el mismo tono "vidrio esmerilado" que
   `.carrusel-flecha`) quedo practicamente invisible en el sitio real:
   contra fotos claras (cielo, agua de piscina) no se distinguia del
   fondo. Verificado en vivo (CSS servido + estilo computado del
   elemento real): el borde SI se estaba aplicando, no era un problema
   de despliegue -- era el valor el que no se notaba. Se sube a 2px,
   opacidad 0.85, para que se vea como un marco real sin llegar a
   sombra ni panel de fondo. */
.destacado-imagen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  object-fit: cover;
  margin-bottom: 16px;
}
/* 🩹 14-sep-2026 (5ta correccion): la sombra + esquinas redondeadas hacian
   que la imagen por si sola siguiera leyendose como una tarjeta flotando,
   aunque ya no tuviera fondo blanco atras -- en el video de Prezi no hay
   ningun recuadro asi. Se saca la sombra y el radio: la foto queda a rente
   (flush), como una foto suelta sobre el agua, no un tile aparte. */
.destacados-agua .destacado-imagen {
  border-radius: 0;
}
.destacados-agua .destacado-imagen-pendiente {
  border-color: rgba(255, 255, 255, 0.5);
}
.destacado-imagen-pendiente {
  background: linear-gradient(135deg, var(--azul-claro), var(--superficie));
  border: 1px dashed var(--borde);
}
.destacado-tarjeta p {
  color: var(--texto-secundario);
}
.destacado-tarjeta .boton {
  margin-top: 16px;
}
/* 🩹 23-sep-2026 (problemas_v2.md #52): Franco vio en el celular real que
   el texto del hero (franja/h1/cifras) ocupaba casi toda la pantalla
   inicial sin dejar ver el carrusel de abajo. Se achica aca, en el mismo
   quiebre que ya gobierna arriba el paso de esta seccion de 2 columnas a
   apilada -- afecta a TODAS las paginas que usan este mismo hero de
   "agua" (inicio, obras-destacadas y las 9 paginas de tipo de trabajo),
   a proposito: comparten el mismo problema de espacio en pantallas
   chicas. Este bloque va ADEMAS del `@media (max-width: 860px)` de mas
   arriba (que ya existia, para `.destacados-agua-columnas`) y no
   fusionado con el: dos de estos selectores (`.destacados-agua-cifras-
   linea`, `.destacado-tarjeta .boton`) tienen su regla base SIN media
   query mas abajo en este archivo -- de haber quedado antes, esa regla
   base (misma especificidad, pero declarada despues en el archivo)
   habria ganado la cascada y dejado el achique sin efecto. Puesto aca,
   despues de todas las reglas base que tocan estos mismos selectores,
   siempre gana el que corresponde. */
@media (max-width: 860px) {
  .destacados-agua .franja {
    font-size: 0.72rem;
    margin-bottom: 6px;
  }
  .destacados-agua h1 {
    font-size: 1.35rem;
    margin-bottom: 8px;
  }
  .destacados-agua-cifras-linea {
    font-size: 0.72rem;
  }
  /* Contenido de la tarjeta del carrusel "Trabajos destacados" (texto y
     boton, nunca la imagen) -- `.destacado-tarjeta` es exclusiva de
     destacados.js/obras-destacadas.js, no toca el carrusel de las
     paginas de tipo de trabajo (esas usan `.servicio-tarjeta`, aparte a
     proposito desde el #21). */
  .destacado-tarjeta h3 {
    font-size: 0.92rem;
  }
  .destacado-tarjeta p {
    font-size: 0.78rem;
  }
  .destacado-tarjeta .boton {
    padding: 8px 14px;
    font-size: 0.78rem;
    margin-top: 8px;
  }
  /* `.carrusel-flecha`/`.carrusel-controles` son clases compartidas por
     TODOS los carruseles del sitio (destacados, obras, servicios de tipo
     de trabajo, membranas) -- este achique de flechas/espaciado aplica a
     todos ellos en pantallas chicas, no solo al de esta seccion. */
  .js-activo .carrusel-controles {
    margin-top: 12px;
  }
  .carrusel-flecha {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
}

/*
 * 🩹 20-sep-2026 (problemas_v2.md #21): duplicado exacto del bloque de
 * arriba (`.destacado-tarjeta`/`.destacado-imagen`/`.destacado-imagen-
 * pendiente`), mismos valores, para la ficha de carrusel-servicios.js
 * (`.servicio-tarjeta`/`.servicio-imagen`/`.servicio-imagen-pendiente`).
 * A proposito NO se reutilizan las mismas clases: Franco va a modificar
 * puntualmente el carrusel de las 9 paginas de tipo de trabajo en las
 * proximas horas, y esto deja ese cambio de estilo aislado sin tocar la
 * ficha de inicio/obras-destacadas. Hoy son identicas a proposito -- el
 * fork en si no cambia nada visible todavia.
 */
.servicio-tarjeta {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 8px;
}
/* Ver el comentario junto a `.destacado-tarjeta-clickeable` mas arriba --
   misma logica, la agrega `comun.js` (inicializarTarjetasDestacadas). */
.servicio-tarjeta-clickeable {
  cursor: pointer;
}
.destacados-agua .servicio-tarjeta {
  position: relative;
  z-index: 1;
}
.destacados-agua .servicio-tarjeta h3 {
  color: #fff;
}
.destacados-agua .servicio-tarjeta p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.servicio-imagen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 16px;
}
.destacados-agua .servicio-imagen {
  border-radius: 0;
}
.destacados-agua .servicio-imagen-pendiente {
  border-color: rgba(255, 255, 255, 0.5);
}
.servicio-imagen-pendiente {
  background: linear-gradient(135deg, var(--azul-claro), var(--superficie));
  border: 1px dashed var(--borde);
}
.servicio-tarjeta p {
  color: var(--texto-secundario);
}
.servicio-tarjeta .boton {
  margin-top: 16px;
}

/*
 * 🩹 22-sep-2026 (problemas_v2.md #31): duplicado exacto del bloque de
 * arriba (`.servicio-tarjeta`/`.servicio-imagen`/`.servicio-imagen-
 * pendiente`), mismos valores, para la ficha de carrusel-obras.js
 * (`.obra-tarjeta`/`.obra-imagen`/`.obra-imagen-pendiente`) -- las 9
 * paginas de tipo de trabajo pasan a usar este carrusel nuevo (2 obras
 * propias por tipo), y `.servicio-tarjeta` pasa a usarla `/obras-
 * destacadas` en su lugar (ver carrusel-servicios.js/carrusel-obras.js).
 * Mismo fork a proposito que ya separa `.destacado-tarjeta` de
 * `.servicio-tarjeta`: un cambio de estilo puntual a la ficha de una
 * pagina no debe poder arrastrar a las otras dos.
 */
.obra-tarjeta {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 8px;
}
/* Ver el comentario junto a `.destacado-tarjeta-clickeable` mas arriba --
   misma logica, la agrega `comun.js` (inicializarTarjetasDestacadas). */
.obra-tarjeta-clickeable {
  cursor: pointer;
}
.destacados-agua .obra-tarjeta {
  position: relative;
  z-index: 1;
}
.destacados-agua .obra-tarjeta h3 {
  color: #fff;
}
.destacados-agua .obra-tarjeta p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* 🩹 24-sep-2026 (problemas_v2.md #67): mismo marco fino que
   `.destacado-imagen` (ver el comentario grande junto a esa clase, mas
   arriba) -- Franco pidio el mismo tratamiento para el carrusel de
   servicios (paginas de tipo de trabajo). Se mantiene el mismo criterio:
   solo `border`, sin panel de fondo ni sombra, para no revertir el "a
   rente" del 14-sep. */
.obra-imagen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  object-fit: cover;
  margin-bottom: 16px;
}
.destacados-agua .obra-imagen {
  border-radius: 0;
}
.destacados-agua .obra-imagen-pendiente {
  border-color: rgba(255, 255, 255, 0.5);
}
.obra-imagen-pendiente {
  background: linear-gradient(135deg, var(--azul-claro), var(--superficie));
  border: 1px dashed var(--borde);
}
.obra-tarjeta p {
  color: var(--texto-secundario);
}
.obra-tarjeta .boton {
  margin-top: 16px;
}

.boton.secundario {
  background: transparent;
  border: 1px solid var(--azul);
  color: var(--azul);
}
/* El boton azul-sobre-transparente de arriba desaparece contra el agua
   oscura -- version clara, mismo criterio que un boton "outline" sobre
   foto. */
.destacados-agua .boton.secundario {
  border-color: #fff;
  color: #fff;
}
.destacados-agua .boton.secundario:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* 🩹 20-sep-2026 (problemas_v2.md #20): `.pasos`/`.paso`/`.paso .num`
   (la seccion "Como trabajamos", `id="proceso"` en inicio.js) se sacan --
   Franco pidio eliminar esa seccion de todos lados, y este era el unico
   lugar que las usaba (verificado con grep contra publico/ entero). */

/* 🩹 16-sep-2026 (problemas_v2.md #18): la seccion "Garantia" (la tarjeta
   con borde+sombra que vivia aca, ".garantia") se elimina -- Franco pidio
   reemplazarla por "Tipos de membrana" (mas abajo, ".membranas-oscuro").
   ".confianza" ("Hemos trabajado para: ...") ya no vive anidada bajo
   ".garantia" -- se reubica en inicio.js junto a las cifras, con su propio
   selector suelto (mismo texto/estilo, sin la caja que la envolvia).
   🩹 21-sep-2026 (problemas_v2.md #23): esa reubicacion se revierte -- la
   linea de confianza se elimina por completo (pedido explicito de Franco,
   sin reemplazo), asi que ".confianza" se saca tambien: era su unico uso
   (verificado con grep contra publico/ entero). */

/*
 * "Tipos de membrana" (publico/landing/membranas.js) -- mismo patron de
 * carrusel/modelado de datos que "Trabajos destacados", y desde el
 * 16-sep-2026 (problemas_v2.md #19, 7ma correccion) tambien el MISMO fondo
 * real: ya no tiene seccion, lienzo ni ondulacion propios. `membranas.js`
 * ahora solo devuelve este bloque de contenido, insertado por
 * `destacados.js` (`opciones.membranas`) DENTRO de `.destacados-agua` --
 * ver el comentario grande junto a esa clase, mas arriba, y el de
 * comun.js (`inicializarCarruseles`) para el historial completo de por
 * que se abandono la idea de dos lienzos sincronizados.
 *
 * `.membranas-zona` solo pone el espaciado vertical de este bloque dentro
 * de la seccion compartida (mismo criterio de padding-only que tenian
 * `.destacados-agua-arriba`/`-abajo`, ambas ya eliminadas -- ver el
 * historial mas arriba) -- el color de fondo, la camara y la ondulacion
 * ya vienen puestos por la seccion que lo envuelve.
 */
.membranas-zona {
  padding-top: 8px;
  padding-bottom: 56px;
  text-align: center;
}
/* 🩹 16-sep-2026 (problemas_v2.md #19, 2da correccion): Franco marco que el
   titulo y el texto de cada tipo tienen que ir DENTRO de una tarjeta real
   (caja con borde) -- sigue igual tras la 7ma correccion (fondo
   compartido): esta tarjeta no depende de que seccion la envuelva. */
.membrana-tarjeta {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}
.membrana-tarjeta h3 {
  color: #fff;
  margin: 0 0 8px;
}
.membrana-tarjeta p {
  color: rgba(255, 255, 255, 0.92);
}
/* 🩹 21-sep-2026 (problemas_v2.md #27): Franco pidio que esta seccion
   tambien tenga imagenes, "como en la seccion obras" -- mismo patron
   real/pendiente que `.destacado-imagen`/`.destacado-imagen-pendiente`
   (nunca se inventa una foto). A diferencia de esas dos, `.membrana-
   tarjeta` SI es una caja real con borde (ver el comentario de esa clase,
   mas arriba) -- por eso la imagen conserva el radio redondeado de la
   tarjeta (12px) en vez del "a rente" (radio 0) que usan `.destacado-
   imagen`/`.servicio-imagen` sobre el agua, donde la tarjeta que las
   contiene no tiene caja visible. */
.membrana-imagen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 16px;
}
.membrana-imagen-pendiente {
  background: linear-gradient(135deg, var(--azul-claro), var(--superficie));
  border: 1px dashed var(--borde);
}
/* 🩹 01-oct-2026: Franco reporto la foto de HDPE "descentrada hacia la
   izquierda" en el carrusel. No es un bug de layout/CSS generico -- las 4
   fotos (PVC/TPO/EPDM/HDPE) son 1400x933 (4:3 recortado via object-fit:
   cover de las mismas) y comparten exactamente las mismas reglas de
   arriba, pero el rollo de HDPE esta compuesto mas a la izquierda DENTRO
   de su propia foto que en las otras 3 (medido en la imagen original:
   ocupa ~9%-63% del ancho, centro ~36%, contra ~45-47% de centro en las
   otras 3) -- el recorte 4:3 centrado de siempre deja de lado mucho mas
   fondo vacio del que hay a la derecha del rollo que de lo que recorta a
   la izquierda, y el resultado visual es el rollo pegado al borde
   izquierdo de la tarjeta. Se corrige solo esta foto (object-position,
   nunca se re-exporta/edita el archivo original) -- `left` en vez de
   `center` conserva el lado donde esta el rollo y recorta todo lo que se
   necesita recortar del lado del fondo vacio. Selector por `src` (no hay
   una clase propia por tipo de membrana) para no tocar las otras 3, que
   ya se ven bien centradas con el valor por defecto. */
img.membrana-imagen[src$='membrana_hdpe.jpg'] {
  object-position: left center;
}
/* 🩹 01-oct-2026: Franco pidio agrandar un 7% las imagenes de TODOS los
   carruseles en escritorio, esta vez incluido "Tipos de membrana" (las
   otras 3 rondas de este pedido -- ver `.destacados-agua-columnas` mas
   arriba -- lo habian dejado afuera a pedido explicito de Franco). Este
   carrusel no comparte la grilla de 2 columnas de los otros 3 (no tiene
   "columna de texto" con la que competir por ancho, es un bloque
   centrado aparte, ver `.membranas-zona`/`.membrana-tarjeta` mas arriba)
   asi que no hace falta compensar ningun otro ancho -- primer quiebre de
   escritorio para esta tarjeta, mismo punto de corte (1250px) que ya usan
   los otros 3 carruseles para "escritorio". 420px->449px
   (420*1.07=449.4, redondeado a 449). */
@media (min-width: 1250px) {
  .membrana-tarjeta {
    max-width: 449px;
  }
}

/*
 * "Resumen tecnico" (publico/landing/resumen-tecnico.js) -- 🩹 23-sep-2026
 * (problemas_v2.md #58): reemplaza a "Tipos de membrana" SOLO en las 9
 * paginas de tipo de trabajo (pedido de Franco: "en las pags de
 * servicios"). inicio.js/obras-destacadas.js NO cambian -- siguen usando
 * `.membranas-zona`/`.membrana-tarjeta` de arriba tal cual.
 *
 * Ya no es un carrusel de 4 tarjetas genericas (una por tipo de membrana,
 * igual en las 9 paginas): es un bloque ESTATICO por pagina, con el
 * resumen tecnico propio de ESE servicio (titulo + intro + listas). Reusa
 * el mismo criterio de tarjeta con borde ("vidrio esmerilado" sobre el
 * fondo oscuro compartido) que `.membrana-tarjeta`, pero mas ancha (620px,
 * no 420px) y con el texto alineado a la izquierda -- este contenido trae
 * sub-titulos y listas, no un titulo+parrafo corto centrado.
 *
 * ⚠️ El degradado de color y el origen de las ondas de `.destacados-agua`/
 * `.destacados-agua::after` (mas arriba en este archivo) estan calibrados
 * en % fijos, medidos con Playwright contra el alto EXACTO del viejo
 * carrusel de "Tipos de membrana" en estas mismas paginas (ver el
 * historial completo mas arriba, problemas_v2.md #19/#23/#30). Este
 * bloque es bastante mas alto que ese carrusel -- esos stops
 * probablemente ya no caen en el lugar correcto en las paginas de tipo de
 * trabajo (inicio.js, que no cambio, se sigue viendo igual que siempre).
 * Falta volver a medir en vivo -- no se inventan numeros nuevos sin medir.
 */
.resumen-tecnico-zona {
  padding-top: 8px;
  padding-bottom: 56px;
  text-align: center;
}
.resumen-tecnico-tarjeta {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: 32px 28px;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}
.resumen-tecnico-tarjeta h3 {
  color: #fff;
  text-align: center;
  margin: 0 0 12px;
}
.resumen-tecnico-tarjeta > p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 20px;
}
.resumen-tecnico-tarjeta h4 {
  color: #fff;
  margin: 20px 0 10px;
}
.resumen-tecnico-tarjeta ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
.resumen-tecnico-tarjeta li {
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 8px;
}
.resumen-tecnico-tarjeta li strong {
  color: #fff;
}
.resumen-tecnico-cierre {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}
.resumen-tecnico-cierre strong {
  color: #fff;
}

/*
 * "Proveedores" (publico/landing/proveedores.js) -- 🩹 25-sep-2026, pedido
 * explicito de Franco: fila de logos de materiales, compartida por los 3
 * carruseles que terminan en `.destacados-agua` (destacados.js/
 * carrusel-servicios.js/carrusel-obras.js), siempre DESPUES de "Tipos de
 * membrana"/"Resumen tecnico" -- ver el comentario grande de ese archivo
 * para el detalle completo.
 *
 * `.proveedor-tarjeta` reutiliza EXACTAMENTE la misma receta que
 * `.resumen-tecnico-tarjeta` (arriba en este archivo) -- mismo fondo/
 * borde/radio "vidrio esmerilado" -- pedido explicito de Franco ("el
 * mismo tipo de recuadro de resumen tecnico"), pero una tarjeta CHICA por
 * logo (no una unica tarjeta grande) para poder alinearlas en fila con
 * `flex-wrap` y que cada una envuelva de forma independiente en pantallas
 * angostas, en vez de una sola tarjeta con los 6 logos apretados adentro.
 *
 * `.proveedor-logo` usa una ALTURA fija + `object-fit: contain` (nunca un
 * ancho fijo): los 6 archivos originales vienen con proporciones muy
 * distintas (desde un isologo casi cuadrado hasta un wordmark ancho), asi
 * que homologar por ancho los dejaria con alturas dispares -- por altura,
 * los 6 "calzan" a simple vista en la misma fila (pedido explicito de
 * Franco: "ajustando el tamaño de los logos para que calcen bien"), sin
 * recortar ningun logo (`contain`, nunca `cover`).
 *
 * 🩹 26-sep-2026: Franco pidio "agranda un poco el tamaño de los logos de
 * los proveedores, un 20% mas grandes" -- 48px -> 58px de alto (48*1.2 =
 * 57.6, redondeado), `max-width` sube en la misma proporcion (160px ->
 * 192px) para no volver a topar el limite de ancho en los logos tipo
 * wordmark (mas anchos que altos) antes de alcanzar la nueva altura.
 */
.proveedores-zona {
  padding-top: 8px;
  padding-bottom: 56px;
  text-align: center;
}
.proveedores-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
.proveedor-tarjeta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}
.proveedor-logo {
  display: block;
  height: 58px;
  width: auto;
  max-width: 192px;
  object-fit: contain;
  /* Los 6 archivos vienen sobre fondo blanco solido (logos tal como los
     entregan las marcas, ver proveedores.js) -- un fondo propio blanco
     y esquinas levemente redondeadas evitan un rectangulo blanco de
     bordes duros flotando dentro del recuadro de vidrio esmerilado. */
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
}

form.formulario-lead {
  max-width: 520px;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 28px;
}
form.formulario-lead label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.92rem;
  color: var(--texto);
}
form.formulario-lead input,
form.formulario-lead select,
form.formulario-lead textarea {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}
form.formulario-lead .consentimiento {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--texto-secundario);
}
form.formulario-lead .consentimiento input {
  width: auto;
  margin-top: 3px;
}
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.faq details {
  border-bottom: 1px solid var(--borde);
  padding: 14px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--azul-oscuro);
}

/* 🆕 23-sep-2026 (problemas_v2.md #59): pie de pagina real (antes una
   sola linea centrada, "ZU · whatsapp · Política de privacidad") -- la
   estructura nueva se arma en pie(), publico/comun/plantilla.js (ver el
   comentario completo alli sobre que se tomo de la captura de referencia
   de Franco y que no). Fondo oscuro reusando `--azul-oscuro` -- el MISMO
   tono que ya usa `.boton.primario`/`.destacados-agua`/el skip-link, no
   un azul nuevo copiado de la captura -- pedido explicito de Franco de
   "mantener la gama de colores de la pag". */
footer.sitio {
  background: var(--azul-oscuro);
  color: rgba(255, 255, 255, 0.82);
  padding: 48px 0 0;
  font-size: 0.92rem;
}
footer.sitio a {
  color: #fff;
}
footer.sitio a:hover {
  color: var(--azul-claro);
}
.pie-cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.pie-marca .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* logo.png tiene fondo blanco solido "horneado" en el archivo (no
   transparente -- ver rutas/paginas.js, comentario de la ruta /logo.png):
   sobre un fondo oscuro se veria como un rectangulo blanco suelto. Mismo
   parche ya resuelto en .menu-panel-cabecera img (el drawer azul de
   movil, mismo problema) -- se reusa aca en vez de inventar otro. */
.pie-marca .logo img {
  background: #fff;
  padding: 6px 10px;
  border-radius: 10px;
}
.pie-marca p {
  margin: 14px 0 0;
  max-width: 32ch;
  color: rgba(255, 255, 255, 0.72);
}
.pie-columna h3 {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 16px;
}
.pie-columna ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
/* 🩹 23-sep-2026 (problemas_v2.md #60): la columna Contacto crece de
   "solo whatsapp" a las 4 lineas confirmadas por Franco (direccion/
   telefono/email/sitio web, ver plantilla.js pie()) -- cada <li> lleva un
   emoji decorativo (aria-hidden, mismo criterio que el resto del sitio,
   que ya usa emoji como icono en vez de una libreria de iconos) alineado
   arriba porque la direccion ocupa mas de una linea al envolver. */
.pie-contacto li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pie-contacto li a {
  word-break: break-word;
}
.pie-inferior {
  text-align: center;
  padding: 20px 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

/* 🩹 15-sep-2026: paso de franja fija abajo a tarjeta centrada en pantalla
   (decision de Franco -- "modal centrado, sin bloquear", confirmada via
   AskUserQuestion). A proposito NO hay `::before`/overlay de fondo
   oscurecido ni el <body> queda con scroll o pointer-events bloqueados: el
   resto del sitio sigue interactuable detras de la tarjeta, tal como exige
   doc10 §7.bis ("el cartel de cookies no bloquea el sitio", requisito de
   consentimiento "libre" de la Ley 21.719 art. 12). Ver comun.js para el
   vencimiento a 36 horas, que es un cambio aparte (JS, no CSS). */
.banner-cookies {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 460px;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  background: var(--azul-oscuro);
  color: #fff;
  padding: 22px 24px;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
}
/* 🩹 15-sep-2026: bug real reportado por Franco -- "Aceptar todo",
   "Rechazar lo opcional" y "Guardar mis preferencias" (comun.js) hacen
   `banner.hidden = true` para cerrar la tarjeta, pero la regla de arriba
   (`.banner-cookies { display: flex }`) es una clase de autor con la
   misma especificidad que la regla `[hidden] { display: none }` de la
   hoja de estilos del navegador -- y una regla de autor le gana a la del
   navegador en un empate. Resultado: el atributo `hidden` SI se pone
   (confirmado con getComputedStyle en vivo), pero la tarjeta nunca
   desaparece visualmente, aunque la eleccion SI se guarda en
   localStorage -- por eso los botones "no respondian" y "Elegir" parecia
   ser el unico que hacia algo (es el unico que no depende de `hidden`,
   solo reemplaza el contenido de adentro). No es una configuracion de
   seguridad del navegador ni de una extension: es este empate de CSS.
   `.banner-cookies[hidden]` tiene mas especificidad que `.banner-cookies`
   sola, asi que gana la pulseada y sí oculta la tarjeta. */
.banner-cookies[hidden] {
  display: none;
}
.banner-cookies p {
  margin: 0;
  font-size: 0.88rem;
}
.banner-cookies .acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.banner-cookies button {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.banner-cookies button.aceptar {
  background: var(--azul);
  border-color: var(--azul);
}

@media (prefers-reduced-motion: reduce) {
  /* 🩹 14-sep-2026: `*` solo no alcanzaba a `.hero-agua::after` ni a
     `.destacados-agua::after` (la ondulacion animada del fondo de agua) --
     un pseudo-elemento necesita su propio selector, `*` no lo hereda.
     Sin este agregado, la ondulacion seguia moviendose con la preferencia
     de movimiento reducido activada, aunque el resto de la pagina (incluido
     el crossfade del carrusel) si respetaba la preferencia. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

.efecto-brillo {
  position: relative;
  overflow: hidden;
}
.efecto-brillo::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(31, 143, 214, 0.25),
    transparent 45%
  );
  pointer-events: none;
}