/* ══════════════════════════════════════════════════════════
   REINICIA · Landing de venta
   Paleta e identidad propias del evento (guía gráfica oficial):
   azul glaciar · negro tinta · marfil · dorado champagne.
   NO hereda el sistema burgundy/gold del sitio institucional.
   ══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'AvenirRe';
  src:url('/assets/fonts/avenir-regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --ink:#0b0b0c;
  --ink-2:#131314;
  --ink-3:#1b1d20;
  --glacier:#b7cbd8;
  --baby:#bdc7cf;
  --gray-blue:#525d6c;
  --ivory:#f6f1e8;
  --vanilla:#fff6eb;
  --gold:#b99a5e;
  --gold-2:#95835d;
  --gold-hi:#d9c08a;
  --gold-dark:#574721;
  --ink-soft:#333b45;

  --line-dark:rgba(183,203,216,0.18);
  --line-light:rgba(82,93,108,0.2);
  --fade-dark:rgba(246,241,232,0.7);
  --fade-light:rgba(82,93,108,0.88);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;padding-bottom:84px;
  font-family:'AvenirRe','Avenir','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--ivory);color:var(--ink-2);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--gold);}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.re-wrap{max-width:1180px;margin:0 auto;padding:0 6vw;}
@media (min-width:1280px){.re-wrap{padding:0 30px;}}

h1,h2,h3,h4{font-family:'Cinzel',Georgia,serif;font-weight:400;margin:0;}
h2{font-size:clamp(26px,3.9vw,46px);line-height:1.18;letter-spacing:0.012em;}
h3{font-size:clamp(18px,2vw,24px);line-height:1.3;letter-spacing:0.02em;}
p{margin:0 0 1.05em;}
em.ac{font-style:normal;color:var(--gold);}

.re-sec{padding:clamp(70px,9vw,118px) 0;position:relative;}
.re-dark{background:var(--ink);color:var(--ivory);}
.re-dark h2,.re-dark h3,.re-dark h4{color:var(--vanilla);}
.re-glacier{
  background:var(--glacier) url('assets/reinicia/fondo-azul.webp') no-repeat center center / cover;
  color:var(--ink-2);
}
.re-ivory{background:var(--ivory);}

.re-eyebrow{
  font-size:10.5px;letter-spacing:3.2px;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.re-dark .re-eyebrow{color:var(--gold-hi);}
.re-glacier .re-eyebrow,.re-ivory .re-eyebrow,.re-plan-gen .re-rotulo{color:var(--gold-dark);}
.re-glacier .re-lede,.re-glacier .re-tres-item p,.re-glacier .re-llev p,.re-glacier .re-slogan-sub,
.re-ivory .re-lede,.re-ivory .re-pz-mov,.re-ivory .re-q .a,.re-ivory .re-cifra span,.re-ivory p.re-slogan-sub,
.re-lado-no li,.re-plan-gen .re-plan-pitch,.re-plan-gen .re-bar-text{color:var(--ink-soft);}
.re-glacier .re-tres-n,.re-glacier .re-llev-n,.re-ivory .re-tres-n,.re-ivory .re-llev-n{color:var(--gold-dark);}
.re-glacier em.ac,.re-ivory em.ac{color:var(--gold-dark);}
.re-glacier .re-testi .who,.re-ivory .re-testi .who{color:var(--gold-dark);}
.re-title{max-width:22ch;margin-bottom:16px;}
.re-lede{max-width:56ch;font-size:17px;color:var(--fade-light);margin-bottom:48px;}
.re-dark .re-lede{color:var(--fade-dark);}
.re-rule{width:60px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:0 0 30px;}

/* ── Botones ── */
/* Botón dorado de REINICIA: pastilla de vidrio en relieve.
   Tres estados: reposo, hover (la luz recorre el filo) y activo
   (procesando, mientras se espera al servidor). */
.re-btn{
  position:relative;overflow:hidden;isolation:isolate;z-index:0;
  display:inline-block;font-family:inherit;cursor:pointer;
  font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
  padding:16px 34px;border-radius:4px;
  border:1px solid rgba(255,246,235,0.45);
  background:linear-gradient(177deg,var(--gold-hi) 0%,var(--gold) 46%,#a8873f 100%);
  color:var(--ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,252,246,0.85),
    inset 0 -1px 0 rgba(90,68,22,0.5),
    inset 0 -7px 14px rgba(90,68,22,0.16),
    0 4px 14px rgba(0,0,0,0.38),
    0 1px 3px rgba(0,0,0,0.3);
  transition:background 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,transform 0.18s ease;
}
.re-btn:hover{
  background:linear-gradient(177deg,#fff3dc 0%,var(--gold-hi) 46%,var(--gold) 100%);
  border-color:rgba(255,252,246,0.7);
  color:var(--ink) !important;
}
.re-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,252,246,0.6),inset 0 2px 8px rgba(90,68,22,0.3),0 2px 6px rgba(0,0,0,0.3);}

/* Brillo especular fijo en la mitad superior: da el volumen */
.re-btn::after{
  content:'';position:absolute;left:0;right:0;top:0;height:52%;
  pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,0.4),rgba(255,255,255,0) 100%);
}

/* El reflejo que recorre el filo. En reposo está quieto e invisible;
   arranca al pasar el mouse. */
.re-btn::before{
  content:'';position:absolute;top:0;left:0;pointer-events:none;z-index:-2;
  width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,0.92) 0%,
    rgba(255,252,242,0.5) 26%,
    rgba(255,248,232,0.2) 48%,
    rgba(255,248,232,0) 70%);
  filter:blur(6px);
  opacity:0;transition:opacity 0.35s ease;
}
.re-btn:hover::before,.re-btn:focus-visible::before{
  opacity:1;animation:re-recorre 5s linear infinite;
}

/* ── Tercer estado: procesando ──
   Se activa al hacer clic y bloquea el botón hasta que el servidor responda,
   para que nadie dispare la misma acción dos veces. */
.re-btn.is-loading{
  cursor:wait;pointer-events:none;
  color:transparent !important;
  background:linear-gradient(177deg,#c9ab68 0%,#b2943f 46%,#8f7334 100%);
}
.re-btn.is-loading::after{opacity:0.5;}
/* El reflejo sigue corriendo mientras se espera: señal de que algo pasa */
.re-btn.is-loading::before{opacity:1;animation:re-recorre 1.6s linear infinite;}
/* Aro que gira, centrado sobre el botón */
.re-btn-spin{
  position:absolute;top:50%;left:50%;width:19px;height:19px;
  margin:-9.5px 0 0 -9.5px;border-radius:50%;z-index:4;
  border:2px solid rgba(26,26,28,0.25);
  border-top-color:var(--ink);
  animation:re-gira 0.7s linear infinite;
}
@keyframes re-gira{to{transform:rotate(1turn);}}

/* Variantes que NO son doradas: vuelven a su tratamiento plano */
.re-btn-line,.re-btn-dark{
  box-shadow:none;border-radius:2px;
}
.re-btn-line::after,.re-btn-line::before,
.re-btn-dark::after,.re-btn-dark::before{display:none;}
.re-btn-line{
  background:transparent;color:var(--vanilla) !important;
  border-color:rgba(183,203,216,0.45);
}
.re-btn-line:hover{border-color:var(--gold);color:var(--gold-hi) !important;background:transparent;}
.re-btn-line:active{transform:translateY(1px);box-shadow:none;}
.re-btn-dark{background:var(--ink);border-color:var(--ink);color:var(--vanilla) !important;}
.re-btn-dark:hover{background:var(--ink-3);border-color:var(--ink-3);color:var(--vanilla) !important;}
.re-btn-dark:active{transform:translateY(1px);box-shadow:none;}
.re-btn-dark.is-loading{background:var(--ink-3);}
.re-btn-dark .re-btn-spin,.re-btn-line .re-btn-spin{
  border-color:rgba(246,241,232,0.28);border-top-color:var(--vanilla);
}
.re-btn-line.is-loading,.re-btn-dark.is-loading{cursor:wait;pointer-events:none;color:transparent !important;}
.re-note{font-size:13px;color:var(--fade-light);margin-top:14px;}
.re-dark .re-note{color:rgba(246,241,232,0.55);}

/* ── Header ── */
.re-header{
  position:sticky;top:0;z-index:70;
  background:rgba(11,11,12,0.9);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line-dark);
}
.re-nav{display:flex;align-items:center;justify-content:space-between;gap:26px;height:68px;}
.re-nav-logo img{height:26px;width:auto;}
.re-links{display:flex;gap:28px;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;}
.re-links a{color:rgba(246,241,232,0.72);}
.re-links a:hover{color:var(--gold-hi);}
.re-header .re-btn{padding:11px 22px;font-size:11px;letter-spacing:1.4px;}

/* ── Hero ── */
.re-hero{
  position:relative;overflow:hidden;color:var(--ivory);
  background:var(--ink);
  padding:clamp(56px,8vw,96px) 0 clamp(64px,8vw,104px);
}
.re-hero-bg{position:absolute;inset:0;z-index:0;}
.re-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.re-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,11,12,0.93) 0%,rgba(11,11,12,0.78) 46%,rgba(11,11,12,0.42) 100%);
}
.re-hero-glow{
  position:absolute;right:-8%;top:-14%;width:52%;height:120%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 60% 40%,rgba(185,154,94,0.16),transparent 66%);
}
.re-hero-inner{position:relative;z-index:2;}
.re-hero-grid{display:grid;grid-template-columns:1.08fr 0.92fr;gap:56px;align-items:center;}
.re-hero-logo{max-width:clamp(300px,42vw,520px);margin-bottom:22px;}
.re-hero-logo img{width:100%;}
.re-hero-claim{
  font-family:'Cinzel',Georgia,serif;font-weight:400;
  font-size:clamp(20px,2.7vw,33px);line-height:1.32;letter-spacing:0.015em;
  max-width:24ch;margin:0 0 20px;color:var(--vanilla);
}
.re-hero-sub{max-width:44ch;font-size:16.5px;color:rgba(246,241,232,0.78);margin-bottom:32px;}

/* Selector de ciudad */
.re-city-block{margin-bottom:30px;}
.re-city-label{
  display:block;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold-hi);margin-bottom:12px;
}
.re-cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;max-width:480px;}
.re-city{
  font-family:inherit;text-align:left;cursor:pointer;
  background:rgba(183,203,216,0.06);border:1px solid rgba(183,203,216,0.28);
  border-radius:3px;padding:15px 18px;color:var(--ivory);
  transition:border-color 0.28s,background 0.28s;
}
.re-city:hover{border-color:var(--gold);}
.re-city[aria-pressed="true"]{background:var(--glacier);border-color:var(--glacier);color:var(--ink);}
.re-city b{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:17px;margin-bottom:4px;letter-spacing:0.05em;
}
.re-city small{display:block;font-size:12px;opacity:0.76;}
.re-city-soon{opacity:0.45;cursor:default;}
.re-city-soon:hover{border-color:rgba(183,203,216,0.28);}

/* ── Glass frozen: una sola receta para todas las cajas de la página.
      Sobre fondo oscuro, hielo translúcido con halo; sobre fondo claro,
      la misma idea en blanco. El halo lo dibuja ::before por detrás. ── */
.re-frost{
  position:relative;
  background:linear-gradient(150deg,rgba(214,232,242,0.14),rgba(183,203,216,0.04) 52%,rgba(214,232,242,0.1));
  backdrop-filter:blur(26px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.08);
  border:1px solid rgba(214,232,242,0.26);
  box-shadow:
    0 0 32px rgba(183,203,216,0.12),
    0 18px 54px rgba(0,0,0,0.5),
    inset 0 1.5px 0 rgba(255,255,255,0.32),
    inset 0 -1.5px 3px rgba(0,0,0,0.28);
  transition:box-shadow 0.4s ease,border-color 0.4s ease;
}
.re-frost:hover{
  border-color:rgba(214,232,242,0.42);
  box-shadow:
    0 0 46px rgba(183,203,216,0.2),
    0 22px 62px rgba(0,0,0,0.55),
    inset 0 1.5px 0 rgba(255,255,255,0.4),
    inset 0 -1.5px 3px rgba(0,0,0,0.28);
}
/* Reflejo especular diagonal */
.re-frost::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 76%,rgba(255,255,255,0.18) 100%);
  mix-blend-mode:screen;opacity:0.62;
}
.re-frost > *{position:relative;z-index:1;}

/* Variante sobre fondos claros */
.re-frost-light{
  background:linear-gradient(150deg,rgba(255,255,255,0.62),rgba(255,255,255,0.26) 52%,rgba(255,255,255,0.5));
  border-color:rgba(255,255,255,0.8);
  box-shadow:
    0 0 26px rgba(118,152,178,0.13),
    0 18px 50px rgba(28,38,48,0.14),
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -1.5px 2px rgba(28,38,48,0.06);
}
.re-frost-light:hover{
  border-color:#fff;
  box-shadow:
    0 0 38px rgba(118,152,178,0.2),
    0 22px 58px rgba(28,38,48,0.18),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1.5px 2px rgba(28,38,48,0.06);
}
.re-frost-light::after{opacity:0.5;}

/* Panel de datos del hero */
.re-hero-panel{
  background:linear-gradient(150deg,rgba(214,232,242,0.14),rgba(183,203,216,0.04) 52%,rgba(214,232,242,0.1));
  backdrop-filter:blur(26px) saturate(180%) brightness(1.08);-webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.08);
  border:1px solid rgba(183,203,216,0.22);border-radius:4px;
  padding:30px 30px 32px;position:relative;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,0.5),inset 0 1px 0 rgba(246,241,232,0.2);
}
.re-hero-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(246,241,232,0.3) 0%,transparent 26%,transparent 76%,rgba(246,241,232,0.14) 100%);
  mix-blend-mode:screen;opacity:0.6;
}
.re-panel-row{position:relative;z-index:1;}
.re-panel-label{
  font-size:10px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--gold-hi);margin:26px 0 12px;
}
.re-panel-row:first-child .re-panel-label{margin-top:0;}
.re-panel-venue{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:17px;letter-spacing:0.03em;color:var(--vanilla);margin:0 0 4px;}
.re-panel-when{font-size:13.5px;color:rgba(246,241,232,0.7);margin:0;}

.re-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.re-cd-unit{
  text-align:center;padding:12px 4px 10px;border-radius:3px;
  background:rgba(11,11,12,0.34);border:1px solid rgba(183,203,216,0.16);
}
.re-cd-num{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:clamp(20px,2.7vw,27px);line-height:1;color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}
.re-cd-lab{display:block;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(246,241,232,0.5);margin-top:6px;}

.re-bar{height:5px;border-radius:99px;background:rgba(183,203,216,0.14);overflow:hidden;}
.re-bar-fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--gold-hi),var(--gold),var(--gold-2));
  background-size:220% 100%;animation:re-shimmer 3.4s linear infinite;
  transition:width 1.3s cubic-bezier(.2,.8,.2,1);
}
@keyframes re-shimmer{0%{background-position:220% 0;}100%{background-position:-220% 0;}}
.re-bar-text{font-size:12px;color:rgba(246,241,232,0.62);margin-top:9px;}

