/* Caché · El camerino — sistema compartido (clases con prefijo cb-) */
:root{
  --cb-velvet-deep:#22091f;
  --cb-velvet:#4a1740;
  --cb-plum:#6b2358;
  --cb-bulb:#ffd9a0;
  --cb-bulb-hot:#fff1d6;
  --cb-rose:#f2a7b5;
  --cb-mirror:#fbf3f6;
  --cb-mirror-2:#f2e4ea;
  --cb-ink:#1c0b19;
  --cb-ink-soft:#5a3a52;
  --cb-display:'Imbue','Bodoni Moda','Didot',Georgia,serif;
  --cb-body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --cb-ease:cubic-bezier(.16,1,.3,1);
  /* Tokens que cambian con la paleta (ver html[data-theme="2"] al final) */
  --cb-shade:22,6,15;
  --cb-plum-rgb:107,35,88;
  --cb-soft:#e8cfd9;
  --cb-lead:#fbe9ee;
  --cb-dark:#16060f;
  --cb-dark-0:#120410;
  --cb-dark-2:#2a0c24;
  --cb-frame-a:#1d0a1a;
  --cb-frame-b:#0d030c;
  --cb-curtain-a:#5b1d4a;
  --cb-curtain-b:#22091f;
  --cb-star-off:#d9c3d0;
  --cb-form:#fbf3f6;
  --cb-hover:#4a1740;
  --cb-placeholder:#7a5a70;
}
*{box-sizing:border-box}
body{margin:0}
.cb-page{font-family:var(--cb-body);font-size:17px;color:var(--cb-ink);background:var(--cb-mirror);line-height:1.6;-webkit-font-smoothing:antialiased;
  caret-color:var(--cb-plum);accent-color:var(--cb-plum);scrollbar-color:var(--cb-plum) var(--cb-mirror-2)}
.cb-page p{text-wrap:pretty}
.cb-page a:not(.cb-btn){color:inherit}
.cb-page ::selection{background:var(--cb-bulb);color:var(--cb-ink)}
.cb-page ::placeholder{color:var(--cb-placeholder)}
/* Titulares sobre fondo claro: color propio si la paleta lo define (--cb-title); si no, heredan */
:is(.cb-sec--mirror,.cb-sec--mirror2) :is(.cb-h2,.cb-h3){color:var(--cb-title,inherit)}

