/* ============================================================
   LIVEN GROUP · sistema editorial papelería
   Casa de fotografía y vídeo de boda · Madrid · MMX
   Paleta crema + tinta + caoba seco. Tipografía Cormorant Garamond + Inter.
   ============================================================ */

:root{
  /* === Paleta papelería === */
  --bg:          #F4EFE5;
  --bg-warm:     #EFE8D9;
  --paper:       #FBF7EE;
  --bg-deep:     #E4D9C7;
  --ink:         #161210;
  --ink-soft:    #3E342B;
  --muted:       #847868;
  --muted-2:     #A89E8E;
  --line:        #C8BDA8;
  --line-soft:   #DDD2BD;
  --accent:      #6B3320;
  --accent-soft: #8B5C3F;

  /* === Aliases legacy para compat con estilos inline en JSX === */
  --bg-2:        var(--bg-warm);
  --gold:        var(--accent);
  --gold-warm:   var(--accent-soft);
  --gold-deep:   var(--accent);

  /* === Tipo === */
  --serif:       "Cormorant Garamond", Georgia, serif;
  --sans:        "Inter", "Helvetica Neue", system-ui, sans-serif;
  --mono:        "Inter", ui-monospace, monospace;

  /* === Métrica === */
  --max:         1320px;
  --gut:         clamp(1.5rem, 4vw, 3rem);

  /* === Escala === */
  --fs-hero:     clamp(3.4rem, 8.6vw, 7.6rem);
  --fs-display:  clamp(2.4rem, 5vw, 4.4rem);
  --fs-h1:       clamp(1.9rem, 3.6vw, 3.2rem);
  --fs-h2:       clamp(1.4rem, 2.6vw, 2.2rem);
  --fs-lead:     clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:     1rem;
  --fs-cap:      0.62rem;

  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.55;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{position:relative;overflow-x:hidden;min-height:100vh}
body.lock{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--bg)}

/* ============ TIPOGRAFÍA UTILITARIA ============ */
.cap, .eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-cap);letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}
.num{
  font-family:var(--sans);font-size:var(--fs-cap);letter-spacing:.28em;
  color:var(--muted);font-feature-settings:"tnum" on;text-transform:uppercase;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.005em;
  line-height:1.15;
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h1)}
h3{font-size:var(--fs-h2);line-height:1.2}
h4{font-size:1.2rem;font-weight:500;letter-spacing:.005em;line-height:1.3}
em{font-style:italic;font-weight:inherit;color:var(--accent)}

.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft);max-width:42ch;font-weight:300;font-family:var(--serif);font-style:italic}
.body-text{max-width:54ch;color:var(--ink-soft);line-height:1.75;font-weight:300}

/* ============ LAYOUT ============ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ============ HEADER ============ */
header.site{
  position:sticky;top:0;left:0;right:0;z-index:50;
  background:rgba(244,239,229,.92);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
}
header.site .bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:1.2rem var(--gut);max-width:var(--max);margin:0 auto;gap:2rem;
}
.brand{
  display:flex;flex-direction:column;gap:.15rem;line-height:1;cursor:pointer;
}
.brand .b1{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.brand .b2{font-family:var(--sans);font-size:.5rem;letter-spacing:.6em;text-transform:uppercase;color:var(--muted);font-weight:400;padding-left:.1rem}

nav.primary{justify-self:center}
nav.primary ul{display:flex;gap:2.4rem;list-style:none;font-family:var(--sans);font-size:var(--fs-cap);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
nav.primary a{transition:color .35s var(--ease);position:relative;padding:.4rem 0;cursor:pointer}
nav.primary a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width .45s var(--ease-out);
}
nav.primary a:hover, nav.primary a.active{color:var(--accent)}
nav.primary a:hover::after, nav.primary a.active::after{width:100%}

.head-right{justify-self:end;display:flex;align-items:center;gap:1.4rem}
.lang{
  display:flex;gap:.5rem;font-family:var(--sans);font-size:var(--fs-cap);
  letter-spacing:.3em;text-transform:uppercase;align-items:center;
}
.lang button{padding:.3rem .1rem;color:var(--muted);transition:color .3s var(--ease);font-weight:400}
.lang button.active{color:var(--ink)}
.lang .sep{color:var(--muted)}

.cta-top{
  font-family:var(--sans);font-size:var(--fs-cap);
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;gap:.6rem;align-items:center;
  padding:.7rem 1.2rem;border:1px solid var(--ink);
  position:relative;overflow:hidden;
  transition:color .35s var(--ease);
}
.cta-top::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease-out);z-index:0}
.cta-top:hover::before{transform:translateY(0)}
.cta-top span{position:relative;z-index:1;display:inline-flex;gap:.6rem;align-items:center;transition:color .35s var(--ease)}
.cta-top:hover span{color:var(--bg)}