/* ── Tres palabras ── */
.re-slogan{
  text-align:center;font-size:clamp(23px,3.2vw,40px);line-height:1.26;
  max-width:24ch;margin:0 auto 16px;
}
.re-slogan-sub{
  text-align:center;font-size:16px;color:var(--fade-light);
  max-width:52ch;margin:0 auto 54px;
}
.re-tres{display:grid;grid-template-columns:repeat(3,1fr);}
.re-tres-n{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:12px;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.re-tres-item h3{margin-bottom:10px;}
.re-tres-item p{font-size:15.5px;line-height:1.62;margin:0;color:var(--fade-light);}

/* En escritorio son tarjetas, no acordeón: el <summary> no se comporta
   como control y el contenido queda siempre a la vista. */
.re-tres-item > summary{list-style:none;display:block;cursor:default;}
.re-tres-item > summary::-webkit-details-marker{display:none;}
.re-tres-item > summary::marker{content:'';}
.re-tres-chev{display:none;}
.re-tres-wrap{overflow:hidden;}

/* ── El reloj ── */
.re-reloj{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}
.re-reloj p{font-size:17px;max-width:44ch;}
.re-sentencia{
  font-family:'Cinzel',Georgia,serif;font-weight:400;
  font-size:clamp(19px,2.5vw,29px);line-height:1.38;letter-spacing:0.012em;
  border-left:1px solid var(--gold);padding-left:28px;
  max-width:20ch;color:var(--vanilla);margin:0 0 26px;
}
.re-oidoras{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin-top:60px;border-top:1px solid var(--line-dark);
}
.re-oid{padding:32px 36px 0;border-left:1px solid var(--line-dark);}
.re-oid:first-child{padding-left:0;border-left:none;}
.re-oid h4{font-size:20px;color:var(--gold-hi);margin-bottom:10px;}
.re-oid p{font-size:15.5px;margin:0;max-width:38ch;color:var(--fade-dark);}

/* ── Tablero interactivo ── */
.re-tablero{display:grid;grid-template-columns:0.9fr 1.1fr;gap:58px;align-items:center;}
.re-board{
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
  width:100%;max-width:400px;aspect-ratio:1/1;margin:0 auto;
  border:1px solid var(--gray-blue);
}
.re-sq{position:relative;min-width:0;min-height:0;overflow:hidden;}
.re-sq.dark{background:rgba(82,93,108,0.11);}
.re-sq.on::after{
  content:'';position:absolute;inset:0;
  background:var(--glacier);animation:re-pop 0.3s ease-out;
}
.re-sq.center{display:flex;align-items:center;justify-content:center;}
.re-sq .re-pieza{
  position:absolute;inset:0;z-index:2;line-height:1;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(26px,5vw,42px);color:var(--gray-blue);
}
@keyframes re-pop{from{opacity:0;transform:scale(0.72);}to{opacity:1;transform:scale(1);}}

.re-pz-sel{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px;}
.re-pz-btn{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-family:inherit;font-size:13px;letter-spacing:0.6px;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--line-light);border-radius:99px;
  padding:10px 20px 10px 15px;
  transition:background 0.26s,border-color 0.26s,color 0.26s;
}
.re-pz-btn .g{font-size:20px;line-height:1;}
.re-pz-btn:hover{border-color:var(--gold);}
.re-pz-btn[aria-pressed="true"]{background:var(--ink);color:var(--vanilla);border-color:var(--ink);}
.re-pz-info{min-height:200px;}
.re-pz-verbo{
  font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:clamp(28px,3.5vw,40px);line-height:1.1;letter-spacing:0.01em;margin:0 0 8px;
}
.re-pz-verbo em{font-style:normal;color:var(--gold);}
.re-pz-area{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gray-blue);margin:0 0 18px;}
.re-pz-desc{font-size:16.5px;line-height:1.62;max-width:42ch;margin:0 0 14px;}
.re-pz-mov{font-size:14.5px;color:var(--fade-light);margin:0;max-width:42ch;font-style:italic;}

/* ── Peón y reina ── */
.re-peon-sec{padding-top:clamp(36px,4vw,50px);padding-bottom:clamp(36px,4vw,50px);}
.re-peon-sec .re-eyebrow,.re-peon-sec .re-title,.re-peon-sec .re-lede{text-align:center;}
.re-peon-sec .re-title{max-width:24ch;margin-left:auto;margin-right:auto;}
.re-peon-sec .re-rule{margin-left:auto;margin-right:auto;}
.re-peon-sec .re-lede{max-width:64ch;margin-left:auto;margin-right:auto;margin-bottom:0;}
/* El video de fondo entra solo cuando la sección se acerca (reinicia.js):
   así no arranca una descarga de YouTube al abrir la página. */
.re-peon-sec{position:relative;overflow:hidden;isolation:isolate;}
.re-peon-video{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.re-peon-video iframe{
  position:absolute;top:50%;left:50%;
  /* Cubre el área sin barras: el lado mayor manda */
  width:max(100%, calc(100vh * 16 / 9));
  height:max(100%, calc(100vw * 9 / 16));
  min-width:100%;min-height:100%;
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease;
}
.re-peon-video iframe.re-on{opacity:1;}
/* Vela oscura: mantiene legible el texto y deja brillar las fichas doradas */
.re-peon-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(10,10,10,0.7) 22%, rgba(10,10,10,0.62) 62%, var(--ink) 100%),
    radial-gradient(ellipse at 28% 34%, rgba(10,10,10,0.72), transparent 62%);
}
.re-promo{margin-top:clamp(14px,1.8vw,22px);max-width:740px;margin-left:auto;margin-right:auto;}

/* Las dos fichas de referencia: más pequeñas, a los extremos del carril */
.re-promo-ends{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:12px;}
.re-promo-end{text-align:center;opacity:0.5;}
.re-promo-end img{
  width:clamp(40px,5vw,58px);height:auto;display:block;margin:0 auto 8px;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,0.8));
}
.re-promo-end-goal img{width:clamp(52px,6.4vw,76px);}
.re-promo-end span{
  font-family:'AvenirRe',sans-serif;font-size:10.5px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--fade-dark);
}
.re-promo-ends{transition:opacity 0.7s ease;}
.re-promo.is-crowned .re-promo-ends{opacity:0;}

/* El carril */
.re-promo-track{position:relative;padding-top:clamp(68px,8.6vw,98px);}
.re-promo-line{
  position:absolute;left:0;right:0;top:clamp(68px,8.6vw,98px);
  height:1px;background:rgba(255,255,255,0.1);
}
.re-promo-line-fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg, rgba(217,192,138,0.2), var(--gold-hi));
  transition:width 0.55s cubic-bezier(.3,.9,.3,1);
}
.re-rail{display:grid;grid-template-columns:repeat(8,1fr);border:1px solid rgba(255,255,255,0.14);cursor:grab;touch-action:none;}
.re-rail:active{cursor:grabbing;}
.re-sqp{
  position:relative;height:clamp(46px,5.2vw,60px);
  display:flex;align-items:flex-end;justify-content:center;
  transition:background 0.4s ease, box-shadow 0.4s ease;
}
.re-sqp-light{background:rgba(255,255,255,0.09);}
.re-sqp-dark{background:rgba(255,255,255,0.025);}
.re-sqp-n{
  font-family:'AvenirRe',sans-serif;font-size:10px;letter-spacing:1px;
  color:rgba(255,255,255,0.28);padding-bottom:5px;transition:color 0.4s;
}
/* Casillas ya recorridas */
.re-sqp.is-done{background:rgba(217,192,138,0.13);}
.re-sqp.is-done .re-sqp-n{color:rgba(217,192,138,0.75);}
/* Casilla actual */
.re-sqp.is-here{
  background:rgba(217,192,138,0.24);
  box-shadow:inset 0 0 0 1px var(--gold-hi);
}
.re-sqp.is-here .re-sqp-n{color:var(--gold-hi);}
/* Casilla bajo el dedo mientras se arrastra */
.re-sqp.is-target{background:rgba(217,192,138,0.32);box-shadow:inset 0 0 0 1px rgba(255,250,240,0.7);}
.re-sqp.is-target .re-sqp-n{color:#fff;}
/* La octava casilla late para invitar a llegar */
.re-sqp-goal::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(217,192,138,0.45);
  animation:re-goal 2.4s ease-in-out infinite;
}
.re-promo.is-crowned .re-sqp-goal::after{animation:none;box-shadow:inset 0 0 0 1px var(--gold-hi);}
@keyframes re-goal{0%,100%{opacity:0.25;}50%{opacity:0.9;}}

/* La ficha que se mueve y se transforma */
.re-promo-piece{
  position:absolute;bottom:calc(100% - clamp(68px,8.6vw,98px));
  left:6.25%;transform:translateX(-50%);
  width:clamp(38px,4.8vw,58px);cursor:grab;
  transition:left 0.55s cubic-bezier(.3,.9,.3,1), width 0.6s ease;
  touch-action:none;
}
.re-promo-piece:active{cursor:grabbing;}
.re-promo-piece.is-grabbing{cursor:grabbing;}

/* Balanceo de reposo: sugiere que la ficha se puede tomar */
.re-promo-piece.is-idle .re-pp-peon{animation:re-invita 2.6s ease-in-out infinite;}
@keyframes re-invita{
  0%,72%,100%{transform:translateX(0) rotate(0deg);}
  80%{transform:translateX(3px) rotate(2.2deg);}
  88%{transform:translateX(-2px) rotate(-1.6deg);}
}

/* Rótulo "Arrástrame" flotando sobre la ficha */
.re-pp-hint{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;
  font-family:'AvenirRe',sans-serif;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink);background:var(--gold-hi);
  padding:5px 11px;border-radius:99px;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  opacity:0;transition:opacity 0.5s ease, transform 0.5s ease;
}
.re-pp-hint::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--gold-hi);
}
.re-promo-piece.is-idle .re-pp-hint{opacity:1;animation:re-flota 2.6s ease-in-out infinite;}
@keyframes re-flota{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-4px);}
}
.re-promo.is-crowned .re-pp-hint{opacity:0;}

@media (prefers-reduced-motion:reduce){
  .re-promo-piece.is-idle .re-pp-peon,.re-promo-piece.is-idle .re-pp-hint{animation:none;}
}
.re-promo-piece:focus-visible{outline:2px solid var(--gold-hi);outline-offset:8px;border-radius:4px;}
.re-pp{
  width:100%;height:auto;display:block;
  -webkit-user-drag:none;user-drag:none;
  user-select:none;-webkit-user-select:none;pointer-events:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,0.85));
  transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.3,1.5,.4,1);
}
.re-pp-reina{position:absolute;left:0;bottom:0;opacity:0;transform:scale(0.7);}
/* Área de agarre generosa alrededor de la ficha, para el pulgar */
.re-promo-piece::before{z-index:-2;}
.re-promo-piece{padding:6px;margin:-6px;box-sizing:content-box;}
.re-promo.is-crowned .re-promo-piece{width:clamp(52px,6.4vw,78px);}
.re-promo.is-crowned .re-pp-peon{opacity:0;transform:scale(0.7);}
.re-promo.is-crowned .re-pp-reina{opacity:1;transform:scale(1);}
/* El destello de la coronación */
.re-pp-flash{
  position:absolute;left:50%;bottom:0;width:200px;height:200px;
  transform:translate(-50%,42%);pointer-events:none;opacity:0;
  background:radial-gradient(circle, rgba(217,192,138,0.75), rgba(217,192,138,0) 62%);
}
.re-promo.is-crowned .re-pp-flash{animation:re-flash 1.5s ease-out forwards;}
@keyframes re-flash{
  0%{opacity:0;transform:translate(-50%,42%) scale(0.3);}
  28%{opacity:1;transform:translate(-50%,42%) scale(1.05);}
  100%{opacity:0;transform:translate(-50%,42%) scale(1.5);}
}

/* Panel de texto y acciones */
.re-promo-panel{margin-top:clamp(16px,2vw,24px);text-align:center;}
.re-promo-count{
  font-family:'AvenirRe',sans-serif;font-size:10px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px;
}
.re-promo-copy{
  font-family:'Cinzel',Georgia,serif;font-weight:400;
  font-size:clamp(15.5px,1.7vw,20px);line-height:1.42;letter-spacing:0.012em;
  color:var(--vanilla);margin:0 auto 16px;min-height:2.5em;max-width:40ch;
}
.re-promo.is-crowned .re-promo-copy{color:var(--gold-hi);}
.re-promo-actions{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
.re-btn-promo{
  cursor:pointer;font-family:'AvenirRe',sans-serif;min-width:19em;text-align:center;
  padding:18px 40px;font-size:13px;letter-spacing:2.6px;
  background:linear-gradient(160deg,#e3c98f,#c9a961 46%,#a98a4e);
  border-color:#e8d3a2;color:#1a1408;
  box-shadow:
    0 0 0 1px rgba(232,211,162,0.5),
    0 14px 40px rgba(201,169,97,0.42),
    0 0 70px rgba(201,169,97,0.24),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
.re-btn-promo:hover{
  background:linear-gradient(160deg,#f0d9a6,#d8b970 46%,#b8975a);
  box-shadow:
    0 0 0 1px rgba(240,217,166,0.65),
    0 18px 52px rgba(201,169,97,0.55),
    0 0 92px rgba(201,169,97,0.34),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
.re-btn-promo{grid-column:2;}
.re-promo-reset{
  /* Tercera columna: no desplaza el botón ni se sale del bloque */
  grid-column:3;justify-self:start;margin-left:20px;white-space:nowrap;
  visibility:hidden;
  background:none;border:none;cursor:pointer;padding:0;
  font-family:'AvenirRe',sans-serif;font-size:12.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--fade-dark);
  border-bottom:1px solid rgba(255,255,255,0.22);
  transition:color 0.25s, border-color 0.25s;
}
.re-promo-reset:hover{color:var(--gold-hi);border-color:var(--gold-hi);}
.re-promo.is-crowned .re-promo-reset{visibility:visible;}

/* ── Las cajas de la página, con el glass frozen ── */

/* Tres palabras y Qué te llevas: de divisores a tarjetas heladas */
.re-tres{gap:18px;}
.re-tres-item{
  padding:30px 28px 32px;border-left:none;border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,0.58),rgba(255,255,255,0.24) 52%,rgba(255,255,255,0.46));
  backdrop-filter:blur(24px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter:blur(24px) saturate(175%) brightness(1.05);
  border:1px solid rgba(255,255,255,0.78);
  box-shadow:0 0 26px rgba(118,152,178,0.13),0 18px 50px rgba(28,38,48,0.14),inset 0 1.5px 0 rgba(255,255,255,0.95);
  transition:box-shadow 0.4s ease,border-color 0.4s ease,transform 0.4s ease;
}
.re-tres-item:first-child{padding-left:28px;}
.re-tres-item:last-child{padding-right:28px;}
.re-tres-item:hover{transform:translateY(-3px);border-color:#fff;box-shadow:0 0 38px rgba(118,152,178,0.2),0 22px 58px rgba(28,38,48,0.18),inset 0 1.5px 0 rgba(255,255,255,1);}

.re-llevas{gap:18px;border-top:none;}
.re-llev{
  padding:28px 26px 30px;border-left:none;border-radius:16px;
  background:linear-gradient(150deg,rgba(214,232,242,0.13),rgba(183,203,216,0.035) 52%,rgba(214,232,242,0.095));
  backdrop-filter:blur(24px) saturate(175%) brightness(1.06);
  -webkit-backdrop-filter:blur(24px) saturate(175%) brightness(1.06);
  border:1px solid rgba(214,232,242,0.24);
  box-shadow:0 0 30px rgba(183,203,216,0.11),0 16px 46px rgba(0,0,0,0.45),inset 0 1.5px 0 rgba(255,255,255,0.3);
  transition:box-shadow 0.4s ease,border-color 0.4s ease,transform 0.4s ease;
}
.re-llev:first-child{padding-left:26px;}
.re-llev:hover{transform:translateY(-3px);border-color:rgba(214,232,242,0.42);box-shadow:0 0 44px rgba(183,203,216,0.18),0 20px 54px rgba(0,0,0,0.5),inset 0 1.5px 0 rgba(255,255,255,0.4);}

/* Pastillas del contador */
.re-cd-unit{
  background:linear-gradient(150deg,rgba(214,232,242,0.12),rgba(183,203,216,0.03) 52%,rgba(214,232,242,0.09));
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(214,232,242,0.22);border-radius:10px;
  box-shadow:0 0 20px rgba(183,203,216,0.1),inset 0 1px 0 rgba(255,255,255,0.26);
}

/* Botones de ciudad */
.re-city{
  background:linear-gradient(150deg,rgba(214,232,242,0.12),rgba(183,203,216,0.03) 52%,rgba(214,232,242,0.09));
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border-color:rgba(214,232,242,0.26);border-radius:12px;
  box-shadow:0 0 22px rgba(183,203,216,0.1),inset 0 1px 0 rgba(255,255,255,0.28);
}
.re-city:not([disabled]):hover{box-shadow:0 0 32px rgba(183,203,216,0.17),inset 0 1px 0 rgba(255,255,255,0.38);}

/* Tablero */
.re-board{
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.76);
  box-shadow:0 0 28px rgba(118,152,178,0.15),0 18px 50px rgba(28,38,48,0.14),inset 0 1.5px 0 rgba(255,255,255,0.9);
}

/* Preguntas: cada una, su propia tarjeta de vidrio */
.re-q{
  border-bottom:none;border-radius:12px;
  background:linear-gradient(150deg,rgba(255,255,255,0.58),rgba(255,255,255,0.26) 52%,rgba(255,255,255,0.46));
  backdrop-filter:blur(20px) saturate(165%);-webkit-backdrop-filter:blur(20px) saturate(165%);
  border:1px solid rgba(255,255,255,0.72);
  /* Sombra corta y limpia: antes el halo gris ensuciaba el marfil */
  box-shadow:0 1px 2px rgba(28,38,48,0.05),0 4px 14px rgba(28,38,48,0.06),inset 0 1px 0 rgba(255,255,255,0.9);
}
.re-q:hover{
  border-color:rgba(255,255,255,0.95);
  box-shadow:0 2px 4px rgba(28,38,48,0.06),0 8px 22px rgba(28,38,48,0.09),inset 0 1px 0 rgba(255,255,255,1);
}
.re-q[open]{
  background:linear-gradient(150deg,rgba(255,255,255,0.78),rgba(255,255,255,0.46) 52%,rgba(255,255,255,0.68));
  border-color:rgba(217,192,138,0.5);
  box-shadow:0 2px 6px rgba(28,38,48,0.07),0 10px 28px rgba(28,38,48,0.1),inset 0 1px 0 rgba(255,255,255,1);
}

/* Testimonios */
.re-testi{
  padding:28px;
  background:linear-gradient(150deg,rgba(255,255,255,0.58),rgba(255,255,255,0.24) 52%,rgba(255,255,255,0.46));
  backdrop-filter:blur(24px) saturate(175%) brightness(1.05);
  -webkit-backdrop-filter:blur(24px) saturate(175%) brightness(1.05);
  border-color:rgba(255,255,255,0.78);border-radius:16px;
  box-shadow:0 0 26px rgba(118,152,178,0.13),0 18px 50px rgba(28,38,48,0.14),inset 0 1.5px 0 rgba(255,255,255,0.95);
  transition:box-shadow 0.4s ease,border-color 0.4s ease,transform 0.4s ease;
}
.re-testi:hover{transform:translateY(-3px);border-color:#fff;box-shadow:0 0 38px rgba(118,152,178,0.2),0 22px 58px rgba(28,38,48,0.18),inset 0 1.5px 0 rgba(255,255,255,1);}

/* ── Qué te llevas ── */
.re-llevas{display:grid;grid-template-columns:repeat(4,1fr);}
.re-llev-n{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:12px;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold-hi);margin-bottom:14px;
}
.re-llev h4{font-size:19px;margin-bottom:10px;}
.re-llev > summary{list-style:none;display:block;cursor:default;}
.re-llev > summary::-webkit-details-marker{display:none;}
.re-llev > summary::marker{content:'';}
.re-llev-chev{display:none;}
.re-llev-wrap{overflow:hidden;}
.re-llev p{font-size:14.5px;line-height:1.6;margin:0;color:var(--fade-dark);}

/* ── Daniela ── */
.re-dani{display:grid;grid-template-columns:0.72fr 1.28fr;gap:58px;align-items:center;}
.re-dani-foto{
  position:relative;aspect-ratio:3/4;border-radius:3px;overflow:hidden;
  background:linear-gradient(165deg,var(--glacier),var(--gray-blue));
  border:1px solid var(--line-light);
  box-shadow:0 18px 44px rgba(11,11,12,0.28);
}
.re-dani-foto img{
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
}
/* Filo de luz en el borde, para que el retrato no quede plano sobre el fondo */
.re-dani-foto::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(217,192,138,0.22);
}
.re-dani p{font-size:17px;max-width:48ch;}
.re-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px;border-top:1px solid var(--line-light);}
.re-cifra{padding:26px 26px 0;border-left:1px solid var(--line-light);}
.re-cifra:first-child{padding-left:0;border-left:none;}
.re-cifra b{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:clamp(30px,3.4vw,40px);line-height:1;color:var(--gray-blue);
}
.re-cifra span{font-size:13px;color:var(--fade-light);}

/* ── Testimonios ── */
.re-testis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:66px;}
.re-testi p{font-size:15.5px;line-height:1.62;margin-bottom:14px;font-style:italic;font-family:Georgia,serif;}
.re-testi p::before{content:'\201C';}
.re-testi p::after{content:'\201D';}
.re-testi .who{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-2);font-style:normal;margin:0;}

