/* ============================================================================
   GTA VI COMPANION — SISTEMA VISUAL
   Identidad: Vice City al atardecer.
   Estructura: rejilla densa tipo herramienta (densidad 8/10).
   Prioridad móvil: barra inferior de pestañas; lateral solo en escritorio.
   ============================================================================ */

:root{
  /* Superficies */
  --bg:        #0B0912;
  --bg-2:      #110E1B;
  --card:      #171224;
  --card-2:    #1E1730;
  --border:    #2C2340;
  --border-hi: #443358;

  /* Texto — ratios verificados sobre --bg */
  --fg:       #F6EFE6;   /* 17.3:1 */
  --fg-muted: #B6A9C4;   /*  8.9:1 */
  --fg-dim:   #8A7D99;   /*  5.2:1 */

  /* Acentos */
  --sunset:  #FF6B35;
  --magenta: #FF2E93;
  --teal:    #2DD4BF;
  --gold:    #FFB43D;
  --ok:      #34D399;
  --warn:    #FBBF24;
  --bad:     #FB7185;

  /* Densidad 8/10 */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;

  --radius: 10px;
  --radius-sm: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-w: 232px;
  --barra-inferior: 64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:'Barlow Condensed','Barlow',system-ui,sans-serif;
  line-height:1.08;margin:0;text-transform:uppercase;letter-spacing:.01em}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}

.oculto{display:none!important}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.saltar{position:absolute;left:-9999px;top:0;background:var(--sunset);color:#160D06;
  padding:.7rem 1.1rem;font-weight:700;z-index:999}
.saltar:focus{left:0}

/* ============================================================ AVISO DEMO == */
.aviso-demo{
  position:sticky;top:0;z-index:60;
  display:flex;gap:var(--s3);align-items:center;
  background:linear-gradient(90deg,#3A2410,#2A1A0C);
  border-bottom:1px solid rgba(255,180,61,.45);
  padding:var(--s3) var(--s4);font-size:.86rem;color:#FFE2B0;
}
.aviso-demo svg{flex:none;color:var(--gold)}
.aviso-demo strong{color:var(--gold)}

/* ============================================================== ESTRUCTURA = */
.app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);
  max-width:1560px;margin:0 auto;align-items:start}

/* ---- Navegación lateral (escritorio) ---- */
.lateral{position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid var(--border);padding:var(--s5) var(--s3);
  display:flex;flex-direction:column;gap:var(--s5);background:var(--bg-2)}
.marca{display:flex;flex-direction:column;gap:.1rem;padding:0 var(--s2)}
.marca b{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;
  letter-spacing:.02em;line-height:1;
  background:linear-gradient(92deg,var(--gold),var(--sunset) 45%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.marca span{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--fg-dim)}

.menu{display:flex;flex-direction:column;gap:1px}
.menu__grupo{font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--fg-dim);padding:var(--s3) var(--s2) var(--s1);font-weight:600}
.menu a{display:flex;align-items:center;gap:var(--s3);padding:.55rem var(--s2);
  border-radius:var(--radius-sm);color:var(--fg-muted);font-size:.93rem;
  border-left:2px solid transparent;cursor:pointer;min-height:40px;
  transition:background .18s var(--ease),color .18s var(--ease)}
.menu a:hover{background:var(--card);color:var(--fg)}
.menu a.activo{background:var(--card);color:var(--fg);font-weight:600;border-left-color:var(--sunset)}
.menu a svg{flex:none;color:currentColor;opacity:.85}

/* ---- Zona principal ---- */
.principal{min-width:0;padding:var(--s5) var(--s5) var(--s7)}

.cabecera{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;
  justify-content:space-between;margin-bottom:var(--s5)}
.cabecera h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.cabecera p{margin:.3rem 0 0;color:var(--fg-muted);font-size:.95rem;max-width:62ch}

/* ================================================================ BUSCADOR = */
.buscador{position:relative;flex:1 1 320px;max-width:520px}
.buscador input{width:100%;background:var(--card);border:1px solid var(--border);
  color:var(--fg);padding:.7rem var(--s4) .7rem 2.5rem;border-radius:var(--radius);
  font-size:.95rem;min-height:44px;transition:border-color .18s var(--ease)}