/* ============ ROUTES ============ */
main{padding-top:0;position:relative}
.route{display:none;animation:fadeUp .8s var(--ease-out) both}
.route.active{display:block}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* ============ HERO ============ */
.hero{
  padding:13vh 0 9vh;text-align:center;
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.hero .ornament{
  width:1px;height:54px;background:var(--accent);margin:0 auto 2.2rem;opacity:.55;
}
.hero .hero-eyebrow{margin-bottom:1.6rem;display:block}
.hero-tagline{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(.95rem,1.55vw,1.35rem);
  letter-spacing:.4em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:2.6rem;display:block;
}
.hero-mark{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-hero);line-height:.95;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);
}
.hero-mark .group{
  display:block;margin-top:.6rem;
  font-family:var(--sans);font-weight:400;font-size:clamp(.78rem,1vw,1rem);
  letter-spacing:.7em;text-transform:uppercase;color:var(--muted);
}
.hero-sub{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.1rem,1.5vw,1.4rem);color:var(--ink-soft);
  max-width:48ch;margin:2.6rem auto 0;line-height:1.55;
}
.hero-sub em{font-style:normal;color:var(--accent);font-weight:400}

.hero-firmas{
  margin:3.4rem auto 0;display:inline-flex;gap:1.4rem;align-items:center;flex-wrap:wrap;justify-content:center;
  font-family:var(--sans);font-size:var(--fs-cap);letter-spacing:.32em;text-transform:uppercase;color:var(--ink);
}
.hero-firmas .dot{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.55}

.hero-meta{
  margin:7vh auto 0;display:flex;justify-content:center;gap:4rem;flex-wrap:wrap;
  padding-top:3rem;border-top:1px solid var(--line-soft);max-width:820px;
}
.hero-meta .col{display:flex;flex-direction:column;gap:.5rem;align-items:center}
.hero-meta .k{font-family:var(--sans);font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.hero-meta .v{font-family:var(--serif);font-size:1.5rem;font-weight:400}
.hero-meta .v em{font-style:italic;color:var(--accent)}

/* ============ INTRO DE LA CASA (antes DUET) ============ */
.casa{padding:13vh 0 8vh;text-align:center}
.casa .eyebrow{margin-bottom:1.6rem;display:block}
.casa h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.2;letter-spacing:-.005em;
  max-width:32ch;margin:0 auto 2rem;
}
.casa h2 em{font-style:italic;color:var(--accent)}
.casa p{
  color:var(--ink-soft);font-family:var(--serif);font-weight:400;
  font-size:1.2rem;line-height:1.75;max-width:60ch;margin:0 auto 1.2rem;
}
.casa p:last-child{margin-bottom:0}

/* ============ LAS TRES FIRMAS ============ */
.firmas{padding:8vh 0 14vh;background:var(--paper)}
.firmas-head{text-align:center;margin-bottom:7vh}
.firmas-head .eyebrow{margin-bottom:1.4rem;display:block}
.firmas-head h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;letter-spacing:-.005em;
  max-width:24ch;margin:0 auto 1.4rem;
}
.firmas-head h3 em{font-style:italic;color:var(--accent)}
.firmas-head .sub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.15rem;color:var(--ink-soft);max-width:42ch;margin:0 auto;line-height:1.6}

.firmas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--line)}
.firma{
  padding:3.4rem 2.4rem 2.6rem;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;
  transition:background .5s ease;position:relative;min-height:540px;cursor:pointer;
}
.firma:hover{background:var(--bg-warm)}

