/* ============================================================
   0. TIPOGRAFÍAS, SERVIDAS DESDE AQUÍ
   Antes venían de Google, que recibía la IP de cada visitante.
   Ahora salen del mismo servidor: una conexión menos y ningún
   tercero por el medio. Se cachean para siempre (ver _headers).
   ============================================================ */
@font-face {
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fuentes/anton-400.woff2') format('woff2');
}
@font-face {
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fuentes/caveat-600.woff2') format('woff2');
}
@font-face {
  font-family:'Permanent Marker';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fuentes/permanent-marker-400.woff2') format('woff2');
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/assets/fuentes/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fuentes/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fuentes/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fuentes/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fuentes/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fuentes/poppins-800.woff2') format('woff2');
}

/* ============================================================
   ECONOMÍA DOMÉSTICA FÁCIL — Sistema de diseño
   Neón brutalista · negro + amarillo + magenta + cian
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Marca */
  --yellow:      #FFF200;
  --yellow-pure: #FFFF00;
  --magenta:     #FF00A8;
  --magenta-deep:#E6007E;
  --cyan:        #00E5FF;

  /* Neutros */
  --ink:      #06060A;
  --ink-2:    #0C0C12;
  --ink-3:    #14141C;
  --line:     #24242F;
  --grey:     #A6A6A6;
  --grey-2:   #7E7E8A;   /* 5,0:1 sobre el fondo negro (antes 4,02) */
  --white:    #FFFFFF;

  /* Semántica */
  --bg:       var(--ink);
  --fg:       var(--white);
  --muted:    #9C9CAB;

  /* Tipografía */
  --f-display: "Anton", "Arial Narrow", sans-serif;
  --f-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-hand:    "Permanent Marker", "Poppins", cursive;
  --f-mono:    "Courier New", ui-monospace, monospace;

  /* Escala fluida */
  --t-xs:   clamp(.8rem, .74rem + .18vw, .86rem);
  --t-sm:   clamp(.9rem, .86rem + .18vw, .96rem);
  --t-base: clamp(.98rem, .93rem + .25vw, 1.08rem);
  --t-lg:   clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --t-xl:   clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --t-2xl:  clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  --t-3xl:  clamp(2.1rem, 1.4rem + 3.1vw, 3.9rem);
  --t-4xl:  clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem);
  --t-mega: clamp(3rem, 1.2rem + 7.4vw, 8.5rem);

  /* Espacio */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --sp-9:6rem;   --sp-10:8rem;
  --sec: clamp(4.5rem, 9vw, 9rem);

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --radius: 4px;
  --radius-pill: 999px;

  /* Movimiento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-back: cubic-bezier(.34,1.4,.64,1);
  --dur: .5s;

  /* Glows */
  --glow-y: 0 0 12px rgba(255,242,0,.55), 0 0 40px rgba(255,242,0,.22);
  --glow-m: 0 0 12px rgba(255,0,168,.55), 0 0 40px rgba(255,0,168,.22);
  --glow-c: 0 0 12px rgba(0,229,255,.55), 0 0 40px rgba(0,229,255,.22);

  --nav-h: 74px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overflow-x:clip;   /* clip: no rompe position:sticky */
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--yellow); color:#000; }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:2px; }

/* ---------- 3. TIPOGRAFÍA ---------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.002em;
}
h1,h2,h3,h4{ font-weight:700; line-height:1.15; letter-spacing:-.02em; }

.h-mega{ font-size:var(--t-mega); }
.h-1   { font-size:var(--t-4xl); }
.h-2   { font-size:var(--t-3xl); }
.h-3   { font-size:var(--t-2xl); }
.h-4   { font-size:var(--t-xl); }

.lead{ font-size:var(--t-lg); line-height:1.6; color:#D6D6DE; font-weight:300; }
.small{ font-size:var(--t-sm); }
.tiny{ font-size:var(--t-xs); }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.balance{ text-wrap:balance; }

.hand{
  font-family:var(--f-hand);
  text-transform:none;
  letter-spacing:.01em;
  transform:rotate(-2.2deg);
  display:inline-block;
}

/* Color helpers */
.c-y{ color:var(--yellow); }
.c-m{ color:var(--magenta); }
.c-c{ color:var(--cyan); }
.c-w{ color:var(--white); }
.c-ink{ color:var(--ink); }

/* Trazos de neón sobre texto display */
.glow-y{ text-shadow:0 0 18px rgba(255,242,0,.5), 0 0 55px rgba(255,242,0,.25); }
.glow-m{ text-shadow:0 0 18px rgba(255,0,168,.5), 0 0 55px rgba(255,0,168,.25); }
.glow-c{ text-shadow:0 0 18px rgba(0,229,255,.5), 0 0 55px rgba(0,229,255,.25); }

/* Texto contorneado (outline) */
.outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.42);
}
.outline-y{ color:transparent; -webkit-text-stroke:1.5px var(--yellow); }

/* Marcador fosforito sobre una palabra */
.mark{
  position:relative;
  color:var(--ink);
  padding:0 .18em;
  display:inline-block;
  isolation:isolate;
}
.mark::before{
  content:"";
  position:absolute; inset:.02em -.1em -.01em -.1em;
  background:var(--yellow);
  z-index:-1;
  /* Bordes irregulares (trazo de rotulador) sin desplazar el texto */
  clip-path:polygon(0 5%, 12% 1%, 38% 4%, 67% 0, 89% 3%, 100% 1%, 99% 96%, 74% 100%, 45% 97%, 19% 100%, 2% 96%);
}
.mark--m::before{ background:var(--magenta); }
.mark--m{ color:var(--white); }
.mark--c::before{ background:var(--cyan); }

/* Marcador que se “pinta” al entrar en pantalla.
   Estado por defecto = PINTADO. El estado oculto solo se aplica dentro de
   un .reveal que todavía no ha entrado. Así, si el elemento no está
   envuelto en un .reveal (o el JS no corre), el marcador se ve igualmente
   en vez de dejar el texto negro sobre fondo negro. */
.mark--draw::before{ transform-origin:left center; transition:transform .62s var(--ease) .12s; }
.reveal:not(.is-in) .mark--draw::before{ transform:scaleX(0); }

/* Subrayado hecho a mano.
   Va como fondo del propio texto (no como pseudoelemento posicionado):
   con display:inline + box-decoration-break:clone, cada línea recibe su
   propio trazo. Si el titular ocupa cuatro líneas, se subrayan las cuatro
   en vez de dibujar una raya a media altura del bloque. Se anima el
   background-size, que también es interpolable. */
.underline-hand{
  display:inline;
  padding-bottom:.16em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 4, 110 17, 165 9 S 260 6, 297 12' fill='none' stroke='%23FF00A8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% .34em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-size .7s var(--ease) .15s;
}
.reveal:not(.is-in) .underline-hand{ background-size:0% .34em; }
.underline-hand--y{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 4, 110 17, 165 9 S 260 6, 297 12' fill='none' stroke='%23FFF200' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Dentro de un titular .display el interlineado es muy cerrado: ahí el
   trazo se pega al texto de la línea siguiente. Lo afinamos. Aun así,
   en titulares conviene usar .mark (rotulador) en lugar del subrayado
   si la frase va a ocupar más de una línea. */
.display .underline-hand{ padding-bottom:.06em; background-size:100% .22em; }
.display .reveal:not(.is-in) .underline-hand,
.reveal:not(.is-in) .display .underline-hand{ background-size:0% .22em; }

/* Círculo dibujado a mano alrededor de una palabra */
.circled{ position:relative; display:inline-block; padding:.06em .34em; }
.circled::after{
  content:"";
  position:absolute; inset:-.28em -.2em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120' preserveAspectRatio='none'%3E%3Cpath d='M175 8 C 60 2, 8 34, 12 66 C 16 100, 120 116, 200 112 C 285 108, 315 84, 308 56 C 301 28, 240 8, 150 10' fill='none' stroke='%23FFF200' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transition:transform .6s var(--ease-out-back), opacity .4s ease;
}
.reveal:not(.is-in) .circled::after{ transform:scale(.9); opacity:0; }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--wrap-narrow); }
.wrap--wide{ max-width:1520px; }
section{ position:relative; }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.grid{ display:grid; gap:var(--sp-5); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.flex{ display:flex; }
.stack{ display:flex; flex-direction:column; }
.center-x{ margin-inline:auto; }
.gap-2{ gap:var(--sp-2);} .gap-3{ gap:var(--sp-3);} .gap-4{ gap:var(--sp-4);}
.gap-5{ gap:var(--sp-5);} .gap-6{ gap:var(--sp-6);} .gap-7{ gap:var(--sp-7);}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)} .mt-7{margin-top:var(--sp-7)} .mt-8{margin-top:var(--sp-8)}
.mt-9{margin-top:var(--sp-9)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.mb-7{margin-bottom:var(--sp-7)} .mb-8{margin-bottom:var(--sp-8)}
.gap-1{gap:var(--sp-1)} .gap-8{gap:var(--sp-8)}

/* Fondos alternos */
.bg-2{ background:var(--ink-2); }
.bg-3{ background:var(--ink-3); }
.bg-light{ background:#F4F4F2; color:var(--ink); }
.bg-light .lead{ color:#3A3A44; }
.bg-light .muted{ color:#5C5C68; }
.bg-y{ background:var(--yellow); color:var(--ink); }
.bg-m{ background:var(--magenta-deep); color:var(--white); }

/* ---------- 5. TEXTURAS DE FONDO ---------- */
/* Grano — UNA sola capa fija para toda la página.
   Antes iba por sección con mix-blend-mode y obligaba a componer
   una capa enorme por cada una. La clase .grain se mantiene en el
   marcado por semántica, pero ya no pinta nada por su cuenta. */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:90;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.bg-light{ isolation:isolate; }
/* Rejilla técnica */
.gridlines::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
}
/* Halos de color */
.halo{
  position:absolute; border-radius:50%; pointer-events:none; opacity:.5; z-index:0;
  /* Degradado radial en vez de blur(): mismo resultado visual, sin
     el coste de desenfocar una superficie enorme en cada repintado. */
  filter:blur(30px);
}
.halo--y{ background:radial-gradient(closest-side, rgba(255,242,0,.34), transparent 72%); }
.halo--m{ background:radial-gradient(closest-side, rgba(255,0,168,.36), transparent 72%); }
.halo--c{ background:radial-gradient(closest-side, rgba(0,229,255,.28), transparent 72%); }

/* ---------- 6. BOTONES ---------- */
.btn{
  --btn-bg:var(--yellow); --btn-fg:#000; --btn-shadow:var(--magenta);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 2.1em;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:800; font-size:var(--t-sm);
  letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--radius-pill);
  box-shadow:4px 4px 0 var(--btn-shadow);
  transition:transform .3s var(--ease-out-back), box-shadow .3s var(--ease), background .25s ease, color .25s ease;
  will-change:transform;
  text-align:center; line-height:1.15;
}
.btn:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--btn-shadow); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--btn-shadow); }
.btn--m{ --btn-bg:var(--magenta); --btn-fg:#000; --btn-shadow:var(--yellow); }
.btn--c{ --btn-bg:var(--cyan); --btn-fg:#000; --btn-shadow:var(--magenta); }
.btn--w{ --btn-bg:#fff; --btn-fg:#000; --btn-shadow:var(--magenta); }
.btn--ghost{
  background:transparent; color:var(--white);
  border:2px solid rgba(255,255,255,.32); box-shadow:none;
}
.btn--ghost:hover{ background:var(--white); color:#000; border-color:var(--white); box-shadow:4px 4px 0 var(--magenta); }
.btn--lg{ padding:1.25em 2.6em; font-size:var(--t-base); }
.btn--sm{ padding:.75em 1.4em; font-size:var(--t-xs); }
.btn--block{ display:flex; width:100%; }
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

/* Enlace con flecha */
.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; font-size:var(--t-sm); text-transform:uppercase; letter-spacing:.08em;
  color:var(--yellow); padding-bottom:3px;
  border-bottom:2px solid rgba(255,242,0,.32);
  transition:border-color .3s ease, gap .3s var(--ease);
}
.link-arrow:hover{ border-color:var(--yellow); gap:.9em; }

/* ---------- 7. ETIQUETAS / EYEBROW ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--t-xs); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--yellow);
}
.eyebrow::before{
  content:""; width:34px; height:2px; background:currentColor; flex:none;
}
.eyebrow--c{ color:var(--cyan); }
.eyebrow--m{ color:var(--magenta); }
.eyebrow--center{ justify-content:center; }

.tag{
  display:inline-block; padding:.42em 1em;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  color:var(--muted); background:rgba(255,255,255,.02);
  transition:all .25s ease;
}
.tag--y{ border-color:var(--yellow); color:var(--yellow); background:rgba(255,242,0,.08); }
.tag--m{ border-color:var(--magenta); color:var(--magenta); background:rgba(255,0,168,.08); }
.tag--c{ border-color:var(--cyan); color:var(--cyan); background:rgba(0,229,255,.08); }
.tag--solid{ background:var(--yellow); color:#000; border-color:var(--yellow); }

/* Píldora “gratis / preventa” con latido */
.pulse-dot{
  width:8px; height:8px; border-radius:50%; background:var(--cyan); flex:none;
  box-shadow:0 0 0 0 rgba(0,229,255,.7); animation:pulse 2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 12px rgba(0,229,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,229,255,0); }
}

/* ---------- 8. NAVEGACIÓN ---------- */
.nav{
  position:fixed; inset:14px 0 auto; z-index:100;
  transition:transform .45s var(--ease), padding .35s ease;
}
.nav.is-hidden{ transform:translateY(calc(-100% - 20px)); }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  margin-inline:clamp(1.1rem,4vw,3rem);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  height:var(--nav-h); padding-inline:clamp(1rem,2.4vw,1.6rem);
  /* Opaco de sobra: la barra es fija y pasa por encima de secciones
     amarillas y cian a sangre. Con poca opacidad el logo blanco y los
     enlaces desaparecían sobre esos fondos. */
  background:rgba(8,8,12,.9);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-pill);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
@media(min-width:1330px){ .nav__inner{ margin-inline:auto; } }
.nav.is-stuck .nav__inner{
  background:rgba(8,8,12,.9);
  border-color:rgba(255,242,0,.24);
  box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,242,0,.06);
}
.nav__logo{ display:flex; align-items:center; flex:none; }
.nav__logo img{ height:34px; width:auto; transition:transform .4s var(--ease-out-back); }
.nav__logo:hover img{ transform:rotate(-3deg) scale(1.05); }
.nav__menu{ display:flex; align-items:center; gap:clamp(.4rem,1.4vw,1.4rem); }
.nav__link{
  position:relative; padding:.5em .2em;
  font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#CFCFD8; white-space:nowrap;
  transition:color .25s ease;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--yellow); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__link:hover{ color:var(--white); }
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.is-active{ color:var(--yellow); }
.nav__link.is-active::after{ transform:scaleX(1); }
.nav__cta{ flex:none; }
.nav__burger{
  display:none; width:44px; height:44px; flex:none;
  align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16); border-radius:50%;
}
.nav__burger span{
  display:block; width:19px; height:2px; background:var(--white); border-radius:2px;
  position:relative; transition:background .2s ease;
}
.nav__burger span::before,.nav__burger span::after{
  content:""; position:absolute; left:0; width:19px; height:2px; background:var(--white); border-radius:2px;
  transition:transform .35s var(--ease), top .25s ease;
}
.nav__burger span::before{ top:-6px; }
.nav__burger span::after{ top:6px; }
body.menu-open .nav__burger span{ background:transparent; }
body.menu-open .nav__burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav__burger span::after{ top:0; transform:rotate(-45deg); }

/* Menú móvil */
.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  padding:calc(var(--nav-h) + 46px) var(--gutter) var(--sp-7);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow-y:auto;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .7s var(--ease);
  visibility:hidden;
}
body.menu-open .mobile-menu{ clip-path:circle(150% at calc(100% - 46px) 46px); visibility:visible; }
.mobile-menu__list{ display:flex; flex-direction:column; gap:.1rem; }
.mobile-menu__list a{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.9rem,8vw,3rem); line-height:1.14;
  color:var(--white); display:block; padding:.06em 0;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .2s ease;
}
body.menu-open .mobile-menu__list a{ opacity:1; transform:none; }
.mobile-menu__list a:hover,.mobile-menu__list a.is-active{ color:var(--yellow); }
.mobile-menu__foot{ padding-top:var(--sp-6); border-top:1px solid var(--line); }

/* Barra de progreso de lectura */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; z-index:120;
  width:0%;
  background:linear-gradient(90deg,var(--yellow),var(--magenta),var(--cyan));
  box-shadow:0 0 14px rgba(255,242,0,.6);
  transition:width .1s linear;
}

/* ---------- 9. HÉROE ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 42px);
  padding-bottom:var(--sp-6);
}
.hero__grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(1.5rem,4vw,3.4rem);
  align-items:center; position:relative; z-index:3; width:100%;
}
.hero__media{ max-width:520px; margin-left:auto; }
/* Escala con el ancho Y con el alto: en portátiles bajos el titular encoge solo */
.hero__title{
  font-size:clamp(2.6rem, min(6.5vw, 10.6vh), 7rem);
  letter-spacing:-.018em;
  line-height:.88;
}
/* Contraste de tamaños dentro del propio titular: una línea manda
   sobre las demás en vez de ir todas al mismo cuerpo. */
.hero__title .xl{ font-size:1.3em; display:inline-block; }
.hero__title .sm{ font-size:.66em; display:inline-block; }
/* El overflow:hidden enmascara la línea mientras sube. Necesita holgura
   arriba (si no, corta las tildes de las mayúsculas: ECONOMÍA) y abajo
   (para las colas de la Q y la J), compensada con márgenes negativos
   para que el interlineado no cambie. */
.hero__title .line{
  display:block; overflow:hidden;
  padding:.2em 0 .08em; margin:-.2em 0 -.08em;
}
.hero__title .line > span{
  display:block;
  transform:translateY(105%);
  animation:riseIn .95s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.15s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.27s; }
.hero__title .line:nth-child(3) > span{ animation-delay:.39s; }
.hero__title .line:nth-child(4) > span{ animation-delay:.51s; }
@keyframes riseIn{ to{ transform:none; } }

.hero__fade{ opacity:0; animation:fadeUp .9s var(--ease) forwards; }
.hero__fade--1{ animation-delay:.62s; }
.hero__fade--2{ animation-delay:.74s; }
.hero__fade--3{ animation-delay:.86s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none; } }

/* Retrato recortado con neón (referencia del cliente).
   El filtro es ESTÁTICO: animar drop-shadow repinta la imagen en cada frame
   y hunde el rendimiento. El latido se hace con la opacidad de un halo
   detrás, que sí se compone en la GPU. */
.cutout{ position:relative; isolation:isolate; }
.cutout::before{
  content:""; position:absolute; z-index:0;
  inset:6% 4%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,242,0,.5), rgba(255,0,168,.22) 55%, transparent 78%);
  filter:blur(46px);
  animation:haloBreathe 5.5s ease-in-out infinite;
  will-change:opacity, transform;
}
@keyframes haloBreathe{
  0%,100%{ opacity:.62; transform:scale(.96); }
  50%    { opacity:1;   transform:scale(1.05); }
}
.cutout img{
  position:relative; z-index:2;
  filter:
    drop-shadow(0 0 1px var(--yellow))
    drop-shadow(0 0 4px var(--yellow))
    drop-shadow(0 0 14px rgba(255,242,0,.9))
    drop-shadow(0 0 42px rgba(255,242,0,.5));
}
.cutout--m::before{ background:radial-gradient(closest-side, rgba(255,0,168,.5), rgba(255,242,0,.18) 55%, transparent 78%); }
.cutout--m img{
  filter:
    drop-shadow(0 0 1px var(--magenta)) drop-shadow(0 0 4px var(--magenta))
    drop-shadow(0 0 14px rgba(255,0,168,.9)) drop-shadow(0 0 42px rgba(255,0,168,.5));
}
.cutout--c::before{ background:radial-gradient(closest-side, rgba(0,229,255,.45), transparent 76%); }
.cutout--c img{
  filter:
    drop-shadow(0 0 1px var(--cyan)) drop-shadow(0 0 4px var(--cyan))
    drop-shadow(0 0 14px rgba(0,229,255,.9)) drop-shadow(0 0 42px rgba(0,229,255,.45));
}
.cutout--plain::before{ display:none; }
.cutout--plain img{ filter:none; }

