/* ============================================================
   ALTUS VISION — PAQUETES · sistema visual
   Hereda altusagency.io (ink / bone / rojo, Saira Expanded +
   Archivo + Instrument Serif) con la estructura de una página
   de producto: mucho aire, poco texto, un acento.
   ============================================================ */
:root{
  --ink:#0B0B0D; --ink2:#121214; --bone:#F1EEE8; --paper:#FFFFFF;
  --tx:#0A0A0B; --mut:rgba(10,10,11,.56); --soft:rgba(10,10,11,.74);
  --line:rgba(10,10,11,.10); --line2:rgba(10,10,11,.18);
  --red:#ff2a2a; --red-ink:#d81f1f; --gold:#C9A24A;
  --bone-tx:#F1EEE8; --bone-mut:rgba(241,238,232,.56); --bone-line:rgba(241,238,232,.14);
  --disp:"Saira",system-ui,sans-serif; --body:"Archivo",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.19,1,.22,1); --r:28px; --r2:18px;
  --pad:clamp(20px,5vw,64px); --wrap:1180px; --nav:56px;
  --stretch:112%; /* ancho de Saira: 100 normal · 112 semi · 125 expandida (la marca) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-weight:400;font-size:17px;line-height:1.5;color:var(--tx);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-family:var(--serif);font-style:italic;font-weight:400}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(80px,11vw,150px) 0}
.dark{background:var(--ink);color:var(--bone-tx)}
.bone{background:var(--bone)}

/* tipografía */
.lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--mut);margin-bottom:22px}
.dark .lbl{color:var(--bone-mut)}
h1,h2,h3,.disp,.brand,.card__name,.price b,.gantt__name,.step i,.cmp thead th .nm,.cmp tr.precio td b,.pay__c b,.ext__c .pr,.case__t,.case__m b,.start a b,.chooser__ans .v{font-stretch:var(--stretch)}
.brand{font-stretch:125%}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:500;letter-spacing:-.02em;line-height:1.02}
h1{font-size:clamp(40px,6.6vw,88px)}
h2{font-size:clamp(32px,4.4vw,58px);max-width:14ch}
h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.6vw,22px);font-weight:300;color:var(--soft);max-width:46ch;margin-top:18px;line-height:1.45}
.dark .lead{color:rgba(241,238,232,.72)}
.head{margin-bottom:clamp(40px,6vw,72px)}

/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:.01em;transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn--ink{background:var(--tx);color:var(--bone)}
.btn--bone{background:var(--bone);color:var(--tx)}
.btn--ghost{border:1px solid var(--line2)}
.dark .btn--ghost{border-color:var(--bone-line)}
.btn--sm{height:42px;padding:0 18px;font-size:14px}
.btn svg{width:16px;height:16px}

/* nav */
#nav{--nbg:rgba(241,238,232,.82);--ntx:var(--tx);--nmut:rgba(10,10,11,.62);--nline:rgba(10,10,11,.08);--nbtn:var(--tx);--nbtntx:var(--bone);position:fixed;inset:0 0 auto 0;height:var(--nav);z-index:50;display:flex;align-items:center;background:var(--nbg);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);color:var(--ntx);border-bottom:1px solid var(--nline);transition:background .5s,color .5s,border-color .5s}
#nav.on-dark{--nbg:rgba(11,11,13,.55);--ntx:var(--bone-tx);--nmut:rgba(241,238,232,.66);--nline:rgba(241,238,232,.07);--nbtn:var(--bone);--nbtntx:var(--tx)}
#nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px}
.brand{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.08em;white-space:nowrap}
.brand sup{font-size:7px;vertical-align:top;margin-left:1px}
.nav__links{display:flex;gap:26px;font-size:13px;color:var(--nmut)}
.nav__links a:hover{color:var(--ntx)}
.nav__tools{display:flex;align-items:center;gap:10px}
#lang{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--nline);font-size:12px;letter-spacing:.12em;font-weight:500;transition:background .3s;color:var(--ntx)}
#lang:hover{background:var(--nline)}
#nav .btn--sm{height:34px;padding:0 14px;font-size:13px;background:var(--nbtn);color:var(--nbtntx)}

