/* =====================================================================
   DTACHE GLASS SYSTEM (2026-10-15)
   Capa visual común: extiende el hero de vidrio + notches a todo el sitio.
   Se carga después de landing.css. No cambia contenido ni JS.
   ===================================================================== */
:root{
  --cream:#F4EFE6;
  --cream-2:#EAE2D3;
  --gold-hi:#E2C995;
  --gold-ink:#8A6A2E;          /* dorado legible sobre crema */
  --g-fill:rgba(255,255,255,.07);
  --g-fill-2:rgba(255,255,255,.12);
  --g-line:rgba(255,255,255,.14);
  --g-blur:blur(20px) saturate(140%);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.14);
  --l-fill:rgba(255,255,255,.62);
  --l-line:rgba(11,11,13,.08);
  --r-panel:36px;
  --r-card:28px;
  --r-sm:18px;
}

/* ---------- Fondo ambiental: la luz del estudio detrás de todo ---------- */
body.dtache-landing{background:var(--ink)}
body.dtache-landing::before{
  content:"";position:fixed;inset:-80px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 35% at 85% 20%,rgba(200,169,107,.20),transparent 70%),
    radial-gradient(35% 40% at 10% 85%,rgba(200,169,107,.12),transparent 70%),
    url("https://dtachemusic.com/wp-content/uploads/dtache-estudio-hero.webp") center/cover;
  filter:blur(60px) brightness(.32) saturate(120%);
}

/* ---------- Header: barra de vidrio flotante ---------- */
body.dtache-landing .header,
body.dtache-landing .header.scrolled{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
body.dtache-landing .header .wrap{
  margin-top:10px;height:calc(var(--header) - 12px);border-radius:999px;
  background:rgba(18,17,20,.8);border:1px solid var(--g-line);box-shadow:var(--g-hi),0 10px 30px rgba(0,0,0,.25);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  max-width:min(var(--wrap),calc(100% - 20px));padding-inline:18px 10px
}
body.dtache-landing .header .nav a{white-space:nowrap;border-radius:999px;padding:8px 10px;transition:background .2s,color .2s}
body.dtache-landing .header .nav a:hover{background:var(--g-fill-2)}
body.dtache-landing .icon-btn,body.dtache-landing .lang-switch{border-radius:999px}

/* ---------- Secciones como paneles (igual que el marco del hero) ---------- */
body.dtache-landing main > .section{
  margin:14px;border-radius:var(--r-panel);
  padding-block:clamp(72px,10vw,140px);
  background:rgba(14,13,16,.55);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--g-hi);
  position:relative;overflow:hidden;isolation:isolate
}
body.dtache-landing main > .section.theme-light{
  background:var(--cream);border-color:transparent;box-shadow:none;
  --paper:#0B0B0D;--silver:#4A4A50;--dim:#6F6F74;--line:rgba(11,11,13,.1);
  color:#0B0B0D
}

/* Cabeceras de sección con el mismo lenguaje del hero */
body.dtache-landing .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)
}
body.dtache-landing .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
body.dtache-landing .theme-light .eyebrow{color:var(--gold-ink)}
body.dtache-landing .theme-light .eyebrow::before{background:var(--gold-ink);box-shadow:none}
body.dtache-landing .h2,body.dtache-landing .shop-head .h1{
  font-family:var(--f-body);font-weight:300;letter-spacing:-.035em;line-height:1;
  font-size:clamp(36px,4.6vw,72px);text-wrap:balance
}
body.dtache-landing .h2 em,body.dtache-landing .shop-head .h1 em{font-family:var(--f-serif);font-weight:400;font-style:italic;color:var(--gold-hi);letter-spacing:-.01em}
body.dtache-landing .theme-light .h2 em{color:var(--gold-ink)}
body.dtache-landing .lead{color:color-mix(in srgb,var(--paper) 78%,transparent);max-width:56ch}

/* ---------- Tarjetas de vidrio (oscuras) ---------- */
body.dtache-landing .svc,
body.dtache-landing .path,
body.dtache-landing .work,
body.dtache-landing .product,
body.dtache-landing .composer,
body.dtache-landing .faq details,
body.dtache-landing .cta-band,
body.dtache-landing .future,
body.dtache-landing .co-block,
body.dtache-landing .order,
body.dtache-landing .soon,
body.dtache-landing .step{
  background:var(--g-fill);
  border:1px solid var(--g-line);
  border-radius:var(--r-card);
  box-shadow:var(--g-hi);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)
}
/* Tarjetas sobre crema: vidrio claro */
body.dtache-landing .theme-light .svc,
body.dtache-landing .theme-light .work,
body.dtache-landing .theme-light .step,
body.dtache-landing .theme-light .cta-band,
body.dtache-landing .theme-light .path{
  background:var(--l-fill);border-color:var(--l-line);
  box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(60,45,20,.08);
  backdrop-filter:none;-webkit-backdrop-filter:none
}

