:root{
  --blanco:#FFFFFF; --tinta:#1A1614; --gris:#4A423D;
  --oro:#C9962E; --oro-claro:#D9AE52; --crema:#F6F1E9;
}

/* ---------- barra nav ---------- */
.nav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;
     padding:1.4rem clamp(2rem,4vw,4rem);border-bottom:1px solid rgba(20,20,20,.07);
     background-color:rgba(244,177,158,.8);
     -webkit-backdrop-filter:blur(7px) saturate(150%);backdrop-filter:blur(7px) saturate(150%);
     transition:background-color .45s ease, box-shadow .45s ease}
/* estado al hacer scroll: cristal blanco esmerilado */
.nav.is-scrolled{background-color:rgba(244,177,158,.72);box-shadow:0 8px 30px rgba(20,20,20,.06)}
.logo{display:flex;flex-direction:column;line-height:1}
.logo .lg-name{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.7rem;letter-spacing:.26em;
               text-transform:uppercase;color:var(--tinta);margin-right:-.26em}
.logo .lg-sub{display:flex;justify-content:space-between;align-items:center;
              font-weight:400;font-size:.62rem;text-transform:uppercase;color:var(--tinta);margin-top:.5rem}
.logo .lg-sub i{font-style:normal;line-height:1}
.logo .lg-sub .sp{flex:0 0 .4em}
/* marca de ciudad: BCN en superíndice junto al wordmark */
.lg-name{position:relative}
.lg-bcn{position:absolute;left:100%;top:.05em;margin-left:.28em;
        font-style:normal;font-family:'Jost',sans-serif;font-weight:500;
        font-size:.33em;letter-spacing:.12em;color:var(--tinta);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(1.1rem, 1.4vw, 1.8rem)}
.nav-links a{color:var(--tinta);text-decoration:none;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.nav-links a:hover{color:var(--oro)}
.nav-links a.pill{position:relative;border:1px solid var(--oro);border-radius:9999px;padding:.7rem 1.5rem;color:var(--tinta)}
.nav-links a.pill:hover{background:var(--oro);color:#fff}
/* destello que recorre la línea (borde) del botón */
.nav-links a.pill::after{content:"";position:absolute;inset:-1px;border-radius:9999px;padding:1px;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,250,230,.95) 50%,transparent 62%);background-size:250% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:pill-sheen 3.2s ease-in-out infinite}
@keyframes pill-sheen{0%{background-position:120% 0}55%{background-position:-25% 0}100%{background-position:-25% 0}}
@media(prefers-reduced-motion:reduce){.nav-links a.pill::after{animation:none;opacity:0}}

/* selector de idioma minimalista */
.lang{position:relative}
.lang summary{list-style:none;outline:none}
.lang summary::-webkit-details-marker{display:none}
.lang-btn{display:flex;align-items:center;gap:.35rem;cursor:pointer;padding:.4rem .5rem;border-radius:9999px;transition:background .25s}
.lang-btn:hover{background:rgba(20,20,20,.045)}
.lang-flag{width:20px;height:14px;border-radius:3px;overflow:hidden;display:block;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(20,20,20,.1)}
.lang-flag svg{width:100%;height:100%;display:block}
.lang-chev{width:10px;height:10px;color:var(--tinta);opacity:.45;transition:transform .25s}
.lang[open] .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + .55rem);right:0;z-index:1100;list-style:none;margin:0;padding:.35rem;min-width:160px;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(20,20,20,.08);border-radius:12px;box-shadow:0 20px 44px -20px rgba(20,20,20,.22)}
/* puente invisible que conecta el botón con el menú (evita el cierre en el hueco) */
.lang-menu::before{content:"";position:absolute;left:0;right:0;top:-.75rem;height:.75rem}
.lang-menu li{list-style:none}
.lang-menu a{display:flex;align-items:center;gap:.6rem;padding:.5rem .62rem;border-radius:8px;text-decoration:none;
  color:var(--tinta);font-family:'Jost',sans-serif;font-size:.76rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;transition:background .2s,color .2s}
.lang-menu a:hover{background:rgba(201,150,46,.1);color:var(--oro)}
.lang-menu a.is-active{color:var(--oro)}

/* ---------- header principal (primera pantalla / hero) ---------- */
.header{display:grid;grid-template-columns:1fr clamp(400px,44vw,600px);align-items:center;gap:clamp(1.5rem,3vw,3rem);
        min-height:calc(100svh - 300px);padding:clamp(.3rem,.7vw,.7rem) clamp(2rem,4vw,4rem)}

