/* ========================================================
   TOKENS
======================================================== */
:root{
  /* Acentos — más protagonismo a naranja + verde lima */
  --orange:oklch(0.75 0.20 50);
  --orange-2:oklch(0.68 0.22 35);
  --lime:oklch(0.85 0.22 130);
  --lime-2:oklch(0.78 0.22 145);
  --magenta:oklch(0.65 0.24 30);
  --violet:oklch(0.62 0.26 290);
  --yellow:oklch(0.90 0.18 90);

  /* Tercer acento rojo-anaranjado; paleta: naranja, lima, rojo, violeta */
  --accent:var(--orange);
  --accent-2:var(--lime);
  --accent-ink:#160a02;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:30px;

  --serif:'Bricolage Grotesque', 'Times New Roman', serif; /* display "imprenta" */
  --sans:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --player-h: 110px;
}
@media (max-width: 720px){
  :root{ --player-h: 92px; }
}
@media (max-width: 520px){
  :root{ --player-h: 62px; }
}
@media (max-width: 400px){
  :root{ --player-h: 58px; }
}

/* ========================================================
   THEME — Dark (default)
======================================================== */
:root[data-theme="dark"]{
  --bg-0:#0a0510;
  --bg-1:#120925;
  --bg-2:#1a0f30;
  --bg-3:#241541;
  --bg-cream:#f5efe2;          /* sección crema para alternar */
  --bg-cream-ink:#1a0f10;
  --ink-0:#fbf6ff;
  --ink-1:#cdc0e3;
  --ink-2:#8579a1;
  --ink-3:#4a3f6b;
  --line:rgba(205,192,227,.14);
  --line-strong:rgba(205,192,227,.28);
  --shadow-1:0 20px 60px -30px rgba(255,130,40,.5);
  --player-bg: rgba(18,9,37,.82);
}

/* ========================================================
   THEME — Light
======================================================== */
:root[data-theme="light"]{
  --bg-0:#f5efe2;              /* crema cálida tipo "imprenta" */
  --bg-1:#ebe3d2;
  --bg-2:#dfd5c0;
  --bg-3:#cebfa3;
  --bg-cream:#0a0510;          /* en light, las secciones alternas son oscuras */
  --bg-cream-ink:#fbf6ff;
  --ink-0:#120713;
  --ink-1:#3a2c44;
  --ink-2:#6b5d7a;
  --ink-3:#9e93ad;
  --line:rgba(40,20,50,.14);
  --line-strong:rgba(40,20,50,.28);
  --shadow-1:0 20px 60px -30px rgba(220,80,30,.35);
  --player-bg: rgba(245,239,226,.85);
}

/* ========================================================
   RESET
======================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  font-family:var(--sans);
  background:var(--bg-0);
  color:var(--ink-0);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  padding-bottom:var(--player-h);
  transition:background .4s ease, color .4s ease;
}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
::selection{ background:var(--orange); color:var(--accent-ink)}

/* ========================================================
   PRIMITIVES
======================================================== */
.wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0 28px}
@media (max-width:720px){ .wrap{ padding:0 18px} }

.mono{ font-family:var(--mono); font-size:.74em; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.serif{ font-family:var(--serif); font-weight:600; letter-spacing:-.025em; font-variation-settings:'wdth' 100, 'opsz' 96}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border:1px solid var(--line-strong);
  border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-1);
  background:transparent;
}
.tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent)}

/* Display tipográfico */
.h-display{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  letter-spacing:-.03em;
  line-height:.95;
}

/* ========================================================
   BUTTONS
======================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:500; font-size:15px; letter-spacing:.01em;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
  white-space:nowrap;
  border:1px solid transparent;
  text-decoration:none;
}
.btn-primary{
  background:var(--orange); color:#160a02;
  box-shadow:0 10px 30px -10px var(--orange), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 16px 44px -12px var(--orange), 0 0 20px -4px var(--orange);
  filter:brightness(1.08);
}
.btn-accent{
  background:var(--lime); color:#0a1605;
  box-shadow:0 10px 30px -10px var(--lime);
}
.btn-accent:hover{ transform:translateY(-2px)}
.btn-ghost{
  border:1.5px solid currentColor; color:var(--ink-0);
  background:transparent;
}
.btn-ghost:hover{ background:var(--ink-0); color:var(--bg-0)}
.btn-sm{ padding:10px 16px; font-size:13px}
.btn-lg{ padding:18px 32px; font-size:16px}
/* Botones naranja con línea fina de color girando por el contorno + glow bajo
   (CTA "Iniciar proyecto" del hero y "Crear mi maqueta gratis" del modal) */
.btn-spin{
  position:relative;
  box-shadow:0 6px 18px -14px var(--orange), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn-spin:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -14px var(--orange);
  filter:brightness(1.04);
}
.btn-spin::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--apk-angle),
    var(--orange), var(--lime), var(--magenta), var(--violet), var(--orange));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:apkBorderSpin 5.5s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .btn-spin::before{ animation:none; } }

/* Estado "enviado" del formulario: verde sólido, bien marcado, con poco glow */
.btn.is-sent,
.btn.is-sent:hover{
  background:var(--lime); color:#0a1605;
  box-shadow:0 0 0 1.5px color-mix(in oklab, var(--lime) 45%, transparent);
  transform:none; filter:none; cursor:default; font-weight:700;
}
.btn .arrow{ display:inline-block; transition:transform .25s ease}
.btn:hover .arrow{ transform:translateX(4px)}

/* ========================================================
   NAV
======================================================== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  background:color-mix(in oklab, var(--bg-0) 65%, transparent);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{ display:flex; align-items:center; gap:10px}
.brand-mark{ width:38px; height:38px}
.brand-logo{ height:40px; width:auto; object-fit:contain; display:block}
.brand-name{ font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.025em; font-variation-settings:'wdth' 100}
.brand-name em{ font-style:normal; color:var(--orange)}
.nav-links{ display:flex; gap:4px; align-items:center}
.nav-links a{
  padding:8px 14px; border-radius:999px;
  font-size:14px; color:var(--ink-1);
  position:relative; overflow:hidden;
  transition:color .25s ease, background .25s ease;
}
.nav-links a::after{
  content:'';
  position:absolute; left:14px; right:14px; bottom:6px;
  height:1.5px; border-radius:1px;
  background:linear-gradient(90deg, var(--orange), var(--lime));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover{
  color:var(--ink-0);
  background:color-mix(in oklab, var(--ink-0) 6%, transparent);
}
.nav-links a:hover::after{ transform:scaleX(1)}
.nav-right{ display:flex; align-items:center; gap:8px}

.lang-toggle{
  display:flex; align-items:center; gap:2px;
  padding:4px; border:1px solid var(--line);
  border-radius:999px; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
}
.lang-toggle button{ padding:6px 10px; border-radius:999px; color:var(--ink-2); transition:color .2s, background .2s, transform .2s}
.lang-toggle button:not(.on):hover{ color:var(--ink-0); transform:scale(1.08)}
.lang-toggle button.on{ background:var(--ink-0); color:var(--bg-0)}

.theme-toggle{
  width:38px; height:38px;
  border:1px solid var(--line);
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s, border-color .2s;
}
.theme-toggle:hover{
  background:color-mix(in oklab, var(--ink-0) 6%, transparent);
  border-color:var(--orange);
  box-shadow:0 0 12px -4px var(--orange);
  transform:rotate(15deg) scale(1.05);
  transition:background .2s, border-color .3s, box-shadow .3s, transform .3s ease;
}
.theme-toggle .sun{ display:none}
:root[data-theme="light"] .theme-toggle .sun{ display:block}
:root[data-theme="light"] .theme-toggle .moon{ display:none}

.nav-cta{ display:none}
.menu-btn{ display:none}
@media (min-width:961px){
  .nav-cta{ display:inline-flex}
}
@media (max-width:960px){
  .nav-links{ display:none }
  .menu-btn{
    display:flex; flex-direction:column; gap:5px;
    padding:11px; border:1px solid var(--line); border-radius:12px;
  }
  .menu-btn span{ width:18px; height:1.5px; background:var(--ink-0); display:block}
}

/* Mobile sheet */
.sheet{
  position:fixed; inset:0; z-index:90;
  background:color-mix(in oklab, var(--bg-0) 92%, transparent);
  backdrop-filter:blur(20px);
  display:none; flex-direction:column;
  padding:24px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.sheet.open{ display:flex}
.sheet-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:32px}
.sheet-links{ display:flex; flex-direction:column; gap:0; margin-top:20px}
.sheet-links a{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:22px 4px;
  border-bottom:1px solid var(--line);
  font-family:var(--serif); font-weight:700; font-size:38px; letter-spacing:-.03em;
  font-variation-settings:'wdth' 100;
}
.sheet-links a:hover{ color:var(--orange)}
.sheet-links a .num{ font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.18em; font-weight:500}
.sheet-foot{ margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:12px; color:var(--ink-1); font-size:13px}

/* ========================================================
   HERO
======================================================== */
.hero{
  position:relative;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  padding: 50px 0 80px;
  overflow:hidden;
  isolation:isolate;
  background: var(--bg-0);
}
.hero-canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:none;
  opacity:0;
}
:root[data-theme="light"] .hero-overlay{ opacity:0}

.hero-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in oklab, var(--ink-1) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--ink-1) 14%, transparent) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.hero-inner{ position:relative; z-index:3; padding-top:60px}
.hero-eyebrow{ display:flex; align-items:center; gap:14px; color:var(--ink-1)}
.hero-eyebrow .pulse{ position:relative; width:10px; height:10px}
.hero-eyebrow .pulse::before, .hero-eyebrow .pulse::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--orange);
}
.hero-eyebrow .pulse::after{ animation:pulse 2s ease-out infinite; opacity:.6; background:var(--orange)}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.6} 100%{ transform:scale(2.6); opacity:0}}

.hero h1{
  font-family:var(--serif);
  font-weight:800;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  font-size: clamp(64px, 13vw, 200px);
  line-height:.88;
  letter-spacing:-.04em;
  margin: 24px 0 0;
}
.hero h1 .row1{ display:block}
.hero h1 .row2{ display:block; padding-left: clamp(0px, 8vw, 140px); color:var(--ink-1)}
.hero h1 .row3{ display:block; font-style:italic; font-variation-settings:'wdth' 90, 'opsz' 96}
.hero h1 .accent-o{ color:var(--orange)}
.hero h1 .accent-g{ color:var(--lime); font-style:italic; font-variation-settings:'wdth' 90}

.hero-sub{
  display:flex; flex-wrap:wrap; gap:32px;
  margin-top:44px; align-items:flex-start;
  font-size:18px; color:var(--ink-1);
}
.hero-sub p{ max-width: 480px; margin:0; font-size:18px; line-height:1.5}
.hero-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

.hero-meta{
  display:grid; grid-template-columns:repeat(4, 1fr);
  margin-top:64px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hero-meta > div{
  padding:24px 22px;
  display:flex; flex-direction:column; gap:6px;
  border-right:1px solid var(--line);
}
.hero-meta > div:last-child{ border-right:none}
.hero-meta .k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-2); text-transform:uppercase}
.hero-meta .v{
  font-family:var(--serif); font-weight:700; font-size:38px; letter-spacing:-.025em; line-height:1;
  font-variation-settings:'wdth' 90;
}
.hero-meta .v .accent{ color:var(--orange)}
.hero-meta .v small{ font-family:var(--sans); font-size:14px; color:var(--ink-2); letter-spacing:0; font-weight:400}

@media (max-width:720px){
  .hero{ padding: 28px 0 50px}
  .hero-inner{ padding-top:20px}
  .hero h1{ font-size: clamp(54px, 17vw, 100px); letter-spacing:-.03em}
  .hero h1 .row2{ padding-left: 20px}
  .hero-meta{ grid-template-columns:repeat(2, 1fr)}
  .hero-meta > div{ border-bottom:1px solid var(--line)}
  .hero-meta > div:nth-child(2){ border-right:none}
  .hero-meta > div:nth-child(3), .hero-meta > div:nth-child(4){ border-bottom:none}
  .hero-meta .v{ font-size:28px}
  .hero-sub{ margin-top:32px; gap:18px; flex-direction:column}
}

/* ========================================================
   MARQUEE
======================================================== */
.marquee{
  border-block:1px solid var(--line);
  overflow:hidden; background:var(--bg-0);
}
.marquee-track{
  display:flex; gap:48px; padding:22px 0;
  width:max-content;
  animation: marquee 38s linear infinite;
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 90; font-size:38px; letter-spacing:-.025em;
  color:var(--ink-1);
  white-space:nowrap;
  align-items:center;
}
.marquee-track .star{ font-size:18px; display:inline-flex; align-items:center; font-weight:500}
.marquee-track .star.o{ color:var(--orange)}
.marquee-track .star.g{ color:var(--lime)}
.marquee-track .star.m{ color:var(--magenta)}
.marquee-track .italic{ font-style:italic; color:var(--orange); font-variation-settings:'wdth' 75}
.marquee-track .alt{ color:var(--lime); font-variation-settings:'wdth' 125}
@keyframes marquee{ to{ transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none}}

/* ========================================================
   SECTIONS — base
======================================================== */
section{ position:relative}
.section{ padding: 120px 0; position:relative}
@media (max-width:720px){ .section{ padding: 72px 0} }

.section-head{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:end;
  margin-bottom: 60px;
}
.section-head .kicker{ display:flex; flex-direction:column; gap:14px}
.section-head h2{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  font-size: clamp(46px, 7.4vw, 100px);
  line-height:.92; letter-spacing:-.035em;
  margin:0;
}
.section-head h2 em{ color:var(--ink-1); font-style:italic; font-variation-settings:'wdth' 85}
.section-head .lede{ color:var(--ink-1); font-size:18px; line-height:1.5; max-width:480px}
@media (max-width:820px){
  .section-head{ grid-template-columns:1fr; gap:22px; margin-bottom:44px}
}

/* Section variants by treatment */
.s-light{ background:var(--bg-cream); color:var(--bg-cream-ink)}
.s-light .ink, .s-light .section-head h2, .s-light .h-display{ color:var(--bg-cream-ink)}
.s-light .section-head h2 em{ color:color-mix(in oklab, var(--bg-cream-ink) 60%, transparent)}
.s-light .section-head .lede{ color:color-mix(in oklab, var(--bg-cream-ink) 75%, transparent)}
.s-light .tag{ border-color:color-mix(in oklab, var(--bg-cream-ink) 18%, transparent); color:color-mix(in oklab, var(--bg-cream-ink) 80%, transparent)}
.s-light .mono{ color:color-mix(in oklab, var(--bg-cream-ink) 55%, transparent)}

.s-grad-orange{ background: linear-gradient(180deg, var(--bg-0), color-mix(in oklab, var(--orange) 12%, var(--bg-0)) 50%, var(--bg-0))}
.s-grad-lime{ background: linear-gradient(180deg, var(--bg-0), color-mix(in oklab, var(--lime) 9%, var(--bg-0)) 50%, var(--bg-0))}

/* Big numeric marker for sections */
.section-marker{
  position:absolute; top:32px; right:24px; z-index:1;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-2); text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.section-marker::before{ content:''; width:36px; height:1px; background:var(--ink-2)}

