/* =========================================================
   AGUAS ESPECIALES — Versión final
   ---------------------------------------------------------
   Hoja completa e independiente. Antes se apoyaba en
   css/version-real.css, pero esa reproduce el verde del tema de
   WordPress, que no es el color de la marca: la marca es azul y blanco,
   como el isotipo. Heredar de ahí obligaba a redefinir variables
   llamadas «--verde-*» con valores azules, y un nombre que miente es
   peor que un archivo largo. Así que la final tiene su propia hoja y
   version-real.css se queda como lo que es: la copia fiel del sitio
   verde, para comparar.

   Estructura:
     1. Tokens          6. Diferenciadores
     2. Base            7. Historia y el tote
     3. Cabecera        8. Contacto
     4. Botones         9. Pie
     5. Portada        10. Catálogo en cuadros
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --azul-profundo: #062f45;
  --azul-marino: #083b54;
  --azul: #0c7ea0;
  --azul-fuerte: #0a6076;   /* para texto pequeño: contraste AA sobre claro */
  --cian: #17b6d6;
  --cian-claro: #35d6e0;
  --menta: #7ef0dc;

  --tinta: #0a2833;
  --tinta-2: #274a58;
  --apagado: #4d6672;
  --linea: #d5e6ee;
  --blanco: #ffffff;
  --suave: #eef7fb;
  --tinte: #e2f1f8;

  --grad: linear-gradient(120deg, #0aa2c0 0%, #17b6d6 45%, #35d6e0 100%);
  --grad-hondo: linear-gradient(160deg, #062f45 0%, #083b54 45%, #0c5e78 100%);
  --sombra: 0 18px 40px -18px rgba(8, 59, 84, .28);
  --sombra-sm: 0 8px 20px -12px rgba(8, 59, 84, .35);

  --ancho: 1140px;
  --radio: 14px;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-btn: "Inter", var(--font);
}

/* ---------- 2. Base ---------- */
html {
  font-size: 112.5%;          /* 1rem = 18px */
  scroll-behavior: smooth;
  /* clip y no hidden: hidden convierte al elemento en contenedor de scroll
     y eso anula el position:sticky de la cabecera. */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta-2);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { font-weight: 700; line-height: 1.22; margin: 0 0 18px; color: var(--tinta); letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 18px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.seccion { padding: 80px 0; }
.seccion--ajustada { padding: 52px 0; }
.seccion--suave { background: var(--suave); }

.grad-txt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.saltar { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--azul-marino); color: #fff; padding: 12px 18px; }
.saltar:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--azul-fuerte); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. Cabecera ---------- */
.cab { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.cab__inner {
  max-width: var(--ancho); margin: 0 auto; padding: 0 20px;
  min-height: 74px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
/* El ancho del logotipo ya no se fija aquí: la altura la pone css/marca.css
   (--marca-alto, con sus tamaños para teléfono) y el ancho sale solo. Un
   max-width de 190px pisaba esa altura y dejaba el dibujo más chico de la
   cuenta. Antes decía: .cab__logo img { max-width: 190px; } */
.cab__nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.cab__nav li { position: relative; }
.cab__nav a { color: var(--tinta-2); text-decoration: none; font-size: .84rem; font-weight: 500; transition: color .2s ease; }
.cab__nav a:hover { color: var(--azul-fuerte); }
/* La página actual se marca con color y negrita. Escalarla, como hacía el
   tema original, la sacaba de la pantalla en teléfono. */
.cab__nav a[aria-current="page"] { color: var(--azul-fuerte); font-weight: 700; }

.cab__abrir {
  display: none; border: 1px solid var(--linea); cursor: pointer;
  background: var(--suave); color: var(--azul-fuerte);
  border-radius: 10px; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; padding: 0;
}
.cab__abrir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 860px) {
  .cab__abrir { display: inline-flex; }
  .cab__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanco); border-bottom: 1px solid var(--linea);
    padding: 8px 20px 20px; box-shadow: var(--sombra);
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .cab__nav.abierto { display: block; }
  .cab__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .cab__nav > ul > li > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--linea); }
}