/* hero */
#hero{min-height:calc(var(--vh,1svh)*100);display:flex;align-items:center;padding-top:calc(var(--nav) + 40px);position:relative}
#hero h1{max-width:12ch}
#hero .lead{max-width:34ch}
.hero__cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.chooser{margin-top:clamp(64px,9vw,110px);padding-top:40px;border-top:1px solid var(--bone-line);max-width:980px}
.chooser__q{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-mut);margin-bottom:20px;font-weight:500}
.chooser__opts{display:flex;flex-wrap:wrap;gap:12px}
.opt{height:60px;padding:0 28px;border-radius:999px;border:1px solid rgba(241,238,232,.22);font-size:19px;color:rgba(241,238,232,.9);transition:all .35s var(--ease)}
.opt:hover{border-color:rgba(241,238,232,.5)}
.opt[aria-pressed="true"]{background:var(--bone);color:var(--tx);border-color:var(--bone)}
.chooser__ans{display:flex;align-items:center;gap:22px;margin-top:30px;min-height:56px;opacity:0;transform:translateY(6px);transition:all .6s var(--ease)}
.chooser__ans.on{opacity:1;transform:none}
.chooser__ans .k{font-size:15px;color:var(--bone-mut)}
.chooser__ans .v{font-family:var(--disp);font-weight:600;font-size:34px;letter-spacing:-.02em}
.chooser__ans .v i{font-style:normal;color:var(--red);margin-right:12px;font-size:18px;letter-spacing:.08em}
.chooser__ans a{font-size:16px;border-bottom:1px solid rgba(241,238,232,.35);padding-bottom:2px;margin-left:auto}

/* menú de paquetes */
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:34px 30px 30px;display:flex;flex-direction:column;position:relative;transition:box-shadow .6s var(--ease),border-color .4s}
.card:hover{box-shadow:0 30px 60px -40px rgba(10,10,11,.35)}
.card.rec{border-color:var(--tx);box-shadow:0 0 0 1px var(--tx) inset}
.card__n{font-size:12px;letter-spacing:.2em;color:var(--mut);font-weight:500;display:flex;justify-content:space-between;align-items:center}
.card__rec{display:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--tx);color:var(--bone);padding:5px 10px;border-radius:999px}
.card.rec .card__rec{display:inline-block}
.card__name{font-family:var(--disp);font-weight:600;font-size:clamp(28px,2.6vw,36px);letter-spacing:-.02em;margin-top:26px;line-height:1}
.card__tag{font-size:13px;color:var(--red-ink);margin-top:10px;font-weight:500;display:flex;align-items:center;gap:6px}
.card__tag svg{width:12px;height:12px}
.card__for{color:var(--soft);margin-top:14px;font-size:16px;line-height:1.45;min-height:3.2em}
.card__price{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font-family:var(--disp);font-weight:600;font-size:clamp(34px,3.4vw,46px);letter-spacing:-.03em;line-height:1}
.price span{font-size:14px;color:var(--mut)}
.price__iva{font-size:13px;color:var(--mut);margin-top:6px}
.price__sub{font-size:13px;color:var(--mut);margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.price__sub b{font-weight:500;color:var(--tx)}
.card__dur{font-size:13px;color:var(--mut);margin-top:6px}
.card__inc{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:10px;font-size:15px;flex:1}
.card__inc li{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.card__inc svg{width:16px;height:16px;flex:none;margin-top:3px}
.card__inc .mas{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:500;margin:8px 0 2px;display:block}
.card__inc .mas + li{margin-top:0}
.card .btn{margin-top:28px;justify-content:center}
.card__tot{font-size:12px;color:var(--mut);text-align:center;margin-top:12px}

/* gantt */
.gantts{display:flex;flex-direction:column;gap:18px}
.gantt{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px 26px;overflow:hidden}
.gantt__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.gantt__name{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.02em}
.gantt__name i{font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--mut);margin-right:12px;font-weight:500}
.gantt__meta{font-size:13px;color:var(--mut)}
.gantt__grid{display:grid;grid-template-columns:170px 1fr;row-gap:10px;column-gap:18px;align-items:center}
.gantt__lab{font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt__lab .short{display:none}
.gantt__months{grid-column:2;display:grid;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:500;margin-bottom:4px}
.gantt__months>span{border-left:1px solid var(--line);padding-left:8px}
.gantt__months .short{display:none}
.gantt__track{position:relative;height:22px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / var(--m)));border-radius:6px}
.gantt__track:last-child{}
.bar{position:absolute;top:4px;height:14px;border-radius:999px;background:var(--tx);transform-origin:left center;transform:scaleX(0);transition:transform .9s var(--ease)}
.in .bar{transform:scaleX(1)}
.bar.arranque{background:var(--tx)}
.bar.estrategia{background:rgba(10,10,11,.28)}
.bar.produccion{background:rgba(10,10,11,.5)}
.bar.publicacion{background:rgba(10,10,11,.82)}
.bar.pauta{background:var(--red)}
.bar.reporte{background:var(--tx);height:10px;width:10px!important;top:6px;border-radius:50%;margin-left:-5px;transform-origin:center}
.bar.rayo{background:var(--red)}
.rayo__tag{position:absolute;left:0;top:-28px;font-size:12px;color:var(--red-ink);font-weight:500;display:flex;align-items:center;gap:4px;white-space:nowrap}
.rayo__tag svg{width:12px;height:12px}
.gantt__legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:12px;color:var(--mut)}
.gantt__legend i{display:inline-block;width:14px;height:8px;border-radius:999px;background:var(--tx);margin-right:6px;vertical-align:middle}
.gantt__legend i.dot{width:8px;height:8px;border-radius:50%}