/* ========================================================
   SERVICIOS — editorial list on light cream
======================================================== */
.s-services{ }
.services-list{
  display:flex; flex-direction:column;
  border-top:1.5px solid var(--line-strong);
}
.service-row{
  display:grid;
  grid-template-columns: 90px 1.4fr 2fr auto;
  gap:36px;
  align-items:center;
  padding: 32px 4px;
  border-bottom:1.5px solid var(--line);
  transition: background .35s ease, padding .35s ease;
  cursor:pointer;
  position:relative;
}
.service-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--accent-bar, var(--orange));
  transition: width .35s ease;
}
.service-row:hover{ padding-inline:32px}
.service-row:hover::before{ width:6px}
.service-row .num{ font-family:var(--mono); color:var(--ink-2); font-size:12px; letter-spacing:.16em; font-weight:500}
.service-row .name{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing:-.03em; line-height:1.02;
  color:var(--ink-0);
}
.service-row .name em{
  font-style:italic; font-variation-settings:'wdth' 85;
  color:var(--ink-1);
}
.service-row:hover .name em{ color:var(--accent-bar, var(--orange))}
.service-row .desc{ color:var(--ink-1); font-size:15.5px; line-height:1.5; max-width:540px}
.service-row .go{
  width:56px; height:56px; border-radius:50%;
  border:1.5px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition:.25s ease;
  color:var(--ink-0);
}
.service-row:hover .go{ background:var(--accent-bar, var(--orange)); border-color:transparent; color:#160a02}
.service-row .go svg{ transition:.25s}
.service-row:hover .go svg{ transform: translate(3px, -3px)}
@media (max-width:820px){
  .service-row{ grid-template-columns: 50px 1fr auto; row-gap:10px; padding:24px 4px; gap:14px}
  .service-row .desc{ grid-column: 2 / -1; max-width:none}
  .service-row .go{ width:46px; height:46px}
}

/* per-row accent color */
.service-row[data-accent="orange"]{ --accent-bar:var(--orange)}
.service-row[data-accent="lime"]{ --accent-bar:var(--lime)}
.service-row[data-accent="magenta"]{ --accent-bar:var(--magenta)}
.service-row[data-accent="violet"]{ --accent-bar:var(--violet)}
.service-row[data-accent="yellow"]{ --accent-bar:var(--yellow)}

/* ========================================================
   HOSTING — cards on dark with orange/lime accents
======================================================== */
.plans{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
@media (max-width:920px){ .plans{ grid-template-columns:1fr; gap:28px} }
.plan{
  position:relative;
  border:1.5px solid color-mix(in oklab, var(--plan-accent, var(--orange)) 35%, var(--line));
  border-radius:var(--r-xl);
  padding:36px 28px 28px;
  background: var(--bg-1);
  display:flex; flex-direction:column; gap:20px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .4s ease;
  overflow:hidden;
}
/* Top gradient glow — accent color bleeds from top */
.plan::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% -5%, color-mix(in oklab, var(--plan-accent, var(--orange)) 22%, transparent), transparent 70%),
    radial-gradient(40% 60% at 80% 100%, color-mix(in oklab, var(--plan-accent, var(--orange)) 6%, transparent), transparent 60%);
  opacity:.8;
  transition: opacity .35s ease;
}
/* Accent line on top border */
.plan::after{
  content:''; position:absolute; top:-1px; left:20%; right:20%; height:2px;
  background: linear-gradient(90deg, transparent, var(--plan-accent, var(--orange)), transparent);
  border-radius:0 0 4px 4px;
  opacity:.7;
  transition: left .4s ease, right .4s ease, opacity .4s ease;
}
.plan:hover{
  transform:translateY(-6px);
  border-color:color-mix(in oklab, var(--plan-accent, var(--orange)) 70%, var(--line));
  box-shadow:
    0 16px 48px -12px color-mix(in oklab, var(--plan-accent, var(--orange)) 25%, transparent),
    0 0 0 1px color-mix(in oklab, var(--plan-accent, var(--orange)) 15%, transparent);
}
.plan:hover::before{ opacity:1 }
.plan:hover::after{ left:10%; right:10%; opacity:1 }

/* Featured plan — elevated, richer glow */
.plan.featured{
  border-color: color-mix(in oklab, var(--plan-accent, var(--orange)) 60%, var(--line));
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in oklab, var(--plan-accent, var(--orange)) 18%, transparent) 0%, transparent 65%),
    radial-gradient(50% 50% at 80% 100%, color-mix(in oklab, var(--plan-accent, var(--orange)) 8%, transparent), transparent),
    var(--bg-2);
  transform: translateY(-10px);
  box-shadow:
    0 20px 60px -16px color-mix(in oklab, var(--plan-accent, var(--orange)) 30%, transparent),
    0 0 0 1px color-mix(in oklab, var(--plan-accent, var(--orange)) 20%, transparent);
}
.plan.featured::after{
  left:8%; right:8%; height:2.5px; opacity:1;
  background: linear-gradient(90deg, transparent 2%, var(--plan-accent, var(--orange)), transparent 98%);
}

/* Accent color mapping — logo-based palette */
.plan[data-accent="orange"]{ --plan-accent:var(--orange)}
.plan[data-accent="lime"]{ --plan-accent:var(--lime)}
.plan[data-accent="magenta"]{ --plan-accent:var(--magenta)}
.plan[data-accent="violet"]{ --plan-accent:var(--violet)}

/* Badge / pill */
.plan .pill{
  position:absolute; top:-1px; left:24px;
  padding:7px 16px;
  background: linear-gradient(135deg, var(--plan-accent, var(--orange)), color-mix(in oklab, var(--plan-accent, var(--orange)) 80%, var(--magenta)));
  color:#160a02;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  border-radius:0 0 10px 10px;
  font-weight:600;
  box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--plan-accent, var(--orange)) 50%, transparent);
}
.plan > *{ position:relative; z-index:1}

/* Plan name */
.plan h3{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:38px; letter-spacing:-.03em; margin:0;
  background: linear-gradient(135deg, var(--ink-0), color-mix(in oklab, var(--plan-accent, var(--orange)) 40%, var(--ink-0)));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Description */
.plan .desc{ color:var(--ink-1); font-size:14.5px; margin:0; line-height:1.5}

/* Price */
.plan .price{ display:flex; align-items:baseline; gap:8px; padding:8px 0 4px}
.plan .price .amount{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 90;
  font-size:56px; letter-spacing:-.03em; line-height:.95;
  background: linear-gradient(160deg, var(--plan-accent, var(--orange)), color-mix(in oklab, var(--plan-accent, var(--orange)) 65%, var(--yellow)));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.plan .price .unit{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--ink-2); text-transform:uppercase;
}

/* Spec tag — small colored badge for the period */
.plan .price .unit::before{
  content:''; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--plan-accent, var(--orange));
  margin-right:6px; vertical-align:middle;
  box-shadow: 0 0 6px color-mix(in oklab, var(--plan-accent, var(--orange)) 60%, transparent);
}

/* Features list */
.plan ul{
  list-style:none; margin:0; padding:14px 0 0;
  border-top:1px solid color-mix(in oklab, var(--plan-accent, var(--orange)) 12%, var(--line));
  display:flex; flex-direction:column; gap:12px;
  color:var(--ink-1); font-size:14.5px;
}
.plan ul li{ display:flex; gap:12px; align-items:flex-start }
.plan ul li::before{
  content:'';
  flex:0 0 18px; height:18px; margin-top:1px;
  border-radius:50%;
  background: color-mix(in oklab, var(--plan-accent, var(--orange)) 15%, transparent);
  border:1.5px solid color-mix(in oklab, var(--plan-accent, var(--orange)) 40%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 7.5 L6 10 L10.5 4.5' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}

/* CTA button */
.plan .btn{
  margin-top:auto; width:100%;
  border-color: color-mix(in oklab, var(--plan-accent, var(--orange)) 50%, var(--line));
}
.plan .btn:hover{
  background: var(--plan-accent, var(--orange));
  border-color: var(--plan-accent, var(--orange));
  color:#160a02;
}
.plan.featured .btn{
  background: var(--plan-accent, var(--orange));
  border-color: var(--plan-accent, var(--orange));
  color:#160a02;
}
.plan.featured .btn:hover{
  background: color-mix(in oklab, var(--plan-accent, var(--orange)) 85%, #fff);
  box-shadow: 0 6px 20px -6px color-mix(in oklab, var(--plan-accent, var(--orange)) 50%, transparent);
}

/* ========================================================
   PROCESS — split numeric showcase
======================================================== */
.process{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
}
@media (max-width:920px){ .process{ grid-template-columns:1fr; gap:40px} }
.process-visual{
  position:relative;
  aspect-ratio: 5/6;
  border-radius:var(--r-xl);
  background:
    radial-gradient(50% 50% at 30% 30%, color-mix(in oklab, var(--orange) 30%, transparent), transparent 60%),
    radial-gradient(60% 60% at 80% 80%, color-mix(in oklab, var(--lime) 22%, transparent), transparent 60%),
    var(--bg-1);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:36px;
}
.process-visual::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--ink-1) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--ink-1) 16%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.process-visual .badge{
  position:relative;
  font-family:var(--serif); font-weight:800;
  font-variation-settings:'wdth' 125; font-size: clamp(120px, 18vw, 240px);
  line-height:.88; letter-spacing:-.04em; color:var(--orange);
  mix-blend-mode:screen;
}
:root[data-theme="light"] .process-visual .badge{ mix-blend-mode:multiply}
.process-visual .badge em{ display:block; color:var(--lime); font-style:italic; font-variation-settings:'wdth' 85}
.process-steps{ display:flex; flex-direction:column; gap:0}
.process-step{
  display:grid; grid-template-columns: 60px 1fr;
  gap:24px;
  padding: 22px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.process-step:first-child{ border-top:1px solid var(--line)}
.process-step .ix{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--orange); padding-top:8px; font-weight:500;
}
.process-step h4{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:26px; margin:0 0 6px; letter-spacing:-.02em;
}
.process-step p{ margin:0; color:var(--ink-1); font-size:15px; line-height:1.5}

/* ========================================================
   NUESTRA RADIO — full-bleed orange strip
======================================================== */
.radio-strip{
  position:relative;
  padding: 100px 0;
  background:
    radial-gradient(50% 80% at 50% 50%, color-mix(in oklab, var(--orange) 35%, var(--bg-0)) 0%, var(--bg-0) 75%),
    var(--bg-0);
  overflow:hidden;
}
.radio-strip::before, .radio-strip::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}
.radio-strip::before{ top:0}
.radio-strip::after{ bottom:0}

.radio-grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:64px; align-items:center;
}
@media (max-width:920px){ .radio-grid{ grid-template-columns:1fr; gap:40px} }
.radio-head .eyebrow-mark{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  background: rgba(0,0,0,.25);
  border:1px solid color-mix(in oklab, var(--orange) 50%, transparent);
  border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; font-weight:500;
}
.radio-head .eyebrow-mark .red{ width:8px; height:8px; border-radius:50%; background:#ff4d6d; box-shadow:0 0 14px #ff4d6d; animation:pulse 1.5s ease-out infinite}
:root[data-theme="light"] .radio-head .eyebrow-mark{ background:rgba(0,0,0,.6); color:#fff}

.radio-head h2{
  font-family:var(--serif); font-weight:800;
  font-variation-settings:'wdth' 100;
  font-size: clamp(48px, 7.5vw, 110px);
  line-height:.92; letter-spacing:-.035em;
  margin:18px 0 0;
  color:#fff;
  text-shadow: 0 0 80px color-mix(in oklab, var(--orange) 60%, transparent);
}
:root[data-theme="light"] .radio-head h2{ color:#160a02; text-shadow:none}
.radio-head h2 em{ color:var(--lime); font-style:italic; font-variation-settings:'wdth' 85}
.radio-head .lede{ color:rgba(255,255,255,.85); max-width:480px; margin-top:22px; font-size:17px}
:root[data-theme="light"] .radio-head .lede{ color:rgba(20,5,15,.78)}
.radio-head .small{
  margin-top:18px; display:flex; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
:root[data-theme="light"] .radio-head .small{ color:rgba(20,5,15,.6)}
.radio-head .small span{ display:inline-flex; align-items:center; gap:6px}
.radio-head .small .dot{ width:5px; height:5px; border-radius:50%; background:var(--lime)}

.radio-card{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  border:1px solid color-mix(in oklab, var(--orange) 35%, transparent);
  aspect-ratio: 1/1;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:32px;
}
:root[data-theme="light"] .radio-card{ background:rgba(20,8,12,.85); color:#fff}
.radio-card .nowplaying{ display:flex; flex-direction:column; gap:8px; position:relative; z-index:2}
.radio-card .nowplaying .label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.55); text-transform:uppercase}
.radio-card .nowplaying .track{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:38px; letter-spacing:-.025em; line-height:1.02; color:#fff;
}
.radio-card .nowplaying .artist{ color:rgba(255,255,255,.7); font-size:15px}
.radio-card .live{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  background:rgba(255,255,255,.1);
  border-radius:999px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  width:fit-content;
  color:#fff;
}
.radio-card .live .red{ width:8px; height:8px; border-radius:50%; background:#ff4d6d; box-shadow:0 0 12px #ff4d6d; animation:pulse 1.5s ease-out infinite}
.radio-viz{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding: 30%;
  opacity:.65;
  pointer-events:none;
}
.radio-viz span{
  display:block; width:7px;
  background:linear-gradient(180deg, var(--lime), var(--orange));
  border-radius:999px;
  animation: bars 1.2s ease-in-out infinite;
}
@keyframes bars{ 0%,100%{ height:8%} 50%{ height:100%}}
.radio-actions{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap}
.radio-actions .btn{ background:#fff; color:#160a02}
.radio-actions .btn-2{ background:transparent; border:1.5px solid #fff; color:#fff}
.radio-actions .btn:hover{ transform:translateY(-2px)}

/* ========================================================
   TIENDA — green/lime treatment
======================================================== */
.shop-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media (max-width:920px){ .shop-grid{ grid-template-columns:1fr} }
.product{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--bg-1);
  display:flex; flex-direction:column;
  transition: transform .3s ease, border-color .3s ease;
}
.product:hover{ transform:translateY(-4px); border-color:var(--lime)}
.product-img{
  aspect-ratio:1;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:var(--bg-2);
}
.product-img::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(205,192,227,.06) 0 10px, transparent 10px 20px),
    radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--lime) 25%, transparent), transparent);
}
.product-img.alt-1::after{ background:
  repeating-linear-gradient(45deg, rgba(205,192,227,.06) 0 10px, transparent 10px 20px),
  radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--orange) 30%, transparent), transparent);}
.product-img.alt-2::after{ background:
  repeating-linear-gradient(45deg, rgba(205,192,227,.06) 0 10px, transparent 10px 20px),
  radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--magenta) 25%, transparent), transparent);}
.product-img.alt-3::after{ background:
  repeating-linear-gradient(45deg, rgba(205,192,227,.06) 0 10px, transparent 10px 20px),
  radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--yellow) 30%, transparent), transparent);}
.product-img picture{ display:contents}
.product-img img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .45s ease;
}
.product:hover .product-img img{ transform:scale(1.06)}
.product-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px}
.product-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--lime); text-transform:uppercase; font-weight:500}
.product-name{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:22px; letter-spacing:-.02em; line-height:1.1;
}
.product-row{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px}
.product-price{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 90;
  font-size:20px;
}
.product-add{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--lime); text-transform:uppercase; font-weight:500}

