/* ── TIPOGRAFÍA UNIFICADA ── */
:root{
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Cormorant Garamond', Georgia, serif;
}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cinzel-400.ttf') format('truetype');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/cinzel-500.ttf') format('truetype');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cinzel-600.ttf') format('truetype');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/cormorantgaramond-300.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cormorantgaramond-400.ttf') format('truetype');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/cormorantgaramond-500.ttf') format('truetype');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cormorantgaramond-600.ttf') format('truetype');}

/* ── SKIP LINK (Accesibilidad) ── */
.skip-link{
  position:fixed;
  top:-100%;
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  padding:14px 28px;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 18px 56px rgba(0,0,0,.5);
  text-decoration:none;
  white-space:nowrap;
  transition:top .28s cubic-bezier(.22,.61,.36,1);
}

.skip-link:focus{
  top:12px;
  outline:2px solid rgba(255,255,255,.6);
  outline-offset:3px;
}

@keyframes navFadeIn{
  from{
    opacity:0;
    transform:translateY(-14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

body > header.topbar{
  position:fixed;
  top:16px;
  left:0;
  right:0;
  z-index:200;
  height:auto;
  display:flex;
  justify-content:center;
  background:transparent;
  border:0;
  pointer-events:none;
  transition:top .35s cubic-bezier(.22,.61,.36,1);
}

body > header.topbar.scrolled{
  top:0;
}

body > header.topbar > nav.main-nav{
  min-height:42px;
  width:min(1180px,calc(100% - 44px));
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,3.6vw,48px);
  padding:11px 24px 10px;
  background:linear-gradient(180deg,rgba(22,22,22,.74),rgba(7,7,7,.6));
  border:1px solid rgba(255,255,255,.1);
  
  box-shadow:0 18px 56px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  pointer-events:auto;
  animation:navFadeIn .65s cubic-bezier(.22,.61,.36,1) .12s both;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,min-height .35s ease,padding .35s ease;
}

body > header.topbar.scrolled > nav.main-nav{
  min-height:38px;
  padding:8px 24px 7px;
  background:linear-gradient(180deg,rgba(18,18,18,.92),rgba(8,8,8,.88));
  border-color:rgba(255,255,255,.14);
  
  box-shadow:0 22px 64px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
}

body > header.topbar > nav.main-nav a,
body > header.topbar > nav.main-nav .nav-brand{
  position:relative;
  width:auto;
  order:initial;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  white-space:nowrap;
  text-decoration:none;
  transition:color .24s ease,transform .24s ease,opacity .24s ease;
}

body > header.topbar > nav.main-nav a::after{
  content:'';
  position:absolute;
  left:50%;
  right:50%;
  bottom:-9px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.72),rgba(255,255,255,0));
  opacity:0;
  transition:left .28s cubic-bezier(.22,.61,.36,1),right .28s cubic-bezier(.22,.61,.36,1),opacity .24s ease;
}

body > header.topbar > nav.main-nav a.active::after{
  left:0;
  right:0;
  opacity:1;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.88),rgba(255,255,255,0));
  box-shadow:0 0 12px rgba(255,255,255,.18);
}

body > header.topbar > nav.main-nav a.active{
  color:rgba(255,255,255,.95);
}

body > header.topbar > nav.main-nav a:focus-visible{
  outline:none;
  color:#fff;
  border-radius:4px;
  box-shadow:0 0 0 2px rgba(255,255,255,.4);
}

body > header.topbar > nav.main-nav a:focus-visible::after{
  left:0;
  right:0;
  opacity:1;
}

body > header.topbar > .topbar-login:focus-visible{
  outline:none;
  color:#fff;
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 2px rgba(255,255,255,.3);
}

body > header.topbar > nav.main-nav .nav-item{
  position:relative;
  display:flex;
  align-items:center;
  align-self:stretch;
  z-index:5;
}

body > header.topbar > nav.main-nav .nav-item > a{
  display:flex;
  align-items:center;
}

body > header.topbar > nav.main-nav .nav-item::before{
  content:'';
  position:absolute;
  left:-26px;
  right:-26px;
  top:100%;
  height:22px;
}

body > header.topbar > nav.main-nav .nav-submenu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  min-width:200px;
  padding:6px 0;
  background:rgba(12,12,14,.96);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 24px 64px rgba(0,0,0,.6),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-radius:10px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-8px) scale(.97);
  transform-origin:top center;
  transition:
    opacity .2s ease,
    transform .24s cubic-bezier(.22,.61,.36,1),
    border-color .2s ease;
}

