/* Layout: editorial monocromo. Blanco y grises, serif de alto contraste, las fotos ponen el color. */
:root{
  --paper:#ffffff; --mist:#f8f1f3; --fog:#e4d6da; --stone:#5c5c58; --graphite:#232324; --ink:#0c0c0d;
  --rose:#a8486c; --blush:#f3d9e1;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1;letter-spacing:-.01em;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--rose)}
.dark h2 em{color:#eeb4c7}
.eyebrow{color:var(--rose)!important}
.dark .eyebrow,footer .eyebrow{color:#eeb4c7!important}
.tape span::after{color:var(--rose)!important}
.stage::before{border-color:var(--blush)!important}
.btn:hover{background:var(--blush);border-color:var(--blush);color:var(--ink)}
.steps li::before{color:var(--rose)!important}
::selection{background:var(--blush)}
nav{gap:22px!important;white-space:nowrap}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem)!important}
.size .name{font-size:1.2rem!important}
.size b{font-size:1.5rem!important}
h2{font-size:clamp(2.2rem,5.2vw,4rem)}
h3{font-size:1.45rem;line-height:1.15;font-weight:600}
h1,h2,h3,.size b,.size .name,.extras b,.faq summary,.sum b,.tape div,.brand,.mark,.steps li::before{font-weight:400!important}
h1,h2{letter-spacing:0!important}
.note{font-size:.9rem!important;color:var(--graphite)!important}
.lead,.faq p,.steps p,.pay p{color:var(--ink)!important}
.cap{color:var(--graphite)!important;font-weight:700!important}
.size small,.reel figcaption,.place li span,.ticket dt{color:var(--graphite)!important}
body{font-size:17px}
/* legibilidad: nada por debajo de ~13px, y los textos de apoyo en casi negro */
:root{--rose:#96355a}
.eyebrow{font-size:.82rem!important;letter-spacing:.18em!important}
.cap{font-size:.76rem!important;letter-spacing:.14em!important}
.strip{font-size:.8rem!important;letter-spacing:.14em!important;font-weight:600}
nav{font-size:.95rem!important;letter-spacing:.02em!important}
nav a{color:var(--ink)!important;font-weight:500}
.brand small{font-size:.72rem!important;color:var(--graphite)!important}
.btn{font-size:.86rem!important;letter-spacing:.1em!important}
.btn.sm{font-size:.8rem!important}
.reel figcaption{font-size:.82rem!important;letter-spacing:.1em!important;font-weight:600}
.side{font-size:.74rem!important;color:var(--graphite)!important}
.size small{font-size:.92rem!important}
.note{font-size:.95rem!important}
.ticket dl,.lines{font-size:1rem!important}
.trio p{color:#e6e6e2!important;font-size:1rem!important}
.dark .muted{color:#dcdcd8!important}
.fine{font-size:.85rem!important;color:#cfcfca!important}
.cols{font-size:1rem!important}
.cols a{color:#f0f0ec!important}
.legal p,.legal li{color:var(--ink)!important}
select,input[type=text]{font-size:1.05rem!important;font-weight:500}
input::placeholder{color:#6b6b67;opacity:1}
.faq summary{font-size:1.5rem!important}
.check{font-size:1rem!important;color:var(--ink)!important}
.dlg .scroll p{font-size:1rem!important;color:var(--ink)!important}
.callout{font-size:1rem!important;color:var(--ink)!important;border-left-color:var(--rose)!important}
@media (max-width:1040px){nav{display:none!important}}

/* baby pink: el rosa va en fondos, botones y subrayados; el texto se queda en negro para que se lea */
:root{--baby:#f8c8dc;--baby-deep:#f29bbd;--rose:#0c0c0d;--blush:#f8c8dc;--mist:#fdf0f5;--fog:#f1d5e0}
h1 em,h2 em{color:var(--ink)!important;background:linear-gradient(transparent 60%,var(--baby) 60%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dark h2 em{color:var(--baby)!important;background:none}
.eyebrow{color:var(--ink)!important}
.eyebrow::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--baby-deep);margin-right:.7em;vertical-align:.02em}
.dark .eyebrow,footer .eyebrow{color:var(--baby)!important}
.strip{background:var(--baby)!important;color:var(--ink)!important}
.btn{background:var(--baby);border-color:var(--baby);color:var(--ink)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;border-color:var(--fog);color:var(--ink)}
.btn.ghost:hover{background:var(--mist);border-color:var(--baby-deep);color:var(--ink)}
.tape span::after{color:var(--baby-deep)!important}
.stage::before{border-color:var(--baby)!important}
.steps li::before{color:var(--ink)!important}
.callout{border-left-color:var(--baby-deep)!important}
.ticket{border-color:var(--baby-deep)}
.quick{border-color:var(--baby-deep)}
.klarna{background:var(--baby)}
.mark em{color:var(--baby)!important}
::selection{background:var(--baby)}
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:820px;margin-bottom:56px}
.ba figure{margin:0;position:relative}
.ba img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;background:var(--mist)}
.ba figcaption{position:absolute;left:14px;bottom:14px;background:var(--baby);color:var(--ink);border-radius:999px;padding:6px 16px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.ba figure:first-child figcaption{background:var(--paper)}
.care{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;max-width:66ch}
.care li{padding-left:22px;position:relative;color:var(--ink)}
.care li::before{content:"";position:absolute;left:0;top:.55em;width:.6em;height:.6em;border-radius:50%;background:var(--baby-deep)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.lead{font-size:1.08rem;color:var(--graphite);max-width:48ch}
.muted{color:var(--stone)}

/* barra superior y cabecera */
.strip{background:var(--ink);color:var(--paper);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:9px 16px}
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--fog)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{font-family:var(--display);font-size:1.5rem;text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.brand small{font-family:var(--body);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--stone);margin-left:8px}
nav{display:flex;gap:28px;font-size:.82rem;letter-spacing:.06em}
nav a{text-decoration:none;color:var(--graphite);position:relative;padding-block:4px}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .25s}
nav a:hover::after{right:0}
@media (max-width:900px){nav{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:999px;padding:14px 26px;font:600 .8rem var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--fog)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:10px 18px;font-size:.72rem}
.btn.wide{width:100%}
.btn[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* portada */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:64px 72px}
.hero h1{font-size:clamp(3rem,8.4vw,6.6rem);margin-top:22px}
.hero .lead{margin-top:26px}
.stage{position:relative;justify-self:center;width:min(360px,100%);padding:0 34px 40px 0}
.arch{aspect-ratio:3/4.3;border-radius:999px 999px 0 0;overflow:hidden;background:var(--mist)}
.arch img{width:100%;height:100%;object-fit:cover}
.stage::before{content:"";position:absolute;inset:-14px 20px 26px -14px;border:1px solid var(--fog);border-radius:999px 999px 0 0;pointer-events:none}
.inset{position:absolute;right:0;bottom:0;width:42%;aspect-ratio:3/4;border:6px solid var(--paper);overflow:hidden;box-shadow:0 24px 50px rgba(17,17,18,.16)}
.inset img{width:100%;height:100%;object-fit:cover}
.side{position:absolute;left:-46px;top:46%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:36px;padding-block:36px 48px}.stage{width:min(250px,100%);order:-1;justify-self:start;margin-left:14px;padding:0 26px 30px 0}.side{display:none}}
section,.hero{scroll-margin-top:72px}

/* cotizador rapido */
.quick{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;border:1px solid var(--ink);border-radius:18px;background:var(--paper);overflow:hidden;max-width:640px}
.quick label{display:grid;gap:2px;padding:12px 18px;border-right:1px solid var(--fog);min-width:0}
.quick .go{display:grid;place-items:center;padding:10px}
@media (max-width:640px){.quick{grid-template-columns:1fr}.quick label{border-right:0;border-bottom:1px solid var(--fog)}.quick .go .btn{width:100%}}
.cap{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
select,input[type=text]{font:500 1rem var(--body);color:var(--ink);background:transparent;border:0;width:100%;min-width:0;padding:4px 0}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:24px;text-overflow:ellipsis;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111112' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 2px center}
select:focus,input:focus{outline:none}
.quick label:focus-within,.field:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}

/* cinta */
.tape{border-block:1px solid var(--fog);overflow:hidden;padding-block:18px}
.tape div{display:flex;gap:44px;width:max-content;font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--graphite);animation:tape 38s linear infinite}
.tape span::after{content:"✦";font-style:normal;font-size:.8rem;margin-left:44px;color:var(--stone);vertical-align:middle}
@keyframes tape{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape div{animation:none}html{scroll-behavior:auto}}

section{padding-block:96px}
@media (max-width:700px){section{padding-block:64px}}
.head{display:grid;gap:16px;margin-bottom:48px}
.head.split{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:end;gap:32px}
@media (max-width:800px){.head.split{grid-template-columns:1fr}}
.gray{background:var(--mist)}
.dark{background:var(--ink);color:var(--paper)}
.dark .eyebrow,.dark .muted{color:#a3a39e}

/* resultados */
.reel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 18px;scrollbar-width:thin}
.reel figure{margin:0;flex:0 0 min(270px,70vw);scroll-snap-align:center}
.reel img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--mist)}
.reel figcaption{display:flex;justify-content:space-between;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);padding-top:10px}

/* producto */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #38383a}
.trio div{padding:30px 28px 0 0;display:grid;gap:10px;align-content:start}
.trio div+div{padding-left:28px;border-left:1px solid #38383a}
.trio p{color:#b9b9b4;font-size:.96rem}
@media (max-width:760px){.trio{grid-template-columns:1fr}.trio div,.trio div+div{padding:24px 0;border-left:0;border-bottom:1px solid #38383a}}

/* largos */
.sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:900px){.sizes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.size{all:unset;cursor:pointer;display:grid;gap:12px;box-sizing:border-box}
.size .ph{overflow:hidden;background:var(--mist)}
.size img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.size:hover img{transform:scale(1.05)}
.size .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid var(--ink);padding-top:12px}
.size b{font:400 1.7rem var(--display)}
.size .name{font:400 1.35rem var(--display)}
.size small{color:var(--stone);font-size:.85rem}
.size:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--fog)}
.extras div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--fog)}
.extras div+div{padding-left:24px}
.extras b{font:400 1.3rem var(--display);white-space:nowrap}
@media (max-width:760px){.extras{grid-template-columns:1fr}.extras div+div{padding-left:0}}