/* arranque */
.arr{margin-top:clamp(64px,8vw,110px)}
.arr h3{max-width:20ch}
.arr p.lead{font-size:18px;margin-top:12px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px;counter-reset:s}
.step{padding:22px 20px 22px;border-top:1px solid var(--line2)}
.step i{display:block;font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--red-ink);font-style:normal;margin-bottom:14px}
.step b{display:block;font-weight:600;font-size:17px;margin-bottom:6px}
.step p{font-size:14px;color:var(--soft);line-height:1.4}
.arr__note{margin-top:28px;font-size:14px;color:var(--mut);max-width:60ch}

/* comparar */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{text-align:left;padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp th:first-child,.cmp td:first-child{padding-left:0;color:var(--soft);font-weight:400;width:26%}
.cmp thead th{position:sticky;top:var(--nav);background:var(--bone);z-index:2;padding-top:22px;padding-bottom:18px;border-bottom:1px solid var(--line2)}
.cmp thead th .n{display:block;font-size:11px;letter-spacing:.2em;color:var(--mut);font-weight:500;margin-bottom:8px}
.cmp thead th .nm{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.02em}
.cmp td .ok{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--tx);color:var(--bone);align-items:center;justify-content:center}
.cmp td .ok svg{width:11px;height:11px}
.cmp td .no{color:var(--mut)}
.cmp td .rayo{color:var(--red-ink);font-weight:500;display:inline-flex;align-items:center;gap:4px}
.cmp td .rayo svg{width:12px;height:12px}
.cmp tr.precio td{font-weight:500}
.cmp tr.precio td b{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.02em;display:block;margin-bottom:2px}
.cmp tr.pago td{font-size:14px;color:var(--soft)}