@keyframes navSubItemIn{
  from{
    opacity:0;
    transform:translateY(-5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

body > header.topbar > nav.main-nav .nav-submenu::before{
  content:'';
  position:absolute;
  left:50%;
  top:-5px;
  width:10px;
  height:10px;
  border-left:1px solid rgba(255,255,255,.1);
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(12,12,14,.96);
  transform:translateX(-50%) rotate(45deg);
}

body > header.topbar > nav.main-nav .nav-submenu a{
  display:block;
  padding:11px 18px;
  font-size:10px;
  letter-spacing:.18em;
  line-height:1.2;
  color:rgba(255,255,255,.55);
  text-align:center;
  opacity:0;
  transition:color .2s ease,background .2s ease;
}

body > header.topbar > nav.main-nav .nav-submenu a:first-child{
  padding-top:13px;
}

body > header.topbar > nav.main-nav .nav-submenu a:last-child{
  padding-bottom:13px;
}

body > header.topbar > nav.main-nav .nav-submenu a::after{
  display:none;
}

body > header.topbar > nav.main-nav .nav-submenu a:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}

body > header.topbar > nav.main-nav .nav-item:hover > .nav-submenu,
body > header.topbar > nav.main-nav .nav-item:focus-within > .nav-submenu{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
  border-color:rgba(255,255,255,.15);
}

body > header.topbar > nav.main-nav .nav-item:hover > .nav-submenu a,
body > header.topbar > nav.main-nav .nav-item:focus-within > .nav-submenu a{
  animation:navSubItemIn .28s cubic-bezier(.22,.61,.36,1) forwards;
}

body > header.topbar > nav.main-nav .nav-item:hover > .nav-submenu a:nth-child(1),
body > header.topbar > nav.main-nav .nav-item:focus-within > .nav-submenu a:nth-child(1){
  animation-delay:.03s;
}

body > header.topbar > nav.main-nav .nav-item:hover > .nav-submenu a:nth-child(2),
body > header.topbar > nav.main-nav .nav-item:focus-within > .nav-submenu a:nth-child(2){
  animation-delay:.07s;
}

body > header.topbar > nav.main-nav .nav-item:hover > a{
  color:#fff;
}

body > header.topbar > .topbar-login{
  position:absolute;
  top:50%;
  right:clamp(22px,3.2vw,56px);
  transform:translateY(-50%);
  pointer-events:auto;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  white-space:nowrap;
  padding:13px 18px 12px;
  background:linear-gradient(180deg,rgba(22,22,22,.74),rgba(7,7,7,.6));
  border:1px solid rgba(255,255,255,.13);
  
  box-shadow:0 18px 56px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:color .24s ease,transform .24s ease,opacity .24s ease,border-color .24s ease;
}

body > header.topbar > .topbar-login:hover,
body > header.topbar > .topbar-login.active{
  color:#fff;
  border-color:rgba(255,255,255,.28);
  transform:translateY(calc(-50% - 1px));
}

/* ── LANG TOGGLE ── */
.lang-toggle{
  position:fixed;
  top:24px;
  left:22px;
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  overflow:hidden;
  flex-shrink:0;
  z-index:9999;
  pointer-events:auto;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.lang-toggle button{
  display:block;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  padding:7px 10px;
  transition:all .2s;
}
.lang-toggle button.active{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.lang-toggle button:hover:not(.active){color:rgba(255,255,255,.75);}

@media(max-width:760px){
  .lang-toggle{
    left:10px;
    top:8px;
  }
  .lang-toggle button{
    font-size:8px;
    padding:5px 8px;
  }
}



@keyframes loginSpin{
  to{transform:rotate(360deg);}
}

.login-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  opacity:0;
  visibility:hidden;
  transition:opacity .32s ease, visibility .32s ease;
}

.login-modal.is-open{
  opacity:1;
  visibility:visible;
}

.login-panel{
  position:relative;
  width:min(440px,100%);
  padding:52px 44px 44px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%,rgba(255,255,255,.08),transparent 65%),
    linear-gradient(180deg,rgba(18,20,24,.98),rgba(8,9,12,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 32px 100px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.3);
  text-align:center;
  overflow:hidden;
  opacity:0;
  transform:translateY(16px) scale(.96);
  transition:transform .36s cubic-bezier(.19,1,.22,1), opacity .3s ease;
}

.login-modal.is-open .login-panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

.login-panel::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
}

.login-close{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.8);
  font-size:22px;
  line-height:1;
  border-radius:50%;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-close:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.3);
  color:#fff;
  transform:rotate(90deg);
}

