/* ============================================================================
   Holiday Gift Guide 2026 · O2 Marketing House — estilos
   ========================================================================== */

/* Layout: O2 brand catalogue. Cream desk with drifting coral wave lines; the book flips in the centre.
   Coral = action and emphasis, charcoal = text, blush = soft fields, thin coral frames as in the brand guide. */
:root{
  --coral:#EA7C5B; --coral-ink:#C25A3B; --cream:#F7F1EB; --paper:#FCF8F4; --charcoal:#4B4A49; --ink:#2F2E2D;
  --blush:#F4DACE; --blush-2:#F9E9E1; --muted:#7E7A76; --rule:#E8D9CE; --white:#FFFFFF;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
html,body{height:100%}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);overflow-x:hidden}
.waves{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.waves svg{position:absolute;left:-10%;width:120%;height:100%;animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.shell{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding-inline:16px;padding-block:14px 18px;box-sizing:border-box}
.bar{width:100%;max-width:1240px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px}
.bar .logo{height:34px;width:auto;display:block}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font:500 13px/1 var(--body);color:var(--charcoal);background:rgba(255,255,255,.6);border:1px solid var(--rule);border-radius:999px;padding:9px 14px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.chip:hover{border-color:var(--coral);color:var(--coral-ink);transform:translateY(-1px)}
.chip[aria-current="true"]{background:var(--coral);border-color:var(--coral);color:var(--white)}
.chip.solid{background:var(--charcoal);border-color:var(--charcoal);color:var(--white)}
.chip.solid:hover{background:var(--ink);color:var(--white)}
.chip .n{display:inline-block;min-width:18px;margin-left:6px;padding:2px 6px;border-radius:999px;background:var(--coral);color:var(--white);font-size:11px;text-align:center}
button:focus-visible,input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.stage{width:100%;max-width:1240px;display:flex;justify-content:center;filter:drop-shadow(0 24px 40px rgba(75,74,73,.18))}
.nav{display:flex;align-items:center;gap:14px}
.nav .count{font-size:13px;color:var(--charcoal);font-variant-numeric:tabular-nums;min-width:130px;text-align:center;letter-spacing:.3px}
.round{width:42px;height:42px;border-radius:50%;border:1px solid var(--coral);background:var(--white);color:var(--coral);font-size:20px;cursor:pointer;transition:background .2s,color .2s}
.round:hover{background:var(--coral);color:var(--white)}
.progress{width:min(520px,80vw);height:2px;background:var(--rule);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--coral);transition:width .5s}
.hint{font-size:12px;color:var(--muted)}

/* ---------- pages ---------- */
.page{background:var(--paper);color:var(--ink);overflow:hidden;container-type:inline-size;box-sizing:border-box}
.page.blush{background:var(--blush-2)}
.page.coral{background:var(--coral);color:var(--white)}
.page.char{background:var(--charcoal);color:var(--white)}
.pg{position:absolute;inset:0;display:flex;flex-direction:column;padding:7cqw 7cqw 5cqw;box-sizing:border-box;gap:3.2cqw}
.frame{position:absolute;inset:3cqw;border:1px solid var(--coral);pointer-events:none;opacity:.55}
.coral .frame,.char .frame{border-color:rgba(255,255,255,.55)}
.pwave{position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;opacity:.5}
.label{display:flex;align-items:center;gap:2cqw;font:500 2.1cqw/1 var(--body);letter-spacing:.55cqw;text-transform:uppercase;color:var(--coral);margin:0}
.label::before{content:"";width:6cqw;height:1px;background:currentColor}
.coral .label,.char .label{color:var(--white)}
.theme{font:500 6.6cqw/1.02 var(--display);color:var(--charcoal);margin:0;text-wrap:balance}
.theme em{font-style:italic;color:var(--coral)}
.foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:2cqw;color:var(--muted);padding-top:1.6cqw;border-top:1px solid var(--rule);position:relative}
.foot img{height:3.6cqw;width:auto}
.foot .pn{font:600 3cqw/1 var(--display);color:var(--coral);font-variant-numeric:tabular-nums}
.coral .foot,.char .foot{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}
.coral .foot .pn,.char .foot .pn{color:var(--white)}

