/* ============================================================
   DTACHE MUSIC — Tokens
   (En WordPress: Elementor > Ajustes del sitio > Colores / Tipografías globales)
   ============================================================ */
:root{
  --ink:#0B0B0D;       /* fondo principal */
  --carbon:#151519;    /* tarjetas y bloques */
  --graphite:#27272C;  /* separadores */
  --paper:#F2F0EB;     /* títulos y texto principal */
  --silver:#A7A7AA;    /* texto secundario */
  --dim:#6F6F74;       /* etiquetas técnicas */
  --gold:#C8A96B;      /* acento, uso mínimo */
  --wa:#C8A96B;        /* solo WhatsApp */
  --wa-hover:#D8BD86;
  --line:rgba(242,240,235,.09);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1240px;
  --gut:clamp(16px,4vw,40px);
  --header:68px;
  color-scheme:dark;
}
html{background:var(--ink);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--ink);color:var(--paper);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none}
section[id],main[id]{scroll-margin-top:calc(var(--header) + 12px)}

/* ---------- Type ---------- */
.eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--gold)}
.h2{font-family:var(--f-display);font-weight:600;font-stretch:100%;font-size:clamp(34px,5.2vw,64px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.h2 em,.hero-line em,.h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.lead{color:var(--silver);font-size:clamp(17px,1.5vw,19px);max-width:56ch;text-wrap:pretty}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--dim)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:3px;font:600 15px/1 var(--f-body);letter-spacing:.01em;transition:background .2s,border-color .2s,color .2s,transform .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-wa{background:var(--wa);color:#141311}
.btn-wa:hover{background:var(--wa-hover)}
.btn-wa .i{width:20px;height:20px}
.btn-ghost{border:1px solid rgba(242,240,235,.22);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff}
.btn-sm{min-height:42px;padding:0 16px;font-size:14px}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
.link-wa{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--paper);border-bottom:1px solid rgba(200,169,107,.5);padding-bottom:3px;transition:border-color .2s,color .2s}
.link-wa .i{color:var(--wa);width:16px;height:16px}
.link-wa:hover{border-color:var(--wa)}
.link{font-weight:500;font-size:15px;color:var(--silver);border-bottom:1px solid var(--graphite);padding-bottom:3px;transition:color .2s,border-color .2s}
.link:hover{color:var(--paper);border-color:var(--silver)}

/* ---------- Header ---------- */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;height:var(--header);transition:background .3s,border-color .3s;background:rgba(11,11,13,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(242,240,235,.09)}
.header.scrolled{background:rgba(11,11,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.header .wrap{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:inline-flex;align-items:center;gap:10px;flex:none}
.logo-word{font:700 19px/1 var(--f-display);font-stretch:125%;letter-spacing:.16em;color:#F2F0EB}
.logo-bow{width:22px;height:1px;background:var(--gold)}
.logo-sub{font:500 10px/1 var(--f-mono);letter-spacing:.32em;color:#A7A7AA}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-size:14px;font-weight:500;color:#A7A7AA;transition:color .2s;position:relative;padding-block:6px}
.nav a:hover,.nav a[aria-current="true"]{color:#F2F0EB}
.nav a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)}
.head-actions{display:flex;align-items:center;gap:10px}
.icon-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:3px;color:#F2F0EB}
.icon-btn:hover{background:var(--carbon)}
.badge{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--paper);color:var(--ink);font:600 10px/17px var(--f-mono);text-align:center}
.badge[data-n="0"]{display:none}
.menu-btn{display:none}
@media (max-width:1060px){
  .nav{display:none}
  .head-actions{margin-left:auto}
  .menu-btn{display:grid}
  .head-actions .btn-wa span{display:none}
  .head-actions .btn-wa{width:44px;padding:0;min-height:44px}
}
.sheet{position:fixed;inset:0;z-index:70;background:rgba(11,11,13,.97);backdrop-filter:blur(8px);padding:calc(env(safe-area-inset-top,0px) + 20px) var(--gut) 32px;display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.sheet.open{opacity:1;visibility:visible}
.sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.sheet nav a{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font:600 26px/1.1 var(--f-display);letter-spacing:-.01em}
.sheet nav a small{font:400 11px var(--f-mono);color:var(--dim);letter-spacing:.1em}
.sheet .btn{margin-top:24px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);margin-top:calc(var(--header) * -1);padding-top:calc(var(--header) + clamp(28px,6vw,72px))}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 70% at 88% 18%,rgba(200,169,107,.10),transparent 60%),
  radial-gradient(40% 50% at 8% 100%,rgba(242,240,235,.04),transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--silver);margin-bottom:clamp(20px,3vw,32px)}
.kicker b{color:var(--paper);font-weight:500}
.kicker .sep{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.hero-mark{font-family:var(--f-display);font-weight:400;font-stretch:100%;font-size:clamp(40px,7.4vw,104px);line-height:.92;letter-spacing:0;margin-left:-.01em;white-space:nowrap}
.hero-mark span{display:flex;align-items:center;gap:.35em;font:500 clamp(12px,1.3vw,16px)/1 var(--f-mono);letter-spacing:.6em;color:var(--silver);margin-top:clamp(14px,1.6vw,22px);margin-left:.08em}
.hero-mark span::before{content:"";width:clamp(40px,6vw,86px);height:1px;background:var(--gold)}
.hero-line{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;margin-top:clamp(28px,4vw,48px);text-wrap:balance}
.hero-line em{color:var(--paper)}
.hero .lead{margin-top:18px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--silver)}
.live{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(200,169,107,.15)}
.hero-photo{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--carbon);overflow:hidden;border-radius:2px}
.art{position:absolute;inset:0;width:100%;height:100%;display:block}
.photo-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;justify-content:space-between;gap:10px;font:400 11px/1.4 var(--f-mono);letter-spacing:.06em;color:rgba(242,240,235,.62);background:linear-gradient(transparent,rgba(11,11,13,.85))}
.photo-cap b{color:var(--paper);font-weight:500}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:clamp(40px,6vw,64px);padding-block:18px;border-top:1px solid var(--line);font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silver)}
.chain span{display:inline-flex;align-items:center}
.chain span+span::before{content:"";width:clamp(14px,3vw,44px);height:1px;background:var(--graphite);margin-inline:12px}
.chain span:last-child{color:var(--paper)}
.strings{position:relative;height:170px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strings canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.strings-hint{position:absolute;right:calc(var(--gut) + 170px);bottom:14px;font:400 11px var(--f-mono);letter-spacing:.08em;color:var(--dim);pointer-events:none}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{aspect-ratio:16/11;order:-1;display:none}
  .strings{height:164px}
}