/* ── Es / no es para ti ── */
.re-split{display:grid;grid-template-columns:1fr 1fr;min-height:min(76vh,660px);}
.re-lado{padding:clamp(52px,6vw,80px) clamp(32px,5vw,64px);display:flex;flex-direction:column;}
.re-lado-si{background:var(--ink);color:var(--ivory);}
.re-lado-no{
  background:var(--glacier) url('assets/reinicia/fondo-azul.webp') no-repeat center center / cover;
  color:var(--ink-2);
}
.re-lado h2,.re-lado h3{font-size:clamp(22px,2.8vw,33px);line-height:1.26;margin-bottom:34px;max-width:16ch;}
.re-lado-si h2,.re-lado-si h3{color:var(--vanilla);}
.re-lado ul{list-style:none;margin:0;padding:0;flex:1;}
.re-lado li{
  position:relative;padding:0 0 21px 28px;font-size:16px;line-height:1.55;
  border-bottom:1px solid;margin-bottom:21px;
}
.re-lado li:last-child{border-bottom:none;margin-bottom:0;}
.re-lado-si li{border-color:var(--line-dark);color:var(--fade-dark);}
.re-lado-no li{border-color:rgba(19,19,20,0.16);color:rgba(19,19,20,0.82);}
.re-lado li::before{position:absolute;left:0;content:'';}
.re-lado-si li::before{top:0.56em;width:7px;height:7px;background:var(--gold);border-radius:50%;}
.re-lado-no li::before{top:0.76em;width:13px;height:1px;background:rgba(19,19,20,0.45);}

/* ── Entradas ── */
.re-planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));}
.re-plan{padding:clamp(48px,5.5vw,72px) clamp(32px,4.5vw,60px);display:flex;flex-direction:column;}
.re-plan-gen{background:var(--vanilla);color:var(--ink-2);}
.re-plan-vip{background:var(--ink);color:var(--ivory);position:relative;overflow:hidden;}
.re-plan-vip::before{
  content:'';position:absolute;right:-10%;top:-16%;width:60%;height:80%;pointer-events:none;
  background:radial-gradient(ellipse at 60% 40%,rgba(185,154,94,0.15),transparent 68%);
}
.re-plan > *{position:relative;z-index:1;}
.re-rotulo{
  display:inline-block;align-self:flex-start;
  font-size:10.5px;letter-spacing:2.8px;text-transform:uppercase;
  border:1px solid;border-radius:99px;padding:7px 18px;margin-bottom:24px;
}
.re-plan-gen .re-rotulo{border-color:var(--line-light);color:var(--gray-blue);}
.re-plan-vip .re-rotulo{border-color:var(--gold);color:var(--gold-hi);}
.re-plan h3{font-size:clamp(20px,2.4vw,27px);margin-bottom:14px;}
.re-plan-vip h3{color:var(--vanilla);}
.re-plan-pitch{font-size:16.5px;line-height:1.56;margin-bottom:28px;max-width:36ch;color:var(--fade-light);}
.re-plan-vip .re-plan-pitch{color:var(--fade-dark);}
.re-precio{
  font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:clamp(30px,3.5vw,42px);line-height:1;margin:0 0 6px;
}
.re-plan-vip .re-precio{color:var(--gold-hi);}
.re-precio small{font-size:13px;opacity:0.65;font-family:'AvenirRe',sans-serif;letter-spacing:1.4px;}
.re-plan ul{list-style:none;margin:28px 0 32px;padding:0;flex:1;}
.re-plan li{position:relative;padding:0 0 12px 24px;font-size:15.5px;line-height:1.5;}
.re-plan li::before{content:'';position:absolute;left:0;top:0.6em;width:6px;height:6px;}
.re-plan-gen li::before{background:var(--gray-blue);}
.re-plan-vip li::before{background:var(--gold);}
.re-plan-avail{margin:0 0 22px;}
.re-plan-gen .re-bar{background:rgba(82,93,108,0.16);}
.re-plan-gen .re-bar-text{color:var(--fade-light);}
.re-cupo{font-size:13px;margin-top:14px;opacity:0.7;}

/* ── FAQ ── ──────────────────────────────────────────────────────
   Alineada al margen del título (no centrada): antes el bloque flotaba
   desplazado a la derecha. El despliegue se anima por alto real, con el
   texto entrando un instante después de que abre la tarjeta.
   ─────────────────────────────────────────────────────────────── */
.re-faq{max-width:800px;display:flex;flex-direction:column;gap:10px;}

.re-q summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:18px;
  padding:19px 22px 19px 26px;
  font-family:'Cinzel',Georgia,serif;font-weight:400;
  font-size:clamp(15px,1.55vw,17.5px);line-height:1.42;letter-spacing:0.012em;
  color:var(--ink);
  transition:color 0.3s ease;
}
.re-q summary::-webkit-details-marker{display:none;}
.re-q:hover summary{color:var(--gold-dark);}
.re-q summary > span{flex:1;min-width:0;}

/* El chevrón vive en su propio disco: deja de flotar suelto en la esquina */
.re-q-chev{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(217,192,138,0.42);
  transition:background 0.3s ease,border-color 0.3s ease,transform 0.34s cubic-bezier(.3,.9,.3,1);
}
.re-q-chev::before{
  content:'';width:7px;height:7px;margin-top:-3px;
  border-right:1.5px solid var(--gold-dark);border-bottom:1.5px solid var(--gold-dark);
  transform:rotate(45deg);
}
.re-q:hover .re-q-chev{background:rgba(255,255,255,0.9);border-color:rgba(217,192,138,0.75);}
.re-q[open] .re-q-chev{
  transform:rotate(180deg);
  background:var(--gold);border-color:var(--gold);
}
.re-q[open] .re-q-chev::before{border-color:#fff;}

/* Despliegue: el contenedor anima su alto, el texto entra detrás */
.re-q-wrap{overflow:hidden;height:0;transition:height 0.4s cubic-bezier(.3,.9,.3,1);}
.re-q .a{
  padding:0 26px 22px 26px;font-size:15.5px;line-height:1.72;
  color:var(--ink-soft);max-width:60ch;
  opacity:0;transform:translateY(-6px);
  transition:opacity 0.34s ease 0.06s,transform 0.34s ease 0.06s;
}
.re-q[open] .a{opacity:1;transform:translateY(0);}
.re-q .a p:last-child{margin-bottom:0;}
/* Filete dorado que separa pregunta de respuesta */
.re-q .a::before{
  content:'';display:block;width:34px;height:1px;margin-bottom:15px;
  background:linear-gradient(90deg,var(--gold),rgba(217,192,138,0));
}

@media (prefers-reduced-motion:reduce){
  .re-q-wrap,.re-q .a,.re-q-chev{transition-duration:0.01ms;}
}

/* ── Cierre ── */
.re-cierre{text-align:center;background:var(--ink);color:var(--ivory);position:relative;overflow:hidden;}
.re-cierre::before{
  content:'';position:absolute;left:50%;top:-30%;width:70%;height:130%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(185,154,94,0.14),transparent 64%);
}
.re-cierre .re-wrap{max-width:820px;position:relative;z-index:1;}
.re-cierre-logo{max-width:340px;margin:0 auto 30px;}
.re-cierre h2{color:var(--vanilla);margin-bottom:18px;}
.re-cierre-sub{font-size:18px;color:var(--fade-dark);margin-bottom:10px;}
.re-cierre-tic{font-size:15px;color:var(--gold-hi);margin-bottom:38px;font-style:italic;}
.re-cierre .re-cd{max-width:460px;margin:0 auto 38px;}

.re-footer-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:16px;
}
.re-footer-links a{position:relative;}
.re-footer-links a + a::before{
  content:'·';position:absolute;left:-13px;opacity:0.45;
}

/* ── Barra fija ── */
.re-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(11,11,12,0.94);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  border-top:1px solid rgba(185,154,94,0.4);
  /* Sin margen lateral: lo aporta .re-wrap por dentro, igual que el header */
  color:var(--ivory);padding:12px 0 calc(12px + env(safe-area-inset-bottom));
}
.re-barra-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.re-barra-txt{font-size:13.5px;line-height:1.35;}
.re-barra-txt b{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:13px;letter-spacing:0.03em;color:var(--gold-hi);display:block;}
.re-barra .re-btn{padding:12px 26px;font-size:11.5px;white-space:nowrap;flex-shrink:0;}
/* Contador y aforo dentro de la barra fija */
.re-barra-datos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;}
.re-barra-cd{font-size:12.5px;color:rgba(246,241,232,0.78);font-variant-numeric:tabular-nums;white-space:nowrap;}
.re-barra-cd i{font-style:normal;font-weight:700;color:var(--gold-hi);}
.re-barra-aforo{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:rgba(246,241,232,0.7);}
.re-barra-aforo em{font-style:normal;white-space:nowrap;}
.re-barra-aforo-pista{position:relative;width:110px;height:5px;border-radius:99px;background:rgba(255,255,255,0.14);overflow:hidden;}
.re-barra-aforo-pista .re-bar-fill{position:absolute;left:0;top:0;bottom:0;height:auto;border-radius:99px;}


/* La barra fija es la excepción: su luz corre siempre, no solo en hover,
   porque es la llamada a la acción persistente de la página. */
.re-btn-pulso::before{opacity:1;animation:re-recorre 7.5s linear infinite;}
.re-btn-pulso:hover::before{animation-duration:5s;}

/* Repartido por longitud de lado: la luz no acelera en los lados cortos */
@keyframes re-recorre{
  0%   {top:0;    left:0;}
  38%  {top:0;    left:100%;}
  50%  {top:100%; left:100%;}
  88%  {top:100%; left:0;}
  100% {top:0;    left:0;}
}
@media (prefers-reduced-motion:reduce){
  .re-btn::before,.re-btn-pulso::before{animation:none;opacity:0;}
  .re-btn-spin{animation-duration:1.8s;}
}

/* ── Footer ── */
.re-footer{background:var(--ink-2);color:rgba(246,241,232,0.5);padding:44px 0 50px;font-size:13px;}
.re-footer a{color:var(--gold);}
.re-footer p{max-width:80ch;}
.re-footer-logo{max-width:190px;margin-bottom:22px;opacity:0.8;}

/* ── Revelado al hacer scroll ── */
.re-rev{opacity:0;transform:translateY(16px);transition:opacity 0.9s cubic-bezier(.2,.8,.2,1),transform 0.9s cubic-bezier(.2,.8,.2,1);}
.re-rev.in{opacity:1;transform:none;}

/* ══════ RESPONSIVE ══════ */

/* ── El tablero con el video de cada pieza detrás ──
      El video va al fondo; las casillas se vuelven vidrio translúcido
      encima, así se conserva el patrón de movimiento y se ve el video. ── */
.re-board{position:relative;isolation:isolate;}
.re-board-media{position:absolute;inset:0;z-index:0;background:#0b0b0c;overflow:hidden;}
.re-board-video{
  position:absolute;left:50%;top:50%;
  /* Cubre el cuadrado y además amplía un 32%: así los rótulos de YouTube
     (título arriba-izquierda, marca abajo-derecha) quedan fuera del recorte */
  transform:translate(-50%,-50%) scale(1.32);
  width:178%;height:100%;border:0;pointer-events:none;
  opacity:0;transition:opacity 0.55s ease;
}
.re-board-video.is-active.is-ready{opacity:1;}
/* Velo para que las casillas y el glifo se lean sobre cualquier fotograma */
.re-board-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(11,11,12,0.06),rgba(11,11,12,0.16));
}

.re-board .re-sq{position:relative;z-index:1;background:rgba(255,255,255,0.03);}
.re-board .re-sq.dark{background:rgba(11,11,12,0.07);}
.re-board .re-sq::after{content:'';position:absolute;inset:0;pointer-events:none;background:none;box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.07);}
.re-board .re-sq.on::after{background:none;animation:none;}

/* Casillas alcanzables: vidrio helado con halo */
.re-board .re-sq.on{
  background:linear-gradient(150deg,rgba(214,232,242,0.09),rgba(183,203,216,0.04) 52%,rgba(214,232,242,0.07));
  backdrop-filter:blur(2px) saturate(135%) brightness(1.04);
  -webkit-backdrop-filter:blur(2px) saturate(135%) brightness(1.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.32),inset 0 0 20px rgba(214,232,242,0.1);
}