/* Indicador de scroll */
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-size:.75rem; letter-spacing:.28em; text-transform:uppercase; color:var(--grey-2);
  opacity:0; animation:fadeUp .8s var(--ease) 1.2s forwards;
}
.scroll-cue__line{ width:1px; height:44px; background:linear-gradient(var(--yellow),transparent); position:relative; overflow:hidden; }
.scroll-cue__line::after{
  content:""; position:absolute; top:0; left:0; width:1px; height:14px; background:var(--white);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-14px);} 100%{ transform:translateY(44px);} }

/* ---------- 10. MARQUESINA ---------- */
.marquee{
  position:relative; overflow:hidden;
  background:var(--yellow); color:#000;
  padding-block:.72em;
  border-block:3px solid #000;
  transform:rotate(-1.6deg) scale(1.04);
  z-index:5;
}
.marquee--m{ background:var(--magenta); color:#fff; transform:rotate(1.4deg) scale(1.04); }
.marquee--c{ background:var(--cyan); color:#000; }
.marquee--flat{ transform:none; }
.marquee__track{
  display:flex; width:max-content;
  animation:scrollX 34s linear infinite;
}
.marquee--m .marquee__track,
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1rem,2.1vw,1.6rem); letter-spacing:.02em;
  padding-inline:1.1rem; display:inline-flex; align-items:center; gap:1.1rem;
  white-space:nowrap;
}
.marquee__track span::after{ content:"✦"; font-family:var(--f-body); font-size:.6em; opacity:.65; }
@keyframes scrollX{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- 11. RAYOS / LLAMPS ---------- */
.bolt{ position:absolute; pointer-events:none; z-index:1; opacity:.85; }
.bolt path{
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
  animation:boltDraw 3.4s var(--ease) infinite;
}
@keyframes boltDraw{
  0%{ stroke-dashoffset:var(--len,600); opacity:0; }
  14%{ opacity:1; }
  46%{ stroke-dashoffset:0; opacity:1; }
  62%{ opacity:1; }
  74%{ opacity:.15; }
  80%{ opacity:1; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
/* Zigzag decorativo tipo gráfico que cae */
.zigzag{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.07; }

/* Divisor de rayo entre secciones */

/* ---------- 12. TARJETAS ---------- */
.card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.4rem,2.6vw,2.2rem);
  overflow:hidden;
  transition:border-color .35s ease, transform .45s var(--ease), background .35s ease;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,242,0,.13), transparent 62%);
  opacity:0; transition:opacity .4s ease;
}
.card:hover{ border-color:rgba(255,242,0,.45); transform:translateY(-6px); }
.card:hover::after{ opacity:1; }
.card--m:hover{ border-color:rgba(255,0,168,.5); }
.card--m::after{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,0,168,.15), transparent 62%); }
.card--c:hover{ border-color:rgba(0,229,255,.5); }
.card--c::after{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(0,229,255,.14), transparent 62%); }
.card__num{
  font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.22);
  transition:-webkit-text-stroke-color .35s ease, color .35s ease;
}
.card:hover .card__num{ -webkit-text-stroke-color:var(--yellow); }
.card__title{ font-size:var(--t-lg); font-weight:700; line-height:1.25; }
.card__body{ color:var(--muted); font-size:var(--t-sm); line-height:1.7; }

/* Tarjeta “brutalista” con sombra dura */
.card--hard{
  background:var(--ink-2); border:2px solid var(--white);
  box-shadow:8px 8px 0 var(--magenta);
  transition:transform .35s var(--ease-out-back), box-shadow .35s var(--ease);
}
.card--hard:hover{ transform:translate(-4px,-4px); box-shadow:14px 14px 0 var(--magenta); border-color:var(--white); }
.card--hard.card--hy{ box-shadow:8px 8px 0 var(--yellow); }
.card--hard.card--hy:hover{ box-shadow:14px 14px 0 var(--yellow); }
.card--hard.card--hc{ box-shadow:8px 8px 0 var(--cyan); }
.card--hard.card--hc:hover{ box-shadow:14px 14px 0 var(--cyan); }

/* ---------- 13. LISTA DE CHECKS ---------- */
.checks{ display:grid; gap:.85rem; }
.checks li{
  display:flex; gap:.85rem; align-items:flex-start;
  font-size:var(--t-base); line-height:1.55;
}
.checks li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:.22em;
  background:var(--yellow);
  clip-path:polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 86% 8%, 38% 71%);
  transition:transform .45s var(--ease-out-back);
}
.reveal:not(.is-in) .checks li::before{ transform:scale(0); }
.checks li:nth-child(1)::before{ transition-delay:.05s }
.checks li:nth-child(2)::before{ transition-delay:.1s }
.checks li:nth-child(3)::before{ transition-delay:.15s }
.checks li:nth-child(4)::before{ transition-delay:.2s }
.checks li:nth-child(5)::before{ transition-delay:.25s }
.checks li:nth-child(6)::before{ transition-delay:.3s }
.checks li:nth-child(7)::before{ transition-delay:.35s }
.checks li:nth-child(8)::before{ transition-delay:.4s }
.checks--m li::before{ background:var(--magenta); }
.checks--c li::before{ background:var(--cyan); }
.checks--2{ grid-template-columns:repeat(2,1fr); gap:.85rem 2rem; }

/* Lista de cruces (lo que NO es) */
.crosses li{ display:flex; gap:.85rem; align-items:flex-start; color:var(--muted); }
.crosses li::before{
  content:"✕"; color:var(--magenta); font-weight:800; flex:none; line-height:1.6;
}

/* Lista de “dolor” — frases del usuario */
.pains{ display:grid; gap:.7rem; }
.pains li{
  position:relative; padding:.85em 1.2em .85em 2.6em;
  background:rgba(255,255,255,.035);
  border-left:3px solid var(--magenta);
  font-style:italic; color:#D2D2DC;
  transition:background .3s ease, transform .3s var(--ease), border-color .3s ease;
}
.pains li::before{
  content:"“"; position:absolute; left:.7em; top:.28em;
  font-family:var(--f-display); font-size:1.8em; color:var(--magenta); line-height:1;
}
.pains li:hover{ background:rgba(255,0,168,.08); transform:translateX(6px); border-color:var(--yellow); }
/* Variante compacta para el héroe */
.pains--tight{ gap:.3rem; }
.pains--tight li{
  padding:.3em 0 .3em 1.9em; background:none; border-left:0;
  font-size:var(--t-sm); color:#B9B9C6;
}
.pains--tight li::before{ font-size:1.5em; left:.15em; top:.1em; }
.pains--tight li:hover{ background:none; color:var(--white); }

/* ---------- 14. ACORDEÓN ---------- */
.accordion{ border-top:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc__head{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem;
  padding:1.4em 0; text-align:left;
  font-size:var(--t-lg); font-weight:600; line-height:1.35;
  transition:color .25s ease;
}
.acc__head:hover{ color:var(--yellow); }
.acc__icon{
  flex:none; width:26px; height:26px; margin-top:.24em; position:relative;
}
.acc__icon::before,.acc__icon::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--yellow);
  transform:translate(-50%,-50%); transition:transform .4s var(--ease), background .25s ease;
}
.acc__icon::before{ width:16px; height:2.5px; }
.acc__icon::after{ width:2.5px; height:16px; }
.acc.is-open .acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.acc.is-open .acc__head{ color:var(--yellow); }
/* La animación va con la altura en píxeles, que la calcula el JS.
   El truco de grid-template-rows 0fr->1fr dejaba el panel a 0px en
   algunos navegadores y la respuesta no llegaba a verse nunca. */
.acc__panel{
  height:0; overflow:hidden;
  transition:height .42s var(--ease);
}
.acc__panel > div{ padding-top:.1rem; }
.acc__panel p{ padding-bottom:1.6em; color:var(--muted); max-width:68ch; }

/* ---------- 15. FORMULARIOS ---------- */
.field{ position:relative; display:block; }
.field + .field{ margin-top:1.15rem; }
.field__label{
  display:block; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.5rem;
}
.input,.textarea,.select{
  width:100%; padding:.95em 1.1em;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--line); border-radius:var(--radius);
  color:var(--white); font-size:var(--t-base);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.input::placeholder,.textarea::placeholder{ color:var(--grey-2); }
.input:focus,.textarea:focus,.select:focus{
  outline:none; border-color:var(--yellow); background:rgba(255,242,0,.04);
  box-shadow:0 0 0 3px rgba(255,242,0,.14);
}
.textarea{ min-height:150px; resize:vertical; }
.select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23FFF200' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center;
  padding-right:3em;
}
.select option{ background:var(--ink-2); color:var(--white); }
.check{
  display:flex; gap:.8rem; align-items:flex-start; cursor:pointer;
  font-size:var(--t-sm); color:var(--muted); line-height:1.55;
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:none; width:22px; height:22px; margin-top:.14em;
  border:2px solid var(--line); border-radius:3px; position:relative;
  transition:all .25s ease;
}
.check__box::after{
  content:""; position:absolute; inset:3px;
  background:var(--ink);
  clip-path:polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 86% 8%, 38% 71%);
  transform:scale(0); transition:transform .25s var(--ease-out-back);
}
.check input:checked + .check__box{ background:var(--yellow); border-color:var(--yellow); }
.check input:checked + .check__box::after{ transform:scale(1); }
.check input:focus-visible + .check__box{ box-shadow:0 0 0 3px rgba(0,229,255,.5); }

.form-note{ font-size:var(--t-xs); color:var(--grey-2); }
.form-status{
  margin-top:1rem; padding:.9em 1.1em; border-radius:var(--radius);
  font-size:var(--t-sm); font-weight:600;
  background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.4); color:var(--cyan);
  display:none;
}
.form-status.is-visible{ display:block; animation:fadeUp .4s var(--ease); }

/* Newsletter inline */
.news-form{ display:flex; gap:.7rem; flex-wrap:wrap; }
.news-form .input{ flex:1 1 240px; }

/* ---------- 16. INTERACTIVOS ---------- */
/* Calculadora 50/30/20 */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.4rem); align-items:center; }
.calc__slider{ width:100%; -webkit-appearance:none; appearance:none; height:4px; background:var(--line); border-radius:99px; cursor:pointer; }
.calc__slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--yellow); border:3px solid var(--ink);
  box-shadow:0 0 0 2px var(--yellow), var(--glow-y); cursor:grab;
}
.calc__slider::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--yellow); border:3px solid var(--ink);
  box-shadow:0 0 0 2px var(--yellow); cursor:grab;
}
.calc__amount{
  font-family:var(--f-display); font-size:clamp(2.6rem,7vw,4.4rem); line-height:1;
  color:var(--yellow); text-shadow:var(--glow-y);
}
.calc__bars{ display:grid; gap:1.1rem; }
.calc__bar{ display:grid; gap:.45rem; }
.calc__bar-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.calc__bar-name{ font-size:var(--t-sm); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.calc__bar-val{ font-family:var(--f-display); font-size:var(--t-xl); }
.calc__bar-track{ height:14px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden; }
.calc__bar-fill{
  height:100%; border-radius:99px; width:0;
  transition:width .7s var(--ease);
}
.calc__bar--need .calc__bar-fill{ background:linear-gradient(90deg,var(--cyan),#5CF2FF); box-shadow:var(--glow-c); }
.calc__bar--want .calc__bar-fill{ background:linear-gradient(90deg,var(--magenta),#FF6BCB); box-shadow:var(--glow-m); }
.calc__bar--save .calc__bar-fill{ background:linear-gradient(90deg,var(--yellow),#FFF98A); box-shadow:var(--glow-y); }
.calc__bar--need .calc__bar-val{ color:var(--cyan); }
.calc__bar--want .calc__bar-val{ color:var(--magenta); }
.calc__bar--save .calc__bar-val{ color:var(--yellow); }

/* Test / diagnóstico */
.quiz{ position:relative; min-height:330px; }
.quiz__step{ display:none; animation:fadeUp .45s var(--ease); }
.quiz__step.is-active{ display:block; }
.quiz__progress{ display:flex; gap:.4rem; margin-bottom:2rem; }
.quiz__dot{ height:4px; flex:1; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
.quiz__dot.is-done{ background:var(--yellow); box-shadow:var(--glow-y); }
.quiz__q{ font-size:var(--t-2xl); font-weight:700; line-height:1.2; margin-bottom:1.6rem; }
.quiz__opts{ display:grid; gap:.7rem; }
.quiz__opt{
  width:100%; text-align:left; padding:1.05em 1.3em;
  border:1.5px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  font-size:var(--t-base); line-height:1.4;
  display:flex; align-items:center; gap:.9rem;
  transition:all .28s var(--ease);
}
.quiz__opt::before{
  content:""; flex:none; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--grey-2); transition:all .25s ease;
}
.quiz__opt:hover{ border-color:var(--yellow); background:rgba(255,242,0,.07); transform:translateX(5px); }
.quiz__opt:hover::before{ border-color:var(--yellow); background:var(--yellow); box-shadow:var(--glow-y); }
.quiz__result{ display:none; animation:fadeUp .5s var(--ease); }
.quiz__result.is-active{ display:block; }
.quiz__score{
  font-family:var(--f-display); font-size:clamp(3.4rem,10vw,6rem); line-height:1;
  color:var(--yellow); text-shadow:var(--glow-y);
}

/* Contadores */
.stat{ text-align:center; }
.stat__num{
  font-family:var(--f-display); font-size:clamp(2.6rem,6vw,4.6rem); line-height:1;
  color:var(--yellow); text-shadow:var(--glow-y);
}
.stat__label{
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:.5rem;
}

/* Cuenta atrás */
.countdown{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.countdown__unit{
  min-width:78px; padding:.8rem .6rem;
  background:rgba(255,255,255,.05); border:1.5px solid var(--line); border-radius:var(--radius);
  text-align:center;
}
.countdown__val{ font-family:var(--f-display); font-size:clamp(1.7rem,4vw,2.5rem); line-height:1; color:var(--yellow); }
.countdown__lab{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-2); margin-top:.35rem; }

/* Barra fija de preventa */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:var(--yellow); color:#000;
  border-top:3px solid #000;
  padding:.85rem var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap;
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.sticky-bar.is-visible{ transform:none; }
.sticky-bar__text{ font-weight:700; font-size:var(--t-sm); }
.sticky-bar__close{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:1.2rem; line-height:1; opacity:.55; }
.sticky-bar__close:hover{ opacity:1; }

/* ---------- 17. MÓDULOS DEL CURSO ---------- */
.module{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.5em 0; border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.module:hover{ padding-left:1rem; }
.module__n{
  font-family:var(--f-display); font-size:var(--t-xl); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--magenta);
  min-width:2.4em; transition:color .3s ease;
}
.module:hover .module__n{ color:var(--magenta); -webkit-text-stroke-color:var(--magenta); }
.module__t{ font-size:var(--t-lg); font-weight:700; line-height:1.3; }
.module__d{ color:var(--muted); font-size:var(--t-sm); margin-top:.35rem; max-width:62ch; }

/* ---------- 18. PRECIO ---------- */
.price{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.price__old{
  font-family:var(--f-display); font-size:var(--t-2xl); color:var(--grey-2);
  position:relative;
}
.price__old::after{
  content:""; position:absolute; left:-6%; right:-6%; top:52%; height:3px;
  background:var(--magenta); transform:rotate(-8deg);
}
.price__now{
  font-family:var(--f-display); font-size:clamp(3rem,8vw,5.4rem); line-height:1;
  color:var(--yellow); text-shadow:var(--glow-y);
}
.price__note{ font-size:var(--t-sm); color:var(--muted); }

/* ---------- 19. BLOG ---------- */
.post-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--ink-2);
  transition:border-color .35s ease, transform .4s var(--ease);
}
.post-card:hover{ border-color:var(--yellow); transform:translateY(-6px); }
.post-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-3); }
.post-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.post-card:hover .post-card__media img{ transform:scale(1.07); }
.post-card__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-display); font-size:clamp(2rem,5vw,3.2rem);
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.16);
}
.post-card__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--yellow); color:#000;
  font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.4em .85em; border-radius:99px;
}
.post-card__body{ padding:1.3rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.post-card__title{ font-size:var(--t-lg); font-weight:700; line-height:1.3; }
.post-card:hover .post-card__title{ color:var(--yellow); }
.post-card__meta{
  display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap;
  font-size:var(--t-xs); color:var(--grey-2); margin-top:auto; padding-top:.8rem;
  border-top:1px solid var(--line);
}
.post-card__meta span{ display:inline-flex; align-items:center; gap:.35em; }
.post-card.is-hidden{ display:none; }

.filters{ display:flex; gap:.55rem; flex-wrap:wrap; }
.filter{
  padding:.5em 1.1em; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid var(--line); border-radius:99px; color:var(--muted);
  transition:all .25s ease;
}
.filter:hover{ border-color:var(--white); color:var(--white); }
.filter.is-active{ background:var(--yellow); border-color:var(--yellow); color:#000; }

/* Artículo */
.article-body{ max-width:70ch; margin-inline:auto; font-size:1.06rem; line-height:1.85; color:#D8D8E0; }
.article-body > * + *{ margin-top:1.3em; }
.article-body h2{ font-size:var(--t-2xl); color:var(--white); margin-top:2.2em; line-height:1.2; }
.article-body h3{ font-size:var(--t-xl); color:var(--yellow); margin-top:1.8em; }
.article-body strong{ color:var(--white); font-weight:600; }
.article-body a{ color:var(--cyan); border-bottom:1px solid rgba(0,229,255,.4); }
.article-body a:hover{ border-color:var(--cyan); }
.article-body ul{ display:grid; gap:.6em; padding-left:0; }
.article-body ul li{ position:relative; padding-left:1.5em; }
.article-body ul li::before{ content:"→"; position:absolute; left:0; color:var(--magenta); font-weight:700; }
.article-body blockquote{
  border-left:4px solid var(--yellow); padding:.4em 0 .4em 1.5em;
  font-size:var(--t-lg); font-style:italic; color:var(--white);
}
/* Nota al margen. Sin recuadro de color: sólo una regla fina a la
   izquierda y la etiqueta en color. Destaca igual y no rompe la página. */
.callout{
  position:relative;
  border:0; background:none; border-radius:0;
  padding:.15em 0 .15em 1.5rem;
}
.callout::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em;
  width:2px; border-radius:2px; background:var(--magenta);
}
.callout__title{
  font-size:var(--t-xs); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--magenta); margin-bottom:.5em;
}
.callout--y::before{ background:var(--yellow); }
.callout--y .callout__title{ color:var(--yellow); }
.callout--c::before{ background:var(--cyan); }
.callout--c .callout__title{ color:var(--cyan); }
@media (max-width:560px){ .callout{ padding-left:1.1rem; } }

.toc{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03); padding:1.4rem 1.5rem;
}
.toc__title{ font-size:var(--t-xs); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); margin-bottom:.9rem; }
.toc ol{ counter-reset:t; display:grid; gap:.55rem; }
.toc li{ counter-increment:t; }
.toc a{ display:flex; gap:.7rem; font-size:var(--t-sm); color:var(--muted); transition:color .2s ease; }
.toc a::before{ content:counter(t,decimal-leading-zero); color:var(--magenta); font-weight:700; flex:none; }
.toc a:hover{ color:var(--white); }

