/* ============================================================
   ZASSPA SHOWCASE — "La piscina de noche"
   Capa de dirección artística sobre styles.css:
   tinta petróleo + aqua viva + marfil solárium.
   Tipografía: Bricolage Grotesque (display) · Instrument Serif (acentos) · Inter (texto)
   ============================================================ */

:root {
  --abyss: #02141c;
  --deep-1: #031a23;
  --deep-2: #06303e;
  --aqua: #3ee6d6;
  --aqua-2: #2cc0f0;
  --foam: #eefaf7;
  --ivory: #f6f3ea;
  --card: #fffdf8;
  --ink-90: rgba(10, 34, 41, 0.9);
  --hairline: rgba(10, 34, 41, 0.1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
}

/* ---------- Base ---------- */
body {
  background: var(--ivory);
  color: var(--ink);
}
::selection {
  background: var(--aqua);
  color: var(--abyss);
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0b525e, #041c25);
  border-radius: 8px;
  border: 3px solid var(--ivory);
}
:focus-visible {
  outline: 2px solid var(--aqua-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Grano fílmico global (muy sutil) */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 2147483000;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.5%); }
  50% { transform: translate(1.5%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   ZONA OSCURA — el agua de noche
   ============================================================ */
.home-dark-zone {
  position: relative;
  isolation: isolate;
}
/* El lienzo morado antiguo pasa a ser agua nocturna (fallback si no hay WebGL) */
.page-home .home-dark-zone::before {
  background-color: #02141c;
  background-image:
    radial-gradient(120% 90% at 70% 0%, rgba(14, 152, 168, 0.25) 0%, transparent 52%),
    radial-gradient(90% 70% at 12% 88%, rgba(44, 192, 240, 0.16) 0%, transparent 55%),
    linear-gradient(178deg, #02141c 0%, #04222d 46%, #05303c 78%, #063845 100%);
}
@media (max-width: 720px) {
  .page-home .home-dark-zone::before {
    background-image:
      radial-gradient(120% 70% at 50% 20%, rgba(14, 152, 168, 0.28) 0%, transparent 55%),
      linear-gradient(178deg, #02141c 0%, #04222d 50%, #05303c 100%);
  }
}
@media (max-width: 560px) {
  /* Banner de frases: menos protagonismo en móvil (letra más pequeña) */
  .announcement-bar { font-size: 0.62rem; letter-spacing: 0.06em; }
  .announcement-track span { margin-right: 3.2rem; }
  /* «splash» grande como en escritorio: misma posición/giro que la regla base,
     solo mayor tamaño (en móvil 22vw quedaba diminuto). Palabra entera visible. */
  .claim-banner::before { font-size: 40vw; }
}
.water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.home-dark-zone .hero {
  position: relative;
  z-index: 1;
}
/* La banda superior (banner + header + menú móvil) debe quedar por encima del hero */
.home-dark-zone .home-top-band {
  position: relative;
  z-index: 5;
}
/* Los adornos antiguos ceden el sitio al agua real */
.home-dark-zone .hero-bubbles,
.home-dark-zone .home-top-breathe { display: none; }

/* Orilla: transición ondulada hacia el marfil */
.shore-divider {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  line-height: 0;
}
.shore-divider svg {
  display: block;
  width: 100%;
  height: clamp(52px, 8vw, 110px);
}
.shore-wave-back { fill: rgba(246, 243, 234, 0.28); }
.shore-wave-front { fill: var(--ivory); }

/* ---------- Barra de anuncios ---------- */
.announcement-bar {
  background: rgba(2, 18, 26, 0.55);
  color: rgba(238, 250, 247, 0.62);
  border-bottom: 1px solid rgba(238, 250, 247, 0.07);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
/* Marquee sin costura: el espaciado va por frase (margin-right), no como gap
   del contenedor. Con `gap` faltaba un hueco al final del track y el bucle daba
   un saltito atrás en cada vuelta; así translateX(-50%) encaja pixel-perfecto. */
.announcement-track { gap: 0; }
.announcement-track span { margin-right: 5rem; }

/* ---------- Cabecera ---------- */
/* Ojo: nada de backdrop-filter aquí — crearía un containing block
   y rompería el menú móvil (position: fixed) que vive dentro del header. */
.page-home .site-header {
  background: transparent;
  border-bottom: 1px solid rgba(238, 250, 247, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* El logo nuevo (icono S de agua + wordmark bicolor) viene de styles.css; aquí solo el brillo */
.page-home .logo-mark {
  /* el resplandor aqua dibujaba un halo redondo tras el patito */
  filter: drop-shadow(0 4px 9px rgba(6, 40, 80, 0.35));
}
.page-home .nav-pill {
  background: rgba(238, 250, 247, 0.06);
  border: 1px solid rgba(238, 250, 247, 0.12);
  /* styles.css fuerza var(--purple-800) con !important; el header es oscuro,
     así que aquí devolvemos el texto claro (foam) para que se lea bien. */
  color: var(--foam) !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-spring);
}
.page-home .nav-pill:hover,
.page-home .nav-pill[aria-expanded="true"] {
  background: rgba(62, 230, 214, 0.14);
  border-color: rgba(62, 230, 214, 0.45);
  color: #c9fff6 !important;
  transform: translateY(-1px);
}
.page-home .header-search {
  background: rgba(238, 250, 247, 0.07);
  border: 1px solid rgba(238, 250, 247, 0.12);
}
.page-home .header-search input {
  color: var(--foam);
  background: transparent;
}
.page-home .header-search input::placeholder { color: rgba(238, 250, 247, 0.45); }
.page-home .header-search-icon { color: rgba(238, 250, 247, 0.55); }
/* La ✕ de borrar vive sobre la barra oscura: fondo translúcido oscuro y aspa
   clara para que se vea (antes era un círculo claro con aspa clara = invisible). */
.page-home .search-clear { background: rgba(238, 250, 247, 0.12); color: var(--foam); }
.page-home .search-clear:hover { background: rgba(238, 250, 247, 0.24); color: var(--foam); }
.page-home .cart-button { color: var(--foam); }
.page-home .cart-count {
  background: var(--aqua);
  color: var(--abyss);
  font-weight: 700;
}
.page-home .nav-toggle span { background: var(--foam); }

/* Buscador desplegable sobre fondo oscuro */
.page-home .search-dropdown {
  background: rgba(4, 26, 35, 0.96);
  border: 1px solid rgba(62, 230, 214, 0.18);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  color: var(--foam);
  backdrop-filter: blur(18px);
}
/* El desplegable es oscuro; el hover claro de styles.css dejaba el nombre
   (texto claro) invisible. Resaltado oscuro/aqua para mantener el contraste. */
.page-home .search-result:hover,
.page-home .search-result:focus-visible {
  background: rgba(62, 230, 214, 0.15);
}

/* Mega menú: panel de cristal nocturno */
.page-home .mega-menu {
  background: rgba(3, 21, 29, 0.97);
  border: 1px solid rgba(62, 230, 214, 0.14);
  border-top: none;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.page-home .mega-col h4 {
  color: var(--aqua);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page-home .mega-col a,
.page-home .mega-col .mega-quiz-link {
  color: rgba(238, 250, 247, 0.78);
}
.page-home .mega-col a:hover,
.page-home .mega-col .mega-quiz-link:hover { color: var(--aqua); }
.page-home .mega-feature-card {
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(62, 230, 214, 0.35) 0%, transparent 60%),
    linear-gradient(160deg, #06303e 0%, #041c25 100%);
  border: 1px solid rgba(62, 230, 214, 0.3);
  color: var(--foam);
}
.page-home .mega-feature-badge { background: var(--aqua); color: var(--abyss); }
.page-home .mega-feature-cta { color: var(--aqua); }

/* Menú móvil nocturno */
.page-home .mobile-menu {
  background: linear-gradient(170deg, #04222d 0%, #02141c 100%);
  color: var(--foam);
}
/* wordmark del menú móvil: identidad nueva de styles.css */
.page-home .mobile-menu-close {
  color: var(--foam);
  background: rgba(238, 250, 247, 0.1);
  border: 1px solid rgba(238, 250, 247, 0.16);
}
.page-home .mobile-menu-head { border-bottom-color: rgba(238, 250, 247, 0.1); }
/* !important para ganar al !important del tema base */
.page-home .mobile-nav-pill {
  background: rgba(238, 250, 247, 0.06);
  border: 1px solid rgba(238, 250, 247, 0.14);
  color: var(--foam) !important;
  box-shadow: none;
}
.page-home .mobile-nav-pill:hover,
.page-home .mobile-nav-pill:active {
  background: rgba(62, 230, 214, 0.16);
  border-color: rgba(62, 230, 214, 0.5);
  color: #d6fff8 !important;
}
.page-home .mobile-menu-link { color: var(--foam); }
.page-home .mobile-catalog-label { color: var(--aqua); }
.page-home .mobile-catalog-link { color: rgba(238, 250, 247, 0.8); }
.page-home .mobile-catalog-panel { background: rgba(238, 250, 247, 0.04); }

/* ============================================================
   HERO — producto flotando sobre el agua
   ============================================================ */
.page-home .hero-copy .hero-eyebrow {
  color: var(--aqua);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.page-home .hero-copy .hero-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--aqua), transparent);
}
.page-home .hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 750;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--foam);
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
}
.page-home .hero-product-tag { color: rgba(238, 250, 247, 0.55); }
.page-home .hero-price {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  color: var(--aqua);
  text-shadow: 0 0 30px rgba(62, 230, 214, 0.4);
}
.page-home .hero-sub { color: rgba(238, 250, 247, 0.72); }

/* El selector de cantidad siempre vive sobre fondo claro (pill blanco del
   hero y fondo blanco de la ficha), así que su «− 1 +» debe ir en tinta
   oscura para que se lea. Antes usaba foam claro y quedaba invisible. */
.qty-stepper {
  background: #fff;
  border: 1px solid rgba(6, 48, 62, 0.22);
  color: var(--deep-2);
}
.qty-stepper button { color: var(--deep-2); }
.qty-stepper button:hover { color: #0e98a8; }
.qty-stepper span { color: var(--deep-2); }

/* Botón primario: aqua líquido con texto tinta */
.btn-primary {
  background: linear-gradient(120deg, var(--aqua) 0%, var(--aqua-2) 100%);
  color: var(--abyss);
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(62, 230, 214, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: linear-gradient(120deg, #5cf0e2 0%, #47ccf5 100%);
  box-shadow: 0 14px 40px rgba(62, 230, 214, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--abyss);
}
/* Barrido especular */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-out-soft);
  pointer-events: none;
}
.btn-primary:hover::after { left: 120%; }

.hero-catalog-cta.btn-primary {
  background: rgba(238, 250, 247, 0.06);
  border: 1px solid rgba(62, 230, 214, 0.4);
  color: var(--foam);
  box-shadow: none;
}
.hero-catalog-cta.btn-primary:hover {
  background: rgba(62, 230, 214, 0.15);
  color: #d6fff8;
  box-shadow: 0 0 30px rgba(62, 230, 214, 0.25);
}

.page-home .hero-tagline-line {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  color: rgba(238, 250, 247, 0.88);
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
}
.page-home .hero-tagline-line:first-child {
  color: rgba(238, 250, 247, 0.55);
  font-weight: 400;
  letter-spacing: 0;
}
.page-home .hero-tagline-accent {
  font-weight: 400;
  letter-spacing: 0;
  background: linear-gradient(120deg, #eafffb 0%, #7df3e4 45%, #45d3f2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Producto: sombra de agua y reflejo en la superficie */
.hero-drink {
  filter: drop-shadow(0 30px 44px rgba(0, 12, 18, 0.55)) drop-shadow(0 0 60px rgba(62, 230, 214, 0.12));
  -webkit-box-reflect: below 4px linear-gradient(transparent 72%, rgba(255, 255, 255, 0.12));
}
.hero-scene { perspective: 900px; }
.hero-product-wrap { transform-style: preserve-3d; }

/* Burbujas flotantes de cristal */
.hero-float {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 70%);
  border: 1px solid rgba(238, 250, 247, 0.25);
  box-shadow: inset 0 0 12px rgba(62, 230, 214, 0.2), 0 0 18px rgba(62, 230, 214, 0.12);
}

.hero-selector-label {
  color: rgba(238, 250, 247, 0.5);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.hero-pick {
  background: rgba(238, 250, 247, 0.05);
  border: 1px solid rgba(238, 250, 247, 0.12);
  backdrop-filter: blur(10px);
  transition: transform 0.35s var(--ease-spring), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.hero-pick:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 230, 214, 0.4);
  background: rgba(238, 250, 247, 0.09);
}
.hero-pick.is-active {
  border-color: var(--aqua);
  background: rgba(62, 230, 214, 0.14);
  box-shadow: 0 0 0 1.5px var(--aqua), 0 16px 40px rgba(0, 10, 16, 0.4), 0 0 44px rgba(62, 230, 214, 0.22);
  transform: translateY(-3px);
}
.hero-pick-name { color: var(--foam); }
.hero-pick-price {
  color: var(--aqua);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.05rem;
}

/* ============================================================
   SECCIONES CLARAS — el solárium
   ============================================================ */
.section-title {
  font-family: var(--font-display);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
  font-size: clamp(2rem, 3.8vw, 3.3rem);
}
.section-title .accent-word {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #0e98a8;
  padding-bottom: 0.14em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='6' viewBox='0 0 28 6'%3E%3Cpath d='M0 3.5 C4.7 0.8 9.3 6 14 3.5 C18.7 1 23.3 6 28 3.5' fill='none' stroke='%233ee6d6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 28px 6px;
}

/* Overline editorial numerado sobre cada titular */
.section-overline {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0e98a8;
  margin-bottom: 0.9rem;
}
.section-overline::after {
  content: "";
  flex: 0 0 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(14, 152, 168, 0.7), transparent);
}
.packs-section .section-overline { color: var(--aqua); }
.packs-section .section-overline::after {
  background: linear-gradient(90deg, rgba(62, 230, 214, 0.7), transparent);
}

/* Línea de flotación: progreso de scroll */
.scroll-waterline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2147482000;
  pointer-events: none;
  background: linear-gradient(90deg, var(--aqua), var(--aqua-2));
  box-shadow: 0 0 12px rgba(62, 230, 214, 0.55);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Chips de filtros */
.chip {
  background: transparent;
  border: 1px solid rgba(10, 34, 41, 0.2);
  color: var(--ink);
  transition: all 0.25s var(--ease-out-soft);
}
.chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}
.products-count { color: var(--ink-soft); }

/* Tarjetas de producto */
.product-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: 0 2px 10px rgba(4, 28, 37, 0.05);
  transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s var(--ease-out-soft), border-color 0.3s ease;
  overflow: hidden;
  position: relative;
}
.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(14, 152, 168, 0.35);
  box-shadow: 0 26px 50px rgba(4, 28, 37, 0.14);
}
.product-visual { overflow: hidden; }
.product-visual img {
  transition: transform 0.6s var(--ease-out-soft);
}
.product-card:hover .product-visual img { transform: scale(1.07) rotate(-1deg); }
.product-badge {
  background: linear-gradient(120deg, var(--sun), #ff9a5a);
  color: #3d1d05;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.product-cat {
  color: #0e98a8;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 600;
}
.product-name { font-family: var(--font-body); font-weight: 600; }
.product-price {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.product-shipping { color: #0e98a8; }
.add-btn {
  background: var(--ink);
  color: var(--ivory);
  border: none;
  transition: background 0.25s ease, transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.add-btn:hover {
  background: #0e98a8;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 152, 168, 0.35);
}

.page-btn {
  border: 1px solid rgba(10, 34, 41, 0.18);
  background: transparent;
  color: var(--ink);
}
.page-btn.active {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}

/* ---------- Ofertas: la cubierta al sol ---------- */
.offer-promo {
  background:
    radial-gradient(130% 140% at 85% -10%, rgba(255, 255, 255, 0.55) 0%, transparent 45%),
    linear-gradient(130deg, #ffd28a 0%, #ffb454 55%, #ff9a5a 100%);
  color: #3d1d05;
}
.offer-promo .offer-badge { background: #3d1d05; color: #ffd28a; }
.offer-promo h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
.offer-promo .btn-light { background: #3d1d05; color: #ffd28a; }
.offer-promo .btn-light:hover { background: #58300f; color: #ffe3b0; }
.offer-sub {
  background:
    radial-gradient(120% 130% at 15% 110%, rgba(62, 230, 214, 0.2) 0%, transparent 50%),
    linear-gradient(150deg, #06303e 0%, #041c25 100%);
  color: var(--foam);
}
.offer-sub .offer-badge { background: var(--aqua); color: var(--abyss); }
.offer-sub h3 { font-family: var(--font-display); color: var(--foam); letter-spacing: -0.02em; }
.offer-sub p { color: rgba(238, 250, 247, 0.72); }
.offer-sub .btn-dark {
  background: var(--aqua);
  color: var(--abyss);
}
.offer-sub .btn-dark:hover { background: #5cf0e2; }

/* ---------- Packs: piscina nocturna encapsulada ---------- */
.packs-section {
  background:
    radial-gradient(110% 90% at 80% 0%, rgba(14, 152, 168, 0.25) 0%, transparent 55%),
    linear-gradient(165deg, #04222d 0%, #02141c 100%);
  border-radius: 36px;
  margin-left: auto;
  margin-right: auto;
  max-width: min(1240px, calc(100% - 2rem));
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.2rem, 4vw, 4rem);
  position: relative;
  overflow: hidden;
}
.packs-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64' viewBox='0 0 220 64'%3E%3Cpath d='M0 32 C55 18 110 46 220 32' fill='none' stroke='rgba(62,230,214,0.05)' stroke-width='1.25'/%3E%3Cpath d='M0 44 C55 30 110 58 220 44' fill='none' stroke='rgba(62,230,214,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
.packs-section .section-title { color: var(--foam); }
.packs-section .section-title .accent-word { color: var(--aqua); }
.packs-sub { color: rgba(238, 250, 247, 0.6); }
.pack-card {
  background: rgba(238, 250, 247, 0.05);
  border: 1px solid rgba(238, 250, 247, 0.12);
  backdrop-filter: blur(12px);
  color: var(--foam);
  box-shadow: 0 20px 50px rgba(0, 8, 12, 0.35);
  transition: transform 0.45s var(--ease-out-soft), border-color 0.3s ease, box-shadow 0.45s ease;
}
.pack-card:hover {
  transform: translateY(-6px);
  border-color: rgba(62, 230, 214, 0.4);
  box-shadow: 0 30px 70px rgba(0, 8, 12, 0.5), 0 0 50px rgba(62, 230, 214, 0.1);
}
.pack-head h3 { color: var(--foam); font-family: var(--font-display); letter-spacing: -0.02em; }
.pack-head p { color: rgba(238, 250, 247, 0.62); }
.pack-discount {
  background: rgba(62, 230, 214, 0.15);
  color: var(--aqua);
  border: 1px solid rgba(62, 230, 214, 0.35);
}
.pack-thumb {
  background: var(--foam);
  border: 1px solid rgba(238, 250, 247, 0.2);
}
.pack-list li { color: rgba(238, 250, 247, 0.75); border-color: rgba(238, 250, 247, 0.08); }
.pack-item-price { color: rgba(238, 250, 247, 0.55); }
.price-old { color: rgba(238, 250, 247, 0.4); }
.pack-price {
  color: var(--aqua);
  font-family: var(--font-display);
  font-weight: 700;
}
.pack-conv-badge.badge-best { background: linear-gradient(120deg, var(--sun), #ff9a5a); color: #3d1d05; }
.pack-conv-badge.badge-popular { background: var(--aqua); color: var(--abyss); }

/* ---------- Banner claim: destello de agua ---------- */
.claim-banner {
  background:
    radial-gradient(140% 160% at 50% -30%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
    linear-gradient(120deg, #9ceaec 0%, #4fd8e0 45%, #2cc0f0 100%);
  color: #052029;
  position: relative;
  overflow: hidden;
  /* Aire entre el bloque oscuro de packs y este banner, para que no se peguen */
  margin-top: clamp(1.75rem, 4vw, 3rem);
}
.claim-banner::before {
  content: "splash";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(7rem, 22vw, 20rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(5, 32, 41, 0.14);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.claim-banner > * { position: relative; z-index: 1; }
.claim-banner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.claim-banner .btn-dark { background: var(--abyss); color: var(--foam); }
.claim-banner .btn-dark:hover { background: #06303e; }
.claim-footnote { color: rgba(5, 32, 41, 0.6); }

/* ---------- Quiz ---------- */
.quiz-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
}
.quiz-text .tag {
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.quiz-text h2 { font-family: var(--font-display); letter-spacing: -0.03em; }

/* ---------- Testimonios: citas editoriales ---------- */
.testimonial {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  position: relative;
  transition: transform 0.4s var(--ease-out-soft), box-shadow 0.4s ease;
}
.testimonial:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(4, 28, 37, 0.12); }
.testimonial::before {
  content: "“";
  position: absolute;
  top: 0.2rem;
  left: 1.1rem;
  font-family: var(--font-accent);
  font-size: 4.4rem;
  line-height: 1;
  color: rgba(14, 152, 168, 0.3);
  pointer-events: none;
}
.testimonial blockquote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--ink);
}
.testimonial figcaption {
  color: #0e98a8;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.t-avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--abyss);
  background: linear-gradient(135deg, var(--aqua), var(--aqua-2));
  flex: none;
}
.testimonial:nth-child(1) .t-avatar { background: linear-gradient(135deg, #ffd28a, var(--sun)); }
.testimonial:nth-child(3) .t-avatar { background: linear-gradient(135deg, #ff9a8a, var(--coral)); }
.testimonial.featured {
  background:
    radial-gradient(120% 130% at 85% -10%, rgba(62, 230, 214, 0.22) 0%, transparent 55%),
    linear-gradient(160deg, #06303e 0%, #041c25 100%);
  border-color: rgba(62, 230, 214, 0.25);
}
.testimonial.featured blockquote { color: var(--foam); }
.testimonial.featured::before { color: rgba(62, 230, 214, 0.5); }
.testimonial.featured figcaption { color: var(--aqua); }

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--ivory); }

/* ---------- Guía ---------- */
.guide-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s ease;
}
.guide-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(4, 28, 37, 0.13); }
.guide-img { position: relative; overflow: hidden; }
.guide-img img { transition: transform 0.7s var(--ease-out-soft); }
.guide-card:hover .guide-img img { transform: scale(1.06); }
.guide-img span {
  background: rgba(2, 18, 26, 0.65);
  color: var(--foam);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(238, 250, 247, 0.2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.64rem;
  font-weight: 600;
}
.guide-card h3 { font-family: var(--font-display); font-weight: 620; letter-spacing: -0.015em; }
.guide-more-btn {
  border: 1px solid rgba(10, 34, 41, 0.2);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
}
.guide-more-btn:hover { background: var(--ink); color: var(--ivory); }
.text-link { color: #0e98a8; }
.text-link:hover { color: #0b525e; border-bottom-color: rgba(14, 152, 168, 0.4); }

/* ---------- FAQ ---------- */
.faq-item {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  transition: border-color 0.3s ease;
}
.faq-item[open] { border-color: rgba(14, 152, 168, 0.4); }
.faq-item summary { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Nosotros ---------- */
.about-card {
  background:
    radial-gradient(110% 120% at 15% -10%, rgba(62, 230, 214, 0.16) 0%, transparent 55%),
    linear-gradient(160deg, #06303e 0%, #02141c 100%);
  color: var(--foam);
  border: 1px solid rgba(62, 230, 214, 0.15);
}
.about-card h2 { color: var(--foam); font-family: var(--font-display); letter-spacing: -0.03em; }
.about-card p { color: rgba(238, 250, 247, 0.75); }
.about-circle {
  background: radial-gradient(circle at 35% 30%, rgba(92, 240, 226, 0.9) 0%, rgba(14, 152, 168, 0.9) 60%, rgba(6, 48, 62, 1) 100%);
  box-shadow: 0 0 60px rgba(62, 230, 214, 0.35), inset 0 0 40px rgba(255, 255, 255, 0.15);
}
.about-z { color: var(--abyss); font-family: var(--font-accent); font-style: italic; }

/* ---------- Ventajas ---------- */
.perk {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s ease;
}
.perk:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(4, 28, 37, 0.1); }
.perk-icon {
  background: none;
  border: none;
}
.perk h3 { font-family: var(--font-display); font-weight: 620; }

/* ---------- Newsletter: última zambullida ---------- */
.newsletter {
  background:
    radial-gradient(120% 100% at 80% 10%, rgba(44, 192, 240, 0.25) 0%, transparent 55%),
    radial-gradient(100% 90% at 10% 90%, rgba(62, 230, 214, 0.18) 0%, transparent 50%),
    linear-gradient(160deg, #04222d 0%, #02141c 100%);
  color: var(--foam);
}
.newsletter h2 {
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--foam);
}
.newsletter p { color: rgba(238, 250, 247, 0.7); }
.newsletter-form input {
  background: rgba(238, 250, 247, 0.08);
  border: 1px solid rgba(238, 250, 247, 0.18);
  color: var(--foam);
}
.newsletter-form input::placeholder { color: rgba(238, 250, 247, 0.45); }
.newsletter-form .btn-dark {
  background: var(--aqua);
  color: var(--abyss);
  font-weight: 700;
}
.newsletter-form .btn-dark:hover { background: #5cf0e2; }
.newsletter-ok { color: var(--aqua); }

/* ---------- Footer: el fondo de la piscina ---------- */
.site-footer {
  background: var(--abyss);
  color: rgba(238, 250, 247, 0.68);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "ZASSPA";
  position: absolute;
  bottom: -0.22em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 17vw, 16rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(62, 230, 214, 0.14);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.site-footer .footer-grid,
.site-footer .footer-bottom { position: relative; z-index: 1; }
.site-footer h4 {
  color: var(--aqua);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-family: var(--font-body);
}
.site-footer a:hover, .site-footer .footer-link-btn:hover { color: var(--aqua); }
/* El logo del footer usa la identidad nueva de styles.css tal cual */
.footer-bottom { border-top: 1px solid rgba(238, 250, 247, 0.08); }

/* ============================================================
   SUPERFICIES FLOTANTES (carrito, modales, chatbot, toasts)
   ============================================================ */
.cart-drawer { background: var(--card); }
.cart-head h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
.modal { background: var(--card); }
.toast {
  background: var(--abyss);
  color: var(--foam);
  border: 1px solid rgba(62, 230, 214, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(62, 230, 214, 0.12);
}
.chatbot-launcher {
  background: linear-gradient(140deg, var(--aqua) 0%, var(--aqua-2) 100%);
  color: var(--abyss);
  box-shadow: 0 12px 34px rgba(62, 230, 214, 0.4);
}
.chatbot-head {
  background: linear-gradient(140deg, #06303e 0%, #02141c 100%);
  color: var(--foam);
}
.chatbot-avatar { background: var(--aqua); color: var(--abyss); }
.feature-teaser {
  background: var(--card);
  border: 1px solid rgba(14, 152, 168, 0.25);
  box-shadow: 0 24px 60px rgba(4, 28, 37, 0.25);
}
.feature-teaser-eyebrow { color: #0e98a8; }
.feature-teaser-title { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ============================================================
   MOVIMIENTO — reveals de scroll
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-out-soft),
    transform 0.9s var(--ease-out-soft);
  transition-delay: var(--rv-delay, 0s);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Los hovers no deben pelearse con el reveal una vez dentro */
[data-reveal].is-in.product-card,
[data-reveal].is-in.pack-card,
[data-reveal].is-in.guide-card,
[data-reveal].is-in.testimonial,
[data-reveal].is-in.perk {
  transition:
    transform 0.45s var(--ease-out-soft),
    box-shadow 0.45s var(--ease-out-soft),
    border-color 0.3s ease;
}

/* Entrada del hero al cargar */
.hero-copy > * {
  animation: heroRise 1s var(--ease-out-soft) both;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.1s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.2s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.3s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.38s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.46s; }
.hero-copy > *:nth-child(6) { animation-delay: 0.54s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
.hero-visual { animation: heroEmerge 1.3s var(--ease-out-soft) 0.25s both; }
@keyframes heroEmerge {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.hero-side { animation: heroRise 1s var(--ease-out-soft) 0.6s both; }
.hero-selector, .hero-selector-label { animation: heroRise 1s var(--ease-out-soft) 0.7s both; }

/* ============================================================
   ACCESIBILIDAD DE MOVIMIENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-copy > *, .hero-visual, .hero-side, .hero-selector, .hero-selector-label { animation: none; }
  .water-canvas { display: none; }
  .btn-primary::after { display: none; }
}