:root{
    --bg:#ECE3D5;
    --card:rgba(255,255,255,.86);
    --ink:#3B2F2A;
    --muted:#8a7568;
    --accent:#3B2F2A;
    --accent-dark:#241c17;
    --btn-text:#fff;
    --blush:#ECE3D5;
    --gold:#D8C8B5;
    --gold-shine:201,162,39;
    --border:#e6dccf;
    --header-bg:rgba(236,227,213,0.92);
    --surface:#ffffff;
    --radius:18px;
    /* Texto DENTRO de las tarjetas de vidrio (siempre claras/translúcidas en los 2 temas) --
       fijo, no cambia con el modo claro/oscuro, para que el texto siga siendo legible sobre
       el vidrio blanco aunque el resto de la página se oscurezca. */
    --on-glass:#3B2F2A;
    --on-glass-muted:#8a7568;
    /* Fondo/borde compartido por TODAS las tarjetas de vidrio (hero-content, servicio-card,
       producto-card, reservar-box) -- en modo claro es translúcido de verdad
       (depende del fondo/blobs detrás para dar color vía backdrop-filter). */
    --glass-bg:linear-gradient(155deg, rgba(255,255,255,.58), rgba(255,255,255,.16) 45%, rgba(255,255,255,.3) 100%), rgba(255,255,255,.4);
    --glass-border:rgba(255,255,255,.55);
  }
  /* Modo oscuro: solo alterna los colores de la página (fondo/texto/botones) -- las tarjetas de
     vidrio se quedan traslúcidas/claras en los 2 modos (mismo criterio que un panel de vidrio
     esmerilado real: se ve bien flotando sobre cualquier fondo), por eso --on-glass no cambia. */
  :root[data-theme="dark"]{
    --bg:#1B1512;
    --ink:#F3EAE1;
    --muted:#c9b8a6;
    --accent:#D8C8B5;
    --accent-dark:#c2af95;
    --btn-text:#241c17;
    --blush:#3a2e27;
    --border:rgba(255,255,255,.14);
    --header-bg:rgba(27,21,18,0.85);
    --surface:#2a211c;
    /* Bug real reportado por el usuario (4-ago-2026, con captura): las tarjetas de vidrio
       quedaban gris/plateado sin vida en modo oscuro -- el gradiente blanco translúcido
       dependía de que hubiera algo cálido detrás para que backdrop-filter le diera color, y en
       secciones lejos de los blobs dorados no había nada cálido que "mezclar" (blanco casi
       transparente + fondo casi negro = gris plano). Arreglado con un gradiente crema mucho más
       opaco (no depende del fondo) -- la tarjeta pasa a ser un panel crema sólido "flotando"
       sobre el fondo oscuro, en vez de un vidrio casi invisible. */
    --glass-bg:linear-gradient(155deg, rgba(247,240,229,.95), rgba(238,227,208,.88) 45%, rgba(243,234,219,.92) 100%), rgba(241,232,217,.9);
    --glass-border:rgba(216,200,181,.45);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  .reveal{opacity:0;transform:translateY(56px) scale(.96);filter:blur(7px);transition:opacity 1.1s cubic-bezier(.2,.7,.3,1),transform 1.1s cubic-bezier(.2,.7,.3,1),filter 1.1s cubic-bezier(.2,.7,.3,1);}
  .reveal.visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}

  /* Velo de seda: un panel color crema/dorado cubre la sección y se retrae como una cortina —
     alterna izquierda→derecha y derecha→izquierda entre secciones (nunca desde el medio) — se
     repite cada vez que se entra o sale de la sección, no solo la primera vez. */
  /* El velo ya NO se anima con una transición de duración fija -- su scaleX/opacity se
     setean directo desde JS en cada scroll, atados 1:1 a cuánto se scrolleó la sección
     (ver updateVeilScrub), para que se "deshaga" al mismo ritmo que el gesto de scroll. */
  /* Colores fijos (no var(--ink)) a propósito -- la cortina siempre es marrón oscura, sin
     importar el tema activo, mismo criterio que las tarjetas de vidrio (superficie decorativa
     con su propio color, no texto de la página). */
  .silk-veil{position:absolute;inset:0;background:linear-gradient(90deg, #2c211c, #3B2F2A 65%);z-index:5;pointer-events:none;transform-origin:right center;transform:scaleX(1);opacity:1;box-shadow:inset -16px 0 28px -10px rgba(0,0,0,.35);}
  .silk-veil[data-dir="rtl"]{transform-origin:left center;background:linear-gradient(270deg, #2c211c, #3B2F2A 65%);box-shadow:inset 16px 0 28px -10px rgba(0,0,0,.35);}

  /* Línea dorada en el borde superior de cada sección — barre en la MISMA dirección que el
     velo de seda de esa sección (izquierda→derecha o derecha→izquierda), nunca desde el centro.
     Ya NO tiene transición CSS propia -- su width se setea en cada frame de scroll con el
     mismo "progress" que usa el velo hermano (ver updateVeilScrub), para que ambos avancen
     exactamente sincronizados al mismo ritmo del scroll. */
  .scan-line{position:absolute;top:0;left:0;width:0;height:2px;z-index:6;pointer-events:none;background:linear-gradient(90deg, transparent, rgb(var(--gold-shine)), var(--gold) 55%, transparent);box-shadow:0 0 28px 4px rgba(var(--gold-shine),.7);}
  .scan-line[data-dir="rtl"]{left:auto;right:0;}

  /* Entrada inicial de la página: al cargar, solo se ve la foto del hero — el header y el
     contenido del hero aparecen después, en cascada de izquierda a derecha y de arriba hacia
     abajo (se dispara una sola vez, no se repite con el scroll). */
  .intro-item{opacity:0;transform:translateY(-16px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
  .intro-item.intro-show{opacity:1;transform:translateY(0);}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;filter:none;transition:none;}
    .silk-veil{display:none;}
    .scan-line{display:none;}
    .intro-item{opacity:1;transform:none;transition:none;}
  }
  body{margin:0;font-family:'Montserrat',Arial,sans-serif;color:var(--ink);}
  h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;letter-spacing:.01em;}
  h1,h2{text-shadow:0 0 26px rgba(var(--gold-shine),.4),0 0 6px rgba(var(--gold-shine),.22);}
  .script{font-family:'Alex Brush',cursive;font-size:1.7em;line-height:1;color:var(--on-glass);text-shadow:0 0 18px rgba(var(--gold-shine),.4);}

  /* Fondo de toda la página (detrás de todas las secciones, no solo el Home): color base del
     tema + 3 manchas de luz FIJAS (sin animación/mouse/click, no es el efecto líquido que se
     quitó antes) en tonos de marca -- le dan a las tarjetas de vidrio algo que reflejar/blurear,
     que es lo que hace que el Home se vea "vidrio de verdad" y las demás tarjetas antes se
     vieran planas (blureaban un color liso, sin nada que distorsionar). */
  .page-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:var(--bg);}
  .page-bg::before,.page-bg::after,.page-bg .blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;}
  .page-bg::before{content:'';width:560px;height:560px;top:-140px;left:-100px;background:radial-gradient(circle, rgba(216,200,181,.85), transparent 70%);opacity:.6;}
  .page-bg::after{content:'';width:620px;height:620px;bottom:-180px;right:-140px;background:radial-gradient(circle, rgba(201,162,39,.28), transparent 70%);opacity:.55;}
  .page-bg .blob{width:480px;height:480px;top:38%;left:50%;transform:translateX(-50%);background:radial-gradient(circle, rgba(59,47,42,.16), transparent 70%);opacity:.5;}

  section,footer{position:relative;z-index:0;}
  svg[stroke="currentColor"]{width:1.1em;height:1.1em;vertical-align:-0.18em;}
  a{color:inherit;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

  /* El header ya NO es sticky a pedido del usuario: solo debe verse al principio (Home),
     no quedar pegado arriba al hacer scroll a otras secciones — con position:static scrolea
     con el resto de la página y desaparece de forma natural. */
  header{position:static;z-index:50;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
  nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1120px;margin:0 auto;flex-wrap:wrap;gap:12px;}

  /* Menú hamburguesa (solo mobile) -- oculto en desktop, aparece por debajo de 860px
     reemplazando los links/botones que ahí se ocultan (ver media query más abajo). Mismo
     mecanismo de 3 líneas -> X ya usado en otros proyectos del usuario, con la paleta propia
     de Kuky's Glow en vez de copiar el navy de la referencia. */
  .navbar-mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;z-index:101;position:relative;}
  .navbar-mobile-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s ease,opacity .25s ease;}
  .navbar-mobile-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .navbar-mobile-toggle.open span:nth-child(2){opacity:0;}
  .navbar-mobile-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .navbar-mobile-menu{display:none;flex-direction:column;gap:4px;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background:var(--surface);padding:90px 28px 28px;overflow-y:auto;}
  .navbar-mobile-menu.open{display:flex;}
  /* Botón de cerrar propio DENTRO del panel -- el ícono de 3 líneas del header queda tapado
     por este mismo panel al abrirse (z-index más alto), así que hace falta una forma de cerrar
     que no dependa de volver a encontrar ese botón. */
  .navbar-mobile-menu-close{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .navbar-mobile-menu a{color:var(--ink);text-decoration:none;font-size:17px;padding:14px 2px;border-bottom:1px solid var(--border);}
  /* .navbar-mobile-menu a{color:var(--ink)} de arriba es más específico que .btn-primary{color},
     así que sin este color explícito el texto del botón queda del mismo color que su propio
     fondo (invisible) -- bug real reportado por el usuario con captura, en los 2 temas. */
  .navbar-mobile-menu a.btn{display:block;border-bottom:none;text-align:center;margin-top:14px;color:var(--btn-text);}
  @media (prefers-reduced-motion:reduce){ .navbar-mobile-toggle span{transition:none;} }

  /* Subrayado dorado animado en los links del menú: se dibuja de izquierda a derecha al pasar
     el mouse (nunca existió ningún hover en el nav antes de esto). */
  .navlinks a{position:relative;text-decoration:none;color:inherit;padding-bottom:2px;}
  .navlinks a::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.3,.7,.3,1);}
  .navlinks a:hover::after{transform:scaleX(1);}
  @media (prefers-reduced-motion:reduce){ .navlinks a::after{transition:none;} }

  /* Brillo dorado que recorre lentamente el texto de los títulos grandes (h1 del hero, h2 de
     cada sección) -- un sutil "shimmer" continuo, independiente del reveal de scroll (que sigue
     igual), solo CSS, sin JS. */
  .shimmer-text{background:linear-gradient(100deg, var(--ink) 30%, rgb(var(--gold-shine)) 47%, var(--ink) 64%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmerMove 7s ease-in-out infinite;}
  @keyframes shimmerMove{ 0%{background-position:200% 0;} 100%{background-position:-50% 0;} }
  @media (prefers-reduced-motion:reduce){ .shimmer-text{animation:none;-webkit-text-fill-color:var(--ink);background:none;} }

  /* Rebote del ícono de carrito al agregar un producto (se dispara solo desde el click de
     "Agregar", no cada vez que se re-renderiza el carrito -- así no rebota al abrir/cerrar
     el drawer o cambiar de idioma). Y burbuja del contador con un pequeño "pop". */
  .cart-btn.bounce{animation:cartBounce .5s cubic-bezier(.34,1.56,.64,1);}
  @keyframes cartBounce{ 0%{transform:scale(1);} 30%{transform:scale(1.22) rotate(-8deg);} 55%{transform:scale(.94) rotate(5deg);} 100%{transform:scale(1) rotate(0);} }
  .cart-count.pop{animation:countPop .4s ease;}
  @keyframes countPop{ 0%{transform:scale(1);} 50%{transform:scale(1.5);background:var(--gold);} 100%{transform:scale(1);} }
  @media (prefers-reduced-motion:reduce){ .cart-btn.bounce,.cart-count.pop{animation:none;} }

  /* Botón "volver arriba" con anillo de progreso dorado que se llena según cuánto se scrolleó
     la página (0% arriba del todo, 100% al llegar al fondo). Aparece recién después de bajar
     un poco, para no competir con el hero. */
  #btnArriba{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--surface, #fff);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80;box-shadow:0 6px 20px rgba(59,47,42,.25);}
  #btnArriba.visible{opacity:1;pointer-events:auto;}
  #btnArriba svg{position:absolute;inset:0;transform:rotate(-90deg);}
  #btnArriba svg circle{fill:none;stroke-width:3;}
  #btnArriba svg circle.fondo{stroke:rgba(178,133,26,.18);}
  #btnArriba svg circle.progreso{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .1s linear;}
  #btnArriba .flecha{position:relative;color:var(--ink);}
  @media (prefers-reduced-motion:reduce){ #btnArriba{transition:none;} }

  /* Íconos de Servicios que se dibujan solos (efecto "line-draw") cuando la tarjeta entra en
     pantalla -- usa pathLength="1" en cada <path> del SVG (normaliza el largo real a 1, sin
     tener que medirlo a mano), así stroke-dasharray/dashoffset funcionan igual sin importar
     la forma. Reusa la misma clase .visible que ya pone observadorReveal, no hace falta un
     observer aparte. */
  .servicio-card svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1);}
  .servicio-card.visible svg path{stroke-dashoffset:0;transition-delay:.35s;}
  @media (prefers-reduced-motion:reduce){ .servicio-card svg path{stroke-dashoffset:0;transition:none;} }

  /* Cursor parpadeante durante el efecto máquina de escribir del texto cursivo del hero. */
  .script.typing-cursor{border-right:2px solid var(--gold);animation:cursorBlink .8s step-end infinite;}
  @keyframes cursorBlink{ 50%{border-color:transparent;} }
  .logo-img{height:42px;width:auto;display:block;}
  /* Los logos son un wordmark marrón oscuro sobre fondo transparente -- en modo oscuro casi
     desaparecen contra el fondo oscuro de la página. Se recolorean a blanco con un filtro CSS
     (mismo truco ya usado con el logo de iVot en Cocina/Admin del otro proyecto), no se crea
     ningún archivo de logo nuevo. Solo aplica donde el logo flota sobre el fondo de la página
     (header y el título de Tienda) -- nunca dentro de una tarjeta de vidrio, que se queda clara
     en los 2 temas. */
  :root[data-theme="dark"] .logo-img{filter:brightness(0) invert(1);}
  .navlinks{display:flex;gap:24px;font-size:14px;flex-wrap:wrap;}
  .navlinks a{text-decoration:none;color:var(--ink);opacity:.8;}
  .navlinks a:hover{opacity:1;}
  .cart-btn{position:relative;background:none;border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--ink);}
  .cart-count{background:var(--accent);color:var(--btn-text);border-radius:999px;font-size:11px;padding:1px 7px;}
  .lang-switch,.theme-switch{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;width:fit-content;}
  .lang-btn,.theme-btn{background:none;border:none;padding:7px 12px;font-size:12px;cursor:pointer;color:var(--muted);font-family:'Montserrat',sans-serif;}
  /* Estas 2 píldoras siempre usan el mismo par marrón-oscuro/blanco fijo cuando están activas
     (no los tokens de tema) -- son botones sólidos autocontenidos, se ven bien flotando sobre
     cualquiera de los 2 fondos, y así no hay que preocuparse de que "ink" cambie de color. */
  .lang-btn.active,.theme-btn.active{background:#3B2F2A;color:#fff;}

  /* Sin foto de fondo por defecto (pedido explícito del usuario, 07-ago-2026) -- el Home queda
     con solo el degradado de color de marca hasta que la dueña suba su propia foto desde
     Admin > "Foto de fondo del Home" (ver heroBg en app.js/core.js, ya construido). */
  .hero{position:relative;padding:0;min-height:100vh;min-height:100dvh;display:flex;align-items:center;background:linear-gradient(180deg, var(--bg), var(--blush) 92%);}
  @media (max-width:860px){ .hero{background-attachment:scroll;} } /* fixed+cover puede saltar en Safari iOS */

  /* Tarjeta "vidrio líquido" del hero -- antes solo mobile tenía caja (para no pisar el logo
     grabado en la pared) y desktop dejaba el texto flotando libre directo sobre la foto, lo
     que ocupaba demasiado alto de la pantalla principal. Ahora la misma tarjeta de vidrio
     pulido aplica en los 2 tamaños: gradiente diagonal + blur + borde/sombra interior que
     simulan un reflejo real de vidrio (no un panel plano opaco), y tipografía/espaciados más
     chicos en toda la tarjeta para que ocupe bastante menos espacio, sobre todo en desktop. */
  .hero-content{
    position:relative;z-index:2;text-align:center;width:100%;max-width:440px;margin:0 auto;
    padding:26px 28px;
    background:var(--glass-bg);
    backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
    border:1px solid var(--glass-border);border-radius:26px;
    box-shadow:0 14px 40px rgba(59,47,42,.22), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(59,47,42,.06);
  }
  .hero h1{font-size:29px;line-height:1.2;margin:0 0 10px;color:var(--on-glass);}
  .hero p{color:var(--on-glass);font-size:14.5px;max-width:400px;margin:0 auto 20px;}
  @media (max-width:859px){ .hero-content{margin:0 20px;} }
  @media (min-width:860px){
    .hero-content{
      position:absolute;top:50%;right:6%;transform:translateY(-50%);
      text-align:right;max-width:380px;margin:0;
    }
    .hero h1{font-size:33px;}
    .hero p{margin:0 0 20px;margin-left:auto;}
    .hero-actions{justify-content:flex-end;}
    .hero-features{justify-content:flex-end;text-align:right;}
  }
  .hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  .btn{display:inline-block;padding:12px 24px;border-radius:999px;font-size:13.5px;text-decoration:none;cursor:pointer;border:none;font-family:'Montserrat',sans-serif;}
  .btn-primary{background:var(--accent);color:var(--btn-text);}
  .btn-primary:hover{background:var(--accent-dark);}
  .btn-primary:disabled{background:#ccc;color:#888;cursor:not-allowed;}
  .btn-outline{background:transparent;border:1px solid var(--on-glass);color:var(--on-glass);}
  .btn-nav{background:var(--ink);color:var(--btn-text);padding:9px 20px;border-radius:999px;font-size:13px;text-decoration:none;}

  /* Botones "magnéticos": en mouse/desktop, se deslizan levemente hacia el cursor cuando se
     acercan y vuelven a su lugar al alejarse -- solo un pequeño toque premium, no cambia nada
     de la estructura/estilo ya aprobado, y en touch se comportan como botones normales. La
     transición de "vuelta al centro" es más lenta (elástica) que el seguimiento del cursor. */
  .magnetic{transition:transform .25s cubic-bezier(.2,.8,.3,1.4), background .2s, border-color .2s;will-change:transform;}
  .contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;}
  .ig-link{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;border:1px solid var(--border);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;}
  .ig-link:hover{border-color:var(--gold);color:var(--gold);}
  @media (prefers-reduced-motion:reduce){ .magnetic{transition:background .2s, border-color .2s;} }

  /* Tira de marquee dorada entre el Home y Servicios -- una franja angosta que desliza texto
     de marca en loop continuo, sin corte visible (el contenido se duplica una vez). Se pausa
     al pasar el mouse. */
  .marquee-strip{position:relative;z-index:1;overflow:hidden;padding:13px 0;background:linear-gradient(90deg, rgba(178,133,26,.14), rgba(178,133,26,.05) 50%, rgba(178,133,26,.14));border-top:1px solid rgba(178,133,26,.28);border-bottom:1px solid rgba(178,133,26,.28);}
  .marquee-track{display:flex;width:max-content;gap:0;animation:marqueeScroll 32s linear infinite;}
  .marquee-strip:hover .marquee-track{animation-play-state:paused;}
  .marquee-track span{display:flex;align-items:center;gap:10px;padding:0 22px;font-family:'Playfair Display',Georgia,serif;font-size:14px;letter-spacing:.03em;color:var(--ink);white-space:nowrap;}
  .marquee-track span::after{content:'✦';color:var(--gold);font-size:11px;margin-left:22px;}
  @keyframes marqueeScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;overflow-x:auto;} }

  .hero-features{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:20px;font-size:12px;color:var(--on-glass);font-weight:500;}
  .hero-features span{display:flex;align-items:center;gap:7px;}
  .hero-features svg{color:var(--on-glass);}

  /* Acabado "vidrio cristal" del Home aplicado a todos los widgets/tarjetas del sitio: gradiente
     diagonal + blur fuerte + borde/sombra interior que simulan un reflejo real de vidrio, en vez
     del vidrio liviano que tenían antes (mismo estilo que .hero-content). */

  .servicios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;align-items:stretch;}
  .servicio-card{background:var(--glass-bg);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--glass-border);border-radius:var(--radius);padding:28px 26px;text-align:left;box-shadow:0 14px 40px rgba(59,47,42,.22), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(59,47,42,.06);color:var(--on-glass);}
  .servicio-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .servicio-card svg{color:var(--on-glass);width:32px;height:32px;flex-shrink:0;}
  .servicio-card h3{margin:0;font-size:19px;}
  .servicio-card-desc{font-size:13.5px;color:var(--on-glass-muted);line-height:1.6;margin:0 0 16px;}
  .servicio-lista{list-style:none;margin:0;padding:0;}
  .servicio-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(59,47,42,.16);}
  .servicio-item:last-child{border-bottom:none;padding-bottom:0;}
  .s-nombre{font-weight:600;font-size:14.5px;flex:1;min-width:0;}
  .s-nota{display:block;font-size:12px;font-weight:400;color:var(--on-glass-muted);margin-top:1px;}
  .s-dur{font-size:12px;color:var(--on-glass-muted);white-space:nowrap;}
  .s-precio{font-weight:700;font-size:14.5px;white-space:nowrap;margin-left:auto;}

  .trabajo-galeria{margin-top:56px;}
  .trabajo-titulo{text-align:center;font-size:32px;margin:0 0 22px;}
  /* Cinta continua: .trabajo-marquee recorta (overflow:hidden), .trabajo-marquee-track lleva
     las fotos DUPLICADAS una vez seguidas y se desliza con translateX(0 -> -50%) en loop --
     como la segunda mitad es idéntica a la primera, el punto donde vuelve a 0% es invisible,
     se ve como una cinta infinita sin salto. Pausa al pasar el mouse (misma cortesía que ya
     usan los demás carruseles del sitio) y respeta "reducir movimiento" del sistema. */
  .trabajo-marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
  .trabajo-marquee-track{display:flex;gap:14px;width:max-content;animation:trabajo-scroll 32s linear infinite;}
  .trabajo-marquee:hover .trabajo-marquee-track{animation-play-state:paused;}
  .trabajo-marquee-track img{width:220px;height:290px;flex:none;object-fit:cover;border-radius:14px;border:2px solid rgba(201,162,39,.55);box-shadow:0 10px 28px rgba(59,47,42,.18);}
  @keyframes trabajo-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (max-width:760px){ .trabajo-marquee-track img{width:150px;height:200px;} }
  @media (prefers-reduced-motion: reduce){ .trabajo-marquee-track{animation:none;} }

  .sobre-mi-outer{width:100%;}

  .sobre-mi{display:flex;gap:48px;align-items:center;flex-wrap:wrap;}
  .sobre-mi-texto{flex:1;min-width:280px;}
  .sobre-mi-texto p{color:var(--muted);line-height:1.7;font-size:15px;}
  .sobre-mi-img{flex:1;min-width:240px;height:380px;background:var(--blush);border-radius:var(--radius);overflow:hidden;box-shadow:0 14px 40px rgba(59,47,42,.22);border:2px solid rgba(201,162,39,.55);}
  /* En pantallas muy angostas (ej. iPhone SE, 320px) el min-width fijo de arriba no cabía ni
     siquiera en una sola columna ya envuelta -- desbordaba horizontalmente. Se desactiva el
     min-width ahí y las columnas usan el ancho completo disponible. */
  @media (max-width:340px){ .sobre-mi-texto,.sobre-mi-img{min-width:0;width:100%;} }

  section{padding:72px 24px;}

  .productos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,280px));justify-content:center;gap:24px;}
  .producto-card{background:var(--glass-bg);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 14px 40px rgba(59,47,42,.22), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(59,47,42,.06);color:var(--on-glass);}

  /* Inclinación 3D suave al pasar el mouse sobre una tarjeta de producto (una a la vez, solo
     la que está bajo el cursor -- no toda la grilla a la vez, para que no se sienta excesivo).
     Solo desktop/mouse; en touch no hay :hover real así que no se activa. */
  .tilt-card{transform-style:preserve-3d;perspective:900px;transition:transform .35s cubic-bezier(.2,.8,.3,1);}
  @media (prefers-reduced-motion:reduce){ .tilt-card{transition:none !important;transform:none !important;} }
  /* .foto-carrusel es el contenedor genérico del carrusel con fundido (usado por las fotos de
     producto Y por "Sobre nosotras") -- .producto-foto agrega solo el tamaño/placeholder propio
     de la tarjeta de producto. */
  .foto-carrusel{position:relative;overflow:hidden;}
  .producto-foto{height:180px;background:var(--blush);display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:Georgia,serif;font-size:14px;}
  .foto-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;}
  .foto-img.activa{opacity:1;}
  .foto-arrow{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.4);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;padding:0;}
  .foto-carrusel:hover .foto-arrow{opacity:1;}
  .foto-prev{left:6px;}
  .foto-next{right:6px;}
  .foto-dots{position:absolute;bottom:7px;left:0;right:0;display:flex;justify-content:center;gap:5px;padding:0 10px;}
  .foto-dot{flex:1;max-width:34px;height:3px;border-radius:3px;background:rgba(255,255,255,.35);border:none;padding:0;cursor:pointer;position:relative;overflow:hidden;}
  .foto-dot-fill{position:absolute;inset:0;width:0;border-radius:3px;background:linear-gradient(90deg,#e8c987,#b2851a);box-shadow:0 0 6px rgba(226,180,80,.7);}
  .foto-dot.pasado .foto-dot-fill{width:100%;}
  .foto-dot.actual .foto-dot-fill{animation:fotoAvance linear forwards;animation-duration:var(--foto-dur,3.5s);}
  @keyframes fotoAvance{from{width:0;}to{width:100%;}}
  @media (hover:none),(pointer:coarse){ .foto-arrow{opacity:1;} }
  @media (prefers-reduced-motion:reduce){ .foto-dot.actual .foto-dot-fill{animation:none;width:100%;} }
  .producto-info{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1;}
  .producto-cat{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--on-glass);opacity:.75;}
  .producto-nombre{font-size:16px;margin:0;}
  .producto-desc{font-size:13px;color:var(--on-glass-muted);flex:1;}
  .producto-precio{font-size:18px;font-weight:600;}
  .stock-agotado{font-size:12px;color:#b24444;}
  .add-btn{margin-top:8px;background:#3B2F2A;color:#fff;border:none;border-radius:999px;padding:10px;font-size:13px;cursor:pointer;}
  .add-btn:disabled{background:#ccc;cursor:not-allowed;}

  /* Widget de Reservar: mismo vidrio del Home, un poco más compacto (padding/gaps reducidos)
     para que quepa cómodo dentro de la sección a pantalla completa. */
  .reservar-box{--border:#e6dccf;background:var(--glass-bg);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px;max-width:460px;margin:0 auto;box-shadow:0 14px 40px rgba(59,47,42,.22), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(59,47,42,.06);color:var(--on-glass);}
  .reservar-box .campo{margin-bottom:11px;}
  .reservar-box .campo label{color:var(--on-glass-muted);}
  .reservar-box .campo input,.reservar-box .campo select{color:var(--on-glass);background:#fff;}
  .cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .cal-header button{background:none;border:1px solid var(--border);border-radius:999px;width:28px;height:28px;cursor:pointer;color:var(--on-glass);}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;}
  .cal-dow{font-size:10px;color:var(--on-glass-muted);padding:3px 0;}
  .cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:12px;cursor:pointer;border:1px solid transparent;color:var(--on-glass);}
  .cal-day.disabled{color:#ccc;cursor:default;}
  .cal-day.valid:hover{background:rgba(216,200,181,.5);border-color:var(--gold);}
  .cal-day.selected{background:var(--ink);color:#fff;border-color:var(--ink);}
  .reservar-nota{font-size:12px;color:var(--on-glass-muted);margin-top:14px;text-align:center;}
  .deposito-nota{font-size:12.5px;font-weight:700;color:var(--on-glass);margin-top:12px;text-align:center;line-height:1.55;padding:12px 14px;border-radius:10px;border:1px dashed rgba(59,47,42,.35);background:rgba(255,255,255,.4);}
  .deposito-link{color:var(--on-glass);font-weight:600;text-decoration:underline;white-space:nowrap;}
  .footer-link{color:inherit;text-decoration:underline;}

  /* Footer completo de 3 columnas (marca / navegación / contacto), igual estructura que la
     referencia dada por el usuario (footer institucional tipo ADB Automotive) pero con la
     paleta propia de Kuky's Glow -- franja marrón oscuro fija (no cambia con el tema, mismo
     criterio que .silk-veil: superficie decorativa con su propio color), texto claro. */
  /* Color fijo (no var(--accent-dark)) a propósito -- esa variable se INVIERTE en modo oscuro
     (pasa a ser un tono claro), mismo motivo por el que .silk-veil usa colores fijos. El footer
     debe verse igual de oscuro en los 2 temas. */
  footer{background:#241c17;color:rgba(255,255,255,.72);padding:52px 24px 22px;}
  .footer-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;text-align:left;}
  .footer-col h4{color:#fff;font-family:'Montserrat',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;font-weight:600;}
  .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .footer-brand img{height:34px;width:auto;filter:brightness(0) invert(1);}
  .footer-tagline{font-size:13.5px;line-height:1.6;max-width:280px;margin:0;}
  .footer-col a{display:block;color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;padding:5px 0;}
  .footer-col a:hover{color:#fff;}
  .footer-bottom{max-width:1120px;margin:34px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);text-align:center;font-size:12.5px;color:rgba(255,255,255,.55);}
  .footer-bottom a.footer-link{color:rgba(255,255,255,.55);}
  @media (max-width:760px){ .footer-inner{grid-template-columns:1fr;gap:28px;} }

  /* Carrito lateral y modal de checkout (más abajo): a diferencia de las tarjetas de vidrio,
     estos SÍ cambian de color con el tema -- usan var(--surface) (blanco en claro, marrón
     oscuro en oscuro) y var(--ink)/var(--muted)/var(--border), que ya cambian solos con el
     tema. Los campos de formulario (input/select) se quedan siempre blancos con texto oscuro,
     como cualquier campo de texto normal, para que sea fácil escribir en los 2 temas. */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:none;}
  .overlay.open{display:block;}
  .drawer{position:fixed;top:0;right:0;height:100%;width:380px;max-width:92vw;background:var(--surface);color:var(--ink);z-index:101;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;}
  .drawer.open{transform:translateX(0);}
  .drawer-head{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
  .drawer-head button{background:none;border:none;font-size:22px;cursor:pointer;}
  .drawer-items{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;}
  .item-row{display:flex;gap:12px;align-items:center;}
  .item-row .qty{display:flex;align-items:center;gap:6px;}
  .item-row .qty button{width:24px;height:24px;border:1px solid var(--border);background:rgba(128,110,96,.14);color:var(--ink);border-radius:6px;cursor:pointer;}
  .item-row .quitar{margin-left:auto;background:none;border:none;color:#b24444;font-size:12px;cursor:pointer;}
  .drawer-foot{padding:20px;border-top:1px solid var(--border);}
  .drawer-foot .fila{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;color:var(--muted);}
  .drawer-foot .total{font-size:18px;font-weight:600;color:var(--ink);}
  .vacio{color:var(--muted);font-size:14px;text-align:center;padding:40px 0;}

  /* Modal checkout */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;}
  .modal-overlay.open{display:flex;}
  .modal{background:var(--surface);color:var(--ink);border-radius:var(--radius);max-width:420px;width:100%;padding:28px;max-height:90vh;overflow-y:auto;}
  .modal h3{margin-top:0;}
  .campo{margin-bottom:14px;}
  .campo label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;}
  .campo input,.campo select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;color:#3B2F2A;background:#fff;}
  .modal-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:20px;cursor:pointer;}
  .modal{position:relative;}
  .exito{text-align:center;padding:20px 0;}

  /* Banner de página interior (Servicios/Sobre mí/Tienda/Reservar/Contacto/Curso) + tarjetas de
     vidrio reutilizables tipo "curso-card" para bloques de contenido largo (usadas también en
     Sobre mí para "Mi historia"/"Especialidades"). */
  .page-banner{min-height:46vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:110px 24px 60px;}
  .page-banner h1{font-size:36px;margin:0 0 10px;}
  .page-banner p{color:var(--muted);font-size:15px;margin:0;}
  .curso-wrap{max-width:820px;margin:0 auto;padding:0 24px;}
  .curso-card{background:var(--glass-bg);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--glass-border);border-radius:var(--radius);padding:32px;margin-bottom:28px;box-shadow:0 14px 40px rgba(59,47,42,.22), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(59,47,42,.06);color:var(--on-glass);}
  .curso-card h2{margin:0 0 14px;font-size:22px;}
  .curso-card p{color:var(--on-glass-muted);line-height:1.7;font-size:15px;margin:0;}
  .curso-lista{list-style:none;margin:0;padding:0;}
  .curso-lista li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(59,47,42,.16);font-size:14.5px;color:var(--on-glass);}
  .curso-lista li:last-child{border-bottom:none;}
  .curso-lista li svg{flex-shrink:0;margin-top:2px;color:var(--gold);}
  .curso-detalles{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  .curso-detalles li{font-size:14.5px;color:var(--on-glass);}
  .curso-cta{text-align:center;padding:48px 24px 90px;}
  .curso-cta h2{margin:0 0 8px;}
  .curso-cta p{color:var(--muted);margin:0 0 22px;}

  /* Por debajo de 860px: se esconden los links/botones del header de escritorio (quedan solo
     adentro del menú hamburguesa) y aparece el botón de 3 líneas. El carrito se queda visible
     afuera a propósito -- para que se vea el contador sin tener que abrir el menú.
     IMPORTANTE: este bloque tiene que ir al FINAL del archivo -- .navlinks/.lang-switch/etc. ya
     tienen su propia regla base más abajo en el archivo, y en CSS con la misma especificidad
     gana la que aparece último en el orden del archivo (la media query no cambia eso). Puesto
     antes, la regla base ganaba igual aunque la condición de la media query fuera verdadera --
     bug real encontrado probando con Playwright en viewport de celular. */
  @media (max-width:860px){
    .navlinks{display:none;}
    nav .lang-switch,nav .theme-switch,nav .btn-nav{display:none;}
    .navbar-mobile-toggle{display:block;}
  }