/* Telón de terciopelo: pliegues suaves; --deep es la variante más oscura */
.cb-velvet{background-color:#22091f;background-image:
  repeating-linear-gradient(90deg,rgba(0,0,0,.32) 0,rgba(255,255,255,.035) 34px,rgba(0,0,0,.28) 70px),
  repeating-linear-gradient(90deg,transparent 0,rgba(0,0,0,.16) 55px,transparent 113px),
  radial-gradient(120% 70% at 50% 0%,rgba(255,200,150,.10),transparent 65%),
  linear-gradient(180deg,#4a1740,#22091f);color:#fff}
.cb-velvet--deep{background-image:
  repeating-linear-gradient(90deg,rgba(0,0,0,.32) 0,rgba(255,255,255,.035) 34px,rgba(0,0,0,.28) 70px),
  repeating-linear-gradient(90deg,transparent 0,rgba(0,0,0,.16) 55px,transparent 113px),
  radial-gradient(120% 70% at 50% 0%,rgba(255,200,150,.10),transparent 65%),
  linear-gradient(180deg,#22091f,#14050f)}
.cb-velvet-flat{background:var(--cb-velvet-deep);color:#fff}

/* Bombillas. Cada tira reparte un número ENTERO de bombillas (background-repeat: round);
   las esquinas son bombillas propias (.cb-bulb-c), así el marco no tiene medias bombillas.
   Dos fases (A/B) alternan en el encendido inicial y luego quedan quietas. */
.cb-bulbs-x,.cb-bulbs-y,.cb-bulb-c{
  --cb-pitch:112px;
  --cb-bulb-g:#ffffff 0 2px,#fff4da 2.5px 6px,#ffd68c 7px 8.5px,rgba(255,200,120,.5) 9.5px,rgba(255,190,100,.16) 14px,transparent 19px;
  --cb-bulb-hot-g:#ffffff 0 3px,#fff8e8 3.5px 7px,#ffe0a0 8px 9.5px,rgba(255,205,125,.75) 11px,rgba(255,190,100,.3) 15px,transparent 19.5px}
.cb-bulbs-x{position:relative;height:var(--b,40px);
  background-image:radial-gradient(circle at 25% 50%,var(--cb-bulb-g)),radial-gradient(circle at 75% 50%,var(--cb-bulb-g));
  background-size:var(--cb-pitch) 100%;background-repeat:round no-repeat}
.cb-bulbs-y{position:relative;width:var(--b,40px);flex:none;
  background-image:radial-gradient(circle at 50% 25%,var(--cb-bulb-g)),radial-gradient(circle at 50% 75%,var(--cb-bulb-g));
  background-size:100% var(--cb-pitch);background-repeat:no-repeat round}
.cb-bulb-c{display:block;flex:none;width:var(--b,40px);height:var(--b,40px);background:radial-gradient(circle at 50% 50%,var(--cb-bulb-g))}
.cb-bulbs-x::before,.cb-bulbs-x::after,.cb-bulbs-y::before,.cb-bulbs-y::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none}
.cb-bulbs-x::before,.cb-bulbs-x::after{background-size:var(--cb-pitch) 100%;background-repeat:round no-repeat}
.cb-bulbs-y::before,.cb-bulbs-y::after{background-size:100% var(--cb-pitch);background-repeat:no-repeat round}
.cb-bulbs-x::before{background-image:radial-gradient(circle at 25% 50%,var(--cb-bulb-hot-g));animation:cb-chase-a 2.4s steps(1,end) 2}
.cb-bulbs-x::after{background-image:radial-gradient(circle at 75% 50%,var(--cb-bulb-hot-g));animation:cb-chase-b 2.4s steps(1,end) 2}
.cb-bulbs-y::before{background-image:radial-gradient(circle at 50% 25%,var(--cb-bulb-hot-g));animation:cb-chase-a 2.4s steps(1,end) 2}
.cb-bulbs-y::after{background-image:radial-gradient(circle at 50% 75%,var(--cb-bulb-hot-g));animation:cb-chase-b 2.4s steps(1,end) 2}
@keyframes cb-chase-a{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes cb-chase-b{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

/* Marco de espejo: las bombillas van ENGASTADAS en un marco oscuro, como un tocador real */
.cb-frame-box{--b:40px;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--cb-frame-a),var(--cb-frame-b));border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,217,160,.5),0 40px 80px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.07)}
.cb-frame-edge{display:flex;height:var(--b)}
.cb-frame-edge>.cb-bulbs-x{flex:1;min-width:0}
.cb-frame-box>.cb-frame-row{display:flex;flex:1}
.cb-frame-box>.cb-frame-row>.cb-mirror{flex:1;min-width:0}

/* Espejo: el borde interior y el resplandor van POR ENCIMA de la foto */
.cb-mirror{position:relative;background:var(--cb-dark);border:1px solid rgba(255,217,160,.55);box-shadow:0 30px 60px -20px rgba(0,0,0,.65);overflow:hidden}
.cb-mirror::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 10px var(--cb-dark-2),inset 0 0 90px rgba(255,217,160,.10)}

/* Tipografía: Imbue (titulares, didona condensada de cartel) + Hanken Grotesk (texto) */
.cb-h1,.cb-h2,.cb-h3{font-family:var(--cb-display);font-optical-sizing:auto;font-synthesis:none;margin:0;text-wrap:balance}
.cb-h1{font-weight:560;font-size:clamp(3.25rem,2.3rem + 4vw,6rem);line-height:1;letter-spacing:-.005em}
.cb-h2{font-weight:500;font-size:clamp(2.25rem,1.75rem + 2.1vw,4rem);line-height:1.02;letter-spacing:-.005em}
.cb-h3{font-weight:500;font-size:clamp(1.625rem,1.4rem + .8vw,2.25rem);line-height:1.1}
.cb-lead{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);line-height:1.5;max-width:54ch;margin:0}
.cb-small{font-size:14px;line-height:1.5;font-weight:500}
.cb-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cb-page em{font-style:italic;font-weight:400}

/* Botones */
.cb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:6px;font-family:var(--cb-body);font-weight:600;font-size:17px;letter-spacing:.005em;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .35s var(--cb-ease),background .35s var(--cb-ease),color .35s var(--cb-ease),box-shadow .35s var(--cb-ease)}
.cb-btn--bulb{background:var(--cb-bulb);color:var(--cb-ink);box-shadow:0 10px 24px -10px rgba(255,217,160,.65)}
.cb-btn--bulb:hover{background:var(--cb-bulb-hot);transform:translateY(-2px)}
.cb-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,217,160,.7)}
.cb-btn--ghost:hover{background:rgba(255,217,160,.14)}
.cb-btn--plum{background:var(--cb-plum);color:#fff}
.cb-btn--plum:hover{background:var(--cb-hover)}
.cb-btn--outline{background:transparent;color:var(--cb-plum);border-color:var(--cb-plum)}
.cb-btn--outline:hover{background:var(--cb-plum);color:#fff}

/* Foco visible: ciruela sobre claro, rosa sobre oscuro */
.cb-page :focus-visible{outline:3px solid var(--cb-plum);outline-offset:3px}
.cb-velvet :focus-visible,.cb-velvet-flat :focus-visible,.cb-mirror :focus-visible,.cb-frame-box :focus-visible{outline-color:var(--cb-rose)}

/* Navegación y enlaces: objetivos táctiles de 44 px y hover */
.cb-page nav a{display:inline-flex;align-items:center;min-height:44px}
.cb-page nav a:not(.cb-btn):hover{color:var(--cb-bulb)}
.cb-page footer a{display:inline-flex;align-items:center;min-height:44px}
.cb-arr{display:inline-block;vertical-align:-1px;margin-left:8px;flex:none}
.cb-page a[aria-label="Escribir por WhatsApp"]{box-shadow:0 0 0 2px var(--cb-velvet-deep),0 14px 30px -8px rgba(0,0,0,.6),0 0 22px 4px rgba(255,190,100,.55)!important}

/* Lista de precios */
.cb-price{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid rgba(255,217,160,.22)}
.cb-price b{margin-left:auto;font-weight:600;white-space:nowrap}
.cb-price--day{border-bottom-color:rgba(var(--cb-plum-rgb),.18)}

/* Dato pendiente de confirmar: un único estilo en toda la web */
.cb-pending{display:inline-flex;gap:.5em;align-items:center;font:500 14px/1.3 var(--cb-body);padding:3px 8px;border:1px dashed currentColor;border-radius:4px}
.cb-pending::before{content:"Pendiente";font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Contenedor de sección */
.cb-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.cb-sec{padding:112px 0}

/* Foto */
.cb-ph{display:block;width:100%;height:100%;object-fit:cover}

/* Aro de luz fría (Academia): mismo ciruela, otra temperatura de luz (≈5000 K frente a las bombillas de ≈2700 K) */
.cb-ring{aspect-ratio:1;border-radius:50%;padding:18px;background:radial-gradient(closest-side,transparent 86%,#f4f7ff 88% 94%,transparent 97%);filter:drop-shadow(0 0 28px rgba(220,232,255,.55))}
.cb-ring>img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}

/* Movimiento: parallax (GSAP lo gestiona al maquetar) */
.cb-parallax{transform:none}

/* Cortinas que se abren al cargar el hero (quedan abiertas por defecto) */
.cb-curtain{position:absolute;top:0;bottom:0;width:52%;z-index:6;pointer-events:none;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 4px,rgba(255,255,255,.05) 4px 18px,rgba(0,0,0,.2) 18px 56px),
  linear-gradient(180deg,var(--cb-curtain-a),var(--cb-curtain-b));box-shadow:0 0 60px rgba(0,0,0,.6)}
.cb-curtain--l{left:0;transform:translateX(-96%);animation:cb-open-l 1.8s .4s var(--cb-ease) backwards}
.cb-curtain--r{right:0;transform:translateX(96%);animation:cb-open-r 1.8s .4s var(--cb-ease) backwards}
@keyframes cb-open-l{from{transform:translateX(0)}}
@keyframes cb-open-r{from{transform:translateX(0)}}

/* Marquesina: se mueve con el SCROLL (no hay movimiento autónomo infinito) */
.cb-marquee{overflow:hidden;padding:22px 0}
.cb-marquee__track{--gap:44px;display:flex;align-items:center;width:max-content;font-family:var(--cb-display);font-weight:500;font-size:clamp(2rem,1.6rem + 1.4vw,3rem);line-height:1.1;color:#fff;white-space:nowrap}
.cb-marquee__track>*{flex:none;margin-inline-end:var(--gap)}
.cb-marquee__track i{display:block;width:12px;height:12px;border-radius:50%;background:var(--cb-bulb-hot);box-shadow:0 0 14px 3px rgba(255,190,100,.9)}
/* El movimiento de la marquesina lo gobierna GSAP (assets/js/main.js) ligado al scroll */

@media (prefers-reduced-motion:reduce){
  .cb-bulbs-x::before,.cb-bulbs-x::after,.cb-bulbs-y::before,.cb-bulbs-y::after{animation:none;opacity:0}
  .cb-btn{transition:none}
  .cb-curtain{display:none}
  .cb-marquee__track{animation:none}
}
@media (max-width:760px){
  .cb-wrap{padding:0 20px}
  .cb-sec{padding:72px 0}
  .cb-frame-box{--b:32px}
  .cb-bulbs-x,.cb-bulbs-y,.cb-bulb-c{--cb-pitch:80px;
    --cb-bulb-g:#ffffff 0 1.5px,#fff4da 2px 4.5px,#ffd68c 5.5px 6.5px,rgba(255,200,120,.5) 7.5px,rgba(255,190,100,.16) 11px,transparent 15px;
    --cb-bulb-hot-g:#ffffff 0 2px,#fff8e8 2.5px 5.5px,#ffe0a0 6.5px 7.5px,rgba(255,205,125,.75) 9px,rgba(255,190,100,.3) 12px,transparent 15.5px}
}

/* ============================================================
   PALETA 2 · blanco cálido, marrón, negro suave y verde oliva
   (se activa con html[data-theme="2"]; la clienta elige con el selector flotante)
   Blanco cálido #E5E0DA · Marrón #583B1F · Negro suave #1C1C1A · Verde oliva #7E7B46
   Marrón oscuro #3E2A15 (hover) · Gris medio #5C5A55 · Fondo alterno #EAE6E1
   Fondo formulario #EDE9E4 · Gris cálido #CFC8BF · Negro profundo #121212 (pie)
   ============================================================ */
html[data-theme="2"]{
  --cb-velvet:#583B1F;
  --cb-velvet-deep:#3E2A15;
  --cb-plum:#583B1F;
  --cb-mirror:#E5E0DA;
  --cb-mirror-2:#EAE6E1;
  --cb-ink:#1C1C1A;
  --cb-ink-soft:#5C5A55;
  --cb-rose:#CFC8BF;
  --cb-title:#7E7B46;
  --cb-shade:18,13,8;
  --cb-plum-rgb:88,59,31;
  --cb-soft:#DAD3C9;
  --cb-lead:#F1EBE3;
  --cb-dark:#17110b;
  --cb-dark-0:#100b07;
  --cb-dark-2:#2c1f12;
  --cb-frame-a:#241a10;
  --cb-frame-b:#0f0a06;
  --cb-curtain-a:#6a4a2a;
  --cb-curtain-b:#3E2A15;
  --cb-star-off:#CFC8BF;
  --cb-form:#EDE9E4;
  --cb-hover:#3E2A15;
  --cb-placeholder:#5C5A55;
}
html[data-theme="2"] .cb-velvet{background-color:#3E2A15;background-image:
  repeating-linear-gradient(90deg,rgba(0,0,0,.30) 0,rgba(255,255,255,.04) 34px,rgba(0,0,0,.26) 70px),
  repeating-linear-gradient(90deg,transparent 0,rgba(0,0,0,.14) 55px,transparent 113px),
  radial-gradient(120% 70% at 50% 0%,rgba(255,215,160,.10),transparent 65%),
  linear-gradient(180deg,#583B1F,#3E2A15)}
html[data-theme="2"] .cb-velvet--deep{background-image:
  repeating-linear-gradient(90deg,rgba(0,0,0,.30) 0,rgba(255,255,255,.04) 34px,rgba(0,0,0,.26) 70px),
  repeating-linear-gradient(90deg,transparent 0,rgba(0,0,0,.14) 55px,transparent 113px),
  radial-gradient(120% 70% at 50% 0%,rgba(255,215,160,.10),transparent 65%),
  linear-gradient(180deg,#3E2A15,#2a1c0e)}
html[data-theme="2"] .cb-foot.cb-velvet{background-image:none;background-color:#121212}

/* ---------- Selector de paleta (solo para la demo) ---------- */
.cb-themer{position:fixed;left:16px;bottom:16px;z-index:55;display:flex;gap:6px;padding:8px;background:#fff;border-radius:10px;box-shadow:0 8px 28px -6px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.08);font-family:var(--cb-body)}
.cb-themer__opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;background:#f0ece8;border:2px solid transparent;border-radius:6px;cursor:pointer;color:#1c1c1a;font:600 16px var(--cb-body)}
.cb-themer__opt:hover{background:#e7e1db}
.cb-themer__opt[aria-pressed="true"]{border-color:#1c1c1a;background:#ece7e1}
.cb-themer__chips{display:flex;gap:4px}
.cb-themer__chips i{display:block;width:11px;height:26px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cb-themer :focus-visible{outline:3px solid #1c1c1a;outline-offset:2px}
@media (max-width:900px){.cb-themer{bottom:88px;left:12px}}