.buscador input:focus{border-color:var(--border-hi);outline-offset:0}
.buscador input::placeholder{color:var(--fg-dim)}
.buscador__icono{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:var(--fg-dim);pointer-events:none}
.buscador__limpiar{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--fg-dim);cursor:pointer;padding:.4rem;
  min-width:36px;min-height:36px;border-radius:var(--radius-sm)}
.buscador__limpiar:hover{color:var(--fg);background:var(--card-2)}

.resultados{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;
  background:var(--card);border:1px solid var(--border-hi);border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(0,0,0,.6);max-height:70vh;overflow-y:auto;padding:var(--s2)}
.resultados__grupo{padding:var(--s2) var(--s2) var(--s1);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--sunset);font-weight:600}
.resultados a{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;
  padding:.55rem var(--s2);border-radius:var(--radius-sm);color:var(--fg-muted);
  font-size:.92rem;cursor:pointer;min-height:40px}
.resultados a:hover,.resultados a:focus{background:var(--card-2);color:var(--fg)}
.resultados small{color:var(--fg-dim);font-size:.76rem;flex:none}
.resultados__vacio{padding:var(--s4);color:var(--fg-muted);font-size:.9rem;text-align:center}
.resultados__vacio b{display:block;color:var(--fg);margin-bottom:.25rem}

/* ================================================================== PIEZAS = */
.rejilla{display:grid;gap:var(--s3)}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}

.tarjeta{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s4);transition:border-color .18s var(--ease)}
.tarjeta:hover{border-color:var(--border-hi)}
.tarjeta__cab{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s3);margin-bottom:var(--s3)}
.tarjeta__cab h3{font-size:1.15rem}
.tarjeta__sub{color:var(--fg-dim);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.12em;margin-top:.15rem}

.seccion{margin-bottom:var(--s7)}
.seccion__cab{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline;
  justify-content:space-between;margin-bottom:var(--s4);
  border-bottom:1px solid var(--border);padding-bottom:var(--s3)}
.seccion__cab h2{font-size:clamp(1.4rem,3vw,1.9rem)}
.seccion__cab p{margin:0;color:var(--fg-dim);font-size:.85rem}

/* Distintivos de estado */
.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  padding:.2rem .5rem;border-radius:999px;border:1px solid;white-space:nowrap}
.chip--ok  {color:var(--ok);   border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1)}
.chip--warn{color:var(--warn); border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.1)}
.chip--bad {color:var(--bad);  border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.1)}
.chip--demo{color:var(--fg-dim);border-color:var(--border-hi);   background:var(--card-2)}
.chip--dist{color:#160D06;border-color:transparent;background:var(--gold)}
.chip--fase{color:var(--teal);border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.1)}

/* Estadísticas con barra */
.stat{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);
  align-items:center;padding:.3rem 0;font-size:.88rem}
.stat__et{color:var(--fg-dim);min-width:84px}
.stat__barra{height:6px;background:var(--card-2);border-radius:3px;overflow:hidden}
.stat__barra i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--sunset),var(--gold))}
.stat__val{font-variant-numeric:tabular-nums;font-weight:600;min-width:34px;text-align:right}

