/* Buenos Días — sistema de diseño para gente mayor, mobile first.
 *
 * Reglas que mandan en este archivo:
 *  1. El cuerpo va en 18 px y ninguna palabra con significado baja de 16 px.
 *     Solo el pie puede ir en 14 px. No se toca `html{font-size}`: la escala
 *     entera está en rem y mover la raíz la rompería.
 *  2. Nada que se toque queda bajo 44x44 px y lo principal va en 56.
 *  3. Todo lo interactivo tiene hover, foco visible, active y disabled.
 *  4. Los colores de texto y de acción NO cambian con la hora: si cambiaran,
 *     el contraste se movería seis veces al día. El momento del día mueve solo
 *     el ambiente (la luz del fondo y el sol de arriba).
 *  5. Los estados se marcan con clases (`.elegido`, `.votado`, `.sonando`),
 *     nunca con `:has()`, que el WebView viejo de Android no pinta.
 *
 * Contraste medido sobre esta paleta (WCAG 2.1): texto/fondo 17.62,
 * texto-2/fondo 13.23, texto-3/fondo 8.54, ámbar/fondo 11.35,
 * tinta sobre ámbar 10.63, tinta clara sobre rojo 7.94, verde/fondo 12.44.
 */

:root{
  /* --- superficies --- */
  --fondo:#14100C;
  --fondo-2:#1F1812;
  --panel:#241C15;
  --panel-2:#2E241B;
  --linea:#3D322A;
  /* Borde de controles: 3.25:1 contra --panel, el minimo que pide WCAG 1.4.11
   * para el limite de un campo. --linea (1.52:1) queda solo para separadores
   * decorativos, que no son un control. */
  --linea-fuerte:#7D6A55;

  /* --- texto --- */
  --txt:#FCF6ED;
  --txt-2:#E2D6C7;
  --txt-3:#B9ACA0;

  /* --- acción --- */
  --ambar:#FFBB6E;
  --ambar-2:#F2A047;
  --ambar-rgb:255,187,110;
  --tinta:#241505;
  --foco:#FFE0B8;

  /* --- estado (los gemelos -rgb son para los fondos translúcidos) --- */
  --verde:#93E3A8;
  --verde-rgb:147,227,168;
  --rojo:#FFB4A8;
  --rojo-rgb:255,180,168;
  --rojo-fondo:#7F2A1E;
  --rojo-tinta:#FFE8E2;

  /* --- tipografía: la única escala que existe --- */
  --t-1:.875rem;   /* 14 px: solo pie de página */
  --t-2:1rem;      /* 16 px: ayudas, metadatos, piezas chicas */
  --t-3:1.125rem;  /* 18 px: cuerpo, campos, botones */
  --t-4:1.375rem;  /* 22 px: título de tarjeta, texto del play */
  --t-5:1.75rem;   /* 28 px: títulos de sección */
  --t-6:2.125rem;  /* 34 px: números grandes, iconos */
  --t-7:2.75rem;   /* 44 px: precio, titular máximo */

  /* --- espaciado sobre retícula de 4 px --- */
  --e-1:4px;
  --e-2:8px;
  --e-3:12px;
  --e-4:16px;
  --e-5:20px;
  --e-6:24px;
  --e-7:32px;
  --e-8:40px;
  --e-9:56px;
  --e-10:72px;

  /* --- radios --- */
  --r-1:10px;
  --r-2:14px;
  --r-3:18px;
  --r-4:24px;
  --r-5:999px;

  /* --- ancho de lectura --- */
  --max:34rem;

  /* --- ambiente: lo único que se mueve con la hora (amanecer por defecto) --- */
  --luz:255,187,110;
  --luz-2:242,160,71;
  --sol-a:255,224,184;
  --sol-b:255,187,110;
  --sol-c:242,160,71;
  --sol-top:40px;
  --sol-tam:220px;

  /* Valores fijos que los bloques de momento vuelven a declarar. Existen
     separados para que la paleta de cada momento se pueda escribir completa
     sin repetir el color a mano en seis lugares: si alguien cambia el tema,
     cambia aquí y en ningún otro lado. */
  --base-fondo:#14100C;
  --base-txt:#FCF6ED;
  --base-ambar-rgb:255,187,110;

  color-scheme:dark;
  accent-color:var(--ambar);
}

html{
  background:var(--fondo);
}

/* --- los seis momentos del día -------------------------------------------
 * Solo mueven el ambiente: la luz del fondo y el sol de arriba. El fondo, el
 * texto y el ámbar quedan clavados para que el contraste no baile. Cada bloque
 * declara su paleta entera a propósito, repitiendo esos fijos con `var()`. */

