/* =========================================================
   ESTUDIO PEIRANO — Dirección C · "Boutique Editorial"
   Base: tokens, reset, nav, hero, márgenes editoriales, footer.
   Fraunces lidera. Inter como voz de lectura.
   ========================================================= */

:root{
  --navy:#0A1B2D; --navy-soft:#28384C; --navy-deep:#06101C;
  --off:#F4F4F0; --paper:#FAFAF6; --white:#FFFFFF;
  --gold:#C9A86A; --gold-soft:#D9BE8A; --gold-deep:#A88748;
  --gray-text:#5B6878; --gray-quiet:#8A95A4; --gray-on-dark:#A8B4C4;
  --rule:#D8D8D0; --rule-soft:#E6E5DC; --rule-dark:rgba(255,255,255,.13); --rule-dark-soft:rgba(255,255,255,.07);
  --wa:#25D366; --wa-dark:#1FB855; --err:#C0392B; --ok:#27AE60;

  --max:1240px; --pad:40px; --margin-col:210px; --gutter:64px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --tight:'Inter Tight','Inter',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:240ms cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px;overflow-x:hidden;}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--navy);background:var(--paper);
  font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:hidden;width:100%;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--navy);text-decoration:none;transition:color var(--ease);}
ul,ol{list-style:none;padding:0;margin:0;}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;}
input,textarea,select{font-family:inherit;font-size:16px;color:var(--navy);}
.skip-link{position:absolute;top:-46px;left:16px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:3px;z-index:10000;font-size:14px;font-weight:500;transition:top 200ms;}
.skip-link:focus{top:16px;outline:2px solid var(--gold);outline-offset:2px;}

/* ---------- Editorial atoms ---------- */
.gold-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;flex:0 0 auto;}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;line-height:1;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);}
.eyebrow::after{content:"";width:54px;height:1px;background:var(--rule);}
.eyebrow--on-dark{color:var(--gold-soft);}
.eyebrow--on-dark::after{background:var(--rule-dark);}

/* display title — sans-led, serif solo en el acento */
.disp{font-family:var(--tight);font-weight:500;font-size:clamp(34px,4.6vw,60px);line-height:1.05;letter-spacing:-.032em;color:var(--navy);margin:0;text-wrap:balance;}
.disp .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold-deep);letter-spacing:-.02em;}
.disp--on-dark{color:var(--off);}
.disp--on-dark .it{color:var(--gold-soft);}

.lead-serif{font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--gray-text);letter-spacing:-.005em;}

/* marginal note (rotated, gold left-border) */
.note{font-family:var(--mono);font-size:11px;letter-spacing:.03em;line-height:1.7;color:var(--gray-quiet);border-left:1px solid var(--gold);padding-left:14px;max-width:170px;}
.note .em{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gold-deep);display:block;margin-bottom:8px;}
.note--on-dark{color:var(--gray-on-dark);}
.note--on-dark .em{color:var(--gold-soft);}

/* ---------- Buttons / links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:-.003em;padding:15px 30px;border-radius:2px;min-height:48px;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background var(--ease),color var(--ease),transform var(--ease),box-shadow var(--ease),border-color var(--ease);}
.btn-sm{padding:11px 20px;font-size:14px;min-height:40px;}
.btn-block{width:100%;}
.btn-primary{background:var(--navy);color:var(--off);}
.btn-primary:hover{background:var(--navy-soft);color:#fff;transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(10,27,45,.55);}
.btn-on-dark{background:var(--off);color:var(--navy);}
.btn-on-dark:hover{background:#fff;transform:translateY(-1px);}
.link-serif{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:4px;transition:color var(--ease),border-color var(--ease);}
.link-serif .arrow{display:inline-block;transition:transform var(--ease);}
.link-serif:hover{color:var(--gold-deep);}
.link-serif:hover .arrow{transform:translateX(4px);}
.btn-spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin 700ms linear infinite;}
.btn.is-loading .btn-label{opacity:.6;}.btn.is-loading .btn-spinner{display:inline-block;}
.btn[disabled]{opacity:.7;cursor:not-allowed;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 720ms cubic-bezier(.2,.7,.2,1),transform 720ms cubic-bezier(.2,.7,.2,1);}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* =========================================================
   EDITORIAL SECTION SCAFFOLD  (margin-note column + main)
   ========================================================= */