.share{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.share__btn{
  width:42px; height:42px; display:grid; place-items:center;
  border:1.5px solid var(--line); border-radius:50%;
  transition:all .25s var(--ease-out-back);
}
.share__btn:hover{ border-color:var(--yellow); color:var(--yellow); transform:translateY(-3px) scale(1.06); }

/* ---------- 20. TESTIMONIOS ---------- */

/* ---------- 21. PIE DE PÁGINA ---------- */
.footer{ position:relative; overflow:hidden; background:var(--ink-2); border-top:1px solid var(--line); }
.footer__top{ padding-block:var(--sec) var(--sp-8); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:var(--sp-6); }
.footer__title{
  font-size:var(--t-xs); font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:1.1rem;
}
.footer__list{ display:grid; gap:.6rem; }
.footer__list a{ font-size:var(--t-sm); color:var(--muted); transition:color .2s ease, padding-left .25s ease; }
.footer__list a:hover{ color:var(--yellow); padding-left:5px; }
.footer__logo img{ height:52px; width:auto; }
.footer__bottom{
  border-top:1px solid var(--line); padding-block:1.5rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:var(--t-xs); color:var(--grey-2);
}
.footer__brand-line{
  font-family:var(--f-display); font-size:clamp(2rem,7.5vw,6.4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.13);
  text-align:center; padding-block:2rem 0; user-select:none;
  white-space:nowrap;
}
.socials{ display:flex; gap:.5rem; flex-wrap:wrap; }
.social{
  width:40px; height:40px; display:grid; place-items:center;
  border:1.5px solid var(--line); border-radius:50%; color:var(--muted);
  transition:all .28s var(--ease-out-back);
}
.social:hover{ border-color:var(--yellow); color:var(--yellow); transform:translateY(-4px) rotate(-6deg); }

/* ---------- 22. CURSOR PERSONALIZADO ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid rgba(255,242,0,.8);
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s ease, border-color .3s ease, opacity .3s ease;
  mix-blend-mode:difference;
  opacity:0;
}
.cursor.is-active{ opacity:1; }
.cursor.is-hover{ width:56px; height:56px; background:rgba(255,242,0,.22); border-color:var(--yellow); }
.cursor-dot{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:5px; height:5px; border-radius:50%; background:var(--yellow);
  transform:translate(-50%,-50%); opacity:0;
  box-shadow:var(--glow-y);
}
.cursor-dot.is-active{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none; } }

/* ---------- 23. REVELADO POR SCROLL ---------- */
.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.js .reveal--l{ transform:translateX(-40px); }
.js .reveal--r{ transform:translateX(40px); }
.js .reveal--s{ transform:scale(.94); }
.reveal--l.is-in,.reveal--r.is-in,.reveal--s.is-in{ transform:none; }
[data-delay="1"]{ transition-delay:.09s } [data-delay="2"]{ transition-delay:.18s }
[data-delay="3"]{ transition-delay:.27s } [data-delay="4"]{ transition-delay:.36s }
[data-delay="5"]{ transition-delay:.45s } [data-delay="6"]{ transition-delay:.54s }

/* Texto que se revela palabra a palabra */
.js .word{ display:inline-block; opacity:0; transform:translateY(.5em) rotate(3deg); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.is-in .word{ opacity:1; transform:none; }

/* ---------- 24. BANNER DE COOKIES ---------- */
.cookies{
  position:fixed; left:var(--gutter); bottom:var(--gutter); z-index:200;
  max-width:420px; padding:1.4rem 1.5rem;
  background:var(--ink-2); border:2px solid var(--yellow);
  box-shadow:8px 8px 0 rgba(255,0,168,.5), 0 20px 60px rgba(0,0,0,.7);
  border-radius:var(--radius);
  transform:translateY(calc(100% + 40px)); opacity:0;
  transition:transform .6s var(--ease), opacity .4s ease;
}
.cookies.is-visible{ transform:none; opacity:1; }
.cookies__title{ font-family:var(--f-display); font-size:var(--t-xl); text-transform:uppercase; margin-bottom:.5rem; }
.cookies__text{ font-size:var(--t-xs); color:var(--muted); line-height:1.6; }
.cookies__actions{ display:flex; gap:.6rem; margin-top:1.1rem; flex-wrap:wrap; }

/* ---------- 25. UTILIDADES ---------- */
.rel{ position:relative; z-index:2; }
.of-hidden{ overflow:hidden; }
.divider{ height:1px; background:var(--line); border:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.tilt-l{ transform:rotate(-1.5deg); }
.tilt-r{ transform:rotate(1.5deg); }
.max-60{ max-width:60ch; } .max-52{ max-width:52ch; } .max-70{ max-width:70ch; }
.noscroll{ overflow:hidden; }

/* Cinta de precio/etiqueta en esquina */
.ribbon{
  position:absolute; top:18px; right:-42px; z-index:3;
  background:var(--magenta); color:#000;
  font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:.45em 3.4em; transform:rotate(38deg);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.ribbon--y{ background:var(--yellow); color:#000; }
.ribbon--c{ background:var(--cyan); color:#000; }

/* ---------- 26. RESPONSIVE ---------- */
@media (max-width:1100px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:var(--sp-6); }
}
@media (max-width:1024px){
  :root{ --nav-h:64px; }
  .nav__menu{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 70px); }
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .hero__media{ order:-1; max-width:420px; margin-inline:auto; }
  .calc{ grid-template-columns:1fr; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .scroll-cue{ display:none; }
}
@media (max-width:760px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .checks--2{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ justify-content:center; text-align:center; }
  .cookies{ left:12px; right:12px; bottom:12px; max-width:none; }
  .marquee{ transform:rotate(-1.2deg) scale(1.06); }
  .module{ grid-template-columns:1fr; gap:.5rem; }
  .price__now{ font-size:3.2rem; }
}
/* (Los ajustes de <=520px se han unificado en la sección 33) */

/* ---------- 27. ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .word{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; }
  .hero__fade{ opacity:1 !important; }
  .marquee__track{ animation:none !important; }
}

/* Impresión */
@media print{
  .nav,.mobile-menu,.cookies,.sticky-bar,.cursor,.cursor-dot,.marquee{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ============================================================
   AMPLIACIÓN — BLOG (blog.html / articulo.html)
   Componentes añadidos para el blog. No se toca nada de arriba;
   todo lo de aquí abajo es nuevo y reutiliza los tokens y el
   resto del sistema (tarjetas, botones, callouts, etc).
   ============================================================ */

/* ---------- 28. BLOG · DESTACADOS ----------
   Última publicación en grande (modificador de .post-card) +
   lista compacta de "más leídas" para la cabecera del blog. */
.post-card--feature{ flex-direction:row; }
.post-card--feature .post-card__media{ aspect-ratio:auto; width:44%; flex:none; }
.post-card--feature .post-card__body{ padding:clamp(1.6rem,3vw,2.4rem); gap:1.1rem; }
.post-card--feature .post-card__title{ font-size:var(--t-2xl); line-height:1.15; }
.post-card--feature .post-card__excerpt{ color:var(--muted); font-size:var(--t-base); line-height:1.75; }

.post-mini-list{ display:grid; gap:1rem; }
.post-mini{
  display:flex; gap:1rem; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ink-2); padding:.8rem;
  transition:border-color .3s ease, transform .3s var(--ease);
}
.post-mini:hover{ border-color:var(--yellow); transform:translateX(4px); }
.post-mini__rank{
  flex:none; width:1.5em; text-align:center;
  font-family:var(--f-display); font-size:var(--t-xl); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--magenta);
}
.post-mini__ph{
  flex:none; width:60px; height:60px; border-radius:var(--radius);
  display:grid; place-items:center; background:var(--ink-3);
  font-family:var(--f-display); font-size:1rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.2);
  text-align:center; overflow:hidden;
}
.post-mini__body{ display:grid; gap:.35rem; min-width:0; }
.post-mini__title{ font-size:var(--t-sm); font-weight:700; line-height:1.35; }
.post-mini:hover .post-mini__title{ color:var(--yellow); }

@media (max-width:760px){
  .post-card--feature{ flex-direction:column; }
  .post-card--feature .post-card__media{ width:100%; aspect-ratio:16/10; }
}

/* ---------- 29. ESTADÍSTICAS DE PUBLICACIÓN ----------
   Vistas · comentarios · me gusta, usado en post-card, post-feature
   y post-mini. Valores de ejemplo: ver comentario en el HTML. */

/* ---------- 30. PORTADA DE ARTÍCULO ----------
   Sustituye a una foto de cabecera (no hay fotografías de artículo
   en el proyecto): bloque con tipografía display a modo de "foto". */
.article-cover{
  position:relative; width:100%; aspect-ratio:21/9; min-height:220px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  display:grid; place-items:center; overflow:hidden;
}
.article-cover__ph{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,6.5rem); line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.2);
  text-align:center; padding-inline:1rem;
}

/* Figura / "foto" intercalada dentro del cuerpo del artículo */
.article-figure{ max-width:64ch; margin-inline:auto; }
.article-figure__ph{
  aspect-ratio:16/9;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ink-2);
  display:grid; place-items:center;
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(2rem,6vw,3.4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.2);
}
.article-figure figcaption{
  margin-top:.7rem; font-size:var(--t-xs); color:var(--grey-2); text-align:center;
}

/* ---------- 31. FICHA DE AUTORA ---------- */
.author-card{
  display:flex; gap:1.1rem; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03); padding:1.2rem 1.4rem;
}
.author-card__ph{
  flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden;
  border:2px solid var(--yellow);
}
.author-card__ph img{ width:100%; height:100%; object-fit:cover; }
.author-card__name{ font-weight:700; font-size:var(--t-base); }
.author-card__role{
  font-size:var(--t-xs); color:var(--grey-2);
  letter-spacing:.06em; text-transform:uppercase; margin-top:.15rem;
}

/* ============================================================
   28. BLOQUE AMARILLO A SANGRE  (referencia "Heart-Centered Leader")
   Fondo amarillo completo, titular en bloques sólidos girados
   y retrato recortado con halo BLANCO (sobre claro, el neón
   amarillo no se vería).
   ============================================================ */
.slab-band{
  position:relative; overflow:hidden;
  background:var(--yellow); color:#000;
  padding-block:clamp(3.5rem,7vw,6rem);
  isolation:isolate;
}
.slab-band--m{ background:var(--magenta-deep); color:#fff; }
.slab-band--c{ background:var(--cyan); color:#000; }
.slab-band__grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
.slab-band .lead,
.slab-band .muted{ color:rgba(0,0,0,.72); }
.slab-band--m .lead,
.slab-band--m .muted{ color:rgba(255,255,255,.8); }

/* Bloque sólido detrás de una línea del titular */
.slab{
  display:inline-block;
  padding:.04em .3em .12em;
  background:#fff; color:#000;
  transform:rotate(-1.7deg);
  box-shadow:6px 6px 0 rgba(0,0,0,.14);
}
.slab--dark{ background:#000; color:var(--yellow); transform:rotate(1.1deg); box-shadow:6px 6px 0 rgba(0,0,0,.18); }
.slab--white{ background:#fff; color:#000; }
.slab--y{ background:var(--yellow); color:#000; }
.slab--m{ background:var(--magenta); color:#fff; }
/* Cuando hay dos slabs seguidos, el segundo se solapa un poco */
.slab-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:.14em; }
.slab-stack .slab:nth-child(2){ margin-left:1.6em; }

/* Subtítulo a rotulador con separadores */
.marker-line{
  font-family:var(--f-hand);
  font-size:clamp(.85rem,1.5vw,1.2rem);
  letter-spacing:.02em; line-height:1.4;
  display:flex; flex-wrap:wrap; gap:.4em .9em; align-items:center;
}
.marker-line span{ display:inline-flex; align-items:center; gap:.9em; }
.marker-line span:not(:last-child)::after{ content:"•"; font-family:var(--f-body); opacity:.7; }

/* Retrato sobre fondo claro: el halo pasa a blanco */
.cutout--w::before{
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.35) 58%, transparent 78%);
}
.cutout--w img{
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 7px #fff)
    drop-shadow(0 0 20px rgba(255,255,255,.95))
    drop-shadow(0 0 52px rgba(255,255,255,.75));
}

/* ============================================================
   29. PALABRA GIGANTE + ANOTACIONES A MANO
   (referencia "Uncomfortable Action")

   La clave del efecto es el CORTE: tras varias secciones negras
   aparece de golpe un bloque BLANCO con la palabra en amarillo a
   sangre y las anotaciones en negro encima. Rompe la monotonía.

   Las formas dibujadas van con mask-image + currentColor, así que
   el trazo toma el color del texto: negro sobre fondo claro y
   blanco sobre fondo oscuro, sin duplicar cada SVG.
   ============================================================ */
.bleed{ position:relative; overflow:hidden; padding-block:clamp(3rem,6vw,5rem); }
.bleed__stage{ position:relative; }

/* --- El corte: bloque claro --- */
.bleed--light{
  padding-block:clamp(4rem,8vw,7rem);
}
/* Los tokens se invierten en la regla común con .light (sección 36):
   así todo lo que usa var(--fg) o var(--bg) se adapta solo. */
.bleed--light .ann{ color:var(--fg); }
.bleed--light .bleed__word{ color:var(--yellow-pure); }

.bleed__word{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(3.6rem,16.5vw,15rem);
  line-height:.9; letter-spacing:-.012em;
  color:var(--yellow);
  white-space:nowrap; user-select:none;
  margin-left:-.045em;                 /* sangra por la izquierda */
}
.bleed__word--out{ color:transparent; -webkit-text-stroke:2px var(--yellow); }
.bleed__word--m{ color:var(--magenta); }
.bleed__word--indent{ margin-left:.05em; }

/* --- Capa de anotaciones --- */
.ann-layer{ position:absolute; inset:0; pointer-events:none; }
.ann{
  position:absolute; pointer-events:auto;
  font-family:var(--f-hand);
  color:var(--white);
  line-height:1.26;
  text-transform:uppercase;
  font-size:clamp(.95rem,1.75vw,1.7rem);
  letter-spacing:.01em;
}
.ann--ink{ color:var(--ink); }

/* Óvalo dibujado a mano */
.ann-circle{ position:relative; display:inline-block; padding:.8em 1.6em; }
.ann-circle::after{
  content:""; position:absolute; inset:-.15em -.4em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 140' preserveAspectRatio='none'%3E%3Cpath d='M196 8 C 82 -2, 14 30, 10 70 C 6 112, 118 134, 208 130 C 300 126, 352 96, 348 62 C 344 26, 268 6, 168 9' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 140' preserveAspectRatio='none'%3E%3Cpath d='M196 8 C 82 -2, 14 30, 10 70 C 6 112, 118 134, 208 130 C 300 126, 352 96, 348 62 C 344 26, 268 6, 168 9' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* Recuadro trazado a mano, con doble línea abajo */
.ann-box{
  position:relative; display:inline-block;
  padding:1.2em 1.45em; max-width:24ch;
}
.ann-box::after{
  content:""; position:absolute; inset:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' preserveAspectRatio='none'%3E%3Cpath d='M6 10 L392 4 L396 228 L10 234 Z' fill='none' stroke='%23000' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M30 246 L400 240' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' preserveAspectRatio='none'%3E%3Cpath d='M6 10 L392 4 L396 228 L10 234 Z' fill='none' stroke='%23000' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M30 246 L400 240' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* Flecha */
.ann-arrow{
  display:inline-block; width:clamp(52px,5.4vw,96px); height:1em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath d='M4 34 C 34 30, 66 22, 108 14' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M84 4 L112 13 L88 30' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath d='M4 34 C 34 30, 66 22, 108 14' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M84 4 L112 13 L88 30' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  vertical-align:middle; flex:none;
}

/* Trazo grueso bajo una frase. Va como fondo del texto, así que
   aquí sí hacen falta las dos versiones de color. */
.ann-stroke{
  display:inline; padding-bottom:.24em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C 70 3, 150 13, 296 6' fill='none' stroke='%23FFFFFF' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:0 100%;
  background-size:100% .32em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.ann--ink .ann-stroke,
.bleed--light .ann-stroke,
.ann-stroke--ink{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C 70 3, 150 13, 296 6' fill='none' stroke='%23000000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Frase manuscrita en cursiva */
.script{
  font-family:"Caveat", var(--f-hand), cursive;
  text-transform:none; letter-spacing:0;
  font-size:clamp(1.2rem,2.6vw,2.2rem);
  font-weight:600; line-height:1.2;
}

/* Entrada escalonada */
.js .ann{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.is-in .ann,
.ann.is-in{ opacity:1; transform:none; }
.ann:nth-of-type(2){ transition-delay:.12s }
.ann:nth-of-type(3){ transition-delay:.24s }
.ann:nth-of-type(4){ transition-delay:.36s }
.ann:nth-of-type(5){ transition-delay:.48s }

/* --- Responsive: por debajo de 900px las anotaciones dejan de
   estar superpuestas y fluyen en columna bajo el titular. --- */
@media (max-width:900px){
  .slab-band__grid{ grid-template-columns:1fr; }
  .slab-band__media{ order:-1; max-width:330px; margin-inline:auto; }
  .slab-stack .slab:nth-child(2){ margin-left:.5em; }

  .ann-layer{ position:static; display:grid; gap:1.7rem; margin-top:2.5rem; }
  .ann{ position:static !important; width:auto !important; max-width:100%; font-size:1.05rem; transform:none !important; }
  .ann-box{ max-width:none; }
  .bleed__word{ font-size:clamp(2.9rem,15.5vw,6rem); }
}

/* ============================================================
   30. PANTALLA DE CARGA
   Se muestra una vez por sesión. El overlay se retira con un
   barrido hacia arriba. Importante: la animación de seguridad
   (plFallback) lo oculta a los 4 s aunque el JS no llegue a
   ejecutarse, para no dejar nunca el sitio bloqueado.
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:grid; place-items:center;
  clip-path:inset(0 0 0 0);
  animation:plFallback .3s linear 4s forwards;
}
@keyframes plFallback{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

.preloader.is-out{
  animation:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s cubic-bezier(.76,0,.24,1);
}
.preloader.is-done{ display:none; }
body.is-loading{ overflow:hidden; }

.preloader__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
  padding-inline:var(--gutter); text-align:center;
  transition:opacity .35s ease, transform .5s var(--ease);
}
.preloader.is-out .preloader__inner{ opacity:0; transform:translateY(-22px); }

.preloader__logo{
  width:clamp(180px,26vw,280px); height:auto;
  opacity:0; animation:plLogo .7s var(--ease) .1s forwards;
}
@keyframes plLogo{ from{ opacity:0; transform:translateY(16px) rotate(-3deg) } to{ opacity:1; transform:none } }

.preloader__count{
  font-family:var(--f-display);
  font-size:clamp(3.4rem,11vw,7.5rem); line-height:1;
  color:var(--yellow); text-shadow:var(--glow-y);
  font-variant-numeric:tabular-nums;
}
.preloader__bar{
  width:min(300px,62vw); height:3px;
  background:rgba(255,255,255,.14); border-radius:99px; overflow:hidden;
}
.preloader__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--yellow),var(--magenta),var(--cyan));
  box-shadow:0 0 14px rgba(255,242,0,.7);
}
.preloader__word{
  font-size:var(--t-xs); letter-spacing:.34em; text-transform:uppercase;
  color:var(--grey-2);
}
/* Rayo de fondo del preloader */
.preloader__bolt{
  position:absolute; width:min(60vw,520px); opacity:.16; z-index:1;
  color:var(--magenta);
}

@media (prefers-reduced-motion:reduce){
  .preloader{ animation:plFallback .01s linear .2s forwards; }
  .preloader__logo{ opacity:1; animation:none; }
}

/* ============================================================
   31. VÍDEO CON REPRODUCCIÓN A UN CLIC
   El póster es un bloque de marca; al pulsar se abre el modal.
   Si data-video está vacío todavía, el modal avisa de que el
   vídeo está en camino en vez de fingir que se reproduce.
   ============================================================ */
.video{
  position:relative; width:100%; aspect-ratio:16/9;
  border:2px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; display:block;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,0,168,.22), transparent 55%),
    radial-gradient(120% 120% at 90% 100%, rgba(0,229,255,.2), transparent 55%),
    var(--ink-2);
  transition:border-color .35s ease, transform .45s var(--ease);
}
.video:hover{ border-color:var(--yellow); transform:translateY(-4px); }
.video__grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 20%,transparent 75%);
}
.video__label{
  position:absolute; left:clamp(1rem,3vw,2rem); top:clamp(1rem,3vw,2rem);
  z-index:2; display:flex; align-items:center; gap:.55rem;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan);
}
.video::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(transparent, rgba(6,6,10,.88));
  pointer-events:none; z-index:1;
}
.video__title{
  position:absolute; left:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  right:clamp(1rem,3vw,2rem); z-index:3;
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.3rem,3.2vw,2.4rem); line-height:.98; color:var(--white);
}
.video__play{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  z-index:3;
  /* Se mide contra su propia caja, no contra el ancho de pantalla: si no,
     en una columna estrecha dentro de un monitor grande el botón salía
     enorme y se comía el título. */
  height:34%; width:auto; aspect-ratio:1;
  max-height:116px; min-height:58px;
  border-radius:50%; background:var(--yellow);
  display:grid; place-items:center;
  box-shadow:0 0 0 0 rgba(255,242,0,.55);
  animation:playPulse 2.6s infinite;
  transition:transform .35s var(--ease-out-back), background .25s ease;
}
.video:hover .video__play{ transform:translate(-50%,-50%) scale(1.09); }
.video__play::after{
  content:""; width:0; height:0; margin-left:.22em;
  border-left:1.5rem solid #000;
  border-top:.95rem solid transparent;
  border-bottom:.95rem solid transparent;
}
@keyframes playPulse{
  70%{ box-shadow:0 0 0 26px rgba(255,242,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,242,0,0); }
}

/* Modal del vídeo */
.modal{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:var(--gutter);
  background:rgba(4,4,8,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__box{
  position:relative; width:min(1000px,100%);
  transform:scale(.96); transition:transform .45s var(--ease);
}
.modal.is-open .modal__box{ transform:none; }
.modal__frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--ink-2); border:2px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:grid; place-items:center;
}
.modal__frame iframe,
.modal__frame video{ width:100%; height:100%; border:0; display:block; }
.modal__soon{ text-align:center; padding:2rem; max-width:46ch; }
.modal__close{
  position:absolute; right:0; top:-3.2rem;
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3);
  display:grid; place-items:center; color:var(--white); font-size:1.3rem; line-height:1;
  transition:all .25s var(--ease-out-back);
}
.modal__close:hover{ background:var(--yellow); color:#000; border-color:var(--yellow); transform:rotate(90deg); }

/* ============================================================
   32. CRÉDITO DE AUTORÍA (pie de página)
   ============================================================ */
.credit{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--ink);
  padding-block:clamp(1.6rem,3vw,2.4rem);
}
/* Una línea discreta: nombre + Instagram en horizontal, y el
   copyright debajo. Firma visible, sin comerse el pie. */