.login-panel h2{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:30px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.login-panel p{
  margin:0 auto 32px;
  max-width:300px;
  color:rgba(255,255,255,.55);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
}

.login-form{
  display:grid;
  gap:20px;
  text-align:left;
  animation:loginSlideUp .5s cubic-bezier(.19,1,.22,1) .4s both;
}

.login-form label{
  display:grid;
  gap:10px;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.login-form .input-wrapper{
  position:relative;
}

.login-form input{
  width:100%;
  height:52px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.1);
  background:#0a0a0a;
  color:#f2f2f2;
  padding:0 16px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  letter-spacing:.02em;
  text-align:left;
  -webkit-font-smoothing:antialiased;
  outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}

.login-form .input-wrapper input{
  padding-right:88px;
}

.login-form input::placeholder{
  color:rgba(255,255,255,.32);
  font-family:var(--font-body);
  font-size:14px;
  font-style:italic;
  letter-spacing:.01em;
}

.login-form input:focus{
  border-color:rgba(255,255,255,.35);
  background:#0d0d0d;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}

.login-form .input-wrapper:focus-within::after{
  content:'';
  position:absolute;
  bottom:0;left:50%;
  width:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-50%);
  animation:loginSlideUp .3s ease both;
}

.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus,
.login-form input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #0a0a0a inset !important;
  box-shadow:0 0 0 1000px #0a0a0a inset !important;
  -webkit-text-fill-color:#fff !important;
  transition:background-color 5000s ease-in-out 0s;
}

.login-form input::placeholder{
  color:rgba(255,255,255,.35);
}

.login-form input:focus{
  border-color:rgba(255,255,255,.35);
  background:#0d0d0d;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}

.login-form .input-wrapper:focus-within::after{
  content:'';
  position:absolute;
  bottom:0;left:50%;
  width:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-50%);
  animation:loginSlideUp .3s ease both;
}

.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus,
.login-form input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #0a0a0a inset !important;
  box-shadow:0 0 0 1000px #0a0a0a inset !important;
  -webkit-text-fill-color:#fff !important;
  transition:background-color 5000s ease-in-out 0s;
}

.login-message{
  min-height:20px;
  margin:-6px 0 4px;
  color:rgba(255,255,255,.45);
  font-family:var(--font-display);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.14em;
  text-align:center;
  text-transform:uppercase;
  transition:color .2s;
}

.login-message.is-error{color:#ff6b5a;}
.login-message.is-ok{color:#6effb0;}

.login-form .input-wrapper{
  position:relative;
  display:block;
}

.login-form .input-wrapper input{
  padding-right:88px;
}

.toggle-password{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:rgba(255,255,255,.45);
  font-family:var(--font-display);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  padding:6px 8px;
  transition:color .2s;
}

.toggle-password:hover{
  color:rgba(255,255,255,.85);
}

.login-options{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:-8px;
  margin-bottom:4px;
}

.login-form .login-remember{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  cursor:pointer;
  color:rgba(255,255,255,.5);
  font-family:var(--font-body);
  font-size:12px;
  text-transform:none;
  letter-spacing:.02em;
  width:auto !important;
}

.login-form .login-remember input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-width:16px;
  accent-color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.15);
  background:#0a0a0a;
  border-radius:3px;
  transition:border-color .2s,background .2s;
  flex:0 0 16px !important;
  margin:0 !important;
  padding:0 !important;
}

.login-form .login-remember input[type="checkbox"]:hover{
  border-color:rgba(255,255,255,.3);
}

.login-form .login-remember input[type="checkbox"]:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.15);
}

.login-form .login-remember span{
  white-space:nowrap;
}

.login-remember span{
  user-select:none;
}

/* ── HAMBURGER BUTTON ── */
.nav-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  background:linear-gradient(180deg,rgba(22,22,22,.74),rgba(7,7,7,.6));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 18px 56px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  cursor:pointer;
  z-index:260;
  pointer-events:auto;
  transition:background .28s ease,border-color .28s ease,transform .28s ease;
}

.nav-hamburger span{
  display:block;
  width:20px;
  height:1px;
  background:rgba(255,255,255,.88);
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .24s ease,background .24s ease;
  transform-origin:center center;
}