.esec{position:relative;}
.ewrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:var(--margin-col) 1fr;gap:var(--gutter);}
.emargin{position:relative;padding-top:8px;}
.emargin .sec-no{font-family:var(--serif);font-style:italic;font-weight:300;font-size:54px;line-height:1;color:var(--gold-deep);opacity:.9;}
.emargin .sec-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-quiet);margin-top:14px;}
.emargin .note{margin-top:30px;}
.emain{min-width:0;}
.esec--dark{background:var(--navy);color:var(--off);}
.esec--dark .emargin .sec-no{color:var(--gold-soft);}
.esec--dark .emargin .sec-tag{color:var(--gray-on-dark);}

.sec-pad{padding:104px 0;}
.sec-pad-lg{padding:128px 0;}

/* hairline divider */
.erule{height:1px;background:var(--rule);max-width:calc(var(--max) - var(--pad)*2);margin:0 auto;}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background var(--ease),border-color var(--ease);transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.site-header.is-scrolled{background:rgba(250,250,246,.9);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-bottom-color:var(--rule);}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:92px;display:flex;align-items:center;justify-content:space-between;}
.nav-brand{display:inline-flex;align-items:center;}
.nav-brand img{height:var(--header-logo-h,120px);width:auto;display:block;}
.nav-links{display:none;align-items:center;gap:38px;}
.nav-links a:not(.btn){font-size:14px;color:var(--navy);letter-spacing:-.005em;position:relative;padding:3px 0;}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--ease);}
.nav-links a:not(.btn):hover::after,.nav-links a.is-active::after{transform:scaleX(1);}
.nav-links a.nav-cta{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--gold-deep);}
.nav-links a.nav-cta::after{background:var(--gold-deep);}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border-radius:3px;}
.nav-toggle span{display:block;height:1.5px;background:var(--navy);border-radius:2px;transition:transform var(--ease),opacity var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mobile-menu{position:fixed;top:92px;left:0;right:0;bottom:0;background:var(--paper);z-index:90;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--ease),transform var(--ease),visibility var(--ease);}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:none;}
.mobile-menu nav{display:flex;flex-direction:column;gap:2px;padding:24px var(--pad);}
.mobile-menu a{font-family:var(--tight);font-weight:500;font-size:26px;letter-spacing:-.02em;padding:16px 4px;border-bottom:1px solid var(--rule);display:flex;align-items:baseline;gap:16px;}
.mobile-menu a .mn{font-family:var(--mono);font-size:13px;color:var(--gold-deep);font-style:normal;letter-spacing:.05em;}
.mobile-menu a.nav-cta{color:var(--gold-deep);border-bottom:0;margin-top:14px;}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;overflow:hidden;padding-top:92px;}
.hero-glyph{position:absolute;right:-70px;top:50%;transform:translateY(-50%);font-family:var(--serif);font-style:italic;font-weight:300;font-size:min(600px,44vw);line-height:1;color:var(--navy);opacity:.035;user-select:none;z-index:0;pointer-events:none;}
.hero-monogram{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:min(560px,44vw);height:auto;opacity:.05;filter:saturate(0);z-index:0;pointer-events:none;user-select:none;}
.hero-wrap{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:72px var(--pad) 96px;display:grid;grid-template-columns:var(--margin-col) 1fr;gap:var(--gutter);}
.hero-aside{position:relative;padding-top:6px;}
.hero-aside .meta{position:absolute;bottom:0;left:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-quiet);line-height:2.2;}
.hero-aside .meta b{color:var(--navy);font-weight:500;}
.hero-main{min-width:0;}
.hero-overline{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 36px;display:flex;align-items:center;gap:12px;}
.hero-overline::after{content:"";width:70px;height:1px;background:var(--rule);}
.hero-title{font-family:var(--tight);font-weight:500;font-size:clamp(40px,5.6vw,70px);line-height:1.02;letter-spacing:-.035em;margin:0;color:var(--navy);text-wrap:balance;}
.hero-title .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold-deep);letter-spacing:-.025em;}
.hero-leadrow{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:46px;max-width:880px;align-items:start;}
.hero-lead{font-size:16px;line-height:1.62;color:var(--gray-text);}
.hero-lead .dropcap{float:left;font-family:var(--serif);font-weight:400;font-size:52px;line-height:.72;padding:5px 11px 0 0;color:var(--gold-deep);}
.hero-lead.col2{font-size:15px;color:var(--gray-quiet);border-left:1px solid var(--rule);padding-left:28px;}
.hero-ctas{display:flex;align-items:center;gap:32px;margin-top:48px;flex-wrap:wrap;}
.hero-foot{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:24px var(--pad) 30px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-quiet);}
.hero-foot .s{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:15px;color:var(--gold-deep);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--navy);color:var(--gray-on-dark);}
.footer-wrap{max-width:var(--max);margin:0 auto;padding:52px var(--pad) 40px;}
.footer-margin .sec-no{font-family:var(--serif);font-style:italic;font-weight:300;font-size:46px;color:var(--gold-soft);}
.footer-margin .sec-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-on-dark);margin-top:12px;}
.footer-top{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:stretch;}
.footer-brand{display:flex;align-items:center;justify-content:center;}
.footer-logo{height:var(--footer-logo-h,168px);width:auto;opacity:.95;}
.footer-tag{margin-top:20px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;color:var(--gold-soft);max-width:22ch;line-height:1.4;}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.footer-col-title{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 16px;}
.footer-columns ul{display:flex;flex-direction:column;gap:11px;}
.footer-columns a,.footer-columns li{font-size:14px;color:var(--gray-on-dark);}
.footer-columns a:hover{color:var(--off);}
.footer-bottom{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 60px;}
.footer-bottom-inner{border-top:1px solid var(--rule-dark);padding-top:24px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-quiet);}
.footer-bottom-inner a{color:var(--gray-on-dark);}
.footer-bottom-inner a:hover{color:var(--off);}
.footer-bottom-inner .s{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:14px;color:var(--gold-soft);}