/* ========================================================
   TRUST — editorial quote
======================================================== */
.trust{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:24px;
}
.trust-quote{
  grid-column: 1 / 9;
  font-family:var(--serif); font-weight:600;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  font-size: clamp(38px, 5vw, 72px);
  line-height:1.05; letter-spacing:-.025em;
}
.trust-quote em{ color:var(--ink-1); font-style:italic; font-variation-settings:'wdth' 85}
.trust-quote .accent-o{ color:var(--orange)}
.trust-quote .accent-g{ color:var(--lime); font-style:italic}
.trust-side{ grid-column: 9 / 13; display:flex; flex-direction:column; gap:32px}
.trust-author{ display:flex; flex-direction:column; gap:4px; padding-top:24px; border-top:1px solid var(--line)}
.trust-author strong{ font-weight:600; font-size:15px}
.trust-author span{ color:var(--ink-2); font-size:13px}
.trust-stats{ display:flex; flex-direction:column; gap:0}
.trust-stat{ display:flex; justify-content:space-between; align-items:baseline; padding:18px 0; border-top:1px solid var(--line)}
.trust-stat .v{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 90;
  font-size:42px; letter-spacing:-.025em;
}
.trust-stat:nth-child(1) .v{ color:var(--orange)}
.trust-stat:nth-child(2) .v{ color:var(--lime)}
.trust-stat:nth-child(3) .v{ color:var(--magenta)}
.trust-stat .k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-2); text-transform:uppercase; max-width:170px; text-align:right; font-weight:500}
@media (max-width:820px){
  .trust-quote, .trust-side{ grid-column: 1 / -1}
}

/* Logos belt */
.logos{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:24px;
  margin-top: 64px;
  padding-top:36px;
  border-top:1px solid var(--line);
  align-items:center;
}
@media (max-width:820px){ .logos{ grid-template-columns:repeat(3, 1fr); gap:18px} }
.logo-chip{
  height:36px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600;
  font-size:20px; letter-spacing:-.015em;
  color:var(--ink-2);
  opacity:.85;
  transition:.2s;
}
.logo-chip.italic{ font-style:italic; font-variation-settings:'wdth' 85}
.logo-chip:hover{ color:var(--ink-0); opacity:1}
.logo-chip .mono{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:inherit; font-weight:500}

/* ── Testimonials Grid ───────────────────────── */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-bottom:48px;
}
.testimonial-card{
  --tc-accent:var(--orange);
  position:relative;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 24px 24px;
  display:flex; flex-direction:column; gap:16px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial-card::before{
  content:'';
  position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, var(--tc-accent), transparent);
  opacity:.4;
  transition:opacity .3s ease;
}
.testimonial-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab, var(--tc-accent) 30%, var(--line));
  box-shadow:0 16px 48px -12px color-mix(in oklab, var(--tc-accent) 15%, transparent);
}
.testimonial-card:hover::before{ opacity:.8 }
.testimonial-card[data-accent="orange"]{ --tc-accent:var(--orange) }
.testimonial-card[data-accent="lime"]{ --tc-accent:var(--lime) }
.testimonial-card[data-accent="violet"]{ --tc-accent:var(--violet) }

.testimonial-stars{
  color:var(--tc-accent);
  font-size:14px;
  letter-spacing:3px;
}
.testimonial-quote{
  font-family:var(--serif);
  font-size:clamp(16px, 2vw, 18px);
  line-height:1.5;
  color:var(--ink-0);
  margin:0;
  flex:1;
  font-style:italic;
  font-variation-settings:'wdth' 95;
}
.testimonial-author{
  display:flex; align-items:center; gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.testimonial-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--tc-accent), color-mix(in oklab, var(--tc-accent) 60%, var(--violet)));
  color:#fff; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.testimonial-author strong{
  display:block; font-size:14px; color:var(--ink-0);
}
.testimonial-author span{
  display:block; font-size:12px; color:var(--ink-2);
  font-family:var(--mono); letter-spacing:.02em;
}
.testimonial-service{
  display:inline-block; align-self:flex-start;
  font-family:var(--mono);
  font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--tc-accent) 30%, var(--line));
  color:var(--tc-accent);
}
.trust-stats-row{
  display:flex;
  justify-content:center;
  gap:clamp(24px, 5vw, 64px);
  margin-bottom:40px;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-stats-row .trust-stat{ text-align:center }
.trust-stats-row .trust-stat .v{
  font-family:var(--serif);
  font-size:clamp(32px, 5vw, 48px);
  font-weight:700;
  line-height:1;
  color:var(--ink-0);
}
.trust-stats-row .trust-stat:nth-child(1) .v{ color:var(--orange) }
.trust-stats-row .trust-stat:nth-child(2) .v{ color:var(--lime) }
.trust-stats-row .trust-stat:nth-child(3) .v{ color:var(--magenta) }
.trust-stats-row .trust-stat .k{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-2);
  margin-top:4px;
}

@media (max-width:768px){
  .testimonials-grid{ grid-template-columns:1fr; gap:16px }
  .trust-stats-row{ flex-direction:column; align-items:center; gap:20px }
}
@media (max-width:520px){
  .testimonial-card{ padding:22px 18px 20px }
}

/* ========================================================
   CONTACTO
======================================================== */
.contact-grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:60px;
}
@media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; gap:36px} }
.form{
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  padding:36px 32px;
  background: var(--bg-1);
  display:flex; flex-direction:column; gap:20px;
}
.field{ display:flex; flex-direction:column; gap:8px}
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-2); text-transform:uppercase; font-weight:500}
.field input, .field textarea, .field select{
  font:inherit; color:var(--ink-0);
  background:transparent;
  border:0;
  border-bottom:1.5px solid var(--line-strong);
  padding:12px 0;
  outline:none;
  transition:border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--orange)}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:600px){ .field-row{ grid-template-columns:1fr} }
.checks{ display:flex; flex-wrap:wrap; gap:8px}
.check{
  padding:9px 14px; border:1px solid var(--line-strong); border-radius:999px;
  font-size:13px; color:var(--ink-1); cursor:pointer; transition:.2s;
  font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; font-size:11px; font-weight:500;
}
.check.on{ background:var(--orange); color:#160a02; border-color:var(--orange)}
.check[data-c="lime"].on{ background:var(--lime); color:#0a1605; border-color:var(--lime)}
.check[data-c="magenta"].on{ background:var(--magenta); color:#160a02; border-color:var(--magenta)}

.contact-side{ display:flex; flex-direction:column; gap:0}
.contact-block{ padding:24px 0; border-bottom:1px solid var(--line)}
.contact-block:first-child{ padding-top:0}
.contact-block:last-child{ border-bottom:none}
.contact-block .label{ font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; font-weight:500}
.contact-block .v{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:28px; letter-spacing:-.025em; line-height:1.15;
}
.contact-block a{ color:var(--ink-0); border-bottom:1.5px solid var(--orange); transition:.2s}
.contact-block a:hover{ color:var(--orange)}

/* ========================================================
   FOOTER
======================================================== */
.foot{
  border-top:1px solid var(--line);
  padding:80px 0 40px;
  background:var(--bg-0);
}
.foot-top{
  display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:40px;
  margin-bottom:60px;
}
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; gap:30px} }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; gap:30px} }
.foot-brand{ display:flex; flex-direction:column; gap:14px}
.foot-brand p{ color:var(--ink-1); margin:0; font-size:14px; max-width:340px; line-height:1.5}
.foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--orange); text-transform:uppercase; margin:0 0 16px; font-weight:500}
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{ color:var(--ink-1); font-size:14.5px; transition:.2s}
.foot-col a:hover{ color:var(--ink-0)}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);
  color:var(--ink-2); font-size:12px;
}
.foot-bottom .left{ display:flex; gap:18px; flex-wrap:wrap}
.foot-bottom .mono{ font-family:var(--mono); letter-spacing:.1em}
.foot-bottom a{ color:var(--ink-1); transition:.2s}
.foot-bottom a:hover{ color:var(--ink-0)}
@media (max-width:600px){
  .foot-bottom{ flex-direction:column; gap:12px; align-items:flex-start}
}

/* ========================================================
   PLAYER — fixed
======================================================== */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  height:var(--player-h);
  background: var(--player-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top:1px solid var(--line-strong);
  display:grid;
  grid-template-columns:80px 1fr 1fr 140px auto;
  align-items:center;
  padding:0 28px;
  gap:18px;
  transition: background .36s ease, box-shadow .36s ease;
}
body.player-full-open{ overflow:hidden }
.player::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--lime), var(--violet), transparent);
  opacity:.7;
  transition:opacity .25s ease;
}
.player::after{
  content:'';
  position:absolute;
  top:12px;
  right:9px;
  width:4px;
  height:calc(100% - 24px);
  border-radius:999px;
  background:linear-gradient(180deg, var(--orange), var(--lime));
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.player:hover::after{ opacity:.85; transform:scaleY(1.06) }
.player-expand-edge{
  position:absolute;
  inset:0 0 0 auto;
  width:18px;
  z-index:2;
  border-radius:0 18px 18px 0;
  cursor:pointer;
}
.player-expand-edge:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:-5px;
}
.player-art{
  position:relative;
  width:80px; height:80px;
  border-radius:16px;
  overflow:hidden;
  background: conic-gradient(from 0deg, var(--orange), var(--lime), var(--violet), var(--yellow), var(--orange));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: box-shadow .35s ease;
  will-change:transform;
}
.player-art:hover{ box-shadow:0 0 28px -4px var(--orange) }
.player-art:active{ box-shadow:0 0 12px -2px var(--orange) }

/* ── Loading state (buffering) ─── */
@keyframes spin-border{to{transform:rotate(360deg)}}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 12px -2px var(--orange)}
  50%{box-shadow:0 0 24px 0px var(--orange)}
}
.player-art.loading{
  pointer-events:none;
  animation:pulse-glow 1.2s ease-in-out infinite;
}
.player-art.loading .play-mark{ display:none !important }
.player-art.loading::before{
  content:''; position:absolute; z-index:2;
  width:22px; height:22px;
  border:2.5px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin-border .7s linear infinite;
}
[data-theme="light"] .player-art.loading::before{
  border-color:rgba(0,0,0,.15);
  border-top-color:var(--orange);
}
.btn.loading{
  pointer-events:none; opacity:.8;
  position:relative;
}
.btn.loading .btn-spinner{
  display:inline-block;
  width:15px; height:15px;
  border:2px solid rgba(0,0,0,.2);
  border-top-color:currentColor;
  border-radius:50%;
  animation:spin-border .7s linear infinite;
}
.btn.loading svg{ display:none !important }

.player.playing .player-info .label .red{
  background:var(--lime);
  box-shadow:0 0 14px var(--lime);
  animation:pulse 1.5s ease-out infinite;
}
.player-art::after{
  content:''; position:absolute; inset:8px; border-radius:10px; background:var(--bg-0);
}
.player-art .play-mark{ position:relative; z-index:1; width:24px; height:24px; color:#fff}
[data-theme="light"] .player-art .play-mark{ color:var(--ink-0)}
.player-info{
  min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.player-info .label{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-2); text-transform:uppercase; display:flex; align-items:center; gap:6px; font-weight:500}
.player-info .label .red{ width:6px; height:6px; border-radius:50%; background:#ff4d6d; box-shadow:0 0 10px #ff4d6d}
.player-info .title{
  font-family:var(--serif); font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:19px; line-height:1.1; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden;
}
.player-info .meta{ font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden}
.ticker-text{
  display:inline-block;
  min-width:100%;
  padding-right:42px;
  white-space:nowrap;
  will-change:transform;
}
.ticker-text.marquee-on{ animation: textFish 10s ease-in-out infinite }
@keyframes textFish{
  0%,6%{ transform:translateX(0) }
  46%,54%{ transform:translateX(var(--ticker-distance, -50%)) }
  94%,100%{ transform:translateX(0) }
}

.pctrl{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-1); transition:.2s;
}
.pctrl:hover{ color:var(--ink-0); background:color-mix(in oklab, var(--ink-0) 8%, transparent)}
.vol-mute-btn{
  flex:0 0 auto;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--ink-1);
  cursor:pointer;
  transition: color .2s, background .2s;
}
.vol-mute-btn:hover{ color:var(--ink-0); background:color-mix(in oklab, var(--ink-0) 8%, transparent) }
.vol-mute-btn.muted{ color:var(--orange) }

.player-waveform{
  width:100%;
  align-self:stretch;
  position:relative;
  overflow:visible;
  z-index:1;
}
.player-waveform canvas{
  position:absolute;
  left:-3%;
  top:-22%;
  width:106%;
  height:144%;
  pointer-events:none;
}
.player-volume{
  display:flex; align-items:center; gap:10px;
  max-width:160px; width:140px;
}
.player-volume .vbar{
  position:relative; flex:1 1 auto; height:3px; border-radius:999px;
  background: var(--line-strong); cursor:pointer;
}
.player-volume .vfill{ position:absolute; inset:0; right:auto; width:60%; background:var(--orange); border-radius:999px}
.player-extra{ display:flex; gap:6px; flex:0 0 auto}

/* drawer backdrop */
.player-drawer-backdrop{
  position:fixed; inset:0; bottom:var(--player-h); z-index:94;
  background:rgba(10,5,16,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .32s ease, visibility .32s ease;
}
.player-drawer-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto }

