@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/poppins-300.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-600.woff2") format("woff2")}
:root{--paper:#f5f2ec;--ink:#17150f;--mute:#5d574c;--line:#d9d3c6;--card:#ece7dd;--copper:#bf8d5f;--accent:#80522a;--onacc:#17150f;--ease:cubic-bezier(.22,.61,.36,1);--gap:clamp(6rem,15vw,13rem);--serif:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--paper:#11100d;--ink:#f1ede4;--mute:#b3ab9c;--line:#34302a;--card:#1b1915;--accent:#bf8d5f;--onacc:#17150f}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;transition:color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease),text-decoration-color .3s var(--ease)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,#result:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:60}

/* ---- tipografía: títulos grandes y livianos */
h1,h2,.big{font-family:var(--serif);font-weight:300;letter-spacing:-.03em;line-height:1.08;margin:0;overflow-wrap:break-word}
h3,.brand-n{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4.7rem)}
h2{font-size:clamp(1.8rem,3.8vw,3.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.15em}
.eyebrow{font:500 .7rem/1.3 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:0 0 1.4rem}
.eyebrow a{text-decoration:none}
.small{font-size:.875rem;color:var(--mute)}
.btn{display:inline-block;background:var(--copper);color:var(--onacc);font:500 .86rem/1 var(--serif);letter-spacing:.06em;padding:1.15rem 1.8rem;border:0;border-radius:2px;text-decoration:none;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),filter .35s var(--ease)}
.btn:hover{filter:brightness(1.1)}
.btn-s{padding:.72rem 1.05rem;font-size:.76rem}
.more{display:inline-block;font:500 .86rem/1.4 var(--serif);letter-spacing:.04em;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.2em}
.more:hover{opacity:.68}