.credit .wrap{
  display:flex; align-items:center; justify-content:center;
  gap:.7rem 1.1rem; flex-wrap:wrap; text-align:center;
}
.credit__label{
  font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey-2);
}
.credit__name{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.05rem,2.2vw,1.5rem); line-height:1;
  color:var(--white); letter-spacing:.01em;
}
.credit__ig{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em 1em;
  font-size:.8rem; font-weight:800; letter-spacing:.02em;
  color:#000; background:var(--yellow);
  border-radius:var(--radius-pill);
  transition:transform .25s var(--ease-out-back), box-shadow .25s var(--ease);
}
.credit__ig:hover{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(255,242,0,.3); }
.credit__ig svg{ width:1.05em; height:1.05em; flex:none; }
.credit__copy{
  flex:1 0 100%;
  font-size:.75rem; color:var(--grey-2);
  margin-top:.2rem;
}

/* ============================================================
   33. AJUSTES PARA MÓVIL Y PANTALLAS TÁCTILES
   Auditoría en 390px: no había desbordes, pero sí 36 elementos
   pulsables por debajo de 44px y 30 textos por debajo de 13px.
   Aquí se corrigen ambas cosas.
   ============================================================ */

/* --- Suelo tipográfico ---
   Las escalas fluidas bajaban hasta 11,7px en etiquetas y 12,2px
   en botones: demasiado pequeño para leer en un móvil. */
@media (max-width:760px){
  :root{
    --t-xs:   .8rem;    /* antes ~11,7px */
    --t-sm:   .9rem;    /* antes ~13,7px */
    --t-base: 1rem;
    --t-lg:   1.12rem;
  }
  .tiny{ font-size:.8rem; }
  .eyebrow{ letter-spacing:.18em; }   /* menos tracking: cabe mejor */
}

/* --- Objetivos táctiles ---
   Mínimo 48px de alto en todo lo que se pulsa. */
@media (pointer:coarse), (max-width:1024px){
  .btn{
    min-height:48px;
    padding:.9em 1.6em;
    font-size:.85rem;
  }
  .btn--lg{ min-height:54px; padding:1.05em 1.8em; font-size:.95rem; }
  .btn--sm{ min-height:44px; padding:.65em 1.2em; font-size:.82rem; }

  .link-arrow{ padding-block:.7em; }
  .nav__logo{ padding-block:.45rem; }
  .footer__list a{ display:inline-block; padding-block:.45rem; }
  .toc a{ padding-block:.35rem; }

  .social,
  .share__btn{ width:48px; height:48px; }

  .filter{ padding:.72em 1.15em; }
  .acc__head{ padding-block:1.2em; }
  .quiz__opt{ padding:1.15em 1.25em; }
  .tag{ padding:.55em 1.05em; }

  /* El deslizador de la calculadora era una línea de 4px: casi
     imposible de agarrar con el dedo. */
  .calc__slider{ height:8px; }
  .calc__slider::-webkit-slider-thumb{ width:34px; height:34px; }
  .calc__slider::-moz-range-thumb{ width:30px; height:30px; }

  .check__box{ width:26px; height:26px; }
  .check{ padding-block:.35rem; }

  /* 16px en los campos evita que iOS haga zoom al enfocarlos */
  .input,
  .textarea,
  .select{ font-size:16px; padding:.95em 1.05em; }
  .textarea{ min-height:130px; }

  .modal__close{ width:48px; height:48px; }
  .sticky-bar__close{ width:44px; height:44px; right:6px; }
}

/* --- Sustituye el bloque antiguo de <=520px, que empequeñecía
   los botones por debajo del mínimo táctil --- */
@media (max-width:520px){
  .btn{ padding:.9em 1.35em; font-size:.82rem; }
  .btn--lg{ padding:1em 1.5em; font-size:.88rem; }
  .btn--block{ width:100%; }

  /* Los pares de botones pasan a apilarse y ocupar todo el ancho:
     dos botones a media pantalla quedaban estrechísimos. */
  .hero .flex.gap-4 > .btn,
  .flex.gap-4 > .btn{ flex:1 1 100%; }

  .sticky-bar{ padding:.7rem 3rem .7rem .9rem; }
  .sticky-bar__text{ font-size:.78rem; }

  .cookies{ padding:1.15rem 1.2rem; }
  .cookies__actions .btn{ flex:1 1 100%; }
}

/* --- Composición: en pantallas estrechas nada debe ir a dos columnas --- */
@media (max-width:680px){
  .calc__bar-head{ flex-wrap:wrap; gap:.2rem; }
  .post-card__meta{ gap:.7rem; }
  /* En una fila de flex se partía 3+1. En rejilla de 4 queda alineado. */
  .countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
  .countdown__unit{ min-width:0; padding:.7rem .3rem; }
  .price{ gap:.7rem; }
  .quiz__q{ font-size:1.35rem; }
  .module{ padding-block:1.2em; }
  .footer__bottom{ gap:.4rem; }
  .marker-line{ justify-content:center; }
  .slab-band{ text-align:left; }
}

/* --- Titulares: que respiren y no se corten --- */
@media (max-width:520px){
  /* En castellano las mayúsculas acentuadas (MÁS, MOTIVACIÓN, MÉTODO)
     chocaban con la línea de arriba: el interlineado cerrado que luce
     en pantalla grande no vale cuando el titular parte en 3-4 líneas. */
  .display{ line-height:1.04; }
  .h-1{ font-size:clamp(1.9rem,8.6vw,2.7rem); }
  .h-2{ font-size:clamp(1.7rem,7.6vw,2.3rem); }
  .h-mega{ font-size:clamp(2.4rem,12vw,3.6rem); }
  .hero__title{ font-size:clamp(2.1rem,10.5vw,3.2rem); }
  .hero__title .xl{ font-size:1.22em; }
  .hero__title .sm{ font-size:.78em; }
  .price__now{ font-size:2.8rem; }
  .credit__name{ font-size:1.05rem; }
  .video__title{ font-size:1.15rem; }
}

/* --- El cursor y el paralaje no aportan nada en táctil --- */
@media (pointer:coarse){
  [data-parallax]{ transform:none !important; }
}

/* --- Últimos objetivos táctiles pendientes de la auditoría --- */
@media (pointer:coarse), (max-width:1024px){

  /* Menú móvil y listas del pie: el enlace medía 38-39px */
  .mobile-menu__list a{ padding-block:.5rem; }
  .footer__list a{
    display:flex; align-items:center;
    min-height:44px; padding-block:0;
  }

  /* El input del deslizador solo tenía 8px de alto, así que la zona
     que respondía al dedo era esa franja. Le damos 44px de alto real
     y pintamos la pista con ::-slider-track en vez de con el fondo. */
  .calc__slider{
    height:44px;
    background:transparent;
    cursor:pointer;
  }
  .calc__slider::-webkit-slider-runnable-track{
    height:8px; border-radius:99px; background:var(--line);
  }
  .calc__slider::-webkit-slider-thumb{ margin-top:-13px; }
  .calc__slider::-moz-range-track{
    height:8px; border-radius:99px; background:var(--line);
  }

  .credit__ig{ min-height:44px; padding:.7em 1.2em; }
}

/* Los filtros del blog se quedaban en 43px: un pelo por debajo del mínimo */
@media (pointer:coarse), (max-width:1024px){
  .filter{ min-height:44px; display:inline-flex; align-items:center; }
}

/* --- Pantallas muy estrechas (320px) ---
   Los hijos de un grid/flex tienen min-width:auto, así que no bajan
   del ancho de su contenido. El <select> de contacto, con opciones
   largas ("Quiero información sobre coaching financiero"), estiraba
   toda la columna y se salía de la pantalla. */
.grid > *,
.flex > *{ min-width:0; }
.select,
.input,
.textarea{ max-width:100%; }

/* Destacado del blog: entrada grande + lista de más leídas.
   Antes iba con un style inline (grid-template-columns:1.7fr 1fr), que
   ganaba a los media queries y en móvil dejaba la columna derecha tan
   estrecha que las miniaturas se salían de la pantalla. */
.g-feature{ grid-template-columns:1.7fr 1fr; align-items:stretch; }
@media (max-width:860px){
  .g-feature{ grid-template-columns:1fr; }
}

/* Correos y URLs largos: que partan en vez de estirar la caja */
.link-arrow,
.article-body a,
.footer__list a,
.credit__copy{ overflow-wrap:anywhere; }

/* --- Héroe en móvil ---
   La foto va primero (es el gancho), pero a tamaño completo empujaba
   el titular por debajo del pliegue. La acotamos para que el mensaje
   entre en la primera pantalla. */
@media (max-width:620px){
  /* Limitamos también el ALTO: los retratos verticales llegaban a
     495px y empujaban el titular casi fuera de la primera pantalla.
     Con el tope, el mensaje se lee sin tener que bajar. */
  .hero__media{ max-width:270px; }
  .hero__media img,
  .slab-band__media img{ max-height:265px; width:auto; margin-inline:auto; }
  .slab-band__media{ max-width:265px; }
  .hero{ padding-top:calc(var(--nav-h) + 26px); }
  .hero__grid{ gap:1.4rem; }
  /* La raya de la etiqueta ocupaba sitio y forzaba el salto de línea */
  .eyebrow::before{ width:22px; }
  .eyebrow{ letter-spacing:.14em; }
}

/* La cinta diagonal necesita una tarjeta ancha: en móvil el recorte
   del contenedor se comía parte del texto ("-50" sin el "%"). Ahí pasa
   a ser una insignia recta en la esquina, que nunca se corta. */
@media (max-width:620px){
  .ribbon{
    top:10px; right:10px; left:auto;
    transform:none;
    padding:.45em 1em;
    font-size:.75rem;
    border-radius:var(--radius-pill);
    box-shadow:0 2px 10px rgba(0,0,0,.45);
  }
}

/* ============================================================
   34. AULA — reproductor del curso paso a paso
   Lista de lecciones con bloqueo secuencial, ejercicio por
   lección y progreso guardado en el navegador.
   ============================================================ */
.aula{
  display:grid; grid-template-columns:340px 1fr;
  gap:clamp(1.2rem,2.6vw,2.4rem);
  align-items:start;
}

/* --- Barra lateral --- */
.aula__side{
  position:sticky; top:calc(var(--nav-h) + 28px);
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius);
  max-height:calc(100svh - var(--nav-h) - 56px);
  display:flex; flex-direction:column; overflow:hidden;
}
.aula__head{ padding:1.2rem 1.2rem 1rem; border-bottom:1px solid var(--line); }
.aula__list{ overflow-y:auto; padding:.8rem; display:grid; gap:1.2rem; }
.aula__mod-title{
  font-size:var(--t-xs); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow); padding:0 .5rem .5rem;
}

/* --- Progreso --- */
.aula__bar{ height:8px; background:rgba(255,255,255,.09); border-radius:99px; overflow:hidden; }
.aula__bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--yellow),var(--cyan));
  border-radius:99px; transition:width .5s var(--ease);
}
.aula__pct{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-bottom:.6rem;
}
.aula__pct b{ font-family:var(--f-display); font-size:var(--t-xl); color:var(--yellow); }

/* --- Cada lección de la lista --- */
.lesson{
  width:100%; display:grid;
  grid-template-columns:auto 1fr; gap:.8rem; align-items:center;
  padding:.7rem .6rem; border-radius:var(--radius);
  text-align:left; color:var(--muted);
  transition:background .25s ease, color .25s ease;
}
.lesson:hover:not(.is-locked){ background:rgba(255,255,255,.05); color:var(--white); }
.lesson__n{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid var(--line);
  font-size:.78rem; font-weight:800;
  transition:all .3s var(--ease-out-back);
}
.lesson__t{ font-size:var(--t-sm); line-height:1.35; }
.lesson__meta{ font-size:.75rem; color:var(--grey-2); margin-top:.15rem; }

.lesson.is-done{ color:#CFCFD8; }
.lesson.is-done .lesson__n{
  background:var(--yellow); border-color:var(--yellow); color:#000;
}
.lesson.is-done .lesson__n::after{
  content:""; width:13px; height:13px; background:#000;
  clip-path:polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 86% 8%, 38% 71%);
}
.lesson.is-done .lesson__n span{ display:none; }

.lesson.is-current{ background:rgba(255,242,0,.1); color:var(--white); }
.lesson.is-current .lesson__n{ border-color:var(--yellow); color:var(--yellow); }

.lesson.is-locked{ opacity:.42; cursor:not-allowed; }
.lesson.is-locked .lesson__n{ border-style:dashed; }

/* --- Panel principal --- */
.aula__main{ min-width:0; }
.aula__crumb{
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); font-weight:700;
}
.aula__title{ font-size:var(--t-2xl); font-weight:700; line-height:1.2; margin-top:.5rem; }

/* Recursos de la lección */
.res{
  display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;
}
.res__item{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.75em 1.2em; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:rgba(255,255,255,.03);
  font-size:var(--t-sm); font-weight:600;
  transition:all .25s ease;
}
.res__item:hover{ border-color:var(--cyan); color:var(--cyan); }
.res__item svg{ width:1.1em; height:1.1em; flex:none; }
.res__item[data-soon]{ opacity:.6; }

/* --- Ejercicio --- */
.ex{
  border:2px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:clamp(1.2rem,2.6vw,1.9rem);
}
.ex.is-ok{ border-color:var(--cyan); background:rgba(0,229,255,.07); }
.ex.is-ko{ border-color:var(--magenta); background:rgba(255,0,168,.07); }
.ex__label{
  font-size:var(--t-xs); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow);
}
.ex__q{ font-size:var(--t-lg); font-weight:600; line-height:1.4; margin-top:.7rem; }
.ex__opts{ display:grid; gap:.6rem; margin-top:1.2rem; }
.ex__opt{
  width:100%; text-align:left; display:flex; align-items:center; gap:.85rem;
  padding:.95em 1.2em; border-radius:var(--radius);
  border:1.5px solid var(--line); background:rgba(255,255,255,.03);
  font-size:var(--t-base); line-height:1.4;
  transition:all .25s var(--ease);
}
.ex__opt::before{
  content:""; flex:none; width:13px; height:13px; border-radius:50%;
  border:2px solid var(--grey-2); transition:all .25s ease;
}
.ex__opt:hover:not(:disabled){ border-color:var(--yellow); background:rgba(255,242,0,.07); }
.ex__opt.is-ok{ border-color:var(--cyan); background:rgba(0,229,255,.12); color:var(--white); }
.ex__opt.is-ok::before{ border-color:var(--cyan); background:var(--cyan); }
.ex__opt.is-ko{ border-color:var(--magenta); background:rgba(255,0,168,.12); }
.ex__opt.is-ko::before{ border-color:var(--magenta); background:var(--magenta); }
.ex__opt:disabled{ cursor:default; }
.ex__fb{
  margin-top:1.1rem; font-size:var(--t-sm); line-height:1.6;
  color:#D6D6DE; display:none;
}
.ex__fb.is-visible{ display:block; animation:fadeUp .35s var(--ease); }

/* --- Pie del panel: completar y navegar --- */
.aula__foot{
  display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;
  padding-top:1.6rem; margin-top:1.6rem; border-top:1px solid var(--line);
}
.aula__hint{ font-size:var(--t-sm); color:var(--grey-2); }

/* --- Diploma / descarga final --- */
.aula__end{
  display:none; text-align:center;
  border:2px solid var(--yellow); border-radius:var(--radius);
  background:rgba(255,242,0,.06);
  padding:clamp(1.6rem,4vw,3rem);
}
.aula__end.is-visible{ display:block; animation:fadeUp .5s var(--ease); }

@media (max-width:960px){
  .aula{ grid-template-columns:1fr; }
  .aula__side{
    position:static; max-height:none;
    order:2;   /* el vídeo primero, el temario debajo */
  }
  /* Sin scroll interno en móvil: una lista que se desplaza dentro de
     una página que también se desplaza es incómoda con el dedo. Aquí
     el temario va debajo de la lección, así que puede ocupar lo que
     necesite y la página scrollea normal. */
  .aula__list{ max-height:none; overflow:visible; }
  .aula__main{ order:1; }
}

/* ============================================================
   35. ESCALERA DE CURSOS
   Las cinco fichas del catálogo, del gratuito al programa.
   ============================================================ */
.ladder{ display:grid; gap:1.1rem; }
.step{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:clamp(1rem,2.4vw,2rem); align-items:center;
  padding:clamp(1.2rem,2.6vw,1.9rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  overflow:hidden;
  transition:border-color .35s ease, transform .4s var(--ease);
}
.step::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%), rgba(255,242,0,.1), transparent 62%);
  opacity:0; transition:opacity .4s ease;
}
.step:hover{ transform:translateY(-4px); border-color:rgba(255,242,0,.45); }
.step:hover::after{ opacity:1; }

.step__lvl{
  flex:none; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--f-display); font-size:1.5rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.6px var(--grey-2);
  border:1.5px solid var(--line);
  transition:all .35s ease;
}
.step:hover .step__lvl{ -webkit-text-stroke-color:var(--yellow); border-color:var(--yellow); }

.step__body{ min-width:0; }
.step__tag{
  display:inline-block; font-size:.75rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2);
}
.step__title{ font-size:var(--t-xl); font-weight:700; line-height:1.25; margin-top:.25rem; }
.step__desc{ color:var(--muted); font-size:var(--t-sm); line-height:1.6; margin-top:.5rem; max-width:60ch; }
.step__meta{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem;
}

.step__side{ text-align:right; display:grid; gap:.7rem; justify-items:end; }
.step__price{
  font-family:var(--f-display); font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1;
  white-space:nowrap;
}

/* Acentos por nivel */
.step--free{ border-color:rgba(0,229,255,.45); }
.step--free .step__lvl{ -webkit-text-stroke-color:var(--cyan); border-color:rgba(0,229,255,.5); }
.step--free .step__price{ color:var(--cyan); text-shadow:var(--glow-c); }
.step--free:hover{ border-color:var(--cyan); }
.step--free::after{ background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%), rgba(0,229,255,.12), transparent 62%); }

.step--top{
  border-color:rgba(255,242,0,.5);
  background:linear-gradient(160deg, rgba(255,242,0,.09), rgba(255,0,168,.05));
}
.step--top .step__lvl{ -webkit-text-stroke-color:var(--yellow); border-color:var(--yellow); }
.step--top .step__price{ color:var(--yellow); text-shadow:var(--glow-y); }

@media (max-width:820px){
  /* El número iba centrado contra una tarjeta muy alta y quedaba
     flotando solo en mitad del hueco. Se alinea arriba, junto al
     título, que es donde se lee como "paso 1". */
  .step{ grid-template-columns:auto 1fr; row-gap:1.3rem; align-items:start; }
  .step__lvl{ width:48px; height:48px; font-size:1.2rem; margin-top:.15rem; }
  .step__side{
    grid-column:1 / -1; text-align:left;
    display:grid; gap:.9rem; justify-items:stretch;
  }
  .step__price{ font-size:2rem; }
  .step__side .btn{ width:100%; }
  .step__side .tiny{ margin-top:-.5rem; }
}
@media (max-width:520px){
  /* En pantallas muy estrechas el número pasa encima del texto:
     dos columnas dejaban el contenido en una franja de 200px. */
  .step{ grid-template-columns:1fr; }
  .step__lvl{ width:42px; height:42px; font-size:1.05rem; }
}

/* --- Póster de vídeo en móvil ---
   A 16/9 la caja se queda en ~167px de alto y el botón de play se
   comía el título. Le damos proporción 4/3, que da aire, y un velo
   bajo el título para que se lea sobre cualquier fondo. */
@media (max-width:620px){
  /* Proporción 4/3: a 16/9 la caja se quedaba en ~167px y no cabían
     el play y el título. El tamaño del play ya lo resuelve la regla base. */
  .video{ aspect-ratio:4/3; }
  .video__play::after{
    border-left-width:1.15rem;
    border-top-width:.72rem; border-bottom-width:.72rem;
  }
  .video__title{ font-size:clamp(1rem,4.4vw,1.3rem); line-height:1.04; }
}

