/* ═══════════════════════════════════════════════
   jesusvillalba.es — hoja de estilos compartida
   Usada por: trayectoria.html · about-en.html
   Generada a partir del bloque <style> inline
   original (idéntico en ambos archivos).
   ═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}
:root{
  --c:#F6F4EF;--cw:#EDEAE3;--cd:#E4E0D8;
  --ink:#0E0E0C;--ink2:#2A2826;--ink3:#545048;--ink4:#8A8680;
  --gold:#9A8660;--gold-l:#B09A74;--gr:rgba(154,134,96,.13);
  --e:cubic-bezier(.16,1,.3,1);--m:clamp(24px,6%,108px);--ms:clamp(18px,4%,64px);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--c);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:300;font-size:16px;}
img{display:block;width:100%;height:auto}a{text-decoration:none}
a,button,input,textarea,select,summary,[role="button"],[tabindex],.nav-toggle,.mobile-menu-link,.mobile-menu-cta,.mobile-menu-close,.lang-switch a,.header-lang a,.main-nav a,.btn-ink,.btn-line,.btn-gold,.exp-reserve,.form-submit,.form-panel-close,.modal-close{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;}
/* ── TIPOGRAFÍA ── */
.eyebrow{
  font-size:.48rem;
  letter-spacing:6.5px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:300;
  display:block;
  line-height:1;
  margin-bottom:2px;
}

/* ── BOTONES ── */
.btn-ink,
.btn-line,
.btn-gold,
.exp-reserve,
.form-submit,
.mobile-menu-close,
.modal-close,
.form-panel-close{
  font-family:'Inter',sans-serif;
  font-weight:300;
  letter-spacing:3.5px;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
  transition:background .55s var(--e),color .55s var(--e),border-color .55s var(--e),transform .45s var(--e),box-shadow .45s var(--e),opacity .45s var(--e);
  will-change:transform,opacity,background,color,border-color,box-shadow;
}

.btn-ink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 30px;
  background:var(--ink);
  color:var(--c);
  font-size:.5rem;
  letter-spacing:4px;
  border:1px solid var(--ink);
}
.btn-ink:hover{
  background:transparent;
  color:var(--ink);
  transform:translateY(-1px);
}

.btn-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 30px;
  border:1px solid var(--gr);
  color:var(--ink3);
  font-size:.5rem;
  letter-spacing:4px;
  background:transparent;
}
.btn-line:hover{
  border-color:var(--gold);
  color:var(--gold);
  transform:translateY(-1px);
}