html[data-momento="madrugada"]{
  --fondo:var(--base-fondo);
  --txt:var(--base-txt);
  --ambar-rgb:var(--base-ambar-rgb);
  --luz:130,160,255;
  --luz-2:170,130,255;
  --sol-a:200,220,255;
  --sol-b:130,160,255;
  --sol-c:90,110,190;
  --sol-top:130px;
  --sol-tam:150px;
}

html[data-momento="amanecer"]{
  --fondo:var(--base-fondo);
  --txt:var(--base-txt);
  --ambar-rgb:var(--base-ambar-rgb);
  --luz:255,187,110;
  --luz-2:242,160,71;
  --sol-a:255,224,184;
  --sol-b:255,187,110;
  --sol-c:242,160,71;
  --sol-top:40px;
  --sol-tam:220px;
}

html[data-momento="dia"]{
  --fondo:var(--base-fondo);
  --txt:var(--base-txt);
  --ambar-rgb:var(--base-ambar-rgb);
  --luz:255,214,120;
  --luz-2:255,170,110;
  --sol-a:255,240,190;
  --sol-b:255,210,120;
  --sol-c:255,180,90;
  --sol-top:-130px;
  --sol-tam:300px;
}

html[data-momento="tarde"]{
  --fondo:var(--base-fondo);
  --txt:var(--base-txt);
  --ambar-rgb:var(--base-ambar-rgb);
  --luz:255,160,80;
  --luz-2:255,120,90;
  --sol-a:255,190,120;
  --sol-b:255,150,80;
  --sol-c:255,120,60;
  --sol-top:70px;
  --sol-tam:250px;
}

html[data-momento="atardecer"]{
  --fondo:var(--base-fondo);
  --txt:var(--base-txt);
  --ambar-rgb:var(--base-ambar-rgb);
  --luz:255,140,110;
  --luz-2:230,110,170;
  --sol-a:255,170,140;
  --sol-b:255,120,110;
  --sol-c:200,90,140;
  --sol-top:160px;
  --sol-tam:200px;
}

html[data-momento="noche"]{
  --fondo:var(--base-fondo);
  --txt:var(--base-txt);
  --ambar-rgb:var(--base-ambar-rgb);
  --luz:120,140,220;
  --luz-2:160,120,220;
  --sol-a:210,220,255;
  --sol-b:150,160,230;
  --sol-c:100,110,190;
  --sol-top:100px;
  --sol-tam:170px;
}

/* --- base ---------------------------------------------------------------- */

*{box-sizing:border-box}

html,body{margin:0;padding:0}

/* Saltar al contenido: invisible hasta que alguien llega con el tabulador.
   Sin esto, quien navega con teclado recorre medio pie en cada pagina. */
.salto-contenido{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:var(--e-3) var(--e-4);
  border-radius:0 0 var(--r-2) 0;
  background:var(--ambar);
  color:var(--tinta);
  font-weight:600;
  font-size:var(--t-3);
}
.salto-contenido:focus{left:0}

body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-3);
  line-height:1.65;
  color:var(--txt);
  background:var(--fondo);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

/* El resplandor del fondo va en una capa fija, no en `background-attachment:
   fixed`: eso último repintaba dos degradados en cada scroll y en un Android
   medio se sentía como arena. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -20%, rgba(var(--luz),.30) 0%, rgba(var(--luz),.06) 45%, transparent 70%),
    radial-gradient(80% 50% at 110% 20%, rgba(var(--luz-2),.16) 0%, transparent 60%),
    linear-gradient(180deg,var(--fondo-2) 0%,var(--fondo) 45%);
  transition:background .8s ease;
}

img{max-width:100%}

a{
  color:var(--ambar);
  text-decoration:underline;
  text-underline-offset:.18em;
}

/* Los enlaces que viven dentro de una frase no pueden medir 44 px de alto sin
   romper el párrafo: se les agranda la zona táctil con relleno vertical, que no
   mueve el texto de lugar. */
p a,
li a,
.aviso a,
.ayuda a,
.meta-linea a,
.nota a,
.bloque p a,
.admin-comentario a,
.faq p a,
.plan p a,
.chip a,
.p-marca a{
  display:inline-block;
  padding-block:.65em;
}

.sol{
  position:fixed;
  top:var(--sol-top);
  left:50%;
  transform:translateX(-50%);
  width:var(--sol-tam);
  height:var(--sol-tam);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(var(--sol-a),.55) 0%, rgba(var(--sol-b),.16) 45%, transparent 70%);
  filter:blur(2px);
  z-index:0;
  transition:top .8s ease, width .8s ease, height .8s ease;
}