.nav-hamburger:hover{
  background:linear-gradient(180deg,rgba(28,28,28,.88),rgba(10,10,10,.82));
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

.nav-hamburger:hover span{
  background:#fff;
}

.nav-hamburger.open span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}

.nav-hamburger.open span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.nav-hamburger.open{
  background:linear-gradient(180deg,rgba(32,32,32,.92),rgba(12,12,12,.88));
  border-color:rgba(255,255,255,.28);
}

/* ── MOBILE OVERLAY ── */
.nav-mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:230;
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  pointer-events:none;
  transition:background .42s ease,backdrop-filter .42s ease,-webkit-backdrop-filter .42s ease;
}

.nav-mobile-overlay.open{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  pointer-events:auto;
}

.nav-mobile-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  width:min(320px,85vw);
  padding:28px 0;
}

.nav-mobile-links a{
  display:block;
  width:100%;
  text-align:center;
  padding:18px 24px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0;
  transform:translateY(18px);
  transition:color .24s ease,background .24s ease,opacity .38s ease,transform .38s cubic-bezier(.22,.61,.36,1);
}

.nav-mobile-overlay.open .nav-mobile-links a{
  opacity:1;
  transform:translateY(0);
}

.nav-mobile-overlay.open .nav-mobile-links a:nth-child(1){transition-delay:.06s;}
.nav-mobile-overlay.open .nav-mobile-links a:nth-child(2){transition-delay:.1s;}
.nav-mobile-overlay.open .nav-mobile-links a:nth-child(3){transition-delay:.14s;}
.nav-mobile-overlay.open .nav-mobile-links a:nth-child(4){transition-delay:.18s;}
.nav-mobile-overlay.open .nav-mobile-links a:nth-child(5){transition-delay:.22s;}
.nav-mobile-overlay.open .nav-mobile-links a:nth-child(6){transition-delay:.26s;}
.nav-mobile-overlay.open .nav-mobile-links a:nth-child(7){transition-delay:.3s;}
.nav-mobile-overlay.open .nav-mobile-links a:nth-child(8){transition-delay:.34s;}

.nav-mobile-links a:last-child{
  border-bottom:0;
}

.nav-mobile-links a:hover,
.nav-mobile-links a:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.06);
}

.nav-mobile-links a.active{
  color:rgba(255,255,255,.95);
  border-bottom-color:rgba(255,255,255,.12);
}

.nav-mobile-links a.active::after{
  content:'';
  display:block;
  width:24px;
  height:1px;
  margin:10px auto 0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));
}

@media(max-width:760px){
  .nav-hamburger{
    display:flex;
  }
}

.login-submit{
  height:52px;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05)),
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.12),transparent 70%);
  color:#fff;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}

.login-submit::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}

.login-submit:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08)),
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.15),transparent 70%);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1);
}

.login-submit:active{
  transform:translateY(0);
}

.login-submit:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.login-submit::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  opacity:0;
  transition:opacity .2s ease;
}

.login-submit.loading{
  color:transparent;
  pointer-events:none;
}

.login-submit.loading::after{
  opacity:1;
  animation:loginSpin .8s linear infinite;
}

@keyframes loginSpin{
  to{transform:rotate(360deg);}
}

body > header.topbar > nav.main-nav a:hover,
body > header.topbar > nav.main-nav a.active{
  opacity:1;
  color:#fff;
  transform:translateY(-1px);
}

body > header.topbar > nav.main-nav a:hover::after,
body > header.topbar > nav.main-nav a.active::after{
  left:0;
  right:0;
  opacity:1;
}

body > header.topbar > nav.main-nav .nav-submenu a:hover{
  transform:none;
}