/* Casilla central: chip de vidrio oscuro y el glifo en claro */
.re-board .re-sq.center{
  background:linear-gradient(150deg,rgba(11,11,12,0.2),rgba(11,11,12,0.1));
  backdrop-filter:blur(2px) saturate(140%);-webkit-backdrop-filter:blur(2px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(214,232,242,0.3);
}
.re-board .re-sq.center .re-pieza{
  color:var(--vanilla);
  text-shadow:0 2px 6px rgba(0,0,0,0.95),0 2px 20px rgba(0,0,0,0.85),0 0 30px rgba(214,232,242,0.45);
}

@media (max-width:1000px){
  .re-hero-grid,.re-reloj,.re-tablero,.re-dani{grid-template-columns:1fr;gap:42px;}
  .re-tres,.re-llevas,.re-testis{grid-template-columns:1fr;}
  .re-tres-item,.re-tres-item:first-child,.re-tres-item:last-child{padding:26px 24px 28px;}
  .re-llev,.re-llev:first-child{padding:24px 22px 26px;}
  .re-split,.re-planes{grid-template-columns:1fr;min-height:0;}
  .re-oidoras{grid-template-columns:1fr;}
  .re-oid{padding:28px 0 0;border-left:none;}
  .re-cifras{grid-template-columns:1fr;}
  .re-cifra{padding:22px 0 0;border-left:none;border-top:1px solid var(--line-light);}
  .re-cifra:first-child{border-top:none;}
  .re-links{display:none;}
  .re-dani-foto{max-width:340px;}
}
@media (max-width:640px){
  /* La barra fija apilada mide ~115px: el colchón la supera */
  body{padding-bottom:128px;}
  .re-sec{padding:60px 0 66px;}
  .re-hero{padding:40px 0 58px;}
  .re-hero-logo{max-width:82vw;}
  .re-cities{grid-template-columns:1fr;}
  .re-hero-panel{padding:24px 22px 26px;}

  /* ── Tamaños de toque ──
     Todo lo pulsable llega a 48px de alto, el mínimo cómodo con el pulgar. */
  .re-btn{display:block;text-align:center;padding:16px 26px;min-height:48px;}
  .re-header .re-btn,.re-barra .re-btn{display:inline-block;}
  .re-header .re-btn{padding:13px 18px;min-height:44px;}
  .re-nav-logo{display:flex;align-items:center;min-height:44px;}
  /* Las cuatro piezas en una sola fila: el glifo sobre el nombre, así
     caben las cuatro sin romper la simetría ni bajar del área de toque. */
  .re-pz-sel{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex-wrap:nowrap;}
  .re-pz-btn{
    flex-direction:column;justify-content:center;gap:5px;
    padding:11px 4px 12px;font-size:12px;min-height:66px;
    letter-spacing:0.4px;text-align:center;border-radius:14px;
  }
  .re-pz-btn .g{font-size:19px;line-height:1;}
  .re-promo-reset{padding:14px 18px;min-height:44px;display:inline-flex;align-items:center;}
  .re-footer-links{flex-direction:column;gap:2px;}
  .re-footer-links a{padding:13px 0;min-height:44px;display:flex;align-items:center;justify-content:center;}
  .re-footer-links a + a{border-top:1px solid rgba(217,192,138,0.16);}

  /* ── Legibilidad ──
     En pantalla pequeña los rótulos en versalitas pierden el trazo:
     suben a 11.5px y se les quita algo de tracking para que no se
     desarmen en dos líneas. */
  .re-eyebrow,.re-city-label,.re-panel-label,.re-rotulo{font-size:11.5px;letter-spacing:2.2px;}
  .re-cd-lab{font-size:10.5px;letter-spacing:1px;}
  .re-pz-area{font-size:12.5px;}
  .re-pp-hint{font-size:11.5px;}
  .re-tres-n,.re-llev-n{font-size:11.5px;}

  /* ── Las tres palabras, como acordeón ──
     Tres tarjetas abiertas ocupaban tres pantallas de scroll. Aquí se
     pliegan: se ve el índice completo de un vistazo y se abre una a la vez. */
  .re-tres-item{padding:0 !important;}
  .re-tres-item > summary{
    display:flex;align-items:center;gap:12px;cursor:pointer;
    padding:18px 18px 18px 24px;min-height:48px;
    -webkit-tap-highlight-color:transparent;
  }
  .re-tres-item > summary h3{margin:0;flex:1;font-size:19px;}
  .re-tres-item .re-tres-n{margin:0;flex:0 0 auto;min-width:38px;}
  .re-tres-chev{
    display:block;flex:0 0 26px;width:26px;height:26px;border-radius:50%;
    border:1px solid rgba(87,71,33,0.34);position:relative;
    transition:transform 0.32s cubic-bezier(.4,0,.2,1),background 0.32s,border-color 0.32s;
  }
  .re-tres-chev::before{
    content:'';position:absolute;top:50%;left:50%;width:7px;height:7px;
    border-right:1.5px solid var(--gold-dark);border-bottom:1.5px solid var(--gold-dark);
    transform:translate(-50%,-68%) rotate(45deg);transition:border-color 0.32s;
  }
  .re-tres-item[open] .re-tres-chev{
    transform:rotate(180deg);background:var(--gold-dark);border-color:var(--gold-dark);
  }
  .re-tres-item[open] .re-tres-chev::before{border-color:var(--ivory);}
  .re-tres-wrap{height:0;transition:height 0.36s cubic-bezier(.4,0,.2,1);}
  .re-tres-item p{
    padding:0 24px 20px;opacity:0;transition:opacity 0.26s ease 0.06s;
  }
  .re-tres-item[open] p{opacity:1;}
  /* ── "Qué te llevas", mismo acordeón ── */
  .re-llev,.re-llev:first-child{padding:0 !important;border-left:none !important;}
  .re-llev > summary{
    display:flex;align-items:center;gap:12px;cursor:pointer;
    padding:16px 18px 16px 22px;min-height:48px;
    -webkit-tap-highlight-color:transparent;
  }
  .re-llev > summary h4{margin:0;flex:1;font-size:17px;line-height:1.3;}
  .re-llev .re-llev-n{margin:0;flex:0 0 auto;min-width:44px;}
  .re-llev-chev{
    display:block;flex:0 0 26px;width:26px;height:26px;border-radius:50%;
    border:1px solid rgba(87,71,33,0.34);position:relative;
    transition:transform 0.32s cubic-bezier(.4,0,.2,1),background 0.32s,border-color 0.32s;
  }
  .re-llev-chev::before{
    content:'';position:absolute;top:50%;left:50%;width:7px;height:7px;
    border-right:1.5px solid var(--gold-dark);border-bottom:1.5px solid var(--gold-dark);
    transform:translate(-50%,-68%) rotate(45deg);transition:border-color 0.32s;
  }
  .re-llev[open] .re-llev-chev{transform:rotate(180deg);background:var(--gold-dark);border-color:var(--gold-dark);}
  .re-llev[open] .re-llev-chev::before{border-color:var(--ivory);}
  .re-llev-wrap{height:0;transition:height 0.36s cubic-bezier(.4,0,.2,1);}
  .re-llev p{padding:0 22px 18px;margin:0;opacity:0;transition:opacity 0.26s ease 0.06s;}
  .re-llev[open] p{opacity:1;}

  .re-lede{margin-bottom:36px;}
  .re-promo-copy{min-height:4.2em;}
  .re-promo-actions{grid-template-columns:1fr;justify-items:center;gap:14px;}
  .re-btn-promo{grid-column:1;width:100%;min-width:0;text-align:center;}
  .re-promo-reset{grid-column:1;justify-self:center;margin-left:0;}
  /* 46px: las casillas siguen siendo tocables con el pulgar */
  .re-sqp{aspect-ratio:auto;min-height:46px;}
  .re-sqp-n{font-size:10px;letter-spacing:0;}
  /* En móvil el video se sirve más alto para que no quede un plano vacío */
  .re-peon-video iframe{width:max(100%, calc(100vh * 16 / 9));height:max(118%, calc(100vw * 9 / 16));}
  .re-barra{padding:11px 0 calc(11px + env(safe-area-inset-bottom));}
  .re-barra-inner{flex-direction:column;align-items:stretch;gap:9px;}
  .re-barra-txt{text-align:center;font-size:12.5px;}
  .re-barra-txt b{font-size:12.5px;}
  .re-barra-datos{justify-content:center;gap:10px;margin-top:5px;}
  .re-barra-aforo-pista{width:72px;}
  /* Ancho completo: el rótulo largo dejaba de caber y se cortaba */
  .re-barra .re-btn{display:block;width:100%;padding:14px 18px;min-height:46px;white-space:normal;}
  .re-pz-info{min-height:230px;}
  .re-q summary{padding:17px 16px 17px 19px;gap:13px;}
  .re-q .a{padding:0 19px 19px 19px;font-size:15px;}
  .re-q-chev{flex-basis:28px;width:28px;height:28px;}
  .re-cd-unit{padding:10px 2px 9px;}
}

/* ── "Leer el resto" y su hoja ──────────────────────────────────────
   En escritorio la sección se lee completa en dos columnas. En móvil
   esas ocho parrafadas son cinco pantallas de scroll, así que se deja
   la entrada visible y el resto pasa a una hoja que sube desde abajo.
   ────────────────────────────────────────────────────────────────── */
.re-leer-mas{display:none;}

.re-hoja-fondo{
  position:fixed;inset:0;z-index:120;background:rgba(11,11,12,0.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity 0.28s ease;
}
.re-hoja-fondo.abierta{opacity:1;pointer-events:auto;}
.re-hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:121;
  max-height:90svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(100%);transition:transform 0.36s cubic-bezier(.22,.9,.3,1);
  background:var(--ink);color:var(--ivory);
  border-top:1px solid rgba(185,154,94,0.45);
  border-radius:20px 20px 0 0;
  box-shadow:0 -22px 60px rgba(0,0,0,0.6);
  padding-bottom:env(safe-area-inset-bottom);
  visibility:hidden;
}
.re-hoja.abierta{transform:translateY(0);visibility:visible;}
/* Asidero, para que se lea como hoja arrastrable */
.re-hoja::before{
  content:'';position:sticky;top:0;display:block;
  width:40px;height:4px;margin:10px auto 0;border-radius:99px;
  background:rgba(217,192,138,0.4);
}
.re-hoja-cuerpo{padding:18px 24px 40px;}
.re-hoja-cuerpo p{font-size:15.5px;line-height:1.68;margin:0 0 16px;color:var(--fade-light);}
.re-hoja-cuerpo .re-sentencia{margin:26px 0 22px;}
.re-hoja-cerrar{
  position:absolute;top:16px;right:16px;z-index:2;
  width:44px;height:44px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.1);border:1px solid rgba(217,192,138,0.34);
  -webkit-tap-highlight-color:transparent;cursor:pointer;
}
.re-hoja-cerrar svg{width:17px;height:17px;fill:none;stroke:var(--gold-hi);stroke-width:1.6;stroke-linecap:round;}

@media (max-width:640px){
  .re-solo-desk{display:none;}
  .re-leer-mas{
    display:inline-flex;align-items:center;gap:9px;
    margin-top:6px;padding:13px 4px;min-height:44px;
    background:none;border:0;cursor:pointer;
    font-family:'AvenirRe',sans-serif;font-size:13px;letter-spacing:1.6px;
    text-transform:uppercase;color:var(--gold-hi);
    border-bottom:1px solid rgba(217,192,138,0.4);
    -webkit-tap-highlight-color:transparent;
  }
  .re-leer-mas::after{content:'→';font-size:15px;letter-spacing:0;}
  .re-reloj{gap:26px;}
}
@media (min-width:641px){
  /* Fuera de móvil la hoja no existe */
  .re-hoja,.re-hoja-fondo{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   ESTRUCTURA NUEVA (nov 2026)
   ═══════════════════════════════════════════════════════════════ */

.re-centro{text-align:center;}
.re-centro .re-cta{margin-top:10px;}

/* ── Hero: claim a la izquierda, retrato a la derecha ── */
.re-hero-col{min-width:0;}
.re-hero-fecha{
  font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:13px;letter-spacing:3.4px;color:var(--gold-hi);
  margin:26px 0 20px;
}
.re-hero-cupos{
  font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--baby);opacity:0.72;margin:14px 0 0;
}

.re-hero-retrato{display:flex;justify-content:center;align-items:flex-end;}
.re-retrato{
  position:relative;width:100%;max-width:400px;aspect-ratio:4/5;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg, rgba(189,199,207,0.12), rgba(19,19,20,0.6));
  border:1px solid rgba(183,203,216,0.2);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.re-retrato img{width:100%;height:100%;object-fit:cover;display:block;}
.re-retrato-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:2.4px;text-transform:uppercase;
  color:rgba(246,241,232,0.35);
}
/* Sello de prueba social, montado sobre la esquina del retrato */
.re-retrato-sello{
  position:absolute;left:-14px;bottom:26px;
  padding:14px 18px;border-radius:14px;text-align:center;
  background:rgba(19,19,20,0.82);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(149,131,93,0.4);
  box-shadow:0 14px 40px rgba(0,0,0,0.5);
}
.re-retrato-sello b{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:28px;line-height:1;color:var(--gold-hi);
}
.re-retrato-sello span{
  display:block;margin-top:6px;max-width:11ch;
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
  line-height:1.5;color:var(--fade-dark);
}

/* ── Daniela ── */
.re-daniela{display:grid;grid-template-columns:1fr 1.15fr;gap:46px;align-items:start;}
.re-bio{font-size:15px;line-height:1.85;color:var(--fade-dark);margin:0 0 18px;}
.re-bio-pendiente{
  padding:16px 18px;border-radius:12px;font-style:italic;
  background:rgba(255,210,74,0.06);border:1px dashed rgba(255,210,74,0.3);
  color:#ffd24a;
}
.re-bio-cierre{
  font-family:'Cinzel',Georgia,serif;font-weight:400;
  font-size:clamp(16px,1.9vw,21px);line-height:1.5;letter-spacing:0.012em;
  color:var(--vanilla);margin:0 0 30px;
}

/* ─────────────────────────────────────────────────────────────
   ANTES Y DESPUÉS
   El lado "después" se recorta y se descubre al arrastrar. El
   control es un <input range> invisible encima: gesto nativo.
   ───────────────────────────────────────────────────────────── */
.re-ad{position:relative;margin:34px 0 46px;}
.re-ad-lados{position:relative;border-radius:18px;overflow:hidden;}
.re-ad-lado{padding:30px 32px;}
.re-ad-antes{
  background:linear-gradient(160deg, rgba(19,19,20,0.7), rgba(11,11,12,0.9));
  border:1px solid rgba(183,203,216,0.14);border-radius:18px;
}
.re-ad-despues{
  position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(149,131,93,0.2), rgba(19,19,20,0.94));
  border:1px solid rgba(149,131,93,0.42);border-radius:18px;
  clip-path:inset(0 0 0 100%);
  transition:clip-path 0.08s linear;
}
.re-ad-rotulo{
  font-size:10px;letter-spacing:2.8px;text-transform:uppercase;
  color:var(--gray-blue);padding-bottom:20px;
}
.re-ad-despues .re-ad-rotulo{color:var(--gold-hi);}
.re-ad-item{
  display:grid;grid-template-columns:130px 1fr;gap:18px;
  padding:13px 0;border-top:1px solid rgba(183,203,216,0.1);
}
.re-ad-item:first-of-type{border-top:0;}
.re-ad-item b{
  font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:13px;
  letter-spacing:0.06em;color:var(--baby);
}
.re-ad-despues .re-ad-item b{color:var(--gold-hi);}
.re-ad-item span{font-size:13.5px;line-height:1.6;color:var(--fade-dark);}

/* La línea divisoria, con su asa */
.re-ad-linea{
  position:absolute;top:0;bottom:0;left:0;width:2px;
  background:linear-gradient(180deg, transparent, var(--gold), transparent);
  pointer-events:none;z-index:3;
  transform:translateX(-1px);
}
.re-ad-asa{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 6px rgba(149,131,93,0.18), 0 8px 22px rgba(0,0,0,0.45);
}
.re-ad-asa::before, .re-ad-asa::after{
  content:'';position:absolute;top:50%;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.re-ad-asa::before{left:8px;transform:translateY(-50%);border-right:6px solid var(--ink);}
.re-ad-asa::after{right:8px;transform:translateY(-50%);border-left:6px solid var(--ink);}
/* El rango cubre la caja: el gesto se siente sobre la línea */
.re-ad-rango{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;z-index:4;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.re-ad-rango::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize;}
.re-ad-rango::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent;cursor:ew-resize;}
.re-ad-pct{
  text-align:center;margin-top:18px;
  font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gray-blue);
}
.re-ad-pct b{
  font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:16px;
  letter-spacing:0;color:var(--gold-hi);
}
.re-ad.es-tocado .re-ad-asa{box-shadow:0 0 0 4px rgba(149,131,93,0.14), 0 8px 22px rgba(0,0,0,0.45);}

/* ── El concepto ── */
.re-concepto-lede{
  max-width:44ch;margin:0 auto 44px;text-align:center;
  font-size:15.5px;line-height:1.85;color:var(--fade-dark);
}

/* ─────────────────────────────────────────────────────────────
   EL RECORRIDO DEL PEÓN
   ───────────────────────────────────────────────────────────── */
.re-tablero-lineal{position:relative;max-width:820px;margin:0 auto;}
.re-tl-extremos{
  display:flex;justify-content:space-between;gap:16px;margin-bottom:14px;
  font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gray-blue);
}
.re-tl-pista{
  position:relative;display:grid;grid-template-columns:repeat(8,1fr);
  border-radius:12px;overflow:visible;
}
.re-tl-sq{
  aspect-ratio:1;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:7px 9px;font-size:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(183,203,216,0.1);
  color:rgba(217,210,196,0.28);
  transition:background 0.3s, border-color 0.3s, color 0.3s;
}
/* Tablero de ajedrez: las impares más oscuras */
.re-tl-sq:nth-child(odd){background:rgba(255,255,255,0.055);}
.re-tl-sq.on{
  background:rgba(149,131,93,0.24);border-color:var(--gold);
  color:var(--gold-hi);
}
.re-tl-pieza{
  position:absolute;top:50%;left:6.25%;
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:3;
  transition:left 0.32s cubic-bezier(.34,1.3,.64,1);
}
.re-tl-glifo{
  display:block;font-size:clamp(30px,4.4vw,46px);line-height:1;
  color:var(--gold-hi);
  text-shadow:0 4px 18px rgba(0,0,0,0.6), 0 0 26px rgba(149,131,93,0.4);
  transition:color 0.4s;
}
.re-tablero-lineal.es-reina .re-tl-glifo{
  color:#f0dfb4;
  text-shadow:0 4px 18px rgba(0,0,0,0.6), 0 0 38px rgba(217,192,138,0.75);
}
.re-tl-asa{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:9px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold);opacity:0.85;transition:opacity 0.4s;
}
.re-tl-asa.es-oculta{opacity:0;}
.re-tl-rango{
  position:absolute;top:0;left:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:grab;z-index:4;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.re-tl-rango:active{cursor:grabbing;}
.re-tl-rango::-webkit-slider-thumb{-webkit-appearance:none;width:12.5%;height:100%;cursor:grab;}
.re-tl-rango::-moz-range-thumb{width:12.5%;height:100%;border:0;background:transparent;cursor:grab;}
.re-tl-caption{
  max-width:46ch;margin:26px auto 0;text-align:center;
  font-size:14.5px;line-height:1.7;color:var(--fade-dark);
  min-height:3.4em;
}

/* ─────────────────────────────────────────────────────────────
   LOS TRES PILARES: mazo de tarjetas
   ───────────────────────────────────────────────────────────── */
.re-pilares{margin:32px 0 44px;}
.re-pil-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}
.re-pil-tab{
  padding:11px 24px;border-radius:99px;cursor:pointer;
  font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:12.5px;letter-spacing:0.09em;
  background:transparent;border:1px solid rgba(82,93,108,0.34);color:var(--gray-blue);
  transition:background 0.28s, color 0.28s, border-color 0.28s;
}
.re-pil-tab:hover{border-color:var(--gold-dark);color:var(--gold-dark);}
.re-pil-tab.on{background:var(--ink-2);border-color:var(--ink-2);color:var(--vanilla);}