/* drawer (bottom sheet) */
.player-full{
  position:fixed; left:0; right:0; bottom:var(--player-h); z-index:95;
  max-height:calc(100vh - var(--player-h) - 48px);
  max-height:calc(100dvh - var(--player-h) - 48px);
  color:var(--ink-0);
  background:var(--bg-0);
  border-radius:24px 24px 0 0;
  border-top:1px solid var(--line-strong);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 -30px 80px -20px rgba(0,0,0,.6);
  transform:translateY(100%);
  visibility:hidden;
  pointer-events:none;
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    visibility .42s ease;
}
.player-full.open{
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  height:calc(100vh - var(--player-h) - 48px);
  height:calc(100dvh - var(--player-h) - 48px);
}
.player-full-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(48% 38% at 18% 14%, color-mix(in oklab, var(--orange) 34%, transparent), transparent 72%),
    radial-gradient(42% 40% at 86% 78%, color-mix(in oklab, var(--lime) 28%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg-1) 80%, transparent), var(--bg-0));
  opacity:.95;
}
.player-drawer-handle{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:8px 0 2px;
  cursor:grab; position:relative; z-index:2;
}
.player-drawer-handle::after{
  content:''; width:40px; height:4px;
  border-radius:999px;
  background:var(--ink-2); opacity:.5;
}
.player-full-inner{
  position:relative; z-index:1;
  flex:1 1 auto;
  overflow:hidden;
  max-width:1180px; width:100%;
  margin:0 auto;
  padding:0 24px 16px;
  display:flex; flex-direction:column; gap:14px;
  min-height:0;
}
.player-full-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex:0 0 auto;
}
.player-full-top h2{
  font-family:var(--serif); font-weight:800;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  font-size:clamp(28px, 4vw, 48px);
  line-height:.9; letter-spacing:-.04em;
  margin:2px 0 0;
}
.full-close{
  width:44px; height:44px;
  flex:0 0 44px;
  border:1px solid var(--line-strong);
  background:color-mix(in oklab, var(--ink-0) 7%, transparent);
}
.player-full-grid{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, .9fr);
  gap:24px; align-items:stretch;
  flex:1 1 0; min-height:0;
  overflow:hidden;
}
.player-full-visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate;
  min-height:0;
}
.radio-orb{
  width:min(42vw, 320px); aspect-ratio:1;
  border-radius:50%;
  position:relative;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--orange) 50%, transparent), transparent 28%),
    conic-gradient(from 140deg, var(--orange), var(--lime), var(--violet), var(--yellow), var(--orange));
  box-shadow:0 0 70px -20px var(--orange), inset 0 0 60px rgba(0,0,0,.5);
  animation: spin 18s linear infinite;
}
.radio-orb::after{
  content:''; position:absolute; inset:18%;
  border-radius:50%;
  background:var(--bg-0);
  box-shadow:inset 0 0 60px rgba(0,0,0,.65);
}
.radio-orb span{
  position:absolute; inset:calc(8% + var(--i, 0px));
  border:1px solid color-mix(in oklab, var(--ink-0) 22%, transparent);
  border-radius:50%;
  transform:scaleX(1.25) rotate(var(--r, 0deg));
}
.radio-orb span:nth-child(1){ --i:0px; --r:8deg }
.radio-orb span:nth-child(2){ --i:28px; --r:-14deg }
.radio-orb span:nth-child(3){ --i:56px; --r:24deg }
.radio-orb span:nth-child(4){ --i:84px; --r:-34deg }
.radio-spectrum{
  position:absolute; inset:auto 0 6%;
  height:100px;
  display:flex; align-items:end; justify-content:center; gap:4px;
  z-index:2;
}
.radio-spectrum span{
  width:6px; min-height:10px; border-radius:999px;
  background:linear-gradient(180deg, var(--lime), var(--orange));
  opacity:.82;
  transition:height .12s ease;
}
.player-full-panel{
  border:1px solid var(--line-strong);
  background:color-mix(in oklab, var(--bg-1) 76%, transparent);
  backdrop-filter:blur(18px);
  border-radius:20px;
  padding:20px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 20px 60px -30px rgba(0,0,0,.9);
  overflow-y:auto;
  overscroll-behavior:contain;
  min-height:0;
}
.live-chip{
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  padding:7px 12px; border:1px solid var(--line);
  border-radius:999px; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-1);
}
.live-chip .red{ width:7px; height:7px; border-radius:50%; background:#ff4d6d; box-shadow:0 0 12px #ff4d6d }
.player.playing ~ .player-drawer-backdrop ~ .player-full .live-chip .red,
.player.playing ~ .player-full .live-chip .red{ background:var(--lime); box-shadow:0 0 14px var(--lime) }
.full-title-wrap{
  overflow:hidden;
  font-family:var(--serif); font-weight:800;
  font-size:clamp(24px, 3.5vw, 40px);
  line-height:.95; letter-spacing:-.035em;
}
.full-meta{ margin:0; color:var(--lime); font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase }
.full-controls{ display:flex; flex-wrap:wrap; gap:12px }
.full-stats-inline{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-1);
}
.full-stats-inline .sep{ opacity:.35 }
.full-links{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.full-link{
  min-height:auto;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  color:var(--ink-0);
  background:color-mix(in oklab, var(--ink-0) 4%, transparent);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.full-link:hover{
  transform:translateY(-2px);
  border-color:var(--orange);
  background:color-mix(in oklab, var(--orange) 12%, transparent);
}
.full-link .ico{
  width:36px; height:36px;
  flex:0 0 36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-0);
  color:var(--bg-0);
}
.full-link .ico svg{
  width:18px;
  height:18px;
  display:block;
}
.full-link span:last-child{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-1);
  line-height:1.25;
  overflow-wrap:anywhere;
}

.share-pop{
  position:fixed; inset:0; z-index:240;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(10,5,16,.72);
  backdrop-filter:blur(12px);
}
.share-pop.open{ display:flex }
.share-card{
  position:relative;
  width:min(480px, 100%);
  border:1px solid var(--line-strong);
  background:var(--bg-1);
  color:var(--ink-0);
  border-radius:22px;
  padding:26px;
  box-shadow:0 32px 90px -36px rgba(0,0,0,.9);
}
.share-card h3{ font-family:var(--serif); font-size:34px; line-height:1; margin:8px 0 10px }
.share-card p{ color:var(--ink-1); margin:0 0 18px }
.share-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink-1);
}
.share-row{ display:flex; gap:8px }
.share-row input{
  min-width:0; flex:1; border:1px solid var(--line); border-radius:999px;
  background:var(--bg-0); color:var(--ink-0); padding:10px 14px;
}
.share-feedback{ display:block; min-height:18px; margin-top:10px; color:var(--lime); font-size:13px }

/* ── APK MODAL ── */
.apk-pop{
  position:fixed; inset:0; z-index:260;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.apk-pop.open{ display:flex }
.apk-backdrop{
  position:absolute; inset:0;
  background:rgba(10,5,16,.78);
  backdrop-filter:blur(14px);
}
.apk-card{
  position:relative; z-index:1;
  width:min(460px, 100%);
  border:1px solid var(--line-strong);
  background:var(--bg-1);
  color:var(--ink-0);
  border-radius:22px;
  padding:30px 28px 26px;
  box-shadow:0 32px 90px -36px rgba(0,0,0,.9);
  max-height:90vh; overflow-y:auto;
  animation:apkIn .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes apkIn{
  from{ opacity:0; transform:translateY(20px) scale(.96) }
  to{ opacity:1; transform:translateY(0) scale(1) }
}
.apk-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink-1);
  display:grid; place-items:center;
  font-size:20px; line-height:1;
  transition:border-color .2s, color .2s;
}
.apk-close:hover{ border-color:var(--orange); color:var(--ink-0) }
.apk-logo{
  width:72px; height:72px; border-radius:18px;
  background:color-mix(in oklab, var(--orange) 8%, var(--bg-0));
  border:1px solid color-mix(in oklab, var(--orange) 18%, transparent);
  display:grid; place-items:center;
  margin-bottom:18px;
}
.apk-title{
  font-family:var(--serif);
  font-size:26px; line-height:1.15;
  margin:0 0 8px;
}
.apk-desc{
  color:var(--ink-1); font-size:14px; line-height:1.55;
  margin:0 0 20px;
}
.apk-steps{
  list-style:none; padding:0; margin:0 0 18px;
  display:flex; flex-direction:column; gap:12px;
}
.apk-steps li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:13.5px; line-height:1.5;
  color:var(--ink-1);
}
.apk-steps li strong{ color:var(--ink-0); font-weight:600 }
.apk-steps li em{ color:var(--orange); font-style:normal }
.apk-step-num{
  flex-shrink:0;
  width:26px; height:26px; border-radius:8px;
  background:color-mix(in oklab, var(--orange) 10%, var(--bg-0));
  border:1px solid color-mix(in oklab, var(--orange) 20%, transparent);
  color:var(--orange);
  font-size:12px; font-weight:700;
  display:grid; place-items:center;
}
.apk-badge{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--lime);
  margin-bottom:22px;
  padding:8px 12px; border-radius:10px;
  background:color-mix(in oklab, var(--lime) 6%, var(--bg-0));
  border:1px solid color-mix(in oklab, var(--lime) 14%, transparent);
}
.apk-actions{
  display:flex; gap:10px;
}
.apk-actions .btn{ flex:1; min-width:0; white-space:nowrap; }
.apk-download{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
/* En celulares, los botones se apilan y ocupan todo el ancho */
@media (max-width:480px){
  .apk-actions{ flex-direction:column; gap:8px; }
  .apk-actions .btn{ width:100%; }
}
/* Icono Android verde del trigger — que se note */
.full-link .ico-android{ background:transparent; }
.full-link .ico-android svg{ width:22px; height:22px; }

/* App Android: reflejo de color recorriendo el contorno (paleta de acentos del header) */
@property --apk-angle{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
#apkLink{ position:relative; border-color:transparent; overflow:hidden; }
#apkLink::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--apk-angle),
    var(--orange), var(--lime), var(--magenta), var(--violet), var(--orange));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.75;
  animation:apkBorderSpin 5.5s linear infinite;
}
#apkLink:hover{
  transform:translateY(-2px); border-color:transparent;
  background:color-mix(in oklab, var(--lime) 9%, transparent);
  box-shadow:0 14px 40px -18px color-mix(in oklab, var(--lime) 60%, transparent);
}
#apkLink:hover::before{ opacity:1; animation-duration:2.6s; }
@keyframes apkBorderSpin{ to{ --apk-angle:360deg; } }
@media (prefers-reduced-motion:reduce){
  #apkLink::before{ animation:none; }
}

@media (max-width:920px){
  .player{ grid-template-columns:68px 1fr 1fr auto }
  .player-art{ width:68px; height:68px; border-radius:14px }
  .player-volume{ display:none}
  .player-full-grid{ grid-template-columns:1fr }
  .player-full-visual{ max-height:180px }
  .radio-orb{ width:min(40vw, 180px) }
  .radio-spectrum{ height:70px; gap:3px }
  .full-links{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width:680px){
  .player{
    grid-template-columns:54px minmax(0, 1fr) 1fr auto;
    padding:0 14px; gap:10px;
  }
  .player-info .meta{ display:none}
  .player-waveform{
    min-width:56px;
    height:48px;
    border-radius:10px;
    align-self:center;
    background:
      radial-gradient(ellipse 80% 100% at 50% 50%, rgba(90,20,140,.12), transparent 70%),
      color-mix(in oklab, var(--bg-1) 30%, transparent);
  }
  .player-extra{ display:flex}
  .player-extra #shareBtn{ display:none }
  .player-art{ width:58px; height:58px; border-radius:13px }
  .player-full{ max-height:78vh }
  .player-full-inner{ padding:0 14px 16px; gap:12px }
  .player-full-top h2{ font-size:clamp(22px, 8vw, 34px) }
  .player-full-visual{ max-height:140px }
  .radio-orb{ width:min(36vw, 140px) }
  .radio-spectrum{ height:52px; gap:2px }
  .radio-spectrum span{ width:4px }
  .player-full-panel{ padding:16px; gap:10px; border-radius:16px }
  .full-title-wrap{ font-size:clamp(20px, 7vw, 30px) }
  .full-controls .btn{ width:100% }
  .full-stats-inline{ font-size:10px }
  .full-links{ grid-template-columns:repeat(3, 1fr); gap:8px }
  .full-link{ min-height:auto; padding:10px; gap:6px }
  .full-link .ico{ width:28px; height:28px; flex:0 0 28px }
  .full-link .ico svg{ width:14px; height:14px }
  .full-link span:last-child{ font-size:9px; letter-spacing:.08em }
  .share-row{ flex-direction:column }
}

/* ── Mobile player: cleaner Spotify-style bar ── */
@media (max-width:520px){
  .player{
    grid-template-columns:44px 1fr minmax(80px,1fr);
    padding:0 12px; gap:10px;
    height:62px;
  }
  .player-art{ width:44px; height:44px; border-radius:11px; margin-right:6px }
  .player-art .play-mark{ width:20px; height:20px }

  /* Info — more breathing room between lines */
  .player-info{ gap:3px }
  .player-info .label{ font-size:9px; letter-spacing:.12em; gap:4px }
  .player-info .label .red{ width:5px; height:5px }
  .player-info .title{ font-size:14px; line-height:1.25 }
  .player-info .meta{ display:none }

  /* Wider waveform — tap to expand/collapse */
  .player-waveform{
    min-width:80px; height:38px;
    border-radius:8px;
    align-self:center;
    background:
      radial-gradient(ellipse 80% 100% at 50% 50%, rgba(90,20,140,.10), transparent 70%),
      color-mix(in oklab, var(--bg-1) 25%, transparent);
  }

  /* Waveform is the expand trigger — hide extra buttons */
  .player-extra{ display:none }
  .player-expand-edge{ display:none }

  /* Gradient bar thinner */
  .player::before{ height:1px; opacity:.5 }
  .player::after{ display:none }

  /* Full-player tweaks */
  .player-full{ max-height:82vh }
  .player-full-inner{ padding:0 12px 14px; gap:10px }
  .player-full-top h2{ font-size:clamp(20px, 7vw, 28px) }
  .player-full-visual{ max-height:120px }
  .radio-orb{ width:min(32vw, 120px) }
  .radio-spectrum{ height:44px; gap:2px }
  .radio-spectrum span{ width:3px; border-radius:2px }
  .player-full-panel{ padding:14px; gap:8px; border-radius:14px }
  .full-title-wrap{ font-size:clamp(18px, 6.5vw, 26px) }
  .full-meta{ font-size:11px }
  .full-controls{ gap:8px }
  .full-controls .btn{ width:100%; min-height:44px }
  .full-stats-inline{ font-size:9px }
  .full-links{ grid-template-columns:repeat(3, 1fr); gap:6px }
  .full-link{ min-height:auto; padding:8px; gap:4px }
  .full-link .ico{ width:26px; height:26px; flex:0 0 26px }
  .full-link .ico svg{ width:13px; height:13px }
  .full-link span:last-child{ font-size:8px; letter-spacing:.06em }
}
@media (max-width:400px){
  .player{
    grid-template-columns:40px 1fr minmax(68px,1fr);
    padding:0 10px; gap:8px;
    height:58px;
  }
  .player-art{ width:40px; height:40px; border-radius:10px; margin-right:4px }
  .player-art .play-mark{ width:18px; height:18px }
  .player-info .title{ font-size:13px }
  .player-info .label{ font-size:8px }
  .player-waveform{ min-width:68px; height:34px; border-radius:7px }
  .full-stats-inline{ font-size:8px }
  .full-links{ grid-template-columns:1fr }
}

/* ========================================================
   SCROLL TO TOP
======================================================== */
.scroll-top{
  position:fixed; right:20px; bottom:calc(var(--player-h) + 20px); z-index:190;
  width:42px; height:42px; border-radius:50%;
  background:var(--bg-1); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-1); cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s, visibility .3s, transform .3s, background .2s, color .2s;
}
.scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0)}
.scroll-top:hover{ background:var(--orange); color:#fff; border-color:var(--orange)}

/* ========================================================
   CHAT WIDGET
======================================================== */
.chat-fab{
  position:fixed; left:20px; bottom:calc(var(--player-h) + 20px); z-index:200;
  display:flex; flex-direction:column-reverse; align-items:center; gap:10px;
}
.chat-toggle{
  width:52px; height:52px; border-radius:50%;
  background:var(--orange); border:none;
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
  box-shadow:0 8px 28px -6px rgba(255,100,20,.5);
  transition:transform .25s, box-shadow .25s, background .2s;
}
.chat-toggle:hover{ transform:scale(1.08); box-shadow:0 12px 36px -6px rgba(255,100,20,.65)}
.chat-options{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s, visibility .25s, transform .25s;
  pointer-events:none;
}
.chat-fab.open .chat-options{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.chat-fab.open .chat-icon-open{ display:none}
.chat-fab.open .chat-icon-close{ display:block!important}
.chat-opt{
  position:relative;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:transform .2s, box-shadow .2s;
}
.chat-opt:hover{ transform:scale(1.1)}
.chat-telegram{ background:#2AABEE; box-shadow:0 6px 20px -4px rgba(42,171,238,.5)}
.chat-whatsapp{ background:#25D366; box-shadow:0 6px 20px -4px rgba(37,211,102,.5)}
.chat-badge{
  position:absolute; top:-4px; right:-4px;
  width:20px; height:20px; border-radius:50%;
  background:#ff4060; color:#fff;
  font-size:8px; font-weight:700; font-family:var(--mono);
  display:flex; align-items:center; justify-content:center;
  letter-spacing:0;
  box-shadow:0 2px 8px -2px rgba(255,64,96,.6);
}

/* ========================================================
   TWEAKS
======================================================== */
.tw-panel{
  position:fixed; right:20px; bottom: calc(var(--player-h) + 20px); z-index:200;
  width: 280px;
  background:var(--bg-1);
  backdrop-filter:blur(20px);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  padding:18px;
  display:none;
  flex-direction:column; gap:14px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.tw-panel.open{ display:flex}
.tw-head{ display:flex; justify-content:space-between; align-items:center}
.tw-head h6{ margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-1); font-weight:500}
.tw-section{ display:flex; flex-direction:column; gap:8px}
.tw-section .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-2); text-transform:uppercase; font-weight:500}
.tw-radio{ display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px}
.tw-radio button{ flex:1; padding:7px 8px; border-radius:999px; font-size:11px; letter-spacing:.04em; color:var(--ink-1); font-family:var(--mono); text-transform:uppercase; font-weight:500}
.tw-radio button.on{ background:var(--ink-0); color:var(--bg-0)}
.tw-swatches{ display:flex; gap:8px}
.tw-sw{ width:32px; height:32px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:.2s}
.tw-sw.on{ border-color:var(--ink-0); transform:scale(1.05)}
.tw-toggle-btn{
  position:fixed; right:20px; bottom: calc(var(--player-h) + 20px); z-index:200;
  height:44px; padding:0 16px 0 12px; border-radius:999px;
  background:var(--bg-1); border:1px solid var(--line-strong);
  display:flex; align-items:center; gap:8px; justify-content:center;
  display:none;
  color:var(--ink-0);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  box-shadow: 0 12px 36px -10px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, var(--orange) 25%, transparent) inset;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: twPop .35s ease;
}
.tw-toggle-btn:hover{ transform:translateY(-2px); box-shadow: 0 18px 44px -10px var(--orange), 0 0 0 1px var(--orange) inset}
.tw-toggle-btn svg{ color:var(--orange)}
@keyframes twPop{
  0%{ transform:translateY(20px) scale(.6); opacity:0}
  100%{ transform:translateY(0) scale(1); opacity:1}
}
.tw-toggle-btn.show{ display:flex}
@media (max-width:520px){
  .tw-panel{ left:20px; right:20px; width:auto; bottom: calc(var(--player-h) + 80px)}
}

/* ========================================================
   MISC
======================================================== */
.skip-link{ position:absolute; left:-9999px; top:0; padding:8px 12px; background:var(--orange); color:#160a02; border-radius:8px; font-weight:500}
.skip-link:focus{ left:8px; top:8px}

[data-anim]{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease}
[data-anim].in{ opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  [data-anim]{ opacity:1; transform:none}
}

.wp-page-section{ min-height:60vh }
.wp-page-content .section-head{ margin-bottom:36px }
.wp-page-content h1{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  font-size:clamp(44px, 7vw, 96px);
  line-height:.95;
  letter-spacing:-.035em;
  margin:0;
}
.wp-page-content .entry-content{
  max-width:820px;
  color:var(--ink-1);
  font-size:18px;
}
.wp-page-content .entry-content a{ color:var(--orange); text-decoration:underline; text-underline-offset:3px }
.wp-page-content .entry-content img{ border-radius:var(--r-md); margin:28px 0 }

/* ========================================================
   BLOG
======================================================== */
.blog-section{ padding-top:120px; min-height:60vh }
.blog-header{ margin-bottom:40px }

/* ── Grid ── */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:24px;
  margin-top:0;
}

/* ── Card ── */
.blog-card{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab, var(--orange) 28%, var(--line));
  box-shadow:0 20px 56px -14px rgba(255,138,48,.12);
}
.blog-card-img{
  display:block; position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
}
.blog-card-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.blog-card:hover .blog-card-img img{ transform:scale(1.04) }
.blog-card-img--empty{
  background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
}
.blog-card-body{
  padding:20px; display:flex; flex-direction:column; gap:8px; flex:1;
}
.blog-card-meta{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px;
  color:var(--ink-2); text-transform:uppercase;
  letter-spacing:.08em; font-weight:500;
}
.blog-card-cat{
  padding:2px 8px; border-radius:999px;
  background:color-mix(in oklab, var(--orange) 10%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--orange) 20%, transparent);
  color:var(--orange); font-size:9px; font-weight:700;
  letter-spacing:.10em;
}
.blog-card-title{
  font-family:var(--serif); font-weight:700;
  font-size:20px; line-height:1.25; margin:0;
  letter-spacing:-.01em;
}
.blog-card-title a{
  color:var(--ink-0); text-decoration:none;
  transition:color .2s;
}
.blog-card-title a:hover{ color:var(--orange) }
.blog-card-excerpt{
  color:var(--ink-1); font-size:14px; line-height:1.55;
  margin:0; flex:1;
}
.blog-card-link{
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--orange); text-decoration:none;
  letter-spacing:.06em; text-transform:uppercase;
  margin-top:auto; padding-top:4px;
  transition:color .2s;
}
.blog-card-link:hover{ color:var(--lime) }