.btn-gold{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 30px;
  border:1px solid rgba(154,134,96,.5);
  color:var(--gold);
  font-size:.5rem;
  letter-spacing:4px;
  background:transparent;
}
.btn-gold:hover{
  background:var(--gold);
  color:var(--c);
  border-color:var(--gold);
  transform:translateY(-1px);
}
.btn-ink,.btn-line,.btn-gold,.main-nav .nav-cta{min-height:48px}
@media(max-width:700px){
  .btn-ink,.btn-line,.btn-gold,.main-nav .nav-cta{min-height:44px}
}
/* ── HEADER ── */
/* ═══════════════════════════════════════════════════════
   NAVEGACIÓN EDITORIAL · ULTRA LUXURY
════════════════════════════════════════════════════════ */

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:900;
  padding:34px var(--m);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid transparent;
  transition:background .9s var(--e),padding .6s var(--e),border-color .9s,opacity .45s var(--e),visibility .45s var(--e);
}
.site-header.scrolled{
  background:rgba(246,244,239,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:20px var(--m);
  border-bottom-color:var(--gr);
}
.logo{display:flex;flex-direction:column;gap:5px;color:#F3F0E9}
.site-header.scrolled .logo{color:var(--ink)}
.logo-name{
  font-family:'Playfair Display',serif;
  font-size:clamp(.88rem,1.2vw,1.05rem);
  font-weight:300;
  letter-spacing:10px;
  line-height:1;
  color:inherit;
  white-space:nowrap;
}
.logo-sub{
  font-size:.42rem;
  letter-spacing:5px;
  text-transform:uppercase;
  color:var(--gold-l);
  font-weight:300;
  transition:color .6s;
}
.site-header.scrolled .logo-sub{color:var(--gold)}

.main-nav{
  display:flex;
  gap:44px;
  align-items:center;
}
.main-nav a{
  font-size:.48rem;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:rgba(243,240,233,.75);
  font-weight:300;
  transition:color .5s,opacity .5s;
}
.site-header.scrolled .main-nav a{color:var(--ink3)}
.main-nav a:hover{color:var(--gold-l)}
.site-header.scrolled .main-nav a:hover{color:var(--gold)}
.main-nav .nav-cta{
  padding:10px 22px;
  border:1px solid rgba(243,240,233,.28);
  color:rgba(243,240,233,.85);
  transition:border-color .5s,color .5s,background .5s,transform .5s;
  background:transparent;
}
.site-header.scrolled .main-nav .nav-cta{
  border-color:var(--gr);
  color:var(--ink2);
}
.main-nav .nav-cta:hover{
  border-color:var(--gold-l);
  color:var(--gold-l);
  transform:translateY(-1px);
}

/* ── NAV-TOGGLE (fuente única — ver auditoría) ── */
.nav-toggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  cursor:pointer;
  background:transparent;
  border:none;
  padding:0;
  margin-left:14px;
  flex:0 0 auto;
}
.nav-toggle span{
  display:block;
  position:relative;
  width:22px;
  height:1px;
  background:rgba(243,240,233,.82);
  transition:transform .6s var(--e),opacity .35s var(--e),background .4s var(--e);
  transform-origin:center;
}
.nav-toggle span + span{margin-top:6px}
.site-header.scrolled .nav-toggle span{background:var(--ink3)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.lang-switch{
  display:flex;
  gap:14px;
  align-items:center;
  margin-left:8px;
  padding-left:20px;
  border-left:1px solid rgba(243,240,233,.22);
  transition:border-color .6s;
}
.site-header.scrolled .lang-switch{border-left-color:var(--gr)}
.header-lang{
  display:flex!important;
  align-items:center;
  gap:10px;
  margin-left:auto;
  margin-right:0;
  padding-left:0;
  border-left:none;
}
.site-header.scrolled .header-lang{border-left:none}
.lang-switch a{
  font-size:.44rem!important;
  letter-spacing:2.5px!important;
  text-transform:uppercase;
  color:rgba(243,240,233,.5);
  font-weight:300;
  transition:color .4s;
}
.header-lang a{padding:0!important;border:none!important}
.lang-switch a.lang-active,
.lang-switch a:hover{color:rgba(243,240,233,.92)!important}
.site-header.scrolled .lang-switch a{color:var(--ink4)}
.site-header.scrolled .lang-switch a.lang-active,
.site-header.scrolled .lang-switch a:hover{color:var(--ink2)!important}
.lang-sep{
  color:rgba(243,240,233,.2);
  font-size:.4rem;
  font-weight:300;
  user-select:none;
}
.site-header.scrolled .lang-sep{color:var(--gr)}

body.menu-open{
  overflow:hidden;
}
body.menu-open .site-header,
body.recorrido-open .site-header{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  display:none !important;
}
body.recorrido-open{
  overflow:hidden;
}
body.recorrido-open .site-header *{
  pointer-events:none !important;
}

/* ── MENÚ MÓVIL ── */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:800;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:clamp(20px,4vw,40px);
  background:
    radial-gradient(circle at 18% 12%, rgba(154,134,96,.06), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(154,134,96,.04), transparent 22%),
    rgba(246,244,239,.985);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px);
  transition:opacity .7s var(--e),transform .85s var(--e),visibility 0s linear .7s;
}
.mobile-menu.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .7s var(--e),transform .85s var(--e),visibility 0s;
}
.mobile-menu-shell{
  width:min(100%,760px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(18px,4vh,34px);
}
.mobile-menu-top{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}
.mobile-menu-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.mobile-menu-lang{
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:14px;
  border-right:1px solid rgba(154,134,96,.14);
}
.mobile-menu-lang a{
  font-size:.44rem;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--ink4);
  font-weight:300;
}
.mobile-menu-lang a.lang-active,
.mobile-menu-lang a:hover{color:var(--gold)}
.mobile-menu-lang span{
  color:var(--gr);
  user-select:none;
}
.mobile-menu-close{
  background:none;
  border:none;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.44rem;
  letter-spacing:4px;
  color:var(--ink3);
  font-weight:300;
  transition:color .35s var(--e),transform .35s var(--e),opacity .35s var(--e);
}
.mobile-menu-close::before{
  content:'';
  width:18px;
  height:1px;
  background:currentColor;
  opacity:.75;
  transition:width .4s var(--e),opacity .4s var(--e);
}
.mobile-menu-close:hover{
  color:var(--gold);
  transform:translateX(1px);
}
.mobile-menu-close:hover::before{
  width:26px;
  opacity:1;
}