.re-pil-cartas{position:relative;max-width:560px;margin:0 auto;min-height:248px;}
.re-pil-carta{
  position:absolute;inset:0;padding:38px 40px;border-radius:20px;cursor:pointer;
  background:linear-gradient(150deg, rgba(255,255,255,0.86), rgba(246,241,232,0.94));
  border:1px solid rgba(82,93,108,0.16);
  box-shadow:0 22px 60px rgba(19,19,20,0.14);
  transition:transform 0.44s cubic-bezier(.22,.9,.3,1), opacity 0.44s, box-shadow 0.44s;
}
/* El desplazamiento circular decide la posición dentro del mazo */
.re-pil-carta[data-off="0"]{transform:translate(0,0) scale(1);opacity:1;z-index:3;}
.re-pil-carta[data-off="1"]{transform:translate(22px,20px) scale(0.96);opacity:0.55;z-index:2;}
.re-pil-carta[data-off="2"]{transform:translate(42px,38px) scale(0.92);opacity:0.3;z-index:1;}
.re-pil-n{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:11px;letter-spacing:3px;color:var(--gold-dark);margin-bottom:16px;
}
.re-pil-carta h3{
  font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:clamp(22px,2.7vw,30px);line-height:1.2;letter-spacing:0.02em;
  color:var(--ink-2);margin:0 0 14px;
}
.re-pil-carta p{font-size:15px;line-height:1.75;color:var(--ink-soft);margin:0;}

/* ── Fase de precio en los planes ── */
.re-plan-fase{
  font-size:11.5px;line-height:1.6;letter-spacing:0.4px;
  color:var(--gold-dark);margin:0 0 22px;
}
.re-plan-vip .re-plan-fase{color:var(--gold-hi);}

/* ═══════════════ MÓVIL ═══════════════ */
@media (max-width:900px){
  .re-daniela{grid-template-columns:1fr;gap:30px;}
  .re-hero-retrato{order:-1;margin-bottom:30px;}
  .re-retrato{max-width:320px;}
}
@media (max-width:640px){
  .re-retrato{max-width:100%;aspect-ratio:1/1;}
  .re-retrato-sello{left:auto;right:14px;bottom:14px;padding:11px 14px;}
  .re-retrato-sello b{font-size:22px;}
  .re-hero-fecha{font-size:11.5px;letter-spacing:2.6px;margin:20px 0 16px;}

  /* El antes/después se apila: dos bloques, sin recorte lateral */
  .re-ad-lado{padding:22px 18px;}
  .re-ad-despues{
    position:static;inset:auto;clip-path:none !important;
    margin-top:14px;
  }
  .re-ad-linea, .re-ad-rango, .re-ad-pct{display:none;}
  .re-ad-item{grid-template-columns:1fr;gap:5px;padding:11px 0;}
  .re-ad-item b{font-size:12px;}
  .re-ad-item span{font-size:13px;}

  /* El tablero cabe en pantalla: casillas más bajas */
  .re-tl-sq{aspect-ratio:auto;height:46px;padding:5px 6px;font-size:9px;}
  .re-tl-extremos{font-size:9px;letter-spacing:1.6px;}
  .re-tl-caption{font-size:13.5px;margin-top:22px;}

  /* El mazo se vuelve lista: en móvil el apilado esconde contenido */
  .re-pil-cartas{min-height:0;display:flex;flex-direction:column;gap:12px;}
  .re-pil-carta{
    position:static;inset:auto;padding:24px 22px;
    transform:none !important;opacity:1 !important;
  }
  .re-pil-tabs{display:none;}
  .re-pil-carta h3{font-size:21px;}
  .re-pil-carta p{font-size:14px;}

  .re-concepto-lede{font-size:14.5px;margin-bottom:34px;}
  .re-bio{font-size:14px;line-height:1.75;}
}

/* ══════════════════════════════════════════════════════════════════
   PULIDO DE LAS SECCIONES NUEVAS (v2)
   Las escribí con fondos planos; aquí reciben la misma receta de vidrio
   líquido que ya usan el panel del hero, las tarjetas y el contador:
   degradado diagonal + blur con saturación + refracción en el filo
   (luz arriba, sombra abajo) + halo suave.
   Va al final del archivo a propósito: así gana por orden de origen.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Vidrio sobre fondo oscuro */
  --vidrio-osc:linear-gradient(150deg,rgba(214,232,242,0.13),rgba(183,203,216,0.035) 52%,rgba(214,232,242,0.095));
  --vidrio-osc-borde:rgba(214,232,242,0.24);
  --vidrio-osc-sombra:0 0 30px rgba(183,203,216,0.11),0 16px 46px rgba(0,0,0,0.45),inset 0 1.5px 0 rgba(255,255,255,0.3),inset 0 -1.5px 3px rgba(0,0,0,0.3);
  --vidrio-osc-blur:blur(24px) saturate(175%) brightness(1.06);
  /* Vidrio sobre fondo marfil */
  --vidrio-cla:linear-gradient(150deg,rgba(255,255,255,0.58),rgba(255,255,255,0.24) 52%,rgba(255,255,255,0.46));
  --vidrio-cla-borde:rgba(255,255,255,0.78);
  --vidrio-cla-sombra:0 0 26px rgba(118,152,178,0.13),0 18px 50px rgba(28,38,48,0.14),inset 0 1.5px 0 rgba(255,255,255,0.95),inset 0 -1.5px 2px rgba(28,38,48,0.05);
  --vidrio-cla-blur:blur(24px) saturate(175%) brightness(1.05);
}

/* Reflejo especular diagonal reutilizable */
.re-brillo{position:relative;isolation:isolate;}
.re-brillo::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 76%,rgba(255,255,255,0.18) 100%);
  mix-blend-mode:screen;opacity:0.62;
}

/* ── Daniela: bio pendiente y cifras ── */
.re-bio-pendiente{
  background:linear-gradient(150deg,rgba(255,210,74,0.16),rgba(255,210,74,0.05) 52%,rgba(255,210,74,0.12));
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px dashed rgba(255,210,74,0.5);border-radius:14px;
  box-shadow:0 0 24px rgba(255,210,74,0.1),inset 0 1.5px 0 rgba(255,255,255,0.22);
  color:#ffd24a;
}
.re-cifra{
  padding:20px 22px;border-radius:14px;border-bottom:none;
  background:var(--vidrio-osc);
  backdrop-filter:var(--vidrio-osc-blur);-webkit-backdrop-filter:var(--vidrio-osc-blur);
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:var(--vidrio-osc-sombra);
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1),box-shadow 0.3s ease;
}
.re-cifra:hover{
  transform:translateY(-3px);
  box-shadow:0 0 38px rgba(185,154,94,0.18),0 22px 56px rgba(0,0,0,0.5),inset 0 1.5px 0 rgba(255,255,255,0.36);
}
.re-cifras{display:grid;gap:14px;}

/* ── Antes y después ── */
.re-ad-lados{
  border-radius:18px;overflow:hidden;
  box-shadow:0 0 34px rgba(183,203,216,0.09),0 20px 54px rgba(0,0,0,0.45);
}
.re-ad-antes{
  background:var(--vidrio-osc);
  backdrop-filter:var(--vidrio-osc-blur);-webkit-backdrop-filter:var(--vidrio-osc-blur);
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.28),inset 0 -1.5px 3px rgba(0,0,0,0.3);
}
.re-ad-despues{
  background:linear-gradient(150deg,rgba(185,154,94,0.22),rgba(149,131,93,0.08) 52%,rgba(185,154,94,0.16));
  backdrop-filter:blur(26px) saturate(185%) brightness(1.08);
  -webkit-backdrop-filter:blur(26px) saturate(185%) brightness(1.08);
  border:1px solid rgba(217,192,138,0.4);
  box-shadow:inset 0 1.5px 0 rgba(255,246,224,0.35),inset 0 -1.5px 4px rgba(60,44,14,0.3);
}
/* La línea divisoria: filo de luz, no un borde plano */
.re-ad-linea{
  background:linear-gradient(180deg,rgba(217,192,138,0.2),var(--gold-hi) 18%,var(--gold-hi) 82%,rgba(217,192,138,0.2));
  box-shadow:0 0 14px rgba(217,192,138,0.5),0 0 34px rgba(185,154,94,0.22);
}
/* El asa: vidrio con halo, para que se lea como algo que se toma */
.re-ad-asa{
  background:linear-gradient(150deg,rgba(255,246,224,0.95),rgba(217,192,138,0.85) 52%,rgba(185,154,94,0.9));
  backdrop-filter:blur(10px) saturate(170%);-webkit-backdrop-filter:blur(10px) saturate(170%);
  border:1px solid rgba(255,252,246,0.7);
  box-shadow:
    0 0 0 5px rgba(185,154,94,0.14),
    0 0 22px rgba(217,192,138,0.55),
    0 6px 18px rgba(0,0,0,0.4),
    inset 0 1.5px 0 rgba(255,255,255,0.9);
  transition:box-shadow 0.28s ease,transform 0.2s ease;
}
.re-ad-asa:hover,.re-ad:focus-within .re-ad-asa{
  box-shadow:
    0 0 0 8px rgba(185,154,94,0.2),
    0 0 32px rgba(217,192,138,0.75),
    0 8px 22px rgba(0,0,0,0.45),
    inset 0 1.5px 0 rgba(255,255,255,1);
}
.re-ad-asa:active{transform:translate(-50%,-50%) scale(0.94);}
.re-ad-pct{
  display:inline-block;padding:9px 18px;border-radius:99px;
  background:var(--vidrio-osc);
  backdrop-filter:blur(16px) saturate(165%);-webkit-backdrop-filter:blur(16px) saturate(165%);
  border:1px solid rgba(217,192,138,0.28);
  box-shadow:0 0 18px rgba(185,154,94,0.14),inset 0 1px 0 rgba(255,255,255,0.26);
}
.re-ad-item{transition:background 0.25s ease;}
.re-ad-lado:hover .re-ad-item{background:rgba(255,255,255,0.012);}

/* ── El recorrido del peón ── */
.re-tl-pista{
  border-radius:14px;overflow:hidden;
  box-shadow:0 0 28px rgba(183,203,216,0.08),0 16px 42px rgba(0,0,0,0.4);
}
.re-tl-sq{
  background:linear-gradient(150deg,rgba(214,232,242,0.085),rgba(183,203,216,0.025) 52%,rgba(214,232,242,0.06));
  backdrop-filter:blur(4px) saturate(150%);-webkit-backdrop-filter:blur(4px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
  transition:background 0.35s ease,box-shadow 0.35s ease;
}
.re-tl-sq.on{
  background:linear-gradient(150deg,rgba(185,154,94,0.22),rgba(149,131,93,0.07) 52%,rgba(185,154,94,0.16));
  box-shadow:inset 0 0 0 1px rgba(217,192,138,0.38),inset 0 1.5px 0 rgba(255,246,224,0.3),inset 0 0 22px rgba(185,154,94,0.14);
}
.re-tl-pieza{
  background:linear-gradient(150deg,rgba(255,246,224,0.16),rgba(217,192,138,0.05) 52%,rgba(255,246,224,0.12));
  backdrop-filter:blur(14px) saturate(175%) brightness(1.06);
  -webkit-backdrop-filter:blur(14px) saturate(175%) brightness(1.06);
  border:1px solid rgba(217,192,138,0.45);
  box-shadow:
    0 0 26px rgba(185,154,94,0.28),
    0 8px 22px rgba(0,0,0,0.4),
    inset 0 1.5px 0 rgba(255,246,224,0.4);
}
.re-tl-asa{
  background:linear-gradient(150deg,rgba(255,246,224,0.95),rgba(217,192,138,0.86) 52%,rgba(185,154,94,0.9));
  border:1px solid rgba(255,252,246,0.7);
  box-shadow:0 0 0 5px rgba(185,154,94,0.14),0 0 20px rgba(217,192,138,0.5),inset 0 1.5px 0 rgba(255,255,255,0.9);
}
.re-tl-caption{
  padding:22px 26px;border-radius:14px;
  background:var(--vidrio-osc);
  backdrop-filter:var(--vidrio-osc-blur);-webkit-backdrop-filter:var(--vidrio-osc-blur);
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:var(--vidrio-osc-sombra);
}

/* ── Los tres pilares ── */
.re-pil-tab{
  background:var(--vidrio-cla);
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);
  border:1px solid var(--vidrio-cla-borde);
  box-shadow:0 0 16px rgba(118,152,178,0.1),inset 0 1.5px 0 rgba(255,255,255,0.9);
  transition:background 0.28s ease,box-shadow 0.28s ease,transform 0.2s ease,color 0.28s ease;
}
.re-pil-tab:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(118,152,178,0.16),0 6px 16px rgba(28,38,48,0.1),inset 0 1.5px 0 rgba(255,255,255,1);}
.re-pil-tab.on{
  background:linear-gradient(150deg,var(--ink-3),var(--ink) 60%);
  border-color:var(--ink);color:var(--vanilla);
  box-shadow:0 0 22px rgba(11,11,12,0.2),0 8px 20px rgba(28,38,48,0.22),inset 0 1.5px 0 rgba(255,255,255,0.14);
}
.re-pil-carta{
  background:var(--vidrio-cla);
  backdrop-filter:var(--vidrio-cla-blur);-webkit-backdrop-filter:var(--vidrio-cla-blur);
  border:1px solid var(--vidrio-cla-borde);
  box-shadow:var(--vidrio-cla-sombra);
}
/* Reflejo diagonal solo en la tarjeta del frente (el mazo usa data-off) */
.re-pil-carta[data-off="0"]::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 78%,rgba(255,255,255,0.26) 100%);
  mix-blend-mode:screen;opacity:0.7;
}

/* ── Preguntas: el chevron y la caja ── */
.re-q{transition:background 0.3s ease;}
.re-q[open]{
  background:linear-gradient(150deg,rgba(255,255,255,0.34),rgba(255,255,255,0.1) 52%,rgba(255,255,255,0.24));
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-radius:14px;
  box-shadow:0 0 20px rgba(118,152,178,0.09),inset 0 1.5px 0 rgba(255,255,255,0.8);
}

@media (prefers-reduced-motion:reduce){
  .re-cifra:hover,.re-pil-tab:hover{transform:none;}
}
@media (max-width:640px){
  .re-cifra{padding:16px 18px;}
  .re-tl-caption{padding:18px 20px;}
}

/* El numeral del pilar: pastilla de vidrio con romano.
   A 11px un dígito suelto en Cinzel se leía como una marca perdida. */
.re-pil-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;margin-bottom:20px;
  border-radius:50%;
  font-family:'Cinzel',Georgia,serif;font-weight:600;
  font-size:14px;letter-spacing:1.5px;color:var(--gold-dark);
  background:linear-gradient(150deg,rgba(255,255,255,0.7),rgba(255,255,255,0.3) 52%,rgba(255,255,255,0.55));
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(185,154,94,0.32);
  box-shadow:0 0 16px rgba(185,154,94,0.14),inset 0 1.5px 0 rgba(255,255,255,0.9);
}

/* ── Fondo del hero en video ──
   El iframe se sobredimensiona para cubrir sin franjas negras: el video es
   16:9 y el hero casi nunca lo es, así que se escala por el lado que falte. */
.re-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink);}
.re-hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;transition:opacity 0.9s ease;
}
.re-hero-bg.re-video-listo .re-hero-poster{opacity:0;}
.re-hero-bg iframe,.re-fondo-video iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  border:0;pointer-events:none;
  opacity:0;transition:opacity 0.9s ease;
}
.re-hero-bg.re-video-listo iframe{opacity:1;}
/* Velo sobre el video: sin él, el texto blanco pierde legibilidad
   en los fotogramas claros del tablero. */