/* ── Pagination ── */
.blog-pagination{
  margin-top:40px; text-align:center;
}
.blog-pagination .nav-links{
  display:flex; justify-content:center; align-items:center; gap:6px;
}
.blog-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px;
  padding:0 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-1);
  font-family:var(--mono); font-size:13px; font-weight:600;
  text-decoration:none;
  transition:background .2s, border-color .2s, color .2s;
}
.blog-pagination .page-numbers:hover{
  background:var(--bg-2); border-color:var(--line-strong); color:var(--ink-0);
}
.blog-pagination .page-numbers.current{
  background:var(--orange); border-color:var(--orange);
  color:var(--accent-ink);
}
.blog-empty{
  color:var(--ink-2); text-align:center; padding:80px 0;
  font-size:16px;
}

/* ── Single post ── */
.blog-breadcrumb{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-3); letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:24px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.blog-breadcrumb a{
  color:var(--ink-2); text-decoration:none;
  transition:color .2s;
}
.blog-breadcrumb a:hover{ color:var(--orange) }
.blog-breadcrumb .current{ color:var(--ink-1) }

.blog-single-header{ margin-bottom:36px }
.blog-single-cats{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:14px;
}
.blog-tag{
  display:inline-block;
  padding:4px 14px; border-radius:999px;
  background:color-mix(in oklab, var(--orange) 10%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--orange) 22%, transparent);
  color:var(--orange);
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
  transition:background .2s;
}
.blog-tag:hover{
  background:color-mix(in oklab, var(--orange) 20%, var(--bg-1));
}
.blog-tag--outline{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--ink-1);
}
.blog-tag--outline:hover{
  border-color:var(--orange); color:var(--orange);
  background:color-mix(in oklab, var(--orange) 6%, transparent);
}

.blog-single-title{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:clamp(30px, 5vw, 56px);
  line-height:1.05; letter-spacing:-.03em;
  color:var(--ink-0);
  margin:0 0 16px;
  max-width:820px;
}
.blog-single-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px;
  color:var(--ink-2); letter-spacing:.06em;
}
.blog-single-sep{ color:var(--ink-3) }

.blog-single-hero{
  position:relative;
  margin:0 0 40px;
  max-width:820px;
  aspect-ratio:16/9;          /* fixed frame for the hero */
  max-height:440px;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 20px 60px -16px rgba(0,0,0,.3);
  background:var(--bg-1);
}
/* Blurred fill of the SAME image, so any aspect (square/portrait/16:9)
   fits the frame WITHOUT cropping the subject's face. --hero-bg is set
   from the image src by JS (initBlogHero). */
.blog-single-hero::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background-image:var(--hero-bg);
  background-size:cover; background-position:center;
  filter:blur(30px) brightness(.5) saturate(1.1);
  transform:scale(1.2);       /* hide blurred edges */
}
.blog-single-hero img{
  position:relative; z-index:1;
  width:100%; height:100%; display:block;
  object-fit:contain;          /* show the WHOLE image, never crop the face */
}

.blog-single-content{
  max-width:760px;
}
.blog-single-content h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(22px, 3vw, 30px);
  color:var(--ink-0); margin:40px 0 16px;
  letter-spacing:-.02em; line-height:1.2;
}
.blog-single-content h3{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(18px, 2.5vw, 24px);
  color:var(--ink-0); margin:32px 0 12px;
  letter-spacing:-.01em;
}
.blog-single-content p{
  color:var(--ink-1); font-size:17px; line-height:1.75;
  margin:0 0 20px;
}
.blog-single-content ul,
.blog-single-content ol{
  color:var(--ink-1); font-size:16px; line-height:1.7;
  padding-left:24px; margin:0 0 20px;
}
.blog-single-content li{ margin-bottom:6px }
.blog-single-content blockquote{
  border-left:3px solid var(--orange);
  padding:16px 24px;
  margin:28px 0;
  background:color-mix(in oklab, var(--orange) 4%, var(--bg-1));
  border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--ink-1); font-size:17px; font-style:italic;
  line-height:1.7;
}
.blog-single-content blockquote p{ margin:0 }
.blog-single-content pre,
.blog-single-content code{
  font-family:var(--mono); font-size:14px;
}
.blog-single-content pre{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:20px; overflow-x:auto;
  margin:24px 0;
}
.blog-single-content code{
  background:color-mix(in oklab, var(--orange) 8%, var(--bg-1));
  padding:2px 6px; border-radius:4px;
  color:var(--orange); font-size:0.9em;
}
.blog-single-content pre code{
  background:none; padding:0; color:var(--ink-0);
}

/* Tags & Share */
.blog-single-tags,
.blog-single-share{
  display:flex; align-items:center; gap:14px;
  padding:20px 0;
  border-top:1px solid var(--line);
  margin-top:32px;
  max-width:760px;
  flex-wrap:wrap;
}
.blog-single-share{ margin-top:0; border-top:none; padding-top:0 }
.blog-single-tags-label{
  font-family:var(--mono); font-size:10px; font-weight:700;
  color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.12em;
  flex:0 0 auto;
}
.blog-single-tags-list,
.blog-single-share-links{
  display:flex; gap:6px; flex-wrap:wrap;
}
.blog-share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink-1); cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.blog-share-btn:hover{
  background:var(--bg-2); border-color:var(--orange); color:var(--orange);
}

/* Post navigation */
.blog-post-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.blog-post-nav-link{
  display:flex; align-items:center; gap:14px;
  padding:14px;
  border-radius:var(--r-lg);
  background:var(--bg-1);
  border:1px solid var(--line);
  text-decoration:none;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.blog-post-nav-link:hover{
  border-color:color-mix(in oklab, var(--orange) 30%, var(--line));
  transform:translateY(-2px);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.2);
}
.blog-post-nav-thumb{
  flex:0 0 auto;
  width:64px; height:64px;
  border-radius:var(--r-sm);
  overflow:hidden;
}
.blog-post-nav-thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.blog-post-nav-text{
  display:flex; flex-direction:column; gap:4px;
  min-width:0; flex:1;
}
.blog-post-nav-next{ flex-direction:row-reverse }
.blog-post-nav-next .blog-post-nav-text{ text-align:right }
.blog-post-nav-label{
  font-family:var(--mono); font-size:10px; font-weight:700;
  color:var(--ink-2); text-transform:uppercase;
  letter-spacing:.10em;
}
.blog-post-nav-title{
  font-family:var(--serif); font-size:15px; font-weight:600;
  color:var(--ink-0); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── Blog responsive ── */
@media (max-width:768px){
  .blog-grid{ grid-template-columns:1fr; gap:20px }
  .blog-single-title{ font-size:clamp(26px, 7vw, 40px) }
  .blog-single-hero{ border-radius:var(--r-lg); max-height:280px }
  .blog-single-hero img{ max-height:none }
  .blog-post-nav{ grid-template-columns:1fr; gap:12px }
}
@media (max-width:520px){
  .blog-section{ padding-top:100px }
  .blog-card-body{ padding:16px }
  .blog-card-title{ font-size:18px }
  .blog-single-content p{ font-size:16px }
}

/* ========================================================
   WOOCOMMERCE
======================================================== */
.wc-section{ padding-top: 120px; min-height:60vh }
.wc-shop-header{ margin-bottom:36px }
.wc-shop-header h1{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:'wdth' 100, 'opsz' 96;
  font-size:clamp(36px, 6vw, 72px);
  line-height:.95;
  letter-spacing:-.03em;
}

/* Product grid */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  padding:0; margin:0;
  list-style:none;
}
.woocommerce ul.products li.product{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative;
  container-type:inline-size;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab, var(--orange) 30%, var(--line));
  box-shadow:0 20px 56px -14px rgba(255,138,48,.15);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  text-decoration:none; color:inherit; display:flex; flex-direction:column; flex:1;
  width:100%;
}
.woocommerce ul.products li.product a img{
  width:100% !important; display:block;
  border-radius:0;
  aspect-ratio:1;
  object-fit:contain;        /* show the WHOLE product image, never crop */
  object-position:center;
  box-sizing:border-box;
  padding:18px;              /* framed look — image floats inside the panel */
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--orange) 7%, transparent), transparent 60%),
    linear-gradient(165deg, var(--bg-2), var(--bg-1));
  border-bottom:1px solid var(--line);
  margin:0 !important;
  transition:filter .35s ease, transform .4s ease;
}
.woocommerce ul.products li.product:hover a img{
  filter:brightness(1.06) saturate(1.05);
}
/* Image container clip for zoom */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .attachment-woocommerce_thumbnail{
  overflow:hidden;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif);
  font-size:16px; font-weight:600;
  color:var(--ink-0);
  padding:14px 16px 6px;
  margin:0;
  line-height:1.3;
}
.woocommerce ul.products li.product .price{
  padding:0 16px 14px;
  font-family:var(--mono);
  font-size:15px;
  color:var(--orange);
  font-weight:700;
  margin-top:auto;
}
.woocommerce ul.products li.product .price del{
  color:var(--ink-3); font-weight:400; font-size:12px;
}
.woocommerce ul.products li.product .price ins{
  text-decoration:none;
}
/* Sale badge — top-right corner on every product view */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.single-product .onsale{
  position:absolute !important; top:14px !important; right:14px !important; left:auto !important; bottom:auto !important;
  z-index:5;
  min-width:auto !important; min-height:auto !important;
  padding:5px 12px !important; border-radius:999px !important;
  background:var(--magenta) !important; color:#fff !important;
  font-family:var(--mono) !important; font-size:10px !important; font-weight:700 !important;
  letter-spacing:.10em; text-transform:uppercase;
  line-height:1.4 !important;
  box-shadow:0 4px 12px -4px rgba(200,30,80,.35);
  margin:0 !important;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button{
  display:block;
  margin:0 14px 14px;
  text-align:center;
  padding:10px 16px;
  border-radius:var(--r-md);
  background:color-mix(in oklab, var(--orange) 8%, transparent);
  border:1px solid color-mix(in oklab, var(--orange) 22%, var(--line));
  color:var(--ink-0);
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
  text-decoration:none;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover{
  background:var(--orange); color:var(--accent-ink);
  border-color:var(--orange);
  transform:translateY(-1px);
}
/* "Added to cart" view-cart link */
.woocommerce ul.products li.product .added_to_cart{
  display:block; text-align:center;
  margin:0 14px 8px;
  font-family:var(--mono); font-size:11px;
  color:var(--lime); text-decoration:none;
  letter-spacing:.06em;
}
.woocommerce ul.products li.product .added_to_cart:hover{
  text-decoration:underline;
}

/* ── Single product — premium layout ── */
/* NOTE: scoped to div.product (main product) so it never hits li.product
   in related/upsell loops, which share the .product class. */
.single-product div.product{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:48px;
  align-items:start;
  position:relative;
  padding:32px;              /* inset everything from the card's border line */
}
/* Sale badge — absolute positioned, out of grid flow */
.single-product .product > .onsale{
  position:absolute !important;
  top:16px; right:16px; left:auto; z-index:5;
}
/* Gallery fills column 1 — override WC floats */
.single-product .product > .woocommerce-product-gallery,
.single-product .product > .images{
  grid-column:1; grid-row:1;
  float:none !important;
  width:100% !important; max-width:100% !important;
}
/* Summary fills column 2 — override WC floats */
.single-product .product > .summary{
  grid-column:2; grid-row:1;
  float:none !important;
  width:100% !important; max-width:100% !important;
}
/* Tabs span full width below */
.single-product .product > .woocommerce-tabs{
  grid-column:1 / -1;
}
/* Gallery internal — IMPORTANT: these centering rules only apply when the
   wrapper is a DIRECT child of the gallery (single image, no slider).
   When WooCommerce's FlexSlider initialises (2+ images) it wraps the
   wrapper inside .flex-viewport and manages widths itself; forcing
   width:100% !important there broke the slider (images shown side by
   side, navigation not advancing). */
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
  width:100% !important; max-width:100% !important;
  display:flex; align-items:center; justify-content:center;
}
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image{
  width:100% !important;
  display:flex; align-items:center; justify-content:center;
}
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper img{
  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:520px;
  object-fit:contain;
  display:block; margin:0 auto;
}
/* Slider mode (2+ images): let FlexSlider size the slides, keep the look */
.single-product .woocommerce-product-gallery .flex-viewport{
  width:100%;
  border-radius:var(--r-lg);
  background:var(--bg-1);
}
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img{
  width:100% !important; height:auto !important;
  max-height:none;
  object-fit:contain;
}
/* Hide zoom trigger icon */
.single-product .woocommerce-product-gallery__trigger{
  display:none !important;
}

/* Gallery card */
.single-product .woocommerce-product-gallery{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--bg-1);
  border:none;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{
  margin:0; padding:0;
}
.single-product .woocommerce-product-gallery img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-lg);
  transition:transform .5s ease;
}
.single-product .woocommerce-product-gallery:hover img{
  transform:scale(1.02);
}
/* Hide ugly WC gallery controls and plugin buttons */
.single-product .woocommerce-product-gallery .flex-direction-nav,
.single-product .woocommerce-product-gallery .flex-pauseplay,
.single-product .woocommerce-product-gallery a.zoom,
.single-product .woocommerce-product-gallery__trigger,
.single-product .gallery_container .zoom_in,
.single-product .gallery_container .zoom_out,
.single-product .gallery_container .media_slideshow,
.single-product .gallery_container > a[class*="zoom"],
.single-product .gallery_container > a[class*="slide"],
.single-product .gallery_container table,
.single-product .images table{
  display:none !important;
}
/* Fix gallery container white bg */
.single-product .gallery_container,
.single-product .images{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}
/* Gallery thumbnails */
.single-product .flex-control-thumbs{
  display:flex; gap:8px; padding:12px; margin:0; list-style:none;
}
.single-product .flex-control-thumbs li{
  flex:0 0 auto;
}
.single-product .flex-control-thumbs li img{
  width:64px; height:64px; object-fit:cover;
  border-radius:var(--r-sm); border:2px solid transparent;
  opacity:.6; cursor:pointer;
  transition:opacity .2s, border-color .2s;
}
.single-product .flex-control-thumbs li img:hover,
.single-product .flex-control-thumbs li img.flex-active{
  opacity:1; border-color:var(--orange);
}