/* Cifras destacadas */
.cifra{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s3)}
.cifra dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--fg-dim);margin-bottom:.2rem}
.cifra dd{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;
  font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.cifra dd.pos{color:var(--ok)} .cifra dd.neg{color:var(--bad)}

/* Tablas */
.tabla-env{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
th,td{padding:.6rem var(--s3);text-align:left;border-bottom:1px solid var(--border)}
th{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:.76rem;color:var(--fg-dim);
  background:var(--bg-2);position:sticky;top:0;cursor:pointer;user-select:none;white-space:nowrap}
th:hover{color:var(--fg)}
th[aria-sort]{color:var(--sunset)}
tbody tr:hover{background:var(--card)}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.gana{color:var(--ok);font-weight:700}

/* Controles */
.controles{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.filtro{background:var(--card);border:1px solid var(--border);color:var(--fg);
  padding:.5rem var(--s3);border-radius:var(--radius-sm);font-size:.88rem;
  min-height:44px;cursor:pointer}
.filtro:hover{border-color:var(--border-hi)}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--card);border:1px solid var(--border-hi);color:var(--fg);
  padding:.55rem var(--s4);border-radius:var(--radius-sm);cursor:pointer;
  font-size:.9rem;font-weight:600;min-height:44px;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.boton:hover{background:var(--card-2)}
.boton--primario{background:var(--sunset);border-color:var(--sunset);color:#160D06}
.boton--primario:hover{background:#FF8354}
.boton--fantasma{background:none;border-color:var(--border)}

/* Casillas del tracker */
.check{display:flex;gap:var(--s3);align-items:flex-start;padding:.6rem var(--s3);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);cursor:pointer;min-height:48px;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.check:hover{border-color:var(--border-hi)}
.check input{appearance:none;width:22px;height:22px;flex:none;margin-top:.1rem;
  border:2px solid var(--border-hi);border-radius:5px;cursor:pointer;position:relative;
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.check input:checked{background:var(--ok);border-color:var(--ok)}
.check input:checked::after{content:'';position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #06281C;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check input:checked ~ .check__txt{color:var(--fg-dim);text-decoration:line-through}
.check__txt{font-size:.93rem;line-height:1.35}
.check__cat{display:block;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fg-dim);margin-top:.15rem;text-decoration:none}

/* Barra de progreso */
.progreso{height:8px;background:var(--card-2);border-radius:4px;overflow:hidden;
  border:1px solid var(--border)}
.progreso i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--gold),var(--sunset),var(--magenta));
  transition:width .4s var(--ease)}
.progreso--fino{height:5px}

/* Spoilers */
.spoiler{position:relative;border:1px dashed var(--border-hi);border-radius:var(--radius);
  padding:var(--s4);margin:var(--s3) 0}
.spoiler__tapa{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  text-align:center;color:var(--fg-muted);font-size:.9rem}
.spoiler__cuerpo{display:none}
.spoiler.abierto .spoiler__cuerpo{display:block}
.spoiler.abierto .spoiler__tapa{display:none}

/* Estado vacío */
.vacio{text-align:center;padding:var(--s7) var(--s4);color:var(--fg-muted);
  border:1px dashed var(--border);border-radius:var(--radius)}
.vacio b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:1.25rem;
  text-transform:uppercase;color:var(--fg);margin-bottom:var(--s2)}
.vacio code{background:var(--card-2);padding:.15rem .4rem;border-radius:4px;
  font-size:.85rem;color:var(--gold)}

/* Aviso en línea */
.nota{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3);
  border-radius:var(--radius);border:1px solid rgba(251,191,36,.3);
  background:rgba(251,191,36,.06);font-size:.88rem;color:var(--fg-muted);margin:var(--s3) 0}
.nota svg{flex:none;color:var(--warn);margin-top:.1rem}