/* ---------- Desplegable de «Productos» ---------- */
.menu-prod {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--tinta-2); font: inherit; font-size: .84rem; font-weight: 500;
  transition: color .2s ease;
}
.menu-prod:hover, .menu-prod[aria-expanded="true"] { color: var(--azul-fuerte); }
.menu-prod svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.menu-prod[aria-expanded="true"] svg { transform: rotate(180deg); }

.menu-panel {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 278px; padding: 8px; margin: 0;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.menu-panel.abierto { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.menu-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 9px; text-decoration: none;
  color: var(--tinta-2); font-size: .82rem; line-height: 1.3; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--tinte); color: var(--azul-fuerte); }
.menu-panel a .cuenta { opacity: .5; font-size: .74rem; font-variant-numeric: tabular-nums; }
.menu-cat__nom { flex: 1 1 auto; min-width: 0; }
.menu-cat__der { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }
.menu-panel__todas { font-weight: 700; }

/* Submenú: al pasar el cursor por una categoría se despliegan sus productos.
   Se abre hacia la izquierda porque el menú vive en la mitad derecha de la
   cabecera y hacia la derecha se saldría de la pantalla.

   Qué categoría está abierta lo decide js/menu-productos.js con la clase
   .is-abierta, no :hover. Con :hover el submenú se cerraba solo: al cruzar
   el hueco entre la categoría y su lista se perdía el :hover, y con él el
   pointer-events, así que la lista ya no recibía el cursor al llegar; y en
   diagonal el cursor pasaba por encima de otras categorías y cambiaba de
   lista. El JavaScript espera un momento si el cursor va hacia la lista, y
   el puente de abajo tapa el hueco. Con teclado sigue mandando :focus-within. */