.mobile-menu-rail{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  padding:clamp(8px,2vh,18px) 0 0;
}
.mobile-menu-links{
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(154,134,96,.12);
  border-bottom:1px solid rgba(154,134,96,.12);
}
.mobile-menu-link,
.mobile-menu-cta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:clamp(18px,2.8vh,28px) 0;
  color:var(--ink);
  border-bottom:1px solid rgba(154,134,96,.10);
  transition:color .45s var(--e),background .45s var(--e),border-color .45s var(--e),transform .45s var(--e),opacity .45s var(--e);
  opacity:.98;
  width:100%;
}
.mobile-menu-link:last-child,
.mobile-menu-cta:last-child{border-bottom:none}
.mobile-menu-link{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.7rem,5.4vw,2.7rem);
  font-weight:300;
  line-height:1.14;
  letter-spacing:-.3px;
}
.mobile-menu-cta{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.55rem,5vw,2.35rem);
  font-weight:300;
  line-height:1.14;
  letter-spacing:-.25px;
  color:var(--gold);
  margin-top:2px;
  background:none;
  border-left:none;
  border-right:none;
  border-top:none;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.mobile-menu-link:hover,
.mobile-menu-cta:hover{
  color:var(--gold);
  background:rgba(154,134,96,.03);
  transform:none;
}
.mobile-menu-link:focus-visible,
.mobile-menu-cta:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu-lang a:focus-visible{
  outline:2px solid rgba(154,134,96,.34);
  outline-offset:4px;
}

.nav-toggle,.mobile-menu-link,.mobile-menu-cta,.mobile-menu-close,.lang-switch a,.header-lang a,.main-nav a,.btn-ink,.btn-line,.btn-gold,.exp-reserve,.form-submit,.form-panel-close,.modal-close{touch-action:manipulation;}

@media(max-width:1060px){
  .main-nav{display:none}
  .nav-toggle{display:inline-flex}
  .header-lang{
    margin-right:10px;
    padding-right:0;
  }
  .site-header{
    padding:24px var(--m);
  }
  .site-header.scrolled{
    padding:18px var(--m);
  }
  .mobile-menu-link,
  .mobile-menu-cta{
    padding:18px 0;
  }
}
@media(max-width:720px){
  .form-overlay{padding:16px 12px 14px;}
  .form-panel{max-height:calc(100svh - 28px);}
  .form-panel-close{top:18px;right:18px;}
  .header-lang{margin-right:6px}
  .mobile-menu{
    padding:18px 16px 16px;
  }
  .mobile-menu-shell{gap:20px}
  .mobile-menu-top{
    align-items:flex-start;
  }
  .mobile-menu-actions{
    width:100%;
    justify-content:space-between;
    gap:10px;
  }
  .mobile-menu-lang{
    padding-right:10px;
  }
  .mobile-menu-rail{
    justify-content:flex-start;
    padding-top:8px;
  }
  .mobile-menu-link{
    font-size:clamp(1.45rem,8vw,2rem);
  }
  .mobile-menu-cta{
    font-size:clamp(1.35rem,7vw,1.85rem);
  }
  .mobile-menu-link,
  .mobile-menu-cta{
    gap:14px;
  }
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle, .mobile-menu, .mobile-menu *{
    transition-duration:.01ms !important;
    animation:none !important;
  }
}


/* .gold-dot y el resto de estilos de page-hero, origen, técnicas, método,
   cronología y cierre viven consolidados en un único bloque — ver
   "TRAYECTORIA / ABOUT" al final de este archivo. No se dupliquen aquí. */

/* REVEAL */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.5s var(--e),transform 1.5s var(--e);}
.reveal.visible{opacity:1;transform:none}