/* Servicios: lista de tarjetas en vez de filas con líneas */
body.dtache-landing .svc-list{display:grid;gap:12px;border:0}
body.dtache-landing .svc{padding:clamp(22px,3vw,34px);border-top:1px solid var(--g-line);transition:transform .25s,background .25s}
body.dtache-landing .svc:hover{background:var(--g-fill-2);transform:translateY(-2px)}
body.dtache-landing .svc .code{color:var(--gold)}
body.dtache-landing .svc-info > div{border:0}

/* Portafolio */
body.dtache-landing .work{overflow:hidden;padding:0}
body.dtache-landing .work-media{border-radius:calc(var(--r-card) - 8px);overflow:hidden;margin:8px}
body.dtache-landing .work-body{padding:14px 22px 24px}
body.dtache-landing .work .tag span{border-radius:999px;background:rgba(11,11,13,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);color:#F2F0EB}
body.dtache-landing .work .play{border-radius:999px}
body.dtache-landing .theme-light .work-role{color:var(--gold-ink)}

/* Chips / filtros / tabs: cápsulas */
body.dtache-landing .chip,body.dtache-landing .tab{
  border-radius:999px;border:1px solid var(--g-line);background:var(--g-fill);transition:background .2s,color .2s
}
body.dtache-landing .theme-light .chip{border-color:var(--l-line);background:rgba(255,255,255,.55);color:#0B0B0D}
body.dtache-landing .chip[aria-pressed="true"],body.dtache-landing .tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#0B0B0D}

/* Sobre Angel: foto en marco redondeado */
body.dtache-landing .about-photo{border-radius:var(--r-card);overflow:hidden}
body.dtache-landing .roles span{border-radius:999px;background:var(--g-fill);border:1px solid var(--g-line);padding:6px 14px}
body.dtache-landing .detache{padding:22px;border-radius:var(--r-sm);background:var(--g-fill);border:1px solid var(--g-line)}
body.dtache-landing .photo-cap span:last-child{display:none}

/* Proceso */
body.dtache-landing .steps{gap:12px}
body.dtache-landing .step{padding:26px}
body.dtache-landing .step-n{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#0B0B0D;color:var(--gold-hi);font-size:13px
}

/* Contratar */
body.dtache-landing .path{padding:clamp(24px,3vw,36px)}
body.dtache-landing .mode{border-radius:999px}
body.dtache-landing .future{padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.dtache-landing .future > div{border-radius:999px;border:1px solid var(--g-line);padding:8px 16px;background:transparent}
body.dtache-landing .future > div.on{background:var(--gold);border-color:var(--gold);color:#0B0B0D}
body.dtache-landing .future > div.on span{color:#0B0B0D}

/* FAQ */
body.dtache-landing .faq{display:grid;gap:10px;border:0}
body.dtache-landing .faq details{padding:4px 24px;border-radius:var(--r-sm);transition:background .2s}
body.dtache-landing .faq details[open]{background:var(--g-fill-2)}
body.dtache-landing .faq summary{padding-block:18px}

/* Contacto */
body.dtache-landing .composer{padding:clamp(22px,3vw,34px)}
body.dtache-landing .field input,
body.dtache-landing .field select,
body.dtache-landing .field textarea{
  border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--g-line)
}
body.dtache-landing .field input:focus,
body.dtache-landing .field select:focus,
body.dtache-landing .field textarea:focus{border-color:var(--gold);outline:2px solid rgba(200,169,107,.35);outline-offset:1px}
body.dtache-landing .preview{border-radius:14px}

/* CTA bands */
body.dtache-landing .cta-band{padding:clamp(22px,3vw,34px);margin-top:28px}

/* ---------- Botones: cápsulas en todo el sitio ---------- */
body.dtache-landing .btn{border-radius:999px;transition:transform .2s,background .2s,box-shadow .2s}
body.dtache-landing .btn:hover{transform:translateY(-1px)}
body.dtache-landing .btn:active{transform:translateY(0) scale(.98)}
body.dtache-landing .btn-ghost{
  background:var(--g-fill);border:1px solid var(--g-line);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)
}
body.dtache-landing .theme-light .btn-ghost{background:rgba(11,11,13,.04);border-color:rgba(11,11,13,.14);color:#0B0B0D}
body.dtache-landing .btn-paper{border-radius:999px}

/* ---------- Tienda y checkout ---------- */
body.dtache-landing #view-tienda,body.dtache-landing #view-checkout{padding-block:clamp(96px,10vw,140px)}
body.dtache-landing .product{overflow:hidden;padding:0}
body.dtache-landing .product .work-media{margin:8px;border-radius:calc(var(--r-card) - 8px)}
body.dtache-landing .product-body{padding:14px 22px 24px}
body.dtache-landing .co-block,body.dtache-landing .order{padding:clamp(22px,3vw,32px)}
body.dtache-landing .co-block h2 span{border-radius:50%;background:var(--gold);color:#0B0B0D}
body.dtache-landing .paybox{border-radius:var(--r-sm);background:var(--g-fill);border:1px solid var(--g-line)}
body.dtache-landing .soon{padding:clamp(22px,3vw,34px);overflow:hidden}
body.dtache-landing .soon-art{border-radius:var(--r-sm);overflow:hidden}

/* ---------- Carrito lateral, menú móvil, avisos ---------- */
body.dtache-landing .drawer{
  background:rgba(18,17,20,.72);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);
  border-left:1px solid var(--g-line);border-radius:var(--r-panel) 0 0 var(--r-panel)
}
body.dtache-landing .sheet{background:rgba(14,13,16,.8);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
body.dtache-landing .sheet nav a{border-radius:var(--r-sm)}
body.dtache-landing .toast{border-radius:999px;background:rgba(18,17,20,.78);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);border:1px solid var(--g-line)}
body.dtache-landing .mbar{
  background:rgba(14,13,16,.6);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border-top:1px solid var(--g-line)
}
body.dtache-landing .wa-float{border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---------- Footer: cierre en panel crema con notch ---------- */
body.dtache-landing .footer{
  margin:14px;border-radius:var(--r-panel);background:var(--cream);color:#0B0B0D;
  --paper:#0B0B0D;--silver:#4A4A50;--dim:#6F6F74;--line:rgba(11,11,13,.1);
  padding-block:clamp(56px,7vw,96px) 32px;border:0
}
body.dtache-landing .footer .logo-footer img{content:url("https://dtachemusic.com/wp-content/uploads/dtache-logo-negro.png")}
body.dtache-landing .footer a{color:#0B0B0D}
body.dtache-landing .footer a:hover{color:var(--gold-ink)}
body.dtache-landing .footer h4{color:var(--gold-ink)}

/* ---------- Móvil ---------- */
@media (max-width:960px){
  body.dtache-landing main > .section,body.dtache-landing .footer{margin:8px;border-radius:26px}
  body.dtache-landing .header .wrap{margin-top:8px}
  body.dtache-landing::before{filter:blur(40px) brightness(.3)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.dtache-landing .svc,body.dtache-landing .path,body.dtache-landing .work,body.dtache-landing .product,
  body.dtache-landing .composer,body.dtache-landing .faq details,body.dtache-landing .cta-band,
  body.dtache-landing .co-block,body.dtache-landing .order,body.dtache-landing .drawer{background:rgba(24,23,27,.92)}
}
@media (prefers-reduced-motion:reduce){body.dtache-landing .btn,body.dtache-landing .svc{transition:none}}

/* Portafolio (página) */
body.dtache-portafolio main > section,body.dtache-portafolio > section{margin:14px;border-radius:var(--r-panel);padding-block:clamp(64px,8vw,120px);overflow:hidden}
body.dtache-portafolio .pf-intro{background:var(--cream)}
body.dtache-portafolio .pf-grid-wrap{background:rgba(14,13,16,.55);border:1px solid rgba(255,255,255,.06)}
body.dtache-portafolio .pf-grid-wrap article,body.dtache-portafolio .pf-grid-wrap .work{background:var(--g-fill);border:1px solid var(--g-line);border-radius:var(--r-card);overflow:hidden;backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)}
@media (max-width:960px){body.dtache-portafolio main > section,body.dtache-portafolio > section{margin:8px;border-radius:26px}}

/* Banderas de idioma */
.hg-icon .flag,.lang-switch .flag{width:26px;height:26px;border-radius:50%;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 2px 6px rgba(0,0,0,.25)}
.lang-switch:has(.flag){display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%}
.hg-icon:has(.flag):hover .flag,.lang-switch:has(.flag):hover .flag{transform:scale(1.08)}
.flag{transition:transform .2s}