*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:"Jost",system-ui,sans-serif;
  font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.6;}
:root{--paper:#EDE7DE; --paper-2:#E4DCD0; --ink:#2C2823; --ink-soft:#6B6259;
  --blush:#B08A7E; --line:rgba(44,40,35,.18); --overlay:#211E1A;
  --shadow:0 18px 40px -20px rgba(44,40,35,.45);}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:"Host Grotesk",system-ui,sans-serif; font-weight:500; margin:0; line-height:1.05; letter-spacing:-.03em;}
.eyebrow{font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.42em;
  font-size:.72rem; font-weight:400; color:var(--blush);}
.wrap{max-width:1200px; margin:0 auto; padding:0 clamp(1.2rem,4vw,2.5rem);}
nav{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; padding:.8rem clamp(1.2rem,4vw,2.5rem);
  background:rgba(237,231,222,.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line);}
nav .brand img{height:24px; width:auto; display:block}
nav .links{display:flex; gap:2rem; align-items:center}
nav .links a{text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--ink-soft);
  text-decoration:none; transition:color .3s ease}
nav .links a:hover{color:var(--blush)}
nav .links a.cta{border:1px solid var(--line); padding:.55rem .9rem}
@media(max-width:620px){ nav .links{gap:1.1rem} nav .links a{font-size:.62rem; letter-spacing:.14em} nav .links a.cta{display:none} }
nav .links a.lang{border-left:1px solid var(--line); padding-left:1.4rem}
.s-head{padding:9rem 0 3.5rem; text-align:center}
.s-head h1{font-size:clamp(2.4rem,6vw,4rem); margin:.9rem 0 0}
.s-head .lead{font-family:"Host Grotesk",system-ui,sans-serif;
  font-size:clamp(1.15rem,2.4vw,1.5rem); color:var(--ink-soft); max-width:40ch; margin:1.2rem auto 0}
.flourish{display:none}
.s-body{max-width:62ch; margin:0 auto; padding:1rem 0 2rem}
.s-body p{color:var(--ink-soft); font-size:1.02rem; margin:0 0 1.3rem; text-align:center}
.s-gal{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 3.5rem; align-items:start}
.s-gal img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; align-self:start; object-position:50% 50%}
@media(max-width:760px){ .s-gal{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .s-gal{grid-template-columns:1fr} }
.crumb{text-decoration:none; transition:color .3s}
.crumb span{opacity:.5; margin:0 .3em}
.crumb:hover{color:var(--ink)}
.s-gets{max-width:1000px; margin:0 auto 4.5rem; text-align:center}
.s-gets ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,3.5rem); text-align:left}
@media(max-width:700px){ .s-gets ul{grid-template-columns:1fr} }
.s-gets h2,.s-steps>h2{font-size:clamp(1.5rem,3vw,2rem); margin:.7rem 0 1.2rem}
.s-gets ul{list-style:none; margin:0; padding:0}
.s-gets li{border-top:1px solid var(--line); padding:.85rem 0 .85rem 1.6rem; position:relative; color:var(--ink)}
.s-gets li::before{content:""; position:absolute; left:0; top:1.45rem; width:.7rem; height:1px; background:var(--blush)}
.s-steps{max-width:1000px; margin:0 auto 4rem; text-align:center}
.s-steps ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,3vw,2rem); text-align:left; counter-reset:st}
.s-steps li{border-top:1px solid var(--ink); padding-top:1rem; counter-increment:st}
.s-steps li::before{content:counter(st, decimal-leading-zero); font-family:"Jost",sans-serif; font-size:.72rem; letter-spacing:.2em; color:var(--blush)}
.s-steps b{display:block; font-family:"Host Grotesk",system-ui,sans-serif; font-weight:500; font-size:1.15rem; letter-spacing:-.01em; margin:.5rem 0 .4rem}
.s-steps span{color:var(--ink-soft); font-size:.95rem}
@media(max-width:700px){ .s-steps ol{grid-template-columns:1fr} }
.addon{border:1px solid var(--line); background:var(--paper-2); padding:1.4rem 1.6rem;
  max-width:62ch; margin:0 auto 3.5rem; text-align:center; color:var(--ink-soft); font-size:.95rem}
.addon strong{font-family:"Host Grotesk",system-ui,sans-serif; font-weight:500;
  color:var(--ink); font-size:1.1rem}
.s-cta{text-align:center; padding:0 0 5rem}
.s-cta h2{font-size:clamp(1.8rem,4vw,2.6rem); margin:.8rem 0 1rem}
.s-cta p{color:var(--ink-soft); max-width:46ch; margin:0 auto 2rem}
.btn{font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.26em; font-size:.74rem;
  display:inline-block; padding:.95rem 2rem; border:1px solid var(--ink); color:var(--ink);
  text-decoration:none; transition:all .45s ease; margin:.3rem .25rem}
.btn:hover{background:var(--ink); color:var(--paper); letter-spacing:.32em}
.back-wrap{margin:3rem 0 0}
.back{display:inline-block; margin:0; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.22em; color:var(--ink-soft); text-decoration:none}
.back:hover{color:var(--blush)}
footer{background:var(--paper); text-align:center; padding:3rem 1.5rem; border-top:1px solid var(--line)}
footer .studio{font-family:"Host Grotesk",system-ui,sans-serif; font-size:1.2rem; margin:0}
footer p.small{margin:.3rem 0; color:var(--ink-soft); font-size:.82rem; letter-spacing:.04em}
/* TEMA OSCURO (aprobado 19-10, igual que la web principal) */
:root{--paper:#151412; --paper-2:#1B1917; --ink:#EDE7DE; --ink-soft:rgba(237,231,222,.66); --blush:#E9C27A; --line:rgba(237,231,222,.14); --overlay:#0F0E0D;}
body{background:var(--paper)}
nav{background:rgba(21,20,18,.88)}
nav .links a{color:rgba(237,231,222,.75)} nav .links a:hover{color:var(--blush)}
.eyebrow{color:#B8A99A} .crumb:hover{color:var(--blush)}
.s-gets .eyebrow,.s-steps .eyebrow,.s-cta .eyebrow{color:var(--blush)}
.s-gets li::before{background:var(--blush)}
.s-steps li{border-top-color:rgba(237,231,222,.35)}
.addon{background:var(--paper-2); border-color:rgba(233,194,122,.25)}
.btn{border-color:rgba(237,231,222,.6)} .btn:hover{background:var(--ink); color:var(--paper)}
.back:hover{color:var(--blush)}
footer{background:#0F0E0D}