.firma .roman{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1rem;color:var(--accent);letter-spacing:.05em;
}
.firma .tag{
  margin-top:.3rem;font-family:var(--sans);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-soft);padding:.4rem .85rem;border:1px solid var(--line);
}
.firma .filete-top{width:36px;height:1px;background:var(--accent);opacity:.5;margin:1rem 0 .4rem}
.firma .desc{color:var(--ink-soft);font-size:.97rem;line-height:1.7;max-width:34ch;margin-top:.6rem;flex:1;display:flex;align-items:center}
.firma .see{
  margin-top:.8rem;font-family:var(--sans);font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink);padding-bottom:.35rem;border-bottom:1px solid var(--ink);
  transition:color .35s,border-color .35s,letter-spacing .35s;
}
.firma .see:hover{color:var(--accent);border-bottom-color:var(--accent);letter-spacing:.36em}

/* Wordmarks distintos por nivel */
.firma-1 .mark{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.4rem,3.4vw,3rem);letter-spacing:.16em;text-transform:uppercase;
  line-height:1;color:var(--ink);
}
.firma-2{background:linear-gradient(180deg, var(--paper) 0%, #F8F2E5 100%)}
.firma-2 .corner{
  position:absolute;top:1.2rem;right:1.2rem;
  font-family:var(--serif);font-style:italic;font-size:.72rem;color:var(--accent);
  letter-spacing:.08em;
}
.firma-2 .mark{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(2rem,2.8vw,2.6rem);letter-spacing:-.005em;
  line-height:1.05;color:var(--accent);
}
.firma-2 .mark .surname{display:block;font-weight:500;font-style:italic;letter-spacing:.005em}
.firma-2 .filete-top{background:var(--accent);opacity:.85;width:52px}
.firma-3 .mark{display:flex;flex-direction:column;align-items:center;gap:.4rem;line-height:1}
.firma-3 .mark .pre{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;color:var(--muted);font-weight:400;
}
.firma-3 .mark .main{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,3.2vw,2.8rem);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}

/* ============ MANIFIESTO CITA ============ */
.manifest{padding:18vh 0;text-align:center}
.manifest .ornament-wide{
  display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-bottom:3rem;
}
.manifest .ornament-wide span{height:1px;width:60px;background:var(--accent);opacity:.5}
.manifest .ornament-wide .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.6}
.manifest h3, .manifest .q{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:1.3;letter-spacing:-.005em;
  max-width:32ch;margin:0 auto;color:var(--ink);
}
.manifest h3 em, .manifest .q em{font-style:italic;color:var(--accent)}
.manifest .sign{margin-top:3rem;font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:1.1rem}

/* ============ PROCESO ============ */
.proceso{padding:13vh 0;border-top:1px solid var(--line-soft);background:var(--bg-warm)}
.proceso-head{text-align:center;margin-bottom:6vh}
.proceso-head .eyebrow{margin-bottom:1.2rem;display:block}
.proceso-head h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3vw,2.4rem)}
.proceso-head h3 em{font-style:italic;color:var(--accent)}
.proceso-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem}
.proceso-cols .col{display:flex;flex-direction:column;gap:1rem}
.proceso-cols .num{font-family:var(--serif);font-style:italic;font-weight:400;font-size:2.2rem;color:var(--accent);line-height:1}
.proceso-cols h4{font-family:var(--serif);font-weight:500;font-size:1.3rem;letter-spacing:.005em}
.proceso-cols p{color:var(--ink-soft);font-size:.92rem;line-height:1.7}

