/* ============================================================
   ZASSPA — «LA PISCINA DE DÍA»
   Capa sobre styles.css + showcase.css + abyss.css (va la última).
   El día vive SOLO en dos sitios: el splash tipo «Pool» y la
   pantalla de entrada del home (la antigua zona oscura). El resto
   de la página conserva la dirección de arte de siempre.
   ============================================================ */

/* ============================================================
   1) SPLASH «POOL» — agua de sol + logo flotante + patito 3D
   ============================================================ */
.pool-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  overflow: hidden;
  background: linear-gradient(178deg, #7cc4ef 0%, #3d90d2 50%, #1c67ad 100%);
  transform: translateY(0);
  will-change: transform;
}
.pool-splash.dive-rise {
  transition: transform 1s cubic-bezier(0.7, 0, 0.2, 1);
  transform: translateY(-104%);
}
.pool-splash .pool-wave {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  display: block;
}
.pool-splash .pool-wave path { fill: #1c67ad; }
.pool-splash-water {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pool-splash-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Logo flotando en el agua: cada letra sube y baja con su fase */
.pool-logo {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.045em;
  font-size: clamp(2.9rem, 9.5vw, 7rem);
  color: #ffffff;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.35),
    0 14px 40px rgba(8, 60, 110, 0.45);
  user-select: none;
}
.pool-logo .pl {
  display: inline-block;
  animation: plFloat 3.6s ease-in-out var(--pld, 0s) infinite;
  transform-origin: 50% 85%;
}
@keyframes plFloat {
  0%, 100% { transform: translateY(0) rotate(0.0deg) scaleY(1); }
  30% { transform: translateY(-10px) rotate(-1.6deg) scaleY(1.03); }
  62% { transform: translateY(5px) rotate(1.2deg) scaleY(0.985); }
}
/* Reflejo del logo roto por el agua */
.pool-logo::after {
  content: "";
  display: block;
  height: 0.35em;
  margin-top: 0.08em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 75%);
  filter: blur(6px);
  transform: scaleY(-1) skewX(-6deg);
  border-radius: 50%;
  animation: plGlare 3.6s ease-in-out infinite;
}
@keyframes plGlare {
  0%, 100% { opacity: 0.65; transform: scaleY(-1) skewX(-6deg) scaleX(1); }
  50% { opacity: 0.4; transform: scaleY(-1) skewX(5deg) scaleX(0.96); }
}
/* coletilla bajo el titular, como en el splash de siempre */
.pool-sub {
  margin-top: 0.5rem;
  text-align: center;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(8, 60, 110, 0.5);
  animation: poolSubIn 0.8s ease 0.7s both;
}
@keyframes poolSubIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* El patito 3D: botón arrastrable posado en la última letra */
.pool-duck {
  position: absolute;
  left: 50%;
  top: 34%;
  width: clamp(72px, 10vw, 112px);
  height: auto;
  padding: 0;
  border: none;
  background: none;
  cursor: grab;
  z-index: 4;
  touch-action: none;
  filter: drop-shadow(0 10px 22px rgba(8, 50, 95, 0.4));
  animation: duckBob 3.6s ease-in-out 0.4s infinite;
  transform: rotate(var(--tilt, 0deg));
}
.pool-duck img,
.home-duck img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* aro de flotación: el agua que abraza al patito */
.pool-duck::after,
.home-duck::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -2%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 55%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
}
.pool-duck:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 50%; }
@keyframes duckBob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 0 -9px; rotate: -3deg; }
  62% { translate: 0 4px; rotate: 2.5deg; }
}
/* mientras lo arrastras: sin vaivén, solo inclinación por velocidad */
.duck-grab .pool-duck,
.duck-free .pool-duck {
  animation: none;
  rotate: var(--tilt, 0deg);
}
.duck-grab .pool-duck { cursor: grabbing; scale: 1.06; }
.duck-return .pool-duck {
  transition: left 0.6s cubic-bezier(0.3, 1.3, 0.4, 1), top 0.6s cubic-bezier(0.3, 1.3, 0.4, 1);
}
/* chapuzón final: el patito se hunde girando */
.duck-dive .pool-duck {
  animation: duckDive 0.55s cubic-bezier(0.5, 0, 0.8, 0.4) forwards;
  pointer-events: none;
}
@keyframes duckDive {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; scale: 1.05; }
  100% { translate: 0 46px; rotate: -170deg; opacity: 0; scale: 0.55; }
}
/* pista de entrada */
.pool-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(8, 60, 110, 0.5);
  animation: hintPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.45; }
}
.duck-dive .pool-hint { opacity: 0; transition: opacity 0.3s; }
.dive-seen .pool-splash { display: none; }