/* FORM OVERLAY — same as index */
.form-overlay{
  display:flex;
  position:fixed;inset:0;z-index:1100;
  background:rgba(6,6,4,.965);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  align-items:center;justify-content:center;
  padding:24px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .55s var(--e),transform .7s var(--e),visibility 0s linear .55s;
}
.form-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:opacity .55s var(--e),transform .7s var(--e),visibility 0s;
}

.form-panel{
  background:var(--c);
  max-width:560px;width:100%;
  margin:clamp(12px,4vh,36px) 0;
  padding:clamp(52px,6vw,82px) clamp(32px,5vw,72px);
  position:relative;
  max-height:calc(100svh - 48px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  transform:translateY(18px) scale(.988);
  transition:opacity .6s var(--e),transform .8s var(--e);
  will-change:transform,opacity;
  box-shadow:0 20px 60px rgba(0,0,0,.16);
}
.form-overlay.open .form-panel{
  opacity:1;
  transform:none;
}
.form-panel-close{
  position:absolute;top:24px;right:24px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:none;border:none;cursor:pointer;
  font-size:.5rem;letter-spacing:4px;
  text-transform:uppercase;
  color:var(--ink4);font-family:'Inter',sans-serif;
  transition:color .35s var(--e),transform .35s var(--e),opacity .35s var(--e);
}
.form-panel-close::before{
  content:'';
  width:18px;height:1px;
  background:currentColor;
  opacity:.72;
  transition:width .4s var(--e),opacity .4s var(--e);
}
.form-panel-close:hover{
  color:var(--ink);
  transform:translateX(1px);
}
.form-panel-close:hover::before{
  width:26px;
  opacity:1;
}

.form-eyebrow{
  font-size:.44rem;letter-spacing:6px;
  text-transform:uppercase;
  color:var(--gold);font-weight:300;
  margin-bottom:18px;display:block;
}
.form-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.75rem,2.9vw,2.45rem);
  font-weight:300;color:var(--ink);
  margin-bottom:12px;letter-spacing:-.3px;
  line-height:1.2;
}
.form-subtitle{
  font-size:.78rem;color:var(--ink3);
  line-height:1.9;font-weight:300;
  margin-bottom:34px;
  max-width:38ch;
}

.form-field{
  display:flex;flex-direction:column;
  gap:10px;margin-bottom:22px;
}
.form-label{
  font-size:.5rem;letter-spacing:4px;
  text-transform:uppercase;
  color:var(--ink4);font-weight:300;
}
.form-input,
.form-textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--cd);
  padding:12px 0 13px;
  font-family:'Inter',sans-serif;
  font-size:.82rem;
  font-weight:300;
  color:var(--ink);
  outline:none;
  transition:border-color .4s,transform .35s var(--e),opacity .35s var(--e);
  width:100%;
  -webkit-appearance:none;
  border-radius:0;
}
.form-input::placeholder,
.form-textarea::placeholder{
  color:var(--ink4);
  font-weight:300;
}
.form-input:focus,
.form-textarea:focus{
  border-bottom-color:var(--gold);
}
.form-textarea{
  resize:none;
  min-height:88px;
  line-height:1.8;
}
.form-note{
  font-size:.68rem;color:var(--ink4);
  line-height:1.8;font-weight:300;
  margin:6px 0 28px;
  max-width:44ch;
}
.form-submit{
  width:100%;
  padding:16px 18px;
  background:var(--ink);
  color:var(--c);
  font-family:'Inter',sans-serif;
  font-size:.5rem;letter-spacing:4px;
  text-transform:uppercase;
  font-weight:300;
  border:1px solid var(--ink);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:background .55s var(--e),color .55s var(--e),border-color .55s var(--e),transform .45s var(--e),box-shadow .45s var(--e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.form-submit:hover{
  background:transparent;
  color:var(--ink);
  transform:translateY(-1px);
}
.form-submit:disabled{
  opacity:.45;cursor:not-allowed;
}

.form-confirm{
  display:none;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  padding:clamp(48px,6vw,80px) clamp(32px,5vw,72px);
}
.form-confirm.visible{display:flex}
.form-confirm-icon{
  width:28px;height:1px;background:var(--gold);
  margin-bottom:8px;
}
.form-confirm-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  font-weight:300;color:var(--ink);
  line-height:1.24;letter-spacing:-.2px;
}
.form-confirm-text{
  font-size:.8rem;color:var(--ink3);
  line-height:2;font-weight:300;
}




/* ── FOOTER ── */
footer{
  padding:clamp(36px,4vw,56px) var(--m);
  border-top:1px solid var(--gr);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}

.footer-brand{
  font-family:'Playfair Display',serif;
  font-size:.9rem;
  font-weight:300;
  letter-spacing:8px;
  color:var(--ink);
}

.footer-nav{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
}

.footer-nav a{
  font-size:.46rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ink4);
  transition:color .5s;
}