/* Summary / right column */
.single-product .entry-summary{
  padding:8px 0;
  display:flex; flex-direction:column; gap:0;
  min-width:0; overflow:hidden;
}

/* Breadcrumb above title */
.single-product .woocommerce-breadcrumb{
  font-family:var(--mono); font-size:11px; letter-spacing:.10em;
  color:var(--ink-2); text-transform:uppercase; margin-bottom:16px;
}
.single-product .woocommerce-breadcrumb a{ color:var(--ink-2); text-decoration:none }
.single-product .woocommerce-breadcrumb a:hover{ color:var(--orange) }

/* Category badge */
.single-product .product_meta{
  display:flex; flex-wrap:wrap; flex-direction:column; gap:14px;
  margin-bottom:12px;
}
.single-product .product_meta > span{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.10em;
  color:var(--ink-2); text-transform:uppercase;
}
.single-product .product_meta a{
  display:inline-block;
  padding:4px 12px; border-radius:999px;
  background:color-mix(in oklab, var(--lime) 10%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--lime) 25%, transparent);
  color:var(--lime);
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
  transition:background .2s;
}
.single-product .product_meta a:hover{
  background:color-mix(in oklab, var(--lime) 18%, var(--bg-1));
}

/* Product title */
.single-product .product_title{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:'wdth' 100;
  font-size:clamp(26px, 4vw, 40px);
  line-height:1.1; letter-spacing:-.02em;
  color:var(--ink-0);
  margin:0 0 20px;
}

/* Price block */
.single-product .summary .price{
  display:inline-flex; align-items:baseline; gap:10px;
  margin:0 12px 24px 0;
  padding:16px 20px;
  border-radius:var(--r-md);
  background:color-mix(in oklab, var(--orange) 6%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--orange) 18%, transparent);
  max-width:100%; box-sizing:border-box;
}
.single-product .summary .price .woocommerce-Price-amount,
.single-product .summary .price > span,
.single-product .summary .price > bdi,
.single-product .summary .price ins .woocommerce-Price-amount{
  font-family:var(--mono);
  font-size:28px; font-weight:800;
  color:var(--orange);
  text-shadow:0 0 24px rgba(255,138,48,.25);
}
.single-product .summary .price del{
  font-size:16px; color:var(--ink-3); text-decoration:line-through;
}
.single-product .summary .price del .woocommerce-Price-amount{
  font-size:16px; font-weight:500; color:var(--ink-3);
  text-shadow:none;
}
.single-product .summary .price ins{
  text-decoration:none;
}
.single-product .summary .price .woocommerce-Price-currencySymbol{
  font-size:18px; font-weight:600;
}

/* Short description */
.single-product .woocommerce-product-details__short-description{
  color:var(--ink-1);
  font-size:15px;
  line-height:1.7;
  margin-bottom:28px;
}
.single-product .woocommerce-product-details__short-description p{
  margin:0 0 8px;
}

/* Quantity + Add to cart row */
.single-product form.cart{
  display:flex; align-items:center; gap:14px;
  margin-top:4px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.single-product .quantity{
  position:relative;
  display:flex; align-items:center;
}
.single-product .quantity input{
  width:56px; height:48px; padding:0;
  text-align:center;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--bg-1); color:var(--ink-0);
  font-family:var(--mono); font-size:16px; font-weight:600;
  -moz-appearance:textfield;
}
.single-product .quantity input::-webkit-inner-spin-button,
.single-product .quantity input::-webkit-outer-spin-button{
  -webkit-appearance:none; margin:0;
}
.single-product .quantity input:focus{
  border-color:var(--orange); outline:none;
}
.single-product .single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:1 1 auto;
  min-height:48px;
  padding:14px 28px;
  border-radius:var(--r-lg);
  background:var(--orange); color:var(--accent-ink);
  font-family:var(--sans); font-weight:700; font-size:15px;
  border:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
  position:relative; overflow:hidden;
}
.single-product .single_add_to_cart_button::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.single-product .single_add_to_cart_button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 32px -8px rgba(255,138,48,.45);
}

/* Botón "Solicitar prueba gratis · 1 mes" (WhatsApp) — fila completa bajo el carrito */
.single-product .wm-trial-btn{
  flex:1 1 100%;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 24px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, #25d366, #12b86c);
  color:#06210f;
  font-family:var(--sans); font-weight:700; font-size:15px;
  text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 10px 28px -10px rgba(37,211,102,.5);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.single-product .wm-trial-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px -12px rgba(37,211,102,.6);
  filter:brightness(1.05);
}
.single-product .wm-trial-btn svg{ width:20px; height:20px; flex:0 0 auto; }

/* ── Video del producto: card temada + expandir a pantalla completa ── */
/* width:100% es imprescindible: como .wm-video es un grid item del producto,
   el margin-inline:auto lo encogería a su contenido y colapsaría a 0px. */
.wm-video{ position:relative; margin:28px auto; width:100%; max-width:860px; }
/* Ocupa todo el ancho del grid del producto y va bajo la descripción, centrado */
.single-product div.product > .wm-video{ grid-column:1 / -1; }
.wm-video-media{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--r-lg); overflow:hidden;
  background:#000; border:1px solid var(--line-strong);
}
.wm-video-media > video,
.wm-video-media > iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.wm-video-expand{
  position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px;
  background:color-mix(in oklab, var(--bg-0) 72%, transparent);
  color:var(--ink-0); border:1px solid var(--line-strong);
  font-family:var(--sans); font-weight:600; font-size:12px; line-height:1;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;
}
.wm-video-expand:hover{ background:var(--orange); color:var(--accent-ink); border-color:var(--orange); }

/* El expandir usa FULLSCREEN NATIVO del reproductor (sin overlay propio), así
   que no hace falta CSS de overlay. En pantalla completa el navegador pinta
   fondo negro; nos aseguramos de que el video se vea entero y sin recortes. */
.wm-video-media > video:fullscreen,
.wm-video-media > iframe:fullscreen{
  width:100%; height:100%; object-fit:contain; background:#000;
}
.wm-video-media > video:-webkit-full-screen{
  width:100%; height:100%; object-fit:contain; background:#000;
}

/* Esconder el contenedor de precio si quedó vacío (productos en modo cotización) */
.woocommerce .price:empty,
.single-product .summary .price:empty{ display:none !important; }

/* "Cotizar ahora" (WhatsApp) — acción principal en productos en modo cotización */
.single-product .wm-quote-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:15px 30px; margin:4px 0 22px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, #25d366, #12b86c);
  color:#06210f;
  font-family:var(--sans); font-weight:700; font-size:16px;
  text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.5);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.single-product .wm-quote-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px -12px rgba(37,211,102,.6);
  filter:brightness(1.05);
}
.single-product .wm-quote-btn svg{ width:21px; height:21px; flex:0 0 auto; }
/* Botón "Cotizar" en las tarjetas de la tienda (hereda estilo del add-to-cart) */
.woocommerce ul.products li.product .wm-quote-loop{
  background:linear-gradient(135deg, #25d366, #12b86c) !important;
  color:#06210f !important;
}

/* Variations / select */
.single-product .variations{
  margin-bottom:16px;
}
.single-product .variations td{
  padding:6px 0;
}
.single-product .variations label{
  font-family:var(--mono); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-2);
}
.single-product .variations select{
  width:100%; padding:10px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--bg-1); color:var(--ink-0);
  font-family:var(--sans); font-size:14px;
}
.single-product .variations select:focus{
  border-color:var(--orange); outline:none;
}

/* Stock & SKU info */
.single-product .stock,
.single-product .sku_wrapper{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-2); letter-spacing:.08em;
  text-transform:uppercase;
}
.single-product .in-stock{ color:var(--lime) }
.single-product .out-of-stock{ color:var(--magenta) }

/* Sale badge */
.single-product .product > .onsale,
.single-product .woocommerce-product-gallery .onsale{
  position:absolute; top:16px; left:16px; z-index:3;
  padding:6px 14px; border-radius:999px;
  background:var(--magenta); color:#fff;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 4px 16px -4px rgba(200,30,80,.4);
}

/* Related / upsell products — span full grid, with a clear separator */
.single-product .related.products,
.single-product .upsells.products{
  grid-column:1/-1;
  margin-top:48px;
  padding-top:44px;          /* horizontal + bottom inset comes from div.product padding */
  border-top:1px solid var(--line);
}
.single-product .related.products > h2,
.single-product .upsells.products > h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(22px, 3vw, 32px);
  color:var(--ink-0); margin:0 0 24px;
  letter-spacing:-.02em;
}
/* Adaptive grid: center the cards so 1–3 related products don't orphan
   on the left of a rigid 4-col grid. Cards keep a sane max width. */
.single-product .related.products ul.products,
.single-product .upsells.products ul.products{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product{
  flex:1 1 240px;
  max-width:300px;
}

/* Tabs (horizontal inset now comes from div.product padding) */
.single-product .woocommerce-tabs{
  grid-column:1/-1;
  margin-top:48px;
}
.single-product .woocommerce-tabs ul.tabs{
  display:flex; gap:0; padding:0; margin:0 0 28px;
  list-style:none;
  border-bottom:1px solid var(--line);
}
.single-product .woocommerce-tabs ul.tabs li{
  margin:0;
}
.single-product .woocommerce-tabs ul.tabs li a{
  display:block; padding:12px 24px;
  font-family:var(--mono); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.10em;
  color:var(--ink-2); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .25s, border-color .25s;
  position:relative;
}
.single-product .woocommerce-tabs ul.tabs li a:hover{
  color:var(--ink-0);
}
.single-product .woocommerce-tabs ul.tabs li.active a{
  color:var(--orange); border-bottom-color:var(--orange);
}
.single-product .woocommerce-tabs .panel{
  color:var(--ink-1); font-size:15px; line-height:1.75;
}
.single-product .woocommerce-tabs .panel h2{
  font-family:var(--serif); font-weight:700; font-size:20px;
  color:var(--ink-0); margin:0 0 16px;
}

/* ── Reviews / valoraciones (fixed selector: was `.single-product#reviews`
   with no space, which matched nothing) ── */
.single-product #reviews{ max-width:760px; }          /* contained, not edge-to-edge */
.single-product #reviews #comments .commentlist{ list-style:none; margin:0 0 28px; padding:0; }
.single-product #reviews .comment-text{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px 20px;
}
.single-product #reviews .meta{
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px;
}
.single-product #reviews .description p{
  color:var(--ink-1); font-size:14px; line-height:1.7;
}
.single-product #reviews .woocommerce-noreviews{
  color:var(--ink-2); font-size:14px; margin:0 0 18px;
}