/* FAB */
.fab-whatsapp{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;z-index:120;box-shadow:0 10px 28px rgba(10,27,45,.22),0 2px 4px rgba(0,0,0,.08);opacity:0;transform:translateY(10px) scale(.9);transition:opacity 320ms,transform 320ms,background var(--ease);}
.fab-whatsapp.is-visible{opacity:1;transform:none;}
.fab-whatsapp:hover{background:var(--wa-dark);color:#fff;transform:translateY(-2px);}
.fab-whatsapp svg{width:28px;height:28px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:1025px){.nav-links{display:flex;}.nav-toggle{display:none;}}
@media (max-width:1024px){:root{--margin-col:150px;--gutter:40px;--pad:32px;}}
@media (max-width:860px){
  :root{--pad:24px;}
  .ewrap,.hero-wrap,.footer-wrap{grid-template-columns:1fr;gap:28px;}
  .emargin{display:flex;align-items:baseline;gap:18px;padding-top:0;}
  .emargin .sec-no{font-size:38px;}
  .emargin .sec-tag{margin-top:0;}
  .emargin .note{display:none;}
  .hero-aside{display:none;}
  .hero-glyph{display:none;}
  .hero-monogram{display:none;}
  .hero-leadrow{grid-template-columns:1fr;gap:24px;}
  .hero-lead.col2{border-left:0;padding-left:0;}
  .footer-top{grid-template-columns:1fr;gap:30px;}
  .footer-columns{grid-template-columns:1fr 1fr;}
  .sec-pad,.sec-pad-lg{padding:72px 0;}
}