.sol::after{
  content:"";
  position:absolute;
  inset:calc(var(--sol-tam) / 3.75);
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--sol-a),.9) 0%, rgba(var(--sol-b),.55) 60%, rgba(var(--sol-c),0) 100%);
}

.lienzo{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
  padding:var(--e-10) var(--e-4) var(--e-7);
}

/* --- tipografía ---------------------------------------------------------- */

h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
  font-size:clamp(var(--t-6),8vw,var(--t-7));
  line-height:1.12;
  margin:var(--e-1) 0 var(--e-3);
  letter-spacing:-.01em;
  text-wrap:balance;
}

h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:var(--t-5);
  font-weight:600;
  line-height:1.25;
  margin:0 0 var(--e-3);
}

h3{
  font-size:var(--t-4);
  font-weight:700;
  line-height:1.3;
  margin:var(--e-5) 0 var(--e-2);
}

h2.separado{margin-top:var(--e-7)}

.kicker{
  display:inline-block;
  margin:0 0 var(--e-2);
  font-size:var(--t-2);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ambar);
  font-weight:700;
}

.bajada{
  color:var(--txt-2);
  font-size:var(--t-3);
  line-height:1.65;
  margin:0 0 var(--e-6);
  max-width:46ch;
}

.ayuda{
  color:var(--txt-3);
  font-size:var(--t-2);
  line-height:1.6;
  margin:var(--e-2) 0 var(--e-4);
}

.nota{
  color:var(--txt-3);
  font-size:var(--t-2);
  line-height:1.6;
  margin:var(--e-2) 0 0;
}

/* --- botones ------------------------------------------------------------- */

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--e-2);
  min-height:56px;
  padding:0 var(--e-6);
  border-radius:var(--r-2);
  font-family:inherit;
  font-size:var(--t-3);
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  color:var(--tinta);
  background:var(--ambar);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease,
             color .15s ease, transform .1s ease;
}

.boton:hover{background:var(--ambar-2);color:var(--tinta)}
.boton:active{transform:translateY(1px)}
.boton:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.boton:disabled,
.boton[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.boton:disabled:active{transform:none}

.boton.grande{width:100%}

.boton.chico{
  min-height:44px;
  padding:0 var(--e-4);
  font-size:var(--t-2);
}

/* `.secundario` es el nombre nuevo y `.fantasma` el que ya usan las plantillas:
   los dos son el mismo botón con borde. */
.boton.secundario,
.boton.fantasma{
  background:transparent;
  border-color:var(--linea-fuerte);
  color:var(--txt);
}

.boton.secundario:hover,
.boton.fantasma:hover{
  background:rgba(var(--ambar-rgb),.10);
  border-color:var(--ambar);
  color:var(--txt);
}

.boton.peligro,
.boton.peligro-boton{
  background:var(--rojo-fondo);
  border-color:transparent;
  color:var(--rojo-tinta);
}

.boton.peligro:hover,
.boton.peligro-boton:hover{
  background:var(--rojo-fondo);
  border-color:var(--rojo);
  color:var(--rojo-tinta);
}

/* --- el play grande: la acción de la pantalla ---------------------------- */

.play-caja{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--e-2);
  margin:var(--e-6) 0 var(--e-5);
}

.play-grande{
  width:108px;
  height:108px;
  border-radius:var(--r-5);
  border:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  background:var(--ambar);
  color:var(--tinta);
  box-shadow:0 10px 30px rgba(var(--ambar-rgb),.30), inset 0 -3px 10px rgba(0,0,0,.22);
  transition:background-color .15s ease, transform .1s ease;
}

.play-grande:hover{background:var(--ambar-2)}
.play-grande:active{transform:translateY(1px)}
.play-grande:focus-visible{outline:3px solid var(--foco);outline-offset:4px}
.play-grande:disabled{opacity:.5;cursor:not-allowed}

.play-grande .icono{
  font-size:var(--t-6);
  line-height:1;
  margin-left:.1em;
  color:var(--tinta);
}

.play-texto{
  margin:0;
  font-size:var(--t-4);
  font-weight:700;
  line-height:1.3;
  text-align:center;
}

.play-estado{
  margin:0;
  color:var(--txt-2);
  font-size:var(--t-2);
  text-align:center;
  min-height:1.5em;
  max-width:30ch;
}

/* --- campos -------------------------------------------------------------- */

.campo{
  width:100%;
  min-height:56px;
  padding:var(--e-3) var(--e-4);
  border-radius:var(--r-2);
  background:var(--panel);
  color:var(--txt);
  border:1.5px solid var(--linea-fuerte);
  font-family:inherit;
  font-size:var(--t-3);
  line-height:1.4;
}