.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(56px,7vw,90px)}
.pay__c{background:var(--paper);border-radius:var(--r2);padding:26px 24px}
.pay__c i{display:block;font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--mut);font-weight:500;margin-bottom:12px}
.pay__c b{display:block;font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.pay__c p{font-size:15px;color:var(--soft);line-height:1.45}
.pay__note{margin-top:22px;font-size:14px;color:var(--mut);max-width:70ch}

.ext{margin-top:clamp(56px,7vw,90px);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ext h3{grid-column:1/-1;margin-bottom:6px}
.ext__c{border-top:1px solid var(--line2);padding-top:20px}
.ext__c b{display:block;font-weight:600;font-size:18px;margin-bottom:6px}
.ext__c p{font-size:15px;color:var(--soft)}
.ext__c .pr{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.02em;margin-top:12px}
.ext__c .pr span{font-family:var(--body);font-weight:400;font-size:13px;color:var(--mut);letter-spacing:0;margin-left:8px}

/* casos */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.case{border:1px solid var(--bone-line);border-radius:var(--r);overflow:hidden;background:var(--ink2);display:grid;grid-template-columns:42% 1fr}
.case__v{position:relative;aspect-ratio:4/5;background:#000}
.case__v video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.case__b{padding:30px 28px;display:flex;flex-direction:column}
.case__tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-mut);font-weight:500}
.case__t{font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;line-height:1.15;margin-top:16px}
.case__m{margin-top:auto;padding-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.case__m b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1}
.case__m span{display:block;font-size:12px;color:var(--bone-mut);margin-top:8px;line-height:1.3}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-weight:500;font-size:17px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:22px;height:22px;position:relative;margin-top:2px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--tx);transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details p{padding:0 40px 22px 0;color:var(--soft);font-size:16px;line-height:1.5;max-width:60ch}
.rules{margin-top:clamp(56px,7vw,90px);display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:start}
.rules ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.rules li{padding-left:18px;position:relative;font-size:16px;line-height:1.4}
.rules li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* empezar */
#empezar h2{max-width:none}
.start{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.start a{display:flex;flex-direction:column;gap:16px;padding:26px 24px;border:1px solid var(--bone-line);border-radius:var(--r2);transition:background .4s}
.start a:hover{background:rgba(241,238,232,.06)}
.start a i{font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--bone-mut);font-weight:500}
.start a b{font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.02em}
.start a span{font-size:14px;color:var(--bone-mut);display:flex;align-items:center;gap:8px;margin-top:auto}
.start a span svg{width:14px;height:14px}
.start__alt{margin-top:26px;display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--bone-mut);align-items:center}
.start__alt a{color:var(--bone-tx);border-bottom:1px solid rgba(241,238,232,.3)}
footer{padding:34px 0 40px;border-top:1px solid var(--bone-line);font-size:12px;color:var(--bone-mut);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--bone-tx)}

/* reveal */
.r{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.r.in{opacity:1;transform:none}
.r.d1{transition-delay:.08s}.r.d2{transition-delay:.16s}.r.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}.bar{transform:none;transition:none}html{scroll-behavior:auto}}