/* ============ CIERRE / CTA BLOCK ============ */
.cta-block{padding:18vh var(--gut);text-align:center;border-top:1px solid var(--line-soft)}
.cta-block h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.1;max-width:22ch;margin:0 auto 1.6rem;letter-spacing:-.005em}
.cta-block h2 em{font-style:italic;color:var(--accent)}
.cta-block .lead{margin:0 auto 2rem;text-align:center}
.cta-block .btn-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.8rem;border:1px solid var(--ink);
  font-family:var(--sans);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink);background:transparent;
  position:relative;overflow:hidden;
  transition:color .35s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease-out);z-index:0;
}
.btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.6rem;transition:color .35s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover span{color:var(--bg)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid::before{background:var(--accent)}
.btn.solid:hover span{color:var(--bg)}
.btn.gold{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn.gold::before{background:var(--ink)}
.btn.gold:hover span{color:var(--bg)}
.btn.ghost{border-color:var(--line)}

.cta-link{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:.4rem;
  transition:gap .35s,letter-spacing .35s,color .35s,border-color .35s;
  background:none;cursor:pointer;
}
.cta-link:hover{gap:1.6rem;color:var(--accent);border-bottom-color:var(--accent)}

/* ============ FOOTER ============ */
footer.site{
  background:var(--ink);
  color:rgba(244,239,229,.75);
  padding:9vh var(--gut) 2.5rem;position:relative;overflow:hidden;
  margin-top:0;
}
.footer-mark{
  text-align:center;padding-bottom:6vh;border-bottom:1px solid rgba(244,239,229,.15);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.footer-mark .m1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3rem,9vw,6.5rem);letter-spacing:.22em;text-transform:uppercase;
  color:var(--bg);line-height:.9;
}
.footer-mark .m1 em{font-style:italic;color:#C8956E;font-weight:400;letter-spacing:.05em}
.footer-mark .m2{font-family:var(--sans);font-size:.62rem;letter-spacing:.6em;text-transform:uppercase;color:rgba(244,239,229,.45);font-weight:400}

.footer-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  padding:5vh 0;
}
.footer-grid h4{
  font-family:var(--sans);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(244,239,229,.45);font-weight:400;margin-bottom:1.2rem;
}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;font-size:.92rem}
.footer-grid a, .footer-grid li{color:rgba(244,239,229,.8);transition:color .3s var(--ease);cursor:pointer;font-family:var(--sans)}
.footer-grid a:hover{color:var(--bg)}
.footer-grid li.tier{display:flex;flex-direction:column;gap:.18rem;cursor:pointer}
.footer-grid li.tier .name{color:var(--bg)}
.footer-grid li.tier .role{font-family:var(--sans);font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,239,229,.4)}
.footer-grid .blurb{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.3;max-width:24ch;letter-spacing:-.005em;color:var(--bg)}
.footer-grid .blurb em{font-style:italic;color:#C8956E}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:2rem;border-top:1px solid rgba(244,239,229,.15);
  font-family:var(--sans);font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(244,239,229,.45);flex-wrap:wrap;gap:1rem;
}
.footer-bottom a{color:rgba(244,239,229,.7);margin-left:1.4rem;cursor:pointer}
.footer-bottom a:hover{color:var(--bg)}

/* ============ FIRMA PAGE ============ */
.firma-page{padding:5vh 0 0}
.firma-hero{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);
  align-items:end;min-height:70vh;padding:8vh 0 6vh;
}
.firma-hero .left{display:flex;flex-direction:column;gap:1.8rem}
.firma-hero .num-mark{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:1rem;align-items:center;
}
.firma-hero .num-mark::before{content:"";width:60px;height:1px;background:var(--accent);opacity:.7}
.firma-hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:var(--fs-display);line-height:1.05;letter-spacing:-.005em;
  text-wrap:balance;color:var(--ink);
}
.firma-hero h1 em{font-style:italic;color:var(--accent);font-weight:300}
.firma-hero .right{position:relative;aspect-ratio:4/5;background:var(--bg-deep);overflow:hidden}
.firma-hero .right .img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.85) contrast(1.02)}

.firma-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:2.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-warm);
}
.firma-stats .stat{padding:0 1.6rem;border-right:1px solid var(--line);text-align:center}
.firma-stats .stat:last-child{border-right:none}
.firma-stats .num-xl{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3vw,2.8rem);line-height:1;letter-spacing:-.005em;color:var(--ink);
}
.firma-stats .num-xl em{font-style:italic;color:var(--accent)}
.firma-stats .lbl{font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:.8rem}

.two-col{
  display:grid;grid-template-columns:1fr 1.3fr;gap:var(--gut);
  margin:14vh 0;align-items:start;
}
.two-col.flip{grid-template-columns:1.3fr 1fr}
.two-col .copy{position:sticky;top:7rem;display:flex;flex-direction:column;gap:1.4rem}
.two-col .copy h2{font-family:var(--serif);font-weight:300;line-height:1.1;letter-spacing:-.005em}
.two-col .copy h2 em{font-style:italic;color:var(--accent)}
.two-col .stack{display:flex;flex-direction:column;gap:1.6rem}
.two-col .frame{position:relative;background:var(--bg-deep);overflow:hidden}
.two-col .frame.tall{aspect-ratio:4/5}
.two-col .frame.wide{aspect-ratio:16/10}
.two-col .frame .img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.85)}