.campo::placeholder{color:var(--txt-3)}

.campo:hover{border-color:var(--ambar-2)}

.campo:focus{
  outline:3px solid var(--foco);
  outline-offset:1px;
  border-color:var(--ambar);
}

.campo:disabled{opacity:.5;cursor:not-allowed}

.campo[aria-invalid="true"]{
  border:2px solid var(--rojo);
}

.campo[aria-invalid="true"]:focus{
  outline-color:var(--rojo);
}

textarea.campo{
  min-height:120px;
  resize:vertical;
  line-height:1.6;
}

select.campo{
  background-color:var(--panel);
  color:var(--txt);
}

select.campo option{
  background:var(--panel-2);
  color:var(--txt);
}

.etiqueta{
  display:block;
  margin:var(--e-5) 0 var(--e-2);
  font-size:var(--t-2);
  color:var(--txt);
  font-weight:700;
}

/* --- chips ---------------------------------------------------------------
 * Sirven como etiqueta con casilla adentro (`label.chip`) y como botón suelto
 * (`button.chip`). El estado marcado se ve de dos maneras, para que funcione
 * con las plantillas de hoy y con la clase `.elegido` del futuro: la casilla
 * marcada pinta el `span` y `.elegido` pinta el chip completo. */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  margin:var(--e-2) 0 var(--e-4);
}

.chips.sueltos{margin-top:var(--e-6)}
.chips.rapidas{margin-top:var(--e-4)}

.chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--e-2);
  min-height:48px;
  padding:var(--e-2) var(--e-4);
  border-radius:var(--r-5);
  background:var(--panel-2);
  border:1.5px solid var(--linea);
  color:var(--txt);
  font-family:inherit;
  font-size:var(--t-3);
  font-weight:600;
  line-height:1.35;
  text-align:center;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}

.chip:hover{
  background:rgba(var(--ambar-rgb),.10);
  border-color:var(--linea-fuerte);
}

.chip:active{transform:translateY(1px)}

.chip:focus-within{
  outline:3px solid var(--foco);
  outline-offset:3px;
}

.chip input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none;
}

.chip input:checked + span{
  margin:calc(var(--e-2) * -1) calc(var(--e-4) * -1);
  padding:var(--e-2) var(--e-4);
  border-radius:var(--r-5);
  background:var(--ambar);
  color:var(--tinta);
  font-weight:700;
}

.chip.elegido{
  background:var(--ambar);
  border-color:transparent;
  color:var(--tinta);
  font-weight:700;
}

.chip.elegido::after{
  content:"✓";
  flex:0 0 auto;
  margin-left:var(--e-1);
  font-weight:800;
}

.chip.elegido span,
.chip.elegido a,
.chip input:checked + span a{
  color:var(--tinta);
}

.chip.quieto{
  background:var(--panel);
  border-color:var(--linea);
  cursor:default;
  font-size:var(--t-2);
  font-weight:600;
}

.chip.quieto:hover{
  background:var(--panel);
  border-color:var(--linea);
}

.chip.quieto:active{transform:none}
.chip.quieto b{color:var(--ambar);font-weight:800}

.chip.boton-chip{
  font-size:var(--t-2);
  font-weight:700;
}

.chip.consentimiento{
  width:100%;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  padding:var(--e-4);
  border-radius:var(--r-2);
}

.chip.consentimiento > span{
  white-space:normal;
  line-height:1.85;
}

/* --- avisos -------------------------------------------------------------- */

.aviso{
  margin:var(--e-5) 0;
  padding:var(--e-4) var(--e-5);
  border-radius:var(--r-2);
  background:var(--panel-2);
  border:1px solid var(--linea);
  border-left:4px solid var(--ambar);
  font-size:var(--t-3);
  line-height:1.6;
  color:var(--txt);
}

.aviso.bueno{border-left-color:var(--verde)}

.aviso.malo{
  background:var(--rojo-fondo);
  border-color:rgba(255,255,255,.14);
  border-left-color:var(--rojo-tinta);
  color:var(--rojo-tinta);
}

.aviso.malo a,
.aviso.malo b{color:var(--rojo-tinta)}

.aviso ul{margin:var(--e-2) 0 0;padding-left:var(--e-5)}
.aviso li{margin:var(--e-1) 0}
.aviso a{color:var(--ambar)}

/* --- tarjetas de canción ------------------------------------------------- */

.lista-canciones{
  display:grid;
  gap:var(--e-4);
  margin:var(--e-6) 0;
}

.tarjeta{
  position:relative;
  padding:var(--e-5);
  border-radius:var(--r-3);
  background:var(--panel);
  border:1.5px solid var(--linea);
}