.menu-cat { position: relative; }
.menu-cat.is-abierta::before {
  content: ""; position: absolute; top: -10px; bottom: -10px; right: 100%; width: 16px;
}
.menu-cat > a svg { width: 11px; height: 11px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.menu-cat.is-abierta > a, .menu-cat:focus-within > a { background: var(--tinte); color: var(--azul-fuerte); }
.menu-cat.is-abierta > a svg, .menu-cat:focus-within > a svg { opacity: 1; }

.menu-sub {
  position: absolute; right: calc(100% + 6px); top: -8px;
  min-width: 250px; max-width: 300px; padding: 10px 8px 8px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.menu-cat.is-abierta .menu-sub, .menu-cat:focus-within .menu-sub { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-sub { max-height: min(420px, 70vh); overflow-y: auto; }
.menu-sub__tit { display: block; padding: 0 10px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--linea); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-fuerte); font-weight: 700; }
.menu-sub a { padding: 7px 10px; font-size: .78rem; font-weight: 400; }
.menu-sub__mas { font-weight: 700 !important; color: var(--azul-fuerte) !important; }

/* En teléfono no hay «pasar el cursor»: los submenús se quedan fuera y el
   listado plano de categorías hace el trabajo. */
@media (max-width: 860px) { .menu-sub, .menu-cat > a svg { display: none; } }
.menu-panel__sep { height: 1px; margin: 7px 6px; background: var(--linea); }

@media (max-width: 860px) {
  .menu-panel {
    position: static; transform: none; min-width: 0; box-shadow: none;
    border: 0; border-radius: 0; padding: 4px 0 10px 10px; background: none;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .menu-panel.abierto { display: block; transform: none; }
  .menu-prod { padding: 14px 0; width: 100%; justify-content: space-between; border-bottom: 1px solid var(--linea); }
  .menu-panel a { padding: 10px 0; }
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--grad); color: #04222f;
  font-family: var(--font-btn); font-weight: 700; font-size: .86rem;
  padding: 15px 28px; border-radius: 999px; min-height: 48px;
  box-shadow: 0 12px 26px -14px rgba(12, 126, 160, .8);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(12, 126, 160, .9); }
.btn--linea { background: none; border-color: var(--linea); color: var(--tinta); box-shadow: none; }
.btn--linea:hover { border-color: var(--cian); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- 5. Portada ----------
   Rediseño sobre la referencia del cliente (30 sep 2026). Blanco con ondas
   y gotas de agua, títulos en azul marino y acentos celestes. Estos colores
   solo viven aquí: el menú, el catálogo y el contacto siguen con los suyos.
   Las ondas y las gotas son SVG de img/deco/, puro adorno: van en <span>
   vacíos con aria-hidden y pointer-events: none, detrás del contenido. */
.portada {
  --marino: #0b1d4f;
  --cielo: #2f93d8;
  --cielo-claro: #7cc0ee;
  --texto-portada: #52698a;
  position: relative; overflow: hidden; overflow: clip;
  background: var(--blanco);
}
.portada h1, .portada h2, .portada h3 { color: var(--marino); }
.portada p { color: var(--texto-portada); }

.deco { position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-size: 100% 100%; }
.deco--olas-hero { top: -40px; right: -8%; width: 72%; height: 300px; background-image: url("../img/deco/olas.svg"); transform: scaleY(-1); opacity: .95; }
.deco--gotas-hero { top: 18px; right: 4%; width: 300px; height: 158px; background-image: url("../img/deco/gotas.svg"); background-size: contain; opacity: .9; }
.deco--olas-historia { left: 0; right: 0; bottom: -10px; height: 240px; background-image: url("../img/deco/olas.svg"); opacity: .9; }
/* olas.svg rellena hasta su borde de abajo, que es lo que se quiere al pie de
   una sección. Aquí la banda queda entre dos secciones, así que se desvanece
   hacia abajo en vez de acabar en una línea recta. */
.deco--olas-difs {
  left: 0; right: 0; bottom: -90px; height: 260px; background-image: url("../img/deco/olas.svg"); opacity: .7;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
}
.deco--gotas-difs { right: 7%; bottom: 0; width: 190px; height: 100px; background-image: url("../img/deco/gotas.svg"); background-size: contain; opacity: .75; }
.deco--gotas-historia { left: 30%; bottom: 36px; width: 170px; height: 90px; background-image: url("../img/deco/gotas.svg"); background-size: contain; opacity: .8; }
.portada .contenedor { position: relative; z-index: 1; }

/* La rayita celeste que va encima del titular del héroe y de la historia */
.acento { display: block; width: 60px; height: 3px; border-radius: 3px; margin-bottom: 20px; background: linear-gradient(90deg, var(--cielo), var(--cielo-claro)); }

/* Héroe: titular a la izquierda y la foto del agua a la derecha, con una
   tarjeta celeste desfasada detrás, como en la referencia. */
.hero { position: relative; padding: 72px 0 56px; }
.hero__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 769px) { .hero__grid { grid-template-columns: 1fr 1fr; } }
.hero h1 { font-size: clamp(1.6rem, 3.3vw, 2.2rem); line-height: 1.2; margin-bottom: 18px; }
.portada .hero__pie { font-size: .84rem; margin: 0; color: var(--texto-portada); }
.hero__foto { position: relative; margin: 14px 18px 0 0; }
.hero__foto::before {
  content: ""; position: absolute; top: -14px; right: -18px; bottom: 36px; left: 18px;
  border-radius: 18px; background: linear-gradient(160deg, #9bcdf8 0%, #cfe7fc 100%);
}
.hero__foto img {
  position: relative; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 14px; border: 3px solid #fff;
  box-shadow: 0 24px 44px -24px rgba(19, 74, 132, .55);
}

/* Calidad controlada: recuadro celeste con degradado y líneas de onda */
.calidad { padding: 8px 0 12px; }
.calidad__caja {
  position: relative; overflow: hidden; text-align: center;
  padding: 52px 28px; border-radius: 18px; border: 1px solid #cbe6f8;
  background:
    url("../img/deco/lineas.svg") right bottom / 46% 72% no-repeat,
    linear-gradient(100deg, #f2fbff 0%, #e4f4fe 48%, #c4e6fc 100%);
}
.calidad__caja h2 { margin-bottom: 12px; font-size: clamp(1.3rem, 2.8vw, 1.7rem); }
.portada .calidad__caja p { max-width: 62ch; margin: 0 auto; }

/* ---------- 6. Diferenciadores ---------- */
.difs-seccion { position: relative; padding: 72px 0 72px; }
.titulo-centro { text-align: center; margin-bottom: 40px; }
.titulo-centro::after {
  content: ""; display: block; width: 56px; height: 3px; border-radius: 3px;
  margin: 16px auto 0; background: linear-gradient(90deg, var(--cielo), var(--cielo-claro));
}
.difs { display: grid; gap: 22px; }
@media (min-width: 700px) { .difs { grid-template-columns: 1fr 1fr; } }
.dif {
  background: var(--blanco); border: 1px solid #dcecf5;
  border-radius: 16px; padding: 28px 28px 30px;
  box-shadow: 0 14px 34px -24px rgba(19, 74, 132, .35);
}
.dif__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: #dcf1fa; color: #0e6f93; margin-bottom: 20px; }
.dif__ico svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dif h3 { margin: 0 0 10px; font-size: 1.08rem; }
.portada .dif p { margin: 0; font-size: .92rem; }

/* ---------- 7. Historia y el tote ----------
   El tote es la foto del cliente recortada, sobre un cuadro celeste y unas
   ondas de agua. El recorte es transparente, así que el cuadro y las ondas
   se ven alrededor y por los huecos de la jaula. */
.historia { position: relative; padding: 56px 0 96px; }
.historia__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 769px) { .historia__grid { grid-template-columns: 1fr 1fr; } }
.historia__grid > * { min-width: 0; }
.historia__texto p { text-align: left; }
.historia__foto {
  position: relative; width: min(460px, 100%); margin: 0 auto;
  padding: 36px 40px 54px; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, #e4f4fe 0%, #d2ebfc 100%);
  box-shadow: 0 24px 50px -30px rgba(19, 74, 132, .45), inset 0 0 0 1px #cfe7f8;
}
/* Las ondas quedan centradas en la base de la tarima, más anchas que ella,
   para que asomen a los lados y por debajo como en la referencia. */
.historia__foto::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: 10px; height: 22%;
  background: url("../img/deco/ondas-agua.svg") center / 100% 100% no-repeat;
}
.historia__foto picture { position: relative; z-index: 1; display: block; }
.historia__foto img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 16px 14px rgba(19, 74, 132, .22));
}

