/* ==========================================================================
   Vave España — casino-vave.es
   Carbón cálido + carmín + ámbar · titulares con serifa · columna editorial
   ========================================================================== */

:root{
  /* Verde: base verde-carbón + degradado esmeralda -> lima.
     Los nombres --carmin/--ambar se conservan como alias históricos;
     ahora contienen verde (esmeralda) y lima. */
  --bg:          #0f1512;
  --bg-deep:     #0a0f0c;
  --bg-soft:     #16211a;
  --head-a:      #16231b;
  --head-b:      #0d1410;
  --card:        #14201a;
  --card-2:      #1a2a20;
  --card-3:      #101912;
  --line:        rgba(255,255,255,.08);
  --line-2:      rgba(255,255,255,.16);
  --carmin:      #10b981;
  --carmin-hi:   #34d399;
  --carmin-dim:  rgba(16,185,129,.14);
  --ambar:       #a3e635;
  --ambar-hi:    #c6f24f;
  --ambar-dim:   rgba(163,230,53,.14);
  --azulejo:     #3f8fd0;
  --text:        #ffffff;
  --muted:       #a1b3a6;
  --muted-2:     #74897c;
  --radius:      16px;
  --radius-sm:   11px;
  --shadow:      0 20px 46px rgba(0,0,0,.44);
  --head-h:      72px;
  --maxw:        1300px;
  --font:        "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
[id]{ scroll-margin-top:calc(var(--head-h) + 20px); }

body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 88% -6%, rgba(16,185,129,.11), transparent 60%),
    radial-gradient(1000px 520px at -4% 2%, rgba(163,230,53,.07), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  overflow-wrap:break-word;
}
h1,h2,h3,h4,.es-hero__title{ hyphens:auto; }

img,video{ max-width:100%; display:block; }
a{ color:var(--ambar); text-decoration:none; }
a:hover{ color:var(--ambar-hi); }
button{ font-family:inherit; }
::selection{ background:var(--carmin); color:#052016; }

/* --------------------------------------------------------------------------
   1. Cabecera — mástil centrado, una fila
   -------------------------------------------------------------------------- */

.es-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--head-h);
  background:linear-gradient(180deg,var(--head-a) 0%,var(--head-b) 100%);
  border-bottom:1px solid rgba(0,0,0,.4);
  transition:height .28s ease, box-shadow .28s ease, background .28s ease;
}
.es-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--carmin) 30%,var(--ambar) 70%,transparent);
  opacity:.7;
}
.es-header.is-stuck{
  height:60px;
  background:linear-gradient(180deg,rgba(20,30,23,.94),rgba(13,20,15,.96));
  backdrop-filter:blur(11px);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}

.es-progress{
  position:fixed; left:0; top:0; z-index:99;
  height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--carmin),var(--ambar));
  box-shadow:0 0 13px rgba(16,185,129,.55);
  pointer-events:none;
}

.es-head__in{
  max-width:var(--maxw); height:100%; margin:0 auto;
  padding:0 22px;
  display:flex; align-items:center; gap:22px;
}

.es-brand{ display:flex; align-items:center; gap:11px; flex:none; }
.es-brand img{ height:28px; width:auto; }
.es-brand b{
  font-family:var(--font); font-style:normal; text-transform:none;
  font-size:24px; font-weight:800; letter-spacing:.01em; color:#fff;
}
.es-brand span{
  display:block; font-size:9.5px; font-weight:800; letter-spacing:.42em;
  text-transform:uppercase; color:var(--ambar); margin-top:-4px;
}

