:root{
  --canvas:#ede4d8; --card:#e2d5c3; --tan:#d2bfa5; --brown:#34170d; --soft:#54372b;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --pad:clamp(16px,3vw,30px);
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; --sans:"Jost","Futura","Avenir Next",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--brown);font:400 18px/1.35 var(--sans);letter-spacing:.017em;-webkit-font-smoothing:antialiased;padding-bottom:84px;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
a{color:inherit}
button,select,input{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brown);color:var(--canvas);padding:10px 16px;z-index:80}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.micro{font-size:13px;color:var(--soft)}
p{max-width:60ch}

/* barra de anuncio */
.ann{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--brown);color:var(--canvas);min-height:32px;padding:0 var(--pad);font:400 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.ann-c{grid-column:2;text-align:center;padding:10px 0}
.ann-r{grid-column:3;justify-self:end;display:flex;gap:24px}
.ann a{text-decoration:none;padding:10px 0}
@media (hover:hover){.ann a:hover{opacity:.7}}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--pad)}
.brand img{width:clamp(200px,18vw,290px);height:auto}
.nav-r{display:flex;align-items:center;gap:30px;font-size:15px}
.nav-r a{text-decoration:none;padding:10px 0;transition:opacity 160ms ease}
@media (hover:hover){.nav-r a:hover{opacity:.6}}
.subnav{display:flex;gap:30px;padding:12px var(--pad);border-top:1px solid var(--brown);border-bottom:1px solid var(--brown);font-size:15px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{text-decoration:none;padding:6px 0;transition:opacity 160ms ease}
@media (hover:hover){.subnav a:hover{opacity:.6}}

/* acción: enlace con borde, nunca relleno */
.act{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border:1px solid var(--brown);border-radius:4px;background:transparent;color:var(--brown);font:400 15px/1.1 var(--sans);letter-spacing:.013em;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease}
.act i{font-style:normal;transition:transform 220ms var(--ease-out)}
.act:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.act:hover{background:var(--brown);color:var(--canvas)}.act:hover i{transform:translateX(3px)}}
.pillb{border-radius:50px}
.solidb{background:var(--brown);color:var(--canvas)}
@media (hover:hover) and (pointer:fine){.solidb:hover{background:#4b2618}}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:50px;background:var(--brown);color:var(--canvas);font:400 12px/1 var(--sans)}
.act:hover .count{background:var(--canvas);color:var(--brown)}
.solidb .count{background:var(--canvas);color:var(--brown)}
.count.pop{animation:bump 260ms var(--ease-out)}
@keyframes bump{from{transform:scale(1.25)}to{transform:scale(1)}}

/* titulares: serif fina, nunca negrita */
.display{font:400 clamp(52px,7.2vw,112px)/1 var(--serif);letter-spacing:-.005em;font-feature-settings:"liga" 1,"clig" 1}
h2:not(.display){font:400 clamp(34px,4vw,56px)/1.05 var(--serif);letter-spacing:-.01em}
h3{font:400 20px/1.2 var(--sans);letter-spacing:.017em}

/* running head */
.rh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:10px;border-bottom:1px solid var(--brown);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.rh a{text-decoration:none;border-radius:4px}
@media (hover:hover){.rh a:hover{text-decoration:underline;text-underline-offset:4px}}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:clamp(20px,3vw,36px) var(--pad) 0;align-items:center}
.hero-t{padding:0 clamp(0px,2vw,30px) 0 clamp(0px,2vw,20px)}
.hero .lead{font-size:20px;line-height:1.3;max-width:480px;margin:32px 0 32px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-i img{width:100%;height:clamp(460px,calc(100svh - 300px),720px);object-fit:cover;object-position:50% 38%;border-radius:25px}

/* secciones y tarjetas */
.sec{padding:clamp(72px,9vw,110px) var(--pad) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin:26px 0 clamp(28px,4vw,44px)}
.sec-head p{font-size:15px;color:var(--soft);max-width:46ch}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;align-items:stretch}
.cards>.card{flex:1 1 250px;max-width:380px}
.card{background:var(--card);border-radius:25px;padding:30px;display:flex;flex-direction:column;min-width:0}
.ph{border-radius:25px;overflow:hidden;margin-bottom:20px;background:var(--tan)}
.ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform 520ms var(--ease-out)}
@media (hover:hover){.card:hover .ph img{transform:scale(1.035)}}
.card .desc{font-size:15px;color:var(--soft);line-height:1.4;margin-top:8px;flex:1}
.sel{position:relative;display:block;margin-top:16px}
.sel select{width:100%;appearance:none;-webkit-appearance:none;background:var(--canvas);border:1px solid var(--brown);border-radius:50px;padding:11px 40px 11px 18px;font-size:15px;cursor:pointer}
.sel::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--brown);border-bottom:1.5px solid var(--brown);transform:rotate(45deg);pointer-events:none}
.card>.micro{margin-top:16px;padding:11px 0}
.price{font:400 20px/1 var(--sans);margin:18px 0 14px}
.card .act{width:100%}
.act[data-added]{opacity:.7}

