/* ============================================================
   NARUTOMARKET.COM  ·  Hoja de estilos principal
   Lenguaje visual inspirado en la web oficial del juego:
   Poppins, tinta marron muy oscura, naranja de acento,
   titulares enormes y mucho aire.
   ============================================================ */

/* ---------- 1. VARIABLES ---------- */
:root{
  /* Colores base */
  --tinta:#1C0B00;
  --tinta-70:rgba(28,11,0,.70);
  --tinta-45:rgba(28,11,0,.45);
  --tinta-12:rgba(28,11,0,.12);
  --tinta-06:rgba(28,11,0,.06);

  --naranja:#EB6101;
  --naranja-claro:#FF8A2B;
  --naranja-10:rgba(235,97,1,.10);
  --naranja-25:rgba(235,97,1,.25);
  --rojo:#E20000;
  --verde:#0F9D58;

  --papel:#FFFFFF;
  --papel-2:#FAF7F4;
  --papel-3:#F3EDE7;
  --linea:rgba(28,11,0,.10);

  --texto:var(--tinta);
  --texto-suave:#8D857F;

  /* Medidas */
  --ancho:1240px;
  --cab-alto:76px;
  --radio:14px;
  --radio-g:26px;

  /* Sombras */
  --sombra-1:0 2px 10px rgba(28,11,0,.06);
  --sombra-2:0 12px 34px rgba(28,11,0,.10);
  --sombra-3:0 28px 70px rgba(28,11,0,.16);

  /* Curvas */
  --suave:cubic-bezier(.22,.61,.36,1);
  --rebote:cubic-bezier(.34,1.56,.64,1);

  --fuente:'Poppins','Noto Sans JP','Hiragino Sans',sans-serif;
}

/* Modo oscuro NEUTRO: gris cálido, no negro absoluto.
   Mucho mas descansado para leer y menos agresivo de noche. */
[data-tema="oscuro"]{
  --tinta:#EDEAE7;
  --tinta-70:rgba(237,234,231,.72);
  --tinta-45:rgba(237,234,231,.48);
  --tinta-12:rgba(237,234,231,.15);
  --tinta-06:rgba(237,234,231,.08);

  --papel:#26262B;
  --papel-2:#2E2E34;
  --papel-3:#37373E;
  --linea:rgba(237,234,231,.14);

  --texto:#EDEAE7;
  --texto-suave:#A8A29B;

  --naranja:#FF7A24;
  --naranja-claro:#FF9A55;
  --naranja-10:rgba(255,122,36,.13);
  --naranja-25:rgba(255,122,36,.28);
  --verde:#3DBB7E;
  --rojo:#FF5A52;

  --sombra-1:0 2px 10px rgba(0,0,0,.25);
  --sombra-2:0 12px 34px rgba(0,0,0,.32);
  --sombra-3:0 28px 70px rgba(0,0,0,.4);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cab-alto) + 20px);
}
body{
  font-family:var(--fuente);
  font-weight:500;
  color:var(--texto);
  background:var(--papel);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .35s var(--suave),color .35s var(--suave);
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--naranja);color:#fff}

.saltar{position:absolute;left:-9999px;top:0;z-index:999;background:var(--naranja);color:#fff;padding:12px 20px}
.saltar:focus{left:8px;top:8px}
.solo-lector{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:4px}

/* ---------- 3. TIPOGRAFIA ---------- */
.t-gigante{
  font-weight:900;
  font-size:clamp(2.8rem,9vw,7.4rem);
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.t-grande{
  font-weight:900;
  font-size:clamp(2rem,5.2vw,4.2rem);
  line-height:1;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.t-medio{
  font-weight:900;
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  line-height:1.12;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.t-peq{
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.suave{color:var(--texto-suave);font-weight:300}
.naranja{color:var(--naranja)}

/* Trazo naranja bajo un titular */
.subrayado{position:relative;display:inline-block}
.subrayado::after{
  content:'';position:absolute;left:0;right:0;bottom:.08em;height:.28em;
  background:var(--naranja);opacity:.28;z-index:-1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--suave);
}
.es-visible .subrayado::after{transform:scaleX(1)}

/* ---------- 4. ESTRUCTURA ---------- */
.caja{width:min(100% - 40px,var(--ancho));margin-inline:auto}
.seccion{padding:clamp(64px,9vw,130px) 0;position:relative}
.seccion--papel{background:var(--papel-2)}
.seccion--tinta{background:var(--tinta);color:var(--papel)}
[data-tema="oscuro"] .seccion--tinta{background:#0B0503}

.cabecera-sec{margin-bottom:clamp(32px,4vw,58px)}
.cabecera-sec__eti{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:14px;
}
.cabecera-sec__eti::before{content:'';width:26px;height:2px;background:var(--naranja)}
.cabecera-sec__sub{color:var(--texto-suave);font-weight:300;max-width:62ch;margin-top:14px;font-size:1.02rem}
.cabecera-sec--fila{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---------- 5. BOTONES ---------- */
/* ---------- BOTONES ----------
   Forma angular con las esquinas cortadas, como el marco de una
   carta. Al pasar por encima el relleno entra en diagonal y una
   linea de energia recorre el borde inferior.                  */
.btn{
  --corte:13px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 34px;border-radius:0;isolation:isolate;
  font-weight:900;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--naranja);color:#fff;overflow:hidden;
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte));
  transition:color .3s var(--suave),transform .28s var(--rebote),filter .3s;
}
/* Relleno que entra en diagonal */
.btn::before{
  content:'';position:absolute;inset:-2px;z-index:-1;background:var(--tinta);
  transform:translate(-101%,101%);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
/* Linea de energia que recorre el pie del boton */
.btn::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:1;
  background:linear-gradient(90deg,transparent,#FFD9A8,transparent);
  transform:translateX(-100%);
}
.btn:hover{transform:translate(2px,-3px);filter:drop-shadow(0 10px 18px rgba(28,11,0,.28))}
.btn:hover::before{transform:translate(0,0)}
.btn:hover::after{animation:recorrerPie .8s var(--suave)}
@keyframes recorrerPie{to{transform:translateX(100%)}}
.btn:active{transform:translate(1px,-1px) scale(.985);transition-duration:.08s}
.btn svg{transition:transform .35s var(--rebote)}
.btn:hover svg{transform:translateX(6px)}
.btn:focus-visible{outline:3px solid var(--naranja);outline-offset:4px}

/* Variante de solo contorno */
.btn--linea{
  background:transparent;color:var(--texto);
  box-shadow:inset 0 0 0 2px var(--tinta-12);
}
.btn--linea::before{background:var(--naranja)}
.btn--linea:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--naranja)}
.btn--linea::after{background:linear-gradient(90deg,transparent,var(--tinta),transparent)}

/* Variante clara, para fondos oscuros */
.btn--claro{background:#fff;color:var(--tinta)}
.btn--claro::before{background:var(--naranja)}
.btn--claro:hover{color:#fff}

.btn--peq{--corte:9px;padding:11px 22px;font-size:.68rem;letter-spacing:.12em}

/* Enlace con flecha */
.enlace-flecha{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--naranja);position:relative;padding-bottom:4px;
  transition:gap .3s var(--rebote),letter-spacing .3s var(--suave);
}
.enlace-flecha::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--suave);
}
.enlace-flecha:hover{gap:15px;letter-spacing:.19em}
.enlace-flecha:hover::after{transform:scaleX(1);transform-origin:left}

/* Pastillas de filtro: pequeño salto al pasar */
.pastilla{transition:all .3s var(--rebote)}
.pastilla:hover{transform:translateY(-2px)}

/* ---------- 6. CABECERA ---------- */
.cab{
  position:fixed;inset:0 0 auto 0;z-index:200;height:var(--cab-alto);
  display:flex;align-items:center;
  transition:background .4s var(--suave),box-shadow .4s var(--suave),height .4s var(--suave);
}
.cab::before{
  content:'';position:absolute;inset:0;
  background:color-mix(in srgb,var(--papel) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  opacity:0;transition:opacity .4s var(--suave);
}
.cab.es-pegada::before{opacity:1}
.cab.es-pegada{box-shadow:0 1px 0 var(--linea),0 6px 24px rgba(28,11,0,.05);height:66px}
.cab__caja{
  position:relative;z-index:1;
  width:min(100% - 40px,1440px);margin-inline:auto;
  display:flex;align-items:center;gap:28px;
}

.marca{display:flex;align-items:center;gap:11px;flex-shrink:0}
.marca__ico{color:var(--naranja);display:grid;place-items:center}
.marca__espiral{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:dibujar 1.6s var(--suave) .2s forwards;
}
@keyframes dibujar{to{stroke-dashoffset:0}}
.marca:hover .marca__ico{animation:girar 1.1s var(--suave)}
@keyframes girar{to{transform:rotate(360deg)}}
.marca__txt{
  font-weight:300;font-size:1.06rem;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
}
.marca__txt b{font-weight:900}

.nav{margin-left:auto}
.nav__lista{display:flex;gap:6px}
.nav__a{
  position:relative;display:block;padding:10px 16px;
  font-weight:700;font-size:.76rem;letter-spacing:.16em;
}
.nav__a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:4px;height:2px;
  background:var(--naranja);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--suave);
}
.nav__a:hover::after,.nav__a.es-activo::after{transform:scaleX(1);transform-origin:left}
.nav__a.es-activo{color:var(--naranja)}

.cab__extras{display:flex;align-items:center;gap:10px}
.btn-icono{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:var(--texto);transition:background .3s,transform .3s var(--rebote);
}
.btn-icono:hover{background:var(--tinta-06);transform:rotate(18deg)}
.ico-luna{display:none}
[data-tema="oscuro"] .ico-sol{display:none}
[data-tema="oscuro"] .ico-luna{display:block}

/* Moneda publica: los precios se convierten con el ultimo tipo diario del BCE. */
.moneda{position:relative}
.moneda__select{
  appearance:none;min-width:86px;height:38px;padding:9px 27px 9px 13px;border:0;border-radius:999px;
  color:var(--texto);background-color:transparent;font:700 .72rem/1.4 Poppins,sans-serif;
  letter-spacing:.06em;box-shadow:inset 0 0 0 1.5px var(--tinta-12);cursor:pointer;
  transition:box-shadow .3s,color .3s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23877b76' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
.moneda__select:hover,.moneda__select:focus-visible{box-shadow:inset 0 0 0 1.5px var(--naranja);color:var(--naranja);outline:0}

/* Selector de idioma */
.idiomas{position:relative}
.idiomas__btn{
  display:flex;align-items:center;gap:7px;height:38px;padding:9px 15px;border-radius:999px;
  font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1.5px var(--tinta-12);transition:box-shadow .3s,background .3s;
}
.idiomas__btn:hover{box-shadow:inset 0 0 0 1.5px var(--naranja);color:var(--naranja)}
.idiomas__btn svg{transition:transform .3s var(--suave)}
.idiomas.es-abierto .idiomas__btn svg{transform:rotate(180deg)}
.idiomas__lista{
  position:absolute;top:calc(100% + 10px);right:0;min-width:186px;
  background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra-2);
  border:1px solid var(--linea);overflow:hidden;padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);
  transition:all .28s var(--suave);
}
.idiomas.es-abierto .idiomas__lista{opacity:1;visibility:visible;transform:none}
.idiomas__lista a{
  display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:9px;
  font-size:.86rem;font-weight:500;transition:background .2s,color .2s;
}
.idiomas__lista a:hover{background:var(--naranja-10);color:var(--naranja)}
.idiomas__lista a.es-activo{color:var(--naranja);font-weight:700}
.idiomas__bandera{font-size:1.04rem;line-height:1}
/* En pantalla ancha se ve el nombre; en movil, solo el codigo */
.idiomas__corto{display:none}
.idiomas__btn .idiomas__bandera{display:none}

/* Hamburguesa */
.hamburguesa{display:none;width:40px;height:40px;position:relative}
.hamburguesa span{
  position:absolute;left:9px;width:22px;height:2px;background:var(--texto);border-radius:2px;
  transition:transform .38s var(--suave),opacity .25s;
}
.hamburguesa span:nth-child(1){top:14px}
.hamburguesa span:nth-child(2){top:19px}
.hamburguesa span:nth-child(3){top:24px}
.hamburguesa.es-activo span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburguesa.es-activo span:nth-child(2){opacity:0}
.hamburguesa.es-activo span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* Menu movil */
.menu-movil{
  position:fixed;inset:0;z-index:190;background:var(--papel);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--cab-alto) + 26px) 30px 40px;
  overflow-y:auto;
}
/* IMPRESCINDIBLE: sin esto, el display:flex de arriba anula el
   atributo hidden del HTML y el menu tapa toda la pagina en movil. */
.menu-movil[hidden]{display:none !important}
.menu-movil__nav{display:flex;flex-direction:column;gap:4px}
.menu-movil__nav a{
  position:relative;display:flex;align-items:baseline;gap:16px;padding:2px 14px 2px 0;border-radius:12px;
  font-weight:900;font-size:clamp(1.8rem,8vw,2.8rem);line-height:1.28;
  text-transform:uppercase;letter-spacing:-.02em;
  opacity:0;transform:translateY(24px);
  transition:color .28s,background .28s,transform .28s var(--suave),padding-left .28s var(--suave);
}
.menu-movil.es-abierto .menu-movil__nav a{animation:entrarMenu .55s var(--suave) forwards}
.menu-movil.es-abierto .menu-movil__nav a:nth-child(1){animation-delay:.06s}
.menu-movil.es-abierto .menu-movil__nav a:nth-child(2){animation-delay:.12s}
.menu-movil.es-abierto .menu-movil__nav a:nth-child(3){animation-delay:.18s}
.menu-movil.es-abierto .menu-movil__nav a:nth-child(4){animation-delay:.24s}
.menu-movil.es-abierto .menu-movil__nav a:nth-child(5){animation-delay:.30s}
.menu-movil.es-abierto .menu-movil__nav a:nth-child(6){animation-delay:.36s}
.menu-movil.es-abierto .menu-movil__nav a:nth-child(7){animation-delay:.42s}
.menu-movil.es-abierto .menu-movil__nav a:nth-child(8){animation-delay:.48s}
@keyframes entrarMenu{to{opacity:1;transform:none}}
.menu-movil__nav a span{font-size:.66rem;font-weight:700;color:var(--naranja);letter-spacing:.2em}
.menu-movil__nav a:hover,.menu-movil__nav a:focus-visible,.menu-movil__nav a:active,.menu-movil__nav a.es-activo{
  color:var(--naranja);background:linear-gradient(90deg,var(--tinta-05),transparent);padding-left:12px;
}
.menu-movil__nav a:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}
.menu-movil__idiomas{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:44px;
  padding-top:26px;border-top:1px solid var(--linea);
}
.menu-movil__idiomas a{
  padding:8px 15px;border-radius:999px;font-size:.8rem;font-weight:500;
  box-shadow:inset 0 0 0 1.5px var(--tinta-12);
}
.menu-movil__idiomas a.es-activo{background:var(--naranja);color:#fff;box-shadow:none}
body.sin-scroll{overflow:hidden}

/* ---------- 7. HEROE ---------- */
.heroe{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--cab-alto) + 40px) 0 90px;overflow:hidden;
  background:var(--papel);
}
.heroe__fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.heroe__mancha{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  animation:flotar 22s ease-in-out infinite;
}
.heroe__mancha--1{width:52vw;height:52vw;background:var(--naranja);top:-16%;right:-12%;opacity:.16}
.heroe__mancha--2{width:40vw;height:40vw;background:#FF3D00;bottom:-18%;left:-10%;opacity:.10;animation-delay:-8s}
.heroe__mancha--3{width:28vw;height:28vw;background:#FFB300;top:38%;left:44%;opacity:.10;animation-delay:-15s}
@keyframes flotar{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(3%,-5%) scale(1.1)}
  66%{transform:translate(-4%,4%) scale(.94)}
}
/* Rejilla sutil */
.heroe__rejilla{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--tinta-06) 1px,transparent 1px),
                   linear-gradient(90deg,var(--tinta-06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 40%,#000 30%,transparent 100%);
}
/* ---------- IMAGEN DE FONDO DE LA CABECERA ----------
   Se aclara mucho a proposito: manda el texto, no la foto.  */
.heroe__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%;
  opacity:.32;
  filter:saturate(.8) brightness(1.32) contrast(.92);
  animation:acercarLento 14s ease-in-out infinite alternate;
}
[data-tema="oscuro"] .heroe__img{opacity:.28;filter:saturate(.75) brightness(.95) contrast(1)}
/* Movimiento mas marcado: acerca, se desplaza y se inclina un poco */
@keyframes acercarLento{
  0%  {transform:scale(1.04) translate(0,0) rotate(0deg)}
  50% {transform:scale(1.16) translate(-2.2%,-1.6%) rotate(.6deg)}
  100%{transform:scale(1.22) translate(1.8%,1.2%) rotate(-.5deg)}
}

/* Velo que difumina la imagen hacia el texto */
.heroe__velo{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,var(--papel) 6%,color-mix(in srgb,var(--papel) 72%,transparent) 38%,transparent 68%),
    linear-gradient(to top,var(--papel) 2%,transparent 32%);
}

/* El choque de chakra del centro de la imagen */
.heroe__choque{
  position:absolute;left:50%;top:42%;width:min(46vw,560px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(120,190,255,.55),rgba(120,190,255,.18) 38%,transparent 68%);
  filter:blur(24px);
  animation:pulsoChakra 3.4s ease-in-out infinite;
}
@keyframes pulsoChakra{
  0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.94)}
  50%    {opacity:.78;transform:translate(-50%,-50%) scale(1.08)}
}