.t-cabeza{
  display:flex;
  align-items:center;
  gap:var(--e-3);
  margin-bottom:var(--e-3);
}

.t-num{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 auto;
  border-radius:var(--r-5);
  background:var(--ambar);
  color:var(--tinta);
  font-size:var(--t-2);
  font-weight:800;
}

.t-rol{
  font-size:var(--t-2);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--txt-3);
  font-weight:700;
}

.t-portada{
  margin-left:auto;
  width:46px;
  height:46px;
  border-radius:var(--r-1);
  object-fit:cover;
  border:1px solid var(--linea);
}

.t-titulo{
  font-size:var(--t-4);
  margin:var(--e-1) 0 var(--e-1);
  line-height:1.25;
}

.t-artista{
  color:var(--ambar);
  font-weight:700;
  font-size:var(--t-3);
  margin:0;
}

.t-meta{
  color:var(--txt-3);
  font-size:var(--t-2);
  margin:var(--e-1) 0 var(--e-4);
  letter-spacing:.02em;
}

.t-porque{
  margin:0 0 var(--e-4);
  padding-left:var(--e-3);
  border-left:3px solid var(--ambar);
  color:var(--txt-2);
  font-size:var(--t-3);
  font-style:italic;
  line-height:1.6;
}

.t-acciones{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  align-items:center;
}

.t-video{margin-top:var(--e-3)}
.t-video:empty{display:none}

.t-video iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:var(--r-2);
}

/* --- votos: el pulgar no va solo, lleva su palabra al lado ---------------- */

.voto{
  display:inline-flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  margin-left:auto;
}

.voto-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--e-2);
  min-width:56px;
  min-height:56px;
  padding:0 var(--e-3);
  border-radius:var(--r-2);
  background:var(--panel-2);
  border:1.5px solid var(--linea);
  color:var(--txt);
  font-family:inherit;
  font-size:var(--t-2);
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* La etiqueta visible sale del propio botón: el valor del campo dice cuál es.
   Así el pulgar nunca queda solo y no hay que tocar la plantilla. */
.voto-btn[value="1"]::after{content:"Me gustó"}
.voto-btn[value="-1"]::after{content:"No es mi estilo"}

.voto-btn:hover{
  background:rgba(var(--ambar-rgb),.12);
  border-color:var(--linea-fuerte);
}

.voto-btn:active{transform:translateY(1px)}
.voto-btn:focus-visible{outline:3px solid var(--foco);outline-offset:3px}

.voto-btn.votado{
  background:var(--ambar);
  border-color:transparent;
  color:var(--tinta);
  font-weight:700;
}

.voto-btn.votado:hover{
  background:var(--ambar-2);
  border-color:transparent;
}

.voto-btn:disabled{opacity:.5;cursor:not-allowed}

/* --- página del día ------------------------------------------------------ */

.acciones-dia{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  margin:var(--e-6) 0 var(--e-3);
}

.acciones-dia .boton{flex:1 1 45%}

.proximo{
  color:var(--txt-3);
  font-size:var(--t-2);
  line-height:1.6;
  margin:var(--e-2) 0 0;
}

/* --- el reproductor de las tres ----------------------------------------- */

.barra{
  height:8px;
  border-radius:var(--r-5);
  background:var(--panel-2);
  overflow:hidden;
  margin:0 0 var(--e-2);
}

.barra-relleno{
  height:100%;
  width:0;
  border-radius:var(--r-5);
  background:linear-gradient(90deg,var(--ambar),var(--ambar-2));
  transition:width .25s linear;
}

.reloj{
  margin:0 0 var(--e-5);
  text-align:right;
  font-size:var(--t-2);
  color:var(--txt-3);
  font-variant-numeric:tabular-nums;
}

.pistas{
  list-style:none;
  margin:0 0 var(--e-4);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--e-2);
}

/* Cada pista es un botón de verdad: se toca entera y tiene que verse así. */
li.pista,
.pista{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--e-2);
  min-height:var(--e-9);
  padding:var(--e-3) var(--e-4);
  border-radius:var(--r-2);
  background:var(--panel);
  border:1.5px solid var(--linea);
  list-style:none;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}

.pista:hover{
  background:var(--panel-2);
  border-color:var(--linea-fuerte);
}

.pista:focus-visible,
.pista:focus-within{
  outline:3px solid var(--foco);
  outline-offset:3px;
}

.pista.sonando{
  border-color:var(--ambar);
  background:rgba(var(--ambar-rgb),.12);
}

.pista.sin-audio{opacity:.9}

.pista-fila{
  display:flex;
  align-items:center;
  gap:var(--e-3);
}