/* nav centrada con subrayado de tinta */
.es-nav{ display:flex; align-items:center; gap:2px; margin:0 auto; }
.es-nav a{
  position:relative;
  color:#e8dff0; font-size:14px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:10px 16px; border-radius:9px; white-space:nowrap;
  transition:color .18s, background .18s;
}
.es-nav a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,var(--carmin),var(--ambar));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.es-nav a:hover{ color:#fff; }
.es-nav a:hover::after,
.es-nav a.is-active::after{ transform:scaleX(1); }
.es-nav a.is-active{ color:var(--ambar-hi); }

.es-head__right{ display:flex; align-items:center; gap:11px; flex:none; }
.es-lang{
  display:flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:8px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  color:#e6ddef; font-size:13px; font-weight:700; letter-spacing:.05em;
}
.es-lang svg{ width:17px; height:17px; stroke:var(--carmin-hi); fill:none; stroke-width:1.8; }

.es-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 22px; border-radius:10px;
  font-size:15px; font-weight:800; white-space:nowrap; border:0; cursor:pointer;
  transition:transform .16s, background .2s, box-shadow .2s, color .2s;
}
.es-btn:active{ transform:translateY(1px); }
.es-btn--ghost{ background:transparent; color:var(--ambar); border:1.5px solid rgba(163,230,53,.5); }
.es-btn--ghost:hover{ background:var(--ambar-dim); color:var(--ambar-hi); border-color:var(--ambar); }
.es-btn--carmin{
  background:linear-gradient(96deg,var(--carmin-hi),var(--carmin));
  color:#052016; box-shadow:0 8px 22px rgba(16,185,129,.32);
}
.es-btn--carmin:hover{ background:linear-gradient(96deg,#3fe39a,var(--carmin-hi)); }
.es-btn--ambar{
  background:linear-gradient(96deg,var(--ambar-hi),var(--ambar));
  color:#3a2600; box-shadow:0 8px 22px rgba(163,230,53,.3);
}
.es-btn--ambar:hover{ background:linear-gradient(96deg,#c6f24f,var(--ambar-hi)); color:#3a2600; }
.es-btn--lg{ height:54px; padding:0 34px; font-size:17px; border-radius:12px; }
.es-btn--block{ width:100%; }

.es-bonuspill{
  display:none; align-items:center; gap:8px;
  height:40px; padding:0 16px 0 11px; border-radius:10px;
  background:linear-gradient(96deg,var(--carmin-hi),var(--carmin));
  color:#052016; font-weight:800; font-size:15px;
}
.es-bonuspill em{ font-style:normal; font-size:18px; line-height:1; }

.es-burger{
  display:none; width:42px; height:42px; flex:none;
  background:rgba(255,255,255,.05); border:1px solid var(--line-2);
  border-radius:11px; cursor:pointer; padding:0;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.es-burger i{ display:block; width:22px; height:2.5px; background:#fff; border-radius:2px; transition:transform .22s, opacity .22s; }
.es-burger.is-open i:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.es-burger.is-open i:nth-child(2){ opacity:0; }
.es-burger.is-open i:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   2. Menú — hoja que baja desde arriba
   -------------------------------------------------------------------------- */

.es-scrim{
  position:fixed; inset:0; z-index:95;
  background:rgba(6,12,8,.68); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .24s, visibility .24s;
}
.es-scrim.is-open{ opacity:1; visibility:visible; }

.es-drawer{
  position:fixed; top:0; left:0; right:0; z-index:96;
  background:linear-gradient(180deg,#241c2a,var(--bg-deep));
  border-bottom:1px solid var(--line-2);
  box-shadow:0 24px 50px rgba(0,0,0,.5);
  transform:translateY(-102%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding:16px 18px 26px;
  max-height:92vh; overflow-y:auto;
}
.es-drawer.is-open{ transform:translateY(0); }
.es-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 2px 14px; border-bottom:1px solid var(--line);
}
.es-drawer__close{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2);
  background:transparent; color:#fff; font-size:21px; line-height:1; cursor:pointer;
}
.es-drawer nav{ padding:12px 0 4px; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.es-drawer nav a{
  display:flex; align-items:center; gap:10px;
  padding:13px 15px; border-radius:11px;
  color:#e8dff0; font-size:16px; font-weight:700;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.es-drawer nav a:hover,
.es-drawer nav a.is-active{
  background:linear-gradient(92deg,rgba(16,185,129,.16),rgba(163,230,53,.08));
  color:var(--ambar-hi); border-color:rgba(163,230,53,.3);
}
.es-drawer__cta{ padding:16px 0 4px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* --------------------------------------------------------------------------
   3. Estructura: índice a la izquierda + contenido centrado
   -------------------------------------------------------------------------- */

.es-shell{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--head-h) + 20px) 22px 0;
  display:grid; grid-template-columns:236px minmax(0,1fr); gap:30px;
  align-items:start;
}

.es-toc{
  position:sticky; top:calc(var(--head-h) + 20px);
  max-height:calc(100vh - var(--head-h) - 34px);
  overflow-y:auto; padding-right:4px;
  scrollbar-width:thin; scrollbar-color:var(--carmin) rgba(255,255,255,.06);
}
.es-toc::-webkit-scrollbar{ width:5px; }
.es-toc::-webkit-scrollbar-thumb{ background:var(--carmin); border-radius:4px; }
.es-toc__h{
  margin:0 0 12px; padding-bottom:9px; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-style:italic;
  font-size:16px; color:var(--ambar);
}
.es-toc ol{ list-style:none; margin:0; padding:0; counter-reset:estoc; display:grid; gap:1px; }
.es-toc a{
  counter-increment:estoc; position:relative;
  display:block; padding:7px 8px 7px 26px; border-radius:8px;
  color:#c8bcd3; font-size:13px; font-weight:600; line-height:1.4;
  border-left:2px solid transparent;
}
.es-toc a::before{
  content:counter(estoc,decimal-leading-zero);
  position:absolute; left:6px; top:7px;
  font-size:10px; font-weight:800; color:var(--muted-2);
}
.es-toc a:hover{ background:rgba(255,255,255,.04); color:#fff; }
.es-toc a.is-current{
  color:var(--ambar-hi); border-left-color:var(--carmin);
  background:linear-gradient(90deg,rgba(16,185,129,.12),transparent);
}
.es-toc a.is-current::before{ color:var(--carmin-hi); }

/* índice plegable móvil */
.es-toc--m{
  display:none; margin:0 0 18px;
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(150deg,var(--card-2),var(--card-3));
  padding:14px 16px;
}
.es-toc--m summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--ambar);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.es-toc--m summary::-webkit-details-marker{ display:none; }
.es-toc--m summary::after{ content:"\25be"; font-size:15px; transition:transform .2s; }
.es-toc--m[open] summary::after{ transform:rotate(180deg); }
.es-toc--m ol{ margin-top:12px; }

.es-main{ min-width:0; padding-bottom:46px; }
.es-wrap{ max-width:960px; }

/* fila de categorías (compacto) */
.es-chips{
  display:none; gap:8px; margin:0 0 18px;
  overflow-x:auto; padding-bottom:8px; scrollbar-width:none;
}
.es-chips::-webkit-scrollbar{ display:none; }
.es-chips a{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:10px 15px; border-radius:999px;
  background:linear-gradient(150deg,var(--card-2),var(--card-3));
  border:1px solid var(--line);
  color:#e0d6ea; font-size:13.5px; font-weight:700; white-space:nowrap;
}
.es-chips a em{ font-style:normal; font-size:16px; line-height:1; }
.es-chips a.is-active{ border-color:rgba(16,185,129,.5); color:var(--ambar-hi); }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.es-hero{
  position:relative; overflow:hidden;
  border-radius:22px;
  background:linear-gradient(120deg,#0c3a24 0%,#0f2c1e 52%,#0b1a13 100%);
  min-height:300px; display:flex; align-items:center;
  margin-bottom:22px;
  border:1px solid rgba(16,185,129,.24);
  box-shadow:var(--shadow);
}
.es-hero__media{ position:absolute; inset:0; overflow:hidden; }
.es-hero__media video,
.es-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.es-hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(9,15,11,.96) 0%,rgba(9,15,11,.84) 36%,rgba(9,15,11,.16) 74%,transparent 100%),
    linear-gradient(0deg,rgba(9,15,11,.55),transparent 58%);
}
.es-hero--img .es-hero__media img{ animation:esKen 28s ease-in-out infinite alternate; }
@keyframes esKen{ from{ transform:scale(1) translate3d(0,0,0); } to{ transform:scale(1.1) translate3d(-1.4%,-1.2%,0); } }

.es-hero--art .es-hero__media{
  background:
    radial-gradient(circle at 20% 28%, rgba(16,185,129,.34), transparent 48%),
    radial-gradient(circle at 82% 74%, rgba(163,230,53,.3), transparent 52%),
    repeating-linear-gradient(135deg, rgba(132,204,22,.1) 0 3px, transparent 3px 24px);
}

/* control de reproducción del vídeo del hero (WCAG 2.2.2 Pausar/Parar) */
.es-hero__vidtoggle{
  position:absolute; z-index:3; right:14px; bottom:14px;
  width:40px; height:40px; border-radius:50%; cursor:pointer; padding:0;
  background:rgba(7,14,10,.62); border:1px solid var(--line-2); color:#fff;
  display:grid; place-items:center; font-size:13px; line-height:1;
  backdrop-filter:blur(4px); transition:background .2s, border-color .2s;
}
.es-hero__vidtoggle:hover{ background:var(--carmin-dim); border-color:var(--carmin); }

.es-hero__body{ position:relative; z-index:2; padding:46px 34px 46px 46px; max-width:620px; }
.es-hero__kicker{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 15px; padding:6px 15px; border-radius:999px;
  border:1px solid rgba(163,230,53,.42); background:rgba(163,230,53,.1);
  font-size:11.5px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--ambar-hi);
}
.es-hero__title{
  font-family:var(--font-display);
  margin:0 0 24px; font-size:40px; line-height:1.12; font-weight:700; color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.5);
}
.es-hero__title b{ font-weight:700; color:var(--ambar-hi); font-style:italic; }
.es-hero__note{ margin:16px 0 0; font-size:13px; color:rgba(255,255,255,.66); }

/* datos rápidos */
.es-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));
  gap:12px; margin:0 0 20px;
}
.es-fact{
  padding:16px 18px; border-radius:15px;
  background:linear-gradient(150deg,var(--card-2),var(--card-3));
  border:1px solid var(--line); border-left:3px solid var(--carmin);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s;
}
.es-fact:hover{ transform:translateY(-4px); }
.es-fact b{
  display:block; font-family:var(--font-display);
  font-size:27px; font-weight:700; line-height:1.1; color:var(--ambar-hi);
}
.es-fact span{ display:block; font-size:12.5px; color:var(--muted); font-weight:600; }

/* accesos rápidos */
.es-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 22px; }
.es-quick a{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:13px;
  padding:15px 17px; border-radius:15px;
  background:linear-gradient(150deg,var(--card-2),var(--card));
  border:1px solid var(--line);
  color:#e8dff0; font-size:14.5px; font-weight:700; line-height:1.3;
}
.es-quick a:hover{ border-color:rgba(16,185,129,.5); color:#fff; }
.es-quick i{
  width:42px; height:42px; flex:none; border-radius:12px;
  display:grid; place-items:center; font-size:21px; font-style:normal;
  background:linear-gradient(135deg,rgba(16,185,129,.28),rgba(163,230,53,.24));
}
.es-quick small{ display:block; font-weight:600; color:var(--muted); font-size:12px; }

/* --------------------------------------------------------------------------
   5. Migas
   -------------------------------------------------------------------------- */

.es-crumb{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:0 0 16px; font-size:13.5px; color:var(--muted);
}
.es-crumb a{ color:var(--muted); font-weight:600; }
.es-crumb a:hover{ color:var(--ambar); }
.es-crumb span{ color:#fff; font-weight:700; }
.es-crumb i{ font-style:normal; color:var(--muted-2); }

/* --------------------------------------------------------------------------
   6. Bloques de contenido
   -------------------------------------------------------------------------- */

.es-sec{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 30px;
  margin:0 0 20px;
  transition:border-color .35s, box-shadow .35s;
}
.es-sec:hover{ border-color:rgba(16,185,129,.2); box-shadow:0 18px 42px rgba(0,0,0,.3); }

h1.es-h1{
  font-family:var(--font-display);
  margin:0 0 18px; font-size:39px; line-height:1.16; font-weight:700; letter-spacing:-.01em;
}
.es-eyebrow{
  margin:0 0 10px; font-size:11.5px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--carmin-hi);
}
/* H2 en cinta */
.es-h2{
  position:relative; display:block; margin:36px 0 16px;
  font-family:var(--font-display);
  font-size:28px; line-height:1.24; font-weight:700; color:#fff;
  padding:2px 0 12px 16px;
  border-left:4px solid transparent;
  border-image:linear-gradient(180deg,var(--carmin),var(--ambar)) 1;
}
.es-sec > .es-h2:first-child,
.es-sec > .es-h3:first-child,
.es-sec > .es-eyebrow:first-child{ margin-top:0; }
.es-h3{
  font-family:var(--font-display);
  margin:28px 0 12px; font-size:22px; line-height:1.32; font-weight:700; color:#fff;
}
.es-h4{ margin:22px 0 10px; font-size:16.5px; font-weight:800; color:var(--ambar); }
.es-p{ margin:0 0 15px; color:#dad0e2; }
.es-p:last-child{ margin-bottom:0; }
.es-p strong{ color:#fff; }
.es-lead{
  margin:0 0 20px; padding:14px 18px; border-radius:12px;
  background:linear-gradient(120deg,rgba(16,185,129,.1),rgba(163,230,53,.05));
  border:1px solid var(--line-2);
  font-size:18px; line-height:1.62; color:#f0e8f5;
}

/* listas */
.es-list{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.es-list li{ position:relative; padding-left:28px; color:#dad0e2; }
.es-list li::before{
  content:""; position:absolute; left:7px; top:.68em;
  width:9px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--carmin),var(--ambar));
}
.es-list li strong{ color:#fff; }
.es-list ul{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.es-list ul li::before{ background:var(--muted-2); width:6px; }

/* listas numeradas */
.es-olist{ list-style:none; counter-reset:es; margin:0 0 18px; padding:0; display:grid; gap:11px; }
.es-olist li{ counter-increment:es; position:relative; padding-left:44px; color:#dad0e2; }
.es-olist li::before{
  content:counter(es); position:absolute; left:0; top:1px;
  width:30px; height:26px; border-radius:9px;
  background:var(--carmin-dim); color:var(--carmin-hi);
  font-family:var(--font-display); font-size:14px; font-weight:700;
  display:grid; place-items:center; border:1px solid rgba(16,185,129,.3);
}
.es-olist li strong{ color:#fff; }

/* ilustración */
.es-media{
  position:relative; margin:24px 0; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--card-3);
  box-shadow:0 16px 36px rgba(0,0,0,.36);
  aspect-ratio:1400 / 400;
}
.es-media img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center center;
  transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .5s;
}
.es-media:hover img{ transform:scale(1.06); filter:saturate(1.09); }
.es-media::before{
  content:""; position:absolute; right:0; top:0; z-index:3;
  width:4px; height:70px; border-radius:0 0 0 3px;
  background:linear-gradient(180deg,var(--carmin),var(--ambar));
}
.es-media::after{
  content:""; position:absolute; inset:0; z-index:2; border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(16,185,129,0); transition:box-shadow .35s; pointer-events:none;
}
.es-media:hover::after{ box-shadow:inset 0 0 0 1px rgba(16,185,129,.4); }

.js .es-media img{ cursor:zoom-in; }
.es-lightbox{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center; padding:28px;
  background:rgba(6,12,8,.92); backdrop-filter:blur(7px);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.es-lightbox.is-open{ opacity:1; visibility:visible; }
.es-lightbox figure{ margin:0; max-width:1280px; width:100%; }
.es-lightbox img{
  width:100%; height:auto; max-height:78vh; object-fit:contain;
  border-radius:16px; border:1px solid rgba(16,185,129,.35);
  box-shadow:0 30px 74px rgba(0,0,0,.66);
  transform:scale(.97); transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.es-lightbox.is-open img{ transform:scale(1); }
.es-lightbox__close{
  position:absolute; top:18px; right:22px;
  width:46px; height:46px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid var(--line-2);
  color:#fff; font-size:22px; line-height:1;
}
.es-lightbox__close:hover{ background:var(--carmin-dim); border-color:var(--carmin); }

/* banda */
.es-band{
  position:relative; overflow:hidden;
  margin:24px 0; padding:24px 28px; border-radius:16px;
  background:linear-gradient(122deg,rgba(16,185,129,.16) 0%,rgba(32,26,38,.94) 52%,rgba(163,230,53,.13) 100%);
  border:1px solid var(--line-2);
}
.es-band > *{ position:relative; z-index:2; }
.es-band h3{ margin:0 0 10px; font-family:var(--font-display); font-size:20px; font-weight:700; color:#fff; }
.es-band p{ margin:0; color:#dad0e2; }

/* tablas */
.es-scroll{
  overflow-x:auto; margin:20px 0; border-radius:16px; border:1px solid var(--line);
  scrollbar-width:thin; scrollbar-color:var(--carmin) rgba(255,255,255,.07);
}
.es-scroll::-webkit-scrollbar{ height:7px; }
.es-scroll::-webkit-scrollbar-thumb{ background:var(--carmin); border-radius:4px; }
.es-table{ width:100%; min-width:540px; border-collapse:collapse; font-size:15px; background:var(--card-3); }
.es-table thead th{
  background:linear-gradient(180deg,rgba(16,185,129,.2),rgba(16,185,129,.06));
  color:#ffd9df; font-weight:800; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  text-align:left; padding:14px 17px; white-space:nowrap;
  border-bottom:1px solid rgba(16,185,129,.26);
}
.es-table td,.es-table th{ vertical-align:top; }
.es-table tbody th{ text-align:left; font-weight:700; color:#fff; padding:13px 17px; border-bottom:1px solid var(--line); white-space:normal; }
.es-table tbody td{ padding:13px 17px; color:#d4c9de; border-bottom:1px solid var(--line); }
.es-table tbody tr:last-child th,.es-table tbody tr:last-child td{ border-bottom:0; }
.es-table tbody tr:nth-child(even){ background:rgba(255,255,255,.022); }
.es-table tbody tr:hover{ background:rgba(16,185,129,.055); }

/* ventajas / desventajas */
.es-pc{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; }
.es-pc__box{ position:relative; overflow:hidden; border-radius:16px; padding:22px 24px; border:1px solid var(--line); background:var(--card-3); }
.es-pc__box::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.es-pc__box h3{ margin:0 0 15px; font-family:var(--font-display); font-size:19px; font-weight:700; display:flex; align-items:center; gap:10px; }
.es-pc__box--pro{ border-color:rgba(163,230,53,.3); }
.es-pc__box--pro::before{ background:linear-gradient(180deg,var(--ambar),transparent); }
.es-pc__box--pro h3{ color:var(--ambar-hi); }
.es-pc__box--con{ border-color:rgba(16,185,129,.3); }
.es-pc__box--con::before{ background:linear-gradient(180deg,var(--carmin),transparent); }
.es-pc__box--con h3{ color:var(--carmin-hi); }
.es-pc ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.es-pc li{ position:relative; padding-left:26px; color:#dad0e2; font-size:15px; }
.es-pc__box--pro li::before{ content:"+"; position:absolute; left:3px; top:0; color:var(--ambar); font-weight:800; }
.es-pc__box--con li::before{ content:"–"; position:absolute; left:4px; top:0; color:var(--carmin-hi); font-weight:800; }
.es-pc li strong{ color:#fff; }

/* pasos */
.es-steps{ display:grid; gap:14px; margin:20px 0; }
.es-step{
  position:relative; overflow:hidden; border-radius:16px;
  background:linear-gradient(140deg,var(--card-2),var(--card-3));
  border:1px solid var(--line); padding:20px 24px 20px 70px;
}
.es-step__n{
  position:absolute; left:20px; top:20px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  background:linear-gradient(135deg,var(--carmin-hi),var(--carmin)); color:#052016;
}
.es-step h3{ margin:0 0 8px; font-family:var(--font-display); font-size:18px; font-weight:700; color:#fff; }
.es-step p{ margin:0; color:#d4c9de; font-size:15px; }

/* banner promocional — arte a la izquierda, texto a la derecha */
.es-promo{
  position:relative; isolation:isolate; overflow:hidden;
  margin:32px 0; border-radius:20px;
  min-height:272px; display:flex; align-items:center; justify-content:flex-end;
  border:1px solid rgba(163,230,53,.3);
  background:linear-gradient(115deg,#0f3324,#101d16);
  box-shadow:0 24px 54px rgba(0,0,0,.46);
}
.es-promo__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center center;
  transform:scale(1.03); transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.es-promo:hover .es-promo__bg{ transform:scale(1.09); }
.es-promo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(270deg,rgba(8,14,10,.97) 0%,rgba(8,14,10,.9) 36%,rgba(8,14,10,.28) 70%,rgba(8,14,10,.04) 100%),
    linear-gradient(180deg,rgba(16,185,129,.12),transparent 60%);
}
.es-promo::after{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:32%; z-index:0;
  background:linear-gradient(100deg,transparent,rgba(163,230,53,.17),transparent);
  transform:skewX(-18deg); pointer-events:none; animation:esSweep 7.5s ease-in-out infinite;
}
.es-promo__body{ position:relative; z-index:1; padding:38px 42px; max-width:640px; text-align:right; }
.es-promo__eyebrow{ margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ambar-hi); }
.es-promo__title{ font-family:var(--font-display); margin:0 0 14px; font-size:33px; line-height:1.16; font-weight:700; color:#fff; }
.es-promo__title b{ color:var(--ambar-hi); font-weight:700; font-style:italic; }
.es-promo__sub{ margin:0 0 24px auto; font-size:15px; line-height:1.62; color:#e0d6ea; max-width:520px; }
.es-promo .es-btn{ animation:esGlow 3.6s ease-in-out infinite; }
.es-promo__list{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-end; }
.es-promo__list li{ padding:7px 15px; border-radius:999px; background:rgba(7,14,10,.62); border:1px solid rgba(163,230,53,.34); font-size:13px; font-weight:700; color:#f7ead2; }

/* llamada compacta */
.es-cta{
  position:relative; overflow:hidden; border-radius:16px; margin:28px 0;
  background:linear-gradient(110deg,#0f3a26 0%,#0f2c1e 46%,#0c1a13 100%);
  border:1px solid rgba(16,185,129,.3); padding:26px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.es-cta::before{
  content:""; position:absolute; right:-60px; top:-70px; width:270px; height:270px; border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.3),transparent 68%);
}
.es-cta::after{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:34%;
  background:linear-gradient(100deg,transparent,rgba(163,230,53,.14),transparent);
  transform:skewX(-18deg); animation:esSweep 7s ease-in-out infinite; pointer-events:none;
}
.es-cta__txt{ position:relative; z-index:2; max-width:640px; }
.es-cta__txt h3{ margin:0 0 7px; font-family:var(--font-display); font-size:22px; font-weight:700; color:#fff; }
.es-cta__txt p{ margin:0; color:#e0d6ea; font-size:15px; }
.es-cta .es-btn{ position:relative; z-index:2; }

/* FAQ */
.es-faq{ display:grid; gap:11px; margin:20px 0; }
.es-faq__item{ border-radius:14px; background:var(--card-3); border:1px solid var(--line); overflow:hidden; transition:border-color .25s; }
.es-faq__item.is-open{ border-color:rgba(163,230,53,.38); }
.es-faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 21px; background:transparent; border:0; cursor:pointer;
  color:#fff; font-size:16px; font-weight:700; text-align:left; line-height:1.45;
}
.es-faq__q::after{
  content:"+"; flex:none; width:28px; height:28px; border-radius:8px;
  background:var(--carmin-dim); color:var(--carmin-hi);
  display:grid; place-items:center; font-size:18px; font-weight:800;
  border:1px solid rgba(16,185,129,.3); transition:transform .25s, background .25s, color .25s;
}
.es-faq__item.is-open .es-faq__q::after{ content:"–"; transform:rotate(180deg); background:var(--carmin); color:#fff; }
.es-faq__a{ display:none; padding:0 21px 19px; color:#d4c9de; }
.es-faq__item.is-open .es-faq__a{ display:block; }
.es-faq__a p{ margin:0; }
.es-faq__a p + p{ margin-top:11px; }

/* reseñas */
.es-reviews{ display:grid; gap:16px; margin:20px 0; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.es-review{
  position:relative; overflow:hidden; border-radius:16px; padding:24px 26px;
  background:linear-gradient(155deg,var(--card-2),var(--card-3));
  border:1px solid var(--line); display:flex; flex-direction:column;
}
.es-review::before{
  content:"\201C"; position:absolute; right:16px; top:-18px;
  font-family:var(--font-display); font-size:100px; line-height:1;
  color:rgba(16,185,129,.12); pointer-events:none;
}
.es-review h3{ margin:0 0 11px; font-family:var(--font-display); font-size:17px; font-weight:700; color:#fff; line-height:1.4; padding-right:34px; }
.es-review__rate{ display:flex; align-items:center; gap:10px; margin:0 0 13px; font-size:15px; font-weight:800; color:var(--ambar-hi); }
.es-review__rate small{ font-size:12.5px; font-weight:600; color:var(--muted); }
.es-stars{ position:relative; display:inline-block; flex:none; font-size:14px; line-height:1; letter-spacing:2.5px; color:rgba(255,255,255,.15); }
.es-stars::before{ content:"\2605\2605\2605\2605\2605"; }
.es-stars::after{ content:"\2605\2605\2605\2605\2605"; position:absolute; left:0; top:0; width:var(--pct,0%); overflow:hidden; white-space:nowrap; color:var(--ambar); }
.es-review blockquote{ margin:0 0 16px; padding:0; color:#d4c9de; font-size:15px; }
.es-review blockquote p{ margin:0 0 10px; }
.es-review blockquote p:last-child{ margin-bottom:0; }
.es-review__by{ margin-top:auto; display:flex; align-items:center; gap:11px; font-size:14px; font-weight:700; color:var(--ambar-hi); }
.es-review__by i{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display); font-style:normal; font-size:13px; font-weight:700;
  background:linear-gradient(135deg,var(--carmin),var(--ambar)); color:#052016;
}

/* puntuaciones */
.es-scores{ display:grid; gap:13px; margin:20px 0; }
.es-score{ display:grid; grid-template-columns:minmax(150px,1fr) 1fr auto; gap:15px; align-items:center; }
.es-score__l{ font-size:15px; color:#dad0e2; font-weight:600; }
.es-score__bar{ height:9px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.es-score__bar i{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--carmin),var(--ambar)); transition:width .9s cubic-bezier(.2,.7,.3,1); }
.es-score__v{ font-size:15px; font-weight:800; color:var(--ambar-hi); min-width:54px; text-align:right; }

.es-verdict{
  margin:20px 0; padding:24px 26px; border-radius:16px;
  background:linear-gradient(128deg,rgba(16,185,129,.13),rgba(163,230,53,.07));
  border:1px solid rgba(163,230,53,.32);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.es-verdict b{ font-family:var(--font-display); font-size:48px; font-weight:700; line-height:1; color:var(--ambar-hi); }
.es-verdict span{ color:#e0d6ea; font-size:15px; }

.es-author{
  display:flex; align-items:center; gap:15px; margin:24px 0 0; padding:17px 21px; border-radius:14px;
  background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.26);
}
.es-author i{
  width:46px; height:46px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display); font-style:normal; font-weight:700; font-size:17px;
  background:linear-gradient(135deg,var(--carmin-hi),var(--ambar)); color:#052016;
}
.es-author b{ display:block; color:#fff; font-size:16px; }
.es-author span{ display:block; color:var(--ambar); font-size:14px; font-weight:600; }

.es-note{ margin:20px 0 0; padding:15px 19px; border-radius:13px; background:var(--card-3); border:1px dashed var(--line-2); font-size:13.5px; color:var(--muted); }

/* lista de verificación */
.es-check{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.es-check li{ position:relative; padding-left:32px; color:#dad0e2; }
.es-check li::before{
  content:"\2713"; position:absolute; left:2px; top:1px; width:21px; height:21px; border-radius:7px;
  background:var(--ambar-dim); color:var(--ambar); font-size:12px; font-weight:800;
  display:grid; place-items:center; border:1px solid rgba(163,230,53,.28);
}

/* botones de tienda */
.es-stores{ display:flex; gap:15px; flex-wrap:wrap; margin:20px 0; }
.es-store{
  display:flex; align-items:center; gap:15px; flex:1 1 min(260px,100%); min-width:0;
  padding:16px 24px; border-radius:14px;
  background:linear-gradient(140deg,var(--card-2),var(--card-3));
  border:1px solid rgba(16,185,129,.4);
  color:var(--ambar-hi); font-weight:800; font-size:14.5px; letter-spacing:.03em; text-transform:uppercase; line-height:1.28;
}
.es-store:hover{ background:rgba(16,185,129,.1); color:var(--ambar-hi); }
.es-store svg{ width:32px; height:32px; fill:currentColor; flex:none; }
.es-store b{ display:block; font-weight:800; }
.es-store small{ display:block; font-size:inherit; font-weight:800; }

.es-tabs{ display:flex; gap:11px; flex-wrap:wrap; margin:24px 0 0; }

/* --------------------------------------------------------------------------
   6b. Movimiento
   -------------------------------------------------------------------------- */

.es-review,.es-step,.es-pc__box,.es-store{ transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s; }
.es-review:hover,.es-step:hover,.es-pc__box:hover,.es-store:hover{ transform:translateY(-5px); border-color:rgba(16,185,129,.42); box-shadow:0 20px 38px rgba(0,0,0,.36); }
.es-quick a{ transition:transform .25s, border-color .25s; }
.es-quick a:hover{ transform:translateY(-4px); }

.js .es-reviews > *{ animation:esIn .6s cubic-bezier(.2,.7,.3,1) both; }
.js .es-reviews > *:nth-child(2){ animation-delay:.07s; }
.js .es-reviews > *:nth-child(3){ animation-delay:.14s; }
.js .es-reviews > *:nth-child(4){ animation-delay:.21s; }
.js .es-reviews > *:nth-child(5){ animation-delay:.28s; }
.js .es-facts > *{ animation:esIn .55s cubic-bezier(.2,.7,.3,1) both; }
.js .es-facts > *:nth-child(2){ animation-delay:.06s; }
.js .es-facts > *:nth-child(3){ animation-delay:.12s; }
.js .es-facts > *:nth-child(4){ animation-delay:.18s; }

.es-hero .es-btn,.es-cta .es-btn--carmin{ animation:esGlow 3.6s ease-in-out infinite; }
@keyframes esGlow{ 0%,100%{ box-shadow:0 8px 22px rgba(16,185,129,.28); } 50%{ box-shadow:0 10px 34px rgba(16,185,129,.58); } }
@keyframes esSweep{ 0%,72%{ left:-40%; } 100%{ left:120%; } }

a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px; border-radius:9px; }

/* --------------------------------------------------------------------------
   7. Pie
   -------------------------------------------------------------------------- */

.es-footer{ margin-top:38px; background:var(--bg-deep); border-top:1px solid var(--line); }
.es-footer__in{ max-width:var(--maxw); margin:0 auto; padding:36px 22px 28px; }
.es-footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:30px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.es-footer__brand{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.es-footer__brand img{ height:24px; width:auto; }
.es-footer__brand b{ font-family:var(--font); font-style:normal; text-transform:none; font-size:22px; font-weight:800; color:#fff; }
.es-footer p{ margin:0 0 11px; font-size:13.5px; color:var(--muted); line-height:1.62; }
.es-footer .es-foothead{ margin:0 0 13px; font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ambar); }
.es-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.es-footer ul a{ color:#cec3d8; font-size:14px; }
.es-footer ul a:hover{ color:var(--ambar); }
.es-footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px; }
.es-footer__badges{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.es-badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:9px; background:var(--card); border:1px solid var(--line); font-size:12.5px; font-weight:700; color:#d0c5da; }
.es-badge--age{ color:var(--carmin-hi); border-color:rgba(16,185,129,.38); }
.es-copy{ font-size:13px; color:var(--muted-2); }

.es-top{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:46px; height:46px; border-radius:12px; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--carmin-hi),var(--carmin)); color:#052016; font-size:19px; font-weight:800;
  box-shadow:0 12px 28px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s, visibility .22s, transform .22s;
}
.es-top.is-on{ opacity:1; visibility:visible; transform:translateY(0); }

.es-actionbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:82;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); gap:10px;
  background:linear-gradient(180deg,rgba(13,20,15,.9),rgba(8,13,10,.98));
  backdrop-filter:blur(10px); border-top:1px solid var(--line-2);
}
.es-actionbar .es-btn{ flex:1 1 0; height:44px; padding:0 12px; font-size:14.5px; }

@keyframes esIn{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:none; } }
.js [data-reveal]{ animation:esIn .55s cubic-bezier(.2,.7,.3,1) both; }

/* --------------------------------------------------------------------------
   8. Adaptación
   -------------------------------------------------------------------------- */

@media (max-width:1160px){
  .es-shell{ grid-template-columns:minmax(0,1fr); }
  .es-toc{ display:none; }
  .es-nav{ display:none; }
  /* sin la nav central, empuja los botones al borde derecho */
  .es-head__right{ margin-left:auto; }
  .es-head__right .es-btn,.es-head__right .es-lang{ display:none; }
  .es-bonuspill{ display:inline-flex; }
  .es-burger{ display:flex; }
  .es-chips{ display:flex; }
  .es-toc--m{ display:block; }
  .es-wrap{ max-width:none; }
}

@media (max-width:900px){
  .es-hero{ min-height:0; display:block; border-radius:18px; }
  .es-hero__media{ position:relative; inset:auto; width:100%; height:200px; }
  .es-hero__media::after{ background:linear-gradient(180deg,rgba(9,15,11,.12),rgba(9,15,11,.93)); }
  .es-hero__body{ padding:24px 22px 28px; max-width:none; }
  .es-hero__title{ font-size:28px; }
  .es-quick{ grid-template-columns:1fr; }
  .es-media{ margin:20px 0; border-radius:14px; aspect-ratio:1400 / 520; }
  .es-promo{ min-height:0; border-radius:16px; display:block; }
  .es-promo::before{ background:linear-gradient(180deg,rgba(8,14,10,.55) 0%,rgba(8,14,10,.94) 46%,rgba(8,14,10,.98) 100%),linear-gradient(90deg,rgba(16,185,129,.12),transparent 70%); }
  .es-promo__bg{ object-position:center 26%; }
  .es-promo__body{ padding:154px 22px 28px; max-width:none; text-align:left; }
  .es-promo__list{ justify-content:flex-start; }
  .es-promo__sub{ margin-left:0; }
  .es-promo__title{ font-size:25px; }
  .es-pc{ grid-template-columns:1fr; }
  .es-footer__top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  :root{ --head-h:60px; }
  body{ font-size:15.5px; padding-bottom:64px; }
  .es-head__in{ padding:0 13px; gap:12px; }
  .es-brand img{ height:24px; }
  .es-brand b{ font-size:22px; }
  .es-brand span{ display:none; }
  .es-shell{ padding-left:13px; padding-right:13px; }
  .es-sec{ padding:21px 17px; border-radius:14px; }
  h1.es-h1{ font-size:28px; }
  .es-h2{ font-size:22px; margin-top:28px; }
  .es-h3{ font-size:19px; }
  .es-lead{ font-size:16.5px; }
  .es-hero__title{ font-size:24px; }
  .es-hero__media{ height:166px; }
  .es-media{ aspect-ratio:16 / 9; }
  .es-drawer nav{ grid-template-columns:1fr; }
  .es-drawer__cta{ grid-template-columns:1fr; }
  .es-cta{ padding:21px 18px; }
  .es-step{ padding:19px 17px 19px 62px; }
  .es-step__n{ left:16px; top:18px; }
  .es-score{ grid-template-columns:1fr auto; }
  .es-score__bar{ grid-column:1 / -1; order:3; }
  .es-footer__top{ grid-template-columns:1fr; gap:24px; }
  .es-footer__in{ padding:28px 15px 24px; }
  .es-verdict b{ font-size:38px; }
  .es-actionbar{ display:flex; }
  .es-top{ bottom:74px; }
}

@media (max-width:400px){
  .es-bonuspill{ padding:0 12px 0 9px; font-size:14px; }
  .es-btn--lg{ height:48px; padding:0 22px; font-size:16px; }
  .es-promo__title{ font-size:22px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}