/* ---------- Sections ---------- */
.section{padding-block:clamp(80px,11vw,150px);position:relative}
.section+.section{border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head .eyebrow{grid-column:1/-1}
.sec-head .lead{justify-self:end}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}.sec-head .lead{justify-self:start}}

/* CTA band — aparece después de cada bloque clave */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(40px,6vw,64px);padding:clamp(22px,3vw,30px) clamp(20px,3vw,34px);background:var(--carbon);border-radius:3px}
.cta-band p{font:500 clamp(19px,2vw,23px)/1.3 var(--f-display);letter-spacing:-.01em;max-width:40ch}
.cta-band p span{display:block;font:400 15px/1.5 var(--f-body);color:var(--silver);margin-top:4px;letter-spacing:0}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Services ---------- */
.svc-list{border-top:1px solid var(--line)}
.svc{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2.6fr);gap:24px 40px;padding-block:clamp(28px,3.4vw,40px);border-bottom:1px solid var(--line)}
.svc::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.svc:hover::before{transform:scaleX(1)}
.svc-id{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.code{font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--dim);border:1px solid var(--graphite);padding:6px 8px;border-radius:2px}
.svc h3{font:600 clamp(24px,2.5vw,32px)/1.08 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.mode{display:inline-flex;align-items:center;gap:8px;font:400 12px/1 var(--f-mono);color:var(--silver);letter-spacing:.04em}
.mode::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--silver)}
.mode.direct::before{background:var(--paper);box-shadow:0 0 0 3px rgba(242,240,235,.12)}
.mode.quote::before{background:var(--wa)}
.svc-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin:0}
.svc-info dt{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.svc-info dd{margin:0;font-size:15px;line-height:1.55;color:var(--silver)}
.svc-info div:first-child dd{color:var(--paper)}
.svc-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media (max-width:1060px){.svc{grid-template-columns:1fr}.svc-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 22px}}
@media (max-width:640px){.svc-info{grid-template-columns:1fr;gap:16px}}