/* The "write a review" form — themed card so it isn't a bare white box */
.single-product #reviews #respond{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px;
  margin-top:8px;
}
.single-product #reviews .comment-reply-title{
  font-family:var(--serif); font-weight:700; font-size:18px;
  color:var(--ink-0); margin:0 0 6px;
}
.single-product #reviews .comment-notes,
.single-product #reviews .comment-form-comment,
.single-product #reviews .comment-form p{ color:var(--ink-2); font-size:13px; }
.single-product #reviews .comment-form label{
  display:block; font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-2); margin:14px 0 6px;
}
.single-product #reviews .comment-form input[type=text],
.single-product #reviews .comment-form input[type=email],
.single-product #reviews .comment-form input[type=url],
.single-product #reviews .comment-form textarea{
  width:100%; box-sizing:border-box;
  background:var(--bg-0);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  color:var(--ink-0);
  font-family:var(--sans); font-size:15px;
  padding:12px 14px;
  transition:border-color .2s, box-shadow .2s;
}
.single-product #reviews .comment-form textarea{ min-height:120px; resize:vertical; }
.single-product #reviews .comment-form input:focus,
.single-product #reviews .comment-form textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--orange) 18%, transparent);
}
/* small math-captcha input ("diez - 2 = __") shouldn't be full width */
.single-product #reviews .comment-form input[size],
.single-product #reviews .comment-form .wpcf7-quiz,
.single-product #reviews .comment-form input[type=text][aria-required][size]{
  width:auto; min-width:84px; display:inline-block;
}
/* rating stars */
.single-product #reviews .comment-form-rating .stars{ margin:6px 0 0; font-size:20px; }
.single-product #reviews p.stars a{ color:var(--ink-3); }
.single-product #reviews p.stars a:hover,
.single-product #reviews p.stars.selected a.active,
.single-product #reviews p.stars a.active{ color:var(--orange); }
/* consent checkbox */
.single-product #reviews .comment-form-cookies-consent{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--ink-2);
}
.single-product #reviews .comment-form-cookies-consent label{
  margin:0; text-transform:none; letter-spacing:0;
  font-family:var(--sans); font-size:13px; color:var(--ink-2);
}
/* submit button — high specificity (#reviews #respond #submit) + !important
   to beat WooCommerce's default `.woocommerce #respond input#submit` rule */
.single-product #reviews #respond .form-submit input#submit,
.single-product #reviews #respond input.submit{
  display:inline-flex !important; align-items:center; justify-content:center;
  margin-top:18px !important; padding:12px 28px !important;
  border:none !important; border-radius:var(--r-md) !important;
  background:var(--orange) !important; color:var(--accent-ink) !important;
  font-family:var(--sans) !important; font-weight:600 !important; font-size:14px !important;
  cursor:pointer; transition:transform .2s, filter .2s; text-shadow:none !important;
}
.single-product #reviews #respond .form-submit input#submit:hover,
.single-product #reviews #respond input.submit:hover{
  filter:brightness(1.06); transform:translateY(-1px);
}

/* WC star rating override for single */
.single-product .star-rating{
  color:var(--orange);
}
.single-product .star-rating::before{
  color:var(--ink-3);
}

/* Notify me plugin (ema-bis) */
.single-product .ema-bis-wrap{
  margin:12px 0;
  padding:12px 16px;
  border-radius:var(--r-sm);
  background:color-mix(in oklab, var(--orange) 6%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--orange) 15%, transparent);
}
.single-product .ema-bis-wrap a,
.single-product .ema-bis-wrap button{
  color:var(--orange); font-family:var(--mono); font-size:12px;
  text-decoration:none; font-weight:600;
}

/* Cart & Checkout */
.woocommerce table.shop_table{
  width:100%; border-collapse:collapse;
  color:var(--ink-0);
}
.woocommerce table.shop_table th{
  font-family:var(--mono); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-2);
  border-bottom:1px solid var(--line-strong);
  padding:12px 16px; text-align:left;
}
.woocommerce table.shop_table td{
  padding:16px; border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.woocommerce table.shop_table td.product-name a{ color:var(--ink-0); text-decoration:none; font-weight:500 }
.woocommerce table.shop_table td.product-name a:hover{ color:var(--orange) }
.woocommerce table.shop_table td img{
  width:60px; height:60px; border-radius:var(--r-sm); object-fit:cover;
}
.woocommerce .cart_totals,
.woocommerce-checkout #order_review{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order{
  display:block; width:100%;
  padding:14px 24px;
  border-radius:var(--r-lg);
  background:var(--orange); color:var(--accent-ink);
  font-family:var(--sans); font-weight:700; font-size:15px;
  border:none; cursor:pointer; text-align:center;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -6px rgba(255,138,48,.4);
}

/* Checkout form fields */
.woocommerce form .form-row label{
  color:var(--ink-1);
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
  display:block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--bg-0);
  color:var(--ink-0);
  font-family:var(--sans);
  font-size:14px;
  transition:border-color .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--orange);
  outline:none;
}

/* WC Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius:var(--r-md);
  padding:14px 20px;
  margin-bottom:20px;
  font-size:14px;
}
.woocommerce-message{
  background:color-mix(in oklab, var(--lime) 10%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--lime) 25%, var(--line));
  color:var(--ink-0);
}
.woocommerce-info{
  background:color-mix(in oklab, var(--orange) 8%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--orange) 20%, var(--line));
  color:var(--ink-0);
}
.woocommerce-error{
  background:color-mix(in oklab, var(--magenta) 10%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--magenta) 25%, var(--line));
  color:var(--ink-0);
}
.woocommerce-message a,
.woocommerce-info a{ color:var(--orange) }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul{
  display:flex; gap:6px; justify-content:center;
  padding:32px 0; margin:0; list-style:none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink-1); font-size:14px;
  text-decoration:none;
  transition:background .2s, border-color .2s, color .2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{
  border-color:var(--orange); color:var(--orange);
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--orange); color:var(--accent-ink);
  border-color:var(--orange);
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-2);
  letter-spacing:.04em;
  margin-bottom:24px;
}
.woocommerce .woocommerce-breadcrumb a{ color:var(--ink-2); text-decoration:none }
.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--orange) }

/* Star rating */
.woocommerce .star-rating{
  color:var(--orange);
  font-size:14px;
}

/* Ordering */
.woocommerce .woocommerce-ordering select{
  padding:8px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--bg-0);
  color:var(--ink-0);
  font-family:var(--mono);
  font-size:12px;
}
.woocommerce .woocommerce-result-count{
  color:var(--ink-2);
  font-family:var(--mono);
  font-size:12px;
}

/* Responsive WC */
@media (max-width:1100px){
  .woocommerce ul.products{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width:768px){
  .woocommerce ul.products{ grid-template-columns:repeat(2, 1fr); gap:16px }
  .single-product div.product{ grid-template-columns:1fr !important; gap:24px }
  .single-product .product > .woocommerce-product-gallery,
  .single-product .product > .images{ grid-column:1; grid-row:auto }
  .single-product .product > .summary{ grid-column:1; grid-row:auto; padding-left:6px; padding-right:6px; }
  /* Keep the short description text off the left edge on phones */
  .single-product .woocommerce-product-details__short-description{ overflow-wrap:break-word; }
  .single-product .product > .woocommerce-tabs{ grid-column:1 }
  /* lighter card padding on phones (inherited by tabs/related/gallery) */
  .single-product div.product{ padding:16px }
  .single-product .woocommerce-product-gallery{ border-radius:var(--r-lg) }
  .single-product .summary .price{ padding:14px 16px }
  .single-product .summary .price .woocommerce-Price-amount,
  .single-product .summary .price > span,
  .single-product .summary .price > bdi,
  .single-product .summary .price ins .woocommerce-Price-amount{ font-size:24px }
  .single-product .woocommerce-tabs ul.tabs li a{ padding:10px 16px; font-size:11px }
  .single-product .single_add_to_cart_button{ width:100% }
  /* En móvil: cantidad en su propia fila con aire respecto al botón */
  .single-product form.cart{ gap:16px; }
  .single-product .related.products > h2,
  .single-product .upsells.products > h2{ margin:32px 0 20px }
}
@media (max-width:520px){
  .woocommerce ul.products{ grid-template-columns:1fr }
}

/* ── WC product grid fix ── */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
  display:none !important; content:none !important;
}
.woocommerce ul.products{ float:none !important; width:100% !important }
.woocommerce ul.products li.product{
  float:none !important; width:100% !important;
  margin:0 !important; clear:none !important;
  display:flex; flex-direction:column;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  flex:1; display:flex; flex-direction:column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  flex:1;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button{
  white-space:nowrap;
}

/* ── WC result count & ordering bar ── */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
  margin-bottom:20px;
}

/* ── Cart page improvements ── */
.woocommerce table.shop_table{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.woocommerce table.shop_table td.product-remove a{
  color:var(--magenta) !important;
  font-size:18px; font-weight:700;
  text-decoration:none;
}
.woocommerce table.shop_table td.product-thumbnail img{
  border-radius:var(--r-sm);
}
.woocommerce table.shop_table .quantity input[type="number"]{
  width:60px; padding:8px 6px; text-align:center;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--bg-0); color:var(--ink-0);
  font-family:var(--mono); font-size:14px;
  -moz-appearance:textfield;
}
.woocommerce table.shop_table .quantity input::-webkit-inner-spin-button,
.woocommerce table.shop_table .quantity input::-webkit-outer-spin-button{
  -webkit-appearance:none; margin:0;
}
.woocommerce .coupon .input-text{
  padding:10px 16px !important;
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-sm) !important;
  background:var(--bg-0) !important;
  color:var(--ink-0) !important;
  font-family:var(--sans) !important;
  font-size:14px !important;
}
.woocommerce .coupon .button,
.woocommerce button[name="update_cart"]{
  padding:10px 24px !important;
  border-radius:var(--r-lg) !important;
  border:1px solid var(--line-strong) !important;
  background:transparent !important;
  color:var(--ink-0) !important;
  font-family:var(--sans) !important;
  font-size:13px !important; font-weight:600 !important;
  cursor:pointer !important;
  transition:background .2s, border-color .2s, color .2s !important;
}
.woocommerce .coupon .button:hover,
.woocommerce button[name="update_cart"]:hover{
  background:var(--orange) !important; color:var(--accent-ink) !important;
  border-color:var(--orange) !important;
}
.woocommerce button[name="update_cart"]:disabled{
  opacity:.4; cursor:not-allowed !important;
}
.woocommerce .cart_totals h2{
  font-family:var(--serif); font-size:24px; font-weight:700;
  color:var(--ink-0); margin:0 0 18px;
}
.woocommerce .cart_totals table{
  width:100%; border-collapse:collapse;
}
.woocommerce .cart_totals table th{
  font-family:var(--mono); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-2); padding:12px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.woocommerce .cart_totals table td{
  padding:12px 0; text-align:right;
  border-bottom:1px solid var(--line);
  color:var(--ink-0); font-weight:600;
}
.woocommerce .cart-actions{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; margin-top:16px;
}

/* ── Checkout form ── */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{
  font-family:var(--serif); font-size:22px;
  color:var(--ink-0); margin:0 0 18px;
}

/* ── Payment status pages (error_pago / pago_ok) ── */
.wp-page-content .entry-content p{
  line-height:1.65;
  margin-bottom:1.2em;
}
.page-slug-error_pago .wp-page-content .entry-content,
.page-slug-error-pago .wp-page-content .entry-content{
  max-width:640px;
  text-align:center;
  margin:0 auto;
  padding:40px 28px;
  background:color-mix(in oklab, var(--magenta) 5%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--magenta) 15%, var(--line));
  border-radius:var(--r-lg);
}
.page-slug-error_pago .wp-page-content .entry-content::before,
.page-slug-error-pago .wp-page-content .entry-content::before{
  content:'✕';
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:color-mix(in oklab, var(--magenta) 12%, var(--bg-0));
  border:1px solid color-mix(in oklab, var(--magenta) 25%, transparent);
  color:var(--magenta); font-size:24px; font-weight:700;
  margin:0 auto 20px;
}
.page-slug-error_pago .wp-page-content .entry-content p,
.page-slug-error-pago .wp-page-content .entry-content p{
  color:var(--ink-1); font-size:16px;
}
.page-slug-pago_ok .wp-page-content .entry-content,
.page-slug-pago-ok .wp-page-content .entry-content{
  max-width:640px;
  text-align:center;
  margin:0 auto;
  padding:40px 28px;
  background:color-mix(in oklab, var(--lime) 5%, var(--bg-1));
  border:1px solid color-mix(in oklab, var(--lime) 15%, var(--line));
  border-radius:var(--r-lg);
}
.page-slug-pago_ok .wp-page-content .entry-content::before,
.page-slug-pago-ok .wp-page-content .entry-content::before{
  content:'✓';
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:color-mix(in oklab, var(--lime) 12%, var(--bg-0));
  border:1px solid color-mix(in oklab, var(--lime) 25%, transparent);
  color:var(--lime); font-size:24px; font-weight:700;
  margin:0 auto 20px;
}
.page-slug-pago_ok .wp-page-content .entry-content p,
.page-slug-pago-ok .wp-page-content .entry-content p{
  color:var(--ink-1); font-size:16px;
}

/* ========================================================
   MAQUETA MODAL
======================================================== */
.maqueta-pop{
  position:fixed; inset:0; z-index:250;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.maqueta-pop.open{ opacity:1; visibility:visible }

.maqueta-backdrop{
  position:absolute; inset:0;
  background:rgba(10,5,16,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.maqueta-card{
  position:relative; z-index:1;
  width:min(520px, 100%);
  border:1px solid var(--line-strong);
  background:var(--bg-1);
  color:var(--ink-0);
  border-radius:24px;
  padding:36px 32px 32px;
  box-shadow:
    0 0 0 1px rgba(255,138,48,.06),
    0 40px 100px -40px rgba(0,0,0,.85),
    0 0 80px -20px rgba(255,138,48,.12);
  transform:translateY(20px) scale(.97);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.maqueta-pop.open .maqueta-card{
  transform:translateY(0) scale(1);
}
/* subtle top glow line */
.maqueta-card::before{
  content:'';
  position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--orange), var(--violet), transparent);
  opacity:.5;
}

.maqueta-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink-1);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  transition: border-color .2s, color .2s, background .2s;
  cursor:pointer; background:transparent;
}
.maqueta-close:hover{
  border-color:var(--orange); color:var(--orange);
  background:rgba(255,138,48,.08);
}

.maqueta-badge{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  padding:5px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--orange), var(--violet));
  color:#fff;
  margin-bottom:18px;
  box-shadow:0 4px 16px -4px rgba(255,138,48,.4);
}

.maqueta-title{
  font-family:var(--serif);
  font-weight:700;
  font-variation-settings:'wdth' 100, 'opsz' 48;
  font-size:clamp(24px, 5vw, 32px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 14px;
}
.maqueta-title .accent-o{
  background:linear-gradient(135deg, var(--orange), var(--orange-2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.maqueta-title .maqueta-sub{
  color:var(--ink-2);
  font-size:.72em;
  font-weight:500;
}

.maqueta-desc{
  color:var(--ink-1);
  font-size:14px;
  line-height:1.6;
  margin:0 0 22px;
}

.maqueta-features{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.maqueta-features li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; color:var(--ink-0); line-height:1.4;
}
.maqueta-features li svg{
  flex:0 0 18px;
  color:var(--orange);
  margin-top:1px;
}

.maqueta-cta{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:16px; font-weight:600;
  padding:14px 28px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--orange), color-mix(in oklab, var(--orange) 70%, var(--violet)));
  color:var(--accent-ink);
  border:none; cursor:pointer;
  box-shadow:0 6px 24px -6px rgba(255,138,48,.45);
  transition: transform .2s, box-shadow .2s;
  text-decoration:none;
}
.maqueta-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 32px -6px rgba(255,138,48,.55);
}
.maqueta-cta .arrow{
  transition:transform .2s;
}
.maqueta-cta:hover .arrow{
  transform:translateX(3px);
}

.maqueta-note{
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-2);
  margin:14px 0 0;
  letter-spacing:.02em;
}

/* Light theme overrides */
[data-theme="light"] .maqueta-card{
  background:var(--bg-0);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 40px 100px -40px rgba(0,0,0,.2),
    0 0 60px -20px rgba(255,138,48,.08);
}
[data-theme="light"] .maqueta-backdrop{
  background:rgba(255,255,255,.65);
}