.process{margin:14vh 0 0;border-top:1px solid var(--line-soft);background:var(--bg-warm)}
.process-head{padding:5rem var(--gut) 2rem;max-width:var(--max);margin:0 auto;text-align:center}
.process-head h2{font-family:var(--serif);font-weight:300;letter-spacing:-.005em}
.process-head h2 em{font-style:italic;color:var(--accent)}
.process .pr{
  display:grid;grid-template-columns:160px 1fr 2fr auto;
  gap:2rem;align-items:baseline;
  padding:2.4rem var(--gut);
  border-bottom:1px solid var(--line-soft);
  max-width:var(--max);margin:0 auto;
  transition:background .4s var(--ease);
}
.process .pr:last-child{border-bottom:none}
.process .pr:hover{background:var(--bg)}
.process .pr h4{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.6rem);letter-spacing:.005em}
.process .pr p{color:var(--ink-soft);max-width:52ch;line-height:1.7;font-size:.95rem}
.process .pr .num, .process .pr .time{font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;color:var(--muted);text-transform:uppercase}

.packs{
  margin:0 0 14vh;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.pack{
  background:var(--paper);padding:3rem 2.2rem;
  display:flex;flex-direction:column;gap:1.2rem;min-height:480px;
  transition:background .4s var(--ease);position:relative;
}
.pack:hover{background:var(--bg-warm)}
.pack.feat{background:var(--ink);color:var(--bg)}
.pack.feat:hover{background:#232017}
.pack.feat .pack-name, .pack.feat ul li, .pack.feat .pack-desc{color:rgba(244,239,229,.88)}
.pack.feat .num, .pack.feat .cap{color:rgba(244,239,229,.5)}
.pack .pack-name{font-family:var(--serif);font-size:1.6rem;font-weight:500;letter-spacing:.005em;line-height:1.2}
.pack .pack-name em{font-style:italic;color:var(--accent);font-weight:400}
.pack.feat .pack-name em{color:#C8956E}
.pack .pack-desc{color:var(--ink-soft);max-width:32ch;line-height:1.6;font-size:.95rem}
.pack ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-top:auto;font-size:.92rem}
.pack ul li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-soft);line-height:1.5;font-family:var(--sans)}
.pack ul li::before{content:"—";color:var(--muted);flex:0 0 auto}
.pack.feat ul li::before{color:rgba(244,239,229,.4)}
.pack .badge{
  font-family:var(--sans);font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;
  align-self:flex-start;padding:.4rem .8rem;background:var(--accent);color:#fff;
}

/* ============ CONTACTO ============ */
.contact-stage{
  min-height:80vh;display:grid;grid-template-columns:1fr 1.1fr;gap:var(--gut);
  align-items:start;padding:8vh 0 4vh;
}
.contact-intro{position:sticky;top:7rem;display:flex;flex-direction:column;gap:1.6rem}
.contact-intro h1{font-family:var(--serif);font-weight:300;font-size:var(--fs-display);letter-spacing:-.005em;line-height:1.05;text-wrap:balance;color:var(--ink)}
.contact-intro h1 em{font-style:italic;color:var(--accent);font-weight:300}
.contact-meta{margin-top:2rem;display:flex;flex-direction:column;gap:.4rem}
.contact-meta .row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line-soft);padding:.9rem 0;font-size:.95rem;font-family:var(--sans);color:var(--ink-soft)}
.contact-meta .row .k{color:var(--muted);font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase}

.form{padding-top:1rem}
.progress{display:flex;gap:.4rem;margin-bottom:3rem}
.progress span{flex:1;height:2px;background:var(--line);transition:background .5s var(--ease)}

.step{display:none;animation:stepIn .55s var(--ease-out) both}
.step.active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step .step-meta{display:flex;justify-content:space-between;margin-bottom:1.4rem}
.step h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.005em;
  margin-bottom:2rem;line-height:1.2;text-wrap:balance;color:var(--ink);
}
.step h2 em{font-style:italic;color:var(--accent);font-weight:300}

