/* =========================================================================
   base — Tokens, reinicio y tipografía de display.

   Tramo 1 de 14 de la hoja que antes era una sola (`tendencias.css`, 4 671
   líneas). Los tramos son CONTIGUOS y se cargan en este mismo orden: el
   orden de carga es la cascada, así que mover una hoja de sitio puede
   cambiar qué regla gana sin que nada falle. Si hace falta reordenar, se
   comprueba con `npm run huella` y no razonando.
   ========================================================================= */

/* ==========================================================================
   ROCKSTARS MX — Tendencias de música
   Sistema de diseño. Mobile first: los breakpoints suben a 640 / 900 / 1200.
   Herencia de la landing anterior: Lato como tipografía de texto y el oro
   del logotipo (#998119) como color de marca secundario.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --rojo:        #E4123A;
  --rojo-osc:    #A80B29;
  --rojo-claro:  #FF3D5E;
  --oro:         #998119; /* tomado del logotipo original de Rockstars MX */
  --oro-luz:     #D4AC2B;

  /* Neutros */
  --negro:       #0B0B0D;
  --sup-1:       #141418;
  --sup-2:       #1C1C22;
  --sup-3:       #26262E;
  --linea:       rgba(255, 255, 255, .10);
  --linea-fuerte:rgba(255, 255, 255, .20);
  --texto:       #F4F4F6;
  --texto-2:     #9E9EA9;
  --texto-3:     #6B6B75;

  /* Semánticos */
  --sube:        #35D07F;
  --baja:        #FF5C5C;

  /* Tipografía */
  --display: "Anton", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue Condensed", sans-serif;
  --texto-fuente: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Ritmo */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --gutter: clamp(16px, 4vw, 40px);
  --ancho: 1280px;

  /* Sombra */
  --sombra: 0 18px 40px -18px rgba(0, 0, 0, .85);
  --sombra-rojo: 0 18px 44px -20px rgba(228, 18, 58, .75);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--texto-fuente);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Enlaces DENTRO de texto corrido.
 *
 * La regla de arriba —heredar color y quitar el subrayado— es la correcta
 * para tarjetas, pistas y botones, que ya se ven pulsables por su forma. Pero
 * aplicada a un párrafo dejaba los enlaces exactamente iguales al texto: el
 * de «Texto de Wikipedia en español» en la bio de un artista se leía como una
 * frase y nadie podía saber que llevaba a algún lado.
 *
 * Se listan los contenedores de prosa en vez de usar `p a` a secas: así no se
 * subrayan por accidente los enlaces que envuelven una tarjeta entera. */
.metodo p a,
.nota__credito a,
.poder__bajada a,
.seccion__descripcion a,
.tabla-pie a,
.pub-vacio a,
.sintesis__pie a,
.cuenta__promesa a,
.formulario--google small a,
.faq__respuesta a,
.credito-foto a {
  color: var(--oro-luz);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .16s;
}
.metodo p a:hover,
.nota__credito a:hover,
.poder__bajada a:hover,
.seccion__descripcion a:hover,
.tabla-pie a:hover,
.pub-vacio a:hover,
.sintesis__pie a:hover,
.cuenta__promesa a:hover,
.formulario--google small a:hover,
.faq__respuesta a:hover,
.credito-foto a:hover { color: var(--rojo-claro); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 { margin: 0; font-weight: 400; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--oro-luz);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Saltar al contenido */
.saltar {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--oro-luz); color: var(--negro);
  padding: 10px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 900; transition: top .2s;
}
.saltar:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Tipografía de display
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: .86;
  text-transform: uppercase;
}

.rotulo {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.rotulo--oro { color: var(--oro-luz); }
.rotulo--rojo { color: var(--rojo-claro); }