/* bloques editoriales 50/50 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:clamp(72px,9vw,110px) var(--pad) 0;align-items:center}
.split-i img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:25px}
.split-t{padding:0 clamp(0px,3vw,50px)}
.split-t .display{margin:28px 0 28px}
.split-t p{font-size:20px;line-height:1.3;margin-bottom:18px;max-width:520px}
.split-t .act{margin-top:12px}
.split-t .micro{margin-top:14px}
.flip .split-i{order:2}
.flav{border-top:0}
.frow{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--brown);font-size:15px}
.frow b{font:400 17px/1.2 var(--sans)}
.frow span{color:var(--soft)}

.how{padding:clamp(72px,9vw,110px) var(--pad) 0}
.how .display{margin:26px 0 clamp(28px,4vw,44px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps .card{padding:30px}.steps h3{font:400 clamp(26px,2.6vw,35px)/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:14px}
.steps p{font-size:18px}

.band{margin-top:clamp(72px,9vw,110px);background:var(--brown);color:var(--canvas);padding:clamp(56px,8vw,100px) var(--pad);display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.act.inv{border-color:var(--canvas);color:var(--canvas)}
@media (hover:hover) and (pointer:fine){.act.inv:hover{background:var(--canvas);color:var(--brown)}}

.foot{background:var(--brown);color:var(--canvas);padding:0 var(--pad) 30px;text-align:center}
.foot-logo{display:block;width:min(480px,82%);margin:0 auto;padding:clamp(56px,7vw,90px) 0 40px}
.foot-logo img{width:100%;height:auto}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;font-size:15px;padding-bottom:36px}
.foot-nav a{text-decoration:none;padding:6px 0}
@media (hover:hover){.foot-nav a:hover{text-decoration:underline;text-underline-offset:4px}}
.foot-wa{margin:0 auto 20px;font-size:20px}.foot-wa a{text-decoration:none}@media (hover:hover){.foot-wa a:hover{text-decoration:underline;text-underline-offset:4px}}
.foot small{font-size:12px;opacity:.7}

/* barra fija */
.bar{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;display:flex;gap:8px;transition:transform 240ms var(--ease-out),opacity 200ms ease}
.bar .act:not(.solidb){background:var(--canvas)}
.wa-round{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--brown);color:var(--canvas);text-decoration:none;flex:none;transition:transform 160ms var(--ease-out),background-color 160ms ease}
.wa-round:active{transform:scale(.94)}
@media (hover:hover){.wa-round:hover{background:#4b2618;transform:scale(1.05)}}
.bar{align-items:center}
.bar.away{transform:translateY(160%);opacity:0;pointer-events:none}
.bar .act{padding:13px 22px;font-size:15px}

/* pedido */
dialog{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:none;width:min(480px,100vw);border:0;padding:0;background:var(--canvas);color:var(--brown);border-radius:25px 0 0 25px;transform:translateX(100%);transition:transform 320ms var(--ease-out),display 320ms allow-discrete,overlay 320ms allow-discrete}
dialog[open]{transform:none}
@starting-style{dialog[open]{transform:translateX(100%)}}
dialog::backdrop{background:rgba(52,23,13,.5);opacity:0;transition:opacity 260ms ease,display 260ms allow-discrete,overlay 260ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
.cart-in{display:flex;flex-direction:column;height:100%;padding:24px}
.cart-in header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cart-in h2{font:400 44px/1 var(--serif);letter-spacing:-.01em}
.x{min-height:44px;padding:0 12px;font-size:15px;text-decoration:underline;text-underline-offset:4px}
.lines{flex:1;overflow:auto;display:grid;gap:8px;align-content:start;margin:0 -4px;padding:0 4px}
.empty{padding:24px 0}
.line{background:var(--card);border-radius:20px;padding:14px;display:grid;grid-template-columns:72px 1fr;gap:14px;animation:pop 240ms var(--ease-out) both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.line img{width:72px;height:90px;object-fit:cover;border-radius:14px}
.line h3{font-size:18px}.line .meta{font-size:14px;color:var(--soft)}
.line .hint{font-size:13px;color:var(--soft);margin-top:4px;line-height:1.3}
.line select,.line input,.fields input{width:100%;min-height:44px;margin-top:8px;padding:0 16px;border:1px solid var(--brown);border-radius:50px;background:var(--canvas);font-size:15px}
.line select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--brown) 50%),linear-gradient(135deg,var(--brown) 50%,transparent 50%);background-position:calc(100% - 19px) 19px,calc(100% - 14px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.line .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.step-q{display:inline-flex;align-items:center;border:1px solid var(--brown);border-radius:50px;background:var(--canvas)}
.step-q button{width:40px;height:40px;font-size:20px;border-radius:50%;transition:transform 160ms var(--ease-out)}
.step-q button:active{transform:scale(.9)}.step-q span{min-width:24px;text-align:center}
.lp{font-size:17px}
.rm{font-size:13px;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 6px}
.fields{display:grid;gap:6px;margin:14px 0 6px}.fields label{font-size:13px;color:var(--soft)}
.fields input{margin-top:4px}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0 2px;font-size:15px}
.total b{font:400 30px/1 var(--serif);letter-spacing:-.01em}
.note{font-size:13px;color:var(--soft);margin-bottom:12px}
.wide{width:100%}
::placeholder{color:#8a6c5d}

/* aparición */
.js .rev{opacity:0;transform:translateY(16px)}
.js .rev.in{opacity:1;transform:none;transition:opacity 520ms ease-out var(--d,0ms),transform 640ms var(--ease-out) var(--d,0ms)}
.js .hero-t>*,.js .hero-i,.js .brand,.js .nav-r{animation:rise 760ms var(--ease-out) both}
.js .hero-t>:nth-child(2){animation-delay:70ms}.js .hero-t>:nth-child(3){animation-delay:140ms}.js .hero-i{animation-delay:120ms}.js .nav-r{animation-delay:80ms}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .hero-i img{animation:settle 1500ms var(--ease-out) both}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
.hero-i{overflow:hidden;border-radius:25px}

@media (max-width:900px){
  body{font-size:17px}
  .ann-r{display:none}.ann{grid-template-columns:1fr}.ann-c{grid-column:1}
  .nav-r a{display:none}
  .hero,.split{grid-template-columns:1fr}
  .hero-t{padding:0}.hero .lead{font-size:18px}.hero-i img{height:auto;aspect-ratio:4/5}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .cards{gap:10px}.cards>.card{flex:1 1 calc(50% - 5px);max-width:calc(50% - 5px)}
  .card{padding:14px;border-radius:20px}.ph{margin-bottom:12px;border-radius:16px}
  h3{font-size:17px}.card .desc{font-size:13px}.price{font-size:17px;margin:12px 0 10px}
  .sel select{padding:10px 30px 10px 12px;font-size:13px}.sel::after{right:12px}
  .card .act{padding:11px 8px;font-size:13px}
  .split-t{padding:0}.split-t p{font-size:18px}.flip .split-i{order:0}
  .frow{grid-template-columns:1fr;gap:2px}
  .steps{grid-template-columns:1fr}
  .band{flex-direction:column;align-items:flex-start}
  .bar{left:12px;right:12px;justify-content:flex-end}.bar .act{flex:1}
}
@media (max-width:420px){.cards{gap:8px}.cards>.card{flex-basis:calc(50% - 4px);max-width:calc(50% - 4px)}.card{padding:12px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rev{transform:none}.js .rev.in{transition:opacity 300ms ease}
  .js .hero-t>*,.js .hero-i,.js .brand,.js .nav-r,.js .hero-i img{animation:none}
  .line{animation:none}dialog,dialog::backdrop{transition-duration:1ms}
}