/* Estilos compartidos de la página principal y de las páginas internas (antes estaban dentro de index.html) */
  html { scroll-behavior: smooth; }
  body { font-family: 'Figtree', sans-serif; }

  /* Real mobile viewport height for the hero — avoids the gap that shows up
     on mobile browsers where 100vh doesn't match the visible area because
     the address bar shows/hides. --vh is kept in sync by JS below. */
  #inicio {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }
  @supports (height: 100svh) {
    #inicio { height: 100svh; }
  }

  ::selection { background: rgb(var(--c-sky)); color: rgb(var(--c-ink)); }

  /* Scroll reveal */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: .12s; }
  .reveal-delay-2 { transition-delay: .24s; }
  .reveal-delay-3 { transition-delay: .36s; }
  .reveal-delay-4 { transition-delay: .48s; }

  /* Underline hover link */
  .link-underline { position: relative; }
  .link-underline::after {
    content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
    background: currentColor; transition: width .4s ease;
  }
  .link-underline:hover::after { width: 100%; }

  .card-zoom img { transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
  .card-zoom:hover img { transform: scale(1.06); }

  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: rgb(var(--c-ink)); }
  ::-webkit-scrollbar-thumb { background: rgb(var(--c-cream) / .25); border-radius: 6px; }

  #mobile-menu { transition: opacity .35s ease, visibility .35s ease; }
  #mobile-menu.hidden-menu { opacity: 0; visibility: hidden; pointer-events: none; }

  #site-header.header-hidden { transform: translateY(-100%); }

  /* Calma emphasis — no entrance animation, just the ongoing soft glow */
  .calma-reveal {
    display: inline-block;
    animation: calma-breathe 3.6s ease-in-out infinite;
  }
  @keyframes calma-breathe {
    0%, 100% { text-shadow: 0 0 10px rgba(178,203,233,0.30), 0 0 2px rgba(178,203,233,0.25); }
    50%      { text-shadow: 0 0 28px rgba(178,203,233,0.70), 0 0 8px rgba(178,203,233,0.45); }
  }
  @media (prefers-reduced-motion: reduce) {
    .calma-reveal { animation: none; }
  }

  .whatsapp-fab {
    animation: fab-glow 3s ease-in-out infinite;
  }
  @keyframes fab-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--c-sky) / 0.45), 0 10px 25px -5px rgba(0,0,0,0.35); }
    50%      { box-shadow: 0 0 0 10px rgb(var(--c-sky) / 0), 0 10px 25px -5px rgba(0,0,0,0.35); }
  }
  @media (prefers-reduced-motion: reduce) {
    .whatsapp-fab { animation: none; }
  }

  .colecciones-scroll { scrollbar-width: thin; scrollbar-color: rgb(var(--c-cream) / .25) transparent; }
  .colecciones-scroll::-webkit-scrollbar { height: 6px; }
  .colecciones-scroll::-webkit-scrollbar-track { background: transparent; }
  .colecciones-scroll::-webkit-scrollbar-thumb { background: rgb(var(--c-cream) / .25); border-radius: 9999px; }

  /* Separador entre secciones: línea + gota de agua */
  .drop-divider {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    color: rgb(var(--c-sky) / 0.8);
  }
  .drop-divider::before, .drop-divider::after {
    content: ''; height: 1px; width: 110px; max-width: 26vw;
  }
  .drop-divider::before { background: linear-gradient(90deg, transparent, rgb(var(--c-sky) / 0.45)); }
  .drop-divider::after  { background: linear-gradient(270deg, transparent, rgb(var(--c-sky) / 0.45)); }

  /* Burbujas suaves en el hero */
  .bubble {
    position: absolute; bottom: -40px; border-radius: 9999px;
    border: 1px solid rgba(178,203,233,0.35);
    background: radial-gradient(circle at 30% 30%, rgba(220,235,255,0.22), rgba(178,203,233,0.04) 70%);
    animation: bubble-rise linear infinite; opacity: 0;
  }
  @keyframes bubble-rise {
    0%   { transform: translate3d(0,0,0); opacity: 0; }
    12%  { opacity: .9; }
    100% { transform: translate3d(var(--dx, 24px), -95vh, 0); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .bubble { display: none; } }

  /* Franja de palabras */
  .marquee { overflow: hidden; }
  .marquee-track { display: flex; width: max-content; animation: marquee 220s linear infinite; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee-track { animation: none; } }

  /* Comparador Día / Noche */
  .dn { --pos: 50%; position: relative; overflow: hidden; border-radius: 1.5rem; background: #0a1f2e; }
  .dn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 58%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
  .dn .dn-day { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .dn-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
  .dn-scene.active { opacity: 1; }
  .dn-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; box-shadow: 0 0 14px rgba(255,255,255,.35); }
  .dn-handle { position: absolute; top: 50%; left: var(--pos); width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 9999px; background: #fff; color: #0f2a3d; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 6px 22px rgba(0,0,0,.35); }
  .dn input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
  .dn-label { transition: opacity .35s ease; }
  .dn.hide-day .dn-label-day, .dn.hide-night .dn-label-night { opacity: 0; }



  /* ============ TEMAS: oscuro (por defecto) y claro ============ */
  :root {
    --c-ink: 15 42 61; --c-ink2: 10 31 46; --c-ink3: 22 56 79;
    --c-cream: 243 237 233; --c-sky: 178 203 233; --c-mist: 220 235 255;
  }
  html[data-theme="light"] {
    --c-ink: 243 237 233; --c-ink2: 233 225 218; --c-ink3: 255 255 255;
    --c-cream: 15 42 61; --c-sky: 14 85 134; --c-mist: 55 134 190;
    color-scheme: light;
  }
  /* Zonas que siempre se quedan oscuras (texto sobre fotos o video) */
  html[data-theme="light"] .theme-dark,
  html[data-theme="light"] #inicio,
  html[data-theme="light"] .card-zoom,
  html[data-theme="light"] #dn,
  html[data-theme="light"] #modal-media {
    --c-ink: 15 42 61; --c-ink2: 10 31 46; --c-ink3: 22 56 79;
    --c-cream: 243 237 233; --c-sky: 178 203 233; --c-mist: 220 235 255;
  }
  /* Bordes definidos con blanco: en claro pasan a ser marino suave */
  html[data-theme="light"] [class*="border-white/"] { border-color: rgb(var(--c-cream) / .14); }
  html[data-theme="light"] .theme-dark [class*="border-white/"],
  html[data-theme="light"] #inicio [class*="border-white/"],
  html[data-theme="light"] .card-zoom [class*="border-white/"],
  html[data-theme="light"] #dn [class*="border-white/"],
  html[data-theme="light"] #modal-media [class*="border-white/"] { border-color: rgba(255,255,255,.18); }
  html[data-theme="light"] .card-fx { box-shadow: 0 1px 2px rgba(15,42,61,.06), 0 8px 24px -16px rgba(15,42,61,.18); }
  html[data-theme="light"] #site-header:not(.theme-dark) #nav-dropdown-panel { background: rgb(var(--c-ink) / .97); }
  /* ---- Modo claro: letra más firme y legible ---- */
  html[data-theme="light"] body { font-weight: 400; }
  html[data-theme="light"] .font-light { font-weight: 400; }
  html[data-theme="light"] .text-cream\/90, html[data-theme="light"] .text-cream\/80, html[data-theme="light"] .text-cream\/75, html[data-theme="light"] .text-cream\/70 { color: rgb(var(--c-cream) / .9); }
  html[data-theme="light"] .text-cream\/65, html[data-theme="light"] .text-cream\/60, html[data-theme="light"] .text-cream\/55, html[data-theme="light"] .text-cream\/50 { color: rgb(var(--c-cream) / .8); }
  html[data-theme="light"] .text-cream\/45, html[data-theme="light"] .text-cream\/40, html[data-theme="light"] .text-cream\/35 { color: rgb(var(--c-cream) / .72); }
  html[data-theme="light"] .text-sky\/40, html[data-theme="light"] .text-sky\/30 { color: rgb(var(--c-sky) / .95); }
  html[data-theme="light"] .text-sky.uppercase, html[data-theme="light"] .uppercase { font-weight: 500; }
  html[data-theme="light"] .text-sky.uppercase { font-weight: 600; }
  html[data-theme="light"] .text-\[10px\] { font-size: 11px; }
  html[data-theme="light"] .text-\[11px\] { font-size: 12px; }
  html[data-theme="light"] .text-xs { font-size: 13px; }
  html[data-theme="light"] .modal-meta dt { color: rgb(var(--c-cream) / .75); font-weight: 500; }
  html[data-theme="light"] .modal-meta dd { font-weight: 500; }
  html[data-theme="light"] .cat-input { border-color: rgb(var(--c-cream) / .45); }
  html[data-theme="light"] .cat-input::placeholder { color: rgb(var(--c-cream) / .6); }

  /* ---- Modo claro: borde navy sutil en etiquetas, botones y objetos ---- */
  html[data-theme="light"] [class*="border-white/"], html[data-theme="light"] [class*="border-cream/"], html[data-theme="light"] [class*="border-sky/"] { border-color: rgb(15 42 61 / .34); }
  html[data-theme="light"] .border-y, html[data-theme="light"] .border-b, html[data-theme="light"] .border-t { border-color: rgb(15 42 61 / .18); }
  html[data-theme="light"] .bg-ink3\/50, html[data-theme="light"] .bg-ink3\/40 { border-color: rgb(15 42 61 / .2); }
  html[data-theme="light"] .chip { border-color: rgb(15 42 61 / .42); }
  html[data-theme="light"] .el-chip.active .chip, html[data-theme="light"] .fx:hover .chip { border-color: rgb(var(--c-sky)); }
  html[data-theme="light"] .social-fx, html[data-theme="light"] .theme-btn { border-color: rgb(15 42 61 / .45); }
  html[data-theme="light"] .drop-divider { color: rgb(var(--c-sky) / .9); }
  /* En las zonas que siguen oscuras los bordes vuelven a ser claros */
  html[data-theme="light"] .theme-dark [class*="border-white/"], html[data-theme="light"] .theme-dark [class*="border-cream/"], html[data-theme="light"] .theme-dark [class*="border-sky/"], html[data-theme="light"] #inicio [class*="border-white/"], html[data-theme="light"] #inicio [class*="border-cream/"], html[data-theme="light"] #inicio [class*="border-sky/"], html[data-theme="light"] .card-zoom [class*="border-white/"], html[data-theme="light"] .card-zoom [class*="border-cream/"], html[data-theme="light"] .card-zoom [class*="border-sky/"], html[data-theme="light"] #dn [class*="border-white/"], html[data-theme="light"] #dn [class*="border-cream/"], html[data-theme="light"] #dn [class*="border-sky/"], html[data-theme="light"] #modal-media [class*="border-white/"], html[data-theme="light"] #modal-media [class*="border-cream/"], html[data-theme="light"] #modal-media [class*="border-sky/"] { border-color: rgba(255,255,255,.3); }


  html[data-theme="light"] .pattern-band { background-image: url('pattern-olas-claro.png'); opacity: .6; }

  /* Logo: versión clara sobre fondo oscuro y versión marino sobre fondo claro */
  .logo-on-light { display: none; }
  html[data-theme="light"] .logo-on-dark { display: none; }
  html[data-theme="light"] .logo-on-light { display: block; }
  html[data-theme="light"] .theme-dark .logo-on-dark { display: block; }
  html[data-theme="light"] .theme-dark .logo-on-light { display: none; }

  /* Transición suave solo mientras se cambia de tema */
  html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease, box-shadow .45s ease !important;
  }

  /* Botón del foquito */
  .theme-btn .bulb-glass { fill: transparent; transition: fill .4s ease, filter .4s ease; }
  .theme-btn .bulb-rays { opacity: 0; transform-origin: 12px 9.5px; transform: scale(.7); transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
  html[data-theme="light"] .theme-btn .bulb-glass { fill: #f2d28b; filter: drop-shadow(0 0 4px rgba(242,210,139,.9)); }
  html[data-theme="light"] .theme-btn .bulb-rays { opacity: 1; transform: scale(1); }
  .theme-btn:hover svg { animation: ico-beat .9s ease-in-out; }
  html[data-theme="light"] #site-header.theme-dark .theme-btn .bulb-glass { fill: #f2d28b; }


  /* Pantallas bajas (laptops chicas): el bloque de texto del inicio se compacta para no tocar el encabezado */
  @media (min-width: 768px) and (max-height: 760px) {
    #inicio h1 { font-size: 62px; line-height: 1.04; }
    #inicio h1 + p { margin-top: 1.25rem; }
    #inicio a.reveal { margin-top: 1.5rem; }
    #inicio p.text-sky { margin-bottom: 1.25rem; }
  }

  /* Menú desplegable: panel casi opaco para que se lea sobre cualquier fondo */
  #nav-dropdown-panel { background: rgb(var(--c-ink) / .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: rgb(var(--c-cream) / .22); box-shadow: 0 24px 48px -16px rgba(0,0,0,.55); padding: .5rem; }
  #nav-dropdown-panel a { color: rgb(var(--c-cream)); font-weight: 500; border-radius: .75rem; padding: .8rem 1.1rem; transition: background-color .25s ease, color .25s ease, padding-left .25s ease; }
  #nav-dropdown-panel a:hover, #nav-dropdown-panel a:focus-visible { background: rgb(var(--c-cream) / .09); color: rgb(var(--c-sky)); padding-left: 1.4rem; outline: none; }

  /* Menú: "Spas Jacuzzi" cuelga de "Catálogo" como una rama con su gota */
  #nav-dropdown-panel a.nav-sub { white-space: nowrap; margin-left: 1.5rem; padding: .55rem 1.1rem .55rem 1rem; border-radius: .75rem; color: rgb(var(--c-sky)); font-weight: 600; }
  #nav-dropdown-panel a.nav-sub svg { flex-shrink: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
  #nav-dropdown-panel a.nav-sub:hover svg, #nav-dropdown-panel a.nav-sub:focus-visible svg { transform: translateY(-2px) scale(1.25); }
  #nav-dropdown-panel a.nav-sub:hover, #nav-dropdown-panel a.nav-sub:focus-visible { padding-left: 1rem; }

  /* Visor 3D: imagen del modelo mientras carga */
  .cat-3d-dot { width: 9px; height: 9px; border-radius: 9999px; background: rgb(var(--c-sky)); animation: cat3dpulse 1.1s ease-in-out infinite; }
  @keyframes cat3dpulse { 0%, 100% { transform: scale(.7); opacity: .45; } 50% { transform: scale(1.15); opacity: 1; } }

  /* Comparar spas */
  .cat-cmp { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
  .cat-cmp[aria-pressed="true"] { background: rgb(var(--c-sky)); border-color: rgb(var(--c-sky)); color: rgb(var(--c-ink)) !important; font-weight: 600; }
  .cat-cmp-row:nth-child(odd) { background: rgb(var(--c-cream) / .04); }

  /* Botón de idioma sobre el hero en tema claro */
  html[data-theme="light"] #site-header.bg-transparent .lang-btn { color: rgb(6 20 33); font-weight: 700; border-color: rgb(6 20 33 / .65); }

  /* WhatsApp siempre visible: también por encima del catálogo */
  html.catalog-open .whatsapp-fab { z-index: 86; }

  /* Mapa del pie de página: se tiñe con los colores del sitio */
  .footer-map { background: rgb(var(--c-ink3) / .5); }
  .footer-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(188deg) saturate(.55) brightness(.92) contrast(.95); }
  html[data-theme="light"] .footer-map iframe { filter: sepia(.35) saturate(.7) hue-rotate(172deg) brightness(.99) contrast(.95); }
  .footer-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgb(40 105 160 / .7); mix-blend-mode: color; }
  html[data-theme="light"] .footer-map::after { background: rgb(205 180 155 / .6); }
  /* en tema oscuro el filtro apaga el pin de Google: se dibuja uno propio en el centro del mapa */
  html:not([data-theme="light"]) .footer-map.has-map::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 30px; height: 40px; transform: translate(-50%, -96%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1C6.5 1 2.5 5 2.5 10.2 2.5 17 12 31 12 31s9.5-14 9.5-20.8C21.5 5 17.5 1 12 1z' fill='%23b2cbe9' stroke='%230f2a3d' stroke-width='1.4'/%3E%3Ccircle cx='12' cy='10.5' r='3.6' fill='%230f2a3d'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

  /* Catálogo: tarjetas de a 2; si queda una sola en la última fila, va centrada */
  .cat-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
  .cat-grid > * { width: 100%; }
  @media (min-width: 640px) { .cat-grid > * { width: calc(50% - .75rem); } }

  /* Compatibilidad con navegadores antiguos (Safari anterior a 15): sin aspect-ratio las cajas de las fotos se colapsaban */
  @supports not (aspect-ratio: 1 / 1) {
    .aspect-\[4\/3\] { height: 0; padding-bottom: 75%; }
    .aspect-\[4\/5\] { height: 0; padding-bottom: 125%; }
    @media (min-width: 640px) { .sm\:aspect-\[16\/10\] { height: 0; padding-bottom: 62.5%; } }
    .cat-cmp-media:not([data-on]) { height: 0; padding-bottom: 75%; }
  }
  /* Alto del visor 3D (con respaldo para navegadores sin la unidad dvh) */
  .viewer-box { height: max(660px, min(86vh, 780px)); height: max(660px, min(86dvh, 780px)); }

  html.cfg-loading-js, html.cfg-loading-js * { cursor: progress !important; }

  /* ============ MARCAS ============ */
  .brand-item { display: flex; align-items: center; justify-content: center; height: 4.5rem; padding: 0 1rem; }
  @media (min-width: 640px) { .brand-item { height: 5.5rem; } }
  .brand-logo { width: auto; height: auto; max-height: 27px; max-width: 62%; object-fit: contain; transition: filter .35s ease, opacity .35s ease, transform .4s ease; }
  @media (min-width: 640px) { .brand-logo { max-height: 33px; } }
  .brand-logo[src$="renolit.png"] { max-height: 50px; }
  @media (min-width: 640px) { .brand-logo[src$="renolit.png"] { max-height: 62px; } }
  /* Sin recuadros: en oscuro los logos se muestran en blanco; en claro, en gris y a color al pasar el cursor */
  html:not([data-theme="light"]) .brand-logo { filter: brightness(0) invert(1); opacity: .72; }
  html:not([data-theme="light"]) .brand-item:hover .brand-logo { opacity: 1; transform: scale(1.05); }
  @media (hover: hover) {
    html[data-theme="light"] .brand-logo { filter: grayscale(1) contrast(1.05); opacity: .78; }
    html[data-theme="light"] .brand-item:hover .brand-logo { filter: none; opacity: 1; transform: scale(1.05); }
  }

  /* Transición suave del hero a la franja: se funde con el color de fondo de la página */
  .hero-fade { position: relative; z-index: 5; pointer-events: none; height: clamp(120px, 20vh, 220px); margin-top: calc(-1 * clamp(120px, 20vh, 220px));
    background: linear-gradient(to bottom, rgb(var(--c-ink) / 0) 0%, rgb(var(--c-ink) / .18) 30%, rgb(var(--c-ink) / .55) 60%, rgb(var(--c-ink) / .88) 85%, rgb(var(--c-ink)) 100%); }

  /* Hero en modo oscuro (video de atardecer, más luminoso): refuerzos de lectura */
  html:not([data-theme="light"]) #site-header.bg-transparent { background-image: linear-gradient(to bottom, rgb(var(--c-ink) / .78), rgb(var(--c-ink) / .42) 62%, rgb(var(--c-ink) / 0)); }
  html:not([data-theme="light"]) #site-header.bg-transparent #nav-dropdown-btn,
  html:not([data-theme="light"]) #site-header.bg-transparent #menu-btn { color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(4,16,28,.7); }
  html:not([data-theme="light"]) #site-header.bg-transparent a[href^="https://wa.me"],
  html:not([data-theme="light"]) #site-header.bg-transparent .theme-btn {
    color: #fff; font-weight: 600; border-color: rgba(255,255,255,.8);
    background-color: rgb(var(--c-ink) / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    text-shadow: 0 1px 6px rgba(4,16,28,.6);
  }
  html:not([data-theme="light"]) #site-header.bg-transparent a[href^="https://wa.me"]:hover,
  html:not([data-theme="light"]) #site-header.bg-transparent .theme-btn:hover { background-color: rgb(var(--c-sky)); color: rgb(var(--c-ink)); text-shadow: none; }
  html:not([data-theme="light"]) #inicio h1, html:not([data-theme="light"]) #inicio p { text-shadow: 0 1px 14px rgba(4,16,28,.55); }
  @media (max-width: 767px) {
    html:not([data-theme="light"]) .hero-ov-b { background-image: linear-gradient(to bottom, rgb(var(--c-ink) / .1) 8%, rgb(var(--c-ink) / .5) 34%, rgb(var(--c-ink) / .58) 76%, rgb(var(--c-ink) / .15)); }
  }

  html:not([data-theme="light"]) #inicio p.text-sky { font-weight: 600; color: rgb(232 243 255); }
  /* ============ HERO según el tema ============ */

  .hero-for-light { display: none; }
  html[data-theme="light"] .hero-for-dark { display: none; }
  html[data-theme="light"] .hero-for-light { display: block; }
  /* En claro, el hero no lleva velos: el video se ve limpio. Como el agua es oscura, el texto va claro con sombra suave */
  html[data-theme="light"] #inicio {
    --c-ink: 15 42 61; --c-ink2: 10 31 46; --c-ink3: 22 56 79;
    --c-cream: 255 255 255; --c-sky: 238 246 255; --c-mist: 220 235 255;
  }
  html[data-theme="light"] .hero-ov-a { background-image: linear-gradient(to top, rgb(10 31 46 / .30), rgb(10 31 46 / 0) 40%); }
  html[data-theme="light"] .hero-ov-b { background-image: linear-gradient(to right, rgb(10 31 46 / .38) 0%, rgb(10 31 46 / .18) 40%, rgb(10 31 46 / 0) 68%); }
  html[data-theme="light"] .hero-for-light { filter: saturate(1.15) contrast(1.04); }
  html[data-theme="light"] #site-header.bg-transparent #nav-dropdown-btn { font-weight: 600; color: rgb(6 20 33); }
  html[data-theme="light"] #site-header.bg-transparent a[href^="https://wa.me"] { font-weight: 600; color: rgb(6 20 33); border-color: rgb(6 20 33 / .65); }
  html[data-theme="light"] #site-header.bg-transparent .theme-btn { border-color: rgb(6 20 33 / .65); }
  html[data-theme="light"] #inicio h1 { font-weight: 500; text-shadow: 0 2px 22px rgba(4,16,28,.55), 0 1px 3px rgba(4,16,28,.45); }
  html[data-theme="light"] #inicio h1 .calma-reveal { font-weight: 600; }
  html[data-theme="light"] #inicio p { font-weight: 500; text-shadow: 0 1px 14px rgba(4,16,28,.7), 0 1px 3px rgba(4,16,28,.5); }
  html[data-theme="light"] #inicio p.text-sky { font-weight: 700; }
  html[data-theme="light"] #inicio a.reveal { font-weight: 500; border-color: rgba(255,255,255,.7); text-shadow: 0 1px 8px rgba(4,16,28,.6); }

  /* ============ PANTALLA DE ENTRADA (logo + gota) ============ */
  #preloader {
    position: fixed; inset: 0; z-index: 100; background: #0a1f2e;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .9s ease, visibility .9s ease;
    cursor: pointer;
  }
  #preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
  .pl-stage { position: relative; width: min(74vw, 520px); }
  .pl-word {
    display: block; width: 100%; height: auto; clip-path: inset(0 100% 0 0);
    animation: pl-write 1.5s cubic-bezier(.65,0,.35,1) .35s forwards,
               pl-dissolve 1.15s ease-in 2.6s forwards;
  }
  @keyframes pl-write { to { clip-path: inset(0 0 0 0); } }
  @keyframes pl-dissolve {
    /* el recorte de la escritura se abre para que el desenfoque no quede cortado como un cuadro */
    0%   { clip-path: inset(-120px); filter: blur(0); opacity: 1; transform: scale(1); }
    100% { clip-path: inset(-120px); filter: blur(22px); opacity: 0; transform: scale(1.07); }
  }
  .pl-drop {
    position: absolute; left: 50%; top: 36%; width: clamp(26px, 4vw, 40px); margin-left: calc(clamp(26px, 4vw, 40px) / -2); opacity: 0;
    transform: translateY(-60vh);
    animation: pl-fall .8s cubic-bezier(.55,0,.9,.55) 1.85s forwards;
    filter: drop-shadow(0 0 8px rgba(178,203,233,.6));
  }
  @keyframes pl-fall {
    0%   { opacity: 0; transform: translateY(-60vh) scaleY(1.3); }
    10%  { opacity: 1; }
    90%  { opacity: 1; transform: translateY(0) scaleY(1); }
    100% { opacity: 0; transform: translateY(6px) scale(.5); }
  }
  .pl-ring {
    position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border: 1.5px solid rgba(178,203,233,.75); border-radius: 9999px; opacity: 0;
    animation: pl-ring 1.5s ease-out 2.55s forwards;
  }
  .pl-ring.r2 { animation-delay: 2.8s; border-color: rgba(178,203,233,.5); }
  @keyframes pl-ring { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(11); } }
  .pl-mono {
    position: absolute; left: 50%; top: 50%; width: clamp(96px, 16vw, 132px); height: auto;
    transform: translate(-50%, -50%) scale(.85); opacity: 0; filter: blur(14px);
    animation: pl-mono 1s ease-out 2.8s forwards;
  }
  @keyframes pl-mono { to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .pl-word, .pl-drop, .pl-ring { display: none; }
    .pl-mono { animation-delay: 0s; animation-duration: .4s; }
  }

  /* ============ INTERACTIVIDAD: íconos, símbolos y etiquetas ============ */
  .chip { transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
  .fx:hover .chip, .fx:focus-visible .chip, .fx:active .chip, .fx.active .chip {
    transform: translateY(-4px) scale(1.07); border-color: rgb(var(--c-sky));
    background-color: rgb(var(--c-sky) / 0.1); box-shadow: 0 0 26px rgb(var(--c-sky) / 0.25);
  }
  .fx { cursor: pointer; }
  .fx svg { transform-box: fill-box; transform-origin: center; }
  .fx:hover [data-ico], .fx:active [data-ico], .fx.active [data-ico] { animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; }
  .fx[data-anim=drop]:hover svg, .fx[data-anim=drop].active svg { animation: ico-drip .9s ease; }
  .fx[data-anim=sun]:hover svg,  .fx[data-anim=sun].active svg  { animation: ico-spin 1.4s ease-in-out; }
  .fx[data-anim=moon]:hover svg, .fx[data-anim=moon].active svg { animation: ico-sway 1.2s ease-in-out; }
  .fx[data-anim=waves]:hover svg                                 { animation: ico-wave 1.1s ease-in-out; }
  .fx[data-anim=lotus]:hover svg                                 { animation: ico-bloom 1s ease-in-out; }
  .fx[data-anim=heart]:hover svg                                 { animation: ico-beat 1s ease-in-out; }
  .fx[data-anim=stone]:hover svg, .fx[data-anim=stone].active svg { animation: ico-roll 1.1s ease-in-out; }
  .fx[data-anim=heat]:hover svg,  .fx[data-anim=heat].active svg  { animation: ico-rise 1.1s ease-in-out; }
  .fx[data-anim=space]:hover svg, .fx[data-anim=space].active svg { animation: ico-expand 1s ease-in-out; }
  .fx[data-anim=compass]:hover svg { animation: ico-spin 1.6s ease-in-out; }
  .fx[data-anim=shield]:hover svg  { animation: ico-beat .9s ease-in-out; }
  svg.fx[data-anim=heart]:hover { animation: ico-beat 1s ease-in-out; }
  svg.fx[data-anim=lotus]:hover { animation: ico-bloom 1s ease-in-out; }
  .dn-sun svg { animation: ico-spin 20s linear infinite; }
  .dn-moon svg { animation: ico-sway 7s ease-in-out infinite; }
  @keyframes ico-drip   { 0% { transform: translateY(0); } 30% { transform: translateY(-7px) scaleY(1.12); } 60% { transform: translateY(4px) scaleY(.92); } 80% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
  @keyframes ico-spin   { to { transform: rotate(360deg); } }
  @keyframes ico-sway   { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(14deg); } }
  @keyframes ico-wave   { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
  @keyframes ico-bloom  { 0%,100% { transform: scale(1); } 45% { transform: scale(1.28) translateY(-2px); } }
  @keyframes ico-beat   { 0%,100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(.94); } 60% { transform: scale(1.18); } }
  @keyframes ico-roll   { 0%,100% { transform: rotate(0); } 50% { transform: rotate(24deg) translateX(2px); } }
  @keyframes ico-rise   { 0% { transform: translateY(2px); opacity: .6; } 50% { transform: translateY(-5px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
  @keyframes ico-expand { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }

  /* Tarjetas: elevan y se iluminan al pasar */
  .card-fx { transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .35s ease, background-color .35s ease, box-shadow .35s ease; }
  .card-fx:hover { transform: translateY(-6px); border-color: rgb(var(--c-sky) / 0.35); background-color: rgb(var(--c-ink3) / .8); box-shadow: 0 18px 40px -18px rgba(0,0,0,.35), 0 0 30px -10px rgb(var(--c-sky) / 0.25); }
  .card-fx:hover .chip-inline { transform: scale(1.1); }

  /* Etiquetas pequeñas: se abren al pasar el cursor */
  p.text-sky.uppercase { transition: letter-spacing .5s ease, color .3s ease; }
  p.text-sky.uppercase:hover { letter-spacing: .36em; color: rgb(var(--c-mist)); }

  /* Franja de palabras: pausa y resalta */
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .mq-pill { transition: border-color .3s ease, background-color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
  .mq-pill:hover { border-color: rgb(var(--c-sky)); background-color: rgb(var(--c-sky) / .08); transform: translateY(-2px); }

  /* Divisor con gota */
  .drop-divider { cursor: pointer; }
  .drop-divider:hover svg { animation: ico-drip .9s ease; }

  /* Descripción dinámica de los cinco elementos */
  #el-desc { transition: opacity .25s ease, transform .25s ease; }
  #el-desc.swap { opacity: 0; transform: translateY(4px); }
  .el-chip.active span { color: rgb(var(--c-sky)); }

  /* Redes: giro y elevación */
  .social-fx { transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .3s ease, border-color .3s ease, background-color .3s ease; }
  .social-fx:hover { transform: translateY(-4px) rotate(-8deg) scale(1.1); background-color: rgb(var(--c-sky) / 0.1); }

  /* Onda al hacer clic o tocar en cualquier parte */
  .tap-ring {
    position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 9999px;
    border: 1.5px solid rgb(var(--c-sky) / 0.85); pointer-events: none; z-index: 90;
    animation: tap-ring .85s ease-out forwards;
  }
  @keyframes tap-ring { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(7); } }
  @media (prefers-reduced-motion: reduce) { .tap-ring { display: none; } .fx svg, .drop-divider svg { animation: none !important; } }

  /* Tarjetas de colecciones: en pantallas táctiles, un toque muestra la descripción */
  .card-zoom.open p { opacity: 1 !important; }


  /* ============ VENTANA DE DETALLE (proyectos y colecciones) ============ */
  #modal { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
  #modal.open { opacity: 1; visibility: visible; }
  #modal-panel { transform: translateY(20px) scale(.98); transition: transform .5s cubic-bezier(.22,1,.36,1); }
  #modal.open #modal-panel { transform: none; }
  html.modal-open { overflow: hidden; }
  #modal-img { transition: opacity .3s ease; }
  #modal-body.swap { opacity: 0; transform: translateY(6px); }
  #modal-body { transition: opacity .25s ease, transform .25s ease; }
  .modal-meta dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--c-cream) / .55); }
  .modal-meta dd { margin-top: 4px; font-size: 14px; color: rgb(var(--c-cream)); }
  .proj-plus { transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, color .3s ease; }
  .card-zoom:hover .proj-plus { transform: rotate(90deg) scale(1.1); background-color: rgb(var(--c-sky)); color: rgb(var(--c-ink)); }
  @media (hover: none) {
    #proyectos .card-zoom > p { opacity: 1 !important; }
  }


  /* ============ GALERÍA DE LA VENTANA + CATÁLOGO ============ */
  .gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
  .gal img.on { opacity: 1; }
  #catalog { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; overscroll-behavior: contain; }
  #catalog.open { opacity: 1; visibility: visible; }
  #cat-view { transition: opacity .25s ease, transform .25s ease; }
  #cat-view.swap { opacity: 0; transform: translateY(8px); }
  .cat-input { width: 100%; border-radius: 9999px; background: rgb(var(--c-ink) / .6); border: 1px solid rgb(var(--c-cream) / .18); padding: 14px 20px; font-size: 14px; color: rgb(var(--c-cream)); outline: none; transition: border-color .25s ease; }
  .cat-input::placeholder { color: rgb(var(--c-cream) / .4); }
  .cat-input:focus { border-color: rgb(var(--c-sky)); }
  .cat-input.err { border-color: #e59a9a; }
  .cat-thumb { transition: opacity .3s ease, border-color .3s ease; opacity: .55; border: 2px solid transparent; }
  .cat-thumb.on, .cat-thumb:hover { opacity: 1; border-color: rgb(var(--c-sky)); }

  /* Patrón gráfico oficial del manual de identidad */
  .pattern-band {
    height: 168px;
    background: url('pattern-olas.png') repeat-x center top / auto 240px;
    opacity: .5;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
            mask-image: linear-gradient(to bottom, transparent, #000 55%);
  }

/* Spas PW: fotos de la tarjeta que cambian, selector de color */
.pw-cov img { opacity: 0; transition: opacity 1s ease; }
.pw-cov img.on { opacity: 1; }
.pw-dot { display: inline-block; width: 11px; height: 11px; border-radius: 9999px; border: 1px solid rgb(var(--c-cream) / .35); }
.pw-sw { width: 38px; height: 38px; border-radius: 9999px; border: 2px solid rgb(var(--c-cream) / .3); transition: transform .25s, box-shadow .25s, border-color .25s; cursor: pointer; }
.pw-sw:hover { transform: scale(1.08); }
.pw-sw.on { border-color: rgb(var(--c-sky)); box-shadow: 0 0 0 3px rgb(var(--c-sky) / .3); transform: scale(1.08); }