/* tema.css — sobrescritura sobre tokens.css + styles.css.
   Cargar DESPUÉS de ambas. No redefine la identidad: la jerarquiza.
   Sin framework, sin build. */

:root {
  --sombra-dura: 4px 4px 0 var(--tinta);
  --sombra-dura-l: 5px 5px 0 var(--tinta);
  --borde: 3px solid var(--tinta);

  /* un acento por producto */
  --acento: var(--terracota);

  /* grados discretos del termómetro */
  --grado-4: var(--terracota);
  --grado-3: var(--coral);
  --grado-2: var(--sol);
  --grado-1: var(--kraft);

  --captura: 4 / 5;
}

body.reto { --acento: var(--azul); }
body.test { --acento: var(--terracota); }

a { color: var(--azul); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- tipografía ---------- */
.titular      { font: 800 62px/0.84 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.veredicto-xl { font: 800 72px/0.82 "Big Shoulders Display", sans-serif; text-transform: uppercase; overflow-wrap: break-word; min-width: 0; }
.seccion      { font: 800 28px/0.95 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.cifra        { font: 800 40px/1 "Big Shoulders Display", sans-serif; color: var(--acento); }
.mano         { font: 700 22px/1.15 Caveat, cursive; }
.etiqueta     { font: 700 11px/1.2 Archivo, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.cuerpo-ui    { font: 500 13px/1.45 Archivo, sans-serif; }

/* ---------- resultado del test ---------- */
.cabecera--test { display: flex; justify-content: space-between; align-items: center;
  padding: var(--e-2) var(--e-3); border-bottom: var(--borde); background: var(--crema-2); }
.logo { font: 800 19px/1 "Big Shoulders Display", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.logo b { color: var(--acento); font-weight: 800; }

.captura { position: relative; padding: var(--e-5) var(--e-4) var(--e-4);
  border-bottom: 3px dashed var(--kraft); }

.veredicto-bloque { position: relative; min-width: 0; }
.veredicto-bloque .cifra-fila { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.veredicto-bloque .cifra-fila p { margin: 0; max-width: 150px; font: 600 12px/1.25 Archivo, sans-serif; }

.sello--veredicto { position: absolute; top: 22px; right: 0; width: 76px; height: 76px;
  display: grid; place-content: center; text-align: center;
  border: 3px solid var(--sello); border-radius: 50%; color: var(--sello);
  background: var(--crema); transform: rotate(-7deg); }
.sello--veredicto b { font: 800 12px/1.05 "Big Shoulders Display", sans-serif;
  letter-spacing: .06em; text-transform: uppercase; }
.sello--veredicto span { font: 700 16px/1 Caveat, cursive; }

/* la palabra que te delató */
.delatora { margin-top: var(--e-4); padding: var(--e-3) var(--e-4) var(--e-4);
  background: var(--tinta); color: var(--crema); box-shadow: 5px 5px 0 var(--acento); }
.delatora .etiqueta { color: var(--kraft); }
.delatora h3 { margin: 2px 0 0; font: 800 54px/0.9 "Big Shoulders Display", sans-serif;
  text-transform: lowercase; color: var(--sol); display: inline; }
.delatora .mano { color: var(--crema); margin-left: var(--e-2); }
.delatora p { margin: var(--e-2) 0 0; font: 500 12px/1.45 Archivo, sans-serif; color: #e8dcc6; }

/* podio */
.podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-top: var(--e-4); }
.podio > * { background: var(--crema-2); border: var(--borde); box-shadow: var(--sombra-dura);
  padding: 9px var(--e-2); }
.podio > :nth-child(1) { transform: rotate(-1.5deg); }
.podio > :nth-child(2) { transform: rotate(1deg); }
.podio > :nth-child(3) { transform: rotate(-0.5deg); }
.podio .puesto { font: 800 15px/1 "Big Shoulders Display", sans-serif; }
.podio :nth-child(1) .puesto { color: var(--terracota); }
.podio :nth-child(2) .puesto { color: var(--coral); }
.podio :nth-child(3) .puesto { color: var(--sol); }
.podio .pais { font: 800 22px/0.95 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.podio .pct { font: 700 11px/1.2 Archivo, sans-serif; color: var(--tinta-suave); }

.captura-pie { display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--e-3); padding-top: var(--e-2); border-top: var(--borde); }
.captura-pie .url { font: 800 17px/1 "Big Shoulders Display", sans-serif;
  text-transform: uppercase; color: var(--azul); }

/* compartir */
.compartir { padding: var(--e-3) var(--e-4); background: var(--crema-2);
  border-bottom: var(--borde); display: flex; flex-direction: column; gap: var(--e-2); }
.compartir .fila { display: flex; gap: var(--e-2); }
.btn--compartir { flex: 1; min-height: 46px; font: 800 20px/1 "Big Shoulders Display", sans-serif;
  text-transform: uppercase; letter-spacing: .03em; background: var(--acento); color: var(--crema);
  border: var(--borde); box-shadow: var(--sombra-dura); cursor: pointer; }
.btn--png { min-height: 46px; padding: 0 var(--e-3); font: 800 20px/1 "Big Shoulders Display", sans-serif;
  text-transform: uppercase; background: var(--crema); color: var(--tinta);
  border: var(--borde); box-shadow: var(--sombra-dura); cursor: pointer; }
.btn--compartir:active, .btn--png:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }

/* ---------- termómetro ---------- */
.termometro { padding: var(--e-4) var(--e-4) var(--e-2); }
.termometro-cab { display: flex; align-items: baseline; justify-content: space-between; }
.termometro-intro { margin: var(--e-1) 0 0; max-width: 300px;
  font: 500 12px/1.4 Archivo, sans-serif; color: var(--tinta-suave); }

.escala { position: relative; margin-top: var(--e-4); }
.escala::before { content: ""; position: absolute; left: 104px; top: 0; bottom: 0;
  width: 3px; background: var(--tinta); }
.escala .fila { display: grid; grid-template-columns: 104px 1fr; align-items: center; height: 26px; }
.escala .nombre { text-align: right; padding-right: var(--e-2); white-space: nowrap; overflow: hidden;
  font: 500 11px/1.2 Archivo, sans-serif; letter-spacing: 0; text-transform: uppercase;
  color: var(--tinta-suave); }
.escala .barra-caja { display: flex; align-items: center; gap: 6px; }
.escala .barra { height: 9px; flex: none; border: 2px solid var(--tinta); border-left-width: 0;
  width: calc(var(--v) * 1.55px); background: var(--grado-1); }
.escala .barra[data-grado="2"] { background: var(--grado-2); }
.escala .barra[data-grado="3"] { background: var(--grado-3); }
.escala .barra[data-grado="4"] { background: var(--grado-4); }
.escala .valor { font: 800 15px/1 "Big Shoulders Display", sans-serif; color: var(--tinta-suave); }
.escala .fila--top .nombre, .escala .fila--top .valor { font-weight: 700; color: var(--tinta); }
.escala .fila--top .valor { font-weight: 800; }
.escala .fila--top .barra { height: 14px; }
.escala .fila--top:first-child .barra { background: var(--acento); }

.escala-pie { display: grid; grid-template-columns: 104px 1fr; margin-top: 6px;
  padding-top: 6px; border-top: var(--borde); }
.escala-pie .frio { text-align: right; padding-right: var(--e-2);
  font: 700 19px/1 Caveat, cursive; color: var(--sello); }
.escala-pie .rango { padding-left: var(--e-2); font: 600 10px/1.2 Archivo, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------- hueco de anuncio ---------- */
.anuncio { margin: var(--e-5) var(--e-4); min-height: 118px; display: grid; place-content: center;
  text-align: center; border: 3px dashed var(--kraft); }
.anuncio > ins { display: block; width: 100%; }

/* ---------- salida ---------- */
.salida { padding: 0 var(--e-4) var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.btn--reto { min-height: 46px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-2); padding: 0 var(--e-3); background: var(--azul); color: var(--crema);
  border: var(--borde); box-shadow: var(--sombra-dura); text-decoration: none; }
.btn--reto b { font: 800 20px/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.tira-kraft { display: flex; align-items: center; gap: var(--e-2);
  background: var(--kraft); border: var(--borde); padding: var(--e-2) var(--e-3); }
.tira-kraft a { margin-left: auto; font: 700 11px/1.2 Archivo, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; }

/* ---------- portada del reto (nivel b) ---------- */
.cabecera--reto { display: flex; justify-content: space-between; align-items: center;
  padding: var(--e-2) var(--e-3); border-bottom: var(--borde); background: var(--azul); }
.cabecera--reto .logo { color: var(--crema); }
.cabecera--reto .logo b { color: var(--sol); }
.cabecera--reto .etiqueta { color: var(--kraft); }

.pila-fotos { position: relative; height: 216px; margin: var(--e-4) var(--e-4) 0; }
.pila-fotos i { position: absolute; border: var(--borde); }
.pila-fotos i:nth-of-type(1) { inset: 16px 34px 8px 6px; background: var(--kraft); transform: rotate(-4deg); }
.pila-fotos i:nth-of-type(2) { inset: 10px 20px 12px 18px; background: var(--crema-2); transform: rotate(3deg); }
.pila-fotos figure { position: absolute; inset: 0 26px 20px 12px; margin: 0; overflow: hidden;
  border: var(--borde); box-shadow: var(--sombra-dura-l); }
.pila-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pila-fotos .contador { position: absolute; right: 6px; bottom: 6px; padding: 3px var(--e-2) 1px;
  background: var(--tinta); color: var(--crema); transform: rotate(-2deg);
  font: 800 15px/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }

.btn--empezar { width: 100%; min-height: 56px; background: var(--acento); color: var(--crema);
  border: var(--borde); box-shadow: var(--sombra-dura-l); cursor: pointer;
  font: 800 28px/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.btn--empezar:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--tinta); }

.liga { margin: var(--e-5) var(--e-4) 0; border: var(--borde); background: var(--crema-2); }
.liga header { display: flex; justify-content: space-between; align-items: center;
  padding: var(--e-2) var(--e-3); background: var(--tinta); border-bottom: var(--borde); }
.liga header .seccion { color: var(--crema); font-size: 20px; }
.liga header .etiqueta { color: var(--kraft); }
.liga .fila { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--e-2);
  padding: 7px var(--e-3); border-bottom: 2px solid var(--kraft); }
.liga .fila--tu { background: var(--sol); }
.liga .fila--tu .pais { font-weight: 700; }
.liga .puesto { font: 800 16px/1 "Big Shoulders Display", sans-serif; color: var(--tinta-suave); }
.liga .pais { font: 600 12px/1.2 Archivo, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.liga .nota { font: 800 18px/1 "Big Shoulders Display", sans-serif; color: var(--azul); }


/* --- añadidos de integración --- */
/* La cabecera del test sustituye a la global solo en esta pantalla. */
[data-vista="resultado"] { display: block; }
.fila-salida { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-2); }
.fila-salida > * { flex: 1; min-width: 8rem; text-align: center; }
/* El podio necesita ser una lista sin viñetas. */
.podio { list-style: none; padding: 0; margin-top: var(--e-4); }
.podio > li { display: flex; flex-direction: column; gap: 2px; }
/* Reserva de altura del anuncio para que no salte el contenido al cargar. */
.anuncio[hidden] { display: none; }
/* La glosa de la palabra delatora usa cursiva para las variantes. */
.delatora p i { font-style: italic; color: var(--kraft); }

/* Encadenado país → región: es la acción de más valor de la pantalla,
   así que lleva el acento del producto y va por encima del reto diario. */
.btn--afinar { min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-2); padding: 0 var(--e-3); background: var(--acento); color: var(--crema);
  border: var(--borde); box-shadow: var(--sombra-dura-l); text-decoration: none; }
.btn--afinar b { font: 800 22px/1 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.btn--afinar:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.btn--afinar[hidden] { display: none; }