/* Destellos de rayo, cortos y espaciados */
.heroe__rayo{
  position:absolute;top:0;bottom:0;width:2px;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(150,205,255,.9),transparent);
  filter:blur(1px);
}
.heroe__rayo--1{left:32%;transform:rotate(9deg);animation:rayo 7s steps(1) infinite}
.heroe__rayo--2{left:58%;transform:rotate(-7deg);animation:rayo 7s steps(1) 3.3s infinite}
@keyframes rayo{
  0%,96%{opacity:0}
  96.5%{opacity:.9}
  97%{opacity:0}
  97.5%{opacity:.7}
  98%,100%{opacity:0}
}

/* Chispas que suben despacio */
.heroe__chispas{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(2px 2px at 18% 70%,rgba(255,190,120,.9),transparent),
    radial-gradient(2px 2px at 42% 85%,rgba(150,205,255,.8),transparent),
    radial-gradient(1.5px 1.5px at 68% 60%,rgba(255,210,150,.9),transparent),
    radial-gradient(2px 2px at 82% 78%,rgba(150,205,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 55% 92%,rgba(255,190,120,.8),transparent);
  animation:subirChispas 9s linear infinite;
}
@keyframes subirChispas{
  from{transform:translateY(0);opacity:.5}
  to{transform:translateY(-90px);opacity:0}
}

/* Con foto de fondo, las manchas de color estorban: se bajan mucho */
.heroe__fondo--foto .heroe__mancha{opacity:.06}
.heroe__fondo--foto .heroe__rejilla{opacity:.25}

/* Kanji gigante de fondo */
.heroe__kanji{
  position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  font-size:min(46vw,640px);font-weight:900;line-height:1;
  color:var(--tinta);opacity:.035;pointer-events:none;user-select:none;
  animation:respirar 9s ease-in-out infinite;
}
@keyframes respirar{0%,100%{opacity:.035}50%{opacity:.06}}

.heroe__caja{position:relative;z-index:2;width:min(100% - 40px,var(--ancho));margin-inline:auto}
.heroe__eti{
  display:inline-flex;align-items:center;gap:11px;
  padding:8px 18px;border-radius:999px;margin-bottom:26px;
  background:var(--naranja-10);color:var(--naranja);
  font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1.5px var(--naranja-25);
}
.heroe__punto{
  width:7px;height:7px;border-radius:50%;background:var(--naranja);
  animation:latir 1.9s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{box-shadow:0 0 0 0 rgba(235,97,1,.6)}
  70%{box-shadow:0 0 0 9px rgba(235,97,1,0)}
}
/* El titular va SIEMPRE en una linea. El tamaño se ajusta al
   ancho disponible: el CSS deja una base razonable y el
   JavaScript la afina al pixel en cada pantalla. */
.heroe__titulo{
  margin-bottom:24px;
  white-space:nowrap;
  font-size:clamp(1.5rem,8.4vw,7.2rem);
  line-height:1.02;
}

/* ---------- ENTRADA DEL TITULAR ----------
   Cada letra llega desde abajo, girada y desenfocada, con un
   destello naranja que se apaga. Es lo primero que se ve.   */
.heroe__letras{display:inline-block}
.heroe__letra{
  display:inline-block;
  opacity:0;
  transform:translateY(60%) rotateX(-72deg) scale(.86);
  transform-origin:50% 100%;
  filter:blur(9px);
  animation:entrarLetra .78s cubic-bezier(.22,1.1,.36,1) forwards,
            chispaLetra 3.4s steps(1,end) infinite;
  animation-delay:calc(var(--l,0) * .045s + .12s),
                  calc(var(--l,0) * .231s + 1.1s);
  will-change:transform,opacity,filter;
}
@keyframes entrarLetra{
  0%  {opacity:0;transform:translateY(60%) rotateX(-72deg) scale(.86);filter:blur(9px);
       text-shadow:0 0 26px rgba(235,97,1,.9)}
  55% {opacity:1;transform:translateY(-7%) rotateX(9deg) scale(1.05);filter:blur(0);
       text-shadow:0 0 16px rgba(235,97,1,.55)}
  100%{opacity:1;transform:none;filter:blur(0);text-shadow:none}
}

/* ---------- EFECTO ELECTRICO DEL TITULAR ----------
   Dos capas juntas: un resplandor calido pegado a la forma de
   cada letra que parpadea de forma irregular, y el filtro SVG
   "rayo-borde" que hace crepitar los contornos.              */
.heroe__titulo{filter:url(#rayo-borde)}
@keyframes chispaLetra{
  0%,100%{text-shadow:0 0 1px rgba(255,246,222,.95),0 0 7px rgba(255,198,70,.85),
       0 0 16px rgba(235,97,1,.55),0 0 30px rgba(235,97,1,.28)}
  7%     {text-shadow:0 0 1px rgba(255,252,240,1),0 0 11px rgba(255,212,96,.95),
       0 0 24px rgba(235,97,1,.75),0 0 42px rgba(235,97,1,.36)}
  10%    {text-shadow:0 0 1px rgba(255,246,222,.8),0 0 5px rgba(255,198,70,.6),
       0 0 11px rgba(235,97,1,.4),0 0 20px rgba(235,97,1,.2)}
  15%    {text-shadow:0 0 1px rgba(255,249,228,.95),0 0 8px rgba(255,205,84,.9),
       0 0 18px rgba(235,97,1,.6),0 0 34px rgba(235,97,1,.3)}
  39%    {text-shadow:0 0 1px rgba(255,246,222,.85),0 0 6px rgba(255,198,70,.75),
       0 0 14px rgba(235,97,1,.5),0 0 26px rgba(235,97,1,.25)}
  43%    {text-shadow:0 0 1px rgba(255,255,246,1),0 0 13px rgba(255,220,110,1),
       0 0 28px rgba(235,97,1,.85),0 0 48px rgba(235,97,1,.42)}
  46%    {text-shadow:0 0 1px rgba(255,246,222,.8),0 0 6px rgba(255,198,70,.65),
       0 0 12px rgba(235,97,1,.45),0 0 22px rgba(235,97,1,.22)}
  72%    {text-shadow:0 0 1px rgba(255,248,226,.9),0 0 8px rgba(255,202,78,.85),
       0 0 17px rgba(235,97,1,.55),0 0 32px rgba(235,97,1,.27)}
}
/* Arcos de rayo: relampagos dibujados que parpadean un
   instante sobre el titular, cada uno a su ritmo.            */
/* Onda de luz que barre el titular justo despues */
.heroe__letras::after{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
}
.heroe__titulo{position:relative}
.heroe__titulo::after{
  content:'';position:absolute;left:-6%;top:0;bottom:0;width:34%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(235,97,1,.30),transparent);
  filter:blur(14px);transform:translateX(-140%);
  animation:barridoTitular 1.5s cubic-bezier(.22,.61,.36,1) .55s 1 forwards;
}
@keyframes barridoTitular{
  0%{transform:translateX(-140%);opacity:0}
  25%{opacity:1}
  100%{transform:translateX(400%);opacity:0}
}
/* Revelado por lineas */
.linea-rev{display:block;overflow:hidden}
.linea-rev>span{
  display:block;transform:translateY(105%);
  animation:subirLinea .95s var(--suave) forwards;
}
.linea-rev:nth-child(1)>span{animation-delay:.12s}
.linea-rev:nth-child(2)>span{animation-delay:.24s}
.linea-rev:nth-child(3)>span{animation-delay:.36s}
@keyframes subirLinea{to{transform:none}}

.heroe__texto{
  max-width:54ch;font-weight:300;font-size:clamp(1rem,1.5vw,1.16rem);
  color:var(--texto-suave);margin-bottom:36px;
  opacity:0;animation:aparecer .9s var(--suave) .5s forwards;
}
@keyframes aparecer{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.heroe__botones{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:aparecer .9s var(--suave) .62s forwards}

.heroe__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.6rem;font-weight:700;letter-spacing:.28em;color:var(--texto-suave);
  opacity:0;animation:aparecer 1s var(--suave) 1s forwards;
}
.heroe__scroll i{display:block;width:1px;height:44px;background:linear-gradient(var(--naranja),transparent);position:relative}
.heroe__scroll i::after{
  content:'';position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--naranja);animation:bajarPunto 2.1s var(--suave) infinite;
}
@keyframes bajarPunto{0%{top:0;opacity:1}80%{top:40px;opacity:0}100%{opacity:0}}

/* ---------- FECHA DE LANZAMIENTO ----------
   No hay cuenta atras porque BANDAI no ha dado dia. Lo que si
   esta confirmado se enseña a lo grande y con fuerza.        */
.lanza{
  position:relative;display:inline-flex;flex-direction:column;gap:8px;
  margin-top:44px;padding:26px 40px 24px;isolation:isolate;
  background:var(--tinta);color:var(--papel);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  opacity:0;animation:aparecer .9s var(--suave) .6s forwards;
  overflow:hidden;
}
[data-tema="oscuro"] .lanza{background:#150C06}

/* Halo de energia que late detras */
.lanza__aura{
  position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,var(--naranja) 40deg,transparent 110deg,transparent 250deg,var(--naranja) 300deg,transparent 350deg);
  opacity:.42;filter:blur(26px);
  animation:girarAura 7s linear infinite;
}
@keyframes girarAura{to{transform:rotate(360deg)}}

/* Barrido de luz que cruza el bloque */
.lanza::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-110%);
  animation:barrido 4.2s var(--suave) 1.4s infinite;
}
@keyframes barrido{0%{transform:translateX(-110%)}45%,100%{transform:translateX(110%)}}

.lanza__eti{
  font-size:.62rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--naranja);
}

/* La fecha, con relleno degradado y un latido de luz */
.lanza__fecha{
  position:relative;font-weight:900;line-height:.95;letter-spacing:-.035em;
  font-size:clamp(2.2rem,6.2vw,4.4rem);text-transform:uppercase;
  background:linear-gradient(100deg,#FFB169 0%,var(--naranja) 34%,#FFD9A8 52%,var(--naranja) 70%,#FF8A2B 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brilloFecha 5s var(--suave) infinite;
}
@keyframes brilloFecha{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
/* Resplandor por detras del texto */
.lanza__fecha::before{
  content:attr(data-texto);position:absolute;inset:0;z-index:-1;
  color:var(--naranja);filter:blur(16px);opacity:.55;
  animation:latidoFecha 2.6s ease-in-out infinite;
}
@keyframes latidoFecha{0%,100%{opacity:.35}50%{opacity:.8}}

/* Barra de energia que se llena una y otra vez */
.lanza__barra{
  display:block;height:3px;width:100%;max-width:230px;margin-top:2px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.lanza__barra i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--naranja),#FFD9A8,var(--naranja));
  transform-origin:left;transform:scaleX(0);
  animation:cargarBarra 3.6s var(--suave) infinite;
}
@keyframes cargarBarra{
  0%{transform:scaleX(0);opacity:1}
  70%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

.lanza__nota{
  font-size:.76rem;font-weight:300;color:rgba(255,255,255,.62);
  max-width:40ch;line-height:1.55;
}

/* ---------- 8. CINTA DESLIZANTE ---------- */
.cinta{
  background:var(--tinta);color:var(--papel);padding:15px 0;overflow:hidden;
  border-block:1px solid var(--tinta);
}
[data-tema="oscuro"] .cinta{background:var(--naranja);color:#fff}
.cinta__pista{display:flex;width:max-content;will-change:transform;animation:correr 32s linear infinite}
.cinta__grupo{display:flex;gap:44px;padding-right:44px;flex-shrink:0}
.cinta:hover .cinta__pista{animation-play-state:paused}
@keyframes correr{to{transform:translateX(-50%)}}
.cinta__item{
  display:flex;align-items:center;gap:44px;
  font-weight:900;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.cinta__item::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--naranja);flex-shrink:0}
[data-tema="oscuro"] .cinta__item::after{background:#fff}

/* ---------- 9. ESTADISTICAS ---------- */
.estad{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;background:var(--linea);border-radius:var(--radio-g);overflow:hidden}
.estad__c{
  background:var(--papel);padding:34px 26px;
  transition:background .35s var(--suave),transform .35s var(--suave);
}
.estad__c:hover{background:var(--naranja-10)}
.estad__n{
  display:block;font-weight:900;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:8px;
}
.estad__e{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--texto-suave);text-transform:uppercase}
.estad__n--fecha{font-size:clamp(1.1rem,2.2vw,1.5rem);padding-top:.6em}

/* ---------- 10. TARJETAS DE PRODUCTO ---------- */
.rejilla{display:grid;gap:26px}
.rejilla--4{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.rejilla--2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
/* Noticias: dos por fila y todas del mismo alto */
.rejilla--noticias{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.rejilla--noticias .noti{height:100%}

.carta{
  position:relative;background:var(--papel);border-radius:var(--radio-g);
  overflow:hidden;box-shadow:var(--sombra-1),inset 0 0 0 1px var(--linea);
  transition:transform .5s var(--suave),box-shadow .5s var(--suave);
  display:flex;flex-direction:column;
}
.carta:hover{transform:translateY(-8px);box-shadow:var(--sombra-3),inset 0 0 0 1px transparent}
.carta__foto{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--papel-3);
}
.carta__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--suave)}
.carta:hover .carta__foto img{transform:scale(1.07)}
/* Las imágenes que llegan desde el administrador no siempre comparten la
   misma proporción. En el mercado se conserva la carta completa dentro de
   una ventana fija: así no se recortan bordes, números ni marcos oficiales. */
.carta__foto--producto{background:#fff}
.carta__foto--producto img{object-fit:fill;object-position:center}
.carta:hover .carta__foto--producto img{transform:none}
.carta__brillo{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-100%);
  transition:opacity .3s;
}
.carta:hover .carta__brillo{opacity:1;animation:brillar 1.05s var(--suave)}
@keyframes brillar{to{transform:translateX(100%)}}

.carta__eti{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 11px;border-radius:999px;background:var(--tinta);color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.carta__eti--naranja{background:var(--naranja)}
.carta__eti--promo{
  isolation:isolate;overflow:hidden;border:1px solid rgba(255,235,157,.92);
  background:linear-gradient(135deg,#704100 0%,#d49320 28%,#fff0a5 49%,#b36a08 70%,#5e3500 100%);
  color:#fffdf3;text-shadow:0 1px 2px rgba(58,29,0,.78);
  box-shadow:0 2px 8px rgba(108,61,0,.45),inset 0 1px rgba(255,255,255,.7),inset 0 -1px rgba(79,38,0,.45);
}
.carta__eti--promo::after{
  content:'';position:absolute;z-index:0;inset:-35% -75%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.82) 49%,rgba(255,248,188,.36) 55%,transparent 62%);
  transform:translateX(-54%) rotate(8deg);animation:promoReflejo 3.2s ease-in-out infinite;
}
@keyframes promoReflejo{0%,28%{transform:translateX(-54%) rotate(8deg)}66%,100%{transform:translateX(54%) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.carta__eti--promo::after{animation:none}}
.carta__cuerpo{padding:20px;display:flex;flex-direction:column;gap:11px;flex:1}
.carta__titulo{
  font-weight:700;font-size:1rem;line-height:1.32;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.carta__meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.66rem;color:var(--texto-suave)}
.carta__meta span{padding:3px 9px;border-radius:6px;background:var(--tinta-06);font-weight:500}
.carta__pie{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--linea);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.carta__precio{font-weight:900;font-size:1.32rem;letter-spacing:-.02em;line-height:1.1}
.carta__precio small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--texto-suave);text-transform:uppercase;margin-bottom:2px}
.carta__enlace{position:absolute;inset:0;z-index:3}