@media(max-width:900px){
  body > header.topbar{
    top:12px;
    position:absolute;
  }
  body > header.topbar > nav.main-nav{
    width:calc(100% - 28px);
    flex-wrap:wrap;
    gap:12px 18px;
    padding:12px 16px;
  }
  body > header.topbar > nav.main-nav a,
  body > header.topbar > nav.main-nav .nav-brand{
    font-size:11px;
    letter-spacing:.12em;
    text-align:center;
  }
  body > header.topbar > nav.main-nav .nav-submenu{
    top:calc(100% + 9px);
    min-width:178px;
  }
  body > header.topbar > nav.main-nav .nav-submenu a{
    font-size:9px;
    letter-spacing:.16em;
  }
  body > header.topbar > nav.main-nav a::after{
    bottom:-6px;
  }
  body > header.topbar > .topbar-login{
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    margin-top:10px;
    font-size:10px;
  }
  body > header.topbar > .topbar-login:hover,
  body > header.topbar > .topbar-login.active{
    transform:translateY(-1px);
  }
  .login-panel{
    padding:44px 28px 36px;
  }
  .login-panel h2{
    font-size:26px;
    letter-spacing:.18em;
  }
  .login-panel p{
    font-size:14px;
  }
  .login-form input{
    height:48px;
    font-size:14px;
    padding:0 14px;
  }
  .login-submit{
    height:48px;
    font-size:10px;
  }
  .login-close{
    width:32px;
    height:32px;
    font-size:20px;
  }
}

@media(max-width:520px){
  body > header.topbar > nav.main-nav{
    gap:10px 14px;
  }
  body > header.topbar > nav.main-nav a,
  body > header.topbar > nav.main-nav .nav-brand{
    font-size:10px;
  }
}

@media(max-width:760px){
  html,body{
    max-width:100%;
    overflow-x:hidden;
  }

  body > header.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:240;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 10px;
    pointer-events:none;
  }

  body > header.topbar.scrolled{
    top:0;
  }

  body > header.topbar > nav.main-nav{
    width:auto;
    min-height:42px;
    justify-content:center;
    flex-wrap:nowrap;
    gap:0;
    padding:8px 16px;
    overflow:hidden;
    scrollbar-width:none;
    border-color:rgba(255,255,255,.14);
    background:linear-gradient(180deg,rgba(18,18,18,.84),rgba(5,5,5,.72));
  }

  body > header.topbar.scrolled > nav.main-nav{
    min-height:38px;
    padding:6px 14px;
    background:linear-gradient(180deg,rgba(18,18,18,.94),rgba(5,5,5,.9));
  }

  body > header.topbar > nav.main-nav::-webkit-scrollbar{display:none;}

  body > header.topbar > nav.main-nav .nav-brand{
    flex:0 0 auto;
    padding:0;
    font-size:11px;
    letter-spacing:.14em;
    line-height:1;
  }

  body > header.topbar > nav.main-nav a:not(.nav-brand){
    display:none;
  }

  body > header.topbar > nav.main-nav .nav-item{
    display:none;
  }

  body > header.topbar > nav.main-nav a::after{
    display:none;
  }

  body > header.topbar > .topbar-login{
    position:fixed;
    top:62px;
    right:10px;
    transform:none;
    margin:0;
    padding:11px 12px 10px;
    max-width:calc(100vw - 20px);
    font-size:9px;
    letter-spacing:.12em;
    background:linear-gradient(180deg,rgba(18,18,18,.78),rgba(4,4,4,.66));
    z-index:245;
  }

  body > header.topbar > .topbar-login:hover,
  body > header.topbar > .topbar-login.active{
    transform:translateY(-1px);
  }

  .login-modal{
    padding:18px;
  }

  .login-panel{
    width:min(360px,calc(100vw - 36px));
    padding:38px 22px 28px;
  }

  .login-panel h2{
    font-size:23px;
    letter-spacing:.14em;
  }

  .hero,
  .service-hero,
  .brand-hero,
  .blog-hero,
  .store-hero,
  .contact-hero,
  .article-hero{
    min-height:100svh !important;
    height:100svh !important;
    padding-inline:18px !important;
  }

  .hero-content,
  .service-hero-content,
  .brand-hero-content,
  .blog-content,
  .store-content,
  .contact-content,
  .article-hero-inner{
    width:100% !important;
    max-width:calc(100vw - 36px) !important;
    padding-inline:0 !important;
    text-align:center !important;
  }

  .hero h1,
  .service-title,
  .brand-title,
  .blog-title,
  .store-title,
  .contact-title,
  .article-title,
  .access-title,
  .gift-title{
    max-width:100% !important;
    font-size:clamp(38px,13vw,62px) !important;
    line-height:1.06 !important;
    letter-spacing:.12em !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-wrap:balance;
  }

  .hero-name,
  .service-kicker,
  .brand-subtitle,
  .blog-kicker,
  .store-kicker,
  .contact-kicker,
  .article-kicker{
    max-width:100% !important;
    font-size:clamp(15px,5vw,24px) !important;
    line-height:1.25 !important;
    letter-spacing:.04em !important;
    text-wrap:balance;
  }

  .hero-tag,
  .service-cta,
  .brand-login,
  .blog-cta,
  .store-cta,
  .contact-cta,
  .hero-btn{
    max-width:100%;
  }

  .welcome,
  .services-showcase,
  .portfolio-services,
  .steps-section,
  .advanced-services,
  .testimonials-section,
  .contact-section,
  .contact-form-section,
  .contact-options,
  .store-coming,
  .shop-section,
  .studio-products,
  .blog-gallery,
  .article-shell,
  .features-section,
  .gallery-section{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .service-mosaic,
  .services-grid,
  .service-card-grid,
  .steps-grid,
  .advanced-grid,
  .contact-grid,
  .feature-mosaic,
  .blog-gallery,
  .shop-grid,
  .studio-grid,
  .portfolio-gallery,
  .photo-grid,
  .access-actions,
  .gift-grid,
  .article-layout,
  .about-grid{
    grid-template-columns:1fr !important;
  }

  .service-card,
  .service-card.large,
  .service-card.wide,
  .contact-card,
  .post-card,
  .shop-card,
  .studio-card,
  .access-card,
  .gift-card{
    min-height:260px !important;
  }

  .blog-gallery{
    gap:1px !important;
  }

  .post-card{
    aspect-ratio:1 / .78;
  }

  .category-track,
  .product-track,
  .home-product-track,
  .testimonial-track{
    will-change:transform;
  }

  .category-carousel,
  .product-carousel,
  .home-product-carousel,
  .testimonial-carousel{
    overflow:hidden !important;
  }

  .product-card,
  .home-product-card{
    flex-basis:78vw !important;
  }

  .contact-form,
  .form-grid,
  .form-grid.thirds,
  .form-grid.halves{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  input,
  select,
  textarea,
  button{
    font-size:16px !important;
  }

  .footer-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
    text-align:center !important;
  }

  .footer a{
    width:auto;
    margin-left:auto;
    margin-right:auto;
  }

  .access-page,
  .gifts-page{
    min-height:100svh !important;
    padding:108px 18px 86px !important;
  }

  .access-shell,
  .gift-shell{
    width:100% !important;
  }

  .access-card.featured{
    grid-column:auto !important;
    min-height:220px !important;
  }

  .access-card span{
    font-size:clamp(28px,11vw,48px) !important;
    letter-spacing:.12em !important;
  }

  .access-card:not(.featured) span{
    font-size:clamp(24px,9vw,38px) !important;
  }

  .access-logout,
  .private-logout{
    right:12px !important;
    bottom:12px !important;
  }
}