/* Relaciones */
.relaciones{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.relaciones a{display:inline-flex;align-items:center;gap:.3rem;
  background:var(--card-2);border:1px solid var(--border);border-radius:999px;
  padding:.3rem .7rem;font-size:.82rem;color:var(--fg-muted);cursor:pointer;min-height:36px}
.relaciones a:hover{border-color:var(--border-hi);color:var(--fg)}

/* ====================================================== BARRA INFERIOR MÓVIL */
.barra-movil{display:none}

/* ================================================================ RESPONSIVE */
@media (max-width:1023px){
  .app{grid-template-columns:1fr}
  .lateral{display:none}
  .principal{padding:var(--s4) var(--s4) calc(var(--barra-inferior) + var(--s6))}

  .barra-movil{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:rgba(17,14,27,.97);backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .barra-movil a{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.15rem;padding:.5rem .25rem;min-height:var(--barra-inferior);
    color:var(--fg-dim);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;
    cursor:pointer;border-top:2px solid transparent}
  .barra-movil a.activo{color:var(--sunset);border-top-color:var(--sunset)}
  .barra-movil svg{width:20px;height:20px}

  .cabecera{align-items:flex-start;flex-direction:column;gap:var(--s3)}
  .buscador{max-width:none;width:100%}
  table{min-width:480px}
}

@media (max-width:560px){
  :root{--s7:2rem;--s6:1.5rem}
  .principal{padding-left:var(--s3);padding-right:var(--s3)}
  .cabecera h1{font-size:1.6rem}
  .rejilla--4,.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
  .aviso-demo{font-size:.78rem;padding:var(--s2) var(--s3)}
  .tarjeta{padding:var(--s3)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================================
   PORTADA — heredada de la página original de Lucia y Jason
   ============================================================================ */
.portada{position:relative;border-radius:var(--radius);overflow:hidden;
  margin-bottom:var(--s6);min-height:clamp(260px,42vh,420px);
  display:grid;place-items:center;text-align:center;padding:var(--s7) var(--s4);isolation:isolate}
.portada__cielo{position:absolute;inset:0;z-index:-3;
  background:radial-gradient(120% 82% at 50% 78%,#FFB43D 0%,#FF6B35 20%,#FF2E93 42%,#8B1E6B 60%,#2A1140 78%,var(--bg) 100%)}
.portada__sol{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:-2;
  width:min(40vw,300px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,#FFF1C9 0%,#FFD166 38%,#FF8A3D 70%,#FF5E7A 100%);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 62%,transparent 62% 64%,#000 64% 74%,transparent 74% 77%,#000 77% 85%,transparent 85% 89%,#000 89% 94%,transparent 94% 100%);
          mask-image:repeating-linear-gradient(180deg,#000 0 62%,transparent 62% 64%,#000 64% 74%,transparent 74% 77%,#000 77% 85%,transparent 85% 89%,#000 89% 94%,transparent 94% 100%)}
.portada__mar{position:absolute;left:0;right:0;bottom:0;height:36%;z-index:-2;
  background:linear-gradient(180deg,rgba(45,212,191,.28) 0%,rgba(11,9,18,.94) 64%,var(--bg) 100%)}
.portada__silueta{position:absolute;left:0;right:0;bottom:0;z-index:-1;width:100%;height:min(30vh,190px)}
.portada h1{font-size:clamp(2.6rem,11vw,6.5rem);letter-spacing:-.02em;
  text-shadow:0 4px 34px rgba(0,0,0,.5);margin:0}
.portada p{margin:var(--s3) auto 0;max-width:48ch;color:#FFF3E6;font-size:clamp(.92rem,2vw,1.1rem);
  text-shadow:0 2px 16px rgba(0,0,0,.65)}
.portada__duo{margin-top:var(--s4);display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}
.portada__duo a{background:#FFF3E6;color:#1B0C14;padding:.35rem .9rem;border-radius:999px;
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:.9rem;min-height:40px;display:inline-flex;align-items:center;cursor:pointer}
.portada__duo a:hover{background:#fff}

/* Texto largo de las fichas de personaje */
.prosa{max-width:70ch}
.prosa h4{font-size:1.05rem;margin:var(--s4) 0 var(--s2);color:var(--sunset)}
.prosa p{margin:0 0 var(--s3);color:var(--fg-muted);font-size:.93rem;line-height:1.6}
.prosa p strong{color:var(--fg)}

/* Velo entre el gráfico y el texto de la portada: sin él, el sol pasa por
   detrás del párrafo y lo vuelve ilegible en pantallas estrechas. */
.portada::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 62% at 50% 52%,rgba(11,9,18,.62) 0%,rgba(11,9,18,.30) 55%,transparent 80%)}
.portada p{text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 34px rgba(0,0,0,.65)}
.portada h1{text-shadow:0 4px 30px rgba(0,0,0,.65),0 0 60px rgba(0,0,0,.4)}

/* ============================================================================
   SITIO ESTÁTICO — cabecera, breadcrumbs, anuncios, artículos
   Añadido por la reestructuración SEO. Reutiliza los tokens de arriba.
   ============================================================================ */
.cabecera-sitio{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);background:var(--bg-2);
  position:sticky;top:0;z-index:50}
.cabecera-sitio .marca{flex:none}
.nav-principal{display:flex;gap:var(--s1);flex-wrap:wrap;flex:1 1 auto}
.nav-principal a{padding:.45rem .7rem;border-radius:var(--radius-sm);color:var(--fg-muted);
  font-size:.9rem;min-height:40px;display:inline-flex;align-items:center;
  transition:background .18s var(--ease),color .18s var(--ease)}
.nav-principal a:hover{background:var(--card);color:var(--fg)}
.nav-principal a.activo{color:var(--fg);background:var(--card);font-weight:600}

.pagina{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s6);
  max-width:1400px;margin:0 auto;padding:var(--s5) var(--s4)}
.columna{min-width:0;max-width:78ch}
.lateral-ads{position:sticky;top:76px}

.migas{font-size:.82rem;color:var(--fg-dim);margin-bottom:var(--s3);
  display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.migas a{color:var(--fg-muted)}
.migas a:hover{color:var(--sunset);text-decoration:underline}
.migas__sep{color:var(--fg-dim);opacity:.6}

.columna h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 var(--s4)}
.columna h2{font-size:clamp(1.4rem,3.2vw,2rem);margin:var(--s6) 0 var(--s3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--border)}
.columna h3{font-size:1.15rem;margin:var(--s4) 0 var(--s2)}
.columna p{margin:0 0 var(--s3);color:var(--fg-muted)}
.columna ul,.columna ol{margin:0 0 var(--s3);padding-left:1.3rem;color:var(--fg-muted)}
.columna li{margin-bottom:.4rem}
.columna a{color:var(--sunset)}
.columna a:hover{text-decoration:underline}
.entradilla{font-size:1.08rem;color:var(--fg)!important;line-height:1.6;
  border-left:3px solid var(--sunset);padding-left:var(--s3)}
.nota-pequena{font-size:.82rem;color:var(--fg-dim)!important}
.veredicto{background:var(--card);border-left:3px solid var(--ok);
  padding:var(--s3);border-radius:var(--radius-sm)}
.pos{color:var(--ok)}
.pasos li{margin-bottom:var(--s2)}

/* Anuncios: reservan altura para no provocar layout shift (CLS) */
.anuncio{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);border-radius:var(--radius);margin:var(--s4) auto;
  max-width:1400px;color:var(--fg-dim);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.18em;background:var(--bg-2)}
.anuncio--cabecera{margin:var(--s3) auto}
.anuncio--lateral{margin:0}

.tarjeta--aviso{border-left:3px solid var(--warn)}
.tarjeta a,a.tarjeta{color:inherit}
a.tarjeta{display:block}
a.tarjeta:hover{text-decoration:none;border-color:var(--border-hi)}
a.tarjeta h3{color:var(--sunset)}

.ficha-cab{margin-bottom:var(--s4)}
.ficha-cab dl{margin:var(--s3) 0 0}

/* FAQ */
.faq__item{border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:var(--s2);background:var(--card)}
.faq__item summary{padding:var(--s3);cursor:pointer;list-style:none;min-height:48px;
  display:flex;align-items:center}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{margin:0;font-size:1.02rem}
.faq__item summary::after{content:"+";margin-left:auto;color:var(--sunset);font-size:1.3rem}
.faq__item[open] summary::after{content:"\2212"}
.faq__r{padding:0 var(--s3) var(--s3)}
.faq__r p{margin:0 0 var(--s2)}

/* Spoiler */
.spoiler summary{cursor:pointer;padding:var(--s3);background:var(--card-2);
  border-radius:var(--radius-sm);color:var(--warn);min-height:48px;display:flex;align-items:center}
.opcion{border-top:1px solid var(--border);padding-top:var(--s3);margin-top:var(--s3)}
.opcion h3{color:var(--sunset)}

/* Contenido relacionado */
.relacionado{margin-top:var(--s7);padding-top:var(--s4);border-top:2px solid var(--border)}
.relacionado h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--fg-dim);margin:var(--s3) 0 var(--s2)}
.relacionado__lista{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.relacionado__lista li{margin:0}
.relacionado__lista a{display:inline-flex;align-items:center;background:var(--card);
  border:1px solid var(--border);border-radius:999px;padding:.4rem .85rem;
  font-size:.86rem;color:var(--fg-muted);min-height:40px}
.relacionado__lista a:hover{border-color:var(--sunset);color:var(--fg);text-decoration:none}

/* Compartir */
.compartir{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border);font-size:.86rem}
.compartir span{color:var(--fg-dim)}
.compartir a{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.45rem .8rem;color:var(--fg-muted);min-height:40px;display:inline-flex;align-items:center}
.compartir a:hover{border-color:var(--sunset);color:var(--fg);text-decoration:none}

/* Newsletter */
.newsletter{max-width:1400px;margin:var(--s6) auto;padding:var(--s5) var(--s4);
  background:linear-gradient(135deg,var(--card),var(--card-2));
  border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.newsletter h2{margin:0 0 var(--s2)}
.newsletter p{color:var(--fg-muted);max-width:52ch;margin:0 auto var(--s3)}
.newsletter__form{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;
  max-width:460px;margin:0 auto}
.newsletter__form input{flex:1 1 220px;background:var(--bg);border:1px solid var(--border-hi);
  color:var(--fg);padding:.65rem var(--s3);border-radius:var(--radius-sm);min-height:44px}
.newsletter__aviso{font-size:.78rem;color:var(--fg-dim);margin-top:var(--s3)}
.newsletter__aviso--alerta{color:var(--warn)}

/* Cuenta atrás */
.cuenta-atras{background:linear-gradient(135deg,#2A1140,#8B1E6B);border-radius:var(--radius);
  padding:var(--s5) var(--s4);text-align:center;margin:var(--s4) 0}
.cuenta-atras h2{border:0;margin:0 0 var(--s3)}
.cuenta-atras__reloj{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.cuenta-atras__u{display:flex;flex-direction:column;min-width:64px}
.cuenta-atras__u b{font-family:"Barlow Condensed",sans-serif;font-size:2.2rem;line-height:1;
  color:var(--gold);font-variant-numeric:tabular-nums}
.cuenta-atras__u i{font-style:normal;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:#FFE2B0}
.cuenta-atras__nota{margin:var(--s3) 0 0;font-size:.82rem;color:#FFE2B0!important}

/* Noticias */
.noticia{border-bottom:1px solid var(--border);padding-bottom:var(--s4);margin-bottom:var(--s4)}
.noticia h2{margin-top:0;border:0;padding:0}
.noticia__meta{font-size:.82rem;color:var(--fg-dim)!important}

.nota--importante{border-color:rgba(255,107,53,.45);background:rgba(255,107,53,.08)}
.incidencias{list-style:none;padding:0}
.incidencias .err{color:var(--bad)}
.incidencias .avi{color:var(--warn)}

.tienda__precio{font-family:"Barlow Condensed",sans-serif;font-size:1.3rem;color:var(--fg)}
.veredicto-val{font-family:"Barlow Condensed",sans-serif;font-size:1.2rem;display:block;margin-top:.2rem}
.progreso-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s2)}
.progreso-pct{font-family:"Barlow Condensed",sans-serif;font-size:1.8rem;color:var(--sunset)}
.widget{margin:var(--s4) 0}

.pie{max-width:1400px;margin:0 auto;padding:var(--s5) var(--s4) calc(var(--barra-inferior) + var(--s5));
  border-top:1px solid var(--border);color:var(--fg-dim);font-size:.84rem}
.pie p{color:var(--fg-dim);margin:0 0 var(--s2)}

@media (max-width:1023px){
  .pagina{grid-template-columns:1fr;padding:var(--s4) var(--s3)}
  .lateral-ads{display:none}
  .cabecera-sitio{position:static}
  .nav-principal{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.2rem}
  .nav-principal a{white-space:nowrap}
  .buscador{order:2;flex:1 1 100%;max-width:none}
}
@media (min-width:1024px){ .barra-movil{display:none} }

/* ============================================================================
   PORTADA DE VIÑETAS
   Todo el dibujo es SVG original: siluetas sobre degradados. Sin imágenes
   externas, así que no hay peticiones de red ni material de terceros.
   ============================================================================ */
.collage{position:relative;margin:0 0 var(--s5);border-radius:var(--radius);
  overflow:hidden;background:#0A0610;isolation:isolate}

.collage__rejilla{display:grid;gap:6px;padding:6px;
  grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}

.collage__p{position:relative;margin:0;overflow:hidden;background:#0A0610;
  clip-path:polygon(4% 0,100% 2%,96% 100%,0 97%)}
.collage__p:nth-child(even){clip-path:polygon(0 2%,96% 0,100% 98%,3% 100%)}
.collage__p svg{width:100%;height:100%;display:block;
  transition:transform .5s var(--ease)}
.collage__p:hover svg{transform:scale(1.07)}
.collage__p figcaption{position:absolute;left:10px;bottom:8px;
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:.66rem;color:#FFF3E6;
  text-shadow:0 2px 10px rgba(0,0,0,.9)}

/* Celdas uniformes: una escena por celda, sin deformar ninguna */

/* Tarjeta central superpuesta */
.collage__centro{position:absolute;inset:auto 0 auto 0;top:50%;z-index:2;
  transform:translateY(-50%);margin:0 auto;width:min(80%,340px);
  text-align:center;padding:var(--s4) var(--s3);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(10,6,16,.86),rgba(10,6,16,.94));
  border:1px solid rgba(255,180,61,.35);
  box-shadow:0 24px 70px rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.collage__kicker{margin:0;font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.3em;font-size:.68rem;
  color:var(--gold)!important}
.collage__titulo{margin:.1rem 0 var(--s2);font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;font-size:clamp(2.2rem,7vw,3.6rem);line-height:.95;
  font-weight:700;color:var(--fg)!important;
  background:linear-gradient(92deg,var(--gold),var(--sunset) 45%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent!important}
.collage .cuenta-atras{background:none;padding:0;margin:0 0 var(--s2)}
.collage .cuenta-atras__u b{font-size:1.7rem}

/* Dato rotatorio: se cambia solo cada pocos segundos */
.collage__dato{position:relative;margin:0;min-height:2.6em;
  font-size:.86rem;color:var(--fg-muted)!important;display:grid}
.collage__dato span{grid-area:1/1;opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.collage__dato span.activo{opacity:1;transform:none}

.collage__nota{font-size:.84rem;color:var(--fg-dim)!important;margin:0 0 var(--s5)}

/* ---- Móvil: carrusel deslizante con anclaje ---- */
@media (max-width:767px){
  .collage__rejilla{display:flex;gap:8px;padding:8px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .collage__rejilla::-webkit-scrollbar{display:none}
  .collage__p{flex:0 0 78%;height:190px;scroll-snap-align:center;
    clip-path:polygon(3% 0,100% 1%,97% 100%,0 99%)}
  .collage__p--p2,.collage__p--p4{grid-row:auto;grid-column:auto}
  .collage__centro{position:static;transform:none;width:auto;
    margin:0 8px 8px;backdrop-filter:none}
}

@media (min-width:768px){
  .collage__rejilla{grid-auto-rows:210px}
}

@media (prefers-reduced-motion:reduce){
  .collage__p svg{transition:none}
  .collage__dato span{transition:none}
}

/* --- Portada: hero con el sol detras del titulo --------------------------- */
.portada{min-height:clamp(380px,60vh,560px);display:grid;place-items:center;
  padding:var(--s7) var(--s4);text-align:center;isolation:isolate}
.portada__inner{position:relative;max-width:46ch}
.portada .portada__kicker{display:inline-block;margin:0 0 var(--s3);
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.32em;font-size:clamp(.72rem,1.8vw,.95rem);font-weight:600;
  color:#1B0C14!important;background:var(--gold);
  padding:.42rem 1.1rem .32rem;border-radius:999px;text-shadow:none!important}
.portada .portada__titulo{margin:0!important;max-width:none!important;
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  font-size:clamp(3rem,13vw,7rem);line-height:.92;font-weight:700;
  letter-spacing:-.02em;color:#FFF3E6!important;
  text-shadow:0 4px 30px rgba(0,0,0,.7),0 0 60px rgba(0,0,0,.45)!important}
.portada .portada__sub{font-size:clamp(.95rem,2.1vw,1.15rem);max-width:44ch;margin-inline:auto}
.portada .cuenta-atras{background:none;padding:0;margin:var(--s4) 0 0}
.portada .cuenta-atras__u b{font-size:clamp(1.5rem,4.5vw,2.1rem);
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.portada .cuenta-atras__u i{color:#FFF3E6;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.portada__duo a{min-height:44px;font-size:.92rem}
@media (max-width:560px){ .portada{min-height:auto;padding:var(--s6) var(--s3)} }

/* ============================================================================
   RUMORES Y VOTACIÓN
   El color aquí importa: los rumores NO deben parecer noticias. Borde ámbar
   permanente y ningún verde de "confirmado" en la tarjeta.
   ============================================================================ */
.rumor{background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--warn);border-radius:var(--radius);
  padding:var(--s4);margin-bottom:var(--s4)}
.rumor__cab{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s3);margin-bottom:var(--s2)}
.rumor__cab h2{margin:0;border:0;padding:0;font-size:1.25rem}
.rumor__meta{font-size:.82rem;color:var(--fg-dim)!important;margin:0 0 var(--s2)}
.rumor__meta a{color:var(--fg-muted)}

.votos{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border)}
.votos__pregunta{margin:0 0 var(--s2);font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;
  color:var(--fg-dim)!important}
.votos__botones{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}

.voto{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  background:var(--card-2);border:1px solid var(--border-hi);color:var(--fg);
  padding:.5rem var(--s4);border-radius:999px;min-height:44px;
  font-size:.9rem;font-weight:600;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.voto__n{font-variant-numeric:tabular-nums;color:var(--fg-dim);font-weight:400}
.voto--si:hover{border-color:var(--ok)}
.voto--no:hover{border-color:var(--bad)}
.voto--si.votado{background:rgba(52,211,153,.14);border-color:var(--ok);color:var(--ok)}
.voto--no.votado{background:rgba(251,113,133,.14);border-color:var(--bad);color:var(--bad)}
.voto.votado .voto__n{color:inherit}

.votos__barra{height:7px;background:rgba(251,113,133,.25);border-radius:4px;
  overflow:hidden;border:1px solid var(--border)}
.votos__barra i{display:block;height:100%;background:var(--ok);
  transition:width .35s var(--ease)}
.votos__cifra{margin:.45rem 0 0;font-size:.82rem;color:var(--fg-muted)!important}
.votos__aviso{margin:.45rem 0 0;font-size:.8rem;color:var(--warn)!important}

@media (prefers-reduced-motion:reduce){
  .votos__barra i{transition:none}
}

/* Bloque "en tu pais" de la pagina de horarios */
.tu-hora{background:linear-gradient(135deg,#2A1140,#8B1E6B);border-radius:var(--radius);
  padding:var(--s5) var(--s4);text-align:center;margin:var(--s4) 0 var(--s5)}
.tu-hora__et{margin:0;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.24em;font-size:.72rem;color:var(--gold)!important}
.tu-hora__pais{margin:.2rem 0 var(--s3);font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(1.4rem,4vw,2rem);font-weight:700;color:var(--fg)!important;text-transform:uppercase}
.tu-hora .cuenta-atras{background:none;padding:0;margin:0}
.tu-hora__nota{margin:var(--s3) 0 0;font-size:.76rem;color:#FFE2B0!important}
.hora-local{color:var(--gold)}
.hora-utc{color:var(--fg-dim);font-size:.86rem}
.tienda--inactiva{opacity:.6}
.tienda h3 .chip{margin-left:.5rem;vertical-align:middle}
.tienda__precio--var{font-size:1rem;color:var(--fg-muted)}