.variacion{
  display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
  font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.variacion--sube{background:rgba(15,157,88,.12);color:var(--verde)}
.variacion--baja{background:rgba(226,0,0,.10);color:var(--rojo)}
.variacion--igual{background:var(--tinta-06);color:var(--texto-suave)}

/* Mini grafica en la tarjeta */
.chispa{width:100%;height:36px;display:block;overflow:visible}
.chispa path{fill:none;stroke:var(--naranja);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chispa .area{fill:var(--naranja);opacity:.10;stroke:none}

/* ---------- 11. NOTICIAS ---------- */
.noti{
  position:relative;display:flex;flex-direction:column;
  background:var(--papel);border-radius:var(--radio-g);overflow:hidden;
  box-shadow:var(--sombra-1),inset 0 0 0 1px var(--linea);
  transition:transform .5s var(--suave),box-shadow .5s var(--suave);
}
.noti:hover{transform:translateY(-7px);box-shadow:var(--sombra-3)}
@media (min-width:1121px) and (hover:hover) and (pointer:fine){
  .home-noticias .noti{transform-origin:center bottom;will-change:transform,box-shadow}
  .home-noticias .noti:hover,
  .home-noticias .noti:focus-within{
    z-index:4;
    transform:perspective(1000px) translateY(-18px) translateZ(35px) scale(1.018);
    box-shadow:0 42px 34px -25px rgba(31,14,4,.42),0 22px 30px -22px rgba(31,14,4,.28),0 8px 18px rgba(31,14,4,.10);
  }
}
.noti__foto{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radio-g) var(--radio-g) 0 0;background:var(--papel-3)}
.noti__foto img,.noti__foto video{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* Las fotos fijas nunca se quedan quietas del todo: un vaiven muy
   lento, en bucle, que da vida a la tarjeta sin marear. */
.noti__foto img{
  animation:derivaFoto 24s ease-in-out infinite alternate;
  transition:filter .6s var(--suave);
  will-change:transform;
}
@keyframes derivaFoto{
  0%  {transform:scale(1.06) translate(0,0)}
  50% {transform:scale(1.12) translate(-1.4%,-1%)}
  100%{transform:scale(1.09) translate(1.2%,.8%)}
}
.noti:hover .noti__foto img{filter:brightness(1.06) saturate(1.08)}
/* El video ya lleva su propio encuadre: no se le toca */
.noti__foto video{transition:none}
.noti__cat{
  position:absolute;top:13px;left:13px;padding:5px 12px;border-radius:999px;
  background:var(--naranja);color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.noti__cat--events{background:var(--tinta)}
.noti__cat--products{background:#3860BE}
.noti__cat--market{background:var(--verde)}
.noti__cuerpo{padding:22px;display:flex;flex-direction:column;gap:11px;flex:1}
.noti__fecha{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--texto-suave);text-transform:uppercase}
.noti__titulo{
  font-weight:700;font-size:1.08rem;line-height:1.35;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s;
}
.noti:hover .noti__titulo{color:var(--naranja)}
.noti__extracto{
  font-size:.9rem;font-weight:300;color:var(--texto-suave);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.noti__enlace{position:absolute;inset:0;z-index:3}

/* Noticia destacada grande */

/* Articulo */
.articulo{max-width:74ch;margin-inline:auto}
.articulo__portada{
  border-radius:var(--radio-g);overflow:hidden;margin-bottom:38px;
  box-shadow:var(--sombra-2);aspect-ratio:2/1;
}
.articulo__portada img,.articulo__portada video{width:100%;height:100%;object-fit:cover;display:block}
.articulo__cuerpo p{margin-bottom:1.25em;font-weight:300;font-size:1.06rem;line-height:1.85}
.articulo__cuerpo h2{margin:1.9em 0 .7em;font-weight:900;font-size:1.5rem;letter-spacing:-.02em}
.articulo__cuerpo h3{margin:1.6em 0 .6em;font-weight:700;font-size:1.18rem}
.articulo__cuerpo ul{margin:0 0 1.3em 1.2em;list-style:disc}
.articulo__cuerpo li{margin-bottom:.5em;font-weight:300}
.articulo__cuerpo a{color:var(--naranja);text-decoration:underline;text-underline-offset:3px}
.articulo__cuerpo blockquote{
  margin:1.8em 0;padding:20px 26px;border-left:3px solid var(--naranja);
  background:var(--naranja-10);border-radius:0 var(--radio) var(--radio) 0;font-weight:300;font-style:italic;
}
.articulo__fuente{
  margin-top:40px;padding:20px 24px;border-radius:var(--radio);
  background:var(--papel-2);border:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.86rem;
}

/* ---------- 12. LINEA DE TIEMPO ----------
   Sin tarjetas: filas abiertas separadas por un hilo, con la
   fecha a la izquierda y el evento en grande. La linea se dibuja
   sola, un cometa la recorre y cada fila entra escalonada.     */

.tiempo{position:relative;padding-left:56px}

/* Riel de fondo */
.tiempo::before{
  content:'';position:absolute;left:17px;top:4px;bottom:4px;width:2px;
  background:var(--tinta-12);border-radius:2px;
}
/* Linea naranja que baja dibujandose */
.tiempo::after{
  content:'';position:absolute;left:17px;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--naranja) 0%,var(--naranja) 70%,var(--naranja-25) 100%);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.8s cubic-bezier(.22,.61,.36,1);
}
.tiempo.es-visible::after{transform:scaleY(1)}

/* Cometa que recorre la linea una vez */
.tiempo__cometa{
  position:absolute;left:12px;top:0;width:12px;height:12px;border-radius:50%;
  background:var(--naranja);opacity:0;pointer-events:none;z-index:3;
  box-shadow:0 0 16px 5px rgba(235,97,1,.65);
}
.tiempo.es-visible .tiempo__cometa{animation:cometa 1.9s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes cometa{
  0%{opacity:0;top:0}
  8%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;top:100%}
}

/* ---- Año: numero enorme de fondo ---- */
.tiempo__anio{
  position:relative;z-index:2;margin:0 0 6px -56px;padding-left:56px;
  font-weight:900;font-size:clamp(2.6rem,7vw,4.8rem);line-height:.9;
  letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:2px var(--tinta-12);
  transition:color .5s var(--suave),-webkit-text-stroke-color .5s;
}
.tiempo.es-visible .tiempo__anio{-webkit-text-stroke-color:var(--naranja-25)}
.tiempo__anio:not(:first-child){margin-top:44px}

/* ---- Fila de evento ---- */
.tiempo__item{
  position:relative;display:grid;gap:4px 30px;
  grid-template-columns:minmax(130px,150px) 1fr;
  padding:22px 4px 22px 0;border-bottom:1px solid var(--linea);
  opacity:0;transform:translateX(-26px);
}
.tiempo.es-visible .tiempo__item{
  animation:entrarFila .75s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i,0) * .09s + .25s);
}
@keyframes entrarFila{to{opacity:1;transform:none}}

/* Barrido de color al pasar por encima */
.tiempo__item::after{
  content:'';position:absolute;left:-56px;right:0;top:0;bottom:0;z-index:-1;
  background:linear-gradient(90deg,var(--naranja-10),transparent 65%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.tiempo__item:hover::after{transform:scaleX(1)}
.tiempo__item:last-child{border-bottom:0}

/* ---- Punto sobre la linea ---- */
.tiempo__punto{
  position:absolute;left:-46px;top:26px;width:15px;height:15px;border-radius:50%;
  background:var(--papel);box-shadow:inset 0 0 0 3px var(--tinta-12);
  display:grid;place-items:center;z-index:2;
  transition:box-shadow .4s var(--suave),transform .45s var(--rebote);
}
.tiempo__item--proximo .tiempo__punto{box-shadow:inset 0 0 0 3px var(--naranja)}
.tiempo__item:hover .tiempo__punto{
  transform:scale(1.5);
  box-shadow:inset 0 0 0 4px var(--naranja),0 0 0 6px var(--naranja-10);
}

/* Evento en marcha */
.tiempo__item--vivo .tiempo__punto{
  background:var(--rojo);box-shadow:inset 0 0 0 3px var(--rojo),0 0 0 0 rgba(226,0,0,.5);
  animation:latir 1.9s ease-in-out infinite;
}

/* ---- Columna de la fecha ---- */
.tiempo__fecha{
  grid-row:1 / span 3;align-self:start;
  font-weight:900;font-size:.86rem;letter-spacing:.05em;line-height:1.3;
  color:var(--naranja);text-transform:uppercase;padding-top:2px;
}

/* ---- Contenido ---- */
.tiempo__nombre{
  grid-column:2;font-weight:900;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(1.15rem,2.3vw,1.7rem);
  transition:transform .45s var(--suave);
}
.tiempo__item:hover .tiempo__nombre{transform:translateX(7px)}
.tiempo__nombre a{transition:color .3s}
.tiempo__nombre a:hover{color:var(--naranja)}
.tiempo__desc{
  grid-column:2;font-size:.92rem;font-weight:300;
  color:var(--texto-suave);line-height:1.55;margin-top:5px;
}
.tiempo__lugar{
  grid-column:2;display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:var(--texto-suave);text-transform:uppercase;
}
.tiempo__vivo{
  display:inline-block;margin-left:10px;padding:4px 11px;border-radius:999px;
  background:var(--rojo);color:#fff;font-size:.55rem;font-weight:900;letter-spacing:.14em;
  vertical-align:middle;animation:latidoVivo 2.2s ease-in-out infinite;
}
@keyframes latidoVivo{
  0%,100%{box-shadow:0 0 0 0 rgba(226,0,0,.45)}
  60%{box-shadow:0 0 0 9px rgba(226,0,0,0)}
}

/* ---------- 13. GRAFICA DE PRECIOS ---------- */
.grafica{
  position:relative;background:var(--papel);border-radius:var(--radio-g);
  padding:26px;box-shadow:var(--sombra-1),inset 0 0 0 1px var(--linea);
}
.grafica__cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.grafica__rangos{display:flex;gap:4px;background:var(--tinta-06);padding:4px;border-radius:999px}
.grafica__rango{
  padding:7px 15px;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  color:var(--texto-suave);transition:all .3s var(--suave);
}
.grafica__rango.es-activo{background:var(--naranja);color:#fff;box-shadow:0 4px 12px rgba(235,97,1,.3)}
.grafica__lienzo{position:relative;width:100%;height:clamp(230px,34vw,380px)}
.grafica__lienzo svg{width:100%;height:100%;overflow:visible}
.g-linea{fill:none;stroke:var(--naranja);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.g-area{fill:url(#degNaranja);stroke:none}
.g-rejilla{stroke:var(--linea);stroke-width:1;stroke-dasharray:3 5}
.g-eje{font-size:10px;fill:var(--texto-suave);font-weight:500}
.g-punto{fill:var(--papel);stroke:var(--naranja);stroke-width:2.5;opacity:0;transition:opacity .2s}
/* Marca de cada medicion real, con entrada escalonada */
.g-marca{
  fill:var(--papel);stroke:var(--naranja);stroke-width:2;
  opacity:0;transform-origin:center;
  animation:entrarMarca .5s var(--suave) forwards;
}
@keyframes entrarMarca{from{opacity:0;r:0}to{opacity:1}}

/* Un solo dia de datos: no hay linea, pero el dato existe */
.grafica__unico{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;height:100%;text-align:center;padding:20px;
}
.grafica__unico-p{
  width:16px;height:16px;border-radius:50%;background:var(--naranja);margin-bottom:8px;
  box-shadow:0 0 0 0 rgba(235,97,1,.5);animation:latir 2s ease-in-out infinite;
}
.grafica__unico strong{font-weight:900;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.03em;line-height:1}
.grafica__unico small{font-size:.78rem;color:var(--texto-suave);font-weight:500}
.grafica__unico em{
  font-style:normal;font-size:.8rem;font-weight:300;color:var(--texto-suave);
  max-width:38ch;margin-top:10px;line-height:1.6;
}
.g-punto.es-visible{opacity:1}
.grafica__globo{
  position:absolute;pointer-events:none;padding:9px 13px;border-radius:10px;
  background:var(--tinta);color:var(--papel);font-size:.74rem;font-weight:700;
  white-space:nowrap;opacity:0;transform:translate(-50%,-124%);
  transition:opacity .18s;box-shadow:var(--sombra-2);z-index:5;
}
[data-tema="oscuro"] .grafica__globo{background:var(--naranja);color:#fff}
.grafica__globo.es-visible{opacity:1}
.grafica__globo small{display:block;font-weight:500;opacity:.7;font-size:.64rem}
.grafica__vacio{
  display:grid;place-items:center;text-align:center;height:100%;
  color:var(--texto-suave);font-weight:300;padding:30px;
}

/* Panel de cifras */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:2px;background:var(--linea);border-radius:var(--radio);overflow:hidden;margin-bottom:24px}
.cifras__c{background:var(--papel);padding:16px 18px}
.cifras__e{font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--texto-suave);text-transform:uppercase;margin-bottom:5px}
.cifras__v{font-weight:900;font-size:1.28rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Lista de anuncios */
.anuncio{
  display:flex;align-items:center;gap:15px;padding:13px;border-radius:var(--radio);
  transition:background .3s;
}
.anuncio:hover{background:var(--tinta-06)}
.anuncio__foto{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--papel-3);flex-shrink:0}
.anuncio__txt{flex:1;min-width:0}
.anuncio__titulo{font-size:.88rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anuncio__meta{font-size:.7rem;color:var(--texto-suave)}
.anuncio__precio{font-weight:900;font-size:1.02rem;white-space:nowrap}

/* Caja de anuncios: con scroll propio para que no se coma la pagina */
.anuncios-caja{
  background:var(--papel);border-radius:var(--radio-g);padding:10px;
  box-shadow:var(--sombra-1),inset 0 0 0 1px var(--linea);
  max-height:560px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--tinta-12) transparent;
}
.anuncios-caja::-webkit-scrollbar{width:8px}
.anuncios-caja::-webkit-scrollbar-thumb{background:var(--tinta-12);border-radius:8px}
.anuncios-caja::-webkit-scrollbar-thumb:hover{background:var(--naranja)}

/* Ordenar los anuncios por precio */
.orden{display:flex;gap:4px;background:var(--tinta-06);padding:4px;border-radius:999px}
.orden__b{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);transition:all .3s var(--suave);white-space:nowrap;
}
.orden__b:hover{color:var(--naranja)}
.orden__b.es-activo{background:var(--naranja);color:#fff;box-shadow:0 4px 12px rgba(235,97,1,.3)}
@media (max-width:640px){
  .orden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;border-radius:16px}
  .orden__b{min-width:0;width:100%;justify-content:center;gap:4px;padding:8px 5px;font-size:.56rem;line-height:1.25;white-space:normal;text-align:center}
  .orden__b svg{flex:0 0 auto}
}

/* ---------- 14. FICHA DE PRODUCTO ---------- */
.ficha{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:44px;align-items:start}
@media (max-width:900px){.ficha{grid-template-columns:1fr;gap:30px}}
.ficha__foto{
  position:relative;border-radius:var(--radio-g);overflow:hidden;
  box-shadow:var(--sombra-2);background:var(--papel-3);aspect-ratio:3/4;
  transform-style:preserve-3d;transition:transform .18s var(--suave);
}
.ficha__foto img{width:100%;height:100%;object-fit:cover}
.ficha__foto--producto img{object-fit:fill}
.ficha__foto::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 55%);
  opacity:0;transition:opacity .3s;
}
.ficha__foto:hover::after,.ficha__foto.es-inclinada::after{opacity:1}
.ficha__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--linea);border-radius:var(--radio);overflow:hidden;margin-top:22px}
.ficha__dato{background:var(--papel);padding:13px 16px}
.ficha__dato dt{font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--texto-suave);text-transform:uppercase;margin-bottom:3px}
.ficha__dato dd{font-weight:700;font-size:.94rem}

/* ---------- 15. FILTROS ---------- */
.filtros{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:18px;border-radius:var(--radio-g);background:var(--papel-2);
  border:1px solid var(--linea);margin-bottom:34px;
}
.campo{position:relative;flex:1;min-width:200px}
.campo input,.campo select{
  width:100%;padding:12px 16px;border-radius:999px;border:1.5px solid var(--linea);
  background:var(--papel);font-size:.88rem;font-weight:500;
  transition:border-color .3s,box-shadow .3s;appearance:none;
}
.campo select{padding-right:38px;cursor:pointer}
.campo input:focus,.campo select:focus{
  outline:none;border-color:var(--naranja);box-shadow:0 0 0 4px var(--naranja-10);
}
.campo__flecha{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--texto-suave)}
.campo--busca input{padding-left:42px}
.campo__lupa{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--texto-suave)}