/* reserva */
.book{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}
@media (max-width:900px){.book{grid-template-columns:1fr}}
.form{display:grid;gap:14px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.field{display:grid;gap:2px;background:var(--paper);border:1px solid var(--fog);border-radius:14px;padding:13px 18px;min-width:0}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--graphite);padding:6px 2px}
.check input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin:2px 0 0}
.ticket{background:var(--paper);border:1px solid var(--ink);border-radius:18px;padding:28px;display:grid;gap:18px;position:sticky;top:92px}
@media (max-width:900px){.ticket{position:static}}
.ticket dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;margin:0;font-size:.94rem}
.ticket dt{color:var(--stone)}
.ticket dd{margin:0;text-align:right;font-weight:500}
.sum{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--stone);padding-top:18px}
.sum b{font:400 3.2rem/1 var(--display);font-variant-numeric:lining-nums}
.note{font-size:.82rem;color:var(--stone)}
.stack{display:grid;gap:10px}

.lines{display:grid;gap:8px;font-size:.94rem}
.lines div{display:flex;justify-content:space-between;gap:16px}
.lines .bal{font-weight:600;border-top:1px solid var(--fog);padding-top:10px}
.callout{border-left:2px solid var(--ink);padding:4px 0 4px 16px;color:var(--graphite);font-size:.95rem;max-width:70ch;margin-top:28px}
.klarna{display:inline-block;background:#ffb3c7;color:#0c0c0d;font-weight:700;border-radius:6px;padding:1px 8px;letter-spacing:0}

/* relevo antes de continuar */
dialog{border:0;border-radius:20px;padding:0;width:min(620px,calc(100vw - 32px));max-height:min(86vh,760px);color:var(--ink);background:var(--paper);box-shadow:0 40px 100px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(12,12,13,.6);backdrop-filter:blur(4px)}
.dlg{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:inherit}
.dlg header{padding:26px 28px 14px;display:grid;gap:8px}
.dlg header h3{font-size:1.8rem}
.dlg .scroll{overflow:auto;padding:0 28px 8px;border-block:1px solid var(--fog)}
.dlg .scroll p{color:var(--graphite);font-size:.95rem;margin:14px 0}
.dlg footer{background:var(--paper);color:var(--ink);padding:18px 28px 24px;display:grid;gap:14px}
.dlg .row{display:flex;gap:10px;flex-wrap:wrap}
.dlg .row .btn{flex:1 1 180px}

/* pagos */
.pay{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.pay div{padding:24px 24px 0 0;display:grid;gap:8px;align-content:start}
.pay div+div{padding-left:24px;border-left:1px solid var(--fog)}
.pay p{color:var(--graphite);font-size:.95rem}
@media (max-width:900px){.pay{grid-template-columns:repeat(2,minmax(0,1fr))}.pay div{padding:22px 16px 22px 0;border-bottom:1px solid var(--fog)}.pay div+div{padding-left:0;border-left:0}}
@media (max-width:520px){.pay{grid-template-columns:1fr}}

/* pasos */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0;counter-reset:s}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;display:grid;gap:10px;align-content:start;border-top:1px solid var(--ink);padding-top:16px}
.steps li::before{content:"0" counter(s);font:italic 400 1.1rem var(--display);color:var(--stone)}
.steps p{color:var(--graphite);font-size:.95rem}