@media(max-width:420px){
  body > header.topbar > nav.main-nav{
    width:calc(100vw - 16px);
    padding:7px;
  }

  body > header.topbar > nav.main-nav a,
  body > header.topbar > nav.main-nav .nav-brand{
    padding:8px 9px;
    font-size:9px;
    letter-spacing:.115em;
  }

  .hero h1,
  .service-title,
  .brand-title,
  .blog-title,
  .store-title,
  .contact-title,
  .article-title,
  .access-title,
  .gift-title{
    font-size:clamp(34px,12vw,50px) !important;
    letter-spacing:.09em !important;
  }

  .product-card,
  .home-product-card{
    flex-basis:86vw !important;
  }
}

/* ── SEPARACION NAV / LOGIN (desktop) ──
   Grid de 3 columnas: el nav queda centrado y el boton de
   inicio de sesion siempre separado en el extremo derecho,
   sin montarse sobre la barra. */
@media (min-width:1151px){
  body > header.topbar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
  }

  body > header.topbar > nav.main-nav{
    grid-column:2;
    width:min(1180px,calc(100vw - 460px));
  }

  body > header.topbar > .topbar-login{
    grid-column:3;
    position:static;
    justify-self:end;
    margin-right:clamp(22px,3.2vw,56px);
    transform:none;
  }

  body > header.topbar > .topbar-login:hover,
  body > header.topbar > .topbar-login.active{
    transform:translateY(-1px);
  }
}

/* ── Transición entre páginas (disolven suave en el fondo oscuro, sin cortina negra) ── */
#page-transition{display:none;}
html{background:#050505;}
body{opacity:0;transition:opacity .42s ease;}
@media (prefers-reduced-motion: reduce){ body{opacity:1;transition:none;} }
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/cormorantgaramond-300.woff2') format('woff2');}