/* El texto contorneado con traza de 1,5px se emborrona cuando el
   titular baja de ~30px: las letras casi se rellenan. Traza más fina
   en móvil para que el contorno siga leyéndose limpio. */
@media (max-width:620px){
  .outline,
  .outline-y{ -webkit-text-stroke-width:1px; }
  .card__num,
  .module__n,
  .step__lvl{ -webkit-text-stroke-width:1.2px; }
}

/* --- La hamburguesa en móvil ---
   Es la única puerta a las 8 secciones del sitio, así que tiene que
   cantar: borde amarillo y trazos más gruesos. */
@media (max-width:1024px){
  .nav__burger{
    border-color:rgba(255,242,0,.55);
    background:rgba(255,242,0,.08);
  }
  .nav__burger span,
  .nav__burger span::before,
  .nav__burger span::after{
    width:21px; height:2.5px; background:var(--yellow);
  }
  body.menu-open .nav__burger{
    background:var(--yellow); border-color:var(--yellow);
  }
  body.menu-open .nav__burger span::before,
  body.menu-open .nav__burger span::after{ background:#000; }
}

/* ============================================================
   36. TEMA CLARO
   La clienta prefiere el blanco ("le da calma"). En vez de
   duplicar estilos, invertimos los tokens dentro de .light:
   todo lo que ya usa var(--fg), var(--muted) o var(--line)
   se adapta solo.
   ============================================================ */
.light,
.bleed--light{
  --bg:      #FFFFFF;   /* blanco, como pidió la clienta */
  --fg:      #12121A;
  --muted:   #4A4A54;
  --grey-2:  #65656F;
  --line:    #E4E4EA;
  --ink:     #FFFFFF;
  --ink-2:   #F7F7F9;   /* un gris mínimo para separar bloques sin ensuciar */
  --ink-3:   #EFEFF3;
  background:var(--bg);
  color:var(--fg);
}
.light .lead,
.bleed--light .lead{ color:#3A3A46; }
.light .muted,
.bleed--light .muted{ color:var(--muted); }
.light .eyebrow,
.bleed--light .eyebrow{ color:#6F5600; }          /* el amarillo puro no se lee sobre blanco */
.light .eyebrow--m,
.bleed--light .eyebrow--m{ color:var(--magenta-deep); }
.light .eyebrow--c,
.bleed--light .eyebrow--c{ color:#00637A; }
.light .c-y,
.bleed--light .c-y{ color:#6F5600; }
.light .c-c,
.bleed--light .c-c{ color:#00637A; }
.light .c-w,
.bleed--light .c-w{ color:var(--fg); }
.light .display,
.bleed--light .display{ color:var(--fg); }
.light .outline,
.bleed--light .outline{ -webkit-text-stroke-color:rgba(0,0,0,.35); }
.light .outline-y,
.bleed--light .outline-y{ -webkit-text-stroke-color:#C9A400; }
.light .glow-y,
.bleed--light .glow-y,
.light .glow-m,
.bleed--light .glow-m,
.light .glow-c,
.bleed--light .glow-c{ text-shadow:none; }         /* los glows solo funcionan en oscuro */

.light .card,
.bleed--light .card{
  background:linear-gradient(160deg,#FBFBFA,#F4F4F1);
  border-color:var(--line);
}
.light .card:hover,
.bleed--light .card:hover{ border-color:#C9A400; }
.light .card__num,
.bleed--light .card__num{ -webkit-text-stroke-color:rgba(0,0,0,.2); }
.light .card:hover .card__num,
.bleed--light .card:hover .card__num{ -webkit-text-stroke-color:#C9A400; }
.light .card--hard,
.bleed--light .card--hard{ background:#fff; border-color:var(--fg); }

.light .btn--ghost,
.bleed--light .btn--ghost{ color:var(--fg); border-color:rgba(0,0,0,.28); }
.light .btn--ghost:hover,
.bleed--light .btn--ghost:hover{ background:var(--fg); color:#fff; border-color:var(--fg); }
.light .link-arrow,
.bleed--light .link-arrow{ color:#6F5600; border-bottom-color:rgba(111,86,0,.4); }
.light .link-arrow:hover,
.bleed--light .link-arrow:hover{ border-bottom-color:#C9A400; }

.light .pains li,
.bleed--light .pains li{ background:rgba(0,0,0,.035); color:#3A3A46; }
.light .pains li:hover,
.bleed--light .pains li:hover{ background:rgba(255,0,168,.07); }
.light .crosses li,
.bleed--light .crosses li{ color:var(--muted); }
.light .tag,
.bleed--light .tag{ color:var(--muted); background:rgba(0,0,0,.03); }
.light .input,
.bleed--light .input,
.light .textarea,
.bleed--light .textarea,
.light .select,
.bleed--light .select{ background:#fff; color:var(--fg); border-color:#D6D6DE; }
.light .input,
.bleed--light .input::placeholder,
.light .textarea::placeholder,
.bleed--light .textarea::placeholder{ color:#8A8A96; }
.light .check__box,
.bleed--light .check__box{ border-color:#C4C4CE; }
.light .check__box::after,
.bleed--light .check__box::after{ background:#fff; }
.light .accordion,
.bleed--light .accordion{ border-top-color:var(--line); }
.light .acc,
.bleed--light .acc{ border-bottom-color:var(--line); }
.light .acc__head,
.bleed--light .acc__head:hover,
.light .acc.is-open .acc__head,
.bleed--light .acc.is-open .acc__head{ color:#6F5600; }
.light .acc__icon,
.bleed--light .acc__icon::before,
.light .acc__icon::after,
.bleed--light .acc__icon::after{ background:#C9A400; }
.light .module,
.bleed--light .module{ border-bottom-color:var(--line); }
.light .module__d,
.bleed--light .module__d{ color:var(--muted); }
.light .light .light .social,
.bleed--light .social{ border-color:#D6D6DE; color:var(--muted); }
.light .social:hover,
.bleed--light .social:hover{ border-color:#C9A400; color:#6F5600; }
.light .halo,
.bleed--light .halo{ opacity:.3; }
.light .gridlines::before,
.bleed--light .gridlines::before{
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
}
/* El grano es una capa fija global: sobre blanco molesta */
.light{ isolation:isolate; }

/* ============================================================
   37. RETRATOS DE LA COMUNIDAD
   Isabel va recortada y flotando con neón (es la marca).
   Las personas que representan al público van enmarcadas:
   distingue jerarquía y funciona con fotografía normal.
   ============================================================ */

/* Variante con resplandor (solo luce sobre fondo oscuro) */

/* Formato apaisado para familias y grupos */
/* Redondo, para avatares y rejillas de comunidad */

/* Pie de foto */

/* ============================================================
   38. MINI-ENCUESTA DE UNA PREGUNTA
   Pensada para gente que no quiere rellenar nada: una pregunta,
   un toque, y ve al momento qué respondieron los demás.
   ============================================================ */
.poll{
  border:2px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,2.2rem);
  background:rgba(255,255,255,.03);
}
.light .poll,
.bleed--light .poll{ background:#F8F8F6; }
.poll__q{
  font-size:var(--t-xl); font-weight:700; line-height:1.3;
}
.poll__opts{ display:grid; gap:.7rem; margin-top:1.4rem; }
.poll__opt{
  position:relative; width:100%; text-align:left;
  padding:1em 1.2em; border-radius:var(--radius);
  border:1.5px solid var(--line);
  background:transparent;
  font-size:var(--t-base); font-weight:600; line-height:1.35;
  overflow:hidden;
  transition:border-color .25s ease, transform .25s var(--ease);
}
.poll__opt:hover:not(:disabled){ border-color:var(--yellow); transform:translateX(4px); }
.poll__opt:disabled{ cursor:default; }
.poll__bar{
  position:absolute; inset:0 auto 0 0; width:0; z-index:0;
  background:rgba(255,242,0,.16);
  transition:width .8s var(--ease);
}
.poll.is-done .poll__opt{ border-color:var(--line); }
.poll.is-done .poll__opt.is-mine{ border-color:var(--yellow); }
.poll__row{ position:relative; z-index:1; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.poll__pct{ font-family:var(--f-display); font-size:var(--t-lg); opacity:0; transition:opacity .4s ease .3s; }
.poll.is-done .poll__pct{ opacity:1; }
.poll__after{ display:none; margin-top:1.3rem; }
.poll.is-done .poll__after{ display:block; animation:fadeUp .45s var(--ease); }

/* ============================================================
   39. SEMÁFORO DE SITUACIÓN (autodiagnóstico visual)
   Tres tarjetas grandes: la persona se reconoce en una y va
   directa a lo suyo. Cero lectura, cero formularios.
   ============================================================ */
.traffic{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.traffic__card{
  display:block; text-align:left;
  border:2px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.2rem,2.6vw,1.9rem);
  background:transparent;
  transition:transform .35s var(--ease), border-color .3s ease, background .3s ease;
}
.traffic__card:hover{ transform:translateY(-5px); }
.traffic__dot{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  font-size:1.6rem; line-height:1;
  margin-bottom:1rem;
}
.traffic__card--red    .traffic__dot{ background:rgba(255,0,168,.16); }
.traffic__card--yellow .traffic__dot{ background:rgba(255,242,0,.18); }
.traffic__card--green  .traffic__dot{ background:rgba(0,229,255,.16); }
.traffic__card--red:hover   { border-color:var(--magenta); background:rgba(255,0,168,.05); }
.traffic__card--yellow:hover{ border-color:var(--yellow);  background:rgba(255,242,0,.05); }
.traffic__card--green:hover { border-color:var(--cyan);    background:rgba(0,229,255,.05); }
.traffic__t{ font-size:var(--t-lg); font-weight:700; line-height:1.3; }
.traffic__d{ color:var(--muted); font-size:var(--t-sm); line-height:1.6; margin-top:.5rem; }
.traffic__go{
  display:inline-flex; align-items:center; gap:.4em;
  margin-top:1rem; font-size:var(--t-sm); font-weight:700;
}
.traffic__card--red .traffic__go{ color:var(--magenta); }
.traffic__card--yellow .traffic__go{ color:var(--yellow); }
.light .traffic__card--yellow .traffic__go,
.bleed--light .traffic__card--yellow .traffic__go{ color:#6F5600; }
.traffic__card--green .traffic__go{ color:var(--cyan); }
.light .traffic__card--green .traffic__go,
.bleed--light .traffic__card--green .traffic__go{ color:#00637A; }

@media (max-width:820px){ .traffic{ grid-template-columns:1fr; } }

/* ============================================================
   40. PASOS NUMERADOS GRANDES (cómo funciona, sin leer mucho)
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:paso; }
.steps__item{ counter-increment:paso; text-align:center; }
.steps__num{
  width:66px; height:66px; margin:0 auto 1rem;
  border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-display); font-size:1.7rem; line-height:1;
  background:var(--yellow); color:#000;
}
.steps__item:nth-child(2) .steps__num{ background:var(--magenta); color:#000; }
.steps__item:nth-child(3) .steps__num{ background:var(--cyan); color:#000; }
.steps__item:nth-child(4) .steps__num{ background:var(--fg); color:var(--bg); }
.steps__num::before{ content:counter(paso); }
.steps__t{ font-size:var(--t-base); font-weight:700; line-height:1.35; }
.steps__d{ color:var(--muted); font-size:var(--t-sm); line-height:1.6; margin-top:.4rem; }
@media (max-width:820px){ .steps{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1rem; } }
@media (max-width:460px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   41. BLOQUE "EN UNA FRASE" — resumen para lectura rápida
   ============================================================ */
.tldr{
  border-left:5px solid var(--yellow);
  padding:1.1rem 0 1.1rem 1.4rem;
  font-size:var(--t-lg); line-height:1.55; font-weight:500;
}
.tldr b{ font-weight:800; }
.tldr--m{ border-left-color:var(--magenta); }
.tldr--c{ border-left-color:var(--cyan); }
.tldr__label{
  display:block; font-size:var(--t-xs); font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem;
}

/* --- Ajustes finos del tema claro ---
   El amarillo puro sobre blanco casi no se ve: en los iconos y
   detalles pasa a un dorado oscuro que sí contrasta. */
.light .checks li::before,
.bleed--light .checks li::before{ background:#C9A400; }
.light .checks--m li::before,
.bleed--light .checks--m li::before{ background:var(--magenta-deep); }
.light .checks--c li::before,
.bleed--light .checks--c li::before{ background:#00637A; }
.light .crosses li::before,
.bleed--light .crosses li::before{ color:var(--magenta-deep); }
.light .pains li,
.bleed--light .pains li{ border-left-color:var(--magenta-deep); }
.light .pains li::before,
.bleed--light .pains li::before{ color:var(--magenta-deep); }
/* Sobre papel, los fosforitos puros no se leen: se oscurecen. */
.light .callout--y::before,
.bleed--light .callout--y::before{ background:#C9A400; }
.light .callout--y .callout__title,
.bleed--light .callout--y .callout__title{ color:#6F5600; }
.light .callout--c::before,
.bleed--light .callout--c::before{ background:#00637A; }
.light .callout--c .callout__title,
.bleed--light .callout--c .callout__title{ color:#00637A; }
.light .callout::before,
.bleed--light .callout::before{ background:var(--magenta-deep); }
.light .callout__title,
.bleed--light .callout__title{ color:var(--magenta-deep); }
.light .module__n,
.bleed--light .module__n{ -webkit-text-stroke-color:var(--magenta-deep); }
.light .module:hover .module__n,
.bleed--light .module:hover .module__n{ color:var(--magenta-deep); }
.light .stat__num,
.bleed--light .stat__num{ color:#6F5600; }
.light .price__now,
.bleed--light .price__now{ color:#6F5600; }
.light .price__old,
.bleed--light .price__old{ color:var(--grey-2); }
.light .calc__amount,
.bleed--light .calc__amount{ color:#6F5600; }
.light .calc__bar-track,
.bleed--light .calc__bar-track{ background:rgba(0,0,0,.08); }
.light .calc__bar-fill,
.bleed--light .calc__bar-fill{ box-shadow:none; }
.light .calc__bar--save .calc__bar-val,
.bleed--light .calc__bar--save .calc__bar-val{ color:#6F5600; }
.light .calc__bar--need .calc__bar-val,
.bleed--light .calc__bar--need .calc__bar-val{ color:#00637A; }
.light .calc__bar--want .calc__bar-val,
.bleed--light .calc__bar--want .calc__bar-val{ color:var(--magenta-deep); }
.light .calc__slider,
.bleed--light .calc__slider{ background:transparent; }
.light .calc__slider::-webkit-slider-runnable-track,
.bleed--light .calc__slider::-webkit-slider-runnable-track{ background:rgba(0,0,0,.12); }
.light .calc__slider::-webkit-slider-thumb,
.bleed--light .calc__slider::-webkit-slider-thumb{
  background:#C9A400; border-color:#fff;
  box-shadow:0 0 0 2px #C9A400;
}
.light .post-card,
.bleed--light .post-card{ background:#FBFBFA; }
.light .post-card:hover,
.bleed--light .post-card:hover{ border-color:#C9A400; }
.light .post-card:hover .post-card__title,
.bleed--light .post-card:hover .post-card__title{ color:#6F5600; }
.light .post-card__ph,
.bleed--light .post-card__ph{ -webkit-text-stroke-color:rgba(0,0,0,.14); }
.light .post-card__tag,
.bleed--light .post-card__tag{ background:#C9A400; color:#fff; }
.light .filter.is-active,
.bleed--light .filter.is-active{ background:#C9A400; border-color:#C9A400; color:#fff; }
.light .quiz__dot.is-done,
.bleed--light .quiz__dot.is-done{ background:#C9A400; box-shadow:none; }
.light .quiz__score,
.bleed--light .quiz__score{ color:#6F5600; }
.light .quiz__opt:hover,
.bleed--light .quiz__opt:hover{ border-color:#C9A400; background:rgba(201,164,0,.07); }
.light .quiz__opt:hover::before,
.bleed--light .quiz__opt:hover::before{ border-color:#C9A400; background:#C9A400; box-shadow:none; }
.light .poll__bar,
.bleed--light .poll__bar{ background:rgba(201,164,0,.2); }
.light .poll__opt:hover:not(:disabled),
.bleed--light .poll__opt:hover:not(:disabled){ border-color:#C9A400; }
.light .poll.is-done .poll__opt.is-mine,
.bleed--light .poll.is-done .poll__opt.is-mine{ border-color:#C9A400; }
.light .traffic__card--yellow .traffic__dot,
.bleed--light .traffic__card--yellow .traffic__dot{ background:rgba(201,164,0,.2); }
.light .traffic__card--yellow:hover,
.bleed--light .traffic__card--yellow:hover{ border-color:#C9A400; }
.light .steps__num,
.bleed--light .steps__num{ background:#C9A400; color:#fff; }
.light .steps__item:nth-child(3) .steps__num,
.bleed--light .steps__item:nth-child(3) .steps__num{ background:#00637A; color:#fff; }
.light .tldr,
.bleed--light .tldr{ border-left-color:#C9A400; }
.light .tldr--c,
.bleed--light .tldr--c{ border-left-color:#00637A; }
.light .tldr--m,
.bleed--light .tldr--m{ border-left-color:var(--magenta-deep); }
.light .lesson__n,
.bleed--light .lesson__n{ border-color:var(--line); }
.light .aula__side,
.bleed--light .aula__side{ background:#F8F8F6; }
.light .video,
.bleed--light .video{ background:#F2F2EF; border-color:var(--line); }
.light .res__item,
.bleed--light .res__item{ background:#fff; }
/* El marcador fosforito sí funciona sobre blanco: se queda igual */

/* ============================================================
   42. SILUETAS RECORTADAS
   La luz repasa el contorno del cuerpo. Los drop-shadow siguen
   el canal alfa del recorte, así que el neón dibuja exactamente
   su silueta: ni marcos, ni cajas, ni discos de color.
   Son estáticos a propósito (animarlos repinta cada fotograma).
   ============================================================ */
.cut{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  /* Ancho explícito: cuando la silueta es la propia celda de la rejilla
     y lleva márgenes automáticos, el ancho pasaba a depender del
     contenido y se quedaba en cero mientras la imagen no cargaba. */
  width:100%;
  isolation:isolate;
  /* Amarillo por defecto; cada variante sólo cambia estos tres. */
  --luz-1:rgba(255,242,0,.95);   /* el trazo pegado al cuerpo */
  --luz-2:rgba(255,242,0,.50);   /* el halo cercano */
  --luz-3:rgba(255,242,0,.22);   /* el rebote lejano */
}
.cut img{
  position:relative; z-index:1;
  display:block;
  /* width:100% a propósito: con width:auto la imagen diferida no ocupa
     nada antes de cargarse, la celda se quedaba en 0 y nunca llegaba a
     entrar en pantalla, así que no se cargaba jamás. Con el ancho fijo
     la caja se reserva con la proporción de los atributos width/height.
     object-fit mantiene la figura sin deformar cuando topa con el alto. */
  width:100%; height:auto;
  max-height:var(--cut-max, 560px);
  object-fit:contain;
  object-position:bottom center;
  filter:
    drop-shadow(0 0 1px  var(--luz-1))
    drop-shadow(0 0 7px  var(--luz-2))
    drop-shadow(0 0 26px var(--luz-3));
  transition:transform .8s var(--ease);
}
.cut:hover img{ transform:translateY(-6px); }

.cut--m{ --luz-1:rgba(255,0,168,.95); --luz-2:rgba(255,0,168,.50); --luz-3:rgba(255,0,168,.22); }
.cut--c{ --luz-1:rgba(0,229,255,.95); --luz-2:rgba(0,229,255,.50); --luz-3:rgba(0,229,255,.22); }
/* Sin contorno, si la sección ya va cargada de color */
.cut--plain img{ filter:none; }

/* En la portada de cada página puede respirar más */
.hero__media.cut, .hero__media .cut{ --cut-max:min(68vh, 620px); }
@media (max-width:760px){
  .cut{ --cut-max:min(46vh, 380px); }
  .hero__media.cut, .hero__media .cut{ --cut-max:min(42vh, 340px); }
}

/* Sombra de apoyo: la figura se posa, no flota */
.cut::after{
  content:""; position:absolute; z-index:0;
  left:50%; bottom:1%;
  width:58%; height:6%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);
  filter:blur(7px);
  pointer-events:none;
}

/* Sobre papel el fosforito puro no se ve: el contorno pasa a un
   trazo del color oscuro de la casa más una sombra suave. */
.light .cut img,
.bleed--light .cut img{
  filter:
    drop-shadow(0 0 1px  rgba(111,86,0,.9))
    drop-shadow(0 0 7px  rgba(111,86,0,.38))
    drop-shadow(0 10px 24px rgba(40,34,24,.30));
}
.light .cut--m img,
.bleed--light .cut--m img{
  filter:
    drop-shadow(0 0 1px  rgba(230,0,126,.9))
    drop-shadow(0 0 7px  rgba(230,0,126,.34))
    drop-shadow(0 10px 24px rgba(40,34,24,.30));
}
.light .cut--c img,
.bleed--light .cut--c img{
  filter:
    drop-shadow(0 0 1px  rgba(0,99,122,.9))
    drop-shadow(0 0 7px  rgba(0,99,122,.34))
    drop-shadow(0 10px 24px rgba(40,34,24,.30));
}
.light .cut::after,
.bleed--light .cut::after{ display:none; }

/* Fila de personas apoyadas sobre una misma línea de suelo. */
.lineup{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(.4rem, 2vw, 1.4rem);
  padding-bottom:1.2rem;
}
.lineup::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
/* Se escalan por ANCHO, no por alto. Unas fotos son de cuerpo entero
   y otras de medio cuerpo: a la misma altura, unas cabezas salían el
   doble de grandes que otras. Con el ancho fijo, todas las caras
   quedan del mismo tamaño y la fila se lee como un grupo de verdad. */
.lineup{ align-items:flex-end; }
.lineup .cut{ flex:1 1 0; min-width:0; max-width:132px; width:auto; }
.lineup .cut img{ width:100%; height:auto; max-height:none; object-fit:fill; }
.lineup .cut::after{ bottom:-1%; height:4%; width:70%; }
@media (max-width:760px){
  /* En el móvil no se parten en filas: unas figuras son de cuerpo
     entero y otras de medio cuerpo, así que al envolverse quedaban
     huecos enormes. Se quedan en una sola fila que se arrastra con
     el dedo, todas apoyadas en la misma línea de suelo. */
  .lineup{
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:.9rem;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);
    padding-bottom:1rem;
  }
  .lineup::-webkit-scrollbar{ display:none; }
  .lineup::after{ left:var(--gutter); right:var(--gutter); }
  .lineup .cut{ flex:0 0 118px; max-width:118px; width:auto; scroll-snap-align:center; }
  .lineup .cut img{ width:100%; height:auto; max-height:none; object-fit:fill; }
}

/* ============================================================
   43. EL BLANCO ES LA BASE
   La web se lee sobre blanco. El negro queda para la entrada y el
   cierre de cada página, que es donde tiene que pegar fuerte.
   Por eso los bloques claros van a sangre, sin esquinas ni
   márgenes: ya no son una hoja apoyada sobre un fondo oscuro.
   ============================================================ */
.section.light,
.section--tight.light,
.bleed--light{
  position:relative;
  width:100%;
  margin-inline:0;
  border-radius:0;
}
/* Entre dos bloques claros seguidos, una línea finísima marca el corte */
.light + .light{ border-top:1px solid var(--line); }
/* El grano se atenúa sobre papel: en claro molesta más que suma */
.light.grain::before{ opacity:.25; }

/* ============================================================
   44. LEGIBILIDAD SOBRE PAPEL
   Todo lo que estaba pensado para fondo negro (texto claro,
   fosforito puro) necesita su equivalente oscuro sobre papel.
   Sin esto hay bloques enteros de texto que no se leen.
   ============================================================ */
/* Rotulador fosforito: el texto de dentro vuelve a ser negro */
.light .mark,
.bleed--light .mark{ color:#0A0A0F; }

/* Cuerpo de artículo y textos legales */
.light .article-body,
.bleed--light .article-body{ color:#2C2C36; }
.light .article-body h2,
.bleed--light .article-body h2{ color:var(--fg); }
.light .article-body h3,
.bleed--light .article-body h3{ color:#6F5600; }
.light .article-body strong,
.bleed--light .article-body strong{ color:var(--fg); }
.light .article-body a,
.bleed--light .article-body a{ color:#00637A; border-bottom-color:rgba(0,110,136,.45); }
.light .article-body blockquote,
.bleed--light .article-body blockquote{ color:var(--fg); }
.light strong,
.bleed--light strong{ color:var(--fg); }

/* Índice, comentarios y avisos del artículo */
.light .toc__title,
.bleed--light .toc__title{ color:#6F5600; }
.light 
/* Aula: rótulos en fosforito puro */
.light .aula__mod-title,
.bleed--light .aula__mod-title{ color:#6F5600; }
.light .aula__crumb,
.bleed--light .aula__crumb{ color:#00637A; }
.light .ex__label,
.bleed--light .ex__label{ color:#6F5600; }
.light .lesson__t,
.bleed--light .lesson__t{ color:var(--fg); }

/* Precios y cifras destacadas */
.light .step--free .step__price,
.bleed--light .step--free .step__price{ color:#00637A; text-shadow:none; }
.light .step--top .step__price,
.bleed--light .step--top .step__price{ color:#6F5600; text-shadow:none; }
.light .calc__bar--need .calc__bar-val,
.bleed--light .calc__bar--need .calc__bar-val{ color:#00637A; }
.light .calc__bar--save .calc__bar-val,
.bleed--light .calc__bar--save .calc__bar-val{ color:#6F5600; }
.light .calc__bar--want .calc__bar-val,
.bleed--light .calc__bar--want .calc__bar-val{ color:var(--magenta-deep); }

/* Reproductor de vídeo sobre papel */
.light .video__title,
.bleed--light .video__title{ color:var(--fg); }

/* Desplegable nativo: en algunos navegadores hereda el color claro */
.light .select option,
.bleed--light .select option{ color:#14141A; background:#fff; }

/* Enlaces sueltos en cian dentro de texto corrido */
.light .prose a, .light p > a:not(.btn):not(.link-arrow),
.bleed--light .prose a, .bleed--light p > a:not(.btn):not(.link-arrow){ color:#00637A; }

/* --- Acentos sobre papel: todos por encima de 4,5:1 --- */
.light .c-y,        .bleed--light .c-y,
.light .callout__title, .bleed--light .callout__title,
.light .toc__title, .bleed--light .toc__title,
.light .ex__label,  .bleed--light .ex__label,
.light .aula__mod-title, .bleed--light .aula__mod-title,
.light .aula__pct b, .bleed--light .aula__pct b,
.light .lesson__n,  .bleed--light .lesson__n,
.light .step__tag.c-y, .bleed--light .step__tag.c-y,
.light .step--top .step__price, .bleed--light .step--top .step__price,
.light .calc__bar--save .calc__bar-val, .bleed--light .calc__bar--save .calc__bar-val{
  color:#6F5600;
}
.light .c-c,        .bleed--light .c-c,
.light .aula__crumb, .bleed--light .aula__crumb,
.light .video__label, .bleed--light .video__label,
.light .callout--c .callout__title, .bleed--light .callout--c .callout__title,
.light .step--free .step__price, .bleed--light .step--free .step__price,
.light .calc__bar--need .calc__bar-val, .bleed--light .calc__bar--need .calc__bar-val{
  color:#00637A;
}
.light .c-m,        .bleed--light .c-m,
.light .hand.c-m,   .bleed--light .hand.c-m,
.light .callout .callout__title, .bleed--light .callout .callout__title,
.light .eyebrow--m, .bleed--light .eyebrow--m,
.light .calc__bar--want .calc__bar-val, .bleed--light .calc__bar--want .calc__bar-val{
  color:#E6007E;
}
/* callout--y y --c recuperan su color después del genérico de arriba */
.light .callout--y .callout__title, .bleed--light .callout--y .callout__title{ color:#6F5600; }
.light .callout--y::before, .bleed--light .callout--y::before{ background:#6F5600; }
.light .callout--c::before, .bleed--light .callout--c::before{ background:#00637A; }
.light .callout::before,    .bleed--light .callout::before{ background:#E6007E; }

/* Negritas y enlaces dentro de texto corrido */
.light .lead strong, .bleed--light .lead strong{ color:var(--fg); }
.light .lesson__t,   .bleed--light .lesson__t{ color:var(--fg); }
.light :is(p,li,td,dd,small) a:not(.btn):not(.link-arrow),
.bleed--light :is(p,li,td,dd,small) a:not(.btn):not(.link-arrow){ color:#00637A; }

/* Etiquetas y filtros: sobre el dorado, el texto va en negro */
.light .post-card__tag, .bleed--light .post-card__tag,
.light .filter.is-active, .bleed--light .filter.is-active{ color:#14141A; }
/* La etiqueta de color dentro de una nota no depende del contenedor */
.light .callout__title, .bleed--light .callout__title{ color:#E6007E; }
.light .callout--y .callout__title, .bleed--light .callout--y .callout__title{ color:#6F5600; }
.light .callout--c .callout__title, .bleed--light .callout--c .callout__title{ color:#00637A; }
/* Numeración de lección sobre tarjeta clara */
.light .lesson__n, .light .lesson__n *,
.bleed--light .lesson__n, .bleed--light .lesson__n *{ color:#6F5600; }
.light .traffic__card--red .traffic__go, .bleed--light .traffic__card--red .traffic__go,
.light .traffic__card--red .traffic__go *, .bleed--light .traffic__card--red .traffic__go *{ color:#E6007E; }

/* Texto contorneado sobre papel: el trazo blanco desaparece */
.light .outline, .bleed--light .outline{ -webkit-text-stroke-color:rgba(20,20,26,.38); }
.light .outline-y, .bleed--light .outline-y{ -webkit-text-stroke-color:#6F5600; }
.light .card__num, .bleed--light .card__num{ -webkit-text-stroke-color:rgba(20,20,26,.26); }
.light .card:hover .card__num, .bleed--light .card:hover .card__num{ -webkit-text-stroke-color:#6F5600; }
.light .article-cover__ph, .bleed--light .article-cover__ph{ -webkit-text-stroke-color:rgba(20,20,26,.22); }

/* Los resplandores de color son para el fondo negro: sobre papel
   parecen manchas. Se apagan casi del todo. */
.light .halo, .bleed--light .halo{ opacity:.12; filter:blur(60px); }
.light .gridlines, .bleed--light .gridlines{ opacity:.35; }

/* En móvil la silueta es el gancho, pero el titular tiene que
   entrar en la primera pantalla: se acota igual que los retratos. */
@media (max-width:620px){
  .hero__media.cut, .hero__media .cut{ --cut-max:265px; }
  .cut{ --cut-max:300px; }
}

/* Las hojas de papel recortan lo que asoma: así las esquinas
   redondeadas funcionan y ningún resplandor se sale de la pantalla. */
.section.light, .section--tight.light, .bleed--light{ overflow:hidden; overflow:clip; }
/* Refuerzo contra el arrastre lateral en móvil */
html{ overflow-x:clip; }

/* El pie de foto tiene que leerse sea cual sea la zona de la imagen */

/* Ninguna línea de texto debe pasar de unos 70 caracteres: más allá,
   el ojo pierde el renglón al volver a la izquierda. */
.credit__copy{ max-width:62ch; margin-inline:auto; }
.form-note,
.center.tiny.muted,
.poll__after{ max-width:66ch; }
.center.tiny.muted, .form-note.center{ margin-inline:auto; }

/* Sobre una franja de color macizo el fosforito se pierde: el contorno
   pasa a negro (o a blanco si la franja es oscura) para que la silueta
   se recorte de verdad contra el fondo. */
.slab-band .cut{
  --luz-1:rgba(0,0,0,.55); --luz-2:rgba(0,0,0,.26); --luz-3:rgba(0,0,0,.12);
}
.slab-band--m .cut{
  --luz-1:rgba(255,255,255,.75); --luz-2:rgba(255,255,255,.34); --luz-3:rgba(255,255,255,.16);
}
.slab-band .cut::after{
  background:radial-gradient(ellipse at center, rgba(0,0,0,.28), transparent 70%);
}
/* En la franja de color la figura acompaña al texto: no debe comérselo */
.slab-band__media.cut{ --cut-max:min(54vh, 440px); }
@media (max-width:1024px){
  .slab-band__media.cut{ --cut-max:min(36vh, 300px); }
}

/* ============================================================
   45. LA ESCALERA DE CURSOS, CON MÁS PESO
   Las tarjetas se diseñaron sobre negro: su fondo es un velo
   blanco al 5 %. Sobre papel ese velo no existe y quedaban
   lavadas. Ahora cada nivel lleva una barra de color a la
   izquierda, el número pesa más y el precio manda.
   ============================================================ */
.step{ overflow:hidden; }
/* La barra de color: es lo que ordena la escalera de un vistazo */
.step::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--grey-2); opacity:.55;
  transition:opacity .3s ease, width .3s ease;
}
.step:hover::before{ opacity:1; width:6px; }
.step--free::before{ background:var(--cyan); opacity:1; }
.step--top::before{ background:linear-gradient(180deg, var(--yellow), var(--magenta)); opacity:1; }
.step{ padding-left:calc(clamp(1.2rem,2.6vw,1.9rem) + 10px); }

/* El número del nivel: más grande y en sólido, no en contorno fino */
.step__lvl{
  width:66px; height:66px;
  font-size:1.9rem; font-weight:700;
  -webkit-text-stroke:0;
  color:var(--grey-2);
  background:rgba(255,255,255,.04);
}
.step--free .step__lvl{ color:var(--cyan); background:rgba(0,229,255,.10); border-color:rgba(0,229,255,.55); }
.step--top .step__lvl{ color:var(--yellow); background:rgba(255,242,0,.10); border-color:rgba(255,242,0,.6); }

/* El precio es la información que más se busca: que se vea */
.step__price{ font-size:clamp(1.9rem,4vw,2.9rem); }
.step__tag{ color:var(--white); opacity:.75; }
.step--free .step__tag{ color:var(--cyan); opacity:1; }
.step--top .step__tag{ color:var(--yellow); opacity:1; }

/* Sobre papel: tarjeta blanca de verdad, con sombra, sobre el papel
   crudo. El contraste lo da la profundidad, no el color de fondo. */
.light .step,
.bleed--light .step{
  background:#fff;
  border-color:#E7E2D8;
  box-shadow:0 2px 4px rgba(40,34,24,.05), 0 12px 28px rgba(40,34,24,.07);
}
.light .step:hover,
.bleed--light .step:hover{
  box-shadow:0 4px 8px rgba(40,34,24,.07), 0 20px 44px rgba(40,34,24,.12);
  transform:translateY(-2px);
}
.light .step__lvl,
.bleed--light .step__lvl{ background:#F4F1EA; color:#6A6A74; border-color:#E3DFD6; }
.light .step--free .step__lvl,
.bleed--light .step--free .step__lvl{ color:#00637A; background:rgba(0,99,122,.08); border-color:rgba(0,99,122,.4); }
.light .step--top .step__lvl,
.bleed--light .step--top .step__lvl{ color:#6F5600; background:rgba(111,86,0,.08); border-color:rgba(111,86,0,.4); }
.light .step--free::before,
.bleed--light .step--free::before{ background:#00637A; }
.light .step--top::before,
.bleed--light .step--top::before{ background:linear-gradient(180deg, #6F5600, #E6007E); }
.light .step::before,
.bleed--light .step::before{ background:#C9C4B8; }
.light .step__tag,
.bleed--light .step__tag{ color:#4A4A54; opacity:1; }
.light .step--free .step__tag,
.bleed--light .step--free .step__tag{ color:#00637A; }
.light .step--top .step__tag,
.bleed--light .step--top .step__tag{ color:#6F5600; }
.light .step--top,
.bleed--light .step--top{ background:#fff; border-color:rgba(111,86,0,.3); }
.light .step--free,
.bleed--light .step--free{ border-color:rgba(0,99,122,.3); }

/* ============================================================
   46. SIN JAVASCRIPT, LA WEB SE SIGUE LEYENDO
   Todo lo que entra con animación partía de opacity:0. Si el JS
   no carga (bloqueador, red, error), la página quedaba en blanco.
   Ahora el estado oculto sólo existe cuando hay JS: el guión de
   la cabecera pone la clase .js antes de pintar nada.
   ============================================================ */
html:not(.js) .reveal,
html:not(.js) .word,
html:not(.js) .ann{ opacity:1 !important; transform:none !important; }
html:not(.js) .preloader{ display:none; }
html:not(.js) .hero__fade{ opacity:1; animation:none; }
/* El cursor a medida y la barra de progreso no pintan nada sin JS */
html:not(.js) .cursor,
html:not(.js) .cursor-dot,
html:not(.js) .progress{ display:none; }

/* Si el envío falla, el aviso no puede parecer un acierto */
.form-status.is-error{ color:var(--magenta); border-color:var(--magenta); }
.light .form-status.is-error,
.bleed--light .form-status.is-error{ color:#E6007E; border-color:#E6007E; }

/* ============================================================
   47. ARTÍCULOS QUE AÚN NO ESTÁN
   Todas las tarjetas del blog llevaban al mismo artículo: quien
   pulsaba "La regla 50/30/20" aterrizaba en el de la nómina.
   Las que todavía no existen se marcan y dejan de ser enlace.
   ============================================================ */
.post-card--soon{ opacity:.72; }
.post-card--soon:hover{ opacity:.9; transform:none; }
.post-card__soon,
.post-mini__soon{
  position:absolute; z-index:3; top:.8rem; right:.8rem;
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:.4em .7em; border-radius:999px;
  background:rgba(0,0,0,.72); color:var(--yellow);
  border:1px solid rgba(255,242,0,.5);
  backdrop-filter:blur(4px);
}
.post-card--soon .post-card__media{ position:relative; }
.btn.is-soon{
  cursor:default; pointer-events:none;
  opacity:.75;
}
/* La lista de "las más leídas": las que faltan no son pulsables */
.post-mini--soon{
  position:relative;
  opacity:.68;
  cursor:default;
}
.post-mini--soon:hover{ transform:none; background:inherit; }
.post-mini__soon{
  position:static; display:inline-block; margin-top:.45rem;
  background:rgba(255,242,0,.12); color:var(--yellow); border-color:rgba(255,242,0,.35);
}
/* Sobre papel el aviso se oscurece para poder leerse */
.light .post-card__soon, .bleed--light .post-card__soon{
  background:rgba(20,20,26,.82); color:#FFE44D; border-color:rgba(255,228,77,.45);
}
.light .post-mini__soon, .bleed--light .post-mini__soon{
  background:rgba(111,86,0,.12); color:#6F5600; border-color:rgba(111,86,0,.35);
}

/* Lo que queda detrás de un diálogo abierto no se puede tocar ni tabular */
[inert]{ pointer-events:none; user-select:none; }

/* ============================================================
   48. LAS TARJETAS BLANCAS, CON EL COLOR DE LA CASA
   Sobre blanco una tarjeta blanca no se distingue del fondo.
   Se marcan con el contorno corporativo —solo el contorno, como
   pidió la clienta— y una barra de color arriba que las ordena.
   ============================================================ */
.light .card,
.bleed--light .card{
  background:#fff;
  border:1.5px solid var(--line);
  box-shadow:0 1px 2px rgba(18,18,26,.04), 0 8px 24px rgba(18,18,26,.06);
  position:relative; overflow:hidden;
}
.light .card::before,
.bleed--light .card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--magenta-deep);
  opacity:.9;
}
.light .card--y::before, .bleed--light .card--y::before,
.light .card--hy::before, .bleed--light .card--hy::before{ background:#C9A400; }
.light .card--c::before, .bleed--light .card--c::before,
.light .card--hc::before, .bleed--light .card--hc::before{ background:#00A8CC; }
.light .card--m::before, .bleed--light .card--m::before{ background:var(--magenta-deep); }

.light .card:hover,
.bleed--light .card:hover{
  border-color:rgba(230,0,126,.45);
  box-shadow:0 2px 4px rgba(18,18,26,.06), 0 16px 40px rgba(18,18,26,.10);
  transform:translateY(-3px);
}
.light .card--y:hover, .bleed--light .card--y:hover,
.light .card--hy:hover, .bleed--light .card--hy:hover{ border-color:rgba(201,164,0,.5); }
.light .card--c:hover, .bleed--light .card--c:hover,
.light .card--hc:hover, .bleed--light .card--hc:hover{ border-color:rgba(0,99,122,.45); }

/* Lo mismo para los otros recuadros blancos de la web */
.light .poll, .bleed--light .poll,
.light .acc, .bleed--light .acc{ border-color:var(--line); }
.light .traffic__card, .bleed--light .traffic__card{ background:#fff; border-width:1.5px; }

/* Dos restos del diseño en negro que no se leían sobre blanco */
.light .countdown__val,
.bleed--light .countdown__val{ color:#6F5600; }
.light .countdown__unit,
.bleed--light .countdown__unit{ background:#FBFAF5; border-color:rgba(111,86,0,.35); }
/* La caja dibujada a mano usa currentColor para el trazo: en blanco
   había que darle un color de tinta, si no se pintaba blanca sobre blanca. */
.light .ann-box,
.bleed--light .ann-box{ color:var(--fg); }

/* ============================================================
   49. IMÁGENES DEL BLOG (las de Isabel)
   ============================================================ */
.post-card__media img{ display:block; }
.post-mini__ph--img{ padding:0; background:none; }
.post-mini__ph--img img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-cover{ background:var(--ink-3); }
.article-cover__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Sobre la foto, la etiqueta de categoría necesita fondo propio */
.post-card__tag{ backdrop-filter:blur(4px); }
/* Las que todavía no están escritas: la foto en gris, el aviso en color */
.post-card--soon .post-card__media img{ filter:grayscale(.85) contrast(.95); opacity:.85; }
.post-card--soon:hover .post-card__media img{ transform:none; }
.post-mini--soon .post-mini__ph--img img{ filter:grayscale(.85); opacity:.8; }

/* ============================================================
   50. LAS FOTOS DE ISABEL
   Vienen de Canva con el fondo negro puro y el contorno de neón
   ya pintado. Con "lighten" ese negro desaparece contra el fondo
   oscuro de la sección: la figura queda suelta, sin rectángulo,
   y el contorno amarillo o magenta se ve tal cual lo diseñó ella.
   Por eso sólo van en secciones oscuras.
   ============================================================ */
.foto-isabel{
  display:flex; justify-content:center;
  margin:0 auto clamp(1.2rem, 3vw, 2rem);
  max-width:440px;
}
.foto-isabel img{
  display:block; width:100%; height:auto;
  max-height:min(46vh, 400px); object-fit:contain;
}
/* El negro de Canva se ha convertido en transparencia real al preparar
   las imágenes, así que no hace falta ningún modo de mezcla. */
/* La del grupo es apaisada: puede ir más ancha */
.foto-isabel:has(img[src*="equipo"]){ max-width:600px; }
@media (max-width:760px){
  .foto-isabel{ max-width:320px; }
  .foto-isabel img{ max-height:300px; }
}
/* Por si alguna acaba en una sección clara: ahí el negro no se borra */


/* La entrada destacada, con la foto arriba y en grande. En fila, la foto
   apaisada quedaba metida en una columna estrecha y muy alta, y sólo se
   veía un trozo (de "SUELDO" se leía "EL"). */
.post-card--feature{ flex-direction:column; }
.post-card--feature .post-card__media{ width:100%; aspect-ratio:16/9; }
/* Estados al pasar el ratón pensados para fondo negro: sobre blanco, color oscuro */
.light .share__btn:hover, .bleed--light .share__btn:hover{ color:#6F5600; border-color:#6F5600; }
.light .post-mini:hover .post-mini__title,
.bleed--light .post-mini:hover .post-mini__title{ color:#E6007E; }

/* ============================================================
   51. EL BLOG DE ISABEL
   Artículo del día en grande, listado con filtros y la página
   de cada artículo. Base blanca; el color de la categoría
   (amarillo, cian o magenta) marca los detalles.
   ============================================================ */
/* Color por categoría: tono vivo para barras y tono oscuro para texto sobre blanco */
.post-card--y, .hoy--y, .art-cuerpo--y, .art-cat--y, .post-mini--y{ --cat:#FFE100; --cat-ink:#6F5600; --cat-soft:#FFFBE0; }
.post-card--c, .hoy--c, .art-cuerpo--c, .art-cat--c, .post-mini--c{ --cat:#00C8E0; --cat-ink:#00637A; --cat-soft:#E8FAFD; }
.post-card--m, .hoy--m, .art-cuerpo--m, .art-cat--m, .post-mini--m{ --cat:#FF00A8; --cat-ink:#E6007E; --cat-soft:#FFEDF8; }
.art-layout{ --cat:#FFE100; --cat-ink:#6F5600; --cat-soft:#FFFBE0; }
.art-layout:has(.art-cuerpo--c){ --cat:#00C8E0; --cat-ink:#00637A; --cat-soft:#E8FAFD; }
.art-layout:has(.art-cuerpo--m){ --cat:#FF00A8; --cat-ink:#E6007E; --cat-soft:#FFEDF8; }

/* ---- Tarjetas: toda la tarjeta es clicable y lleva su color arriba ---- */
.post-card{ position:relative; }
.post-card__link{ color:inherit; }
.post-card__link::after{ content:""; position:absolute; inset:0; z-index:3; }
.post-card__link:focus-visible{ outline:none; }
.post-card:has(.post-card__link:focus-visible){ outline:3px solid var(--cat, #FFE100); outline-offset:3px; }
.light .post-card[class*="post-card--"]{ background:#FFFFFF; box-shadow:inset 0 3px 0 var(--cat); }
.light .post-card[class*="post-card--"]:hover{ border-color:var(--cat); box-shadow:inset 0 3px 0 var(--cat), 0 18px 40px -24px rgba(18,18,26,.35); }
.light .post-card[class*="post-card--"]:hover .post-card__title{ color:var(--cat-ink); }
.post-card__tag--c{ background:#00E5FF; color:#00262E; }
.post-card__tag--m{ background:#FF00A8; color:#FFFFFF; }
.post-card .card__body{
  font-size:var(--t-sm); line-height:1.6; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---- El artículo de hoy ---- */
.hoy-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.hoy-cab__fecha{ font-size:var(--t-sm); color:var(--muted); font-weight:600; }
.hoy-cab__fecha:empty{ display:none; }
.hoy{
  height:100%; display:flex; flex-direction:column;
  background:#FFFFFF; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:inset 0 4px 0 var(--cat); overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.hoy:hover{ border-color:var(--cat); box-shadow:inset 0 4px 0 var(--cat), 0 24px 50px -30px rgba(18,18,26,.4); }
.hoy__media{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--ink-3); }
.hoy__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.hoy:hover .hoy__media img{ transform:scale(1.04); }
.hoy__body{ padding:clamp(1.4rem,3vw,2.4rem); display:flex; flex-direction:column; gap:.9rem; flex:1; }
.hoy__cat{
  display:flex; align-items:center; gap:.55rem;
  font-size:var(--t-xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cat-ink);
}
.hoy__punto, .art-cat__punto{ width:.62em; height:.62em; border-radius:50%; background:var(--cat); flex:none; }
.hoy__title{ font-size:clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem); font-weight:800; line-height:1.12; letter-spacing:-.01em; }
.hoy__title a{ color:var(--fg); background:linear-gradient(var(--cat),var(--cat)) 0 100%/0 .14em no-repeat; transition:background-size .45s var(--ease); }
.hoy__title a:hover{ background-size:100% .14em; }
.hoy__sub{ font-size:var(--t-lg); font-style:italic; color:var(--fg); line-height:1.45; }
.hoy__excerpt{ color:var(--muted); line-height:1.7; }
.hoy__btn{ align-self:flex-start; margin-top:auto; }
.hoy-lateral{ display:flex; flex-direction:column; }
.post-mini{ color:inherit; }
.post-mini__cat{ font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cat-ink, var(--grey-2)); }
.light .post-mini{ background:#FFFFFF; }
.light .post-mini:hover{ border-color:var(--cat, #C9A400); }
.hoy-lateral__cta{
  margin-top:1rem; display:grid; gap:.25rem;
  padding:1.2rem 1.3rem; border-radius:var(--radius);
  background:var(--fg); color:#FFFFFF;
  transition:transform .3s var(--ease);
}
.hoy-lateral__cta:hover{ transform:translateY(-3px); }
.hoy-lateral__cta-t{ font-weight:800; font-size:var(--t-base); }
.hoy-lateral__cta-s{ font-size:var(--t-sm); color:#FFF200; }

/* ---- Listado: buscador y filtros ---- */
.blog-cab{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; }
.blog-buscar{ width:min(100%, 360px); }
.blog-buscar .input{ width:100%; }
.filter__n{
  display:inline-grid; place-items:center; min-width:1.6em; height:1.6em; margin-left:.35em;
  border-radius:99px; font-size:.72em; font-weight:800; background:rgba(0,0,0,.07);
}
.filter.is-active .filter__n{ background:rgba(0,0,0,.14); }
.light .filter--c.is-active{ background:#00E5FF; border-color:#00E5FF; color:#00262E; }
.light .filter--m.is-active{ background:#FF00A8; border-color:#FF00A8; color:#FFFFFF; }
.light .filter--m.is-active .filter__n{ background:rgba(255,255,255,.25); }
[data-blog-empty][hidden]{ display:none; }

/* ---- Cabecera del artículo ---- */
.art-cabecera{ padding-bottom:clamp(2.5rem,6vw,4.5rem); }
.migas ol{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:var(--t-xs); color:var(--grey-2); }
.migas li + li::before{ content:"/"; margin-right:.4rem; opacity:.6; }
.migas a{ color:var(--muted); transition:color .2s ease; }
.migas a:hover{ color:var(--white); }
.art-cat{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--t-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cat); 
}
.art-cat--c{ color:#00E5FF; }
.art-cat--m{ color:#FF4FC4; }
.art-h1{ font-size:clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem); line-height:1.02; }
.art-sub{ color:#E4E4EA; font-style:italic; }
.art-firma{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.art-firma__min{ font-size:var(--t-sm); color:var(--muted); font-weight:600; }
.art-portada{ aspect-ratio:16/9; min-height:0; }

/* ---- Cuerpo del artículo ---- */
.art-seccion{ padding-top:clamp(3rem,6vw,5rem); }
.art-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; }
.art-principal{ max-width:70ch; width:100%; margin-inline:auto; }
@media (min-width:1100px){
  .art-layout--indice{ grid-template-columns:270px minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem); align-items:start; }
  .art-layout--indice .art-principal{ margin-inline:0; }
  .art-lateral{ position:sticky; top:calc(var(--nav-h) + 1.5rem); max-height:calc(100vh - var(--nav-h) - 3rem); overflow:auto; }
}
.art-indice{ background:#FFFFFF; border:1px solid var(--line); box-shadow:inset 3px 0 0 var(--cat); }
.art-indice summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin:0; color:var(--cat-ink); }
.art-indice summary::-webkit-details-marker{ display:none; }
.art-indice summary::after{ content:"+"; font-size:1.3rem; line-height:1; color:var(--fg); }
.art-indice[open] summary::after{ content:"–"; }
.art-indice[open] summary{ margin-bottom:.9rem; }
.art-indice__n{ margin-left:auto; font-weight:600; letter-spacing:.04em; text-transform:none; color:var(--grey-2); }
.light .toc a{ color:#4A4A54; line-height:1.4; }
.light .toc a::before{ color:var(--cat-ink, #E6007E); }
.light .toc a:hover, .light .toc a.is-current{ color:var(--fg); }
.toc a.is-current{ font-weight:700; }
@media (min-width:1100px){ .art-indice summary{ pointer-events:none; } .art-indice summary::after{ display:none; } }

.art-cuerpo{ font-size:clamp(1.02rem, .97rem + .25vw, 1.14rem); line-height:1.85; max-width:none; }
.art-cuerpo h2{
  position:relative; font-size:clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem); font-weight:800;
  letter-spacing:-.01em; margin-top:2.4em; padding-top:.7em; scroll-margin-top:calc(var(--nav-h) + 1.2rem);
}
.art-cuerpo h2::before{ content:""; position:absolute; top:0; left:0; width:2.6rem; height:4px; border-radius:2px; background:var(--cat); }
.art-cuerpo h3{ font-size:var(--t-lg); font-weight:800; margin-top:1.9em; }
.light .art-cuerpo h3{ color:var(--cat-ink); }
.art-cuerpo > :first-child{ margin-top:0; }
/* La primera frase del artículo, más grande y con capitular */
.art-entrada{ font-size:1.22em; line-height:1.65; color:var(--fg) !important; }
.art-entrada::first-letter{
  float:left; font-family:var(--f-display); font-size:3.6em; line-height:.86;
  padding:.06em .12em 0 0; color:var(--cat-ink);
}
/* Frases que Isabel resalta en negrita, sueltas: golpe visual */
.art-frase{
  font-size:1.3em; font-weight:700; line-height:1.4; color:var(--fg);
  padding:.1em 0 .1em 1rem; border-left:4px solid var(--cat);
}
.art-frase + .art-frase{ margin-top:.5em; }
/* Línea clave con emoji (👉 💡 📌…) */
.art-clave{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--cat-soft); border:1px solid color-mix(in srgb, var(--cat) 45%, transparent);
  border-radius:8px; padding:.9rem 1.1rem; line-height:1.6;
}
.art-clave__i{ font-size:1.3em; line-height:1.2; flex:none; }
.art-cuerpo ul.lista-emoji, .art-final ul.lista-emoji{ display:grid; gap:.7em; }
.art-cuerpo ul.lista-emoji li, .art-final ul.lista-emoji li{ display:grid; grid-template-columns:2.1em 1fr; gap:.7rem; padding-left:0; align-items:start; }
.art-cuerpo ul.lista-emoji li::before, .art-final ul.lista-emoji li::before{ content:none; }
.lista-emoji__i{
  width:2.1em; height:2.1em; display:grid; place-items:center; border-radius:50%;
  background:var(--cat-soft); font-size:.95em; line-height:1; margin-top:-.15em;
}
.light .art-cuerpo ul:not(.lista-emoji) li::before{ color:var(--cat-ink); }
.art-cuerpo ol{ counter-reset:n; display:grid; gap:.6em; padding-left:0; }
.art-cuerpo ol li{ counter-increment:n; position:relative; padding-left:2.2em; }
.art-cuerpo ol li::before{
  content:counter(n); position:absolute; left:0; top:.2em;
  width:1.55em; height:1.55em; display:grid; place-items:center; border-radius:50%;
  font-size:.8em; font-weight:800; background:var(--cat); color:#12121A;
}
.art-layout:has(.art-cuerpo--m) .art-cuerpo ol li::before{ color:#FFFFFF; }
.art-cuerpo blockquote.art-cita{
  border-left:4px solid var(--cat); font-size:1.18em; font-style:italic; padding:.3em 0 .3em 1.3rem;
}
.art-citas{
  position:relative; padding:1.4rem 1.5rem 1.4rem 3.4rem; border-radius:8px;
  background:#F7F7F9; border:1px solid var(--line);
}
.art-citas::before{
  content:"“"; position:absolute; left:.9rem; top:.35rem;
  font-family:Georgia, serif; font-size:3.6rem; line-height:1; color:var(--cat);
}
.art-citas p{ font-style:italic; color:var(--fg); }
.art-citas p + p{ margin-top:.4em; }
.art-destacado{
  font-size:1.12em; font-weight:600; color:var(--fg); line-height:1.6;
  background:#FFFFFF; border:2px solid var(--cat); border-radius:8px;
  padding:1.1rem 1.3rem; box-shadow:6px 6px 0 var(--cat-soft);
}
.art-foto{ margin-block:2.2em; }
.art-foto img{ width:100%; height:auto; border-radius:8px; display:block; }

/* Tablas reconstruidas a partir de las imágenes del Word */
.art-tabla{ margin-block:2em; }
.art-tabla__scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:8px; -webkit-overflow-scrolling:touch; }
.art-tabla__scroll:focus-visible{ outline:3px solid var(--cat); outline-offset:2px; }
.art-tabla table{ width:100%; min-width:620px; border-collapse:collapse; font-size:.9em; line-height:1.5; }
.art-tabla th, .art-tabla td{ padding:.85rem 1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.art-tabla thead th{ font-size:.78em; letter-spacing:.08em; text-transform:uppercase; font-weight:800; }
.art-tabla--y thead th{ background:#FFE100; color:#12121A; }
.art-tabla--m thead th{ background:#E6007E; color:#FFFFFF; }
.art-tabla tbody th{ font-weight:800; color:var(--fg); white-space:nowrap; }
.art-tabla tbody tr:nth-child(even){ background:#FAFAFB; }
.art-tabla tbody tr:last-child > *{ border-bottom:0; }

/* Cierre del artículo: las llamadas de Isabel, recogidas en una caja */
.art-final{
  margin-top:3rem; padding:clamp(1.4rem,3vw,2rem);
  background:#FFFFFF; border:1px solid var(--line); border-radius:8px;
  box-shadow:inset 0 4px 0 var(--cat); line-height:1.75;
}
.art-final > * + *{ margin-top:.9em; }
.art-final__label{ font-size:var(--t-xs); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--cat-ink); }
.art-final__t{ font-size:var(--t-lg); font-weight:800; color:var(--fg); }
.art-final a{ color:var(--cat-ink); font-weight:700; border-bottom:2px solid var(--cat); }
.art-final .art-clave{ background:transparent; border:0; padding:0; }
.art-final p{ color:#2C2C36; }

.art-compartir{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.art-compartir__t{ font-weight:700; font-size:var(--t-sm); }
.share a.share__btn{ font-size:.82rem; font-weight:800; color:var(--fg); }

.art-autora{
  display:grid; grid-template-columns:88px 1fr; gap:1.3rem; align-items:start;
  margin-top:2rem; padding:1.5rem; border:1px solid var(--line); border-radius:8px; background:#F7F7F9;
}
.art-autora__ph{ width:88px; height:88px; border-radius:50%; overflow:hidden; border:3px solid var(--cat); }
.art-autora__ph img{ width:100%; height:100%; object-fit:cover; }
.art-autora__label{ font-size:var(--t-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); }
.art-autora__name{ font-size:var(--t-lg); font-weight:800; }
.art-autora__bio{ margin-top:.4rem; color:#4A4A54; font-size:var(--t-sm); line-height:1.65; }
.art-autora .link-arrow{ display:inline-flex; color:var(--cat-ink); font-weight:700; }
@media (max-width:520px){ .art-autora{ grid-template-columns:1fr; } }

.art-news{
  margin-top:2rem; display:grid; grid-template-columns:1.1fr 1fr; gap:1.4rem; align-items:center;
  padding:clamp(1.4rem,3vw,2rem); border-radius:8px; background:#FFFFFF;
  border:2px solid var(--fg); box-shadow:8px 8px 0 var(--cat);
  scroll-margin-top:calc(var(--nav-h) + 1.5rem);
}
.art-news__label{ font-size:var(--t-xs); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--cat-ink); }
.art-news__t{ font-size:var(--t-lg); font-weight:800; line-height:1.25; margin:.3rem 0 .4rem; }
.art-news__form{ display:grid; gap:.7rem; }
.art-news__form .input{ width:100%; }
@media (max-width:700px){ .art-news{ grid-template-columns:1fr; box-shadow:6px 6px 0 var(--cat); } }

.art-nav{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; }
.art-nav__item{
  display:grid; gap:.35rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:8px;
  background:#FFFFFF; transition:border-color .25s ease, transform .3s var(--ease);
}
.art-nav__item:hover{ border-color:var(--cat); transform:translateY(-3px); }
.art-nav__item--sig{ text-align:right; }
.art-nav__dir{ font-size:var(--t-xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cat-ink); }
.art-nav__t{ font-weight:700; line-height:1.35; color:var(--fg); }
@media (max-width:600px){ .art-nav{ grid-template-columns:1fr; } .art-nav__item--sig{ text-align:left; } }

#comentarios{ scroll-margin-top:var(--nav-h); }
/* Etiqueta de categoría con su color también sobre blanco */
.light .post-card__tag--c, .bleed--light .post-card__tag--c{ background:#00E5FF; color:#00262E; }
.light .post-card__tag--m, .bleed--light .post-card__tag--m{ background:#E6007E; color:#FFFFFF; }
.post-card__tag--m{ background:#E6007E; }
/* En el móvil, cada fila de la tabla se convierte en una ficha: sin scroll lateral */
@media (max-width:640px){
  .art-tabla__scroll{ border:0; overflow:visible; }
  .art-tabla table{ min-width:0; font-size:.95em; }
  .art-tabla thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .art-tabla table, .art-tabla tbody, .art-tabla tr, .art-tabla th, .art-tabla td{ display:block; width:100%; }
  .art-tabla tbody{ display:grid; gap:1rem; }
  .art-tabla tr{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#FFFFFF !important; }
  .art-tabla tbody th{ white-space:normal; font-size:1.05em; padding:.8rem 1rem; }
  .art-tabla--y tbody th{ background:#FFE100; }
  .art-tabla--m tbody th{ background:#E6007E; color:#FFFFFF; }
  .art-tabla td{ padding:.7rem 1rem; }
  .art-tabla td::before{
    content:attr(data-label); display:block; margin-bottom:.2rem;
    font-size:.72em; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2);
  }
  .art-tabla tbody tr > *{ border-bottom:1px solid var(--line); }
  .art-tabla tbody tr > :last-child{ border-bottom:0; }
}
/* Índice en escritorio: el número de apartados sobra en el lateral */
@media (min-width:1100px){ .art-indice__n{ display:none; } }
/* Móvil: las categorías en una tira que se desliza, no en cinco filas */
@media (max-width:640px){
  [data-blog] .filters{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) .3rem;
    scroll-padding-inline:var(--gutter);
  }
  [data-blog] .filters::-webkit-scrollbar{ display:none; }
  [data-blog] .filter{ white-space:nowrap; flex:none; }
}
/* Manifiesto, "Saber no es lo mismo que aplicar": en el móvil la frase
   se lee en orden (Saber / no es lo mismo que / Aplicar) */
@media (max-width:900px){
  .bleed__stage--frase{ display:flex; flex-direction:column; }
  .bleed__stage--frase .ann-layer{ display:contents; }
  .bleed__stage--frase .bleed__word--out{ order:1; }
  .bleed__stage--frase .ann--entre{ order:2; margin:.4rem 0 .5rem; }
  .bleed__stage--frase .bleed__word--m{ order:3; }
  .bleed__stage--frase .ann:not(.ann--entre){ order:4; margin-top:1.7rem; }
}

/* ============================================================
   52. BLANCO CON CARÁCTER
   La base es blanca (lo pidió Isabel), pero el blanco no puede
   quedar plano. El relieve lo dan tres cosas de la propia marca,
   las mismas que ya llevan los botones:
     · contorno negro firme (2px)
     · sombra dura desplazada en amarillo, magenta o cian
     · etiquetas tipo pegatina y separadores de tres colores
   Todo afecta solo a las zonas blancas; las negras no cambian.
   ============================================================ */
.light, .bleed--light{
  --ink-line:#12121A;
  --sh-y:#FFE100; --sh-m:#FF2DB4; --sh-c:#22D3EE;
  --sombra:var(--sh-y);
}

/* ---- Tarjetas: contorno negro + sombra de color ---- */
.light .card, .bleed--light .card,
.light .step, .bleed--light .step,
.light .traffic__card, .bleed--light .traffic__card,
.light .poll, .bleed--light .poll,
.light .post-mini, .bleed--light .post-mini,
.light .hoy, .light .art-final, .light .art-autora, .light .art-nav__item, .light .art-indice{
  background:#FFFFFF;
  border:2px solid var(--ink-line);
  border-radius:12px;
  box-shadow:6px 6px 0 var(--sombra);
  transition:transform .3s var(--ease-out-back), box-shadow .3s var(--ease), border-color .2s ease;
}
.light .card:hover, .bleed--light .card:hover,
.light .step:hover, .bleed--light .step:hover,
.light .traffic__card:hover, .bleed--light .traffic__card:hover,
.light .post-mini:hover, .bleed--light .post-mini:hover,
.light .hoy:hover, .light .art-nav__item:hover{
  border-color:var(--ink-line);
  transform:translate(-3px,-3px);
  box-shadow:10px 10px 0 var(--sombra);
}
/* La barra fina de arriba sobra: el contorno ya la sustituye */
.light .card::before, .bleed--light .card::before{ display:none; }
.light .card::after, .bleed--light .card::after{ display:none; }

/* Color de la sombra: el de la variante, o rotando en las rejillas */
:where(.light, .bleed--light) :where(.grid, .lineup, .flex) > :where(.card, .traffic__card, .post-card):nth-child(3n+2){ --sombra:var(--sh-m); }
:where(.light, .bleed--light) :where(.grid, .lineup, .flex) > :where(.card, .traffic__card, .post-card):nth-child(3n+3){ --sombra:var(--sh-c); }
.light .card--y, .light .card--hy, .bleed--light .card--y, .bleed--light .card--hy{ --sombra:var(--sh-y); }
.light .card--m, .bleed--light .card--m{ --sombra:var(--sh-m); }
.light .card--c, .light .card--hc, .bleed--light .card--c, .bleed--light .card--hc{ --sombra:var(--sh-c); }
.light .card--hard, .bleed--light .card--hard{ --sombra:var(--sh-m); box-shadow:8px 8px 0 var(--sombra); }
.light .card--hard.card--hy, .bleed--light .card--hard.card--hy{ --sombra:var(--sh-y); }
.light .card--hard.card--hc, .bleed--light .card--hard.card--hc{ --sombra:var(--sh-c); }
.light .traffic__card--red{ --sombra:var(--sh-m); }
.light .traffic__card--yellow{ --sombra:var(--sh-y); }
.light .traffic__card--green{ --sombra:var(--sh-c); }
.light .step--free{ --sombra:var(--sh-c); }
.light .step--top{ --sombra:var(--sh-m); }
.light .step, .bleed--light .step{ border-color:var(--ink-line); }
.light .step--top, .light .step--free{ border-color:var(--ink-line); }

/* Tarjetas del blog: sombra en el color de su categoría */
.light .post-card, .bleed--light .post-card{
  background:#FFFFFF; border:2px solid var(--ink-line); border-radius:12px;
  box-shadow:6px 6px 0 var(--cat, var(--sombra)) !important;
  transition:transform .3s var(--ease-out-back), box-shadow .3s var(--ease);
}
.light .post-card:hover, .bleed--light .post-card:hover{
  border-color:var(--ink-line); transform:translate(-3px,-3px);
  box-shadow:10px 10px 0 var(--cat, var(--sombra)) !important;
}
.light .post-card__media{ border-bottom:2px solid var(--ink-line); }
.light .post-card__tag{ border:1.5px solid var(--ink-line); }
.light .hoy{ --sombra:var(--cat); box-shadow:8px 8px 0 var(--cat); }
.light .hoy:hover{ box-shadow:12px 12px 0 var(--cat); }
.light .hoy__media{ border-bottom:2px solid var(--ink-line); }
.light .post-mini{ --sombra:var(--cat, var(--sh-y)); box-shadow:4px 4px 0 var(--sombra); }
.light .post-mini:hover{ box-shadow:7px 7px 0 var(--sombra); transform:translate(-2px,-2px); }
.light .art-final, .light .art-indice, .light .art-autora, .light .art-nav__item{ --sombra:var(--cat); }
.light .art-autora{ background:#FFFFFF; }
.light .art-indice{ box-shadow:5px 5px 0 var(--cat); }

/* ---- Etiquetas (eyebrow) como pegatinas ---- */
.light .eyebrow, .bleed--light .eyebrow{
  background:var(--ink-line); color:#FFE100;
  padding:.55em 1.05em .5em; border-radius:99px;
  letter-spacing:.18em; line-height:1.2;
  transform:rotate(-1.5deg);
}
.light .eyebrow::before, .bleed--light .eyebrow::before{
  width:.55em; height:.55em; border-radius:50%; background:currentColor;
}
.light .eyebrow--m, .bleed--light .eyebrow--m{ background:#E6007E; color:#FFFFFF; transform:rotate(1.2deg); }
.light .eyebrow--c, .bleed--light .eyebrow--c{ background:#22D3EE; color:#06262E; transform:rotate(-1deg); }
/* Dentro de tarjetas y formularios, sin girar: ahí ordena, no decora */
.light :is(.card, .art-final, .art-news, form) .eyebrow{ transform:none; }

/* ---- Titulares con más pegada ---- */
.light .outline-y, .bleed--light .outline-y{
  color:#FFE100; -webkit-text-stroke:2px var(--ink-line); paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--ink-line);
}
.light .outline, .bleed--light .outline{
  color:#FFFFFF; -webkit-text-stroke:2px var(--ink-line); paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--sh-m);
}
.light .card__num, .bleed--light .card__num{
  color:var(--sombra); -webkit-text-stroke:2px var(--ink-line); paint-order:stroke fill;
}
.light .stat__num, .bleed--light .stat__num{
  color:var(--ink-line); text-shadow:4px 4px 0 var(--sh-y);
}
.light .quiz__score, .bleed--light .quiz__score{ color:var(--ink-line); text-shadow:5px 5px 0 var(--sh-m); }

/* ---- Botones: contorno negro, como pegatinas ---- */
.light .btn:not(.btn--ghost), .bleed--light .btn:not(.btn--ghost){ border:2px solid var(--ink-line); }
.light .btn--ghost, .bleed--light .btn--ghost{ border:2px solid var(--ink-line); color:var(--ink-line); box-shadow:4px 4px 0 var(--sh-y); }
.light .btn--ghost:hover, .bleed--light .btn--ghost:hover{ box-shadow:8px 8px 0 var(--sh-y); }

/* ---- Listas: el check en amarillo con contorno ---- */
.light .checks li::before, .bleed--light .checks li::before{
  background:var(--ink-line);
}
.light .checks li, .bleed--light .checks li{ position:relative; }

/* ---- Campos de formulario ---- */
.light .input, .light .textarea, .light .select,
.bleed--light .input, .bleed--light .textarea, .bleed--light .select{
  border:2px solid var(--ink-line); border-radius:10px;
}
.light .input:focus, .light .textarea:focus, .light .select:focus,
.bleed--light .input:focus, .bleed--light .textarea:focus, .bleed--light .select:focus{
  outline:none; box-shadow:4px 4px 0 var(--sh-y);
}

/* ---- Opciones del test y de la encuesta ---- */
.light .quiz__opt, .light .poll__opt,
.bleed--light .quiz__opt, .bleed--light .poll__opt{ border:2px solid var(--ink-line); border-radius:10px; background:#FFFFFF; }
.light .quiz__opt:hover, .light .poll__opt:hover:not(:disabled){ box-shadow:4px 4px 0 var(--sh-y); }

/* ---- Acordeón (preguntas frecuentes) ---- */
.light .acc, .bleed--light .acc{ border-bottom:2px solid var(--ink-line); }
.light .accordion, .bleed--light .accordion{ border-top:2px solid var(--ink-line); }

/* ---- Filtros del blog y etiquetas pequeñas ---- */
.light .filter, .bleed--light .filter{ border:2px solid var(--ink-line); color:var(--ink-line); }
.light .filter.is-active{ box-shadow:3px 3px 0 var(--ink-line); }
.light .tag, .bleed--light .tag{ border:1.5px solid var(--ink-line); color:var(--ink-line); background:#FFFFFF; }

/* ---- Imágenes de las tarjetas de curso y artículos ---- */
.light .art-portada{ border:2px solid var(--ink-line); }

/* ---- Ritmo entre bloques blancos: separador de tres colores ---- */
.light + .light, .bleed--light + .light, .light + .bleed--light{
  border-top:0;
  background-image:
    linear-gradient(#FFE100,#FFE100),
    linear-gradient(#FF2DB4,#FF2DB4),
    linear-gradient(#22D3EE,#22D3EE);
  background-size:44px 6px, 44px 6px, 44px 6px;
  background-position:calc(50% - 50px) 0, 50% 0, calc(50% + 50px) 0;
  background-repeat:no-repeat;
}

/* ---- Halos de color: sobre blanco se notan, sin ensuciar ---- */
.light .halo, .bleed--light .halo{ opacity:.55; filter:blur(40px); }

/* ---- Papel punteado en los bloques blancos con "grano" ---- */
.light.grain:not(.gridlines){
  background-image:radial-gradient(rgba(18,18,26,.09) 1.2px, transparent 1.3px);
  background-size:22px 22px;
}
.light.grain:not(.gridlines) > .wrap{ position:relative; z-index:1; }
/* Palabras gigantes sobre blanco: amarillo con contorno y sombra negra (estilo cómic) */
.bleed--light .bleed__word{
  color:#FFE100; -webkit-text-stroke:0;
  text-shadow:7px 7px 0 #12121A;
}
.bleed--light .bleed__word--m{ color:#FF2DB4; }
.bleed--light .bleed__word--out{ color:#FFFFFF; -webkit-text-stroke:2px #12121A; text-shadow:6px 6px 0 #FF2DB4; }
@media (max-width:760px){
  .bleed--light .bleed__word{ text-shadow:4px 4px 0 #12121A; }
  .bleed--light .bleed__word--out{ text-shadow:4px 4px 0 #FF2DB4; }
}
/* Anotaciones a mano encima de las letras gigantes: con fondo blanco, como
   una etiqueta pegada, para que la sombra negra de la letra no se cruce */
.bleed--light .ann-stroke{ background-color:#FFFFFF; padding:.06em .32em .26em; line-height:1.55; }
.bleed--light .ann-circle{ background:#FFFFFF; border-radius:50%; }
.bleed--light .ann.script{ background:#FFFFFF; padding:.05em .4em; border-radius:4px; }

/* ============================================================
   53. EFECTOS: QUE EL BLANCO SE MUEVA
   ============================================================ */
/* ---- Marca de agua gigante detrás de cada bloque blanco ---- */
main > section.light{ position:relative; overflow:hidden; overflow:clip; }
main > section.light > .wrap{ position:relative; z-index:1; }
.marca-agua{
  position:absolute; left:0; top:clamp(.5rem, 3vw, 2.5rem); z-index:0;
  white-space:nowrap; pointer-events:none; user-select:none;
  font-family:var(--f-display); text-transform:uppercase; line-height:.9;
  font-size:clamp(5.5rem, 15vw, 15rem); letter-spacing:.01em;
  color:transparent; -webkit-text-stroke:1.5px rgba(18,18,26,.075);
  will-change:transform;
}
@media (max-width:760px){ .marca-agua{ -webkit-text-stroke-width:1px; font-size:clamp(4.5rem, 24vw, 7rem); } }

/* ---- Estrella junto a los titulares ---- */
.chispa{
  display:inline-block; width:.42em; height:.42em; margin-left:.18em;
  vertical-align:.55em; line-height:0;
  animation:chispa 3.6s var(--ease) infinite;
}
.chispa svg{ width:100%; height:100%; display:block; overflow:visible; }
.chispa path{ stroke:#12121A; stroke-width:2.2; stroke-linejoin:round; }
.chispa--y path{ fill:#FFE100; }
.chispa--m path{ fill:#FF2DB4; }
.chispa--c path{ fill:#22D3EE; }
@keyframes chispa{
  0%,100%{ transform:rotate(0) scale(1); }
  45%{ transform:rotate(90deg) scale(1.18); }
  55%{ transform:rotate(90deg) scale(.92); }
}
.center .chispa, .display.center .chispa{ vertical-align:.5em; }

/* ---- Tarjetas que se pegan como una pegatina ---- */
.js .light .por-pegar{ opacity:0; }
.light .pega{
  animation:pegar .75s var(--ease-out-back) backwards;
  animation-delay:calc(var(--orden, 0) * 90ms);
}
@keyframes pegar{
  0%{ opacity:0; transform:translateY(34px) rotate(-4deg) scale(1.08); box-shadow:0 0 0 transparent; }
  60%{ opacity:1; transform:translateY(-4px) rotate(.8deg) scale(.99); }
  100%{ opacity:1; transform:none; }
}
.light .grid > .pega:nth-child(even){ animation-name:pegar-d; }
@keyframes pegar-d{
  0%{ opacity:0; transform:translateY(34px) rotate(4deg) scale(1.08); box-shadow:0 0 0 transparent; }
  60%{ opacity:1; transform:translateY(-4px) rotate(-.8deg) scale(.99); }
  100%{ opacity:1; transform:none; }
}

/* ---- Inclinación 3D al pasar el ratón ---- */
.light .inclina{ transform-style:preserve-3d; }
.light .inclina:hover{
  transform:perspective(900px) translate(-3px,-3px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .12s linear, box-shadow .3s var(--ease);
}

/* ---- Subrayado de rotulador bajo las palabras de color ---- */
.light .display :is(.c-m, .c-c, .c-y){
  background-image:linear-gradient(transparent 64%, rgba(255,225,0,.9) 64%, rgba(255,225,0,.9) 90%, transparent 90%);
  background-repeat:no-repeat; background-size:100% 100%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding-inline:.04em;
  transition:background-size .9s var(--ease) .35s;
}
.light .display .c-y{ background-image:linear-gradient(transparent 64%, rgba(255,45,180,.28) 64%, rgba(255,45,180,.28) 90%, transparent 90%); }
.js .light .reveal:not(.is-in) .display :is(.c-m, .c-c, .c-y),
.js .light .display.reveal:not(.is-in) :is(.c-m, .c-c, .c-y){ background-size:0% 100%; }

/* ---- Brillo que cruza los botones ---- */
.btn{ overflow:hidden; isolation:isolate; }
.btn::after{
  content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
  transform:translateX(-120%);
}
.btn:hover::after{ transform:translateX(120%); transition:transform .7s var(--ease); }
.btn--ghost::after{ background:linear-gradient(105deg, transparent 35%, rgba(255,225,0,.35) 50%, transparent 65%); }

@media (prefers-reduced-motion:reduce){
  .chispa{ animation:none; }
  .light .pega{ animation:none; }
  .btn:hover::after{ transition:none; transform:translateX(-120%); }
  .light .display :is(.c-m, .c-c, .c-y){ transition:none; }
}
/* Barra de desplazamiento con los colores de la casa (escritorio) */
html{ scrollbar-color:#FF2DB4 #12121A; }
.light ::selection, .bleed--light ::selection{ background:#FF2DB4; color:#FFFFFF; }
@media (max-width:480px){
  .light .eyebrow, .bleed--light .eyebrow{ letter-spacing:.1em; font-size:.7rem; padding:.55em .9em .5em; border-radius:14px; }
}

/* ============================================================
   54. NIVEL 3
   ============================================================ */
/* ---- Cortina entre páginas: tres franjas de la marca ---- */
.cortina{ position:fixed; inset:0; z-index:10000; pointer-events:none; display:grid; grid-template-columns:1fr; }
.cortina span{
  grid-area:1/1; transform:translateY(105%);
  transition:transform .5s cubic-bezier(.7,0,.25,1);
}
.cortina span:nth-child(1){ background:#FFE100; transition-delay:0s; }
.cortina span:nth-child(2){ background:#FF2DB4; transition-delay:.07s; }
.cortina span:nth-child(3){ background:#12121A; transition-delay:.14s; }
.cortina.is-entra{ pointer-events:auto; }
.cortina.is-entra span{ transform:translateY(0); }
/* Al llegar: la cortina ya está puesta y se retira hacia arriba */
.cortina.is-sale span{ animation:cortina-sale .7s cubic-bezier(.7,0,.25,1) both; transition:none; }
.cortina.is-sale span:nth-child(1){ animation-delay:.16s; }
.cortina.is-sale span:nth-child(2){ animation-delay:.08s; }
.cortina.is-sale span:nth-child(3){ animation-delay:0s; }
@keyframes cortina-sale{ from{ transform:translateY(0); } to{ transform:translateY(-105%); } }

/* ---- Titulares que se levantan palabra a palabra ---- */
.levanta .pal{
  display:inline-block; opacity:0;
  transform:translateY(.55em) rotate(5deg); transform-origin:left bottom;
  transition:opacity .5s var(--ease), transform .7s var(--ease-out-back);
  transition-delay:calc(var(--i) * 55ms);
}
.levantado .pal{ opacity:1; transform:none; }

/* ---- Texto que se llena de color al leerlo ---- */
.se-llena .tinta{ color:#8A8A96; transition:color .35s ease; }
.se-llena .tinta.on{ color:var(--fg); }
.se-llena strong .tinta.on, .se-llena b .tinta.on{ color:var(--fg); }

/* ---- Cintas: se inclinan con la velocidad ---- */
.marquee__track span{ transform:skewX(var(--skew, 0deg)); transition:transform .25s ease-out; }

/* ---- Foco de luz en las cabeceras oscuras ---- */
.foco{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--fx,50%) var(--fy,50%), rgba(255,45,180,.20), rgba(255,225,0,.08) 40%, transparent 70%);
  transition:opacity .5s ease;
}
.foco.on{ opacity:1; }

/* ---- Cursos apilados como cartas al hacer scroll (escritorio) ---- */
@media (min-width:1000px) and (min-height:700px){
  .ladder > .step{ position:sticky; top:calc(var(--nav-h) + 28px); }
  .ladder > .step:nth-child(2){ top:calc(var(--nav-h) + 46px); }
  .ladder > .step:nth-child(3){ top:calc(var(--nav-h) + 64px); }
  .ladder > .step:nth-child(4){ top:calc(var(--nav-h) + 82px); }
  .ladder > .step:nth-child(5){ top:calc(var(--nav-h) + 100px); }
  .ladder > .step:nth-child(6){ top:calc(var(--nav-h) + 118px); }
}

@media (prefers-reduced-motion:reduce){
  .cortina{ display:none; }
  .levanta .pal{ opacity:1; transform:none; transition:none; }
}
/* Mientras carga la página nueva, una capa negra (la última franja de la cortina) la tapa (sin parpadeo).
   Si el JavaScript no llega, se quita sola en 1,2 s. */
html.cortina-llega::after{
  content:""; position:fixed; inset:0; z-index:10001; background:#12121A;
  animation:cortina-quita 0s 1.2s forwards;
}
@keyframes cortina-quita{ to{ visibility:hidden; opacity:0; } }