.re-hero-bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(11,11,12,0.88) 0%,rgba(11,11,12,0.62) 46%,rgba(11,11,12,0.34) 100%),
    linear-gradient(180deg,rgba(11,11,12,0.34) 0%,rgba(11,11,12,0) 34%,rgba(11,11,12,0.5) 100%);
}
@media (max-width:860px){
  /* En vertical el velo sube: el texto se apila sobre el centro del video */
  .re-hero-bg::after{
    background:linear-gradient(180deg,rgba(11,11,12,0.72) 0%,rgba(11,11,12,0.6) 42%,rgba(11,11,12,0.86) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .re-hero-bg iframe,.re-fondo-video iframe{display:none;}
  .re-hero-bg.re-video-listo .re-hero-poster{opacity:1;}
}

/* ── Barra fija: vidrio, no un panel casi opaco ──
   Antes era negro al 94%, que tapaba por completo lo que pasa debajo.
   Con la receta de vidrio la página se sigue intuyendo al hacer scroll. */
.re-barra{
  background:linear-gradient(180deg,rgba(19,19,20,0.72),rgba(11,11,12,0.86));
  backdrop-filter:blur(26px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.04);
  border-top:1px solid rgba(217,192,138,0.34);
  box-shadow:0 -1px 0 rgba(255,255,255,0.07) inset, 0 -18px 46px rgba(0,0,0,0.42);
}
/* Filo de luz dorada en el borde superior, como el del header */
.re-barra::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(217,192,138,0.15) 14%,var(--gold-hi) 50%,rgba(217,192,138,0.15) 86%,transparent);
}
.re-barra{position:fixed;}

/* ══════════════════════════════════════════════════════════════
   El retrato pasó del hero a la sección de Daniela.
   Razones: en el hero competía con el video del tablero, y aquí
   llena la columna que quedaba vacía bajo la frase, justo donde
   el lector pregunta "¿y quién es ella?".
   ══════════════════════════════════════════════════════════════ */

/* Hero a una sola columna: el texto ya no comparte el ancho */
.re-hero-solo{grid-template-columns:1fr;}
.re-hero-solo .re-hero-col{max-width:620px;}

/* Columna izquierda de Daniela: frase arriba, retrato debajo */
.re-daniela-col{display:flex;flex-direction:column;gap:32px;}
.re-daniela-col .re-sentencia{margin-bottom:0;}
.re-daniela .re-retrato{
  max-width:none;width:100%;aspect-ratio:4/5;
  /* Se queda a la vista mientras se lee la biografía del otro lado */
  position:sticky;top:96px;
}
/* Sin el sello, el marco puede ser más limpio */
.re-daniela .re-retrato{
  border-radius:18px;
  box-shadow:0 0 34px rgba(183,203,216,0.1),0 26px 66px rgba(0,0,0,0.5),inset 0 1.5px 0 rgba(255,255,255,0.14);
}
/* Degradado al pie: ancla la foto al fondo en vez de cortarla en seco */
.re-daniela .re-retrato::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,0.55) 100%);
}

@media (max-width:900px){
  .re-daniela .re-retrato{position:static;max-width:420px;}
  .re-daniela-col{gap:26px;}
}
@media (max-width:640px){
  .re-hero-solo .re-hero-col{max-width:none;}
  .re-daniela .re-retrato{aspect-ratio:3/4;}
}

/* Las cifras son la prueba de autoridad de la sección: tienen que leerse.
   El numeral estaba en gris azulado (~3.3:1 sobre el negro) y la etiqueta
   usaba el gris de las secciones claras. Ambos corregidos para fondo oscuro. */
.re-cifra b{color:var(--gold-hi);}
.re-cifra span{color:var(--fade-dark);}
.re-cifra:hover b{color:#f0dcb0;}

/* ══════════════════════════════════════════════════════════════
   "Para ti / No para ti"
   El panel oscuro vive DENTRO de una sección marfil, así que estaba
   heredando los colores pensados para fondos claros: el rótulo y la
   palabra de acento quedaban en dorado oscuro sobre negro (~2:1).
   Aquí se le devuelve su propia paleta.
   ══════════════════════════════════════════════════════════════ */
.re-ivory .re-lado-si .re-eyebrow{color:var(--gold-hi);}
.re-ivory .re-lado-si em.ac{color:var(--gold-hi);}
.re-ivory .re-lado-si li{color:rgba(246,241,232,0.88);}
.re-ivory .re-lado-si h2,.re-lado-si h3{color:var(--vanilla);}

/* Mismo marcador en ambos lados: antes eran punto a la izquierda y
   raya a la derecha, y eso hacía ver las dos listas como cosas
   distintas. La forma se unifica; el color sigue cargando el sentido. */
.re-lado li::before{
  top:0.58em;width:7px;height:7px;border-radius:50%;
  background:var(--gold);
}
.re-lado-si li::before{
  background:var(--gold-hi);
  box-shadow:0 0 10px rgba(217,192,138,0.45);
}
.re-lado-no li::before{
  width:7px;height:7px;
  background:transparent;
  border:1.5px solid rgba(19,19,20,0.42);
  box-shadow:none;
}
/* Anillo hueco en el lado "no": misma forma, lectura opuesta */
.re-lado-no li{color:rgba(19,19,20,0.86);}
.re-lado-no .re-eyebrow{color:var(--gold-dark);}

/* Mismo punto macizo en las dos listas. El anillo hueco del lado claro
   se leía como otro tipo de viñeta; el sentido lo carga el color. */
.re-lado-no li::before{
  width:7px;height:7px;border-radius:50%;border:none;
  background:var(--gold-dark);
  box-shadow:none;
}

/* Sin el botón, la sección "Para ti" termina en los dos paneles:
   se le quita el pie para que empalmen con la siguiente sección
   y no quede una franja marfil vacía. */
#parati{padding-bottom:0;}

/* ══════════════════════════════════════════════════════════════
   El gris azulado (#525d6c) da 2.9:1 sobre el negro: ilegible.
   Se parte en dos tonos, uno por tipo de fondo, en vez de un solo
   valor que no funciona en ninguno de los dos.
   ══════════════════════════════════════════════════════════════ */
:root{
  --azul-sobre-oscuro:#9aa9b8;  /* 8.2:1 sobre #0b0b0c */
  --azul-sobre-claro:#35404c;   /* 6.3:1 sobre glaciar, 9.4:1 sobre marfil */
}
/* Secciones oscuras */
.re-ad-rotulo,
.re-ad-pct,
.re-dark .re-pz-area,
.re-dark .re-tl-extremos{color:var(--azul-sobre-oscuro);}
/* El dorado manda en las cifras; esto solo evita que hereden el azul apagado */
.re-cifra b{color:var(--gold-hi);}
/* Secciones claras */
.re-ivory .re-pz-area,
.re-ivory .re-tl-extremos,
.re-glacier .re-pz-area,
.re-plan-gen .re-rotulo{color:var(--azul-sobre-claro);}
.re-plan-gen li::before{background:var(--azul-sobre-claro);}

/* ══════ Fondo de video en secciones ══════ */
.re-con-video{position:relative;overflow:hidden;}
.re-con-video > .re-wrap{position:relative;z-index:2;}
.re-fondo-video{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--ink);
}
.re-fondo-video iframe{opacity:0;}
.re-fondo-video.re-video-listo iframe{opacity:0.3;}
/* Velo: el video queda como textura, nunca compite con el texto */
.re-fondo-video::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(11,11,12,0.92) 0%, rgba(11,11,12,0.6) 48%, rgba(11,11,12,0.78) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(11,11,12,0.35) 22%, rgba(11,11,12,0.35) 78%, var(--ink) 100%);
}
@media (max-width:860px){
  .re-fondo-video.re-video-listo iframe{opacity:0.22;}
  .re-fondo-video::after{
    background:linear-gradient(180deg, var(--ink) 0%, rgba(11,11,12,0.7) 18%, rgba(11,11,12,0.7) 82%, var(--ink) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════
   Las fichas reales, en lugar del glifo tipográfico.
   Las dos imágenes se apilan y la coronación las funde, así el
   peón se convierte en reina en vez de saltar de un carácter a otro.
   ══════════════════════════════════════════════════════════════ */
.re-tl-glifo{
  display:block;position:relative;
  width:clamp(40px,5.4vw,58px);height:clamp(66px,9vw,96px);
  font-size:0;
}
.re-ficha{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:100%;width:auto;display:block;
  transition:opacity 0.55s ease, transform 0.55s cubic-bezier(.34,1.25,.64,1);
}
/* Sombra bajo la ficha: la asienta en la casilla en vez de flotar suelta */
.re-tl-glifo::after{
  content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  width:76%;height:9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 72%);
}
.re-ficha-peon{
  opacity:1;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}
.re-ficha-reina{
  opacity:0;transform:translateX(-50%) scale(0.86);
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(217,192,138,0.5));
}
.es-reina .re-ficha-peon{opacity:0;transform:translateX(-50%) scale(1.08);}
.es-reina .re-ficha-reina{opacity:1;transform:translateX(-50%) scale(1);}
/* Al coronar, el halo dorado crece bajo la reina */
.es-reina .re-tl-glifo::after{
  background:radial-gradient(ellipse, rgba(217,192,138,0.5) 0%, rgba(0,0,0,0) 74%);
  width:96%;height:12px;
}
/* El asa vuelve a su tamaño: ya no compite con la ficha */
.re-tl-pieza{width:clamp(40px,5.4vw,58px);display:flex;flex-direction:column;align-items:center;}

@media (prefers-reduced-motion:reduce){
  .re-ficha{transition:opacity 0.2s ease;}
}

/* ══════════════════════════════════════════════════════════════
   Entradas: barra más gruesa y la General en plata
   ══════════════════════════════════════════════════════════════ */

/* Antes 5px: a ese grosor el degradado dorado casi no se percibía */
.re-plan .re-bar{
  height:10px;border-radius:99px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.28);
}
.re-plan .re-bar-fill{box-shadow:0 0 14px rgba(185,154,94,0.4);}

/* ── Plata: la General se distingue del VIP sin perder jerarquía ── */
.re-plan-gen .re-bar{background:rgba(63,74,88,0.16);}
.re-plan-gen .re-bar-fill{
  background:linear-gradient(90deg,#8c949e,#c3ccd6,#eef2f6,#c3ccd6,#8c949e);
  background-size:220% 100%;
  box-shadow:0 0 14px rgba(150,163,178,0.5);
}
.re-btn-plata{
  background:linear-gradient(177deg,#e9edf1 0%,#c3ccd6 46%,#98a3b0 100%);
  border-color:rgba(255,255,255,0.8);
  color:#1b2430 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 -1px 0 rgba(70,84,102,0.28) inset,
    0 8px 20px rgba(28,38,48,0.22);
}
.re-btn-plata:hover{
  background:linear-gradient(177deg,#f6f9fb 0%,#d6dee6 46%,#a8b3c0 100%);
  border-color:rgba(255,255,255,0.95);
  color:#141c26 !important;
}
/* El brillo especular y la luz que recorre el filo, en tono frío */
.re-btn-plata::after{
  background:linear-gradient(180deg,rgba(255,255,255,0.55),rgba(255,255,255,0) 100%);
}
.re-btn-plata::before{
  background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(214,222,230,0.5) 38%, rgba(214,222,230,0) 70%);
}
.re-btn-plata.is-loading{
  background:linear-gradient(177deg,#b9c2cc 0%,#9aa5b2 46%,#7d8996 100%);
}
.re-btn-plata .re-btn-spin{
  border-color:rgba(27,36,48,0.28);border-top-color:#1b2430;
}

/* ══════════════════════════════════════════════════════════════
   Las frases sueltas, centradas de verdad.
   Tenían borde y sangría a la izquierda heredados de la variante
   que vive en dos columnas; solas en la página se veían descolgadas.
   ══════════════════════════════════════════════════════════════ */
.re-sentencia.re-centro{
  border-left:none;padding-left:0;
  max-width:26ch;margin-left:auto;margin-right:auto;
  text-align:center;position:relative;padding-top:30px;
}
/* Un filete dorado arriba reemplaza al borde lateral */
.re-sentencia.re-centro::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:52px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* El encabezado de "Para ti" va solo sobre la franja marfil, sin nada
   a su derecha: centrado se lee como portada de la sección en vez de
   como un titular descolgado a la izquierda. */
#parati > .re-wrap{text-align:center;}
#parati > .re-wrap .re-title{margin-left:auto;margin-right:auto;}
#parati > .re-wrap .re-rule{margin-left:auto;margin-right:auto;}

/* Cifras: numeral dorado y contenido centrado en la tarjeta */
.re-cifra{text-align:center;display:flex;flex-direction:column;justify-content:center;}
.re-sec.re-dark .re-cifra b,
.re-cifra b{color:var(--gold-hi);}
.re-cifra span{max-width:22ch;margin:0 auto;}

/* ══════════════════════════════════════════════════════════════
   "Para ti / No para ti" — el momento de reconocerse.
   Cada punto pasa de fila plana a tarjeta de vidrio: entra sola,
   se puede señalar con el cursor y responde. Es la sección donde
   la lectora decide si esto habla de ella.
   ══════════════════════════════════════════════════════════════ */

.re-lado ul{display:flex;flex-direction:column;gap:12px;}
.re-lado li{
  position:relative;overflow:hidden;
  margin:0;padding:18px 22px 18px 50px;
  border:1px solid transparent;border-radius:14px;
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1), background 0.4s ease,
             border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Sin la línea divisoria: ahora separa el aire entre tarjetas */
.re-lado li{border-bottom:none;}
.re-lado li:last-child{margin-bottom:0;}

/* Entrada escalonada: los puntos caen uno tras otro, no en bloque */
.re-lado li.re-rev{transition-delay:0s;}
.re-lado li:nth-child(1){transition-delay:0.04s;}
.re-lado li:nth-child(2){transition-delay:0.12s;}
.re-lado li:nth-child(3){transition-delay:0.2s;}
.re-lado li:nth-child(4){transition-delay:0.28s;}
.re-lado li:nth-child(5){transition-delay:0.36s;}

/* El marcador se recoloca dentro de la tarjeta */
.re-lado li::before{
  top:calc(18px + 0.58em);left:24px;
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}

/* Filete que entra desde la izquierda al señalar */
.re-lado li::after{
  content:'';position:absolute;left:0;top:14%;bottom:14%;width:2px;
  border-radius:0 2px 2px 0;
  transform:scaleY(0);transform-origin:center;
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1);
}

/* ── Lado oscuro: vidrio tenue, realce dorado ── */
.re-lado-si li{
  background:linear-gradient(150deg,rgba(214,232,242,0.05),rgba(183,203,216,0.015) 52%,rgba(214,232,242,0.035));
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-color:rgba(214,232,242,0.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.re-lado-si li::after{background:linear-gradient(180deg,transparent,var(--gold-hi),transparent);}
.re-lado-si li:hover{
  transform:translateX(6px);
  background:linear-gradient(150deg,rgba(217,192,138,0.13),rgba(185,154,94,0.04) 52%,rgba(217,192,138,0.09));
  border-color:rgba(217,192,138,0.34);
  box-shadow:0 0 26px rgba(185,154,94,0.16), 0 12px 30px rgba(0,0,0,0.4),
             inset 0 1.5px 0 rgba(255,246,224,0.22);
}
.re-lado-si li:hover::after{transform:scaleY(1);}
.re-lado-si li:hover::before{
  transform:scale(1.5);
  box-shadow:0 0 16px rgba(217,192,138,0.9);
}

/* ── Lado claro: mismo gesto, tinta en vez de oro ── */
.re-lado-no li{
  background:linear-gradient(150deg,rgba(255,255,255,0.4),rgba(255,255,255,0.14) 52%,rgba(255,255,255,0.3));
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border-color:rgba(255,255,255,0.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}
.re-lado-no li::after{background:linear-gradient(180deg,transparent,var(--gold-dark),transparent);}
.re-lado-no li:hover{
  transform:translateX(6px);
  background:linear-gradient(150deg,rgba(255,255,255,0.62),rgba(255,255,255,0.28) 52%,rgba(255,255,255,0.5));
  border-color:rgba(255,255,255,0.85);
  box-shadow:0 0 22px rgba(118,152,178,0.18), 0 12px 28px rgba(28,38,48,0.14),
             inset 0 1.5px 0 rgba(255,255,255,0.95);
}
.re-lado-no li:hover::after{transform:scaleY(1);}
.re-lado-no li:hover::before{transform:scale(1.5);}

/* Los rótulos también entran, un poco antes que la lista */
.re-lado .re-eyebrow{position:relative;display:inline-block;}
.re-lado .re-eyebrow::after{
  content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;
  transform:scaleX(0);transform-origin:left center;
  animation:re-sublinea 1.1s cubic-bezier(.2,.8,.2,1) 0.3s forwards;
}
.re-lado-si .re-eyebrow::after{background:linear-gradient(90deg,var(--gold-hi),transparent);}
.re-lado-no .re-eyebrow::after{background:linear-gradient(90deg,var(--gold-dark),transparent);}
@keyframes re-sublinea{to{transform:scaleX(1);}}

@media (max-width:640px){
  .re-lado li{padding:15px 16px 15px 42px;}
  .re-lado li::before{left:18px;top:calc(15px + 0.58em);}
  /* En táctil no hay cursor: el realce se apaga para no quedar pegado */
  .re-lado li:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .re-lado li:hover{transform:none;}
  .re-lado .re-eyebrow::after{animation:none;transform:scaleX(1);}
}

/* ══════════════════════════════════════════════════════════════
   EL TABLERO, EN MÁRMOL
   Las casillas alternan blanco y negro como un tablero de verdad,
   con las texturas de mármol reales. Las fichas crecen y la casilla
   activa se enciende con un halo dorado.
   ══════════════════════════════════════════════════════════════ */

.re-tl-pista{
  border-radius:10px;overflow:hidden;
  border:1px solid rgba(217,192,138,0.28);
  box-shadow:0 0 40px rgba(0,0,0,0.5), 0 22px 60px rgba(0,0,0,0.45),
             inset 0 0 0 1px rgba(255,255,255,0.05);
}
.re-tl-sq{
  aspect-ratio:1;border:none;position:relative;
  background-size:cover;background-position:center;
  transition:box-shadow 0.45s ease, filter 0.45s ease;
}
/* Casillas claras e impares: mármol blanco */
.re-tl-sq:nth-child(odd){
  background-image:url('assets/reinicia/marmol-blanco-casilla.webp');
  color:rgba(19,19,20,0.42);
}
/* Casillas oscuras y pares: mármol negro */
.re-tl-sq:nth-child(even){
  background-image:url('assets/reinicia/marmol-negro-casilla.webp');
  color:rgba(246,241,232,0.38);
}
/* Cada casilla toma un trozo distinto de la piedra: no se ve repetido */
.re-tl-sq:nth-child(3n){background-position:30% 65%;}
.re-tl-sq:nth-child(3n+1){background-position:72% 22%;}
.re-tl-sq:nth-child(5n){background-position:12% 80%;}
/* El número, en su esquina */
.re-tl-sq{padding:8px 10px;font-size:11px;letter-spacing:0.5px;}

/* La casilla donde está la ficha se enciende */
.re-tl-sq.on{
  background-color:transparent;border:none;
  box-shadow:
    inset 0 0 0 2px var(--gold-hi),
    inset 0 0 34px rgba(217,192,138,0.45),
    0 0 26px rgba(185,154,94,0.4);
  filter:brightness(1.12) saturate(1.1);
  z-index:2;
}
.re-tl-sq.on:nth-child(odd){color:rgba(19,19,20,0.75);}
.re-tl-sq.on:nth-child(even){color:var(--gold-hi);}

/* Un resplandor recorre la casilla activa, lento */
.re-tl-sq.on::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(255,246,224,0.3) 0%, rgba(255,246,224,0) 62%);
  animation:re-latido 3.2s ease-in-out infinite;
}
@keyframes re-latido{0%,100%{opacity:0.45;}50%{opacity:1;}}

/* ── Las fichas, más grandes ── */
.re-tl-glifo{
  width:clamp(58px,7.4vw,86px);height:clamp(94px,12vw,140px);
}
.re-tl-pieza{width:clamp(58px,7.4vw,86px);}
/* Halo detrás de la ficha: la despega del mármol */
.re-tl-glifo::before{
  content:'';position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:150%;height:120%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse, rgba(255,246,224,0.22) 0%, rgba(255,246,224,0) 68%);
  transition:background 0.6s ease;
}
.es-reina .re-tl-glifo::before{
  background:radial-gradient(ellipse, rgba(217,192,138,0.45) 0%, rgba(185,154,94,0) 70%);
}
.re-ficha-peon{filter:drop-shadow(0 6px 16px rgba(0,0,0,0.7));}
.re-ficha-reina{
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.7)) drop-shadow(0 0 28px rgba(217,192,138,0.65));
}