.p-num{
  width:1.75rem;
  flex:0 0 auto;
  text-align:center;
  color:var(--txt-3);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-2);
  font-weight:700;
}

.pista.sonando .p-num{color:var(--ambar)}

.p-info{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}

.p-info b{
  font-weight:700;
  font-size:var(--t-3);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.p-info span{
  color:var(--txt-3);
  font-size:var(--t-2);
  line-height:1.4;
}

.p-marca{
  font-size:var(--t-2);
  color:var(--txt-3);
  white-space:nowrap;
  flex:0 0 auto;
}

.p-listo{color:var(--verde);font-weight:700}
.p-marca a{color:var(--ambar)}

.voto-pista{
  align-self:flex-start;
  margin-left:0;
  padding-left:calc(1.75rem + var(--e-3));
}

.estado-votos{
  min-height:1.2em;
  margin:var(--e-2) 0 var(--e-4);
  font-size:var(--t-2);
  color:var(--verde);
}

/* --- registro por pasos -------------------------------------------------- */

.registro .barra-pasos{
  height:8px;
  border-radius:var(--r-5);
  background:var(--panel-2);
  overflow:hidden;
  margin:var(--e-2) 0 var(--e-2);
}

.barra-pasos i{
  display:block;
  height:100%;
  width:12%;
  background:linear-gradient(90deg,var(--ambar),var(--ambar-2));
  transition:width .25s ease;
}

.paso-num{
  font-size:var(--t-2);
  color:var(--txt-3);
  margin:0 0 var(--e-5);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
}

.pasos{min-height:16rem}
.js .paso{display:none}
.js .paso.activo{display:block;animation:entra .22s ease}

/* Sin JavaScript el formulario se manda igual: los pasos quedan todos a la
   vista y el botón de enviar, que viene oculto, aparece. */
.nojs .nav-pasos #atras,
.nojs .nav-pasos #siguiente{display:none}
.nojs .nav-pasos #enviar{display:inline-flex}

@keyframes entra{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.nav-pasos{
  display:flex;
  gap:var(--e-3);
  margin-top:var(--e-6);
}

.nav-pasos .boton,
.nav-pasos #enviar{flex:1}

.repaso{
  display:grid;
  gap:0;
  margin:var(--e-2) 0 var(--e-4);
  border:1.5px solid var(--linea);
  border-radius:var(--r-2);
  overflow:hidden;
}

.repaso .fila{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--e-4);
  padding:var(--e-3) var(--e-4);
  font-size:var(--t-2);
  line-height:1.5;
  background:var(--panel);
}

.repaso .fila:nth-child(even){background:var(--panel-2)}
.repaso .fila span{color:var(--txt-3)}
.repaso .fila b{text-align:right;font-weight:700;color:var(--txt)}

/* --- listo / confirmar --------------------------------------------------- */

.enlace-caja{
  display:flex;
  align-items:center;
  gap:var(--e-3);
  flex-wrap:wrap;
  padding:var(--e-3) var(--e-4);
  border-radius:var(--r-2);
  background:var(--panel);
  border:1.5px solid var(--linea);
  margin:var(--e-5) 0;
}

.enlace-caja code{
  flex:1 1 100%;
  font-size:var(--t-2);
  color:var(--ambar);
  overflow-wrap:anywhere;
  word-break:break-all;
}

.enlace-caja .boton{flex:0 0 auto}

.acciones-listo{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  margin-top:var(--e-5);
}

.acciones-listo .boton{flex:1 1 40%}

.confirmar{
  display:grid;
  gap:var(--e-3);
  margin-top:var(--e-6);
}

/* --- panel de la persona ------------------------------------------------- */

.bloque{
  padding:var(--e-5);
  border-radius:var(--r-3);
  margin:var(--e-6) 0;
  background:var(--panel);
  border:1.5px solid var(--linea);
}

.bloque h2{margin-bottom:var(--e-4)}

.bloque.peligro{
  border-color:rgba(var(--rojo-rgb),.45);
  background:rgba(var(--rojo-rgb),.07);
}

.meta-linea{
  font-size:var(--t-3);
  color:var(--txt-2);
  line-height:1.85;
  margin:0;
}

.meta-linea b{color:var(--txt)}

.acciones-panel{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  margin-top:var(--e-6);
}

.acciones-panel .boton{flex:1 1 45%}

.historial{
  width:100%;
  border-collapse:collapse;
  font-size:var(--t-2);
  line-height:1.5;
}

.historial th{
  text-align:left;
  color:var(--txt-3);
  font-size:var(--t-2);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:var(--e-1) var(--e-1) var(--e-2);
}

.historial td{
  padding:var(--e-2) var(--e-1);
  border-top:1px solid var(--linea);
  vertical-align:top;
  overflow-wrap:anywhere;
}

.historial td:first-child{
  color:var(--txt-3);
  white-space:nowrap;
}

/* --- administración ------------------------------------------------------ */

.tabla-scroll{
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}

.admin-lista{
  display:flex;
  flex-direction:column;
  gap:var(--e-3);
  margin:var(--e-2) 0 var(--e-4);
}

.admin-fila{
  border:1.5px solid var(--linea);
  border-radius:var(--r-2);
  padding:var(--e-3) var(--e-4);
  background:var(--panel-2);
}

.admin-titulo{
  margin:0;
  font-size:var(--t-3);
  line-height:1.4;
}

.admin-meta{
  display:block;
  color:var(--txt-3);
  font-size:var(--t-2);
  line-height:1.5;
  margin:var(--e-1) 0;
  overflow-wrap:anywhere;
}

.admin-acciones{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  margin-top:var(--e-3);
}

.admin-acciones form{margin:0}
.admin-acciones .boton{width:auto;white-space:nowrap}

.regalo-linea{
  display:flex;
  gap:var(--e-3);
  flex-wrap:wrap;
}

.regalo-linea > div{flex:1 1 140px}

.admin-comentario{
  border-left:4px solid rgba(var(--ambar-rgb),.7);
  padding:var(--e-3) var(--e-4);
  margin:var(--e-3) 0;
  background:var(--panel-2);
  border-radius:var(--r-1);
  font-size:var(--t-3);
  line-height:1.6;
}

.admin-comentario.leido{opacity:.62}
.admin-comentario p{margin:var(--e-1) 0}
.admin-comentario form{margin:var(--e-2) 0 0}

/* --- landing de venta ---------------------------------------------------- */

.portada{margin-bottom:var(--e-6)}

.promesas{
  list-style:none;
  margin:0 0 var(--e-6);
  padding:0;
  display:grid;
  gap:var(--e-2);
}

.promesas li{
  position:relative;
  padding-left:var(--e-7);
  font-size:var(--t-3);
  line-height:1.55;
  color:var(--txt-2);
}

.promesas li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:var(--e-6);
  text-align:center;
  color:var(--verde);
  font-weight:800;
}