/* preguntas */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--fog);padding-block:22px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;font:400 1.4rem/1.2 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 1.6rem var(--body);color:var(--stone);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--graphite);margin-top:12px;max-width:62ch}

/* ubicacion */
.place{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
@media (max-width:800px){.place{grid-template-columns:1fr}}
.place ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.place li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--fog)}
.place li span{color:var(--stone);text-align:right}

/* pie */
footer{background:var(--ink);color:var(--paper);padding-block:72px 32px}
.mark{font:400 clamp(3rem,13vw,10rem)/.9 var(--display);letter-spacing:-.03em}
.mark em{font-style:italic;color:#a3a39e}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px;padding-top:32px;border-top:1px solid #38383a;font-size:.92rem}
@media (max-width:700px){.cols{grid-template-columns:1fr}}
.cols div{display:grid;gap:8px;align-content:start}
.cols a{text-decoration:none;color:#d6d6d2}
.cols a:hover{color:var(--paper);text-decoration:underline}
.fine{margin-top:48px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.76rem;letter-spacing:.06em;color:#a3a39e}

/* paginas legales */
.legal{max-width:740px;margin:0 auto;padding:72px 24px 96px}
.legal h1{font-size:clamp(2.4rem,6vw,3.8rem);margin:14px 0 10px}
.legal h2{font-size:1.6rem;line-height:1.15;margin:40px 0 10px}
.legal p,.legal li{color:var(--graphite);margin-bottom:12px;max-width:66ch}
.legal ul,.legal ol{padding-left:20px;margin:0 0 12px}
.legal .box{border:1px solid var(--ink);border-radius:14px;padding:20px 22px;margin-top:36px}

/* entrada */
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.26s}
@keyframes rise{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}

/* botones y bordes en baby pink (al final para que ganen a las reglas de arriba) */
.btn{background:var(--baby);border-color:var(--baby);color:var(--ink)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;border-color:var(--fog);color:var(--ink)}
.btn.ghost:hover{background:var(--mist);border-color:var(--baby-deep);color:var(--ink)}
.ticket{border-color:var(--baby-deep)}
.quick{border-color:var(--baby-deep)}
.klarna{background:var(--baby)}
.faq{border-top-color:var(--baby-deep)}
.size .row,.steps li,.pay,.place ul{border-top-color:var(--baby-deep)}