.field{margin-bottom:1.6rem}
.field label{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.field input, .field textarea, .field select{
  width:100%;border:none;border-bottom:1px solid var(--line);
  background:transparent;padding:.7rem 0;font-size:1.05rem;
  font-family:var(--serif);font-weight:400;color:var(--ink);
  transition:border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none;border-color:var(--accent)}
.field input::placeholder, .field textarea::placeholder{color:var(--muted-2);font-style:italic;font-family:var(--serif)}
.field textarea{resize:vertical;min-height:90px}

.opts{display:flex;flex-direction:column;gap:.5rem}
.opts.row{flex-direction:row;flex-wrap:wrap}
.opts.row .opt{flex:1;min-width:140px}
.opt{
  display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;
  border:1px solid var(--line);cursor:pointer;
  transition:all .3s var(--ease);font-size:.97rem;font-family:var(--sans);
  background:var(--paper);
}
.opt:hover{border-color:var(--ink);background:var(--bg-warm)}
.opt input{display:none}
.opt .dot-r{width:10px;height:10px;border:1px solid var(--muted);transition:all .3s var(--ease);flex:0 0 auto;border-radius:50%}
.opt:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--bg)}
.opt:has(input:checked) .dot-r{background:var(--accent);border-color:var(--accent)}
.opt .opt-text{display:flex;flex-direction:column;gap:.15rem;flex:1}
.opt .opt-text .ot-sub{font-family:var(--sans);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.opt:has(input:checked) .opt-text .ot-sub{color:rgba(244,239,229,.65)}

.step-actions{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;gap:1rem}
.btn-link{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);transition:color .3s var(--ease);background:none;border:none;cursor:pointer;
}
.btn-link:hover{color:var(--ink)}
.btn-link[disabled]{opacity:0;pointer-events:none}

.thanks h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:1.2rem;letter-spacing:-.005em}
.thanks h2 em{font-style:italic;color:var(--accent)}
.thanks .ok{
  width:48px;height:48px;border:1px solid var(--accent);color:var(--accent);
  display:grid;place-items:center;font-size:1.2rem;margin-bottom:1.6rem;
}
.thanks .next{margin-top:3rem;display:flex;flex-direction:column;gap:.4rem;border-top:1px solid var(--line-soft);padding-top:2rem}
.thanks .next a{
  font-size:1.1rem;font-family:var(--serif);
  padding:.9rem 0;border-bottom:1px solid var(--line-soft);
  display:flex;justify-content:space-between;transition:padding .35s var(--ease);
}
.thanks .next a:hover{padding-left:.6rem}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px){
  nav.primary{display:none}
  .head-right{gap:1rem}
  .cta-top{padding:.55rem .9rem}
  .hero{padding:9vh 0 6vh}
  .hero-meta{flex-direction:column;gap:1.4rem}
  .hero-firmas{flex-direction:column;gap:.6rem}
  .hero-firmas .dot{display:none}
  .casa{padding:9vh 0 6vh}
  .firmas{padding:6vh 0 10vh}
  .firmas-grid{grid-template-columns:1fr}
  .firma{min-height:auto;padding:2.8rem 1.6rem;border-bottom:1px solid var(--line)}
  .firma:last-child{border-bottom:none}
  .proceso-cols{grid-template-columns:1fr 1fr;gap:2rem}
  .firma-hero{grid-template-columns:1fr;gap:3rem;min-height:auto}
  .firma-stats{grid-template-columns:1fr}
  .firma-stats .stat{border-right:none;border-bottom:1px solid var(--line);padding:1.4rem 1.6rem}
  .firma-stats .stat:last-child{border-bottom:none}
  .two-col, .two-col.flip{grid-template-columns:1fr;gap:3rem;margin:8vh 0}
  .two-col .copy{position:relative;top:0}
  .process .pr{grid-template-columns:auto 1fr;gap:1rem}
  .process .pr p, .process .pr .time{grid-column:1/-1}
  .packs{grid-template-columns:1fr;margin-bottom:10vh}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .contact-stage{grid-template-columns:1fr;gap:3rem}
  .contact-intro{position:relative;top:0}
}
@media (max-width: 560px){
  .footer-grid{grid-template-columns:1fr}
  .proceso-cols{grid-template-columns:1fr}
  .hero-mark{font-size:clamp(2.8rem,12vw,5.5rem)}
  .hero-meta{gap:1rem;padding-top:2rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}