.promesas b{color:var(--txt)}

/* Bloque de precio: el número grande manda y la letra chica no se esconde. */
.plan{
  margin:var(--e-6) 0;
  padding:var(--e-6);
  border-radius:var(--r-3);
  background:var(--panel);
  border:1.5px solid var(--ambar);
}

.plan-precio{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--e-2);
  margin:0 0 var(--e-3);
  font-size:var(--t-7);
  font-weight:800;
  line-height:1.1;
  color:var(--ambar);
  font-variant-numeric:tabular-nums;
}

.plan-precio small,
.plan-precio span,
.plan-periodo{
  font-size:var(--t-2);
  font-weight:600;
  color:var(--txt-2);
}

.plan-nota{
  margin:0;
  font-size:var(--t-2);
  line-height:1.6;
  color:var(--txt-2);
}

.plan-nota + .plan-nota{margin-top:var(--e-3)}
.plan .boton{margin:var(--e-4) 0}

/* Testimonios de la landing: planos, sin sombras y sin letra chica. */
.testimonio{
  margin:var(--e-5) 0;
  padding:var(--e-5);
  border-radius:var(--r-2);
  background:var(--panel);
  border:1px solid var(--linea);
  border-left:4px solid var(--ambar);
  font-size:var(--t-3);
  line-height:1.6;
  color:var(--txt-2);
}

.testimonio p{margin:0}
.testimonio p + p{margin-top:var(--e-2)}

.testimonio cite,
.testimonio footer{
  display:block;
  margin-top:var(--e-3);
  font-size:var(--t-2);
  font-style:normal;
  color:var(--txt-3);
}

/* Preguntas frecuentes. Se puede escribir de dos maneras y las dos funcionan:
 * un `details` que lleva la clase (lo que usa la portada hoy) o una caja `.faq`
 * que envuelve varios `details`. El resumen cerrado ocupa 56 px de alto. */

.faq{
  display:grid;
  gap:var(--e-2);
  margin:var(--e-6) 0;
}

.faq details,
details.faq{
  background:var(--panel);
  border:1.5px solid var(--linea);
  border-radius:var(--r-2);
  overflow:hidden;
  margin:0 0 var(--e-2);
}

details.faq{display:block}