/* ══════════════════════════════════════════════════════════════
   "Antes de cerrar tu movimiento" sobre mármol negro.
   Además: las cajas usaban la receta de vidrio CLARO con texto en
   tinta, dentro de una sección oscura — por eso se perdían.
   ══════════════════════════════════════════════════════════════ */
#preguntas{
  position:relative;
  background:var(--ink) url('assets/reinicia/marmol-negro-seccion.webp') no-repeat center center / cover;
}
/* Velo: la veta no debe competir con el texto */
#preguntas::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(11,11,12,0.72) 16%, rgba(11,11,12,0.72) 84%, var(--ink) 100%);
}
#preguntas > .re-wrap{position:relative;z-index:1;}

#preguntas .re-q{
  background:linear-gradient(150deg,rgba(214,232,242,0.1),rgba(183,203,216,0.03) 52%,rgba(214,232,242,0.075));
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(214,232,242,0.18);
  box-shadow:0 0 24px rgba(0,0,0,0.35), inset 0 1.5px 0 rgba(255,255,255,0.14);
}
#preguntas .re-q[open]{
  background:linear-gradient(150deg,rgba(217,192,138,0.13),rgba(185,154,94,0.04) 52%,rgba(217,192,138,0.09));
  border-color:rgba(217,192,138,0.34);
  box-shadow:0 0 30px rgba(185,154,94,0.18), 0 14px 34px rgba(0,0,0,0.45),
             inset 0 1.5px 0 rgba(255,246,224,0.22);
}
#preguntas .re-q summary{color:var(--vanilla);}
#preguntas .re-q[open] summary{color:var(--gold-hi);}
#preguntas .re-q:hover summary{color:var(--gold-hi);}
#preguntas .re-q .a{color:rgba(246,241,232,0.82);}
#preguntas .re-q-chev{border-color:var(--gold-hi);}

@media (max-width:640px){
  .re-tl-glifo{width:clamp(38px,11vw,54px);height:clamp(62px,18vw,88px);}
  .re-tl-pieza{width:clamp(38px,11vw,54px);}
  .re-tl-sq{padding:5px 6px;font-size:9px;}
}
@media (prefers-reduced-motion:reduce){
  .re-tl-sq.on::after{animation:none;opacity:0.7;}
}

/* La ficha se mide contra la casilla, no en píxeles sueltos: así nunca
   sobresale del tablero (que recorta) ni queda perdida dentro de ella. */
.re-tl-pieza{
  height:86%;width:auto;
  top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
}
.re-tl-glifo{height:100%;width:auto;aspect-ratio:2/3;}
.re-ficha{height:100%;width:auto;}
/* El asa vuelve a colgar bajo la ficha sin estirarla */
.re-tl-pieza{flex-direction:column;}
.re-tl-glifo{flex:1;min-height:0;}

/* ══════════════════════════════════════════════════════════════
   Fichas limpias y de pie sobre el tablero.
   · El halo dejó de ser un rectángulo detrás de la ficha (se veía
     como una caja) y pasó a la propia silueta, con drop-shadow.
   · El tablero deja de recortar: las piezas sobresalen por arriba,
     como en un tablero real. Las esquinas se redondean por casilla.
   ══════════════════════════════════════════════════════════════ */

.re-tl-pista{overflow:visible;}
.re-tl-sq:first-child{border-radius:10px 0 0 10px;}
.re-tl-sq:last-child{border-radius:0 10px 10px 0;}
/* El realce de la casilla activa se recorta a su propia forma */
.re-tl-sq{overflow:hidden;}

/* Fuera el rectángulo luminoso */
.re-tl-glifo::before{content:none;}

/* Un 50% más grande, apoyada en la casilla y sobresaliendo por arriba */
.re-tl-pieza{
  height:130%;
  top:auto;bottom:6%;transform:translateX(-50%);
  justify-content:flex-end;
}
.re-tl-glifo{aspect-ratio:auto;}

/* El resplandor sigue el contorno de la pieza, no una caja */
.re-ficha-peon{
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.75))
         drop-shadow(0 0 22px rgba(255,246,224,0.35));
}
.re-ficha-reina{
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.75))
         drop-shadow(0 0 30px rgba(217,192,138,0.8))
         drop-shadow(0 0 60px rgba(185,154,94,0.4));
}
/* La sombra al pie se ajusta a la ficha más grande */
.re-tl-glifo::after{
  bottom:2px;width:64%;height:11px;
  background:radial-gradient(ellipse, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 70%);
}
.es-reina .re-tl-glifo::after{
  width:80%;height:14px;
  background:radial-gradient(ellipse, rgba(217,192,138,0.55) 0%, rgba(0,0,0,0) 72%);
}

@media (max-width:640px){
  .re-tl-pieza{height:124%;}
}

/* ══════════════════════════════════════════════════════════════
   CORRECCIÓN: las fichas quedaban en ancho cero.
   El contenedor es flex en columna, así que la ficha se estiraba al
   ancho del padre (2px) en vez de usar su propia proporción. Al fijar
   la relación de aspecto y dejar de estirar, el ancho sale del alto.
   ══════════════════════════════════════════════════════════════ */
.re-tl-pieza{align-items:center;width:auto;}
.re-tl-glifo{
  flex:none;
  height:100%;width:auto;
  aspect-ratio:300 / 520;   /* la proporción real de las fichas */
}

/* Los números de casilla sobre mármol negro estaban muy tenues */
.re-tl-sq:nth-child(even){color:rgba(246,241,232,0.62);}
.re-tl-sq:nth-child(odd){color:rgba(19,19,20,0.55);}

/* ══════════════════════════════════════════════════════════════
   La cajilla que describe cada paso: halo que recorre el borde.
   Invita a leerla sin robarle atención al tablero.
   ══════════════════════════════════════════════════════════════ */
.re-tl-caption{
  position:relative;isolation:isolate;
  max-width:52ch;margin-left:auto;margin-right:auto;text-align:center;
}
/* Trazo luminoso girando por el filo */
.re-tl-caption::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from 0deg,
    rgba(217,192,138,0) 0deg, rgba(217,192,138,0) 240deg,
    rgba(217,192,138,0.85) 300deg, rgba(255,246,224,1) 330deg,
    rgba(217,192,138,0.85) 350deg, rgba(217,192,138,0) 360deg);
  animation:re-gira-halo 5.5s linear infinite;
}
/* Tapa interior: deja ver el trazo solo en el borde */
.re-tl-caption::after{
  content:'';position:absolute;inset:1px;border-radius:inherit;z-index:-1;
  background:var(--ink-2);
}
@keyframes re-gira-halo{to{transform:rotate(1turn);}}

/* Resplandor suave que late con el mismo compás */
.re-tl-caption{
  box-shadow:0 0 24px rgba(185,154,94,0.16), 0 14px 34px rgba(0,0,0,0.45);
  animation:re-respira-caption 5.5s ease-in-out infinite;
}
@keyframes re-respira-caption{
  0%,100%{box-shadow:0 0 20px rgba(185,154,94,0.12), 0 14px 34px rgba(0,0,0,0.45);}
  50%{box-shadow:0 0 34px rgba(185,154,94,0.28), 0 14px 34px rgba(0,0,0,0.45);}
}

@media (prefers-reduced-motion:reduce){
  .re-tl-caption::before{animation:none;}
  .re-tl-caption{animation:none;}
}

/* ══════════════════════════════════════════════════════════════
   La cajilla: vidrio líquido + una luz que RECORRE el filo.
   El cónico giratorio anterior barría como un radar; aquí es un
   punto de luz que viaja por el perímetro, igual que en los botones.
   ══════════════════════════════════════════════════════════════ */

/* Se anulan el radar y el latido anteriores */
.re-tl-caption::before{content:'';}
.re-tl-caption{animation:none;}

.re-tl-caption{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:16px;padding:24px 30px;
  background:linear-gradient(150deg,rgba(214,232,242,0.13),rgba(183,203,216,0.035) 52%,rgba(214,232,242,0.1));
  backdrop-filter:blur(26px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.06);
  border:1px solid rgba(214,232,242,0.22);
  box-shadow:
    0 0 30px rgba(183,203,216,0.1),
    0 18px 48px rgba(0,0,0,0.45),
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1.5px 3px rgba(0,0,0,0.3);
  color:var(--vanilla);
}

/* Reflejo especular diagonal, como en las demás superficies de vidrio */
.re-tl-caption::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  border-radius:inherit;background:linear-gradient(118deg,
    rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 26%,
    rgba(255,255,255,0) 76%, rgba(255,255,255,0.16) 100%);
  mix-blend-mode:screen;opacity:0.6;
}

/* El punto de luz que viaja por el borde */
.re-tl-caption::before{
  content:'';position:absolute;top:0;left:0;pointer-events:none;z-index:2;
  width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,246,224,0.9) 0%,
    rgba(217,192,138,0.45) 34%,
    rgba(217,192,138,0) 70%);
  animation:re-recorre 6.5s linear infinite;
}

.re-tl-caption > *{position:relative;z-index:3;}

@media (prefers-reduced-motion:reduce){
  .re-tl-caption::before{animation:none;opacity:0;}
}

/* ══════════════════════════════════════════════════════════════
   Cajilla: filo de vidrio con relieve y una luz que lo recorre
   despacio. El recorte se levanta para que el resplandor salga
   hacia afuera en vez de cortarse contra el borde.
   ══════════════════════════════════════════════════════════════ */
.re-tl-caption{
  overflow:visible;
  /* Relieve: luz arriba, sombra abajo y un aro tenue alrededor */
  box-shadow:
    0 0 0 1px rgba(214,232,242,0.07),
    0 0 34px rgba(183,203,216,0.07),
    0 20px 52px rgba(0,0,0,0.5),
    inset 0 2px 0 rgba(255,255,255,0.34),
    inset 0 1px 12px rgba(255,255,255,0.07),
    inset 0 -2px 0 rgba(0,0,0,0.38),
    inset 0 -8px 18px rgba(0,0,0,0.22);
}

/* La luz, más pequeña y tenue, y mucho más lenta */
.re-tl-caption::before{
  width:190px;height:190px;margin:-95px 0 0 -95px;
  background:radial-gradient(circle,
    rgba(255,246,224,0.32) 0%,
    rgba(217,192,138,0.16) 28%,
    rgba(217,192,138,0.05) 52%,
    rgba(217,192,138,0) 72%);
  filter:blur(3px);
  animation:re-recorre 16s linear infinite;
  z-index:0;   /* bajo el texto, pero visible dentro y fuera del filo */
}

/* El reflejo especular no debe tapar la luz que pasa */
.re-tl-caption::after{opacity:0.45;z-index:1;}
.re-tl-caption > *{z-index:2;}

@media (prefers-reduced-motion:reduce){
  .re-tl-caption::before{animation:none;opacity:0;}
}

/* ══════════════════════════════════════════════════════════════
   Cajilla con indicador de casilla.
   Los rótulos de los extremos pasan a dorado: en gris azulado se
   seguían leyendo como "azul sobre negro" aunque el contraste diera.
   ══════════════════════════════════════════════════════════════ */
.re-tl-extremos{color:var(--gold);}
.re-tl-extremos span{color:var(--gold);}

.re-tl-caption{
  display:flex;align-items:center;gap:20px;text-align:left;
}
.re-tl-texto{margin:0;flex:1;min-width:0;}

/* Insignia de vidrio con el número de casilla */
.re-tl-paso{
  flex:none;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(150deg,rgba(217,192,138,0.22),rgba(185,154,94,0.06) 52%,rgba(217,192,138,0.16));
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(217,192,138,0.42);
  box-shadow:
    0 0 20px rgba(185,154,94,0.22),
    inset 0 1.5px 0 rgba(255,246,224,0.4),
    inset 0 -1.5px 3px rgba(0,0,0,0.3);
}
.re-tl-paso b{
  font-family:'Cinzel',Georgia,serif;font-weight:600;
  font-size:22px;line-height:1;color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}
.re-tl-paso i{
  font-style:normal;font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(246,241,232,0.55);margin-top:3px;
}
/* Al coronar, la insignia se enciende */
.es-reina .re-tl-paso{
  background:linear-gradient(150deg,rgba(217,192,138,0.4),rgba(185,154,94,0.14) 52%,rgba(217,192,138,0.3));
  border-color:var(--gold-hi);
  box-shadow:0 0 30px rgba(217,192,138,0.5), inset 0 1.5px 0 rgba(255,246,224,0.6);
}
.es-reina .re-tl-paso b{color:#fff6eb;}

@media (max-width:640px){
  .re-tl-caption{gap:14px;padding:18px 20px;}
  .re-tl-paso{width:50px;height:50px;}
  .re-tl-paso b{font-size:19px;}
}

/* "Tu día a día hoy" y "Dónde puedes llegar": en gris azulado seguían
   leyéndose como azul sobre negro. Pasan al dorado del sistema. */
.re-ad-rotulo{color:var(--gold);}
.re-ad-despues .re-ad-rotulo{color:var(--gold-hi);}
.re-ad-pct{color:var(--gold-hi);}

/* Sección que termina en un bloque a todo el ancho: sin relleno inferior.
   Ese espacio se veía como una franja clara suelta bajo las tarjetas. */
.re-sec-sin-pie{padding-bottom:0;}

/* ══════════════════════════════════════════════════════════════════
   PÁGINA DE FECHA (edición)
   Reusa todo el sistema de Reinicia: Cinzel, paleta oficial, vidrio
   líquido y los botones con luz. Solo añade lo propio de esta página.
   ══════════════════════════════════════════════════════════════════ */

.re-nav-nombre{
  font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:17px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--vanilla);
}