/* ---------- Portfolio ---------- */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:28px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:0 16px;border:1px solid var(--graphite);border-radius:999px;font:500 14px/1 var(--f-body);color:var(--silver);transition:all .2s}
.chip:hover{color:var(--paper);border-color:var(--silver)}
.chip[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chip sup{font:400 10px var(--f-mono);margin-left:4px;opacity:.7}
.work.featured{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:0;background:var(--carbon);border-radius:3px;overflow:hidden;margin-bottom:clamp(16px,2vw,24px)}
.featured .work-media{aspect-ratio:16/9}
.featured .work-body{padding:clamp(22px,3vw,40px);justify-content:center}
.featured h3{font-size:clamp(24px,2.6vw,34px)}
@media (max-width:900px){.work.featured{grid-template-columns:1fr}}
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:1000px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.works{grid-template-columns:1fr}}
.work{display:flex;flex-direction:column;background:var(--carbon);border-radius:3px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.work[hidden]{display:none}
.work.enter{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}
.work-media{position:relative;aspect-ratio:16/10;max-width:100%;background:#0e0e11;overflow:hidden}
.work-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.work:hover .art{transform:scale(1.025)}
.work .art{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tag{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.tag span{font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border-radius:2px;background:rgba(11,11,13,.72);backdrop-filter:blur(6px);color:var(--paper)}
.tag span.ex{color:var(--dim)}
.play{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(11,11,13,.72);backdrop-filter:blur(6px);font:500 13px/1 var(--f-body);color:var(--paper);transition:background .2s}
.play:hover{background:rgba(11,11,13,.92)}
.play .dot{width:36px;height:36px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center}
.play .dot .i{width:14px;height:14px}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:2px;height:100%;background:var(--paper);transform-origin:bottom;transform:scaleY(.3)}
.playing .eq i{animation:eq .9s ease-in-out infinite}
.playing .eq i:nth-child(2){animation-delay:-.3s}.playing .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.media-note{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:20px;text-align:center;background:rgba(11,11,13,.86);font:400 13px/1.5 var(--f-mono);color:var(--silver)}
.media-note b{display:block;color:var(--paper);font-weight:500;margin-bottom:6px}
.work-body{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,24px);flex:1}
.work-role{font:500 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.work h3{font:600 20px/1.2 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.work p{font-size:15px;color:var(--silver);line-height:1.55}
.work .link-wa{margin-top:auto;align-self:flex-start;padding-top:12px}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.about-photo{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--carbon);border-radius:2px;overflow:hidden}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin-block:26px 30px}
.roles span{font:500 13px/1 var(--f-body);padding:10px 14px;border:1px solid var(--graphite);border-radius:999px;color:var(--paper)}
.about-text p+p{margin-top:16px}
.about-text .lead{color:var(--silver)}
.detache{margin-top:32px;padding:20px 22px;border-left:1px solid var(--gold);background:linear-gradient(90deg,rgba(200,169,107,.05),transparent)}
.detache dt{font:italic 400 26px/1 var(--f-serif);color:var(--paper)}
.detache dt small{font:400 11px var(--f-mono);letter-spacing:.1em;color:var(--dim);margin-left:10px;font-style:normal}
.detache dd{margin:10px 0 0;color:var(--silver);font-size:15px;max-width:52ch}
.about-ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:32px}
@media (max-width:860px){.about{grid-template-columns:1fr}.about-photo{aspect-ratio:5/4}}

/* ---------- Process ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,var(--graphite),var(--graphite) 80%,rgba(200,169,107,.5))}
.step{position:relative;padding-top:40px}
.step::before{content:"";position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;background:var(--ink);border:1px solid var(--silver);transition:background .3s,border-color .3s}
.step:hover::before{background:var(--gold);border-color:var(--gold)}
.step:last-child::before{border-color:var(--wa)}
.step-n{font:500 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--dim)}
.step h3{font:600 20px/1.2 var(--f-display);letter-spacing:-.01em;margin-block:10px 10px;text-wrap:balance}
.step p{font-size:15px;color:var(--silver)}
@media (max-width:960px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before{left:5px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:linear-gradient(180deg,var(--graphite) 80%,rgba(200,169,107,.5))}
  .step{padding:0 0 30px 36px}
  .step::before{top:2px}
}

/* ---------- Hire paths ---------- */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3.4vw,44px);background:var(--carbon);border-radius:3px;border:1px solid transparent;transition:border-color .3s}
.path:hover{border-color:var(--graphite)}
.path h3{font:600 clamp(24px,2.6vw,32px)/1.1 var(--f-display);letter-spacing:-.02em}
.path p{color:var(--silver);max-width:44ch}
.path ul{list-style:none;padding:0;margin:4px 0 10px;display:grid;gap:8px}
.path li{display:flex;gap:10px;font-size:15px;color:var(--silver)}
.path li::before{content:"";flex:none;width:12px;height:1px;background:var(--graphite);margin-top:12px}
.path .btn{align-self:flex-start;margin-top:auto}
.future{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:1px;background:var(--line);margin-top:clamp(16px,2vw,24px);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.future>*{background:var(--ink);padding:18px 20px}
.future .ft-h{font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--silver);display:flex;align-items:center}
.future div b{display:block;font:600 16px/1.2 var(--f-display)}
.future div span{font:400 11px var(--f-mono);letter-spacing:.08em;color:var(--dim)}
.future div.on span{color:var(--wa)}
@media (max-width:860px){.future{grid-template-columns:repeat(2,minmax(0,1fr))}.future .ft-h{grid-column:1/-1}}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact .h2{font-size:clamp(40px,6.4vw,84px)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.composer{background:var(--carbon);border-radius:3px;padding:clamp(22px,3vw,34px);display:grid;gap:16px}
.composer h3{font:600 20px/1.2 var(--f-display)}
.composer>p{font-size:14px;color:var(--silver);margin-top:-8px}
.field{display:grid;gap:8px}
.field label{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;background:var(--ink);border:1px solid var(--graphite);border-radius:3px;color:var(--paper);font:400 16px/1.4 var(--f-body);transition:border-color .2s}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--silver)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--silver) 50%),linear-gradient(135deg,var(--silver) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.composer .btn{width:100%}
.preview{font:400 12px/1.5 var(--f-mono);color:var(--dim);padding:12px 14px;border:1px dashed var(--graphite);border-radius:3px;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:56px 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-grid h4{margin:0 0 14px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-grid a{color:var(--silver);font-size:15px}
.foot-grid a:hover{color:var(--paper)}
.foot-grid .claim{margin-top:18px;font:italic 400 24px/1.2 var(--f-serif);color:var(--paper);max-width:22ch}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line)}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}