/* ---- cabecera: una sola línea fina */
header.site{position:sticky;top:0;z-index:30;background:#000;color:#f1ede4;border-bottom:1px solid #2a2622;transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.head-in{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;min-height:66px;padding:.55rem 0}
.brand{text-decoration:none;display:flex;flex-direction:column;gap:.28rem;margin-right:auto}
.logo{height:24px;width:auto;display:block}.logo-f{height:44px;margin-bottom:.5rem}
header.site .brand-by,footer.site .brand-by{color:#a89f8f}
.brand-n{font-size:1.25rem;letter-spacing:.02em}
.brand-by{font:400 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0}
header.site .brand-by{font-size:.55rem;letter-spacing:.22em;line-height:1}
header nav{display:flex;flex-wrap:wrap;gap:.2rem 1.15rem;font:400 .8rem/1.4 var(--serif);letter-spacing:.03em}
header nav a{text-decoration:none;padding:.35rem 0;border-bottom:1px solid transparent}
header nav a:hover,header nav a[aria-current]{border-color:var(--copper)}
header.site a:focus-visible,header.site button:focus-visible,footer.site a:focus-visible{outline-color:var(--copper)}
.head-r{display:flex;align-items:center;gap:1rem}
.lang{font:400 .8rem/1.4 var(--serif);letter-spacing:.03em}
.menu-b{display:none;align-items:center;gap:.55rem;background:none;border:1px solid #4a443c;color:inherit;font:400 .74rem/1 var(--serif);letter-spacing:.12em;text-transform:uppercase;padding:.62rem .8rem;border-radius:2px;cursor:pointer}
.menu-i{display:block;width:14px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.nav-cta{display:none}
@media (min-width:1000px){
.head-in{flex-wrap:nowrap}
.brand{margin-right:0}
header nav{flex-wrap:nowrap;white-space:nowrap;margin-left:auto}
}
@media (max-width:999px){
header nav{order:5;width:100%}
.head-r .btn-s{display:none}
.js .menu-b{display:inline-flex;order:3}
.js .head-r{order:2}
.js header nav{display:none;flex-direction:column;gap:0;padding:.4rem 0 1.2rem;font-size:1.05rem}
.js header.open nav{display:flex}
.js header nav a{padding:.85rem 0;border-bottom:1px solid #2a2622}
.js header nav a[aria-current]{border-color:var(--copper)}
.js .nav-cta{display:block;color:var(--copper)}
}
/* portada: cabecera superpuesta al héroe; sólida al bajar (requiere JS; sin JS se va con el héroe) */
.p-home header.site{position:absolute;inset:0 0 auto 0;background:transparent;border-bottom-color:transparent}
.js .p-home header.site{position:fixed}
.js.scrolled .p-home header.site,.js .p-home header.site.open{background:rgba(0,0,0,.94);border-bottom-color:#2a2622}

/* ---- héroe a pantalla completa */
.hero{position:relative;display:flex;align-items:flex-end;min-height:100vh;min-height:max(100svh,560px);background:#0b0a09;color:#f4f0e8;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,0) 24%),linear-gradient(0deg,rgba(8,7,6,.9) 0%,rgba(8,7,6,.42) 42%,rgba(8,7,6,0) 72%),linear-gradient(90deg,rgba(8,7,6,.62) 0%,rgba(8,7,6,0) 62%)}
.hero-t{position:relative;z-index:1;padding-bottom:clamp(3rem,10vh,6.5rem)}
.hero-t h1{font-size:clamp(2.6rem,7.2vw,6.2rem);line-height:1.02;max-width:13ch;margin-bottom:clamp(1.8rem,4vh,2.8rem);text-shadow:0 1px 30px rgba(0,0,0,.55)}
.hero .btn{background:#f4f0e8;color:#17150f}

/* ---- ritmo vertical: más aire */
section{margin-block:var(--gap)}
section.hero{margin:0}
.lead{margin-block:clamp(4.5rem,10vw,8.5rem) clamp(3rem,7vw,5.5rem)}
.lead h1{max-width:17ch}
.intro{font-family:var(--serif);font-weight:300;font-size:clamp(1.12rem,1.9vw,1.4rem);line-height:1.6;max-width:62ch;margin-top:2rem;color:var(--ink)}
.byline{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:1.8rem}
.manifesto .big{font-size:clamp(1.75rem,3.9vw,3.2rem);line-height:1.18;max-width:21em;margin-bottom:2.4rem}
.manifesto .intro{margin:0 0 2.2rem;max-width:64ch}
figure{margin:0}
figcaption{font-size:.72rem;line-height:1.55;letter-spacing:.09em;color:var(--mute);padding-top:.75rem;border-top:1px solid var(--line);margin-top:.75rem}
.ph{display:block;overflow:hidden}
.ph img{transition:transform 1.6s var(--ease)}
@media (hover:hover){a.card:hover .ph img,figure:hover .ph img,.step:hover .ph img,.model:hover .ph img{transform:scale(1.035)}}
.spread{display:grid;gap:2.4rem;align-items:end}
.spread-t h2{margin-bottom:1.4rem}
.spread-t p{max-width:60ch}
.spread-t .more{margin-top:.6rem}
.f-tall img{aspect-ratio:4/5;object-fit:cover;width:100%}
.f-wide img{aspect-ratio:3/2;object-fit:cover;width:100%}
.f-sq img{aspect-ratio:1/1;object-fit:cover;width:100%;background:#e9e9e7}
.f-full img{width:100%;max-height:82vh;object-fit:cover}
.f-crop img{aspect-ratio:16/9}
.trio,.grid3{display:grid;gap:2.8rem 1.8rem}
.grid3 img,.card img{aspect-ratio:4/5;object-fit:cover;width:100%}
.card{text-decoration:none;display:block}
.card .eyebrow{margin:1.3rem 0 .6rem}
.card h3{margin-bottom:.5rem}
.card p{color:var(--mute);margin:0;max-width:34ch}
.card:hover h3{text-decoration:underline;text-decoration-thickness:1px}
.sec{margin-bottom:2.4rem;max-width:18ch}
.cols{display:grid;gap:3rem}
.prose{max-width:66ch}
.prose h2{margin:3.2rem 0 1.1rem;font-size:clamp(1.55rem,2.9vw,2.2rem)}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.5rem}
.specs{background:var(--card);padding:2rem;align-self:start}
.specs h2{font-size:1.35rem;font-weight:400;letter-spacing:-.01em;margin-bottom:1.1rem}
dl{margin:0}
dl div{padding:.8rem 0;border-top:1px solid var(--line)}
dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
dd{margin:.2rem 0 0}
.tw{overflow-x:auto;margin:1rem 0 1.4rem}
table{border-collapse:collapse;width:100%;min-width:30rem;font-size:.95rem}
th,td{text-align:left;padding:.8rem .8rem .8rem 0;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500}
tbody th{font-weight:500}
.faq details{border-top:1px solid var(--line);padding:1.15rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--serif);font-weight:400;font-size:1.08rem}
.faq p{margin:.8rem 0 0;color:var(--mute)}

/* ---- permanencia en cifras */
.figures{background:#0b0a09;color:#f1ede4;padding:clamp(4.5rem,11vw,8.5rem) 0}
.figures .eyebrow{color:#a89f8f;margin-bottom:2.8rem}
.fig-list{list-style:none;margin:0;padding:0;display:grid;gap:3.2rem}
.fig-list li{border-top:1px solid #3a352e;padding-top:1.5rem}
.fig-l{font:500 .68rem/1.3 var(--serif);letter-spacing:.24em;text-transform:uppercase;color:#a89f8f;margin:0 0 1rem}
.fig-n{font-family:var(--serif);font-weight:300;font-size:clamp(3.8rem,9.5vw,7.2rem);line-height:.95;letter-spacing:-.045em;margin:0;color:#f1ede4}
.fig-u{font-size:.2em;font-weight:400;letter-spacing:.16em;text-transform:uppercase;margin-left:.55em;color:var(--copper)}
.fig-c{font-size:.9rem;line-height:1.6;color:#b9b1a2;max-width:32ch;margin:1.3rem 0 0}

/* ---- detalle de material */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 1rem}
.strip img{aspect-ratio:3/4;object-fit:cover;width:100%}
.strip>*{min-width:0}

/* ---- consulta privada: tres pasos */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:3.4rem 1.8rem}
.step img{aspect-ratio:4/5;object-fit:cover;width:100%}
.step-n{font:300 2.8rem/1 var(--serif);letter-spacing:-.03em;color:var(--accent);margin:1.5rem 0 .5rem}
.step h3{margin-bottom:.6rem}
.step p:last-child{color:var(--mute);margin:0;max-width:36ch}

.band{background:var(--ink);color:var(--paper);margin-bottom:0;padding:clamp(4.5rem,11vw,8.5rem) 0}
.band .eyebrow{color:inherit;opacity:.7}
.band h2{max-width:18ch;margin-bottom:1.6rem}
.band p{max-width:58ch;opacity:.85}
.band .btn{background:var(--paper);color:var(--ink);margin-top:1rem}
.field{margin-bottom:1.1rem}
label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.35rem}
input:not([type=radio]),select{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--mute);border-radius:2px;padding:.75rem .8rem}
input[aria-invalid]{border-color:#b3261e;border-width:2px}
.err{color:#b3261e;font-size:.85rem;margin:.3rem 0 0;min-height:0}
@media (prefers-color-scheme:dark){.err{color:#ff8f85}input[aria-invalid]{border-color:#ff8f85}}
fieldset{border:0;padding:0;margin:0 0 1.2rem}
legend{font-size:.85rem;font-weight:500;margin-bottom:.4rem;padding:0}
.radio{display:inline-flex;gap:.45rem;align-items:center;margin-right:1.2rem;font-weight:400}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.result{background:var(--card);padding:2rem;align-self:start}
.result h2{font-size:1.35rem;font-weight:400;letter-spacing:-.01em}.result h3{font-size:1.1rem;margin:1.2rem 0 .5rem}
.big-n{font-family:var(--serif);font-weight:300;font-size:2.2rem;letter-spacing:-.02em;margin:.4rem 0 0}
.zones{list-style:none;padding:0;margin:0}
.zones li{padding:.7rem 0;border-top:1px solid var(--line)}
.zones strong{display:block;font-weight:500}.zones span{font-size:.92rem;color:var(--mute)}
.note{font-size:.92rem;border-left:2px solid var(--accent);padding-left:.8rem;margin-top:1rem}
.list div:first-child{border-top:0}
.tagline{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.02em;margin-top:3rem}
footer.site{background:#000;color:#f1ede4;border-top:1px solid #2a2622;padding:4.5rem 0;margin-top:0}
footer.site .small{color:#a89f8f}
.contact{font-size:.95rem;line-height:1.8}.contact a{text-decoration-color:var(--copper)}
.foot-in{display:grid;gap:2.4rem}
footer nav{display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}
footer nav a{text-decoration:none}footer nav a:hover{text-decoration:underline}
.rootpick{padding:18vh 0;text-align:left}.rootpick .logo{height:52px;margin-bottom:.6rem}.rootpick h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:2rem 0 1.5rem}
@media (min-width:900px){
.spread{grid-template-columns:1.55fr 1fr;gap:5rem}
.spread.rev{grid-template-columns:1fr 1.2fr}.spread.rev figure{order:2}
.spread:has(.f-tall),.spread:has(.f-sq){grid-template-columns:1fr 1.3fr}.spread.rev:has(.f-tall),.spread.rev:has(.f-sq){grid-template-columns:1.3fr 1fr}
.trio,.grid3{grid-template-columns:repeat(3,1fr)}
.cols{grid-template-columns:1.5fr 1fr;gap:5rem}
.cols.planner{grid-template-columns:1fr 1fr}
.foot-in{grid-template-columns:1.4fr 1fr 1.2fr}
.fig-list{grid-template-columns:repeat(3,1fr);gap:4rem}
.strip{gap:1.4rem}
.strip.n4{grid-template-columns:repeat(4,1fr)}
.strip.n5{grid-template-columns:repeat(5,1fr)}
.strip figure:nth-child(even){margin-top:3rem}
.steps{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:899px){
.grid3{grid-template-columns:1fr 1fr}
.strip.n5 figure:last-child{grid-column:1/-1}.strip.n5 figure:last-child img{aspect-ratio:3/2}
}
@media (max-width:620px){.logo{height:26px}.logo-f{height:36px}.specs,.result{padding:1.4rem}}

.cols>*,.spread>*,.trio>*,.grid3>*,.steps>*{min-width:0}
.models{display:grid;gap:2.4rem 1.4rem;grid-template-columns:1fr 1fr;margin:2.4rem 0 1.6rem}
.model img{aspect-ratio:1/1;object-fit:cover;width:100%;background:#e9e9e7}
.model h3{margin:1.1rem 0 .4rem;font-size:1.05rem}
.model dl div{padding:.5rem 0}
.model .more{margin-top:.8rem;font-size:.8rem}
@media (min-width:900px){.models{grid-template-columns:repeat(4,1fr)}}
.btn-wa{width:100%;text-align:center}
.result .btn{margin-top:1rem}
#wa-preview{border-left:2px solid var(--copper);padding-left:.8rem}
.p-root{background:#000;color:#f1ede4}.p-root .brand-by{color:#a89f8f}

/* ---- movimiento lento y deliberado. La clase .rv la pone el JS: sin JS todo queda visible. */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
.js .rv{opacity:1;transform:none}
.ph img{transform:none!important}
}

/* ---- ficha de catálogo (imagen pequeña: no se amplía de más) */
.f-cat{max-width:460px;margin-bottom:2.4rem}
.f-cat img{width:100%;height:auto;background:#bdbdbd}
.specs .specs-2{margin-top:2.2rem}
.spread-t h3{margin:1.8rem 0 .6rem}

/* Portada en escritorio: el titular queda a la izquierda del rack, sin taparlo */
@media (min-width:1000px){.hero-t h1{font-size:clamp(2.6rem,4.3vw,4.6rem);max-width:9.5ch;line-height:1.06}}