/* ==========================================================================
   BASE — reinicio, fuente, estilos de elementos, foco y utilidades.
   Solo usa roles de tokens.css. Ningún valor escrito a mano.
   ========================================================================== */

@layer reinicio {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* El navegador pinta un recuadro azul al tocar un enlace. Se quita y se sustituye por
     un estado propio (:active), para que el aviso siga existiendo pero con el color de la marca. */
  * { -webkit-tap-highlight-color: transparent; }
  img, picture, video, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  ul[class], ol[class] { list-style: none; padding: 0; }
}

/* Inter variable, alojada en el proyecto. El navegador solo baja el subconjunto que necesita. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fuentes/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fuentes/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Respaldo con las métricas de Inter: el texto no salta cuando llega la fuente */
@font-face {
  font-family: "Inter Respaldo";
  src: local("Arial");
  size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%;
}

@layer base {
  body {
    font-family: var(--mel-fuente);
    font-size: var(--mel-texto-cuerpo);
    line-height: var(--mel-interlineado-cuerpo);
    font-weight: var(--mel-peso-normal);
    color: var(--mel-color-texto);
    background: var(--mel-color-fondo);
    -webkit-font-smoothing: antialiased;
  }
  /* El sitio es de celular: en una pantalla más ancha, toda la página es una columna de --mel-columna, centrada
     (decisión 0029). Lo que flota sobre ella (menú, hoja de filtros, aviso de cookies, barra de contacto) se ciñe
     a la columna en su propia hoja. Fuera de la columna se ve el fondo de la página. */
  :root[data-mel-columna] body { max-inline-size: var(--mel-columna); margin-inline: auto; }
  /* Ninguna página termina pegada al pie. Medido en su sitio: la portada cierra con 50
     y el listado con 20; el valor que nunca aparece es el cero, que es lo que teníamos. */
  main { padding-bottom: var(--mel-espacio-bloque); }
  h1, h2, h3, h4 { color: var(--mel-color-titulo); font-weight: var(--mel-peso-negrita); text-wrap: balance; }
  h1 { font-size: var(--mel-texto-destacado); line-height: var(--mel-interlineado-destacado); }
  h2 { font-size: var(--mel-texto-titulo); line-height: var(--mel-interlineado-titulo); }
  h3 { font-size: var(--mel-texto-subtitulo); line-height: var(--mel-interlineado-subtitulo); }
  h4 { font-size: var(--mel-texto-cuerpo); line-height: var(--mel-interlineado-cuerpo); }
  p { text-wrap: pretty; }
  a { color: var(--mel-color-enlace); text-underline-offset: var(--mel-espacio-optico); }
  small { font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); }
  input, textarea, select { font-size: var(--mel-texto-campo); line-height: var(--mel-interlineado-campo); }
  /* La pista es una nota, no el contenido: va un peldaño por debajo del texto que se escribe.
     El suelo de 16 px que exige iOS lo marca el CAMPO, no su pista, así que bajarla no
     devuelve el zoom. Es lo que hace su sitio: 13,59 de pista contra 15 de texto escrito. */
  ::placeholder { font-size: var(--mel-texto-pista); color: var(--mel-color-texto-secundario); opacity: 1; }
  hr { border: 0; border-top: var(--mel-borde-fino) solid var(--mel-color-borde); }
  ::selection { background: var(--mel-color-marca-suave); color: var(--mel-color-titulo); }

  /* Foco de teclado: uno solo para botones, enlaces y demás controles. Ningún componente puede quitarlo,
     salvo los campos de texto, que dibujan el suyo (fundamentos §8): en ellos `:focus-visible` se enciende
     también con el dedo. Si un campo no define su indicador propio, este queda como red de seguridad. */
  :focus-visible { outline: var(--mel-foco-ancho) solid var(--mel-foco-color); outline-offset: var(--mel-foco-separacion); }
  [data-sobre-marca] :focus-visible, [data-sobre-foto] :focus-visible { outline-color: var(--mel-color-texto-inverso); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: var(--mel-mov-nulo) !important;
      animation-iteration-count: 1 !important;
      transition-duration: var(--mel-mov-nulo) !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilidades {
  /* Rol tipográfico, independiente de la etiqueta (un h2 puede verse como subtítulo) */
  .mel-t-portada   { font-size: var(--mel-texto-portada);   line-height: var(--mel-interlineado-portada); }
  .mel-t-destacado { font-size: var(--mel-texto-destacado); line-height: var(--mel-interlineado-destacado); }
  .mel-t-titulo    { font-size: var(--mel-texto-titulo);    line-height: var(--mel-interlineado-titulo); }
  .mel-t-subtitulo { font-size: var(--mel-texto-subtitulo); line-height: var(--mel-interlineado-subtitulo); }
  .mel-t-cuerpo    { font-size: var(--mel-texto-cuerpo);    line-height: var(--mel-interlineado-cuerpo); }
  .mel-t-pequeno   { font-size: var(--mel-texto-pequeno);   line-height: var(--mel-interlineado-pequeno); }
  .mel-t-micro     { font-size: var(--mel-texto-micro);     line-height: var(--mel-interlineado-micro); }

  /* Maquetación */
  .mel-contenedor { width: 100%; max-width: calc(var(--mel-contenedor) + var(--mel-canal) + var(--mel-canal)); margin-inline: auto; padding-inline: var(--mel-canal); }
  .mel-lectura { max-width: var(--mel-ancho-lectura); }
  .mel-seccion { padding-block: var(--mel-espacio-seccion); border-top: var(--mel-borde-fino) solid var(--mel-color-borde); }
  .mel-seccion__titulo { margin-bottom: var(--mel-espacio-titulo); }
  .mel-pila > * + * { margin-top: var(--mel-espacio-dentro); }

  /* Accesibilidad */
  /* El dibujo de la marca se declara una vez y no debe ocupar nada en la pagina */
  .mel-oculto-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
  .mel-solo-lectores { position: absolute; width: var(--mel-borde-fino); height: var(--mel-borde-fino); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mel-saltar { position: absolute; inset-inline-start: var(--mel-espacio-dentro); top: var(--mel-espacio-dentro); padding: var(--mel-espacio-grupo) var(--mel-espacio-titulo); background: var(--mel-color-marca); color: var(--mel-color-texto-inverso); border-radius: var(--mel-radio-sm); z-index: var(--mel-capa-maxima); transform: translateY(-200%); }
  .mel-saltar:focus { transform: none; }
}