.footer-nav a:hover{
  color:var(--gold);
}

.footer-legal{
  width:100%;
  font-size:.44rem;
  letter-spacing:1px;
  color:var(--ink4);
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  opacity:.65;
}

.footer-legal a{
  color:var(--ink4);
  transition:color .5s;
}

.footer-legal a:hover{
  color:var(--gold);
}

@media(max-width:680px){
  footer{flex-direction:column;align-items:flex-start}
  .footer-legal{flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){.reveal{animation:none!important}*{transition-duration:.01ms!important}}

/* ── Shared premium refinement ── */
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.95;
  letter-spacing:0;
}
h1,h2,h3,.serif,
.brand strong,.logo-name,.footer .brandline,
.section-head h2,.hero-aside h2,.card h3,
.faq summary,.list strong,.page-hero h1,
.form-title,.page-cta h2,
.hero-h1,.hero-sub,.hero-eyebrow,
.exp-name,.exp-tier,.editorial-title,
.declaration-quote,.vn-title{
  font-family:'Playfair Display',serif;
  font-weight:300;
  letter-spacing:-.02em;
}
p,.hero p,.section-head p,.hero-aside p,.card p,.list p,.faq p,.details p,
.page-hero-sub,.small,.exp-desc,.exp-dimensions,.exp-musical,
.editorial-body,.declaration-body p,.vn-text p{
  line-height:2.05;
}
.kicker,.fine,.aside-label,.logo-sub,.brand span,.mob-brand-kicker,.form-eyebrow{
  letter-spacing:6px;
}

/* ── MENÚ DESPLEGABLE · DESKTOP (≥1061px) ──
   Panel editorial compacto: columna estrecha, centrada, sin scroll.
   Referencias: Aman / Four Seasons Private Retreats / The Peninsula. */
@media(min-width:1061px){
  .mobile-menu{
    padding:clamp(28px,3.4vw,48px);
    align-items:center;
  }
  .mobile-menu-shell{
    width:min(100%,600px);
    gap:clamp(22px,3.6vh,32px);
  }
  .mobile-menu-actions{
    gap:20px;
  }
  .mobile-menu-lang{
    gap:16px;
    padding-right:20px;
  }
  .mobile-menu-lang a{
    font-size:.48rem;
    letter-spacing:4px;
  }
  .mobile-menu-close{
    font-size:.48rem;
    letter-spacing:4.5px;
  }
  .mobile-menu-rail{
    padding:0;
  }
  .mobile-menu-link,
  .mobile-menu-cta{
    padding:clamp(14px,2.1vh,20px) 0;
    gap:32px;
  }
  .mobile-menu-link{
    font-size:clamp(1.5rem,2.15vw,2rem);
    line-height:1.2;
    letter-spacing:-.3px;
  }
  .mobile-menu-cta{
    font-size:clamp(1.35rem,1.95vw,1.8rem);
    line-height:1.2;
    letter-spacing:-.25px;
  }
}


@media(max-width:960px){
  .form-overlay{
    overflow:auto;
    align-items:flex-start;
    padding:72px 20px 28px;
  }
  .form-panel,
  .form-confirm{
    margin:auto;
  }
}

@media(max-width:680px){
  .form-overlay{
    padding:64px 16px 20px;
  }
  .form-panel,
  .form-confirm{
    max-height:calc(100vh - 84px);
    overflow:auto;
  }
  .form-panel-close{
    top:18px;
    right:18px;
  }
}