/* ── Portada ── */
.re-ed-hero{min-height:82vh;}
.re-hero-velo{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(11,11,12,0.94) 0%, rgba(11,11,12,0.7) 48%, rgba(11,11,12,0.34) 100%),
    linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0) 30%, rgba(11,11,12,0.5) 78%, var(--ink) 100%);
}
.re-ed-hero .re-hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;
}
.re-ed-volver{
  display:inline-block;margin-bottom:22px;
  font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--gold-hi);transition:color 0.25s ease, transform 0.25s ease;
}
.re-ed-volver:hover{color:#f0dcb0;transform:translateX(-3px);}
.re-ed-agotado{
  display:inline-block;margin-bottom:16px;padding:7px 16px;border-radius:99px;
  font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
  background:rgba(214,232,242,0.1);border:1px solid rgba(214,232,242,0.28);
  color:var(--vanilla);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
}
.re-ed-titulo{
  font-family:'Cinzel',Georgia,serif;font-weight:400;
  font-size:clamp(34px,5.6vw,66px);line-height:1.1;letter-spacing:0.01em;
  margin:0 0 14px;color:var(--vanilla);text-wrap:balance;
}

/* ── El detalle: tarjetas de vidrio ── */
.re-ed-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;margin:44px 0 0;
}
.re-ed-dato{
  padding:24px 26px;border-radius:16px;
  background:var(--vidrio-osc);
  backdrop-filter:var(--vidrio-osc-blur);-webkit-backdrop-filter:var(--vidrio-osc-blur);
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:var(--vidrio-osc-sombra);
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.re-ed-dato:hover{
  transform:translateY(-3px);
  box-shadow:0 0 34px rgba(185,154,94,0.16), 0 20px 50px rgba(0,0,0,0.48),
             inset 0 1.5px 0 rgba(255,255,255,0.34);
}
.re-ed-dato-rot{
  display:block;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;
}
.re-ed-dato b{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:19px;line-height:1.28;letter-spacing:0.02em;color:var(--vanilla);
}
.re-ed-dato-sub{
  display:block;margin-top:7px;font-size:13.5px;line-height:1.55;
  color:var(--fade-dark);
}
.re-ed-dato-cuenta .re-cd{margin-top:2px;justify-content:flex-start;}

.re-ed-desc{
  margin-top:34px;max-width:64ch;
  font-size:16px;line-height:1.85;color:var(--fade-dark);
}

/* ── Video de invitación ── */
.re-ed-video{margin-top:40px;}
.re-ed-video .video-embed,
.re-ed-video iframe{border-radius:18px;}
.re-ed-video .video-embed{
  box-shadow:0 0 36px rgba(183,203,216,0.1), 0 24px 60px rgba(0,0,0,0.5);
  border:1px solid var(--vidrio-osc-borde);
}

/* ── Qué incluye / Instrucciones ── */
.re-ed-bloques{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin-top:44px;
}
.re-ed-bloque{
  padding:30px 32px;border-radius:18px;
  background:var(--vidrio-cla);
  backdrop-filter:var(--vidrio-cla-blur);-webkit-backdrop-filter:var(--vidrio-cla-blur);
  border:1px solid var(--vidrio-cla-borde);
  box-shadow:var(--vidrio-cla-sombra);
}
.re-ed-bloque h3{
  font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:19px;letter-spacing:0.025em;margin:0 0 14px;color:var(--ink);
}
.re-ed-bloque p{
  margin:0;font-size:15px;line-height:1.8;color:var(--ink-soft);white-space:pre-line;
}

/* ── Galería ── */
.re-ed-galeria{
  display:flex;gap:18px;overflow-x:auto;
  padding:40px 6vw 18px;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
.re-ed-galeria::-webkit-scrollbar{display:none;}
.re-ed-foto{
  flex:0 0 clamp(240px,26vw,340px);margin:0;scroll-snap-align:start;
}
.re-ed-foto img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;display:block;
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:0 0 30px rgba(183,203,216,0.08), 0 20px 50px rgba(0,0,0,0.5);
  transition:transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease;
}
.re-ed-foto:hover img{
  transform:translateY(-7px);
  box-shadow:0 0 40px rgba(185,154,94,0.18), 0 28px 62px rgba(0,0,0,0.55);
}
.re-ed-foto:nth-child(even){padding-top:32px;}
.re-ed-foto figcaption{
  margin-top:12px;font-size:12.5px;letter-spacing:0.02em;color:var(--fade-dark);
}

/* ── Entradas: la fase de precio ── */
.re-plan-fase{
  margin:-2px 0 16px;font-size:12.5px;letter-spacing:0.02em;
  color:var(--gold-hi);
}
.re-plan-gen .re-plan-fase{color:var(--gold-dark);}
.re-btn-agotado{
  display:inline-block;padding:16px 34px;border-radius:12px;
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;
  background:rgba(214,232,242,0.07);border:1px solid rgba(214,232,242,0.2);
  color:rgba(246,241,232,0.55);cursor:default;
}
.re-plan-gen .re-btn-agotado{
  background:rgba(28,38,48,0.06);border-color:rgba(28,38,48,0.18);color:rgba(19,19,20,0.45);
}

/* ── Cómo llegar ── */
.re-ed-mapa{
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr);
  gap:26px;align-items:center;margin-top:40px;
}
.re-ed-dir{
  font-size:16px;line-height:1.75;color:var(--fade-dark);margin:0 0 24px;max-width:30ch;
}
.re-ed-mapa-marco{
  position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:0 0 34px rgba(183,203,216,0.09), 0 22px 56px rgba(0,0,0,0.5);
}
.re-ed-mapa-marco iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  /* El mapa de Google es muy claro: se integra a la paleta oscura */
  filter:grayscale(0.55) contrast(1.06) brightness(0.82) sepia(0.16);
}

/* ── Documentos ── */
.re-ed-docs{display:flex;flex-direction:column;gap:12px;margin-top:40px;max-width:640px;}
.re-ed-doc{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 24px;border-radius:14px;
  background:var(--vidrio-osc);
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
  color:var(--vanilla);font-size:15px;
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.re-ed-doc:hover{
  transform:translateX(5px);border-color:rgba(217,192,138,0.4);
  box-shadow:0 0 24px rgba(185,154,94,0.16), inset 0 1.5px 0 rgba(255,246,224,0.2);
  color:var(--vanilla);
}
.re-ed-doc i{font-style:normal;font-size:18px;color:var(--gold-hi);flex:none;}

@media (max-width:860px){
  .re-ed-mapa{grid-template-columns:1fr;gap:22px;}
  .re-ed-dir{max-width:none;}
}
@media (max-width:640px){
  .re-ed-hero{min-height:auto;padding-top:118px;padding-bottom:52px;}
  .re-ed-datos{gap:14px;margin-top:32px;}
  .re-ed-dato{padding:18px 20px;}
  .re-ed-bloque{padding:24px 22px;}
  .re-ed-galeria{padding:30px 18px 14px;}
  .re-ed-foto{flex:0 0 70vw;}
  .re-ed-foto:nth-child(even){padding-top:0;}
  .re-ed-foto:hover img{transform:none;}
  .re-ed-doc:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .re-ed-dato:hover, .re-ed-foto:hover img, .re-ed-doc:hover{transform:none;}
}

/* La cuenta regresiva necesita más ancho que un dato de una línea:
   en una sola columna sus unidades se apretaban y cortaban las etiquetas. */
.re-ed-dato-cuenta{grid-column:span 2;}
.re-ed-dato-cuenta .re-cd{gap:10px;margin-top:4px;}
.re-ed-dato-cuenta .re-cd-unit{min-width:58px;padding:10px 6px;}
.re-ed-dato-cuenta .re-cd-num{font-size:clamp(19px,2.3vw,24px);}
.re-ed-dato-cuenta .re-cd-lab{font-size:8.5px;letter-spacing:0.12em;white-space:nowrap;}
@media (max-width:760px){
  .re-ed-dato-cuenta{grid-column:1/-1;}
  .re-ed-dato-cuenta .re-cd-unit{min-width:0;flex:1;}
}

/* El marco de video de render_video_embed vive en eventos/style.css, que esta
   página ya no carga: sin estas reglas el iframe quedaba diminuto y a la izquierda. */
.re-ed-video{margin:44px auto 0;max-width:1100px;}
.re-ed-video .video-embed{
  position:relative;width:100%;padding-top:56.25%;margin:0;
  border-radius:18px;overflow:hidden;background:#000;
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:0 0 40px rgba(183,203,216,0.1), 0 26px 64px rgba(0,0,0,0.55);
}
.re-ed-video .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.re-ed-video .video-fallback-link{
  display:block;text-align:center;margin-top:18px;
  font-size:13.5px;color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px;
}
.re-ed-video-sec .re-eyebrow,
.re-ed-video-sec .re-title,
.re-ed-video-sec .re-rule{text-align:center;}
.re-ed-video-sec .re-title{margin-left:auto;margin-right:auto;}
.re-ed-video-sec .re-rule{margin-left:auto;margin-right:auto;}
@media (max-width:640px){
  .re-ed-video{margin-top:30px;}
  .re-ed-video .video-embed{border-radius:14px;}
}

/* ══════════════════════════════════════════════════════════════════
   FECHAS — el cierre de la landing.
   Antes repetía la fecha de la portada; ahora lista las fechas reales
   del show. Cada tarjeta es una hoja de calendario en vidrio.
   ══════════════════════════════════════════════════════════════════ */
.re-fechas-rotulo{
  font-family:'Cinzel',Georgia,serif;font-size:11px;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--gold-hi);margin:40px 0 20px;
}
.re-fechas{
  display:grid;gap:18px;margin:0 auto 46px;max-width:960px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  text-align:left;
}
.re-fechas-una{max-width:620px;}

.re-fecha{
  position:relative;display:flex;gap:20px;align-items:flex-start;
  padding:24px 26px;border-radius:18px;
  background:var(--vidrio-osc);
  backdrop-filter:var(--vidrio-osc-blur);-webkit-backdrop-filter:var(--vidrio-osc-blur);
  border:1px solid var(--vidrio-osc-borde);
  box-shadow:var(--vidrio-osc-sombra);
  transition:transform 0.32s cubic-bezier(.2,.8,.2,1),box-shadow 0.32s ease,border-color 0.32s ease;
}
.re-fecha:hover{
  transform:translateY(-4px);border-color:rgba(217,192,138,0.4);
  box-shadow:0 0 42px rgba(185,154,94,0.2),0 24px 58px rgba(0,0,0,0.5),inset 0 1.5px 0 rgba(255,255,255,0.34);
}
/* Reflejo diagonal, como el resto del vidrio del sitio */
.re-fecha::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,0.34) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 78%,rgba(255,255,255,0.15) 100%);
  mix-blend-mode:screen;opacity:0.6;
}
.re-fecha.es-proxima{border-color:rgba(217,192,138,0.32);}
.re-fecha.es-agotada{opacity:0.58;}
.re-fecha.es-agotada:hover{transform:none;}

.re-fecha-marca{
  position:absolute;top:-10px;right:20px;z-index:2;
  padding:5px 13px;border-radius:99px;
  font-family:'Cinzel',Georgia,serif;font-size:9.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--ink);
  background:linear-gradient(150deg,#f6ecd4,var(--gold-hi) 52%,var(--gold));
  box-shadow:0 0 18px rgba(185,154,94,0.45),0 4px 12px rgba(0,0,0,0.4);
}

/* Hoja de calendario */
.re-fecha-calendario{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:74px;padding:12px 0;border-radius:13px;
  background:linear-gradient(150deg,rgba(185,154,94,0.2),rgba(149,131,93,0.06) 52%,rgba(185,154,94,0.14));
  border:1px solid rgba(217,192,138,0.3);
  box-shadow:inset 0 1.5px 0 rgba(255,246,224,0.3),0 0 18px rgba(185,154,94,0.12);
}
.re-fecha-mes{
  font-family:'Cinzel',Georgia,serif;font-size:10px;letter-spacing:2.4px;
  color:var(--gold-hi);text-transform:uppercase;
}
.re-fecha-dia{
  font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:31px;line-height:1.1;
  color:var(--vanilla);margin:2px 0;
}
.re-fecha-anio{font-size:9.5px;letter-spacing:1.8px;color:rgba(246,241,232,0.45);}

.re-fecha-cuerpo{flex:1;min-width:0;}
.re-fecha-ciudad{
  font-family:'Cinzel',Georgia,serif;font-weight:500;
  font-size:clamp(17px,2vw,21px);line-height:1.25;letter-spacing:0.02em;
  color:var(--vanilla);margin:0 0 5px;
}
.re-fecha-cuando{font-size:13px;line-height:1.5;color:rgba(246,241,232,0.6);margin:0 0 15px;}

.re-fecha-aforo{margin-bottom:17px;}
.re-fecha-aforo .re-bar{margin-bottom:7px;}
.re-fecha-cupos{font-size:11.5px;letter-spacing:0.4px;color:rgba(246,241,232,0.5);}
.re-fecha-agotada{
  display:inline-block;margin:0 0 15px;padding:6px 14px;border-radius:99px;
  font-family:'Cinzel',Georgia,serif;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(246,241,232,0.7);
  background:rgba(246,241,232,0.06);border:1px solid rgba(246,241,232,0.16);
}

.re-fecha-acciones{display:flex;flex-direction:column;align-items:flex-start;gap:11px;}
.re-fecha-acciones .re-btn{width:100%;text-align:center;}
.re-fecha-mas{
  font-size:12.5px;letter-spacing:0.4px;color:var(--gold-hi);
  text-decoration:underline;text-underline-offset:3px;
  transition:color 0.25s ease;
}
.re-fecha-mas:hover{color:#f6ecd4;}

@media (prefers-reduced-motion:reduce){.re-fecha:hover{transform:none;}}
@media (max-width:640px){
  .re-fechas{gap:14px;margin-bottom:34px;}
  .re-fecha{padding:19px 18px;gap:15px;border-radius:15px;}
  .re-fecha-calendario{width:62px;padding:10px 0;}
  .re-fecha-dia{font-size:26px;}
  .re-fechas-rotulo{margin:30px 0 16px;}
}

/* Beneficios de cada entrada en la página de la fecha */
.re-plan-lista{list-style:none;margin:-10px 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;}
.re-plan-lista li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;}
.re-plan-lista li::before{
  content:'';position:absolute;left:0;top:0.55em;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(217,192,138,0.55);
}
.re-plan-gen .re-plan-lista li::before{background:#8e98a3;box-shadow:none;}
/* Frase de venta del tipo de entrada (línea 1 de su descripción) */
.re-plan-frase{font-size:15px;line-height:1.55;margin:0 0 18px;opacity:.85;text-wrap:pretty;}
.re-btn-agotado{opacity:.5;cursor:not-allowed;filter:grayscale(1);}

/* ══ La ficha, sola sobre el tablero ══
   Sin la caja de vidrio: se lee como una pieza real apoyada en la casilla.
   La sombra de contacto la asienta en el mármol en vez de hacerla flotar. */
.re-tl-pieza{
  background:none !important;border:0 !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-radius:0;
}
.re-tl-pieza::before,.re-tl-pieza::after{content:none !important;}
.re-tl-glifo::before{
  top:auto;bottom:-4%;transform:translateX(-50%);
  width:78%;height:14%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%);
}
.es-reina .re-tl-glifo::before{
  background:radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%);
}
.re-ficha-peon{filter:drop-shadow(0 10px 14px rgba(0,0,0,0.55)) drop-shadow(0 2px 3px rgba(0,0,0,0.5));}
.re-tl-pieza:active .re-ficha,.re-tl-pieza.es-arrastrando .re-ficha{
  filter:drop-shadow(0 22px 22px rgba(0,0,0,0.5)) drop-shadow(0 3px 4px rgba(0,0,0,0.45));
}
/* La casilla donde está la ficha: una línea fina, no un recuadro brillante,
   para que la ficha no parezca metida en una caja. */
.re-tl-sq.on{
  box-shadow:inset 0 0 0 1px rgba(217,192,138,0.55) !important;
}
/* Hora límite de ingreso bajo la fecha (Términos, cláusula 11) */
.re-hero-limite{margin:-4px 0 22px;font-size:13px;letter-spacing:.06em;color:#ffd24a;}
.re-hero-limite::before{content:'⏱  ';}