/* ============ móvil (pisa los clamp) ============ */
@media (max-width:920px){
  .menu,.pay,.start{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .ext{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .nav__links{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:72px 0}
  h1{font-size:38px}
  h2{font-size:30px}
  h3{font-size:22px}
  .lead{font-size:17px}
  #hero{padding-top:calc(var(--nav) + 56px);min-height:auto;padding-bottom:64px}
  .chooser{margin-top:48px}
  .chooser{max-width:none}
  .chooser__q{font-size:13px}
  .opt{height:50px;font-size:16px;padding:0 18px}
  .chooser__ans .v{font-size:26px}
  .chooser__ans{flex-wrap:wrap}
  .chooser__ans a{margin-left:0}
  .card{padding:26px 22px 22px}
  .card__for{min-height:0}
  .price b{font-size:36px}
  .gantt{padding:22px 18px 20px}
  .gantt__grid{grid-template-columns:96px 1fr;column-gap:10px}
  .gantt__lab{font-size:12px}
  .gantt__lab .full{display:none}.gantt__lab .short{display:inline}
  .gantt__months .full{display:none}.gantt__months .short{display:inline}
  .gantt__months>span{padding-left:5px}
  .cmp th:first-child,.cmp td:first-child{position:sticky;left:0;background:var(--bone);z-index:1;width:38%;min-width:120px;padding-right:10px}
  .cmp thead th:first-child{z-index:3}
  .gantt__name{font-size:18px}
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:18px 0}
  .cmp{font-size:14px}
  .cmp th,.cmp td{padding:14px 12px}
  .cmp thead th{top:var(--nav)}
  .case{grid-template-columns:1fr}
  .case__v{aspect-ratio:16/10}
  .case__m b{font-size:26px}
  .faq summary{font-size:16px}
  .rules ul{grid-template-columns:1fr}
  .start a b{font-size:20px}
  #nav .btn--sm{display:none}
}

/* muestras de trabajo */
#work{padding:0 0 clamp(60px,8vw,110px)}
.work{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.work__t{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#111}
.work__t video{width:100%;height:100%;object-fit:cover}
@media (max-width:920px){.work{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.work{display:flex;overflow-x:auto;gap:8px;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.work::-webkit-scrollbar{display:none}.work__t{flex:0 0 46%;scroll-snap-align:start}}

/* ═══ Altus In-House · el ticket dorado ═══ */
.gold{margin-top:18px;background:var(--ink);color:var(--bone-tx);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;border:1px solid rgba(201,162,74,.25);position:relative}
.gold.rec{box-shadow:0 0 0 1px var(--gold) inset;border-color:var(--gold)}
.gold__v{position:relative;background:#000;aspect-ratio:16/9;align-self:center;margin:22px 0 22px 22px;border-radius:18px;overflow:hidden;width:calc(100% - 22px)}
.gold__v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gold__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(241,238,232,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease),opacity .4s}
.gold__play svg{width:30px;height:30px;margin-left:4px}
.gold__play:hover{transform:scale(1.06)}
.gold.playing .gold__play{opacity:0;pointer-events:none}
.gold__snd{position:absolute;right:14px;bottom:12px;height:38px;padding:0 14px 0 12px;border-radius:999px;background:rgba(241,238,232,.92);color:var(--ink);font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;transition:transform .5s var(--ease)}
.gold__snd:hover{transform:translateY(-1px)}
.gold__snd svg{width:16px;height:16px}
.gold__snd .i-on{display:none}
.gold__snd[aria-pressed="true"] .i-on{display:block}
.gold__snd[aria-pressed="true"] .i-off{display:none}
.gold__cap{position:absolute;left:18px;bottom:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,238,232,.62);font-weight:500}
.gold.playing .gold__cap{opacity:0}
.gold__b{padding:clamp(28px,3.4vw,48px)}
.gold__lbl{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--gold)}
.gold__lbl i{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:15px;color:rgba(241,238,232,.62)}
.gold h3{font-size:clamp(28px,3vw,40px);margin-top:22px;max-width:14ch}
.gold p{font-size:16px;line-height:1.5;color:rgba(241,238,232,.72);margin-top:14px;max-width:44ch}
.gold p.gold__p1{font-size:19px;color:var(--bone-tx);margin-top:18px}
.gold__chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.gold__chips li{font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid rgba(201,162,74,.45);color:rgba(241,238,232,.86)}
.gold .btn{margin-top:26px}
.cmp__note{font-size:13px;color:var(--mut);margin-top:14px}
.cmpm{display:none}
@media (max-width:640px){
  .cmpwrap{display:none}
  .cmpm{display:flex;flex-direction:column;gap:14px}
  .cmpm__c{background:var(--paper);border-radius:var(--r2);padding:22px 20px}
  .cmpm__h{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
  .cmpm__h i{font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--mut);font-weight:500}
  .cmpm__h b{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.02em;font-stretch:var(--stretch)}
  .cmpm__r{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:flex-start}
  .cmpm__r:last-child{border-bottom:0}
  .cmpm__r span:first-child{color:var(--soft);flex:0 0 46%}
  .cmpm__r span:last-child{text-align:right;flex:1}
  .cmpm__r span:last-child b{display:block;font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.02em;font-stretch:var(--stretch)}
  .cmpm .ok{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--tx);color:var(--bone);align-items:center;justify-content:center}
  .cmpm .ok svg{width:12px;height:12px;stroke-width:2.2}
  .cmpm .no{color:var(--mut)}
  .cmpm .rayo{color:var(--red-ink);font-weight:500;display:inline-flex;align-items:center;gap:4px}
  .cmpm .rayo svg{width:12px;height:12px}
}
/* animación ligada al scroll (JS pone opacity/transform en línea) */
.sa{transition:none!important;will-change:transform,opacity}
html.live .sa{opacity:0}
html.live #hero .wrap{will-change:transform,opacity}
/* medios con movimiento sutil al hacer scroll */
.mv{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.mv,.sa{transform:none!important;opacity:1!important;filter:none!important}}
@media (max-width:920px){.gold{grid-template-columns:1fr}.gold__v{margin:18px 18px 0;width:calc(100% - 36px)}}
@media (max-width:640px){.gold__b{padding:24px 22px 26px}.gold h3{font-size:26px}.gold p{font-size:15px}.gold p.gold__p1{font-size:17px}.gold__lbl{flex-wrap:wrap;gap:6px 14px;letter-spacing:.16em}.gold__cap{display:none}.gold__snd{right:10px;bottom:10px}}