/* izquierda: bloque hero centrado */
.hero-block{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

.welcome{display:flex;align-items:center;justify-content:center;gap:1.2rem;color:var(--oro);
         font-size:.8rem;font-weight:400;letter-spacing:.42em;text-transform:uppercase;margin-bottom:clamp(1.4rem,3vh,2.2rem)}
.welcome .ln{width:clamp(40px,5vw,72px);height:1px;background:var(--oro);opacity:.75}

.title{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:.95;letter-spacing:.02em;
       text-transform:uppercase;white-space:nowrap;font-size:clamp(2.4rem,6vw,6.5rem);color:var(--tinta);
       background:linear-gradient(105deg,
         var(--tinta) 0 34%, #C9962E 41%, #F2DA94 46%, #FFFAF0 50%, #F2DA94 54%, #C9962E 59%, var(--tinta) 66% 100%);
       background-size:320% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
       animation:title-shine 6.5s ease-in-out infinite}
@keyframes title-shine{0%{background-position:125% 0}48%{background-position:-25% 0}100%{background-position:-25% 0}}
@media(prefers-reduced-motion:reduce){.title{animation:none;-webkit-text-fill-color:var(--tinta)}}
/* BCN del hero: marca sólida (sin el degradado del título) */
.title-bcn{font-family:'Jost',sans-serif;font-weight:500;font-size:.17em;letter-spacing:.16em;
           vertical-align:super;margin-left:.18em;color:var(--tinta);-webkit-text-fill-color:var(--tinta)}

.salon{display:flex;align-items:center;justify-content:center;gap:1.3rem;margin-top:.5rem;
       font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--oro);
       letter-spacing:.5em;text-transform:uppercase;font-size:clamp(1.4rem, .9rem + 1.4vw, 2.2rem)}
.salon svg{flex:0 0 auto;display:block}

.subtitle{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;color:#3A322C;
          font-size:clamp(1.15rem, 1rem + 0.4vw, 1.4rem);margin-top:clamp(1.4rem,3vh,2.1rem)}

/* CTA del hero en rosa #F4B19E / rgb(244,177,158) */
.learn{display:inline-flex;align-items:center;margin-top:clamp(2rem,4.5vh,3rem);
       border:1px solid #F4B19E;border-radius:9999px;padding:1.15rem 2.8rem;text-decoration:none;
       background:#F4B19E;color:var(--tinta);font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
       transition:.4s cubic-bezier(.16,1,.3,1)}
.learn:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* derecha: vídeo SIN contenedor visible — se funde con el fondo */
.video-wrap{position:relative;width:100%;aspect-ratio:1/1}
.video-wrap video{width:100%;height:100%;object-fit:contain;object-position:center 78%;display:block;
                  mix-blend-mode:multiply;filter:brightness(1.08) contrast(1.05)}
.video-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;box-sizing:border-box;
                   border-left:16px solid #fff;border-right:16px solid #fff}

@media(max-width:900px){
  .header{grid-template-columns:1fr;min-height:auto;gap:2rem;padding-top:2.5rem;padding-bottom:3rem}
  .title{white-space:normal}
  .nav-links a.links{display:none}
  .video-wrap{aspect-ratio:1/1;order:-1}
}

/* carrito en el nav premium (tienda) */
.nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;color:var(--tinta);padding:.35rem;transition:color .25s}
.nav-cart:hover{color:var(--oro)}
.nav-cart svg{width:22px;height:22px;display:block}
.nav-cart-badge{position:absolute;top:-3px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9999px;
  background:var(--oro);color:#fff;font-size:.6rem;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center}

/* primera pantalla en blanco (como el diseño original aprobado): el vídeo usa mix-blend multiply
   + bordes blancos laterales; sobre el fondo crema del sitio se verían barras, así que la fijamos en blanco */
.header{background:var(--blanco)}

/* Reveal dinamico (seccion con data-reveal): titulo letra a letra + subtitulo fade-up */
.js [data-reveal] .reveal-chars .word{display:inline-block}
.js [data-reveal] .reveal-chars .char{display:inline-block;opacity:0;transform:translateY(.6em) rotate(3deg);
  transition:opacity .55s ease, transform .7s cubic-bezier(.34,1.56,.5,1)}
.js [data-reveal].in-view .reveal-chars .char{opacity:1;transform:none}
.js [data-reveal] .reveal-up{opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1) .4s, transform .9s cubic-bezier(.16,1,.3,1) .4s}
.js [data-reveal].in-view .reveal-up{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal] .reveal-chars .char,.js [data-reveal] .reveal-up{opacity:1;transform:none;transition:none}
}

/* Nav adaptable: sobre secciones de fondo similar (coral) pasa a cristal blanco para no fundirse */
.nav.nav--light,
.nav.is-scrolled.nav--light{background-color:rgba(255,255,255,.7)}