.pastillas{display:flex;flex-wrap:wrap;gap:8px}
.pastilla{
  padding:8px 17px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-suave);
  box-shadow:inset 0 0 0 1.5px var(--linea);transition:all .3s var(--suave);
}
.pastilla:hover{color:var(--naranja);box-shadow:inset 0 0 0 1.5px var(--naranja)}
.pastilla.es-activo{background:var(--naranja);color:#fff;box-shadow:none}

/* Pastillas de los cinco tipos de carta.
   Mismos colores que los reversos de las cartas de la portada. */
.pastillas--tipos{flex-basis:100%;margin-top:4px;padding-top:14px;border-top:1px solid var(--linea)}
.pastilla--leader   {--c:#DC3C4B}
.pastilla--character{--c:#E6558C}
.pastilla--ex       {--c:#6E6E78}
.pastilla--chakra   {--c:#E67A10}
.pastilla--summon   {--c:#141414}
.pastillas--tipos .pastilla{display:inline-flex;align-items:center;gap:8px}
/* Punto del color del reverso, para reconocerlo de un vistazo */
.pastillas--tipos .pastilla::before{
  content:'';width:9px;height:9px;border-radius:50%;
  background:var(--c,var(--naranja));flex-shrink:0;transition:background .3s;
}
.pastillas--tipos .pastilla:hover{color:var(--c,var(--naranja));box-shadow:inset 0 0 0 1.5px var(--c,var(--naranja))}
.pastillas--tipos .pastilla.es-activo{background:var(--c,var(--naranja));color:#fff;box-shadow:none}
.pastillas--tipos .pastilla.es-activo::before{background:#fff}

/* Tipo de carta en la ficha, con su color */
.ficha__dato--tipo{--c:var(--naranja)}
.ficha__dato--tipo.tipo--leader   {--c:#DC3C4B}
.ficha__dato--tipo.tipo--character{--c:#E6558C}
.ficha__dato--tipo.tipo--ex       {--c:#6E6E78}
.ficha__dato--tipo.tipo--chakra   {--c:#E67A10}
.ficha__dato--tipo.tipo--summon   {--c:#141414}
.ficha__dato--tipo dd{display:flex;align-items:center;gap:8px;color:var(--c)}
.punto-tipo{
  width:11px;height:11px;border-radius:50%;background:var(--c);flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);
}

/* ---------- 16. VACIO ---------- */
.vacio{
  text-align:center;padding:clamp(50px,9vw,100px) 20px;
  border-radius:var(--radio-g);background:var(--papel-2);border:1px dashed var(--linea);
}
.vacio__ico{width:66px;height:66px;margin:0 auto 20px;color:var(--naranja);opacity:.35}
.vacio__t{font-weight:900;font-size:1.28rem;margin-bottom:9px;letter-spacing:-.02em}
.vacio__p{color:var(--texto-suave);font-weight:300;max-width:44ch;margin-inline:auto}

/* ---------- 17. LLAMADA FINAL ---------- */
.llamada{
  position:relative;overflow:hidden;border-radius:var(--radio-g);
  padding:clamp(44px,7vw,84px);text-align:center;
  background:var(--tinta);color:var(--papel);
}
[data-tema="oscuro"] .llamada{background:linear-gradient(135deg,#2A1509,#160B04)}
.llamada::before{
  content:'';position:absolute;width:60%;aspect-ratio:1;border-radius:50%;
  background:var(--naranja);filter:blur(90px);opacity:.35;
  top:-30%;right:-12%;animation:flotar 18s ease-in-out infinite;
}
.llamada>*{position:relative;z-index:1}
.llamada__t{font-weight:900;font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.05;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:16px}
.llamada__p{font-weight:300;color:rgba(255,255,255,.7);max-width:52ch;margin:0 auto 30px}

/* ---------- 18. PIE ---------- */
.pie{position:relative;background:var(--papel-2);padding-top:70px;margin-top:clamp(60px,8vw,110px)}
.pie__ondas{position:absolute;top:-1px;left:0;right:0;height:56px;transform:translateY(-100%);pointer-events:none}
.pie__ondas svg{width:100%;height:100%}
.pie__ondas path{fill:var(--papel-2)}
.pie__caja{
  width:min(100% - 40px,var(--ancho));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr);gap:44px;padding-bottom:50px;
}
@media (max-width:800px){.pie__caja{grid-template-columns:1fr;gap:34px}}
.marca--pie{margin-bottom:14px}
.pie__lema{font-weight:300;color:var(--texto-suave);font-size:.92rem;max-width:38ch}
.pie__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:30px}
.pie__col h3{font-size:.66rem;font-weight:700;letter-spacing:.2em;margin-bottom:14px;color:var(--naranja)}
.pie__col a{display:block;padding:5px 0;font-size:.88rem;font-weight:300;color:var(--texto-suave);transition:color .3s,transform .3s}
.pie__col a:hover{color:var(--naranja);transform:translateX(4px)}
.pie__redes{display:flex;gap:9px;margin-bottom:16px}
.pie__redes a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--linea);color:var(--texto-suave);
  transition:all .35s var(--rebote);padding:0;
}
.pie__redes a:hover{background:var(--naranja);color:#fff;box-shadow:none;transform:translateY(-4px) scale(1.08)}
.pie__oficial{font-size:.78rem;color:var(--texto-suave);font-weight:300}
.pie__legal{border-top:1px solid var(--linea);padding:26px 0 34px}
.pie__aviso,.pie__copy{
  width:min(100% - 40px,var(--ancho));margin-inline:auto;
  font-size:.7rem;font-weight:300;color:var(--texto-suave);line-height:1.7;
}
.pie__aviso{max-width:980px;text-align:center;font-style:italic;opacity:.82}
.pie__copy{margin-top:12px;font-weight:500}

/* Boton arriba */
.arriba{
  position:fixed;right:20px;bottom:20px;z-index:150;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--naranja);color:#fff;box-shadow:0 8px 22px rgba(235,97,1,.35);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .4s var(--suave);
}
.arriba.es-visible{opacity:1;visibility:visible;transform:none}
.arriba:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(235,97,1,.45)}

/* ---------- 19. APARICION AL HACER SCROLL ---------- */
.rev{opacity:0;transform:translateY(30px);transition:opacity .85s var(--suave),transform .85s var(--suave)}
.rev.es-visible{opacity:1;transform:none}
.rev--d1{transition-delay:.09s}
.rev--d2{transition-delay:.18s}
.rev--d3{transition-delay:.27s}
.rev--d4{transition-delay:.36s}
.rev--izq{transform:translateX(-34px)}
.rev--der{transform:translateX(34px)}
.rev--zoom{transform:scale(.94)}

/* ---------- 20. AVISOS ---------- */
.aviso{
  padding:14px 20px;border-radius:var(--radio);margin-bottom:20px;
  font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:11px;
}
.aviso--ok{background:rgba(15,157,88,.1);color:var(--verde)}
.aviso--mal{background:rgba(226,0,0,.1);color:var(--rojo)}
.aviso--info{background:var(--naranja-10);color:var(--naranja)}

/* ---------- 21. PAGINACION ---------- */
.paginas{display:flex;justify-content:center;gap:7px;margin-top:44px;flex-wrap:wrap}
.paginas a,.paginas span{
  min-width:42px;height:42px;padding:0 13px;border-radius:12px;
  display:grid;place-items:center;font-weight:700;font-size:.86rem;
  box-shadow:inset 0 0 0 1.5px var(--linea);transition:all .3s;
}
.paginas a:hover{box-shadow:inset 0 0 0 1.5px var(--naranja);color:var(--naranja)}
.paginas .es-activo{background:var(--naranja);color:#fff;box-shadow:none}

/* ---------- CATALOGO DE CARTAS / ARTWORKS ---------- */
.cards-portada,.card-preview-page{padding-top:calc(var(--cab-alto) + 54px)}
.card-preview-page{overflow:hidden}
.cards-aviso{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:30px 0 44px;padding:16px 2px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);color:var(--texto-suave)}
.cards-aviso strong{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;color:var(--texto-suave)}
.cards-aviso p{max-width:820px;color:var(--texto-suave);font-size:.78rem;line-height:1.7;font-style:italic;opacity:.88}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:28px}
.preview-card{position:relative;border:1px solid var(--linea);border-radius:20px;background:var(--papel);overflow:hidden;box-shadow:var(--sombra-1);transition:transform .45s var(--rebote),box-shadow .35s}
.preview-card:hover{transform:translateY(-8px) rotate(.25deg);box-shadow:var(--sombra-2)}
.preview-card__link{position:absolute;inset:0;z-index:3}
.preview-card__imagen{position:relative;aspect-ratio:5/7;background:var(--tinta-03);overflow:hidden}
.preview-card__imagen img{width:100%;height:100%;object-fit:fill;transition:none}
.preview-card:hover .preview-card__imagen img{transform:none}
.preview-card__estado{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:999px;background:rgba(20,8,0,.82);color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.preview-card__cuerpo{padding:17px 17px 19px}
.preview-card__ref{display:block;color:var(--naranja);font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.preview-card__cuerpo h2{font-size:1.03rem;line-height:1.25}
.preview-card__datos{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.preview-card__datos span{padding:5px 8px;border-radius:8px;background:var(--tinta-05);color:var(--suave);font-size:.62rem;font-weight:700}

.card-preview-ficha{display:grid;grid-template-columns:minmax(280px,500px) minmax(0,1fr);gap:clamp(38px,6vw,90px);align-items:start;margin-top:34px}
.card-preview-ficha__imagen{position:sticky;top:calc(var(--cab-alto) + 25px);margin:0;aspect-ratio:5/7;border-radius:24px;overflow:hidden;background:var(--tinta-03);box-shadow:var(--sombra-2);transform-style:preserve-3d;transition:transform .18s var(--suave),box-shadow .35s}
.card-preview-ficha__imagen img{display:block;width:100%;height:100%;object-fit:fill;position:relative;z-index:0}
.card-preview-ficha__imagen::before,.card-preview-ficha__imagen::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.card-preview-ficha__imagen::before{background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.09) 36%,rgba(120,225,255,.38) 48%,rgba(255,190,70,.34) 54%,transparent 72%);transform:translateX(-65%);mix-blend-mode:screen}
.card-preview-ficha__imagen::after{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.58),rgba(80,205,255,.2) 18%,transparent 48%)}
.card-preview-ficha__imagen:hover,.card-preview-ficha__imagen.es-inclinada{box-shadow:0 28px 65px rgba(28,11,0,.2),0 0 34px rgba(235,97,1,.18)}
.card-preview-ficha__imagen:hover::before,.card-preview-ficha__imagen.es-inclinada::before{opacity:1;animation:fichaHolo 1.9s ease-in-out infinite alternate}
.card-preview-ficha__imagen:hover::after,.card-preview-ficha__imagen.es-inclinada::after{opacity:1}
@keyframes fichaHolo{from{transform:translateX(-68%)}to{transform:translateX(68%)}}
.card-preview-ficha__contenido{padding-top:16px}
.card-preview-ficha__ref{margin:8px 0 26px;color:var(--suave);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.card-preview-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:28px 0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.card-preview-stats div{min-height:90px;padding:17px;border-right:1px solid var(--linea);display:flex;flex-direction:column;justify-content:center}
.card-preview-stats div:last-child{border-right:0}
.card-preview-stats small{color:var(--suave);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.card-preview-stats strong{font-size:1.28rem;margin-top:3px}
.card-preview-ficha__texto{font-size:1rem;line-height:1.85;max-width:720px}
.cards-aviso--ficha{margin:28px 0;display:block}
.card-preview-ficha__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.precio-actualizado{margin-top:10px;color:var(--suave);font-size:.7rem;font-weight:600;text-align:right}
.resumen-mercado{margin-top:18px;padding:16px 18px;border-left:3px solid var(--naranja);background:var(--tinta-03);color:var(--suave);font-size:.88rem;line-height:1.7}
.metodo-precio{margin-top:25px;padding:20px 22px;border-radius:var(--radio);background:var(--tinta-03);border:1px solid var(--linea)}
.metodo-precio h2{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.metodo-precio p{color:var(--suave);font-size:.82rem;line-height:1.7}
.cards-relacionadas{margin-top:90px;padding-top:40px;border-top:1px solid var(--linea);overflow:hidden}
.cards-relacionadas__carrusel{margin-top:24px;max-width:100%}

/* Carrusel de la portada: movimiento suave, controles y pausa al interactuar. */
.home-cards{overflow:hidden}
.home-cards__carrusel{position:relative;margin-top:38px;padding:0 45px}
.home-cards__ventana{overflow:hidden;padding:70px 4px 66px;margin:-48px 0 -36px;perspective:1400px;touch-action:pan-y}
.home-cards__pista{display:flex;width:max-content;gap:22px;will-change:transform}
.home-card{flex:0 0 clamp(190px,20vw,260px);position:relative;animation:cardFlotar 5s ease-in-out infinite;animation-delay:calc(var(--card-i) * -.34s)}
.home-card a{display:block;outline-offset:8px}
.home-card__imagen{display:block;position:relative;isolation:isolate;aspect-ratio:5/7;border-radius:18px;overflow:visible;background:var(--tinta-03);box-shadow:0 7px 16px rgba(31,17,9,.12),0 2px 5px rgba(31,17,9,.08);transform-style:preserve-3d;transform-origin:50% 72%;transition:transform .42s cubic-bezier(.16,.84,.24,1),box-shadow .42s cubic-bezier(.16,.84,.24,1)}
.home-card__imagen img{position:relative;z-index:0;width:100%;height:100%;object-fit:fill;border-radius:inherit;background:var(--tinta-03)}
.home-card__imagen::before,.home-card__imagen::after{display:none}
.home-card:is(:hover,:focus-within,.es-potenciada){z-index:5;animation-play-state:paused}
.home-card:is(:hover,:focus-within,.es-potenciada) .home-card__imagen{transform:perspective(900px) translateY(-20px) translateZ(62px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.065);box-shadow:0 58px 38px -28px rgba(31,14,4,.62),0 34px 35px -25px rgba(31,14,4,.43),0 15px 24px -18px rgba(31,14,4,.25)}
.home-card:is(:hover,:focus-within,.es-potenciada) .home-card__datos strong{color:var(--naranja)}
.home-cards__carrusel.es-pausado .home-cards__ventana{cursor:pointer}
.home-card__datos{display:block;padding:13px 4px 0}
.home-card__datos small{display:block;color:var(--naranja);font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.home-card__datos strong{display:block;margin-top:3px;font-size:.88rem}
.home-cards__flecha{position:absolute;z-index:4;top:42%;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:var(--papel);color:var(--texto);box-shadow:var(--sombra-1);font-weight:900;transition:background .25s,color .25s,transform .25s}
.home-cards__flecha:hover{background:var(--naranja);color:#fff;transform:scale(1.08)}
.home-cards__flecha--ant{left:0}.home-cards__flecha--sig{right:0}
@keyframes cardFlotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (prefers-reduced-motion:reduce){.home-card,.home-card__imagen::before,.home-card__imagen::after,.card-preview-ficha__imagen::before{animation:none}.home-card__imagen,.card-preview-ficha__imagen{transition:none}}

/* ---------- 22. RESPONSIVE ----------
   Tres tramos: escritorio (por defecto), tablet y movil.
   Las rejillas ya se adaptan solas con auto-fill, asi que
   aqui solo se ajusta lo que no puede resolverse solo.     */

/* ---- TABLET grande / portatil pequeño ---- */
@media (max-width:1100px){
  :root{--ancho:960px}
  .rejilla--4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .ficha{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:32px}
}

/* ---- TABLET: se cambia el menu por el de movil ---- */
@media (max-width:1320px){
  .nav{display:none}
  .hamburguesa{display:block}

  /* El idioma sigue en la barra de arriba, pero en pequeñito:
     bandera + codigo. Antes ocupaba media pantalla en el menu. */
  .idiomas{display:block;order:-1}
  .idiomas__largo{display:none}
  .idiomas__corto{display:inline}
  /* La bandera se queda fuera del boton: en Windows los emoji de
     bandera salen como las dos letras del pais y se leia "ES ES". */
  .idiomas__btn{padding:9px 13px;gap:6px;font-size:.72rem;font-weight:900}
  .idiomas__lista{right:0;min-width:154px}
  /* Sin banderas en movil: en Windows salen como dos letras y confunden */
  .idiomas__lista .idiomas__bandera{display:none}
  .idiomas__lista a{padding:11px 14px}
  .cab__extras{gap:6px}
  .moneda__select{min-width:73px;padding:9px 23px 9px 10px;font-size:.68rem;background-position:right 8px center}
  .seccion{padding:clamp(52px,7vw,90px) 0}
  .noti--grande{grid-column:span 2}
  .tipos{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .home-cards__carrusel{padding-inline:0}
  .home-cards__flecha{display:none}
}
@media (min-width:1321px){
  .menu-movil{display:none !important}
}

/* ---- TABLET vertical ---- */
@media (max-width:820px){
  .heroe{min-height:auto;padding:calc(var(--cab-alto) + 56px) 0 72px}
  /* En vertical se enseña la parte central-derecha de la imagen,
     que es donde esta la accion. */
  .heroe__img{object-position:74% 42%}
  .ficha{grid-template-columns:1fr;gap:28px}
  .ficha__foto{max-width:340px;margin-inline:auto}
  .rejilla--3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .rejilla--2{grid-template-columns:1fr}
  .noti--grande{grid-column:span 1}
  .estad{grid-template-columns:repeat(2,1fr)}
  .cabecera-sec--fila{align-items:flex-start;flex-direction:column;gap:14px}
  .card-preview-ficha{grid-template-columns:1fr}
  .card-preview-ficha__imagen{position:relative;top:auto;max-width:440px;margin-inline:auto}
  .cards-aviso{align-items:flex-start;flex-direction:column;gap:12px}
  .home-card{flex-basis:clamp(185px,34vw,235px)}
}

@media (max-width:560px){
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .preview-card{border-radius:14px}.preview-card__cuerpo{padding:12px}.preview-card__estado{font-size:.48rem;left:7px;top:7px;max-width:calc(100% - 14px)}
  .preview-card__datos span{font-size:.54rem}.preview-card__cuerpo h2{font-size:.86rem}
  .card-preview-stats{grid-template-columns:repeat(2,1fr)}.card-preview-stats div:nth-child(2){border-right:0}.card-preview-stats div{border-bottom:1px solid var(--linea)}
  .home-cards__carrusel{padding-inline:0}.home-card{flex-basis:clamp(132px,44vw,170px)}.home-cards__pista{gap:14px}
}

@media (hover:none){
  .home-card:active .home-card__imagen,.home-card:focus-within .home-card__imagen{transform:translateY(-5px) scale(1.018);box-shadow:0 18px 34px rgba(28,11,0,.2),0 0 26px rgba(235,97,1,.28)}
  .card-preview-ficha__imagen{transform:none !important}
}

/* ---- MOVIL ---- */
@media (max-width:640px){
  :root{--cab-alto:64px;--radio-g:18px}
  .cab__caja{width:calc(100% - 16px);gap:7px}
  .marca__txt{display:none}
  .cab__extras{margin-left:auto;gap:4px}
  .cab__extras .btn-icono{order:1;width:34px;height:38px}
  .cab__extras .idiomas{order:2}
  .cab__extras .moneda{order:3}
  .cab__extras .hamburguesa{order:4;width:36px;height:38px}
  .caja{width:calc(100% - 26px)}
  .seccion{padding:44px 0}
  .heroe~.seccion .t-grande{font-size:var(--hero-title-size,1.5rem)}
  .cards-portada,.card-preview-page{padding-top:calc(var(--cab-alto) + 44px)}
  .rejilla{gap:9px}

  /* Tres cartas por fila: se ven mas de un vistazo y al tocar
     una se abre su ficha en grande. */
  .rejilla--4{grid-template-columns:repeat(3,1fr)}
  .rejilla--3{grid-template-columns:1fr}
  .rejilla--noticias{grid-template-columns:1fr}
  .carta{border-radius:12px}
  .carta__cuerpo{padding:8px 9px 9px;gap:5px}
  .carta__titulo{font-size:.7rem;line-height:1.25;-webkit-line-clamp:2}
  .carta__meta{display:none}
  .carta__eti{font-size:.5rem;padding:3px 7px;top:6px;left:6px}
  .chispa{height:20px}
  .carta__pie{padding-top:7px;flex-direction:column;align-items:flex-start;gap:4px}
  .carta__precio{font-size:.82rem}
  .carta__precio small{font-size:.48rem;letter-spacing:.08em;margin-bottom:1px}
  .variacion{font-size:.58rem;padding:2px 6px}

  /* Estadisticas en 2x2 y mucho mas bajitas */
  .estad{grid-template-columns:repeat(2,1fr);border-radius:14px}
  .estad__c{padding:13px 12px}
  .estad__n{font-size:1.45rem;margin-bottom:3px}
  .estad__n--fecha{font-size:.82rem;padding-top:.35em;line-height:1.25}
  .estad__e{font-size:.55rem;letter-spacing:.1em;line-height:1.3}

  /* Filtros del mercado, aprovechando el ancho */
  .filtros{padding:11px;gap:7px;border-radius:14px}
  .campo{min-width:0;flex:1 1 calc(50% - 4px)}
  .campo--busca{flex:1 1 100%}
  .campo input,.campo select{padding:9px 13px;font-size:.8rem}
  .campo--busca input{padding-left:36px}
  .campo__lupa{left:13px}
  .pastilla{padding:6px 11px;font-size:.6rem;letter-spacing:.06em}
  .pastillas{gap:6px}
  .pastillas--tipos{padding-top:10px;gap:5px}
  .pastillas--tipos .pastilla{gap:5px}
  .pastillas--tipos .pastilla::before{width:7px;height:7px}

  .grafica{padding:16px}
  .grafica__rangos{width:100%;justify-content:space-between}
  .grafica__rango{padding:7px 11px;font-size:.64rem}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .arriba{right:14px;bottom:14px}
  .lanza{width:100%;padding:18px 22px 16px}
  .btn{padding:14px 24px;font-size:.72rem}

  /* Calendario: la fecha pasa a ir encima del nombre */
  .tiempo{padding-left:36px}
  .tiempo::before,.tiempo::after{left:11px}
  .tiempo__cometa{left:6px}
  .tiempo__anio{margin-left:-36px;padding-left:36px;font-size:2.6rem}
  .tiempo__item{grid-template-columns:1fr;gap:0;padding:18px 0}
  .tiempo__item::after{left:-36px}
  .tiempo__fecha{grid-row:auto;grid-column:1;font-size:.72rem;margin-bottom:5px}
  .tiempo__nombre,.tiempo__desc,.tiempo__lugar{grid-column:1}
  .tiempo__nombre{font-size:1.08rem}
  .tiempo__desc{font-size:.85rem}
  .tiempo__punto{left:-30px;top:20px;width:13px;height:13px}

  /* Ficha de la carta: los datos, mucho mas apretados */
  .ficha__datos{grid-template-columns:repeat(2,1fr);margin-top:16px;border-radius:12px}
  .ficha__dato{padding:9px 12px}
  .ficha__dato dt{font-size:.52rem;letter-spacing:.1em;margin-bottom:1px}
  .ficha__dato dd{font-size:.82rem}
  .punto-tipo{width:8px;height:8px;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent)}
  .cifras__c{padding:11px 13px}
  .cifras__e{font-size:.54rem;letter-spacing:.1em;margin-bottom:3px}
  .cifras__v{font-size:1.02rem}

  /* Lista de anuncios: mas baja y con scroll propio */
  .anuncios-caja{max-height:420px;padding:6px}
  .anuncio{gap:9px;padding:9px}
  .anuncio__foto{width:40px;height:40px;border-radius:8px}
  .anuncio__titulo{font-size:.76rem;white-space:normal;
                   display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .anuncio__meta{font-size:.62rem}
  .anuncio__precio{font-size:.84rem}
  .articulo__cuerpo p{font-size:1rem}
  .pie__caja{padding-bottom:36px}
}

/* ---- MOVIL pequeño ---- */
@media (max-width:400px){
  .carta__titulo{font-size:.64rem}
  .carta__precio{font-size:.74rem}
  .cifras{grid-template-columns:repeat(2,1fr)}
}

/* ---- Pantallas muy anchas: no dejamos que se estire sin fin ---- */
@media (min-width:1600px){
  :root{--ancho:1360px}
}

/* ---- Movil apaisado y pantallas bajitas ---- */
@media (max-height:520px) and (orientation:landscape){
  .heroe{min-height:auto;padding:calc(var(--cab-alto) + 32px) 0 48px}
  .heroe__scroll{display:none}
}

/* ---------- 23. ACCESIBILIDAD: MENOS MOVIMIENTO ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rev{opacity:1;transform:none}
  .linea-rev>span{transform:none}
  .noti__foto img{animation:none;transform:none}
  .heroe__letra{opacity:1;transform:none;filter:none;text-shadow:none}
  .heroe__titulo{filter:none}
  .heroe__titulo::after{display:none}
  .heroe__texto,.heroe__botones,.lanza,.heroe__scroll{opacity:1}
}

/* ---------- 23b. LOS CINCO TIPOS DE CARTA ----------
   Cada uno es el reverso de una carta de verdad, en vertical y
   con el color oficial de su mazo. Al pasar por encima gira y
   enseña la explicacion por detras.                            */

.tipos{
  display:grid;gap:clamp(12px,1.6vw,22px);
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.tipo{
  position:relative;perspective:1400px;background:none;border:0;padding:0;
  aspect-ratio:63/88;               /* proporcion de una carta real */
  cursor:pointer;
  transition:transform .6s var(--suave);
}
.tipo:hover{transform:translateY(-10px)}

/* Reflejo bajo la carta, como si estuviera sobre un cristal */
.tipo__reflejo{
  position:absolute;left:4%;right:4%;top:100%;height:38%;
  border-radius:0 0 14px 14px;pointer-events:none;
  background:linear-gradient(180deg,var(--c) 0%,transparent 78%);
  opacity:.16;filter:blur(1px);
  transform:scaleY(-1);transform-origin:top;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%);
  mask-image:linear-gradient(to bottom,#000,transparent 72%);
  transition:opacity .6s var(--suave),height .6s var(--suave);
}
/* Un brillo que recorre el reflejo, muy suave */
.tipo__reflejo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(-120%);
  animation:reflejoBrillo 6s var(--suave) infinite;
}
@keyframes reflejoBrillo{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
.tipo:hover .tipo__reflejo{opacity:.3;height:44%}
[data-tema="oscuro"] .tipo__reflejo{opacity:.22}
[data-tema="oscuro"] .tipo:hover .tipo__reflejo{opacity:.38}
.tipo__giro{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.3,1.1,.4,1);
}
.tipo:hover .tipo__giro,
.tipo:focus-visible .tipo__giro,
.tipo.es-girada .tipo__giro{transform:rotateY(180deg)}

.tipo__cara{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 10px 28px rgba(28,11,0,.22);
}

/* ---- Delante: el reverso de la carta ---- */
.tipo__cara--frente{
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 52%,color-mix(in srgb,var(--c) 78%,#000) 100%);
  display:grid;place-items:center;padding:9px;
}
/* Marco blanco interior, como el de las cartas */
.tipo__marco{
  position:relative;width:100%;height:100%;border-radius:8px;
  border:2.5px solid rgba(255,255,255,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:10px;
}
.tipo__espiral{
  width:58%;max-width:96px;color:rgba(255,255,255,.94);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.tipo__nombre{
  font-weight:900;font-size:clamp(.62rem,1vw,.78rem);letter-spacing:.14em;
  text-transform:uppercase;color:#fff;text-align:center;line-height:1.25;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.tipo__n{
  position:absolute;top:14px;right:16px;
  font-weight:900;font-size:.8rem;letter-spacing:.06em;
  color:rgba(255,255,255,.55);
}
/* Destello que cruza el reverso */
.tipo__brillo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-110%);
}
.tipo:hover .tipo__brillo{animation:brillar 1s var(--suave)}

/* ---- Detras: la explicacion ---- */
.tipo__cara--dorso{
  transform:rotateY(180deg);
  background:var(--papel);
  box-shadow:0 10px 28px rgba(28,11,0,.22),inset 0 0 0 2.5px var(--c);
  display:flex;flex-direction:column;justify-content:center;gap:9px;
  padding:clamp(14px,1.6vw,20px);
}
.tipo__cara--dorso::before{
  content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--c);
}
.tipo__t{
  font-weight:900;font-size:clamp(.9rem,1.15vw,1.08rem);
  letter-spacing:-.015em;line-height:1.2;color:var(--c);
}
.tipo__d{
  font-size:clamp(.74rem,.86vw,.86rem);font-weight:300;
  color:var(--texto-suave);line-height:1.55;
}

.tipos__pista{
  text-align:center;margin-top:26px;font-size:.74rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);
}

/* Colores reales de los reversos, sacados de la web oficial */
.tipo--leader   {--c:#DC3C4B}
.tipo--character{--c:#E6558C}
.tipo--ex       {--c:#6E6E78}
.tipo--chakra   {--c:#E67A10}
.tipo--summon   {--c:#141414}

@media (max-width:900px){
  .tipos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .tipos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* ---------- 23b-bis. LAS CUATRO REGLAS DEL JUEGO ---------- */
.reglas{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-bottom:clamp(46px,6vw,72px);
}
.regla{
  position:relative;padding:28px 24px 26px;border-radius:var(--radio-g);
  background:var(--papel);overflow:hidden;
  box-shadow:var(--sombra-1),inset 0 0 0 1px var(--linea);
  transition:transform .5s var(--suave),box-shadow .5s var(--suave);
}
.regla::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--naranja),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--suave);
  transition-delay:calc(var(--i,0) * .12s);
}
.regla.es-visible::before{transform:scaleX(1)}
.regla:hover{transform:translateY(-7px);box-shadow:var(--sombra-3)}
.regla__n{
  position:absolute;top:18px;right:20px;
  font-weight:900;font-size:2.2rem;line-height:1;letter-spacing:-.05em;
  color:var(--naranja);opacity:.14;
}
.regla__ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--naranja-10);color:var(--naranja);margin-bottom:16px;
  transition:transform .5s var(--rebote),background .4s;
}
.regla__ico svg{width:24px;height:24px}
.regla:hover .regla__ico{transform:rotate(-8deg) scale(1.1);background:var(--naranja);color:#fff}
.regla__t{font-weight:900;font-size:1.02rem;letter-spacing:-.015em;line-height:1.3;margin-bottom:8px}
.regla__d{font-size:.88rem;font-weight:300;color:var(--texto-suave);line-height:1.6}

.tipos__titulo{
  font-weight:900;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.02em;
  margin-bottom:22px;display:flex;align-items:center;gap:14px;
}
.tipos__titulo::after{content:'';flex:1;height:1px;background:var(--linea)}

/* ---------- 23c. DISTRIBUCION EN LA PORTADA ---------- */
.dist-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  background:var(--linea);border-radius:var(--radio-g);overflow:hidden}
.dist-mini__r{
  display:flex;flex-direction:column;gap:5px;padding:24px 20px;background:var(--papel);
  transition:background .35s var(--suave),transform .35s var(--suave);
}
.dist-mini__r:not(.es-vacia):hover{background:var(--naranja-10);transform:translateY(-3px)}
.dist-mini__n{
  font-weight:900;font-size:2rem;line-height:1;letter-spacing:-.04em;color:var(--naranja);
}
.dist-mini__t{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
.dist-mini__r.es-vacia{opacity:.42;cursor:default}
.dist-mini__r.es-vacia .dist-mini__n{color:var(--texto-suave)}

/* ---------- 23d. DISTRIBUCION: EL PLANETA ---------- */
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}

.dist__globo{position:sticky;top:calc(var(--cab-alto) + 24px)}
.globo{position:relative;width:100%;max-width:460px;margin-inline:auto}
.globo svg{width:100%;height:auto;overflow:visible;cursor:grab;touch-action:none}
.globo.es-girando svg{cursor:grabbing}

.globo__halo{opacity:.55;animation:respirar 6s ease-in-out infinite}
.globo__borde{stroke:var(--tinta-12);stroke-width:1.5}
.globo__rejilla{
  fill:none;stroke:var(--tinta-12);stroke-width:.7;
  stroke-linecap:round;pointer-events:none;
}

/* Los continentes */
.globo__region{
  fill:var(--tinta);stroke:var(--papel);stroke-width:1;
  opacity:.82;cursor:pointer;
  transition:fill .35s var(--suave),opacity .35s,transform .35s var(--suave);
}
.globo__region:hover{fill:var(--naranja);opacity:1}
.globo__region.es-elegida{fill:var(--naranja);opacity:1;filter:drop-shadow(0 0 10px rgba(235,97,1,.55))}
/* Sin distribuidores todavia: gris y no se puede pulsar */
.globo__region.es-vacia{fill:var(--texto-suave);opacity:.3;cursor:default;pointer-events:none}
/* Casi toda por detras del planeta */
.globo__region.es-detras{pointer-events:none}

.globo__pista{
  text-align:center;margin-top:16px;font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--texto-suave);
}

/* ---------- Botones de region ---------- */
.dist__botones{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:28px}
.dist__b{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-radius:12px;text-align:left;
  box-shadow:inset 0 0 0 1.5px var(--linea);
  font-weight:700;font-size:.78rem;letter-spacing:.04em;
  transition:all .3s var(--suave);
}
.dist__b b{
  min-width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--tinta-06);font-size:.72rem;font-weight:900;color:var(--texto-suave);
}
.dist__b:hover:not(.es-vacia){box-shadow:inset 0 0 0 1.5px var(--naranja);color:var(--naranja);transform:translateY(-2px)}
.dist__b.es-activo{background:var(--naranja);color:#fff;box-shadow:none}
.dist__b.es-activo b{background:rgba(255,255,255,.24);color:#fff}
.dist__b.es-vacia{opacity:.42;cursor:not-allowed}

/* ---------- Panel de cada region ---------- */
.dist__panel{display:none}
.dist__panel.es-activo{display:block;animation:aparecer .5s var(--suave)}
.dist__t{
  font-weight:900;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.02em;
  margin-bottom:18px;
}
.dist__pais{
  font-size:.66rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--naranja);margin:22px 0 10px;
}
.dist__pais:first-of-type{margin-top:0}
.dist__ul{display:flex;flex-direction:column;gap:6px}
.dist__item a,.dist__item div{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:12px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--linea);
  transition:transform .35s var(--suave),box-shadow .35s var(--suave);
}
.dist__item a::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--naranja);transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--suave);
}
.dist__item a:hover{transform:translateX(6px);box-shadow:inset 0 0 0 1px var(--naranja-25),var(--sombra-1)}
.dist__item a:hover::before{transform:scaleY(1)}
.dist__nombre{font-weight:700;font-size:.94rem;flex:1;line-height:1.3}
.dist__web{font-size:.72rem;color:var(--texto-suave);font-weight:300;white-space:nowrap}
.dist__item svg{color:var(--naranja);flex-shrink:0;transition:transform .35s var(--suave)}
.dist__item a:hover svg{transform:translateX(4px)}
.dist__item div{opacity:.75}

.dist__nada{
  padding:26px;border-radius:var(--radio);border:1px dashed var(--linea);
  color:var(--texto-suave);font-weight:300;font-size:.92rem;text-align:center;
}
.dist__fuente{
  margin-top:34px;font-size:.76rem;font-weight:300;color:var(--texto-suave);
}
.dist__fuente a{color:var(--naranja)}

@media (max-width:900px){
  .dist{grid-template-columns:1fr;gap:26px}
  .dist__globo{position:static}
  .globo{max-width:340px}
}
@media (max-width:520px){
  .dist__botones{grid-template-columns:1fr}
  .globo{max-width:290px}
}

/* ---------- 24. MIGAS DE PAN ---------- */
.migas{margin-bottom:22px;font-size:.76rem}
.migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.migas li{display:flex;align-items:center;gap:8px;color:var(--texto-suave)}
.migas li:not(:last-child)::after{content:'/';opacity:.4;font-weight:300}
.migas a{color:var(--texto-suave);transition:color .25s}
.migas a:hover{color:var(--naranja)}
.migas [aria-current]{color:var(--texto);font-weight:700}

/* ---------- 25. PREGUNTAS FRECUENTES ---------- */
.faq{display:flex;flex-direction:column;gap:10px;max-width:80ch}
.faq__item{
  background:var(--papel);border-radius:var(--radio);
  box-shadow:inset 0 0 0 1px var(--linea);overflow:hidden;
  transition:box-shadow .35s var(--suave);
}
.faq__item[open]{box-shadow:inset 0 0 0 1.5px var(--naranja-25),var(--sombra-1)}
.faq__p{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-weight:700;font-size:1rem;line-height:1.4;letter-spacing:-.01em;
  transition:color .25s;
}
.faq__p::-webkit-details-marker{display:none}
.faq__p:hover{color:var(--naranja)}
.faq__mas{position:relative;width:16px;height:16px;flex-shrink:0}
.faq__mas::before,.faq__mas::after{
  content:'';position:absolute;background:var(--naranja);border-radius:2px;
  transition:transform .35s var(--suave);
}
.faq__mas::before{top:7px;left:0;width:16px;height:2px}
.faq__mas::after{top:0;left:7px;width:2px;height:16px}
.faq__item[open] .faq__mas::after{transform:rotate(90deg)}
.faq__r{padding:0 22px 20px;color:var(--texto-suave);font-weight:300;font-size:.95rem;line-height:1.75}

/* ---------- 26. BLOQUE DE TEXTO PARA BUSCADORES ---------- */
.texto-seo{
  margin-top:clamp(46px,6vw,80px);padding-top:34px;
  border-top:1px solid var(--linea);max-width:78ch;
}
.texto-seo p{
  color:var(--texto-suave);font-weight:300;font-size:.95rem;
  line-height:1.85;margin-bottom:1.1em;
}
.texto-seo p:last-child{margin-bottom:0}

/* ---------- 27. IMPRESION ---------- */
@media print{
  .cab,.menu-movil,.arriba,.pie__redes,.filtros,.aviso-cookies{display:none}
  body{background:#fff;color:#000}
}

/* ---------- 28. AVISO DE COOKIES ----------
   Barra fija abajo, con el papel y el borde cortado de la
   casa. Respeta el tema claro/oscuro sin codigo extra.      */
.aviso-cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:14px clamp(14px,3vw,32px);
  animation:subirAviso .6s var(--suave);
}
@keyframes subirAviso{
  from{transform:translateY(110%);opacity:0}
  to{transform:none;opacity:1}
}
.aviso-cookies__caja{
  max-width:var(--ancho);margin-inline:auto;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio-g);
  box-shadow:var(--sombra-3);
  padding:20px clamp(18px,2.6vw,30px);
}
.aviso-cookies__texto{flex:1 1 340px}
.aviso-cookies__titulo{
  display:block;font-weight:900;font-size:.92rem;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:6px;
}
.aviso-cookies__texto p{
  color:var(--texto-suave);font-weight:300;font-size:.88rem;line-height:1.6;margin:0;
}
.aviso-cookies__texto a{
  color:var(--naranja);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;
}
.aviso-cookies__botones{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.aviso-cookies__rechazar{
  font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-suave);padding:11px 6px;
  border-bottom:2px solid transparent;
  transition:color .25s var(--suave),border-color .25s var(--suave);
}
.aviso-cookies__rechazar:hover{color:var(--tinta);border-color:var(--naranja)}
.aviso-cookies__rechazar:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}

/* Tablet: la caja pasa a columna y los botones ocupan todo el ancho */
@media (max-width:900px){
  .aviso-cookies{padding:10px clamp(10px,2.5vw,20px)}
  .aviso-cookies__caja{
    flex-direction:column;align-items:stretch;gap:16px;
    padding:18px clamp(16px,3vw,24px);
    max-height:70svh;overflow-y:auto;
  }
  .aviso-cookies__texto{flex:0 1 auto}
  .aviso-cookies__botones{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
  }
  .aviso-cookies__botones .btn{width:100%;padding-inline:14px}
  .aviso-cookies__rechazar{
    grid-column:1 / -1;justify-self:center;padding:8px 6px;
  }
}

/* Movil: hoja a pantalla casi completa, botones a una columna */
@media (max-width:520px){
  .aviso-cookies{padding:8px}
  .aviso-cookies__caja{
    border-radius:var(--radio);gap:14px;padding:16px;
    max-height:78svh;
  }
  .aviso-cookies__titulo{font-size:.85rem}
  .aviso-cookies__texto p{font-size:.84rem;line-height:1.55}
  .aviso-cookies__texto a{white-space:normal}
  .aviso-cookies__botones{grid-template-columns:1fr}
}

/* Movil apaisado y pantallas bajitas: que nunca tape toda la pantalla */
@media (max-height:520px) and (orientation:landscape){
  .aviso-cookies__caja{max-height:88svh}
}

/* Enlace-boton del pie ("Configurar cookies") */
.pie__enlace-btn{
  display:block;text-align:left;padding:0;
  font:inherit;color:inherit;opacity:inherit;cursor:pointer;
  transition:color .25s var(--suave);
}
.pie__enlace-btn:hover{color:var(--naranja)}

@media (prefers-reduced-motion:reduce){
  .aviso-cookies{animation:none}
}

/* ---------- 29. TRAILER INTEGRADO EN EL HERO ----------
   Banda compacta dentro de la cabecera: miniatura, titulo y
   play. Al dar a play se amplia en su sitio y suena; el
   boton minimizar la devuelve a su tamaño.                  */
.video-hero{
  margin-top:26px;max-width:560px;
  opacity:0;animation:aparecer .9s var(--suave) .74s forwards;
}
.video-hero__caja{
  position:relative;
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra-1);
  transition:box-shadow .3s var(--suave);
}
.video-hero__caja:hover{box-shadow:var(--sombra-2)}
/* Borde de energia: un arco naranja-amarillo que recorre la
   tarjeta en bucle, como la corriente del titular.          */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.video-hero__caja::before{
  content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;
  padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),
    transparent 0 68%,var(--naranja-claro) 80%,#FFD9A8 87%,
    var(--naranja) 93%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:girarBorde 4.2s linear infinite;
}
@keyframes girarBorde{to{--ang:360deg}}
/* Banda compacta */
.video-hero__play{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:10px 14px 10px 10px;cursor:pointer;text-align:left;
}
.video-hero__thumb{
  flex:0 0 128px;border-radius:calc(var(--radio) - 6px);overflow:hidden;
}
.video-hero__thumb img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
}
.video-hero__datos{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.video-hero__eti{
  font-weight:900;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
}
.video-hero__fuente{
  color:var(--texto-suave);font-weight:400;font-size:.72rem;
}
.video-hero__ico{
  flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--naranja);color:#fff;
  box-shadow:0 6px 18px rgba(235,97,1,.4);
  animation:latir 2.6s var(--suave) infinite;
  transition:transform .3s var(--rebote),box-shadow .3s;
}
.video-hero__play:hover .video-hero__ico{
  transform:scale(1.12);box-shadow:0 10px 26px rgba(235,97,1,.55);
}
.video-hero__play:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
/* Estado ampliado */
.video-hero.es-grande{max-width:760px}
.video-hero__cuerpo{display:none}
.video-hero.es-grande .video-hero__play{display:none}
.video-hero.es-grande .video-hero__cuerpo{
  display:block;position:relative;aspect-ratio:16/9;background:#0B0503;
  animation:abrirVideo .45s var(--suave);
}
@keyframes abrirVideo{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.video-hero__cuerpo iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
/* Boton minimizar: solo visible en grande */
.video-hero__min{
  display:none;position:absolute;top:10px;right:10px;z-index:2;
  align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  background:rgba(28,11,0,.78);color:#fff;backdrop-filter:blur(6px);
  font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background .25s var(--suave),transform .25s var(--suave);
}
.video-hero.es-grande .video-hero__min{display:inline-flex}
.video-hero__min:hover{background:var(--naranja);transform:translateY(-2px)}
.video-hero__min:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}

@media (max-width:520px){
  .video-hero{max-width:100%}
  .video-hero__thumb{flex-basis:104px}
  .video-hero__ico{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .video-hero{opacity:1;animation:none}
  .video-hero.es-grande .video-hero__cuerpo{animation:none}
}

@media print{.video-hero{display:none}}

/* ============================================================
   MERGE KIMI: graficas de precio (linea verde de minimo,
   sparkline curva con fechas, stats de tarjeta, globo con
   etiquetas de serie) - reaplicado tras despliegue externo
   ============================================================ */
.carta__precio{font-weight:900;font-size:1.32rem;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.variacion{
  display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
  font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Mini grafica en la tarjeta */
.chispa-env{
  position:relative;margin:10px 0 4px;overflow:hidden;border:1px solid var(--linea);
  border-radius:13px;background:linear-gradient(180deg,var(--papel),var(--papel-2));
}
.chispa{width:100%;height:96px;display:block;overflow:hidden;color:var(--naranja)}
.chispa path,.chispa circle,.chispa line{vector-effect:non-scaling-stroke}
.chispa path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.chispa path.media{stroke:var(--naranja);stroke-width:2}
.chispa path.min{stroke:#248A55;stroke-width:1.6;stroke-dasharray:5 4}
.chispa .area{opacity:1;stroke:none}
.chispa .chispa__rejilla{stroke:var(--linea);stroke-width:1;stroke-dasharray:2 5;opacity:.72}
.chispa .fin{fill:var(--papel);stroke:var(--naranja);stroke-width:2}
.chispa .fin-min{fill:var(--papel);stroke:#248A55;stroke-width:1.7}
/* Fechas que enmarcan la mini grafica: inicio a la izquierda, ultima medicion a la derecha */
.chispa-ind{
  position:absolute;font-size:.55rem;font-weight:600;letter-spacing:.02em;line-height:1;
  color:var(--texto-suave);opacity:.75;pointer-events:none;font-variant-numeric:tabular-nums;
}
.chispa-ind--ini{bottom:9px;left:10px}
.chispa-ind--fin{bottom:9px;right:10px}
/* Fila de datos bajo la grafica: cada cifra aparece una sola vez,
   con su etiqueta de color encima y la variacion a la derecha */
.carta__stats{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  align-items:end;gap:10px 12px;margin:10px 0 2px;
}
.carta__stats .stat{display:flex;flex-direction:column;gap:3px;padding-left:10px;border-left:2px solid var(--stat-color,var(--linea));min-width:0}
.carta__stats .stat--media{--stat-color:var(--naranja)}
.carta__stats .stat--min{--stat-color:#248A55}
.carta__stats small{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);
}
.carta__stats .dash{display:inline-block;width:11px;height:2.5px;border-radius:2px}
.carta__stats .dash--media{background:var(--naranja)}
.carta__stats .dash--min{height:0;background:transparent;border-top:2px dashed #248A55}
.carta__stats strong{
  font-size:.94rem;font-weight:800;letter-spacing:-.015em;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.carta__stats .variacion{margin-left:auto;align-self:center}

.g-linea{fill:none;stroke:var(--naranja);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.g-linea-min{fill:none;stroke:#2f9e44;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g-linea-psa{fill:none;stroke:#1877d2;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.g-area{fill:url(#degNaranja);stroke:none}
.g-rejilla{stroke:var(--linea);stroke-width:1;stroke-dasharray:3 5}
.g-eje{font-size:10px;fill:var(--texto-suave);font-weight:500}
.g-punto{fill:var(--papel);stroke:var(--naranja);stroke-width:2.5;opacity:0;transition:opacity .2s}
.g-punto-min{fill:var(--papel);stroke:#2f9e44;stroke-width:2.2;opacity:0;transition:opacity .2s}
.g-punto-psa{fill:var(--papel);stroke:#1877d2;stroke-width:2.5;opacity:0;transition:opacity .2s}
.g-punto.es-visible,.g-punto-min.es-visible,.g-punto-psa.es-visible{opacity:1}
.g-guia{
  stroke:var(--naranja);stroke-width:1.25;stroke-dasharray:5 6;
  opacity:0;pointer-events:none;transition:opacity .18s ease,stroke .18s ease;
}
.g-guia.es-visible{opacity:.72}
.g-guia.es-min{stroke:#2f9e44}
.g-guia.es-psa{stroke:#1877d2}
/* Marca de cada medicion real, con entrada escalonada */
.g-marca{
  fill:var(--papel);stroke:var(--naranja);stroke-width:2;
  opacity:0;transform-origin:center;
  animation:entrarMarca .5s var(--suave) forwards;
}
.g-marca-min{
  fill:var(--papel);stroke:#2f9e44;stroke-width:1.8;
  opacity:0;transform-origin:center;
  animation:entrarMarca .5s var(--suave) forwards;
}
.g-marca-psa{
  fill:var(--papel);stroke:#1877d2;stroke-width:2;
  opacity:0;transform-origin:center;
  animation:entrarMarca .5s var(--suave) forwards;
}
@keyframes entrarMarca{from{opacity:0;r:0}to{opacity:1}}

/* Leyenda de las dos series de la grafica */
.grafica__leyenda{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px;
  font-size:.76rem;color:var(--texto-suave);
}
.grafica__leyenda span{display:inline-flex;align-items:center;gap:7px}
.grafica__leyenda [hidden]{display:none!important}
.grafica__leyenda i{display:inline-block;width:18px;height:3px;border-radius:2px}
.grafica__leyenda .ley-media i{background:var(--naranja)}
.grafica__leyenda .ley-min i{background:#2f9e44}
.grafica__leyenda .ley-psa i{background:#1877d2}
/* Etiqueta de serie dentro del globo: texto en el color de su linea */
.g-globo-serie{display:flex;align-items:center;gap:6px;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.g-globo-serie i{display:inline-block;width:11px;height:2.5px;border-radius:2px;background:currentColor}
.g-globo-serie.es-media{color:var(--naranja)}
.g-globo-serie.es-min{color:#2f9e44}
.g-globo-serie.es-psa{color:#1877d2}
.g-globo-serie--sep{margin-top:7px}

/* Efecto foco: una serie en primer plano y la otra atenuada */
.g-linea,.g-linea-min,.g-linea-psa,.g-marca,.g-marca-min,.g-marca-psa{transition:opacity .25s ease}
.es-tenue{opacity:.15 !important}

/* Un solo dia de datos: no hay linea, pero el dato existe */
.grafica__unico{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;height:100%;text-align:center;padding:20px;
}
.grafica__unico-p{
  width:16px;height:16px;border-radius:50%;background:var(--naranja);margin-bottom:8px;
  box-shadow:0 0 0 0 rgba(235,97,1,.5);animation:latir 2s ease-in-out infinite;
}
.grafica__unico strong{font-weight:900;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.03em;line-height:1}
.grafica__unico small{font-size:.78rem;color:var(--texto-suave);font-weight:500}
.grafica__unico em{
  font-style:normal;font-size:.8rem;font-weight:300;color:var(--texto-suave);
  max-width:38ch;margin-top:10px;line-height:1.6;
}
.grafica__globo{
  position:absolute;pointer-events:none;padding:10px 14px;border-radius:12px;
  background:var(--papel);color:var(--tinta);font-size:.8rem;font-weight:800;
  box-sizing:border-box;width:max-content;max-width:calc(100% - 16px);white-space:normal;overflow-wrap:anywhere;
  opacity:0;transform:translate(-50%,-124%);
  transition:opacity .18s;box-shadow:var(--sombra-2),inset 0 0 0 1px var(--linea);z-index:5;
}
.grafica__globo.es-visible{opacity:1}
.grafica__globo strong{display:block;font-size:.92rem;font-weight:900;letter-spacing:-.01em;margin:2px 0 1px;font-variant-numeric:tabular-nums}
.grafica__globo small{display:block;font-weight:500;opacity:.65;font-size:.64rem}
.grafica__vacio{
  display:grid;place-items:center;text-align:center;height:100%;
  color:var(--texto-suave);font-weight:300;padding:30px;
}

[data-tema="oscuro"] .grafica__globo{background:var(--papel);color:var(--tinta)}

.anuncios-psa10{padding-top:28px;border-top:1px solid var(--linea)}
.anuncios-psa10 .cabecera-sec__eti{color:#1877d2}
.anuncios-caja--psa10{box-shadow:inset 3px 0 0 rgba(24,119,210,.75)}

@media (max-width:640px){
  /* Las entradas laterales no deben ampliar el lienzo antes de revelarse. */
  .rev--izq,.rev--der{transform:translateY(30px)}
  .grafica__globo{font-size:.74rem;padding:9px 11px}
  .grafica__globo small{line-height:1.35}
}

@media (max-width:640px){
  .chispa{height:48px}
  .carta__stats{gap:10px}
  .carta__stats strong{font-size:.74rem}
  .carta__stats small{font-size:.48rem;letter-spacing:.07em}
  .chispa-ind{font-size:.5rem}
}

/* ============================================================
   RESTAURADO: estilos de paginas que el despliegue externo
   dejo sin CSS (reglas, organigrama rflujo/rhilo/rpaso,
   anatomia, tablas, indice, etc.)
   ============================================================ */
.menu-movil__nav a:active{color:var(--naranja)}

@media (min-width:1121px) and (hover:hover) and (pointer:fine){
  .home-noticias .noti,
    .noticias-pagina .noti{transform-origin:center bottom;will-change:transform,box-shadow}
  .home-noticias .noti:hover,
    .home-noticias .noti:focus-within,
    .noticias-pagina .noti:hover,
    .noticias-pagina .noti:focus-within{
      z-index:4;
      transform:perspective(1000px) translateY(-18px) translateZ(35px) scale(1.018);
      box-shadow:0 42px 34px -25px rgba(31,14,4,.42),0 22px 30px -22px rgba(31,14,4,.28),0 8px 18px rgba(31,14,4,.10);
    }
}

@media (max-width:640px){
  .orden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;border-radius:16px}
  .orden__b{min-width:0;width:100%;justify-content:center;gap:4px;padding:8px 5px;font-size:.56rem;line-height:1.25;white-space:normal;text-align:center}
  .orden__b svg{flex:0 0 auto}
}

@media (max-width:900px){
  .ficha{grid-template-columns:1fr;gap:30px}
}

.ficha__foto::before,.ficha__foto::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}

.ficha__foto::before{background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.09) 36%,rgba(120,225,255,.38) 48%,rgba(255,190,70,.34) 54%,transparent 72%);transform:translateX(-65%);mix-blend-mode:screen}

.ficha__foto:hover,.ficha__foto.es-inclinada{box-shadow:0 28px 65px rgba(28,11,0,.2),0 0 34px rgba(235,97,1,.18)}

.ficha__foto:hover::before,.ficha__foto.es-inclinada::before{opacity:1;animation:fichaHolo 1.9s ease-in-out infinite alternate}

.card-preview-stats div.es-chakra strong{color:var(--naranja)}

.home-cards__carrusel.es-arrastrando .home-cards__ventana{cursor:grabbing;user-select:none}

.home-cards__ventana img{-webkit-user-drag:none;user-select:none}

@media (prefers-reduced-motion:reduce){
  .home-card,.home-card__imagen::before,.home-card__imagen::after,.card-preview-ficha__imagen::before,.ficha__foto::before{animation:none}
  .home-card__imagen,.card-preview-ficha__imagen{transition:none}
}

@media (max-width:560px){
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .preview-card{border-radius:14px}
  .preview-card__cuerpo{padding:12px}
  .preview-card__estado{font-size:.48rem;left:7px;top:7px;max-width:calc(100% - 14px)}
  .preview-card__datos span{font-size:.54rem}
  .preview-card__cuerpo h2{font-size:.86rem}
  .card-preview-stats{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
  .card-preview-stats div{min-height:72px;padding:12px}
  .card-preview-stats div.es-texto{grid-column:span 2}
  .card-preview-stats div.es-texto strong{font-size:1.05rem}
  .home-cards__carrusel{padding-inline:0}
  .home-card{flex-basis:clamp(132px,44vw,170px)}
  .home-cards__pista{gap:14px}
}

@media (max-width:640px){
  :root{--cab-alto:64px;--radio-g:18px}
  .cab__caja{width:calc(100% - 16px);gap:7px}
  .marca__txt{display:none}
  .cab__extras{margin-left:auto;gap:4px}
  .cab__extras .btn-icono{order:1;width:34px;height:38px}
  .cab__extras .idiomas{order:2}
  .cab__extras .moneda{order:3}
  .cab__extras .hamburguesa{order:4;width:36px;height:38px}
  .caja{width:calc(100% - 26px)}
  .seccion{padding:44px 0}
  .heroe~.seccion .t-grande{font-size:var(--hero-title-size,1.5rem)}
  .cards-portada,.card-preview-page{padding-top:calc(var(--cab-alto) + 44px)}
  .rejilla{gap:9px}
  .rejilla--4{grid-template-columns:repeat(3,1fr)}
  .rejilla--3{grid-template-columns:1fr}
  .rejilla--noticias{grid-template-columns:1fr}
  .carta{border-radius:12px}
  .carta__cuerpo{padding:8px 9px 9px;gap:5px}
  .carta__titulo{font-size:.7rem;line-height:1.25;-webkit-line-clamp:2}
  .carta__meta{display:none}
  .carta__eti{font-size:.5rem;padding:3px 7px;top:6px;left:6px}
  .carta__pie{padding-top:7px;flex-direction:column;align-items:flex-start;gap:4px}
  .carta__precio{font-size:.82rem}
  .carta__precio small{font-size:.48rem;letter-spacing:.08em;margin-bottom:1px}
  .variacion{font-size:.58rem;padding:2px 6px}
  .estad{grid-template-columns:repeat(2,1fr);border-radius:14px}
  .estad__c{padding:13px 12px}
  .estad__n{font-size:1.45rem;margin-bottom:3px}
  .estad__n--fecha{font-size:.82rem;padding-top:.35em;line-height:1.25}
  .estad__e{font-size:.55rem;letter-spacing:.1em;line-height:1.3}
  .filtros{padding:11px;gap:7px;border-radius:14px}
  .campo{min-width:0;flex:1 1 calc(50% - 4px)}
  .campo--busca{flex:1 1 100%}
  .campo input,.campo select{padding:9px 13px;font-size:.8rem}
  .campo--busca input{padding-left:36px}
  .campo__lupa{left:13px}
  .pastilla{padding:6px 11px;font-size:.6rem;letter-spacing:.06em}
  .pastillas{gap:6px}
  .pastillas--tipos{padding-top:10px;gap:5px}
  .pastillas--tipos .pastilla{gap:5px}
  .pastillas--tipos .pastilla::before{width:7px;height:7px}
  .grafica{padding:16px}
  .grafica__rangos{width:100%;justify-content:space-between}
  .grafica__rango{padding:7px 11px;font-size:.64rem}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .arriba{right:14px;bottom:14px}
  .lanza{width:100%;padding:18px 22px 16px}
  .btn{padding:14px 24px;font-size:.72rem}
  .tiempo{padding-left:36px}
  .tiempo::before,.tiempo::after{left:11px}
  .tiempo__cometa{left:6px}
  .tiempo__anio{margin-left:-36px;padding-left:36px;font-size:2.6rem}
  .tiempo__item{grid-template-columns:1fr;gap:0;padding:18px 0}
  .tiempo__item::after{left:-36px}
  .tiempo__fecha{grid-row:auto;grid-column:1;font-size:.72rem;margin-bottom:5px}
  .tiempo__nombre,.tiempo__desc,.tiempo__lugar{grid-column:1}
  .tiempo__nombre{font-size:1.08rem}
  .tiempo__desc{font-size:.85rem}
  .tiempo__punto{left:-30px;top:20px;width:13px;height:13px}
  .ficha__datos{grid-template-columns:repeat(2,1fr);margin-top:16px;border-radius:12px}
  .ficha__dato{padding:9px 12px}
  .ficha__dato dt{font-size:.52rem;letter-spacing:.1em;margin-bottom:1px}
  .ficha__dato dd{font-size:.82rem}
  .punto-tipo{width:8px;height:8px;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent)}
  .cifras__c{padding:11px 13px}
  .cifras__e{font-size:.54rem;letter-spacing:.1em;margin-bottom:3px}
  .cifras__v{font-size:1.02rem}
  .anuncios-caja{max-height:420px;padding:6px}
  .anuncio{gap:9px;padding:9px}
  .anuncio__foto{width:40px;height:40px;border-radius:8px}
  .anuncio__titulo{font-size:.76rem;white-space:normal;
                     display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .anuncio__meta{font-size:.62rem}
  .anuncio__precio{font-size:.84rem}
  .articulo__cuerpo p{font-size:1rem}
  .pie__caja{padding-bottom:36px}
}

@media (max-height:520px) and (orientation:landscape){
  .heroe{min-height:auto;padding:calc(var(--cab-alto) + 32px) 0 48px}
  .heroe__scroll{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
      animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important;scroll-behavior:auto !important;
    }
  .rev{opacity:1;transform:none}
  .linea-rev>span{transform:none}
  .noti__foto img{animation:none;transform:none}
  .heroe__letra{opacity:1;transform:none;filter:none;text-shadow:none}
  .heroe__titulo{filter:none}
  .heroe__titulo::after{display:none}
  .heroe__texto,.heroe__botones,.lanza,.heroe__scroll{opacity:1}
}

@media (max-width:900px){
  .tipos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.globo__region:focus{outline:none}

.globo__region:focus-visible{outline:none;fill:var(--naranja);opacity:1}

.globo__islas{fill:var(--tinta);opacity:.6;stroke:var(--papel);stroke-width:.6;pointer-events:none}

.globo__sombra,.globo__brillo{pointer-events:none}

[data-tema="oscuro"] .globo__sombra{opacity:.6}

[data-tema="oscuro"] .globo__brillo{opacity:.45}

@media (max-width:900px){
  .dist{grid-template-columns:1fr;gap:26px}
  .dist__globo{position:static}
  .globo{max-width:340px}
}

@media (max-width:520px){
  .dist__botones{grid-template-columns:1fr}
  .globo{max-width:290px}
}

@media print{
  .cab,.menu-movil,.arriba,.pie__redes,.filtros,.aviso-cookies{display:none}
  body{background:#fff;color:#000}
}

@media (max-width:520px){
  .aviso-cookies{padding:8px}
  .aviso-cookies__caja{
      border-radius:var(--radio);gap:14px;padding:16px;
      max-height:78svh;
    }
  .aviso-cookies__titulo{font-size:.85rem}
  .aviso-cookies__texto p{font-size:.84rem;line-height:1.55}
  .aviso-cookies__texto a{white-space:normal}
  .aviso-cookies__botones{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .aviso-cookies{animation:none}
}

.reglas-sello{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  padding:10px 16px;border-radius:999px;background:var(--naranja-10);
  color:var(--texto);font-size:.76rem;font-weight:700;line-height:1.5;
}

.reglas-sello svg{color:var(--naranja);flex:0 0 auto}

.reglas-nota{
  margin-top:26px;padding:14px 18px;border-left:3px solid var(--naranja);
  background:var(--tinta-03,rgba(28,11,0,.03));color:var(--texto);
  font-size:.86rem;line-height:1.7;opacity:.85;
}

.reglas-fuente{text-align:center;color:var(--texto-suave);font-size:.82rem}

.reglas-fuente a{color:var(--naranja);font-weight:700}

.stats-provisional{
  display:flex;align-items:flex-start;gap:7px;margin-top:-16px;margin-bottom:26px;
  color:var(--texto-suave);font-size:.74rem;line-height:1.55;font-style:italic;
}

.stats-provisional::before{
  content:'!';flex:0 0 auto;display:grid;place-items:center;
  width:15px;height:15px;margin-top:1px;border-radius:50%;
  background:var(--naranja);color:#fff;font-size:.6rem;font-weight:900;font-style:normal;
}

.rindice{
  margin-top:30px;padding:18px 20px;border-radius:var(--radio);
  background:var(--papel-2);border:1px solid var(--linea);
}

.rindice__t{
  display:block;font-size:.66rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-suave);margin-bottom:12px;
}

.rindice ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}

.rindice a{
  display:inline-block;padding:8px 14px;border-radius:999px;
  background:var(--papel);box-shadow:inset 0 0 0 1px var(--linea);
  font-size:.76rem;font-weight:700;
  transition:color .25s,box-shadow .25s,transform .25s var(--suave);
}

.rindice a:hover{color:var(--naranja);box-shadow:inset 0 0 0 1.5px var(--naranja);transform:translateY(-2px)}

.rmazo-caja{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(26px,4vw,54px);align-items:center;margin-top:34px;
}

.rmazo-foto{margin:0}

.rmazo-foto img{display:block;width:100%;height:auto}

.rmazo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.rmazo__b{
  text-align:center;padding:24px 16px;border-radius:var(--radio);
  background:var(--papel);border:1px solid var(--linea);box-shadow:var(--sombra-1);
  transition:transform .35s var(--suave),box-shadow .35s;
}

.rmazo__b:hover{transform:translateY(-5px);box-shadow:var(--sombra-2)}

.rmazo__n{
  display:block;font-size:2.5rem;font-weight:900;line-height:1;
  letter-spacing:-.04em;color:var(--naranja);margin-bottom:8px;
}

.rmazo__b strong{
  display:block;font-size:.72rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:6px;
}

.rmazo__b small{display:block;color:var(--texto-suave);font-size:.78rem;line-height:1.6}

.rmazo__b--lider {border-top:4px solid #E4467E}

.rmazo__b--mazo  {border-top:4px solid #C7397A}

.rmazo__b--chakra{border-top:4px solid var(--naranja)}

.rmazo__b--summon{border-top:4px solid var(--tinta)}

.rtipo__img,.rpaso__img{
  position:relative;margin-bottom:16px;
  aspect-ratio:4/3;
}

.rtipo__img img,.rpaso__img img{
  display:block;width:100%;height:100%;object-fit:contain;
  transition:transform .5s var(--suave);
}

.rtipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:34px}

.rtipo{
  padding:18px;border-radius:var(--radio);background:var(--papel);
  border:1px solid var(--linea);box-shadow:var(--sombra-1);
  transition:transform .4s var(--suave),box-shadow .4s;
}

.rtipo:hover{transform:translateY(-6px);box-shadow:var(--sombra-2)}

.rtipo:hover .rtipo__img img{transform:scale(1.05)}

.rtipo__t{
  display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;
}

.rtipo p{color:var(--texto-suave);font-size:.87rem;line-height:1.7}

.rflujo{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:34px;margin-top:34px;
  --ciclo:10.4s;          /* 4 pasos x 2.6s */
  --tramo:2.6s;
}

.rpaso{
  position:relative;padding:16px 16px 24px;border-radius:var(--radio);
  background:var(--papel);border:1px solid var(--linea);
  transition:transform .4s var(--suave);
  animation:rCarga var(--ciclo) ease-in-out infinite;
}

.rpaso:nth-child(2){animation-delay:calc(var(--tramo) * 1)}

.rpaso:nth-child(3){animation-delay:calc(var(--tramo) * 2)}

.rpaso:nth-child(4){animation-delay:calc(var(--tramo) * 3)}

.rpaso:hover{transform:translateY(-7px)}

.rpaso:hover .rpaso__img img{transform:scale(1.05)}

@keyframes rCarga{
  0%   {box-shadow:var(--sombra-1);border-color:var(--linea)}
  8%   {box-shadow:0 0 0 1.5px var(--naranja),0 14px 34px rgba(235,97,1,.20);border-color:transparent}
  22%  {box-shadow:0 0 0 1.5px var(--naranja),0 14px 34px rgba(235,97,1,.20);border-color:transparent}
  40%,100%{box-shadow:var(--sombra-1);border-color:var(--linea)}
}

.rpaso__n{
  display:grid;place-items:center;width:36px;height:36px;margin-bottom:12px;
  background:var(--naranja);color:#fff;font-size:.98rem;font-weight:900;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}

.rpaso__t{font-size:.94rem;font-weight:900;line-height:1.3;margin-bottom:9px}

.rpaso__d{color:var(--texto-suave);font-size:.85rem;line-height:1.7}

.rhilo{
  position:absolute;top:50%;right:-34px;width:34px;height:2px;
  transform:translateY(-50%);
  background:var(--naranja-25);border-radius:2px;
  overflow:hidden;pointer-events:none;
}

.rhilo i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(90deg,transparent,#FFC078,var(--naranja),transparent);
  transform:translateX(-100%);
  animation:rPulso var(--ciclo) linear infinite;
}

.rpaso:nth-child(2) .rhilo i{animation-delay:calc(var(--tramo) * 1)}

.rpaso:nth-child(3) .rhilo i{animation-delay:calc(var(--tramo) * 2)}

@keyframes rPulso{
  0%  {transform:translateX(-100%)}
  20% {transform:translateX(100%)}
  100%{transform:translateX(100%)}
}

.rflujo--compacto .rpaso{padding:14px 14px 20px}

.rflujo--compacto .rpaso__d{font-size:.82rem}

.ranatomia{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(28px,5vw,60px);align-items:center;margin-top:34px;
}

.ranatomia__carta{margin:0}

.ranatomia__carta img{display:block;width:100%;height:auto}

.ranatomia__f{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--linea);align-items:baseline;
}

.ranatomia__f:last-child{border-bottom:0}

.ranatomia__f dt{font-size:.76rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--naranja)}

.ranatomia__f dd{color:var(--texto-suave);font-size:.88rem;line-height:1.7}

.rtabla-caja{margin-top:40px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radio)}

.rtabla{width:100%;border-collapse:collapse;min-width:520px;background:var(--papel)}

.rtabla caption{
  text-align:left;padding:16px 18px;font-size:.72rem;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave);
}

.rtabla th,.rtabla td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--linea);font-size:.87rem}

.rtabla thead th{
  font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);background:var(--papel-2);
}

.rtabla tbody tr:last-child td{border-bottom:0}

.rtabla td .suave{font-size:.74rem}

.rincog{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin-top:34px}

.rincog__i{
  display:flex;align-items:flex-start;gap:13px;padding:18px 20px;
  border-radius:var(--radio);background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:.9rem;line-height:1.65;
  transition:transform .3s var(--suave),background .3s;
}

.rincog__i:hover{transform:translateX(4px);background:rgba(255,255,255,.11)}

.rincog__i span{
  flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;background:var(--naranja);color:#fff;
  font-size:.8rem;font-weight:900;
}

.rincog__cuando{margin-top:30px;max-width:70ch;font-size:.94rem;line-height:1.8;opacity:.85}

.rincog__botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

@media (max-width:1000px){
  .rflujo{grid-template-columns:repeat(2,1fr);gap:34px}
  .rpaso:nth-child(2) .rhilo{
      top:auto;bottom:-34px;right:50%;
      width:2px;height:34px;transform:translateX(50%);
    }
  .rpaso:nth-child(2) .rhilo i{
      background:linear-gradient(180deg,transparent,#FFC078,var(--naranja),transparent);
      animation-name:rPulsoV;
    }
  .rmazo-caja{grid-template-columns:1fr;gap:30px}
  .rmazo-foto{max-width:520px;margin-inline:auto}
}

@media (max-width:860px){
  .ranatomia{grid-template-columns:1fr;gap:28px}
  .ranatomia__carta{max-width:440px;margin-inline:auto}
}

@media (max-width:680px){
  .rflujo{grid-template-columns:1fr;gap:40px}
  .rpaso .rhilo,
    .rpaso:nth-child(2) .rhilo{
      top:auto;bottom:-40px;right:50%;
      width:2px;height:40px;transform:translateX(50%);
    }
  .rpaso .rhilo i,
    .rpaso:nth-child(2) .rhilo i{
      background:linear-gradient(180deg,transparent,#FFC078,var(--naranja),transparent);
      animation-name:rPulsoV;
    }
  .rtipos{grid-template-columns:1fr}
  .rmazo{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rmazo__b{padding:18px 12px}
  .rmazo__n{font-size:2.1rem}
}

@keyframes rPulsoV{
  0%  {transform:translateY(-100%)}
  20% {transform:translateY(100%)}
  100%{transform:translateY(100%)}
}

@media (max-width:520px){
  .ranatomia__f{grid-template-columns:1fr;gap:4px}
  .reglas-sello{align-items:flex-start}
  .rincog__botones .btn{flex:1 1 100%}
  .rindice ul{gap:6px}
  .rindice a{font-size:.72rem;padding:7px 12px}
}

@media (prefers-reduced-motion:reduce){
  .rpaso,.rhilo i{animation:none!important}
  .rhilo{background:var(--naranja)}
  .rtipo__img img,.rpaso__img img{transition:none!important}
}

.seccion--estampado{position:relative;isolation:isolate}

.seccion--estampado::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 440'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(35,49) scale(1.172)'%3E%3Cpath d='M123 4 L101 22 C88 11 68 7 50 13 C26 21 10 43 9 69 L3 100 L58 97 C81 94 96 79 96 59 C96 43 83 33 67 35 C51 37 41 49 43 64 C45 77 57 83 67 77 C75 72 75 63 67 59'/%3E%3C/g%3E%3Cg transform='translate(255,269) scale(1.172)'%3E%3Cpath d='M123 4 L101 22 C88 11 68 7 50 13 C26 21 10 43 9 69 L3 100 L58 97 C81 94 96 79 96 59 C96 43 83 33 67 35 C51 37 41 49 43 64 C45 77 57 83 67 77 C75 72 75 63 67 59'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:440px auto;
  opacity:.9;
}

[data-tema="oscuro"] .seccion--estampado::before{opacity:.05}

@media (max-width:700px){
  .seccion--estampado::before{background-size:305px auto}
}

.cards-cuenta{margin:22px 0 6px;color:var(--suave);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.preview-card__mazo{
  position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:999px;
  font-size:.55rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;backdrop-filter:blur(8px);max-width:calc(100% - 24px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.preview-card__mazo--leaf  {background:rgba(200,52,72,.88)}

.preview-card__mazo--uchiha{background:rgba(20,120,160,.88)}

.preview-card__datos span.es-chakra{background:var(--naranja-10);color:var(--naranja);box-shadow:inset 0 0 0 1px var(--naranja-25)}

.preview-card__jutsu{
  margin-top:10px;font-size:.68rem;font-weight:700;line-height:1.35;
  color:var(--naranja);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.card-ref{
  display:inline-block;margin-right:7px;padding:4px 9px;border-radius:7px;
  background:var(--naranja-10);color:var(--naranja);
  box-shadow:inset 0 0 0 1px var(--naranja-25);
  font-size:.66rem;font-weight:800;letter-spacing:.07em;
}

.card-ref--rareza,.card-ref--edicion{
  background:var(--tinta-05);color:var(--suave);box-shadow:inset 0 0 0 1px var(--linea);
}

.card-rasgos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-8px 0 24px}

.card-rasgos__eti{
  color:var(--suave);font-size:.62rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;margin-right:2px;
}

.pastilla--peq{padding:5px 11px;font-size:.63rem;letter-spacing:.04em}

.card-efecto{
  margin:0 0 26px;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:var(--tinta-03,var(--tinta-05));
}

.card-efecto__cab{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding:13px 18px;background:#C24E00;color:#fff;
}

.card-efecto__eti{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}

.card-efecto__jutsu{font-size:1rem;font-weight:800;line-height:1.2}

.card-efecto__texto{padding:18px}

.card-efecto__texto p{margin:0;line-height:1.72;font-size:.92rem}

.card-efecto__texto p + p{margin-top:12px}

.card-efecto__nota{
  margin:0;padding:11px 18px;border-top:1px solid var(--linea);
  color:var(--suave);font-size:.72rem;line-height:1.5;
}

@media (max-width:700px){
  .card-rasgos{margin:-4px 0 20px;gap:6px}
  .card-efecto__cab{padding:11px 14px;gap:6px}
  .card-efecto__jutsu{font-size:.9rem}
  .card-efecto__texto{padding:14px}
  .card-efecto__texto p{font-size:.86rem;line-height:1.65}
  .card-efecto__nota{padding:10px 14px;font-size:.68rem}
  .preview-card__mazo{font-size:.46rem;right:7px;bottom:7px;padding:5px 8px}
  .preview-card__jutsu{font-size:.6rem;margin-top:8px}
  .cards-cuenta{font-size:.64rem;margin:16px 0 4px}
}

/* ============================================================
   2026 · PREMIUM TCG / FOIL EDITION
   Una capa visual reversible para convertir la interfaz en un
   escaparate de coleccionista sin modificar el contenido oficial.
   ============================================================ */
:root{
  --oro:#D7A62A;
  --oro-claro:#FFF1A8;
  --oro-oscuro:#765013;
  --holo-cian:#69E8FF;
  --holo-magenta:#FF6ED0;
  --obsidiana:#100A08;
}

/* Cabecera: una linea de rareza muy fina aparece cuando queda fija. */
.cab.es-pegada::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--naranja),var(--oro-claro),var(--holo-cian),var(--holo-magenta),transparent);
  background-size:220% 100%;animation:nmEspectro 7s linear infinite;opacity:.72;
}

/* El menu deja de ser una lista perdida en un lienzo vacio. */
@media (min-width:761px) and (max-width:1320px){
  .menu-movil{
    display:grid;
    grid-template-columns:minmax(340px,.92fr) minmax(360px,1.08fr);
    align-items:stretch;gap:clamp(38px,7vw,110px);padding-inline:clamp(30px,7vw,110px);
    background:
      radial-gradient(circle at 82% 42%,rgba(235,97,1,.13),transparent 31%),
      linear-gradient(135deg,var(--papel) 0 54%,var(--papel-2) 54% 100%);
  }
}
.menu-movil__coleccion{
  position:relative;isolation:isolate;overflow:hidden;min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:clamp(30px,5vw,64px);color:#fff;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),transparent 35%),
    radial-gradient(circle at 72% 26%,rgba(255,180,35,.35),transparent 19%),
    linear-gradient(145deg,#27140b 0%,#0c0807 68%,#251006 100%);
  clip-path:polygon(0 0,calc(100% - 38px) 0,100% 38px,100% 100%,38px 100%,0 calc(100% - 38px));
  box-shadow:inset 0 0 0 1px rgba(255,222,132,.32);
  opacity:0;transform:translateY(24px);transition:transform .5s var(--suave),filter .5s;
}
.menu-movil.es-abierto .menu-movil__coleccion{animation:entrarMenu .65s var(--suave) .25s forwards}
.menu-movil__coleccion::before{
  content:'';position:absolute;inset:-40%;z-index:-1;opacity:.52;
  background:conic-gradient(from 20deg,transparent 0 18%,rgba(105,232,255,.42) 25%,rgba(255,110,208,.36) 32%,rgba(255,232,133,.5) 39%,transparent 48% 100%);
  animation:girarAura 11s linear infinite;
}
.menu-movil__coleccion::after{
  content:'SSR';position:absolute;right:clamp(28px,5vw,70px);top:clamp(30px,5vw,68px);
  font-weight:900;font-size:clamp(4rem,10vw,9rem);line-height:1;letter-spacing:-.08em;
  color:transparent;-webkit-text-stroke:1px rgba(255,232,163,.28);
}
.menu-movil__coleccion:hover{transform:translateY(-6px);filter:saturate(1.18)}
.menu-movil__coleccion-eti{font-size:.66rem;font-weight:900;letter-spacing:.26em;color:var(--oro-claro);text-transform:uppercase}
.menu-movil__coleccion strong{position:relative;max-width:7ch;margin-top:12px;font-size:clamp(2.2rem,5.4vw,5rem);line-height:.9;text-transform:uppercase;letter-spacing:-.05em}
.menu-movil__coleccion-pie{display:flex;gap:12px;align-items:center;margin-top:28px;font-size:.7rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-claro)}
.menu-movil__coleccion-pie b{font-size:1.2rem;transition:transform .3s var(--rebote)}
.menu-movil__coleccion:hover .menu-movil__coleccion-pie b{transform:translateX(8px)}
.menu-movil__orbita{position:absolute;z-index:-1;border:1px solid rgba(255,224,151,.2);border-radius:50%;animation:girarAura 14s linear infinite}
.menu-movil__orbita::after{content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--oro-claro);box-shadow:0 0 18px var(--oro-claro)}
.menu-movil__orbita--1{width:310px;height:310px;right:-72px;top:60px}
.menu-movil__orbita--2{width:220px;height:220px;right:-28px;top:106px;animation-direction:reverse;animation-duration:9s}

/* Hero: panel secundario tipo carta premium. */
.heroe__texto{margin-bottom:0}
.heroe__paneles{display:flex;align-items:stretch;gap:14px;margin-top:34px;max-width:760px}
.heroe__paneles .lanza{margin-top:0;flex:1 1 440px;min-width:0}
.heroe__mercado{
  position:relative;isolation:isolate;overflow:hidden;flex:0 0 238px;min-height:190px;
  display:flex;flex-direction:column;padding:22px;color:#fff;
  background:linear-gradient(145deg,#27160d,#0d0907 76%);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  box-shadow:inset 0 0 0 1px rgba(255,225,145,.2);
  opacity:0;animation:aparecer .9s var(--suave) .72s forwards;
  transition:transform .4s var(--rebote),filter .4s;
}
.heroe__mercado::before{
  content:'';position:absolute;inset:-70%;z-index:-1;opacity:.42;
  background:conic-gradient(transparent 0 25%,rgba(105,232,255,.35),rgba(255,110,208,.28),rgba(255,232,133,.45),transparent 58%);
  animation:girarAura 10s linear infinite;
}
.heroe__mercado:hover{transform:translateY(-7px) rotate(.4deg);filter:saturate(1.22)}
.heroe__mercado>strong{font-size:1.02rem;line-height:1.15;text-transform:uppercase}
.heroe__miniaturas{display:flex;align-items:flex-end;height:68px;margin:12px 0 8px;padding-left:5px}
.heroe__miniaturas img{width:44px;aspect-ratio:5/7;object-fit:fill;border-radius:4px;margin-left:-5px;transform:translateY(calc(var(--mini-i) * 2px)) rotate(calc((var(--mini-i) - 1) * 7deg));box-shadow:0 8px 16px rgba(0,0,0,.48);border:1px solid rgba(255,230,163,.45)}
.heroe__mercado-pie{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:9px;border-top:1px solid rgba(255,255,255,.13);font-size:.57rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-claro)}
.heroe__mercado-pie b{font-size:1rem;transition:transform .3s var(--rebote)}
.heroe__mercado:hover .heroe__mercado-pie b{transform:translateX(5px)}

/* Foil sensible al cursor: espectro, trama impresa y punto de luz. */
.carta__foto::before,.preview-card__imagen::before,.home-card__imagen::before{
  content:'';display:block;position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.82) 0,rgba(122,225,255,.38) 12%,transparent 34%),
    repeating-linear-gradient(118deg,transparent 0 7%,rgba(105,232,255,.18) 8%,rgba(255,110,208,.16) 10%,rgba(255,235,153,.2) 12%,transparent 15% 23%),
    linear-gradient(115deg,transparent 20%,rgba(105,232,255,.26) 38%,rgba(255,110,208,.22) 51%,rgba(255,228,126,.28) 62%,transparent 80%);
  background-size:100% 100%,220% 220%,180% 180%;
  background-position:center,calc(100% - var(--mx,50%)) calc(100% - var(--my,50%)),var(--mx,50%) var(--my,50%);
  mix-blend-mode:color-dodge;opacity:.08;transition:opacity .35s,background-position .12s linear;
}
.carta__foto::after,.preview-card__imagen::after,.home-card__imagen::after{
  content:'';display:block;position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 0 22px rgba(255,214,118,.06);
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.68) 49%,transparent 56%);
  background-size:240% 100%;background-position:160% 0;opacity:.26;
  transition:opacity .35s,background-position .7s var(--suave);
}
.carta:hover .carta__foto::before,.preview-card:hover .preview-card__imagen::before,.home-card:is(:hover,:focus-within,.es-potenciada) .home-card__imagen::before{opacity:.66}
.carta:hover .carta__foto::after,.preview-card:hover .preview-card__imagen::after,.home-card:is(:hover,:focus-within,.es-potenciada) .home-card__imagen::after{opacity:.82;background-position:-60% 0}
.carta:has(.carta__eti--promo) .carta__foto{box-shadow:inset 0 0 0 2px var(--oro-claro),0 0 28px rgba(215,166,42,.2)}
.carta:has(.carta__eti--promo):hover{box-shadow:0 32px 74px rgba(87,52,8,.28),0 0 38px rgba(215,166,42,.18)}

/* Portada: mercado editorial, integrado en el tema activo. */
.home-market{
  overflow:hidden;isolation:isolate;color:var(--texto);
  padding-block:clamp(68px,8vw,108px);border-block:1px solid var(--linea);
  background:
    radial-gradient(circle at 91% 8%,var(--naranja-10),transparent 25%),
    radial-gradient(circle at 5% 92%,rgba(105,232,255,.055),transparent 24%),
    linear-gradient(180deg,var(--papel-2),var(--papel));
}
[data-tema="oscuro"] .home-market{
  background:
    radial-gradient(circle at 91% 8%,var(--naranja-10),transparent 25%),
    radial-gradient(circle at 5% 92%,rgba(105,232,255,.045),transparent 24%),
    linear-gradient(180deg,var(--papel-2),var(--papel));
}
.home-market::before{
  content:'';position:absolute;right:-80px;top:50px;width:min(38vw,520px);aspect-ratio:1;z-index:-1;
  border:1px solid var(--linea);border-radius:50%;pointer-events:none;opacity:.5;
  box-shadow:0 0 0 38px color-mix(in srgb,var(--naranja) 3%,transparent),0 0 0 76px color-mix(in srgb,var(--naranja) 2%,transparent);
}
.home-market .cabecera-sec__sub,.home-market .estad__e{color:var(--texto-suave)}
.home-market .cabecera-sec__eti{color:var(--naranja)}
.home-market .cabecera-sec__eti::before{background:var(--naranja)}
.home-market .estad{background:var(--linea);border:1px solid var(--linea);box-shadow:0 16px 40px rgba(28,11,0,.06)}
.home-market .estad__c{color:var(--texto);background:color-mix(in srgb,var(--papel) 96%,transparent)}
.home-market .estad__c:hover{background:var(--naranja-10)}
.home-market__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:24px;margin-top:38px}
.home-market__grid .carta,.market-grid .carta{display:grid;grid-template-columns:minmax(205px,44%) minmax(0,1fr);align-items:stretch}
.home-market__grid .carta{color:var(--texto);background:var(--papel);box-shadow:0 18px 44px rgba(28,11,0,.09),inset 0 0 0 1px var(--linea)}
.home-market__grid .carta__foto,.market-grid .carta__foto{aspect-ratio:3/4;height:100%;min-height:340px}
.home-market__grid .carta__cuerpo,.market-grid .carta__cuerpo{padding:clamp(20px,2.5vw,30px)}
.home-market__grid .carta__titulo,.market-grid .carta__titulo{font-size:clamp(1rem,1.45vw,1.28rem)}
.home-market__grid .carta__pie,.market-grid .carta__pie{padding:15px 16px;border:0;border-radius:13px;background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--linea)}

/* Mercado: encabezado compacto y resultados tratados como piezas hero. */
.market-page{
  padding-top:calc(var(--cab-alto) + 38px);
  background:
    radial-gradient(circle at 91% 7%,var(--naranja-10),transparent 24%),
    linear-gradient(180deg,var(--papel-2),var(--papel) 420px);
}
.market-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px;margin:18px 0 clamp(28px,4vw,48px)}
.market-hero .cabecera-sec__sub{margin-top:10px}
.market-hero__estado{
  position:relative;overflow:hidden;min-width:190px;padding:22px 25px;border-radius:20px;
  color:#fff;background:linear-gradient(145deg,#28150b,#100a07);box-shadow:0 18px 40px rgba(32,14,3,.16);
}
.market-hero__estado::after{content:'';position:absolute;right:-24px;top:-30px;width:110px;height:110px;border:1px solid rgba(255,221,134,.18);border-radius:50%;box-shadow:0 0 0 20px rgba(255,221,134,.035)}
.market-hero__estado span{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:.55rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.market-hero__estado strong{display:block;margin-top:8px;font-size:2.7rem;line-height:1;color:var(--oro-claro)}
.market-hero__estado small{font-size:.6rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.54)}
.market-page .filtros{position:relative;z-index:4;background:color-mix(in srgb,var(--papel) 90%,transparent);backdrop-filter:blur(18px);box-shadow:0 18px 44px rgba(28,11,0,.07);border-color:color-mix(in srgb,var(--naranja) 16%,var(--linea))}
.market-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:26px}
.market-grid .carta{min-height:372px}
.market-grid--pocos{max-width:none}

@keyframes nmEspectro{to{background-position:220% 0}}

@media (max-width:900px){
  .heroe__paneles{max-width:700px}
  .home-market__grid .carta,.market-grid .carta{grid-template-columns:minmax(180px,39%) minmax(0,1fr)}
  .home-market__grid .carta__foto,.market-grid .carta__foto{min-height:310px}
  .home-market__grid,.market-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu-movil{display:flex}
  .menu-movil__coleccion{display:none}
  .heroe__paneles{flex-direction:column}
  .heroe__paneles .lanza,.heroe__mercado{flex-basis:auto;width:100%}
  .heroe__mercado{min-height:165px}
  .market-hero{grid-template-columns:1fr;align-items:start}
  .market-hero__estado{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:16px;width:100%;min-width:0;padding:16px 20px}
  .market-hero__estado span{grid-column:1/-1}.market-hero__estado strong{font-size:2rem}.market-hero__estado small{align-self:center}
}
@media (max-width:600px){
  .heroe__paneles{margin-top:26px}
  .lanza{padding:22px 25px 21px}
  .home-market{padding-block:52px}
  .home-market__grid{gap:16px;margin-top:26px}
  .home-market__grid .carta,.market-grid .carta{display:grid;grid-template-columns:minmax(126px,42%) minmax(0,1fr);align-items:center}
  .home-market__grid .carta__foto,.market-grid .carta__foto{width:100%;height:auto;min-height:0;aspect-ratio:3/4;align-self:center}
  .home-market__grid .carta__cuerpo,.market-grid .carta__cuerpo{padding:15px 14px;gap:8px}
  .home-market__grid .carta__titulo,.market-grid .carta__titulo{font-size:.88rem;line-height:1.25}
  .home-market__grid .carta__meta,.market-grid .carta__meta{display:flex}
  .chispa-env{margin:5px 0 2px;border-radius:10px}
  .chispa{height:78px}
  .carta__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:7px}
  .carta__stats strong{font-size:.75rem}
  .carta__stats small{font-size:.46rem;letter-spacing:.06em}
  .carta__stats .variacion{grid-column:1/-1;justify-self:end;margin-top:-2px}
  .chispa-ind{font-size:.46rem}.chispa-ind--ini{left:7px;bottom:7px}.chispa-ind--fin{right:7px;bottom:7px}
  .market-page{padding-top:calc(var(--cab-alto) + 24px)}
}
@media (max-width:430px){
  .home-market__grid .carta,.market-grid .carta{grid-template-columns:minmax(118px,40%) minmax(0,1fr)}
  .home-market__grid .carta__cuerpo,.market-grid .carta__cuerpo{padding:12px 11px}
  .chispa{height:68px}
  .carta__stats .stat{padding-left:6px}
}
@media (prefers-reduced-motion:reduce){
  .cab.es-pegada::after,.menu-movil__coleccion::before,.menu-movil__orbita,.heroe__mercado::before,.home-market::before{animation:none!important}
  .carta__foto::before,.preview-card__imagen::before,.home-card__imagen::before{transition:none}
}