.form-overlay{overscroll-behavior:contain;}
.form-panel,.form-confirm{width:min(100%,560px);}
@media(max-width:720px){
  .form-overlay{
    align-items:flex-start;
    padding:12px;
  }
  .form-panel{
    max-height:calc(100dvh - 24px);
    margin:0;
    padding:56px 20px 28px;
    overflow:auto;
  }
  .form-panel-close{
    position:fixed !important;
    top:16px !important;
    right:16px !important;
    left:auto !important;
    z-index:1200;
    margin-left:0;
    display:inline-flex;
    padding:10px 0 12px;
    background:linear-gradient(180deg,var(--c) 72%,rgba(246,244,239,0));
  }
  .form-confirm{
    max-height:calc(100dvh - 24px);
    margin:0;
    padding:56px 20px 28px;
    overflow:auto;
    position:relative;
  }
  .form-confirm .form-panel-close{
    position:fixed !important;
    top:16px !important;
    right:16px !important;
    left:auto !important;
    z-index:1200;
    margin-left:0;
    display:inline-flex;
    padding:10px 0 12px;
    background:linear-gradient(180deg,var(--c) 72%,rgba(246,244,239,0));
  }
}


@media (min-width: 961px){
  .site-header{
    padding:24px clamp(36px,4.4vw,84px);
  }
  .logo{
    margin-right:clamp(20px,2.8vw,44px);
  }
  .main-nav{
    margin-left:clamp(34px,4.8vw,92px);
    gap:clamp(22px,2.8vw,44px);
  }
  .header-lang{
    margin-left:clamp(18px,2.6vw,38px);
    margin-right:0;
  }
}

/* Las secciones de contenido (hero, origen, técnicas, método, cronología,
   cierre) tienen su propio bloque responsive consolidado más abajo — ver
   "TRAYECTORIA / ABOUT". No se dupliquen reglas de esas secciones aquí. */

/* ═══════════════════════════════════════════════════════
   TRAYECTORIA / ABOUT — sistema de contenido consolidado
   Hero · Origen · Técnicas · Método · Cronología · Cierre
   Un único bloque, mobile-first, sin reglas duplicadas.
   ═══════════════════════════════════════════════════════ */

/* ── HERO ── */
.page-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(170px,250px);
  gap:clamp(32px,5vw,88px);
  align-items:end;
  padding:clamp(152px,17vw,248px) var(--m) clamp(84px,9vw,128px);
  border-bottom:1px solid var(--gr);
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(154,134,96,.06), transparent 26%),
    radial-gradient(circle at 82% 14%, rgba(14,14,12,.04), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 48%),
    var(--c);
}
.page-hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:
    linear-gradient(90deg, rgba(154,134,96,.09) 1px, transparent 1px),
    linear-gradient(rgba(154,134,96,.09) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.32), transparent 82%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.32), transparent 82%);
}
.page-hero .eyebrow{position:relative;z-index:1;margin-bottom:14px}
.page-hero h1{
  position:relative;
  z-index:1;
  font-family:'Playfair Display',serif;
  font-size:clamp(2.75rem,5.6vw,5.4rem);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-1.5px;
  color:var(--ink);
  max-width:780px;
}
.page-hero h1 em{font-style:italic;color:var(--gold)}
.gold-dot{color:var(--ink);font-style:normal}
.page-hero-sub{
  position:relative;
  z-index:1;
  font-size:.82rem;
  line-height:2.08;
  color:var(--ink3);
  font-weight:300;
  max-width:54ch;
  margin-top:26px;
}
.hero-kicker{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:28px;
}
.hero-kicker span{
  font-size:.44rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--ink4);
  font-weight:300;
  transition:color .35s var(--e);
}
.hero-kicker span:hover{color:var(--gold)}
.hero-kicker span + span{padding-left:12px;border-left:1px solid var(--gr)}

.hero-visual{
  position:relative;
  z-index:1;
  width:100%;
  max-width:230px;
  justify-self:end;
  align-self:end;
  isolation:isolate;
}
.hero-visual::before{
  content:'';
  position:absolute;
  inset:-16px -16px auto auto;
  width:74%;
  height:72%;
  border:1px solid rgba(154,134,96,.2);
  transform:translate(10px,-8px);
  pointer-events:none;
}
.hero-visual img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 14%;
  filter:brightness(.91) saturate(.86) contrast(1.03);
  transition:transform 2.2s var(--e);
}
.hero-visual:hover img{transform:scale(1.015)}
.hero-caption{
  margin-top:12px;
  font-size:.42rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--gold-l);
}