.faq summary,
details.faq summary{
  display:flex;
  align-items:center;
  gap:var(--e-3);
  min-height:var(--e-9);
  padding:var(--e-3) var(--e-4);
  font-size:var(--t-3);
  font-weight:700;
  line-height:1.4;
  color:var(--txt);
  cursor:pointer;
  list-style:none;
}

.faq summary::-webkit-details-marker,
details.faq summary::-webkit-details-marker{display:none}

.faq summary::after,
details.faq summary::after{
  content:"+";
  margin-left:auto;
  flex:0 0 auto;
  color:var(--ambar);
  font-size:var(--t-4);
  font-weight:800;
  line-height:1;
}

.faq details[open] summary::after,
details.faq[open] summary::after{content:"–"}

.faq summary:hover,
details.faq summary:hover{background:rgba(var(--ambar-rgb),.08)}

.faq details > :not(summary),
details.faq > :not(summary){
  display:block;
  margin:0;
  padding:0 var(--e-4) var(--e-4);
  font-size:var(--t-3);
  line-height:1.65;
  color:var(--txt-2);
}

/* --- secciones con nombre ------------------------------------------------
 * Cada pantalla marca su sección con una clase (`panel`, `dia`, `listo`,
 * `registro`, `portada`, `reproductor`). Siguen existiendo como gancho porque
 * el JavaScript y las pruebas las buscan por nombre; no necesitan pintura
 * propia, pero quedan declaradas para que ninguna quede huérfana. */

.dia,
.listo,
.panel,
.registro,
.portada,
.reproductor{
  display:block;
}

/* --- centrado y códigos -------------------------------------------------- */

.centrado{
  text-align:center;
  padding:var(--e-7) 0;
}

.centrado .bajada{
  margin-left:auto;
  margin-right:auto;
}

.codigo{
  display:inline-block;
  padding:var(--e-3) var(--e-4);
  border-radius:var(--r-1);
  background:var(--panel-2);
  border:1px solid var(--linea);
  font-size:var(--t-2);
  color:var(--ambar);
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

/* --- pie ----------------------------------------------------------------- */

.pie{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
  padding:var(--e-5) var(--e-4) var(--e-8);
  display:grid;
  gap:var(--e-1);
  color:var(--txt-3);
  font-size:var(--t-1);
  line-height:1.5;
  border-top:1px solid var(--linea);
}

.pie-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 var(--e-1);
  font-size:var(--t-1);
  color:var(--txt-3);
}

/* Los enlaces del pie son sueltos, no van dentro de una frase: se les da el
   alto táctil completo sin cambiar el tamaño de la letra. */
.pie-legal a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 var(--e-1);
  color:var(--txt-3);
  text-decoration:none;
}

.pie-legal a:hover,
.pie-legal a:focus-visible{
  color:var(--txt);
  text-decoration:underline;
}

/* Firma del desarrollador: discreta, pero con zona táctil de botón. */
.pie-marca{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:var(--e-2);
  line-height:0;
  opacity:.72;
  transition:opacity .15s ease;
}

.pie-marca:hover,
.pie-marca:focus-visible{opacity:1}

.pie-marca img{
  display:block;
  height:14px;
  width:auto;
  max-width:100%;
}

/* --- foco visible -------------------------------------------------------- */

:focus-visible{
  outline:3px solid var(--foco);
  outline-offset:3px;
}

.pie-legal a:focus-visible,
.pie-marca:focus-visible,
.faq summary:focus-visible{
  outline:3px solid var(--foco);
  outline-offset:2px;
}

/* --- movimiento reducido ------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .boton:active,
  .chip:active,
  .pista:active,
  .voto-btn:active,
  .play-grande:active{transform:none}
}

/* --- pantallas grandes --------------------------------------------------- */

@media (min-width:560px){
  .lienzo{padding-top:var(--e-10)}
  .pasos{min-height:14rem}
  .play-grande{width:120px;height:120px}
}

/* --- papel --------------------------------------------------------------- */

@media print{
  body{background:#fff;color:#000}
  body::before{display:none}
  .sol,.pie,.t-acciones,.acciones-dia,.nav-pasos,.proximo,
  .play-caja,.barra,.reloj,.voto-btn{display:none!important}
  .lienzo{max-width:none;padding:0}
  .tarjeta,.bloque,.admin-fila{
    border:1px solid #bbb;
    background:#fff;
    break-inside:avoid;
  }
  h1,h2,h3{color:#000}
  .t-artista,.kicker,.p-listo{color:#000}
  .t-porque{color:#333}
  .aviso{border-color:#bbb;background:#fff;color:#000}
  .bajada,.ayuda,.nota,.meta-linea,.t-meta,.t-rol,
  .admin-meta,.pie-legal,.p-info span,.p-marca{color:#333}
}