/* ============================================================
   2) EL AGUA DE TODA LA PÁGINA — la piscina entera de una vez:
   un lienzo fijo detrás de todo que arranca en agua de día con
   azulejos y, según bajas, se hunde hasta el abisal del footer
   (donde ya ni se ve el vaso). La zona del hero deja de pintar
   su propio fondo: todo es la misma agua.
   ============================================================ */
html.theme-day .page-home .home-dark-zone::before { display: none; }
#dayWater {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}
html.theme-day .water-canvas { display: none; }
/* textos del hero que quedaban apagados sobre agua clara */
html.theme-day .hero-sub,
html.theme-day .hero-product-tag {
  color: rgba(255, 255, 255, 0.88);
}
html.theme-day .hero-selector-label { color: rgba(255, 255, 255, 0.78); }
html.theme-day .page-home .hero-copy .hero-eyebrow { color: rgba(255, 255, 255, 0.95); }
html.theme-day .page-home .hero-tagline-accent { color: #ffe36b; }
/* banner de frases: banda un pelín más honda para que se lea */
html.theme-day .announcement-bar {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(7, 48, 90, 0.28);
}
html.theme-day .announcement-track span { color: rgba(255, 255, 255, 0.92); }
/* ============================================================
   2b) FALLBACK SIN WEBGL (o con movimiento reducido): la misma
   inmersión pero en degradado quieto, del azul de día al abisal.
   Solo se ve si el lienzo no existe; va en el body y se propaga
   al lienzo del documento, por detrás del canvas (z -2).
   ============================================================ */
html.theme-day body.page-home {
  background: linear-gradient(
    180deg,
    #7cc4ef 0,
    #2f7fc0 900px,
    #1160a5 22%,
    #0d5292 40%,
    #0a4479 55%,
    #073259 70%,
    #04223f 82%,
    #031a2e 90%,
    #02141c 100%
  );
}
/* el grano fílmico sobre el lienzo fijo provoca un bug de composición
   en Chrome (franjas de ruido a plena opacidad); con el agua animada
   detrás de todo tampoco aporta: fuera */
html.theme-day body::after { display: none; }

/* ============================================================
   2e) LOS PANELES QUE SE DESPLIEGAN
   Mega menú, buscador y menú móvil venían de la piscina de noche:
   paneles de tinta con acentos aqua. Sobre el agua de día quedaban
   como agujeros negros. Pasan a cristal blanco con tinta marina.
   ============================================================ */
html.theme-day .page-home .mega-menu,
html.theme-day .page-home .search-dropdown {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(47, 155, 208, 0.28);
  box-shadow: 0 30px 70px rgba(7, 48, 90, 0.28);
  color: var(--ink);
}
html.theme-day .page-home .mega-menu { border-top: none; }
html.theme-day .page-home .mega-col h4 { color: #1f6f9c; }
html.theme-day .page-home .mega-col a,
html.theme-day .page-home .mega-col .mega-quiz-link { color: #3d6a80; }
html.theme-day .page-home .mega-col a:hover,
html.theme-day .page-home .mega-col .mega-quiz-link:hover { color: #2f9bd0; }
/* la tarjeta del test: la única mancha de color del panel */
html.theme-day .page-home .mega-feature-card {
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(140, 212, 247, 0.45) 0%, transparent 60%),
    linear-gradient(160deg, #2f9bd0 0%, #1c67ad 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
html.theme-day .page-home .mega-feature-badge { background: #ffe36b; color: #123c55; }
/* el botón es una pastilla BLANCA: su letra va en azul, no en blanco */
html.theme-day .page-home .mega-feature-cta { background: #ffffff; color: #1c67ad; }
/* el resultado del buscador: el hover aqua sobre blanco no se veía */
html.theme-day .page-home .search-result:hover,
html.theme-day .page-home .search-result:focus-visible {
  background: rgba(47, 155, 208, 0.12);
}
html.theme-day .page-home .search-result-name { color: #123c55; }
html.theme-day .page-home .search-result-cat { color: #1f6f9c; }
html.theme-day .page-home .search-result-price { color: #1f6f9c; }

/* ============================================================
   2f) LAS DOS TARJETAS DE OFERTA
   Pareja invertida: navy + amarillo de marca. Misma tipografía y
   pespunte en las dos; solo cambia quién lleva el fondo oscuro.
   ============================================================ */
html.theme-day .offer-promo {
  background: linear-gradient(160deg, #004a7a 0%, #003566 55%, #00284d 100%);
  color: #ffffff;
  border: 2px dashed rgba(255, 214, 51, 0.65);
}
html.theme-day .offer-promo .offer-badge { background: #ffd633; color: #003566; }
html.theme-day .offer-promo h3 { color: #ffffff; }
html.theme-day .offer-promo p { color: rgba(255, 255, 255, 0.88); }
html.theme-day .offer-promo .btn-light { background: #ffd633; color: #003566; }
html.theme-day .offer-promo .btn-light:hover { background: #ffe566; color: #003566; }

html.theme-day .offer-sub {
  background: linear-gradient(150deg, #ffe566 0%, #ffd633 55%, #f5c400 100%);
  color: #003566;
  border: 2px dashed rgba(0, 53, 102, 0.45);
}
html.theme-day .offer-sub .offer-badge { background: #003566; color: #ffffff; }
html.theme-day .offer-sub h3 { color: #003566; }
html.theme-day .offer-sub p { color: rgba(0, 53, 102, 0.82); }
html.theme-day .offer-sub .btn-dark { background: #003566; color: #ffffff; }
html.theme-day .offer-sub .btn-dark:hover { background: #004a7a; color: #ffffff; }

/* menú móvil: misma hoja de cristal claro */
html.theme-day .page-home .mobile-menu {
  background: linear-gradient(170deg, #ffffff 0%, #eaf6fb 100%);
  color: var(--ink);
}
html.theme-day .page-home .mobile-menu-close {
  color: #1f6f9c;
  background: rgba(47, 155, 208, 0.10);
  border: 1px solid rgba(47, 155, 208, 0.28);
}
html.theme-day .page-home .mobile-menu-head { border-bottom-color: rgba(47, 155, 208, 0.2); }
html.theme-day .page-home .mobile-nav-pill {
  background: #ffffff;
  border: 1px solid rgba(47, 155, 208, 0.28);
  color: #123c55 !important; /* el tema base lo fuerza con !important */
  box-shadow: 0 6px 14px rgba(7, 48, 90, 0.08);
}
html.theme-day .page-home .mobile-menu-link { color: #123c55; }
html.theme-day .page-home .mobile-catalog-label { color: #1f6f9c; }
html.theme-day .page-home .mobile-catalog-link { color: #3d6a80; }
html.theme-day .page-home .mobile-catalog-panel { background: rgba(47, 155, 208, 0.06); }
/* orillas y espumas: en mitad del agua no pintan nada */
html.theme-day .shore-divider { display: none; }
html.theme-day .abyss-divider { display: none; }
html.theme-day .page-home .hero::after { display: none; }
/* ============================================================
   2c) TEXTOS SOBRE EL AGUA — todo lo que antes flotaba sobre
   marfil ahora flota sobre la piscina: a blanco. Lo que vive
   dentro de tarjetas (quiz, FAQ, productos, packs…) no se toca.
   OJO: sin text-shadow difuminado en títulos con split-text
   (cada palabra es una capa y Chrome pinta cajas claras).
   ============================================================ */
html.theme-day .stats-strip .stat-num { color: #ffffff; }
html.theme-day .stats-strip .stat-num .stat-suffix { color: rgba(255, 255, 255, 0.75); }
html.theme-day .stats-strip .stat-label { color: rgba(255, 255, 255, 0.82); }
html.theme-day .section-overline { color: rgba(255, 255, 255, 0.8); }
html.theme-day .section-title { color: #ffffff; }
html.theme-day .section-head p,
html.theme-day .guide-section-head p { color: rgba(255, 255, 255, 0.85); }
html.theme-day .products-count { color: rgba(255, 255, 255, 0.85); }
html.theme-day .page-info,
html.theme-day .page-dots { color: rgba(255, 255, 255, 0.8); }
html.theme-day .guide-more-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}
html.theme-day .guide-more-btn:hover {
  background: #ffffff;
  color: var(--ink);
  border-color: #ffffff;
}
html.theme-day .btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
}
html.theme-day .btn-outline:hover { background: #ffffff; color: var(--ink); }
html.theme-day .text-link { color: #9ceaec; }
html.theme-day .text-link:hover { color: #cef4f4; border-bottom-color: rgba(156, 234, 236, 0.5); }
/* «nosotros» tampoco: fuera la tarjeta oscura y fuera la bola con la Z,
   solo el texto flotando en el agua honda */
html.theme-day .about-card {
  background: none;
  border: none;
  box-shadow: none;
  grid-template-columns: 1fr;
}
html.theme-day .about-visual { display: none; }
html.theme-day .about-text {
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
/* la newsletter tampoco es un bloque: flota en el agua honda del final */
html.theme-day .newsletter { background: none; }
/* y el footer tampoco corta el agua: su fondo opaco fuera, que el
   abisal del lienzo llegue de seguido hasta los derechos reservados
   (sus cáusticas y azulejos propios siguen encima) */
html.theme-day .site-footer { background: transparent; }
/* sus cáusticas entran en fundido (arrancaban en seco en el borde) */
html.theme-day .floor-canvas {
  mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
}
/* y sin el filtro de brillo por profundidad de la capa abisal:
   escalonaba el tono justo en el borde de cada sección */
html.theme-day .site-footer,
html.theme-day .newsletter { filter: none; }
/* el banner del claim pierde su bloque aqua: el texto flota en el agua
   (el botón oscuro ya contrasta solo) */
html.theme-day .claim-banner {
  background: none;
  color: #ffffff;
}
html.theme-day .claim-banner::before {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.16);
}
html.theme-day .claim-footnote { color: rgba(255, 255, 255, 0.7); }
/* ============================================================
   2d) LA REGLA DE PROFUNDIDAD — antes cambiaba de tinta a espuma
   según las «zonas oscuras» de la noche; ahora todo es agua, así
   que va siempre en blanco con halo hondo: se lee a cualquier
   profundidad (arriba en agua clara y abajo en el abisal).
   ============================================================ */
html.theme-day .dg-scale,
html.theme-day .dg-dark .dg-scale {
  background:
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.66) 0 1px, transparent 1px calc(100% / 24));
  border-right-color: rgba(255, 255, 255, 0.66);
  filter: drop-shadow(0 0 3px rgba(7, 48, 90, 0.6));
}
html.theme-day .dg-num,
html.theme-day .dg-dark .dg-num {
  color: #ffffff;
  background: rgba(7, 48, 90, 0.55);
  border-color: rgba(255, 255, 255, 0.28);
}
html.theme-day .dg-top,
html.theme-day .dg-bottom,
html.theme-day .dg-dark .dg-top,
html.theme-day .dg-dark .dg-bottom {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 3px rgba(7, 48, 90, 0.7);
}
html.theme-day .dg-dot,
html.theme-day .dg-dark .dg-dot {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 4px rgba(7, 48, 90, 0.7);
}

/* ============================================================
   3) EL PATITO DEL HOME — nada solo por la pantalla de entrada
   ============================================================ */
.home-duck {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(48px, 5.4vw, 74px);
  /* pasea por TODO el home, por encima de las secciones pero por
     debajo de menús, pop-ups y chatbot; en puntero fino huye del
     cursor antes de que pueda tapar ningún botón */
  z-index: 40;
  cursor: pointer;
  filter: drop-shadow(0 8px 16px rgba(6, 40, 80, 0.35));
  will-change: transform;
}
/* en táctil no captura toques: nunca bloquea un botón bajo él */
@media (pointer: coarse) {
  .home-duck { pointer-events: none; }
}
.home-duck img { animation: duckBob 4.2s ease-in-out infinite; }
/* el render mira a la izquierda: nadando a la derecha se voltea */
.home-duck.face-right img { transform: scaleX(-1); }
.home-duck.wiggle img { animation: duckWiggle 0.7s ease-in-out; }
@keyframes duckWiggle {
  0%, 100% { rotate: 0deg; scale: 1; }
  25% { rotate: -14deg; scale: 1.08; }
  55% { rotate: 11deg; scale: 1.04; }
  80% { rotate: -5deg; }
}

/* La ficha de producto ya NO vive en esta agua: tiene su propio
   mundo alicatado en pdp-mosaico.css / pdp-mosaico.js. */

/* ============================================================
   5) EL LOGO, A LA LUZ DEL AGUA
   La marca (el patito en su pastilla de agua) vive en styles.css y
   es la misma en toda la web. Lo que cambia aquí es el rótulo: el
   original nace para fondo oscuro, con «zas» en naranja-coral que
   sobre el agua pelea con el azul, así que pasa a blanco con «spa»
   en el amarillo del patito. Solo en el tema día: landings y
   checkout conservan el rótulo original.
   ============================================================ */
/* la marca ya es el patito en toda la web (styles.css); aquí solo se
   ajusta la sombra para que despegue del agua */
html.theme-day .logo-mark {
  filter: drop-shadow(0 5px 10px rgba(7, 48, 90, 0.38));
}
/* el rótulo deja el degradado y pasa a tinta plana: sobre agua en
   movimiento se lee mejor, y así el text-shadow se comporta */
html.theme-day .logo-text,
html.theme-day .page-home .logo-text,
html.theme-day .logo-footer .logo-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(7, 48, 90, 0.45);
}
html.theme-day .logo-text em,
html.theme-day .page-home .logo-text em,
html.theme-day .logo-footer .logo-text em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  background-image: none;
  color: #ffe36b; /* el amarillo del patito */
}
/* la gota que cae al pasar el ratón, a juego con la burbuja */
html.theme-day .logo-mark::after {
  background: linear-gradient(180deg, #8ff5ea, #16bac6);
}

/* ============================================================
   6) ACCESIBILIDAD / MÓVIL
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pool-splash { display: none; }
  .home-duck { display: none; }
}
@media (max-width: 720px) {
  .pool-duck { width: clamp(58px, 16vw, 78px); }
  .pool-logo { font-size: clamp(2.6rem, 12.5vw, 4.4rem); }
  .home-duck { width: clamp(44px, 12vw, 60px); }
}