/* ── ORIGEN ── */
.origen{
  display:grid;
  gap:clamp(46px,6vw,72px);
  padding:clamp(100px,13vw,180px) var(--m);
  border-bottom:1px solid var(--gr);
  background:
    radial-gradient(circle at 84% 12%, rgba(154,134,96,.05), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    var(--c);
}
.origen-text{max-width:660px;margin-left:auto;margin-right:auto}
.origen-text h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,3.4vw,3.15rem);
  font-weight:300;
  line-height:1.15;
  margin:16px 0 28px;
  letter-spacing:-.35px;
  color:var(--ink);
}
.origen-text h2 em{font-style:italic;color:var(--gold)}
.origen-text p{
  font-size:.82rem;
  line-height:2.1;
  color:var(--ink3);
  font-weight:300;
}
.origen-text p + p{margin-top:18px}

.origen-card-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  max-width:1180px;
  background:var(--gr);
}
.origen-card{
  background:var(--cw);
  padding:28px 26px;
  transition:background .7s var(--e),transform .7s var(--e);
}
.origen-card:hover{background:var(--c);transform:translateY(-1px)}
.origen-card span{
  display:block;
  font-size:.44rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.origen-card p{
  font-size:.72rem;
  line-height:1.9;
  color:var(--ink3);
}

/* ── TÉCNICAS ── */
.tecnicas{
  padding:clamp(100px,13vw,180px) var(--m);
  border-bottom:1px solid var(--gr);
  background:
    radial-gradient(circle at 12% 8%, rgba(154,134,96,.06), transparent 18%),
    radial-gradient(circle at 86% 18%, rgba(14,14,12,.03), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
    var(--cw);
}
.tecnicas-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(24px,5vw,72px);
  align-items:end;
  max-width:1180px;
  margin:0 auto clamp(56px,7vw,96px);
}
.tecnicas-header h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,3.4vw,3.15rem);
  font-weight:300;
  line-height:1.1;
  margin-top:16px;
  letter-spacing:-.35px;
  max-width:560px;
  color:var(--ink);
}
.tecnicas-header h2 em{font-style:italic;color:var(--gold)}
.tecnicas-header p{
  font-size:.82rem;
  line-height:2.05;
  color:var(--ink3);
  max-width:42ch;
}
.tecnicas-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  max-width:1180px;
  margin:0 auto;
  background:var(--gr);
}
.tec-item{
  background:var(--cw);
  padding:clamp(34px,4.5vw,60px) clamp(24px,3.2vw,46px);
  transition:background .7s var(--e),transform .7s var(--e);
}
.tec-item:hover{background:var(--c);transform:translateY(-1px)}
.tec-num{
  font-family:'Playfair Display',serif;
  font-size:2.6rem;
  font-weight:300;
  color:rgba(154,134,96,.14);
  line-height:1;
  margin-bottom:22px;
  letter-spacing:-1px;
}
.tec-name{
  font-family:'Playfair Display',serif;
  font-size:1.06rem;
  font-weight:300;
  color:var(--ink);
  margin-bottom:14px;
}
.tec-desc{
  font-size:.76rem;
  line-height:2;
  color:var(--ink3);
  font-weight:300;
}