/* product pieces */
.ph{position:relative;background:var(--white);border-radius:3cqw;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--rule)}
.ph img{width:86%;height:86%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.open{all:unset;cursor:zoom-in;display:block}
.open:hover img,.open:focus-visible img{transform:scale(1.07)}
.open:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:3cqw}
.tag{position:absolute;left:2.4cqw;top:2.4cqw;background:var(--coral);color:var(--white);font:700 2.2cqw/1 var(--body);padding:1.3cqw 2.2cqw;border-radius:99px;letter-spacing:.1cqw;font-variant-numeric:tabular-nums;box-shadow:0 1cqw 2cqw rgba(234,124,91,.3)}
.heart{all:unset;cursor:pointer;position:absolute;right:2.2cqw;top:2.2cqw;width:6.4cqw;height:6.4cqw;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.heart svg{width:3.4cqw;height:3.4cqw;fill:none;stroke:var(--coral);stroke-width:2}
.heart:hover{transform:scale(1.1)}
.heart[aria-pressed="true"]{background:var(--coral);border-color:var(--coral)}
.heart[aria-pressed="true"] svg{fill:var(--white);stroke:var(--white)}
.heart:focus-visible{outline:2px solid var(--coral)}
.name{font:600 4.4cqw/1.06 var(--display);color:var(--charcoal);margin:0;text-wrap:balance}
.blurb{font-size:2.45cqw;line-height:1.5;margin:0;color:#57534F}
.price{font:700 2.8cqw/1.25 var(--body);color:var(--ink);margin:0;font-variant-numeric:tabular-nums}
.detail{font-size:2.15cqw;line-height:1.45;color:var(--muted);margin:0}
.cpn{font-size:1.85cqw;letter-spacing:.25cqw;color:#ADA49B;margin:0}
.info{display:flex;flex-direction:column;gap:1.3cqw;min-width:0}
.items{flex:1;min-height:0;display:flex;flex-direction:column;gap:3.6cqw}
/* variant A: rows */
.rows .item{display:grid;grid-template-columns:36cqw 1fr;gap:4cqw;align-items:start}
.rows .item:nth-child(2){grid-template-columns:1fr 36cqw}
.rows .item:nth-child(2) .ph{order:2}
.rows .item+.item{border-top:1px solid var(--rule);padding-top:3.6cqw}
.rows .ph{aspect-ratio:1/1}
/* variant B: columns */
.cols{flex-direction:row;gap:4.4cqw}
.cols .item{flex:1;display:flex;flex-direction:column;gap:2.6cqw;min-width:0}
.cols .ph{aspect-ratio:4/4.3;border-radius:22cqw 22cqw 3cqw 3cqw}
.cols .name{font-size:4cqw}
.cols .blurb{font-size:2.3cqw}
/* hero */
.hero .stagewrap{position:relative;display:flex;justify-content:center}
.hero .ph{width:62cqw;height:62cqw;border-radius:50%;border:none;box-shadow:0 0 0 1px var(--rule),0 0 0 3.4cqw var(--blush-2),0 0 0 3.5cqw var(--rule)}
.hero .ph{overflow:visible}.hero .open{border-radius:50%;overflow:hidden}.hero .ph img{width:74%;height:74%}
.cols .ph{overflow:visible}.cols .open{border-radius:22cqw 22cqw 3cqw 3cqw;overflow:hidden}.cols .tag{top:auto;bottom:2.4cqw;left:2.4cqw}.cols .heart{top:auto;bottom:2.2cqw}
.hero .tag{left:auto;right:-2cqw;top:6cqw;font-size:2.8cqw;padding:1.7cqw 2.8cqw}
.hero .heart{right:auto;left:2cqw;top:5cqw;width:7.4cqw;height:7.4cqw}
.hero .no{position:absolute;left:0;bottom:-1cqw;font:italic 600 11cqw/1 var(--display);color:var(--coral);opacity:.9}
.hero .name{font-size:6.6cqw;text-align:left}
.hero .blurb{font-size:2.75cqw}
.hero .price{font-size:3.3cqw}
.price.quote{display:flex;align-items:baseline;gap:1.4cqw;flex-wrap:wrap}.price.quote em{font:italic 500 3.4cqw/1.1 var(--display);color:var(--coral)}.price.quote span{font:600 1.7cqw/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#8A817A}
.ask{display:inline-flex;align-self:flex-start;width:max-content;align-items:center;gap:.8cqw;margin:1cqw 0 .6cqw;font:600 1.75cqw/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);text-decoration:none;padding-bottom:.5cqw;border-bottom:1px solid var(--coral);position:relative;z-index:3}.ask i{font-style:normal;color:var(--coral);transition:transform .2s}.ask:hover i{transform:translateX(.6cqw)}
.tag.tq{background:rgba(255,255,255,.92);color:var(--coral);font-style:italic;font-family:var(--display);font-weight:500;letter-spacing:.02em;box-shadow:inset 0 0 0 1px var(--coral)}
.qv .pr.q em{font-family:var(--display);font-style:italic;font-weight:500;font-size:24px;color:var(--coral)}
.hero .detail{font-size:2.4cqw}
/* cover */
.cover .pg{padding:12cqw 10cqw 9cqw;align-items:flex-start;gap:4cqw}
.cover .logo{width:62cqw;height:auto}
.cover h1{font:500 13cqw/.92 var(--display);margin:4cqw 0 0;color:var(--charcoal)}
.cover h1 em{display:block;font-style:italic;color:var(--coral)}
.cover .sub{font-size:2.8cqw;line-height:1.55;color:#57534F;margin:0;max-width:64cqw}
.orbs{margin-top:auto;display:flex;gap:2.6cqw;align-items:flex-end}
.orbs span{display:block;border-radius:50%;background:var(--white);box-shadow:0 0 0 1px var(--rule);overflow:hidden;display:flex;align-items:center;justify-content:center}
.orbs img{width:78%;height:78%;object-fit:contain}
.cover .year{position:absolute;right:10cqw;top:12cqw;font:italic 500 4cqw/1 var(--display);color:var(--coral)}
/* divider */
.divider .pg{justify-content:center;gap:3.6cqw;padding:12cqw 11cqw}
.divider .num{font:italic 500 5cqw/1 var(--display)}
.divider h2{font:500 21cqw/.86 var(--display);margin:0;letter-spacing:-.4cqw}
.divider .lbl{font:italic 600 7cqw/1 var(--display);margin:0}
.divider p{font-size:2.9cqw;line-height:1.55;margin:0;max-width:66cqw;opacity:.95}
.divider .orbs span{box-shadow:none}
.divider .foot{position:absolute;left:11cqw;right:11cqw;bottom:7cqw;margin:0}
/* contents */
.toc{display:flex;flex-direction:column;margin-top:1cqw}
.toc button{all:unset;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:3cqw;align-items:center;padding:2.2cqw 0;border-bottom:1px solid var(--rule);transition:padding .25s}
.toc button:hover{padding-left:1.6cqw}
.toc button:focus-visible{outline:2px solid var(--coral)}
.toc .dot{width:9cqw;height:9cqw;border-radius:50%;overflow:hidden;background:var(--white);box-shadow:0 0 0 1px var(--rule);display:flex;align-items:center;justify-content:center}
.toc .dot img{width:80%;height:80%;object-fit:contain}
.toc .t{font:500 5.4cqw/1 var(--display);color:var(--charcoal)}
.toc .t em{font-style:italic;color:var(--coral)}
.toc .d{display:block;font:400 2.2cqw/1.4 var(--body);color:var(--muted);margin-top:.8cqw}
.toc .p{font:600 4.6cqw/1 var(--display);color:var(--coral)}
.note{font-size:2cqw;line-height:1.5;color:var(--muted);margin:0}
.tips{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw}
.tips div{background:var(--white);border:1px solid var(--rule);border-radius:2.4cqw;padding:2cqw 2.4cqw;font-size:2.2cqw;line-height:1.45;color:#57534F}
.tips b{display:block;font:600 3.4cqw/1.1 var(--display);color:var(--coral-ink);margin-bottom:.6cqw}
/* order */
.more{display:flex;flex-direction:column;gap:.9cqw;padding:3cqw 3.4cqw;border:1px solid var(--coral);border-radius:3cqw;text-decoration:none;background:var(--white)}.more .mk{font:600 1.8cqw/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}.more .mt{font:500 3.9cqw/1.15 var(--display);color:var(--charcoal)}.more .mt em{font-style:italic;color:var(--coral)}.more .go{font:600 1.9cqw/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);margin-top:.6cqw}.more:hover .go{color:var(--coral)}
.steps{display:flex;flex-direction:column;gap:2.4cqw}
.step{display:grid;grid-template-columns:11cqw 1fr;gap:3cqw;align-items:start}
.step .n{width:11cqw;height:11cqw;border-radius:50%;background:var(--coral);color:var(--white);display:flex;align-items:center;justify-content:center;font:italic 600 6cqw/1 var(--display)}
.step b{display:block;font:600 4.2cqw/1.1 var(--display);color:var(--charcoal);margin-bottom:.8cqw}
.step span{font-size:2.5cqw;line-height:1.5;color:#57534F}
.contact{background:var(--blush);border-radius:3cqw;padding:3cqw 4cqw;display:flex;flex-direction:column;gap:.8cqw;font-size:2.4cqw}
.contact img{width:34cqw;height:auto;margin-bottom:1.4cqw}.contact .cl{color:var(--charcoal);text-decoration:none;border-bottom:1px solid transparent;width:max-content}.contact .cl:hover{border-color:var(--coral)}.contact b{font-weight:600;color:var(--coral-ink);margin-right:1cqw}
.back .pg{justify-content:center;align-items:center;gap:4cqw;text-align:center}
.back .blocklogo{width:70cqw;height:auto}
.back p{font:italic 500 6cqw/1.1 var(--display);color:var(--charcoal);margin:0}
.back small{font-size:2.4cqw;color:var(--muted)}


/* lifestyle */
.photo{position:absolute;left:0;right:0;top:0;height:56%;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease-out}
.page.show .photo img,.page.show .mo img{transform:scale(1)}
.photo::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to bottom,transparent,var(--tint))}
.divider.lp .pg{justify-content:flex-end;padding:0 11cqw 15cqw;gap:2.6cqw}
.divider.lp h2{font-size:17cqw}
.coral{--tint:#EA7C5B}.char{--tint:#4B4A49}
.mo{position:absolute;inset:0;overflow:hidden}
.mo img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s ease-out}
.mo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(47,46,45,.05) 35%,rgba(47,46,45,.78) 100%)}
.moment .pg{z-index:1;justify-content:flex-end;color:#fff;gap:2.4cqw;padding:8cqw 8cqw 6cqw}
.moment .label{color:#fff}
.moment q{font:italic 500 7.6cqw/1.05 var(--display);quotes:none;text-wrap:balance}
.moment .who{display:flex;align-items:center;gap:2.6cqw;flex-wrap:wrap;font-size:2.6cqw}
.moment .who b{font:600 4.4cqw/1.1 var(--display)}
.moment .pill{background:var(--coral);color:#fff;font:700 2.4cqw/1 var(--body);padding:1.3cqw 2.4cqw;border-radius:99px}
.moment .view{all:unset;cursor:pointer;border:1px solid rgba(255,255,255,.8);color:#fff;font:500 2.4cqw/1 var(--body);padding:1.6cqw 3cqw;border-radius:99px;transition:background .2s,color .2s}
.moment .view:hover,.moment .view:focus-visible{background:#fff;color:var(--charcoal)}
.moment .heart{position:static}
.moment .foot{margin-top:2cqw;border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}
.moment .foot .pn{color:#fff}
.moment .frame{border-color:rgba(255,255,255,.6);z-index:1}
.arch{position:absolute;right:9cqw;bottom:11cqw;width:40cqw;height:52cqw;border-radius:21cqw 21cqw 2cqw 2cqw;overflow:hidden;box-shadow:0 0 0 1.4cqw var(--paper),0 0 0 1.5cqw var(--coral)}
.arch img{width:100%;height:100%;object-fit:cover}
.cover .orbs{max-width:40cqw;flex-wrap:wrap}.cover .sub{max-width:40cqw}


/* photo cover */
.photo-cover .pg{justify-content:flex-end;padding:8cqw}
.cpanel{display:flex;flex-direction:column;gap:2.6cqw;position:relative}
.photo-cover{background:#FCF8F4}.photo-cover .mo{bottom:26%}.photo-cover .mo::after{background:linear-gradient(to bottom,rgba(252,248,244,0) 50%,rgba(252,248,244,.88) 70%,#FCF8F4 80%)}
.photo-cover .pg{padding:8cqw 8cqw 9cqw}
.cpanel .logo{width:50cqw}
.cpanel h1{font:500 15cqw/.9 var(--display);margin:1cqw 0 0;color:var(--charcoal)}
.cpanel h1 em{display:block;font-style:italic;color:var(--coral)}
.cpanel .sub{font-size:2.6cqw;line-height:1.5;color:#57534F;margin:0}
.cpanel .yr{display:flex;align-items:center;gap:2cqw;font:500 2.2cqw/1 var(--body);letter-spacing:.6cqw;text-transform:uppercase;color:var(--coral)}.cpanel .yr::before{content:"";width:8cqw;height:1px;background:currentColor}
/* scenes */
.scene .mo::after{background:linear-gradient(to bottom,rgba(47,46,45,.72) 0%,rgba(47,46,45,.15) 34%,rgba(47,46,45,0) 55%,rgba(47,46,45,.35) 100%)}
.scene .pg{z-index:1;justify-content:flex-start;padding:8cqw 8cqw 6cqw;pointer-events:none}
.scene .shead{display:flex;flex-direction:column;gap:1.6cqw;color:#fff;max-width:70cqw}
.scene .shead .label{color:#fff}
.scene .shead h2{font:500 8cqw/1 var(--display);margin:0;text-wrap:balance}
.scene .shead h2 em{font-style:italic;color:#F4DACE}
.scene .shead p{margin:0;font-size:2.5cqw;line-height:1.5;opacity:.92}
.scene .foot{margin-top:auto;border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.85)}
.scene .foot .pn{color:#fff}
.shelf{position:absolute;left:0;right:0;bottom:0;height:31%;background:linear-gradient(to bottom,#EADFD3 0,#F3EBE2 6%,var(--paper) 40%);box-shadow:0 -1.2cqw 4cqw rgba(0,0,0,.35);border-top:1px solid rgba(234,124,91,.6);z-index:0}
.shelfmode .mo::after{background:linear-gradient(to bottom,rgba(47,46,45,.72) 0%,rgba(47,46,45,.15) 34%,rgba(47,46,45,0) 60%)}
.shelfmode .foot{border-color:var(--rule);color:var(--muted);z-index:3}
.shelfmode .foot .pn{color:var(--coral)}
.scene .frame{z-index:1}
.flatlay .cut img{transform:rotate(var(--r));filter:drop-shadow(.3cqw .6cqw 1.1cqw rgba(0,0,0,.30)) drop-shadow(0 .15cqw .25cqw rgba(0,0,0,.28))}.flatlay .cut:hover img{transform:rotate(var(--r)) scale(1.03)}.flatlay .cut::after{display:none}
.cut{all:unset;position:absolute;z-index:2;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.cut img{height:var(--h);width:auto;max-width:44cqw;object-fit:contain;filter:drop-shadow(0 1.6cqw 1.6cqw rgba(0,0,0,.45)) drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.35));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.cut:hover img,.cut:focus-visible img{transform:translateY(-1.4cqw) scale(1.03)}
.cut:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cut::after{content:"";width:80%;height:2.4cqw;margin-top:-1.4cqw;border-radius:50%;background:radial-gradient(rgba(0,0,0,.45),transparent 70%);z-index:-1}
.hot{position:absolute;left:50%;top:-1cqw;transform:translate(-50%,-100%);white-space:nowrap;background:var(--paper);color:var(--charcoal);font:600 2cqw/1 var(--body);padding:1.3cqw 2cqw 1.3cqw 1.4cqw;border-radius:99px;display:flex;align-items:center;gap:1.2cqw;box-shadow:0 1cqw 3cqw rgba(0,0,0,.25)}
.hot.al{left:0;transform:translate(0,-100%)}.hot.ar{left:auto;right:0;transform:translate(0,-100%)}
.hot i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(234,124,91,.6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(234,124,91,.6)}70%{box-shadow:0 0 0 2cqw rgba(234,124,91,0)}100%{box-shadow:0 0 0 0 rgba(234,124,91,0)}}
.page.show .cut{animation:drop .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d)}
@keyframes drop{from{opacity:0;transform:translateY(-4cqw)}to{opacity:1;transform:none}}

#book.fade{animation:bookfade .35s ease}@keyframes bookfade{from{opacity:.35}to{opacity:1}}
/* motion: content rises in each time a page opens */
.rise{animation:none}
.page.show .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(3cqw)}to{opacity:1;transform:none}}

/* overlays */
.overlay{position:fixed;inset:0;z-index:20;background:rgba(47,46,45,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.sheet{background:var(--paper);border-radius:20px;max-width:880px;width:100%;max-height:calc(100% - 32px);overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.25);position:relative;animation:pop .35s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:var(--white);font-size:20px;cursor:pointer;color:var(--charcoal);z-index:2}
.qv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:28px}
.qv .bigimg{background:var(--white);border:1px solid var(--rule);border-radius:16px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.qv .bigimg img{width:88%;height:88%;object-fit:contain}
.qv h3{font:500 34px/1.05 var(--display);color:var(--charcoal);margin:6px 0 10px}
.qv p{margin:0 0 10px;line-height:1.55;color:#57534F}
.qv .pr{font-weight:700;font-size:18px;color:var(--ink)}
.qv .lab{font:500 11px/1 var(--body);letter-spacing:3px;text-transform:uppercase;color:var(--coral)}
.qv .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn{font:500 14px/1 var(--body);padding:12px 16px;border-radius:999px;border:1px solid var(--coral);background:var(--coral);color:var(--white);cursor:pointer}
.btn.ghost{background:var(--white);color:var(--coral-ink)}
.btn:hover{filter:brightness(.96)}
.panel{padding:28px}
.panel h3{font:500 34px/1 var(--display);margin:0 0 6px;color:var(--charcoal)}
.panel h3 em{color:var(--coral)}
.panel .sublabel{color:var(--muted);margin:0 0 16px}
.search{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.search input{flex:1 1 240px;min-width:0;font:400 16px/1 var(--body);padding:12px 16px;border-radius:999px;border:1px solid var(--rule);background:var(--white);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:10px;transition:border-color .2s,transform .2s}
.card:hover,.card:focus-visible{border-color:var(--coral);transform:translateY(-2px)}
.card img{width:100%;aspect-ratio:1/1;object-fit:contain}
.card b{font:600 16px/1.1 var(--display);color:var(--charcoal)}
.card span{font-size:12px;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:10px}
.li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:8px}
.li img{width:64px;height:64px;object-fit:contain}
.li b{font:600 17px/1.1 var(--display);color:var(--charcoal)}
.li span{display:block;font-size:12px;color:var(--muted)}
.li button{border:none;background:none;color:var(--coral-ink);cursor:pointer;font-size:13px}
.empty{padding:26px;border:1px dashed var(--rule);border-radius:14px;text-align:center;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--charcoal);color:var(--white);padding:12px 18px;border-radius:999px;font-size:14px;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.copybox{width:100%;box-sizing:border-box;min-height:120px;font:13px/1.5 var(--body);border:1px solid var(--rule);border-radius:12px;padding:12px;margin-top:12px}
/* intro */
.intro{position:fixed;inset:0;z-index:40;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s}
.intro img{width:150px;height:auto;animation:introlo 1.1s cubic-bezier(.2,.7,.2,1) both}
.intro span{font:italic 500 22px/1 var(--display);color:var(--coral);animation:introlo 1.1s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes introlo{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.intro.out{opacity:0;pointer-events:none}
@media (max-width:760px){.qv{grid-template-columns:1fr;padding:20px}.bar .logo{height:28px}.hint{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* ---------- aviso de cookies: tira mínima de una línea (opt-out, como la web) ---------- */
.logolink{display:block;line-height:0;text-decoration:none}
.logolink:hover{opacity:.85}
.o2-consent-link{all:unset;cursor:pointer;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:2px;width:max-content}
.o2-consent-link:hover{color:var(--coral)}
.o2-consent-link:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
/* móvil: la línea de ayuda se oculta, pero "Cookie settings" debe seguir accesible */
@media (max-width:760px){
  .hint{display:block;text-align:center}
  .hint .hint-text{display:none}
}
/* reserva hueco para el aviso (position:fixed) para que no tape las flechas */
.shell{padding-bottom:calc(18px + var(--o2-consent-h, 0px))}
/* móvil: navegación de secciones con un selector NATIVO (un toque abre la rueda
   del sistema). Antes los 6 chips envolvían a 4-5 filas: el header llegaba a
   200px en pantallas de 320px, tapaba las flechas y provocaba scroll. */
#tabsSel{display:none}
@media (max-width:760px){
  #tabs{display:none}
  #tabsSel{display:inline-block;max-width:46vw;text-overflow:ellipsis}
  .bar{row-gap:8px}
  .bar .logo{height:26px}
  .chip{font-size:12px;padding:7px 11px}
  .tools{gap:6px}
}
/* pantallas muy estrechas (320px): los 3 chips deben caber en UNA fila o el
   header sube a 3 filas y empuja las flechas detrás del aviso */
@media (max-width:380px){
  .chip{font-size:11px;padding:6px 9px}
  .bar .logo{height:22px}
  #tabsSel{max-width:40vw;font-size:11px;padding:6px 9px}
  .tools{gap:5px}
}
/* ---------- la página final desbordaba (bug preexistente: cortaba el pie y,
   con la barra de cookies reservando hueco, también la tarjeta de contacto).
   Se aprieta SOLO esa página para que todo entre. ---------- */
.closing .pg{gap:2.2cqw;padding:6cqw 7cqw 4cqw}
.closing .steps{gap:1.8cqw}
.closing .step{grid-template-columns:9cqw 1fr;gap:2.4cqw}
.closing .step .n{width:9cqw;height:9cqw;font-size:5cqw}
.closing .step b{font-size:3.8cqw;margin-bottom:.5cqw}
.closing .step span{font-size:2.3cqw;line-height:1.4}
.closing .more{padding:2.4cqw 3cqw}
.closing .more .mt{font-size:3.5cqw}
.closing .contact{padding:2.4cqw 3.2cqw;gap:.5cqw;font-size:2.2cqw}
.closing .contact img{width:30cqw;margin-bottom:.8cqw}
#o2-consent{display:none}
html.o2-consent-pending #o2-consent{display:block}
#o2-consent{position:fixed;left:0;right:0;bottom:0;z-index:999999;background:#fdf9f6;color:#2c2520;border-top:1px solid rgba(44,37,32,.14);box-shadow:0 -1px 8px rgba(44,37,32,.05);font:400 12px/1.25 var(--body)}
#o2-consent .o2c-inner{max-width:1180px;margin:0 auto;padding:4px 12px;display:flex;align-items:center;gap:8px}
#o2-consent .o2c-copy{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
#o2-consent p{margin:0}
#o2-consent a{color:#ea7c5b;text-decoration:underline;text-underline-offset:2px}
#o2-consent .o2c-sep{opacity:.4}
#o2-consent .o2c-link{all:unset;cursor:pointer;color:#ea7c5b;font-weight:600;font-size:12px;text-decoration:underline;text-underline-offset:2px}
#o2-consent details{position:relative}
#o2-consent summary{cursor:pointer;color:#ea7c5b;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:4px}
#o2-consent summary::-webkit-details-marker{display:none}
#o2-consent summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .15s}
#o2-consent details[open] summary::after{transform:rotate(-135deg) translateY(1px)}
/* el panel flota: al abrirlo NO cambia la altura de la tira ni el layout del libro */
#o2-consent details p{position:absolute;bottom:calc(100% + 8px);left:0;width:min(520px,calc(100vw - 24px));margin:0;background:#fdf9f6;color:#4a3f38;border:1px solid rgba(44,37,32,.16);border-radius:10px;padding:11px 13px;box-shadow:0 12px 30px rgba(0,0,0,.14);font-size:12.5px;line-height:1.45}
#o2-consent .o2c-x{all:unset;cursor:pointer;margin-left:auto;flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:15px;line-height:1;color:#7a706a}
#o2-consent .o2c-x:hover{background:rgba(44,37,32,.09);color:#2c2520}
#o2-consent a:focus-visible,#o2-consent button:focus-visible,#o2-consent summary:focus-visible{outline:2px solid #ea7c5b;outline-offset:2px}
@media (max-width:600px){
  #o2-consent .o2c-inner{padding:6px 10px;gap:6px}
}