/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: banda de cabecera azul tinta con las portadas en abanico, franja de condiciones, catálogo como estantería, carrito lateral */
:root{
  --bg:#f3f4f7; --paper:#ffffff; --ink:#111a33; --muted:#5b6479; --line:#dde1ea;
  --navy:#0f1d45; --navy-2:#182b63; --on-navy:#eef1f8; --on-navy-muted:#aeb8d3;
  --brand:#1f3f9a; --brand-soft:#e6ebf7; --gold:#e8b21a; --gold-ink:#1b1400;
  --shelf:#e9ebf0; --ok:#1d7a4c; --warn-bg:#fff6e4; --warn-ink:#7a4a05; --danger:#b42318;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1222; --paper:#141c31; --ink:#e8ecf5; --muted:#9ba5bd; --line:#26304a;
  --navy:#070d1e; --navy-2:#111b38; --on-navy:#eef1f8; --on-navy-muted:#9aa6c4;
  --brand:#8aa5f2; --brand-soft:#1d2849; --gold:#f0c23c; --gold-ink:#1b1400;
  --shelf:#10172a; --ok:#5cc28d; --warn-bg:#33260e; --warn-ink:#f2cf8e; --danger:#ff8a7a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1222; --paper:#141c31; --ink:#e8ecf5; --muted:#9ba5bd; --line:#26304a;
  --navy:#070d1e; --navy-2:#111b38; --on-navy:#eef1f8; --on-navy-muted:#9aa6c4;
  --brand:#8aa5f2; --brand-soft:#1d2849; --gold:#f0c23c; --gold-ink:#1b1400;
  --shelf:#10172a; --ok:#5cc28d; --warn-bg:#33260e; --warn-ink:#f2cf8e; --danger:#ff8a7a; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--navy)}
.eyebrow{font:600 13px var(--cond);letter-spacing:.16em;text-transform:uppercase}

/* cabecera */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--navy);color:var(--on-navy);border-bottom:1px solid rgba(255,255,255,.08)}
header.top .wrap{display:flex;align-items:center;gap:20px;padding-block:10px}
header.top img{height:40px;width:auto;border-radius:3px;display:block}
header.top nav{display:flex;gap:22px;margin-left:auto;font:600 15px var(--cond);letter-spacing:.1em;text-transform:uppercase}
header.top nav a{color:var(--on-navy-muted);text-decoration:none}
header.top nav a:hover{color:var(--on-navy)}
.cartbtn{display:flex;align-items:center;gap:10px;background:var(--gold);color:var(--gold-ink);border:0;border-radius:4px;padding:9px 14px;font:700 15px var(--cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cartbtn b{background:var(--navy);color:var(--on-navy);border-radius:10px;min-width:24px;padding:0 7px;font:700 13px var(--sans);text-align:center}
@media (max-width:760px){header.top nav{display:none}.cartbtn{margin-left:auto}}

.demo{background:var(--warn-bg);color:var(--warn-ink);font-size:14px}
.demo .wrap{padding-block:7px}

/* portada de la tienda */
.hero{background:var(--navy);color:var(--on-navy);overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:10px;background:repeating-linear-gradient(90deg,var(--gold) 0 46px,transparent 46px 70px);opacity:.9}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding-block:56px 64px}
.hero .eyebrow{color:var(--gold)}
.hero h1{font:500 clamp(36px,5vw,58px)/1.04 var(--serif);margin:14px 0 18px;text-wrap:balance;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p{color:var(--on-navy-muted);max-width:52ch;margin:0 0 26px;font-size:17px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;border-radius:4px;padding:12px 20px;font:700 15px var(--cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn.gold{background:var(--gold);color:var(--gold-ink)}
.btn.ghost{border-color:rgba(255,255,255,.3);color:var(--on-navy)}
.btn.ghost:hover{border-color:var(--on-navy)}
.fan{position:relative;height:380px;max-width:100%}
.fan img{position:absolute;bottom:0;width:46%;max-width:230px;border-radius:2px 5px 5px 2px;box-shadow:0 24px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.1)}
.fan img:nth-child(1){left:2%;transform:rotate(-12deg);bottom:10px}
.fan img:nth-child(2){left:20%;transform:rotate(-4deg);bottom:26px}
.fan img:nth-child(3){left:38%;transform:rotate(4deg);bottom:26px}
.fan img:nth-child(4){left:54%;transform:rotate(12deg);bottom:8px}
@media (prefers-reduced-motion:no-preference){
  .fan img{animation:deal .7s cubic-bezier(.2,.8,.2,1) both}
  .fan img:nth-child(2){animation-delay:.08s}.fan img:nth-child(3){animation-delay:.16s}.fan img:nth-child(4){animation-delay:.24s}
  @keyframes deal{from{translate:0 30px}to{translate:0 0}}
}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr;padding-block:40px 52px}.fan{height:260px}.fan img{width:40%}}

/* condiciones */
.terms{background:var(--paper);border-bottom:1px solid var(--line)}
.terms .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.terms div{padding:20px 18px;border-left:1px solid var(--line);display:grid;gap:2px}
.terms div:first-child{border-left:0;padding-left:0}
.terms strong{font:600 24px var(--serif);font-variant-numeric:tabular-nums}
.terms span{color:var(--muted);font-size:14px}
@media (max-width:820px){.terms .wrap{grid-template-columns:1fr 1fr}.terms div:nth-child(3){border-left:0;padding-left:0}.terms div:nth-child(n+3){border-top:1px solid var(--line)}}

/* catálogo */
section.fam .wrap{padding-block:56px 8px}
.famhead{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:end;margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.famhead .eyebrow{color:var(--brand)}
.famhead h2{font:500 clamp(28px,3.4vw,40px)/1.1 var(--serif);margin:4px 0 0;text-wrap:balance}
.famhead p{margin:0;color:var(--muted);max-width:44ch;font-size:15px}
@media (max-width:700px){.famhead{grid-template-columns:1fr}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px 22px}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));max-width:820px}
.card{display:grid;grid-template-rows:1fr auto;min-width:0}
.stage{background:var(--shelf);border-radius:6px;padding:34px 22px 22px;display:grid;place-items:end center;position:relative;flex:1}
.book{width:100%;max-width:200px;position:relative;border-radius:2px 5px 5px 2px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.08),10px 16px 24px -8px rgba(15,29,69,.45);transition:transform .25s}
.book::before{content:"";position:absolute;inset:0 auto 0 0;width:9px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.18) 60%,rgba(0,0,0,.05));z-index:1}
.book img{width:100%;height:auto;display:block}
.card:hover .book{transform:translateY(-4px) rotate(-1deg)}
@media (prefers-reduced-motion:reduce){.book{transition:none}.card:hover .book{transform:none}}
.ph{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:16px 14px 14px 20px;color:#fff}
.ph .k{font:600 11px var(--cond);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.ph .t{font:700 28px/1 var(--cond);text-transform:uppercase;text-wrap:balance}
.ph .s{font-size:11px;opacity:.75}
.ph.cap{background:linear-gradient(165deg,#13296a,#2448a8 70%,#3a60c6)}
.ph.car{background:linear-gradient(165deg,#6b5000,#c49500 60%,#e4b820);color:#1a1300}
.usb{width:100%;max-width:240px;aspect-ratio:7/9.6;display:flex;flex-direction:column;justify-content:center;gap:14px;align-items:center}
.usb svg{width:100%;height:auto;filter:drop-shadow(8px 14px 14px rgba(15,29,69,.35));transform:rotate(-8deg)}
.usbcap{font:600 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;max-width:22ch}
.usbmini{width:100%;height:100%;display:grid;place-items:center;background:var(--shelf)}
.usbmini svg{width:150%;transform:rotate(-90deg)}
.soon{font:italic 500 20px var(--serif)!important;color:var(--muted)}
a.add.ask{text-align:center;text-decoration:none}
.tag{position:absolute;top:12px;left:12px;font:700 11px var(--cond);letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:3px}
.tag.new{background:var(--gold);color:var(--gold-ink)}
.tag.pend{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.info{padding:16px 2px 0;display:flex;flex-direction:column;gap:4px;flex:1}
.info .eyebrow{color:var(--muted);font-size:12px}
.info h3{margin:0;font:500 21px/1.2 var(--serif)}
.info p{margin:0;color:var(--muted);font-size:14px}
.price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:10px}
.price strong{font:600 26px var(--serif);font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-size:13px}
.buy{display:flex;gap:8px;margin-top:8px}
.qty{width:72px;padding:9px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font:600 15px var(--sans);font-variant-numeric:tabular-nums}
.add{flex:1;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:4px;font:700 14px var(--cond);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:9px}
.add:hover{background:var(--ink);color:var(--paper)}
.add.done{background:var(--ok);border-color:var(--ok);color:#fff}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* compromiso */
.promise .wrap{padding-block:64px 8px}
.promise .box{background:var(--paper);border:1px solid var(--line);border-radius:6px;display:grid;grid-template-columns:1fr 1.3fr;overflow:hidden}
.promise .l{background:var(--navy);color:var(--on-navy);padding:32px}
.promise .l .eyebrow{color:var(--gold)}
.promise .l h2{font:500 30px/1.15 var(--serif);margin:10px 0 0;text-wrap:balance}
.promise ul{list-style:none;margin:0;padding:24px 32px;display:grid;gap:14px}
.promise li{display:grid;grid-template-columns:28px 1fr;gap:10px}
.promise li b{display:block}
.promise li span{color:var(--muted);font-size:15px}
.promise .n{font:600 20px var(--serif);color:var(--brand)}
@media (max-width:760px){.promise .box{grid-template-columns:1fr}}

footer{margin-top:64px;background:var(--navy);color:var(--on-navy-muted)}
footer .wrap{padding-block:32px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;font-size:14px}
footer strong{color:var(--on-navy);font-weight:600}
footer .brand{font:500 20px var(--serif);color:var(--on-navy)}

/* carrito */
.scrim{position:fixed;inset:0;background:rgba(7,13,30,.5);z-index:20}
aside.cart{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);z-index:21;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);border-left:1px solid var(--line)}
.cart header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.cart header h2{margin:0;font:500 26px var(--serif)}
.x{background:none;border:0;font-size:28px;color:var(--muted);cursor:pointer;line-height:1}
.cart .scroll{overflow:auto;flex:1;padding:18px 22px;display:grid;gap:14px;align-content:start}
.line{display:grid;grid-template-columns:44px 1fr auto;gap:4px 12px;padding-bottom:14px;border-bottom:1px solid var(--line);align-items:start}
.line .th{grid-row:span 3;width:44px;aspect-ratio:7/9.6;border-radius:1px 3px 3px 1px;overflow:hidden;box-shadow:2px 3px 6px rgba(0,0,0,.2)}
.line .th img,.line .th .ph{width:100%;height:100%;object-fit:cover;padding:0}
.line .n{font-weight:600}
.line .m{color:var(--muted);font-size:13px;grid-column:2/4}
.line .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.line .ctl{display:flex;gap:10px;align-items:center;grid-column:2/4}
.line .ctl input{width:64px;padding:5px 7px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);font:15px var(--sans)}
.rm{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:14px var(--sans)}
.tot{display:grid;gap:4px;font-variant-numeric:tabular-nums}
.tot div{display:flex;justify-content:space-between}
.tot .big{font:600 22px var(--serif);border-top:2px solid var(--ink);padding-top:10px;margin-top:6px}
.tot .save{color:var(--ok)}
.empty{color:var(--muted);text-align:center;padding:48px 0;font:italic 18px var(--serif)}
form.co{display:grid;gap:10px}
form.co h3{margin:10px 0 0;font:600 14px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
form.co label{display:grid;gap:3px;font-size:13px;font-weight:600;color:var(--muted)}
form.co input{padding:9px 10px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);font:15px var(--sans)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay{display:grid;gap:8px}
.pay label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:4px;padding:11px;color:var(--ink);font-weight:400;font-size:14px;cursor:pointer}
.pay label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.pay label strong{display:block}
.pay input{margin-top:3px}
.submit{background:var(--navy);color:var(--on-navy);border:0;border-radius:4px;padding:14px;font:700 16px var(--cond);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;margin-top:6px}
:root[data-theme="dark"] .submit{background:var(--gold);color:var(--gold-ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .submit{background:var(--gold);color:var(--gold-ink)}}
.done-box{background:var(--brand-soft);border-radius:6px;padding:18px;display:grid;gap:6px}
.done-box h3{margin:0;font:500 24px var(--serif)}
.done-box p{margin:0}
.err{color:var(--danger);font-size:13px;margin:0}
.note{color:var(--muted);font-size:13px;margin:0}
/* páginas legales y de confirmación */
.doc .wrap{padding-block:48px 24px;max-width:820px}
.doc h1{font:500 clamp(30px,4vw,42px)/1.1 var(--serif);margin:0 0 8px;text-wrap:balance}
.doc h2{font:600 22px var(--serif);margin:32px 0 8px}
.doc p,.doc li{max-width:68ch}
.doc .meta{color:var(--muted);font-size:14px}
.doc a{color:var(--brand)}
.doc table{border-collapse:collapse;margin:8px 0}
.doc td{padding:4px 16px 4px 0;vertical-align:top}
.doc td:first-child{color:var(--muted)}
footer a{color:var(--on-navy-muted)}
footer a:hover{color:var(--on-navy)}
.legal-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.payopts{display:grid;gap:8px}

/* preguntas frecuentes */
.faq .wrap{padding-block:64px 8px}
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px 40px}
.qa div{min-width:0}
.qa h3{font:600 19px/1.3 var(--serif);margin:0 0 6px;text-wrap:balance}
.qa p{margin:0;color:var(--muted);font-size:15px;max-width:60ch}
.qa strong{color:var(--ink);font-weight:600}