/* ── MÉTODO ── */
.metodo{
  padding:clamp(100px,13vw,180px) var(--m);
  border-bottom:1px solid var(--gr);
  background:
    radial-gradient(circle at 16% 85%, rgba(154,134,96,.05), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)),
    var(--cw);
}
.metodo-inner{max-width:1180px}
.metodo-copy{max-width:640px;margin:0 auto}
.metodo-copy .eyebrow{margin-bottom:14px}
.metodo-copy h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.85rem,2.8vw,2.6rem);
  font-weight:300;
  line-height:1.16;
  margin:0 0 28px;
  letter-spacing:-.3px;
  color:var(--ink);
}
.metodo-copy h2 em{font-style:italic;color:var(--gold)}
.metodo-copy p{
  font-size:.82rem;
  line-height:2.05;
  color:var(--ink3);
  font-weight:300;
}
.metodo-copy p + p{margin-top:18px}
.metodo-copy p strong{color:var(--ink2);font-weight:400}
.metodo-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:44px;
  background:var(--gr);
  max-width:1180px;
}
.metodo-card{
  background:var(--c);
  padding:26px 24px;
  transition:background .7s var(--e),transform .7s var(--e);
}
.metodo-card:hover{background:var(--cw);transform:translateY(-1px)}
.metodo-card span{
  display:block;
  font-size:.44rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.metodo-card p{
  font-size:.72rem;
  line-height:1.85;
  color:var(--ink3);
}
.metodo-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:36px;
  font-size:.68rem;
  letter-spacing:1px;
  color:var(--ink2);
  border-bottom:1px solid var(--gold);
  padding-bottom:4px;
  transition:color .35s var(--e),border-color .35s var(--e);
}
.metodo-link:hover{color:var(--gold);border-color:var(--gold-l)}

/* ── CRONOLOGÍA ── */
.cronologia{
  padding:clamp(100px,13vw,180px) var(--m);
  border-bottom:1px solid var(--gr);
  background:
    radial-gradient(circle at 84% 12%, rgba(154,134,96,.04), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    var(--c);
}
.cronologia-intro{max-width:700px;margin:0 auto clamp(56px,7vw,96px)}
.cronologia h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,3.4vw,3.15rem);
  font-weight:300;
  line-height:1.14;
  margin:16px 0 0;
  letter-spacing:-.35px;
  color:var(--ink);
}
.cronologia h2 em{font-style:italic;color:var(--gold)}
.timeline{display:flex;flex-direction:column;max-width:1180px}
.tl-item{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:clamp(24px,5vw,64px);
  padding:clamp(28px,3.6vw,46px) 4px;
  border-bottom:1px solid var(--gr);
  transition:background .6s var(--e);
}
.tl-item:first-child{border-top:1px solid var(--gr)}
.tl-item:hover{background:rgba(154,134,96,.035)}
.tl-year{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.7rem,2.4vw,2.15rem);
  font-weight:300;
  color:rgba(154,134,96,.24);
  line-height:1;
  padding-top:4px;
}
.tl-place{
  font-family:'Playfair Display',serif;
  font-size:1.08rem;
  font-weight:300;
  color:var(--ink);
  margin-bottom:8px;
}
.tl-role{
  display:block;
  font-size:.44rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:300;
  margin-bottom:14px;
}
.tl-desc{
  font-size:.78rem;
  line-height:2;
  color:var(--ink3);
  font-weight:300;
  max-width:560px;
}

/* ── CIERRE ── */
.page-cta{
  padding:clamp(120px,15vw,220px) var(--m);
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(154,134,96,.05), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)),
    var(--c);
}
.page-cta h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,4.3vw,4rem);
  font-weight:300;
  line-height:1.08;
  margin:20px 0 26px;
  letter-spacing:-.5px;
  color:var(--ink);
}
.page-cta h2 em{font-style:italic;color:var(--gold)}
.page-cta p{
  font-size:.8rem;
  color:var(--ink3);
  font-weight:300;
  max-width:360px;
  margin:0 auto 44px;
  line-height:2.05;
}

/* ── RESPONSIVE — puntos de corte únicos: 1060px / 720px ── */
@media(max-width:1060px){
  .page-hero{grid-template-columns:1fr}
  .hero-visual{width:min(100%,220px);justify-self:start}
  .tecnicas-header{grid-template-columns:1fr}
  .tecnicas-header p{max-width:64ch}
  .origen-card-row,
  .tecnicas-grid,
  .metodo-cards{grid-template-columns:1fr 1fr}
  .tl-item{grid-template-columns:120px 1fr}
}
@media(max-width:720px){
  .page-hero{
    padding-top:clamp(140px,28vw,190px);
    gap:24px;
  }
  .hero-visual{
    width:min(100%,190px);
    justify-self:center;
    margin-top:4px;
  }
  .hero-visual::before{inset:-12px -12px auto auto}
  .hero-visual img{object-position:center 12%}
  .origen-card-row,
  .tecnicas-grid,
  .metodo-cards{grid-template-columns:1fr}
  .tl-item{grid-template-columns:1fr;gap:10px}
}