@media (max-width: 768px) {
  .hero { padding: 48px 0 40px; }
  .deco--olas-hero { width: 120%; right: -30%; height: 220px; }
  .deco--gotas-hero { width: 190px; height: 100px; top: 6px; }
  .calidad__caja { padding: 38px 20px; }
  .difs-seccion { padding: 56px 0 40px; }
  .historia { padding: 40px 0 80px; }
  .historia__foto { padding: 24px 26px 40px; }
}

/* ---------- 8. Contacto ----------
   Sobre azul marino, que es como se veía antes y es el color de la marca.
   Tres maneras de escribir, un toque cada una. Sin formulario. */
.contacto { background: var(--grad-hondo); color: #eaf8fc; position: relative; overflow: hidden; }
.contacto__caja { max-width: 820px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.contacto__ojo {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--menta);
}
.contacto__caja h2 { color: #fff; margin-bottom: 12px; font-size: clamp(1.5rem, 3.4vw, 2.05rem); }
.contacto__caja > p { color: #bfe0ec; margin-bottom: 32px; font-size: 1rem; }
.contacto__vias { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.contacto__via {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 18px 20px; min-height: 62px; border-radius: var(--radio);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  color: #eaf8fc; text-decoration: none; font-weight: 700; font-size: .92rem;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.contacto__via:hover { background: rgba(255, 255, 255, .18); border-color: var(--menta); transform: translateY(-2px); }
.contacto__via svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--menta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contacto__via--wa { background: #25d366; border-color: #25d366; color: #05331a; }
.contacto__via--wa:hover { background: #1fb855; border-color: #1fb855; }
.contacto__via--wa svg { fill: #05331a; stroke: none; }
.contacto__donde { margin-top: 28px; font-size: .88rem; color: #bfe0ec; }
.contacto__donde strong { color: #fff; }
.contacto__donde a { color: var(--menta); }

/* ---------- 9. Pie ----------
   Se quitó el pie de tres columnas: repetía el menú y los datos de
   contacto que están justo encima. Queda solo la línea legal. */
.pie { background: var(--azul-profundo); color: #9fc4d4; }
.pie__inner {
  max-width: var(--ancho); margin: 0 auto; padding: 22px 20px;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: center; justify-content: space-between; font-size: .8rem;
}
/* El logotipo va en su propia línea. Como tercer elemento de esta fila no
   cabía —127 + 375 + 581 más los huecos pasan del ancho disponible—, así que
   el copyright se iba solo a la esquina derecha y la dirección caía a una
   segunda fila. Ocupando el 100% recupera su sitio y los dos párrafos vuelven
   a repartirse la línea de abajo como antes. */
.pie__inner .marca--pie { flex: 0 0 100%; }
.pie a { color: #cfe8f2; text-decoration: none; }
.pie a:hover { color: var(--menta); text-decoration: underline; }

/* ---------- Botón flotante de WhatsApp ---------- */
.fab-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50%; background: #25d366; color: #fff;
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .75);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fab-wa:hover { transform: scale(1.07); box-shadow: 0 18px 38px -10px rgba(37, 211, 102, .9); }
.fab-wa svg { width: 30px; height: 30px; fill: currentColor; }
@media (max-width: 560px) { .fab-wa { right: 14px; bottom: 14px; width: 54px; height: 54px; } }
@media print { .fab-wa { display: none; } }

/* =========================================================
   10. Catálogo en cuadros
   ========================================================= */
.cat-cabecera { background: var(--grad-hondo); color: #eaf8fc; padding: 50px 0 44px; }
.cat-cabecera h1 { color: #fff; margin-bottom: 10px; }
.cat-cabecera p { color: #bfe0ec; max-width: 66ch; margin: 0 0 26px; }
.crumbs { font-size: .78rem; color: #9fc4d4; margin-bottom: 12px; }
.crumbs a { color: var(--menta); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.cat-buscar { position: relative; max-width: 520px; }
.cat-buscar input {
  width: 100%; padding: 14px 20px 14px 46px; font: inherit; font-size: .92rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12); color: #eaf8fc;
}
.cat-buscar input::placeholder { color: rgba(234, 248, 252, .6); }
.cat-buscar svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: rgba(234, 248, 252, .75); stroke-width: 2; }

.cat-layout { display: grid; gap: 36px; align-items: start; }
@media (min-width: 981px) { .cat-layout { grid-template-columns: 226px minmax(0, 1fr); } }

.cat-side { position: sticky; top: 96px; }
/* En teléfono el índice se colaba encima de los cuadros y había que pasar
   diez enlaces antes de ver nada. Los cuadros ya hacen lo mismo. */
@media (max-width: 980px) { .cat-side { display: none; } }
.cat-side h2 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-fuerte); margin: 0 0 12px; }
.cat-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cat-side button {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--tinta-2); font: inherit; font-size: .84rem;
  text-align: left; cursor: pointer; transition: background .2s, color .2s;
}
.cat-side button:hover { background: var(--tinte); }
.cat-side button.is-active { background: var(--tinte); color: var(--azul-fuerte); font-weight: 700; }
.cat-side em { font-style: normal; opacity: .55; font-size: .74rem; font-variant-numeric: tabular-nums; }

.cat-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cat-tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 0 0 16px; border-radius: var(--radio);
  background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra-sm);
  cursor: pointer; text-align: left; font: inherit; color: var(--tinta-2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-tile:hover { transform: translateY(-3px); border-color: var(--cian); box-shadow: var(--sombra); }
.cat-tile.is-active { border-color: var(--cian); box-shadow: var(--sombra); }
.cat-tile.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); }

/* Cabecera del cuadro: la imagen de la categoría, o su icono si no tiene */
.cat-tile__foto { display: block; aspect-ratio: 4 / 3; background: var(--suave); overflow: hidden; }
.cat-tile__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cat-tile:hover .cat-tile__foto img { transform: scale(1.04); }
.cat-tile__foto--icono { display: grid; place-items: center; background: linear-gradient(150deg, var(--tinte), var(--suave)); }
.cat-tile__foto--icono span { font-size: 2rem; line-height: 1; opacity: .85; }

.cat-tile__cuerpo { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 0; }
.cat-tile__num { position: absolute; top: 16px; right: 18px; font-weight: 700; font-size: .72rem; letter-spacing: .08em; color: var(--azul-fuerte); opacity: .6; }
.cat-tile__titulo { display: block; font-weight: 700; color: var(--tinta); font-size: .95rem; line-height: 1.25; padding-right: 28px; }
.cat-tile__n { font-size: .78rem; color: var(--apagado); }

@media (prefers-reduced-motion: reduce) {
  .cat-tile:hover { transform: none; }
  .cat-tile:hover .cat-tile__foto img { transform: none; }
}

.prod-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 36px 0 6px; }
.prod-head h2 { margin: 0; font-size: 1.28rem; }
.prod-head span { font-size: .82rem; color: var(--apagado); }
.prod-lead { color: var(--apagado); margin: 0 0 20px; max-width: 68ch; font-size: .9rem; }
.prod-sub { margin: 26px 0 12px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-fuerte); }

.prod-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.prod-tile {
  display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  padding: 0 0 16px; border-radius: var(--radio);
  background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.prod-tile:hover { transform: translateY(-3px); border-color: var(--cian); box-shadow: var(--sombra); }
/* La foto va en posición absoluta y no como celda de la rejilla: el alto del
   recuadro sale de aspect-ratio, y contra ese alto el navegador no resuelve un
   «height» en porcentaje —lo daba por automático y el envase se salía por
   abajo—. Contra el bloque de un absoluto sí lo resuelve. */
.prod-tile__foto { position: relative; aspect-ratio: 4 / 3; background: var(--suave); display: grid; place-items: center; overflow: hidden; }
.prod-tile__foto img { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; object-fit: contain; }
/* Una fotografía (soluciones acuosas) llena el recuadro de borde a borde,
   como en el cuadro de su categoría; el margen del 5 % es para los envases. */
.prod-tile__foto--escena img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.prod-tile__foto--icono { background: linear-gradient(150deg, var(--tinte), var(--suave)); }
.prod-tile__foto--icono span { font-size: 1.9rem; line-height: 1; opacity: .85; }
.prod-tile__cuerpo { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0 16px; }
.prod-tile h3 { margin: 0; font-size: .92rem; line-height: 1.3; }
.prod-tile p { margin: 0; font-size: .8rem; color: var(--apagado); }
.prod-tile__lista { list-style: none; margin: 2px 0 0; padding: 0; font-size: .76rem; color: var(--apagado); display: grid; gap: 2px; }
.prod-tile__lista li::before { content: "· "; color: var(--cian); font-weight: 700; }
.prod-tile__mas { opacity: .75; font-style: italic; }
.prod-tile__pie { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 0; margin-top: auto; }
.prod-tile__ver, .prod-tile__cot {
  font-size: .78rem; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: 999px; min-height: 38px;
  border: 1px solid var(--linea); cursor: pointer; font-family: inherit;
}
.prod-tile__ver { color: var(--azul-fuerte); border-color: var(--cian); }
.prod-tile__ver:hover { background: var(--tinte); }
.prod-tile__cot { background: var(--azul); color: #fff; border-color: var(--azul); }
.prod-tile__cot:hover { background: var(--azul-marino); border-color: var(--azul-marino); }
.prod-tile__ver svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cat-vacio { padding: 40px 0; text-align: center; color: var(--apagado); }
.cat-vacio a { color: var(--azul-fuerte); }

/* De dos en dos en teléfono: de uno en uno, las diez categorías eran un
   scroll largo antes de ver un solo producto. */
@media (max-width: 560px) {
  .cat-tiles, .prod-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-tile { padding: 16px 14px 14px; }
  .cat-tile h3 { font-size: .87rem; }
  .cat-tile__ico { font-size: 1.3rem; }
  .prod-tile h3 { font-size: .85rem; }
  .prod-tile__cuerpo, .prod-tile__pie { padding-inline: 12px; }
  .prod-tile__ver, .prod-tile__cot { font-size: .74rem; padding: 9px 11px; }
  .prod-tile__lista { display: none; }
}

/* ---------- Carrusel de portada ----------
   Los banners se ven completos («contain») y no recortados: el texto vive a
   la izquierda y el producto a la derecha, así que cualquier recorte a lo
   ancho se come uno de los dos. El alto se fija por escalón y el ancho lo
   sigue, que es lo que mantiene el marco quieto entre diapositivas. */
.carrusel { background: var(--suave); border-bottom: 1px solid var(--linea); }
.carrusel__marco {
  position: relative; max-width: var(--ancho); margin: 0 auto;
  overflow: hidden; background: #fff;
}
.carrusel__pista {
  display: flex; margin: 0; padding: 0; list-style: none;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.carrusel__lamina { flex: 0 0 100%; min-width: 0; }
.carrusel__lamina a { display: block; }
.carrusel__lamina img {
  width: 100%; height: 520px; object-fit: contain; background: #fff;
}
@media (max-width: 1024px) { .carrusel__lamina img { height: 400px; } }
@media (max-width: 700px)  { .carrusel__lamina img { height: auto; aspect-ratio: 3 / 2; } }

/* Sin JavaScript la pista no se mueve, así que se ve el primer banner y ya.
   No se queda un carrusel roto ni un hueco. */
.carrusel:not(.is-listo) .carrusel__flecha,
.carrusel:not(.is-listo) .carrusel__pausa,
.carrusel:not(.is-listo) .carrusel__puntos { display: none; }

.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--linea); border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .88); color: var(--azul-marino);
  box-shadow: var(--sombra-sm);
  transition: background .2s ease, transform .2s ease;
}
.carrusel__flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.carrusel__flecha--prev { left: 14px; }
.carrusel__flecha--next { right: 14px; }
.carrusel__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .carrusel__flecha { width: 44px; height: 44px; } .carrusel__flecha--prev { left: 8px; } .carrusel__flecha--next { right: 8px; } }

.carrusel__puntos { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 20px 20px; }
.carrusel__punto {
  width: 40px; height: 22px; padding: 9px 0 0; border: 0; background: none; cursor: pointer;
}
.carrusel__punto::before {
  content: ""; display: block; width: 100%; height: 4px; border-radius: 999px;
  background: var(--linea); transition: background .25s ease, transform .25s ease;
}
.carrusel__punto:hover::before { background: var(--cian); }
.carrusel__punto.is-activa::before { background: var(--azul); transform: scaleY(1.6); }

/* Botón de pausa. Lo crea el JavaScript y se sienta en la fila de los
   puntos, porque ahí es donde se busca el mando del carrusel. Redondo y con
   el mismo borde y el mismo color que las flechas, para que se lea como
   parte del mando y no como un añadido; pequeño, para que la fila la sigan
   mandando los puntos. Va fuera del flujo, anclado a la derecha: dentro de la
   fila sumaba 32 px a un contenedor centrado, así que empujaba los puntos
   16 px a la izquierda del centro real del banner. */
.carrusel__pausa {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px;
  padding: 0; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: var(--azul-marino);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.carrusel__pausa:hover { background: #fff; border-color: var(--cian); transform: translateY(-50%) scale(1.08); }
.carrusel__pausa svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Con «reducir movimiento» el carrusel no gira solo y el JavaScript esconde
   este botón con [hidden]. Sin esta regla el display: grid de arriba le gana
   al del navegador y el botón se quedaría a la vista sin nada que pausar. */
.carrusel__pausa[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { transition: none; }
  .carrusel__flecha:hover { transform: translateY(-50%); }
  .carrusel__pausa:hover { transform: none; }
}