@media (max-width:520px){
  .maqueta-pop{ padding:16px }
  .maqueta-card{ padding:28px 22px 24px; border-radius:20px }
  .maqueta-title{ font-size:clamp(22px, 6vw, 28px) }
  .maqueta-desc{ font-size:13px }
  .maqueta-features li{ font-size:13px; gap:10px }
  .maqueta-cta{ padding:12px 20px; font-size:15px }
}

/* ══════════════════════════════════════════════════════════
   PJAX navigation — loading bar + content fade
   ══════════════════════════════════════════════════════════ */
.pjax-bar{
  position:fixed; top:0; left:0;
  height:3px; width:0;
  background:linear-gradient(90deg, var(--orange), var(--magenta) 55%, var(--violet));
  box-shadow:0 0 14px -2px var(--orange), 0 0 4px var(--orange);
  border-radius:0 3px 3px 0;
  z-index:99999; opacity:0; pointer-events:none;
  transition:width .28s cubic-bezier(.4,0,.2,1);
}
.pjax-bar.active{ opacity:1; }
.pjax-bar.done{ transition:width .2s ease, opacity .32s ease .12s; opacity:0; }

#main{ transition:opacity .18s ease; will-change:opacity; }
#main.pjax-leaving{ opacity:0; }
#main.pjax-entering{ animation:pjaxIn .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes pjaxIn{
  from{ opacity:0; transform:translateY(10px); }
  to{   opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  #main, #main.pjax-leaving, #main.pjax-entering{ transition:none; animation:none; transform:none; }
  .pjax-bar{ display:none; }
}

/* ── "Sonando en otra pestaña" — cross-tab state ── */
.player--elsewhere #plStation,
.player--elsewhere #fullStation{ color:var(--lime); }
.player--elsewhere .player-art{ position:relative; }
.player--elsewhere .player-art::after{
  content:''; position:absolute; inset:-4px; border-radius:inherit;
  border:1.6px solid var(--lime); opacity:.7; pointer-events:none;
  animation:wmElsewherePulse 1.7s ease-out infinite;
}
@keyframes wmElsewherePulse{
  0%{ transform:scale(1);   opacity:.7 }
  100%{ transform:scale(1.32); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .player--elsewhere .player-art::after{ animation:none; opacity:.5 }
}

/* ══════════════════════════════════════════════════════════
   MOBILE APP EMBED — hide the site's player/chat/tweaks when the
   page is loaded inside the WebMusica app (body.app-embedded).
   The app provides its own bottom player, so we avoid duplicates.
   ══════════════════════════════════════════════════════════ */
body.app-embedded{ --player-h:0px; scroll-padding-top:0; }   /* reclaim player space + no sticky-header offset */
body.app-embedded .player,
body.app-embedded .player-full,
body.app-embedded .player-drawer-backdrop,
body.app-embedded .share-pop,                 /* player share popup */
body.app-embedded .chat-fab,                  /* floating chat button */
body.app-embedded .tw-toggle-btn,             /* tweaks toggle */
body.app-embedded .tw-panel,                  /* tweaks panel */
body.app-embedded .nav,                       /* site header — the app has its own */
body.app-embedded .sheet{                     /* mobile menu sheet (opened from the header) */
  display:none !important;
}

/* ══════════════════════════════════════════════════════════
   HOME — Asistente IA band (differentiator spotlight)
   ══════════════════════════════════════════════════════════ */
.s-ia .ia-band{
  display:grid; grid-template-columns:1.05fr .8fr; gap:48px; align-items:center;
  max-width:1060px; margin-inline:auto;      /* contenida y centrada, no a todo el ancho */
}
.ia-band-text h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(28px, 4vw, 46px); line-height:1.05;
  letter-spacing:-.02em; color:var(--ink-0); margin:14px 0 16px;
}
.ia-band-text h2 em{ color:var(--violet); font-style:normal; }
.ia-band-features{
  list-style:none; padding:0; margin:22px 0 28px;
  display:flex; flex-direction:column; gap:11px;
}
.ia-band-features li{
  position:relative; padding-left:28px;
  color:var(--ink-1); font-size:15px; line-height:1.5;
}
.ia-band-features li::before{
  content:''; position:absolute; left:0; top:3px;
  width:16px; height:16px; border-radius:50%;
  background:color-mix(in oklab, var(--lime) 22%, transparent);
  box-shadow:inset 0 0 0 1.5px var(--lime);
}
.ia-band-features li::after{
  content:''; position:absolute; left:5px; top:8px;
  width:5px; height:8px; border:solid var(--lime); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.ia-band-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.ia-band-visual{
  position:relative; max-width:420px; justify-self:center; width:100%;
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid color-mix(in oklab, var(--violet) 24%, var(--line));
  box-shadow:0 26px 64px -18px rgba(139,61,255,.32);
}
.ia-band-visual img{ width:100%; height:auto; display:block; }
@media (max-width:820px){
  .s-ia .ia-band{ grid-template-columns:1fr; gap:28px; max-width:520px; }
  .ia-band-visual{ order:-1; max-width:360px; margin:0 auto; }
}

/* ══════════════════════════════════════════════════════════
   HOME — Products carousel ("Nuestros productos")
   ══════════════════════════════════════════════════════════ */
.hp-carousel{ position:relative; margin-top:8px; }
.hp-track{
  display:flex; gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 2px 18px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hp-track::-webkit-scrollbar{ display:none; }
.hp-card{
  flex:0 0 300px; scroll-snap-align:start;
  display:flex; flex-direction:column; position:relative;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hp-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab, var(--orange) 30%, var(--line));
  box-shadow:0 20px 56px -14px rgba(255,138,48,.18);
}
.hp-card.is-featured{
  border-color:color-mix(in oklab, var(--violet) 45%, var(--line));
  box-shadow:0 0 0 1px color-mix(in oklab, var(--violet) 30%, transparent), 0 22px 58px -16px rgba(139,61,255,.28);
}
.hp-card-img{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--orange) 7%, transparent), transparent 60%),
    linear-gradient(165deg, var(--bg-2), var(--bg-1));
}
.hp-card-img img{ width:100%; height:100%; object-fit:contain; padding:18px; box-sizing:border-box; }
.hp-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.hp-card-name{ font-family:var(--serif); font-weight:600; font-size:16px; line-height:1.3; color:var(--ink-0); }
.hp-card-price{ font-family:var(--mono); font-weight:700; font-size:15px; color:var(--orange); margin-top:auto; }
.hp-card-price del{ color:var(--ink-3); font-weight:400; font-size:12px; margin-right:6px; }
.hp-card-price ins{ text-decoration:none; }
.hp-card-cta{
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink-1);
  display:inline-flex; align-items:center; gap:6px; transition:color .2s, gap .2s;
}
.hp-card:hover .hp-card-cta{ color:var(--orange); gap:10px; }
.hp-ribbon,.hp-badge{
  position:absolute; top:12px; z-index:2;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  padding:5px 12px; border-radius:999px;
}
.hp-ribbon{ left:12px; background:var(--violet); box-shadow:0 4px 12px -4px rgba(139,61,255,.5); }
.hp-badge{ right:12px; background:var(--magenta); box-shadow:0 4px 12px -4px rgba(200,30,80,.4); }
.hp-arrow{
  position:absolute; top:40%; z-index:3;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--bg-1); color:var(--ink-0);
  font-size:26px; line-height:1; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4); transition:background .2s, transform .2s;
}
.hp-arrow:hover{ background:var(--orange); color:var(--accent-ink); border-color:var(--orange); }
.hp-arrow-prev{ left:-12px; } .hp-arrow-next{ right:-12px; }
@media (min-width:900px){ .hp-arrow{ display:flex; } }
@media (max-width:680px){ .hp-card{ flex-basis:78vw; } }

/* ══════════════════════════════════════════════════════════
   HOME — Client logo strip (CSS mask → monochrome, theme-adaptive)
   Each <a class="client-logo"> gets its logo via --logo (inline style);
   the shape is painted with a theme colour, so it works in light & dark.
   ══════════════════════════════════════════════════════════ */
.clients-section{ padding-top:64px; padding-bottom:64px; }
.clients-title{
  text-align:center; font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 32px;
}
.clients-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.clients-track{
  display:flex; align-items:center; gap:64px; width:max-content;
  animation:clientsScroll 55s linear infinite;
}
.clients-marquee:hover .clients-track{ animation-play-state:paused; }
@keyframes clientsScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.client-logo{
  flex:0 0 auto; width:136px; height:46px;
  background-color:var(--ink-2);            /* adapts to light/dark theme */
  -webkit-mask:var(--logo) no-repeat center / contain;
          mask:var(--logo) no-repeat center / contain;
  opacity:.5;
  transition:opacity .3s ease, background-color .3s ease, transform .3s ease;
}
.client-logo:hover{ opacity:1; background-color:var(--orange); transform:translateY(-2px); }
@media (max-width:520px){
  .client-logo{ width:106px; height:38px; }
  .clients-track{ gap:46px; }
}
@media (prefers-reduced-motion: reduce){
  .clients-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; row-gap:32px; }
  .clients-marquee{ -webkit-mask-image:none; mask-image:none; }
}

/* ══════════════════════════════════════════════════════════
   HOME — FAQ (compact accordion)
   ══════════════════════════════════════════════════════════ */
.faq-section{ padding-top:86px; padding-bottom:86px; }   /* algo más compacta */
.faq-section .wrap{ max-width:740px; }                    /* más angosta = más compacta */
.faq-list{ display:flex; flex-direction:column; gap:9px; }
.faq-item{
  background:var(--bg-0); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-item.open{
  border-color:color-mix(in oklab, var(--orange) 32%, var(--line));
  box-shadow:0 12px 40px -18px rgba(255,138,48,.20);
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 20px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--sans); font-weight:600; font-size:15px; line-height:1.4;
  letter-spacing:-.005em; color:var(--ink-0); transition:color .2s;
}
.faq-q:hover{ color:var(--orange); }
.faq-icon{ position:relative; flex:0 0 auto; width:18px; height:18px; }
.faq-icon::before,
.faq-icon::after{
  content:''; position:absolute; background:var(--orange); border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.faq-icon::before{ top:8px; left:1px; right:1px; height:2px; }        /* — */
.faq-icon::after{ left:8px; top:1px; bottom:1px; width:2px; }         /* | */
.faq-item.open .faq-icon::after{ transform:scaleY(0); }              /* + → − */
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 20px 15px; color:var(--ink-1); font-size:13.5px; line-height:1.6; }
@media (max-width:520px){
  .faq-q{ padding:13px 16px; font-size:14.5px; }
  .faq-a-inner{ padding:0 16px 14px; }
}

/* ══════════════════════════════════════════════════════════
   HOME — Blog (últimas entradas, filtradas por idioma via JS)
   ══════════════════════════════════════════════════════════ */
.home-blog-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.home-blog-all{
  font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--ink-1); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; transition:color .2s, gap .2s;
}
.home-blog-all:hover{ color:var(--orange); gap:10px; }
.home-blog-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:10px; }
.home-blog-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg);
  text-decoration:none; color:inherit;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.home-blog-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab, var(--orange) 30%, var(--line));
  box-shadow:0 20px 56px -16px rgba(255,138,48,.16);
}
.home-blog-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); }
.home-blog-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.home-blog-card:hover .home-blog-thumb img{ transform:scale(1.05); }
.home-blog-noimg{ display:block; width:100%; height:100%; background:linear-gradient(135deg, var(--bg-2), var(--bg-1)); }
.home-blog-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.home-blog-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
.home-blog-title{ font-family:var(--serif); font-weight:600; font-size:15px; line-height:1.35; color:var(--ink-0); margin:0; }
.home-blog-date{ font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-top:auto; }
@media (max-width:900px){ .home-blog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .home-blog-grid{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════
   HOME — Audio combo (differentiator)  +  Plans comparison
   ══════════════════════════════════════════════════════════ */
/* Tira "Web + Audio" — compacta, contenida en un pill y con color por servicio */
.audio-combo{ padding-top:52px; padding-bottom:52px; }
.audio-combo-strip{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.audio-combo-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2);
}
.audio-combo-items{
  display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:6px;
  padding:8px 12px;
  border:1px solid var(--line-strong); border-radius:999px;
  background:
    radial-gradient(120% 200% at 0% 50%, color-mix(in oklab, var(--orange) 9%, transparent), transparent 55%),
    radial-gradient(120% 200% at 100% 50%, color-mix(in oklab, var(--magenta) 9%, transparent), transparent 55%),
    var(--bg-0);
  box-shadow:0 14px 40px -22px rgba(0,0,0,.5);
}
.audio-combo-item{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px; border-radius:999px; transition:background .25s ease;
}
.audio-combo-item:hover{ background:color-mix(in oklab, var(--ink-0) 6%, transparent); }
.audio-combo-ico{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.audio-combo-ico svg{ width:19px; height:19px; }
.audio-combo-item:hover .audio-combo-ico{ transform:translateY(-2px); }
.audio-combo-item strong{ font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:-.005em; color:var(--ink-0); }
/* Color por servicio */
.audio-combo-item[data-c="orange"]  .audio-combo-ico{ color:var(--orange);  background:color-mix(in oklab, var(--orange) 16%, transparent); }
.audio-combo-item[data-c="lime"]    .audio-combo-ico{ color:var(--lime);    background:color-mix(in oklab, var(--lime) 16%, transparent); }
.audio-combo-item[data-c="magenta"] .audio-combo-ico{ color:var(--magenta); background:color-mix(in oklab, var(--magenta) 18%, transparent); }
@media (max-width:560px){
  .audio-combo-items{ border-radius:var(--r-lg); }
  .audio-combo-item{ padding:6px 12px; }
  .audio-combo-item strong{ font-size:13.5px; }
}

.plans-section .wrap{ max-width:860px; }
.plans-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:10px; align-items:stretch; }
.plan-card{
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:34px 30px; transition:transform .3s ease, box-shadow .3s ease;
}
.plan-card:hover{ transform:translateY(-4px); }
.plan-card.is-popular{
  border-color:color-mix(in oklab, var(--orange) 45%, var(--line));
  box-shadow:0 0 0 1px color-mix(in oklab, var(--orange) 26%, transparent), 0 24px 60px -18px rgba(255,138,48,.28);
}
.plan-badge{
  position:absolute; top:-12px; left:30px;
  background:var(--orange); color:var(--accent-ink);
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
}
.plan-name{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.plan-price{ font-family:var(--serif); font-weight:700; font-size:32px; color:var(--ink-0); margin:2px 0 8px; }
.plan-price del{ font-size:17px; color:var(--ink-3); font-weight:400; margin-right:8px; }
.plan-price ins{ text-decoration:none; color:var(--orange); }
.plan-features{ list-style:none; padding:0; margin:8px 0 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.plan-features li{ position:relative; padding-left:28px; color:var(--ink-1); font-size:15px; }
.plan-features li::before{ content:''; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%; background:color-mix(in oklab, var(--lime) 22%, transparent); box-shadow:inset 0 0 0 1.5px var(--lime); }
.plan-features li::after{ content:''; position:absolute; left:5px; top:7px; width:5px; height:8px; border:solid var(--lime); border-width:0 2px 2px 0; transform:rotate(45deg); }
.plan-card .btn{ align-self:flex-start; }
@media (max-width:680px){ .plans-grid{ grid-template-columns:1fr; } .plans-section .wrap{ max-width:520px; } }