/* ---------- WhatsApp fijo ---------- */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:55;display:flex;align-items:center;gap:0;height:56px;padding:0 17px;border-radius:28px;background:var(--wa);color:#141311;box-shadow:0 10px 30px rgba(0,0,0,.45);font:600 15px/1 var(--f-body);transition:gap .3s,padding .3s,background .2s}
.wa-float .i{width:22px;height:22px}
.wa-float span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s}
.wa-float:hover{gap:10px;padding-right:22px;background:var(--wa-hover)}
.wa-float:hover span{max-width:200px}
.mbar{display:none}
@media (max-width:760px){
  .wa-float{display:none}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(11,11,13,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar .btn-wa{flex:1}
  .mbar .icon-btn{width:50px;height:50px;border:1px solid var(--graphite)}
  body{padding-bottom:78px}
}

/* ---------- Tienda ---------- */
.shop-head{padding-block:clamp(48px,7vw,96px) clamp(28px,4vw,48px)}
.h1{font-family:var(--f-display);font-weight:600;font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.03em;margin-top:18px;text-wrap:balance}
.shop-head .lead{margin-top:18px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:flex;align-items:center;gap:8px;padding:14px 16px;font:500 15px/1 var(--f-body);color:var(--silver);border-bottom:1px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--paper);border-color:var(--paper)}
.tab small{font:400 10px/1 var(--f-mono);letter-spacing:.08em;color:var(--dim);border:1px solid var(--graphite);padding:4px 6px;border-radius:2px}
.shop-note{display:flex;flex-wrap:wrap;gap:10px 28px;padding-block:18px;font-size:14px;color:var(--silver)}
.shop-note .mode{font-size:13px}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);padding-bottom:clamp(56px,8vw,96px)}
@media (max-width:1000px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.products{grid-template-columns:1fr}}
.product{display:flex;flex-direction:column;background:var(--carbon);border-radius:3px;overflow:hidden}
.product .work-media{aspect-ratio:16/8}
.product-body{display:flex;flex-direction:column;gap:12px;padding:22px;flex:1}
.product h3{font:600 22px/1.15 var(--f-display);letter-spacing:-.01em}
.product p{font-size:15px;color:var(--silver)}
.price{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;margin-top:auto;border-top:1px solid var(--line)}
.price b{font:500 15px var(--f-mono);color:var(--paper)}
.price span{font:400 11px var(--f-mono);color:var(--dim);letter-spacing:.06em}
.product-acts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.product-acts .btn{flex:1 1 auto}
.soon{padding-block:clamp(40px,6vw,72px) clamp(56px,8vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.soon h2{font:600 clamp(28px,3.4vw,42px)/1.1 var(--f-display);letter-spacing:-.02em}
.soon p{color:var(--silver);margin-block:14px 24px;max-width:48ch}
.soon-art{position:relative;aspect-ratio:16/10;max-width:100%;background:var(--carbon);border-radius:3px;overflow:hidden}
@media (max-width:860px){.soon{grid-template-columns:1fr}}

/* ---------- Carrito ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(440px,100%);background:var(--carbon);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.7,.2,1);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer-head h2{font:600 20px/1 var(--f-display)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 22px}
.drawer-foot{padding:20px 22px;border-top:1px solid var(--line);display:grid;gap:10px}
.line-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding-block:16px;border-bottom:1px solid var(--line)}
.line-item .thumb{width:52px;height:52px;border-radius:2px;background:var(--ink);display:grid;place-items:center;font:500 10px var(--f-mono);letter-spacing:.1em;color:var(--silver);border:1px solid var(--graphite)}
.line-item b{display:block;font:600 15px/1.25 var(--f-display)}
.line-item small{font:400 11px var(--f-mono);color:var(--dim)}
.qty{display:flex;align-items:center;border:1px solid var(--graphite);border-radius:3px;margin-top:8px;width:max-content}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--silver)}
.qty button:hover{color:var(--paper)}
.qty output{min-width:24px;text-align:center;font:500 13px var(--f-mono)}
.remove{font:400 12px var(--f-mono);color:var(--dim);align-self:start;padding:4px}
.remove:hover{color:var(--paper)}
.sum-row{display:flex;justify-content:space-between;font-size:15px;color:var(--silver)}
.sum-row b{font:500 15px var(--f-mono);color:var(--paper)}
.fine{font:400 12px/1.5 var(--f-mono);color:var(--dim)}
.empty{padding:48px 0;text-align:center;color:var(--silver)}
.empty b{display:block;font:600 20px var(--f-display);color:var(--paper);margin-bottom:8px}

/* ---------- Checkout ---------- */
.checkout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:clamp(56px,8vw,96px)}
@media (max-width:900px){.checkout{grid-template-columns:1fr}.order{order:-1}}
.co-steps{display:grid;gap:clamp(16px,2vw,20px)}
.co-block{background:var(--carbon);border-radius:3px;padding:clamp(20px,3vw,32px);display:grid;gap:16px}
.co-block h2{display:flex;align-items:center;gap:12px;font:600 20px/1.2 var(--f-display)}
.co-block h2 span{font:500 11px var(--f-mono);color:var(--dim);border:1px solid var(--graphite);border-radius:2px;padding:5px 7px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.paybox{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid var(--graphite);border-radius:3px}
.paybox b{font:600 16px var(--f-display);display:block}
.paybox small{font-size:14px;color:var(--silver)}
.paybox .pill{font:500 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);border:1px solid var(--paper);padding:6px 8px;border-radius:2px;flex:none}
.order{position:sticky;top:calc(var(--header) + 16px);background:var(--carbon);border-radius:3px;padding:clamp(20px,3vw,28px);display:grid;gap:12px}
.order h2{font:600 20px/1 var(--f-display);margin-bottom:4px}
.order .line-item{grid-template-columns:44px minmax(0,1fr) auto;padding-block:12px}
.order .line-item .thumb{width:44px;height:44px}

dialog{max-width:min(520px,calc(100% - 32px));background:var(--carbon);color:var(--paper);border:1px solid var(--graphite);border-radius:4px;padding:clamp(22px,4vw,34px)}
dialog::backdrop{background:rgba(0,0,0,.65)}
dialog h2{font:600 24px/1.15 var(--f-display);margin:12px 0}
dialog p{color:var(--silver);font-size:15px}
dialog p+p{margin-top:10px}
dialog .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:90;transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:3px;background:var(--paper);color:var(--ink);font:500 14px var(--f-body);transition:all .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Guard against Blocksy's explicit heading/element colors beating our inherited body color */
.dtache-landing h1, .dtache-landing h2, .dtache-landing h3, .dtache-landing h4, .dtache-landing h5, .dtache-landing h6 { color: var(--paper); }
.dtache-landing a { color: inherit; }
.dtache-landing button { color: inherit; }
.dtache-landing ul, .dtache-landing ol { margin:0; padding:0; list-style:none; }
.dtache-landing input, .dtache-landing textarea, .dtache-landing select { color: inherit; font-family: inherit; }

/* Hard overrides for stubborn theme leaks (buttons, lists, etc.) */
.dtache-landing button { background:none!important; border:0!important; color:inherit!important; box-shadow:none!important; }
.dtache-landing a { text-decoration:none!important; box-shadow:none!important; }
.dtache-landing ul, .dtache-landing ol { list-style:none!important; margin:0!important; padding:0!important; }
.dtache-landing img { max-width:100%; }
.dtache-landing input, .dtache-landing textarea, .dtache-landing select { background:var(--ink)!important; color:var(--paper)!important; box-shadow:none!important; }

/* ============================================================
   Theme claro editorial — alterna con las secciones oscuras.
   Redefine los MISMOS tokens que ya usa todo el sitio, asi que
   todo lo que ya existe (botones, tarjetas, bordes, texto) se
   adapta solo, sin tocar cada regla una por una.
   ============================================================ */
.theme-light{
  --ink:#F7F5F0;        /* ahora es el fondo claro */
  --carbon:#EDE9DF;     /* tarjetas: crema un poco mas oscuro */
  --graphite:rgba(17,16,14,.14);
  --paper:#141311;      /* ahora es el texto oscuro */
  --silver:#5B584F;
  --dim:#8A8677;
  --line:rgba(17,16,14,.10);
  background:var(--ink);
  color:var(--paper);
}
.theme-light :focus-visible{outline-color:var(--paper)}
/* ---------- Logo (imagen) ---------- */
.logo img{display:block;width:auto;max-width:100%}
.logo-header img{height:38px}
.logo-footer img{height:52px}
.hero-logo{white-space:normal;margin-left:0;line-height:0}
.hero-logo img{display:block;width:clamp(260px,44vw,600px);height:auto;max-width:100%}
@media (max-width:760px){.logo-header img{height:30px}.logo-footer img{height:44px}}
/* Botones de WhatsApp dorados: texto oscuro siempre, en cualquier seccion */
.dtache-landing .btn-wa, .dtache-landing .wa-float, .dtache-landing .btn-wa:hover, .dtache-landing .wa-float:hover { color:#141311 !important; }

/* Boton de sonido de las cuerdas */
.dtache-landing .strings-sound{position:absolute;right:var(--gut);bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px!important;border:1px solid var(--graphite)!important;border-radius:999px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--silver)!important;cursor:pointer;transition:color .2s,border-color .2s}
.dtache-landing .strings-sound .i{width:15px;height:15px}
.dtache-landing .strings-sound:hover{color:var(--paper)!important;border-color:var(--silver)!important}
.dtache-landing .strings-sound[aria-pressed="true"]{color:var(--paper)!important;border-color:var(--gold)!important}
@media (max-width:560px){.strings-hint{display:none}}
/* Franja de cuerdas sobre diapason de ebano (version de prueba generada por codigo) */
.strings{background:#0c0a09;--silver:#A7A7AA;--dim:#8C8C90;--graphite:rgba(242,240,235,.22);--paper:#F2F0EB;--line:rgba(242,240,235,.06)}
.dtache-landing .strings-sound{right:auto;left:var(--gut)}
.strings-hint{right:auto;left:calc(var(--gut) + 168px);bottom:16px;color:#8C8C90}
/* Miniatura real de YouTube en el portafolio */
.work-media img.art{object-fit:cover;background:#0e0e11}

/* Etiquetas y boton sobre videos/audios: siempre claros, porque van encima de imagen oscura */
.work-media .tag span{color:#F2F0EB}
.work-media .tag span.ex{color:#A7A7AA}
.dtache-landing .work-media .play{color:#F2F0EB!important;background:rgba(11,11,13,.72)!important}
.dtache-landing .work-media .play:hover{background:rgba(11,11,13,.92)!important}
.work-media .play .dot{background:#F2F0EB;color:#0B0B0D}
.work-media .eq i{background:#F2F0EB}
.work-media .media-note{color:#A7A7AA}
.work-media .media-note b{color:#F2F0EB}
/* Boton dorado (Ir a la tienda) */
.btn-gold, .btn-gold:visited{background:var(--wa);color:#141311 !important}
.btn-gold:hover{background:var(--wa-hover);color:#141311 !important}

/* Preguntas frecuentes */
.faq{display:grid;gap:0;border-top:1px solid var(--graphite)}
.faq details{border-bottom:1px solid var(--graphite);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;font:600 clamp(17px,2vw,20px)/1.3 var(--f-display);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--wa);font-size:1.3em;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details p{margin-top:12px;color:var(--silver);max-width:70ch}

/* Movil: areas de toque de al menos 44px */
@media (max-width:900px){
  .link, .svc-cta .link, .link-wa{min-height:44px;display:inline-flex;align-items:center}
  .logo-header{min-height:44px;display:inline-flex;align-items:center}
}

/* Movil: tarjetas de servicio mas cortas (solo 'Que es'; el detalle sigue en escritorio) */
@media (max-width:700px){
  .svc-info > div:nth-child(n+2){display:none}
  .svc{padding-block:28px}
  .svc-cta{gap:4px 16px;flex-wrap:wrap}
}

/* Selector de idioma ES / EN */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--paper);border:1px solid var(--graphite);border-radius:3px;transition:border-color .2s,color .2s}
.lang-switch:hover{border-color:var(--gold);color:var(--gold)}

/* Cabecera movil con selector de idioma: que todo quepa */
@media (max-width:420px){
  .header .wrap{gap:8px}
  .head-actions{gap:4px!important}
  .lang-switch{min-width:40px;padding:0 6px;font-size:11px}
  .logo-header img{width:118px;height:auto}
}

/* =================== HERO GLASS + NOTCHES (2026-10-15) =================== */
.hg{--cream:#F4EFE6;--r:28px;background:var(--cream);padding:14px;color:var(--paper)}
.hg-frame{position:relative;isolation:isolate;min-height:calc(100svh - 28px);border-radius:36px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:100px 18px 18px}
.hg-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% center}
.hg-frame::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,13,.86) 0,rgba(11,11,13,.5) 45%,transparent 72%),linear-gradient(0deg,rgba(11,11,13,.72),transparent 38%)}
.hg-glass{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 50px rgba(0,0,0,.35)}
/* notches */
.hg-top{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start}
.hg-notch{position:relative;background:var(--cream);color:var(--ink)}
.hg-notch::before,.hg-notch::after{content:"";position:absolute;width:var(--r);height:var(--r)}
.hg-nl{padding:0 12px 12px 0;border-bottom-right-radius:var(--r)}
.hg-nl::before{top:0;left:100%;background:radial-gradient(circle at 100% 100%,transparent calc(var(--r) - .5px),var(--cream) var(--r))}
.hg-nl::after{top:100%;left:0;background:radial-gradient(circle at 100% 100%,transparent calc(var(--r) - .5px),var(--cream) var(--r))}
.hg-nc{padding:0 12px 12px;border-radius:0 0 var(--r) var(--r)}
.hg-nc::before{top:0;right:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--r) - .5px),var(--cream) var(--r))}
.hg-nc::after{top:0;left:100%;background:radial-gradient(circle at 100% 100%,transparent calc(var(--r) - .5px),var(--cream) var(--r))}
.hg-nr{padding:0 0 12px 12px;border-bottom-left-radius:var(--r)}
.hg-nr::before{top:0;right:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--r) - .5px),var(--cream) var(--r))}
.hg-nr::after{top:100%;right:0;background:radial-gradient(circle at 0 100%,transparent calc(var(--r) - .5px),var(--cream) var(--r))}
.hg-logo{display:flex;align-items:center;height:56px;padding:6px 20px 0 30px}
.hg-logo img{height:22px;width:auto;display:block}
.hg-filters{display:flex;gap:2px;padding:6px;border-radius:999px;background:rgba(11,11,13,.05);border:1px solid rgba(11,11,13,.1)}
.hg-filters a{display:flex;flex-direction:column;justify-content:center;padding:6px 20px;border-radius:999px;color:var(--ink);text-decoration:none;transition:background .2s}
.hg-filters a:hover,.hg-filters a:focus-visible{background:rgba(11,11,13,.08)}
.hg-filters small{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,13,.55)}
.hg-filters b{font:500 14px/1.3 var(--f-body)}
.hg-right{display:flex;gap:8px}
.hg-icon{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(11,11,13,.05);border:1px solid rgba(11,11,13,.1);color:var(--ink);font:500 12px var(--f-mono);letter-spacing:.1em;text-decoration:none;cursor:pointer}
.hg-icon:hover{background:rgba(11,11,13,.1)}
.hg-icon .i{width:20px;height:20px}
.hg-icon .badge{position:absolute;top:4px;right:4px}
.hg-icon .badge[data-n="0"]{display:none}
.hg-wa{background:var(--gold);border-color:var(--gold)}
.hg-wa:hover{background:var(--wa-hover)}
/* middle */
.hg-mid{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) 340px;gap:24px;align-items:center;padding:24px 0}
.hg-rail{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:999px}
.hg-rail a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--silver);transition:.2s}
.hg-rail a:hover,.hg-rail a:focus-visible{background:rgba(255,255,255,.14);color:var(--paper)}
.hg-rail svg{width:19px;height:19px}
.hg-copy{max-width:600px}
.hg-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 22px;font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hg-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.hg-h1{margin:0;font:300 clamp(40px,5.4vw,84px)/1 var(--f-body);letter-spacing:-.035em;color:var(--paper);text-wrap:balance}
.hg-h1 em{font-family:var(--f-serif);font-weight:400;color:#E2C995;letter-spacing:-.01em}
.hg-lead{margin:22px 0 0;max-width:440px;font-size:16px;line-height:1.6;color:rgba(242,240,235,.78)}
.hg-ctas{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}
.hg-btn{display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:999px;color:var(--paper);font-weight:500;text-decoration:none}
.hg-btn:hover{background:rgba(255,255,255,.16)}
.hg-svc{align-self:start;border-radius:30px;padding:22px}
.hg-svc header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hg-svc-name{margin:0;font:500 20px/1.2 var(--f-body);letter-spacing:-.01em;color:var(--paper)}
.hg-mono{margin:6px 0 0;font:400 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.hg-arrow{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--ink);transition:.2s}
.hg-arrow:hover{background:var(--gold);transform:rotate(-12deg)}
.hg-arrow svg{width:18px;height:18px}
.hg-desc{margin:16px 0;font-size:14px;line-height:1.55;color:rgba(242,240,235,.78)}
.hg-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hg-specs div{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.hg-specs small{display:block;font:400 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--silver)}
.hg-specs b{font-weight:500;font-size:15px;color:var(--paper)}
.hg-tabs{display:flex;gap:6px;margin-top:14px}
.hg-tabs button{flex:1;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--silver);font:500 12px var(--f-body);cursor:pointer;transition:.2s}
.hg-tabs button.on,.hg-tabs button:hover{background:rgba(255,255,255,.14);color:var(--paper)}
/* bottom */
.hg-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.hg-about{width:380px;border-radius:30px;padding:22px}
.hg-about h2{margin:0;font:500 18px var(--f-body);color:var(--paper)}
.hg-about p{margin:8px 0 0;font-size:14px;line-height:1.55;color:rgba(242,240,235,.78)}
.hg-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--gold);font-weight:500;text-decoration:none}
.hg-chain{margin:0;display:flex;gap:22px;padding:14px 26px;border-radius:999px;font:400 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.hg-chain span+span::before{content:"·";margin-right:22px;color:var(--silver)}
/* header: oculto en escritorio mientras se ven los notches */
@media (min-width:961px){
  body.dtache-landing:has(section.hg) .header{position:fixed;left:0;right:0;transition:transform .35s,opacity .35s,background .3s}
  body.hg-at-top .header{transform:translateY(-100%);opacity:0;pointer-events:none}
}
@media (max-width:1180px){.hg-mid{grid-template-columns:72px minmax(0,1fr)}.hg-svc{grid-column:2;max-width:380px}.hg-chain{display:none}}
@media (max-width:960px){
  .hg{padding:8px}
  .hg-frame{padding:28px 14px 14px;border-radius:26px;min-height:0}
  .hg-top,.hg-rail{display:none}
  .hg-mid{grid-template-columns:1fr;padding:8px 0 0}
  .hg-svc{grid-column:1;max-width:none;margin-top:28px}
  .hg-bottom{flex-direction:column;align-items:stretch;margin-top:14px}
  .hg-about{width:100%}
  .hg-bg{object-position:72% center}
}
@media (prefers-reduced-motion:reduce){.hg *{transition:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hg-glass{background:rgba(21,21,25,.82)}}
/* hero glass: especificidad sobre estilos globales */
section.hg a.hg-arrow{color:var(--ink)}
section.hg .hg-tabs button{border:1px solid rgba(255,255,255,.2);color:var(--silver)}
section.hg .hg-tabs button.on,section.hg .hg-tabs button:hover{background:rgba(255,255,255,.14);color:var(--paper)}
section.hg img.hg-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}