/* Punto de entrada único. El orden de las capas fija la cascada; cada archivo declara su propia capa. */
@layer reset, tokens, base, layout, components, utilities;
/* --- reset.css --- */
/* Reset moderno mínimo */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  img,
  video {
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  [hidden] {
    display: none;
  }

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

/* --- tokens.css --- */
/*
 * Tokens de diseño · único archivo con colores literales (lo comprueba tools/verificar.php).
 * Paleta: docs/DECISIONES.md D-10 (cartel del concurso y logo de la Sociedad). F-ID (15/10): teja y oro muestreados
 * del JPEG oficial del logo (mediana de píxeles interiores saturados): teja #C23C07, oro #EBA50F.
 *
 * Contraste (WCAG 2.x, calculado con la fórmula de luminancia relativa) de cada par usado:
 *
 *   Texto                         Fondo                          Ratio   Uso permitido
 *   ---------------------------   ----------------------------   -----   -----------------------------------
 *   --color-tinta     #14100C     --color-papel   #F6F0E8        16.72   texto normal
 *   --color-tinta     #14100C     --color-crema   #EADFD0        14.39   texto normal
 *   --color-tinta     #14100C     --color-blanco  #FFFFFF        18.93   texto normal
 *   --color-texto-suave #5C4F44   --color-papel   #F6F0E8         6.98   texto normal
 *   --color-texto-suave #5C4F44   --color-crema   #EADFD0         6.01   texto normal
 *   --color-cobre-oscuro #8F4519  --color-papel   #F6F0E8         6.11   enlaces y acento, texto normal
 *   --color-cobre-oscuro #8F4519  --color-crema   #EADFD0         5.26   enlaces y acento, texto normal
 *   --color-enlace-hover #6E3412  --color-papel   #F6F0E8         8.58   enlace al pasar el ratón
 *   --color-enlace-hover #6E3412  --color-crema   #EADFD0         7.38   enlace al pasar el ratón
 *   --color-cobre     #B66737     --color-papel   #F6F0E8         3.72   SOLO texto grande (≥ 24 px o ≥ 18,66 px negrita)
 *   --color-cobre     #B66737     --color-crema   #EADFD0         3.20   SOLO texto grande
 *   --color-blanco    #FFFFFF     --color-teja    #C23C07         5.33   texto de botón principal
 *   --color-blanco    #FFFFFF     --color-teja-oscura #9E3105     7.25   botón principal al pasar el ratón
 *   --color-papel     #F6F0E8     --color-tinta   #14100C        16.72   texto en zonas oscuras (pie)
 *   --color-crema     #EADFD0     --color-tinta   #14100C        14.39   texto secundario en zonas oscuras
 *
 * Elementos no textuales (WCAG 1.4.11 y 2.4.13, mínimo 3:1 con el fondo adyacente):
 *   --color-foco (cobre oscuro)   sobre papel 6.11 · sobre crema 5.26
 *   --color-foco-inverso (oro)    sobre tinta 8.94
 *   --color-borde-control #8C7B6B sobre papel 3.59 · sobre crema 3.09
 *   --color-borde #D6C7B4 (1.46 sobre papel): solo separadores decorativos, nunca el único límite de un control.
 *
 * Prohibido como color de texto: --color-oro (1.87 sobre papel), --color-arcilla (2.38 sobre papel),
 * --color-teja sobre crema (4.05; sobre papel 4.70 y sobre blanco 5.33, pero no se usa como texto: los enlaces y
 * acentos de texto usan --color-cobre-oscuro) salvo texto grande, --color-cobre en tamaño normal.
 * El color de marca se respeta en el logo (SVG con colores literales); para texto se usan los derivados oscurecidos.
 */

@layer tokens {
  :root {
    /* Paleta D-10 */
    --color-papel: #F6F0E8;
    --color-crema: #EADFD0;
    --color-tinta: #14100C;
    --color-cobre: #B66737;
    --color-cobre-oscuro: #8F4519;
    --color-arcilla: #CB9167;
    --color-teja: #C23C07;
    --color-oro: #EBA50F;
    --color-blanco: #FFFFFF;

    /* Derivados (ratios arriba) */
    --color-teja-oscura: #9E3105;
    --color-cobre-profundo: #6E3412;
    --color-gris-calido: #5C4F44;
    --color-gris-borde: #8C7B6B;
    --color-beige-borde: #D6C7B4;

    /* Roles */
    --color-fondo: var(--color-papel);
    --color-superficie: var(--color-crema);
    --color-texto: var(--color-tinta);
    --color-texto-suave: var(--color-gris-calido);
    --color-enlace: var(--color-cobre-oscuro);
    --color-enlace-hover: var(--color-cobre-profundo);
    --color-titulo-grande: var(--color-cobre);
    --color-borde: var(--color-beige-borde);
    --color-borde-control: var(--color-gris-borde);
    --color-acento: var(--color-oro);
    --color-decorativo: var(--color-arcilla);
    --color-foco: var(--color-cobre-oscuro);
    --color-boton-fondo: var(--color-teja);
    --color-boton-fondo-hover: var(--color-teja-oscura);
    --color-boton-texto: var(--color-blanco);

    /* Zonas oscuras (pie) */
    --color-fondo-oscuro: var(--color-tinta);
    --color-texto-inverso: var(--color-papel);
    --color-texto-inverso-suave: var(--color-crema);
    --color-foco-inverso: var(--color-oro);

    /* Velo tras el menú móvil abierto (decorativo) */
    --color-velo: rgb(20 16 12 / 0.45);

    /* Tipografía: titulares y botones en Montserrat autoalojada (D-10); texto corrido con la pila del sistema */
    --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fuente-titulos: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --peso-normal: 400;
    --peso-semi: 600;
    --peso-negrita: 700;
    --interlineado: 1.6;
    --interlineado-titulos: 1.15;

    /* Escala fluida 360 → 1280 px: razón 1,2 sobre 16 px a razón 1,25 sobre 18 px */
    --paso--1: clamp(0.833rem, 0.807rem + 0.116vw, 0.9rem);
    --paso-0: clamp(1rem, 0.951rem + 0.217vw, 1.125rem);
    --paso-1: clamp(1.2rem, 1.119rem + 0.359vw, 1.406rem);
    --paso-2: clamp(1.44rem, 1.316rem + 0.553vw, 1.758rem);
    --paso-3: clamp(1.728rem, 1.544rem + 0.816vw, 2.197rem);
    --paso-4: clamp(2.074rem, 1.81rem + 1.17vw, 2.747rem);
    --paso-5: clamp(2.488rem, 2.119rem + 1.643vw, 3.433rem);

    /* Espaciado */
    --esp-3xs: 0.25rem;
    --esp-2xs: 0.5rem;
    --esp-xs: 0.75rem;
    --esp-s: 1rem;
    --esp-m: 1.5rem;
    --esp-l: 2rem;
    --esp-xl: 3rem;
    --esp-2xl: 4rem;
    --esp-3xl: 6rem;
    --margen-lateral: clamp(1rem, 0.6rem + 1.8vw, 2rem);

    /* Medidas */
    --ancho-texto: 68ch;
    --ancho-max: 75rem;
    --objetivo-tactil: 2.75rem;

    /* Radios */
    --radio-s: 0.25rem;
    --radio-m: 0.5rem;
    --radio-l: 1rem;
    --radio-pildora: 999px;

    /* Bordes y foco */
    --borde-fino: 1px;
    --borde-grueso: 2px;
    --foco-ancho: 3px;
    --foco-separacion: 2px;

    /* Sombras (tinta con transparencia) */
    --sombra-s: 0 1px 2px rgb(20 16 12 / 0.08);
    --sombra-m: 0 2px 8px rgb(20 16 12 / 0.1), 0 1px 2px rgb(20 16 12 / 0.06);
    --sombra-l: 0 8px 24px rgb(20 16 12 / 0.12);

    /* Movimiento */
    --duracion-corta: 150ms;
    --curva: cubic-bezier(0.2, 0, 0, 1);
  }
}

/* --- base.css --- */
/* Estilos base de elementos HTML */
@layer base {
  /* Montserrat 7.200 (OFL 1.1, ver assets/fonts/OFL.txt), subconjunto latino, autoalojada (D-10) */
  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/montserrat-400.woff2") format("woff2");
  }

  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/montserrat-600.woff2") format("woff2");
  }

  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/montserrat-700.woff2") format("woff2");
  }

  html {
    color-scheme: light;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-texto);
    font-size: 100%;
    line-height: var(--interlineado);
    scroll-padding-block-start: var(--esp-l);
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    font-size: var(--paso-0);
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-negrita);
    line-height: var(--interlineado-titulos);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--paso-5);
  }

  h2 {
    font-size: var(--paso-3);
  }

  h3 {
    font-size: var(--paso-2);
  }

  h4 {
    font-size: var(--paso-1);
  }

  p,
  li,
  dd {
    text-wrap: pretty;
  }

  a {
    color: var(--color-enlace);
    text-decoration-line: underline;
    text-decoration-thickness: max(1px, 0.0625em);
    text-underline-offset: 0.18em;
    transition: color var(--duracion-corta) var(--curva);

    &:hover {
      color: var(--color-enlace-hover);
      text-decoration-thickness: max(2px, 0.125em);
    }
  }

  :focus-visible {
    outline: var(--foco-ancho) solid var(--color-foco);
    outline-offset: var(--foco-separacion);
  }

  strong,
  b {
    font-weight: var(--peso-negrita);
  }

  small {
    font-size: var(--paso--1);
  }

  hr {
    border: 0;
    border-block-start: var(--borde-fino) solid var(--color-borde);
  }

  ::selection {
    background-color: var(--color-tinta);
    color: var(--color-papel);
  }
}

/* --- layout.css --- */
/* Primitivas de maquetación (mobile-first, propiedades lógicas) */
@layer layout {
  /* Ancho máximo centrado con márgenes laterales */
  .contenedor {
    inline-size: min(100% - 2 * var(--margen-lateral), var(--ancho-max));
    margin-inline: auto;
  }

  /* Columna de lectura */
  .ancho-texto {
    max-inline-size: var(--ancho-texto);
  }

  /* Pila vertical con separación uniforme: --pila-espacio */
  .pila {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--pila-espacio, var(--esp-m));
  }

  /* Rejilla adaptable sin media queries: --rejilla-min */
  .rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--rejilla-min, 16rem), 100%), 1fr));
    gap: var(--rejilla-espacio, var(--esp-m));
  }

  /* Grupo horizontal que se envuelve: --cluster-espacio */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-espacio, var(--esp-s));
  }

  /* Pie siempre abajo aunque la página sea corta */
  body {
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;

    &:focus {
      outline: none;
    }
  }

  /* Bloque de sección con respiro vertical */
  .seccion {
    padding-block: var(--esp-xl);
  }
}

/* --- components.css --- */
/* Componentes reutilizables. Los específicos de cada plantilla se añaden aquí en F0-05 y siguientes. */
@layer components {
  /* Enlace «Saltar al contenido»: oculto hasta recibir el foco */
  .saltar-contenido {
    position: absolute;
    inset-block-start: var(--esp-2xs);
    inset-inline-start: var(--esp-2xs);
    z-index: 100;
    padding: var(--esp-2xs) var(--esp-s);
    background-color: var(--color-tinta);
    color: var(--color-papel);
    border-radius: var(--radio-s);
    transform: translateY(-200%);

    &:focus-visible {
      transform: none;
      outline-color: var(--color-foco-inverso);
    }
  }

  /* Botones: principal (teja, texto blanco 5.33:1) y secundario (contorno) */
  .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2xs);
    min-block-size: var(--objetivo-tactil);
    padding: var(--esp-2xs) var(--esp-m);
    border: var(--borde-grueso) solid var(--color-boton-fondo);
    border-radius: var(--radio-m);
    background-color: var(--color-boton-fondo);
    color: var(--color-boton-texto);
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-semi);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duracion-corta) var(--curva), border-color var(--duracion-corta) var(--curva);

    &:hover {
      background-color: var(--color-boton-fondo-hover);
      border-color: var(--color-boton-fondo-hover);
      color: var(--color-boton-texto);
    }
  }

  .boton--secundario {
    background-color: transparent;
    border-color: var(--color-enlace);
    color: var(--color-enlace);

    &:hover {
      background-color: transparent;
      border-color: var(--color-enlace-hover);
      color: var(--color-enlace-hover);
    }
  }

  /* Tarjeta con container query: apila en estrecho, columnas en ancho */
  .tarjeta {
    container-type: inline-size;
    background-color: var(--color-superficie);
    border-radius: var(--radio-l);
    padding: var(--esp-m);
  }

  .tarjeta__cuerpo {
    display: grid;
    gap: var(--esp-s);
  }

  @container (min-width: 32rem) {
    .tarjeta__cuerpo--con-imagen {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      align-items: start;
    }
  }

  /* Aviso destacado */
  .aviso {
    padding: var(--esp-s) var(--esp-m);
    border-inline-start: 0.375rem solid var(--color-acento);
    background-color: var(--color-superficie);
    border-radius: var(--radio-s);
  }

  /* Zona oscura (pie): texto claro y foco en oro */
  .zona-oscura {
    --color-foco: var(--color-foco-inverso);

    background-color: var(--color-fondo-oscuro);
    color: var(--color-texto-inverso);

    & a {
      color: var(--color-texto-inverso);

      &:hover {
        color: var(--color-texto-inverso-suave);
      }
    }
  }
}

/* Plantillas base (F0-05) */
@layer components {
  /* Cabecera */
  .cabecera {
    border-block-end: var(--borde-fino) solid var(--color-borde);
  }

  .cabecera__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-s);
    padding-block: var(--esp-xs);
  }

  .cabecera__marca {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--objetivo-tactil);
    color: var(--color-texto);
    text-decoration: none;

    & img {
      inline-size: min(240px, 55vw);
      block-size: auto;
    }
  }

  .cabecera__nombre {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-negrita);
    font-size: var(--paso-0);
    line-height: 1.2;
    max-inline-size: 22ch;
  }

  .cabecera__abrir,
  .menu__cerrar {
    min-block-size: var(--objetivo-tactil);
    padding: var(--esp-2xs) var(--esp-s);
    border: var(--borde-grueso) solid var(--color-borde-control);
    border-radius: var(--radio-m);
    background-color: transparent;
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-semi);
    cursor: pointer;
  }

  /* Menú: en móvil, panel popover (sin JS); en escritorio, en línea */
  .menu[popover] {
    position: fixed;
    inset: 0 0 auto;
    inline-size: 100%;
    max-block-size: 100dvh;
    margin: 0;
    padding: var(--esp-s) var(--margen-lateral) var(--esp-l);
    overflow-y: auto;
    border: 0;
    border-block-end: var(--borde-fino) solid var(--color-borde);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    box-shadow: var(--sombra-l);

    &::backdrop {
      background-color: var(--color-velo);
    }
  }

  .menu__cerrar {
    display: block;
    margin-inline-start: auto;
  }

  .menu__lista {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2xs);
    margin-block-start: var(--esp-s);
  }

  .menu__enlace {
    display: flex;
    align-items: center;
    min-block-size: var(--objetivo-tactil);
    padding-inline: var(--esp-xs);
    border-radius: var(--radio-m);
    color: var(--color-texto);
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-semi);
    text-decoration: none;

    &:hover {
      color: var(--color-enlace-hover);
      text-decoration-line: underline;
    }

    &[aria-current] {
      text-decoration-line: underline;
      text-decoration-thickness: var(--borde-grueso);
    }
  }

  .menu__enlace--destacado {
    justify-content: center;
    background-color: var(--color-boton-fondo);
    color: var(--color-boton-texto);

    &:hover {
      background-color: var(--color-boton-fondo-hover);
      color: var(--color-boton-texto);
    }
  }

  .menu__idiomas {
    margin-block-start: var(--esp-s);
    padding-inline: var(--esp-xs);

    /* Selector «ES | EN» (lista) o enlace suelto «English · Competition» (párrafo) */
    a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: var(--objetivo-tactil);
      min-inline-size: var(--objetivo-tactil);
      font-family: var(--fuente-titulos);
      font-weight: var(--peso-semi);
    }

    /* Solo el idioma actual subrayado, para que se distinga del otro */
    ul& a:not([aria-current]) {
      text-decoration-line: none;
    }

    a[aria-current] {
      text-decoration-line: underline;
      text-decoration-thickness: var(--borde-grueso);
    }
  }

  ul.menu__idiomas {
    display: flex;
    gap: var(--esp-2xs);
  }

  /* Menú en línea solo cuando caben logo + 5 ítems + selector de idioma sin partir líneas (medido: ~1215 px) */
  @media (min-width: 78rem) {
    .cabecera__abrir,
    .menu__cerrar {
      display: none;
    }

    .menu__enlace,
    .menu__idiomas a {
      white-space: nowrap;
    }

    .menu[popover] {
      display: flex;
      align-items: center;
      gap: var(--esp-s);
      position: static;
      inset: auto;
      inline-size: auto;
      max-block-size: none;
      padding: 0;
      overflow: visible;
      border: 0;
      background-color: transparent;
      box-shadow: none;
    }

    .menu__lista {
      flex-direction: row;
      align-items: center;
      margin-block-start: 0;
    }

    .menu__idiomas {
      margin-block-start: 0;
    }
  }

  /* Migas de pan */
  .migas {
    padding-block: var(--esp-s) 0;
    font-size: var(--paso--1);
  }

  .migas__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3xs) var(--esp-2xs);

    & li + li::before {
      content: "/" / "";
      margin-inline-end: var(--esp-2xs);
      color: var(--color-texto-suave);
    }
  }

  /* Página de contenido */
  .pagina {
    padding-block: var(--esp-m) var(--esp-2xl);
  }

  .pagina__articulo {
    --pila-espacio: var(--esp-l);

    margin-block-start: var(--esp-m);
  }

  /* Texto corrido escrito en contenido/paginas/ */
  .prosa {
    /* También dentro de una sección hija (p. ej. el bloque lang="en" de la 404) */
    & > * + *,
    & > section > * + * {
      margin-block-start: var(--esp-s);
    }

    & > * + :is(h2, h3, h4, section) {
      margin-block-start: var(--esp-xl);
    }

    & :is(ul, ol) {
      padding-inline-start: var(--esp-m);
    }

    & li + li {
      margin-block-start: var(--esp-2xs);
    }

    /* Citas «> texto» del Markdown de las entradas (F2-03) */
    & blockquote {
      padding-inline-start: var(--esp-m);
      border-inline-start: 0.25rem solid var(--color-decorativo);
      font-style: italic;
    }
  }

  /* Pie */
  .pie {
    margin-block-start: var(--esp-2xl);
    padding-block: var(--esp-xl) var(--esp-m);
  }

  .pie__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--esp-l);
  }

  .pie__titulo {
    font-size: var(--paso-1);
    margin-block-end: var(--esp-s);
  }

  .pie__contacto {
    margin-block-end: var(--esp-2xs);
  }

  .pie__redes {
    margin-block-start: var(--esp-s);
  }

  .pie__legal {
    display: grid;
    gap: var(--esp-2xs);
  }

  /* Área de respeto del logo del colaborador (docs/marcas/almeria-ciudad.md, regla 2) */
  .pie__colaborador > a,
  .pie__colaborador > span {
    display: inline-block;
    padding: 1.25rem;
  }

  .pie__colaborador img {
    inline-size: 160px;
    block-size: auto;
  }

  .pie__copyright {
    margin-block-start: var(--esp-l);
    padding-block-start: var(--esp-s);
    border-block-start: var(--borde-fino) solid var(--color-texto-inverso-suave);
    color: var(--color-texto-inverso-suave);
  }

  /* Calendario de hitos */
  .calendario {
    display: grid;
    gap: var(--esp-s);
  }

  .calendario__hito {
    display: grid;
    gap: var(--esp-3xs);
    padding-inline-start: var(--esp-s);
    border-inline-start: 0.25rem solid var(--color-decorativo);
  }

  .calendario__texto {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-semi);
  }

  .calendario__nota,
  .calendario__lugar {
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }

  /* Plazo y llamada a la acción del concurso (F1-02) */
  .plazo {
    font-weight: var(--peso-semi);
  }

  .cta-concurso {
    display: grid;
    gap: var(--esp-m);
  }

  /* Premio */
  .premio {
    display: grid;
    gap: var(--esp-2xs);
    padding: var(--esp-m);
    border-radius: var(--radio-l);
    background-color: var(--color-superficie);
  }

  .premio__importe {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-negrita);
    font-size: var(--paso-3);
    line-height: 1.1;
    color: var(--color-titulo-grande);
  }

  .premio__detalle {
    padding-inline-start: var(--esp-m);
  }

  /* Descarga */
  .descarga {
    font-weight: var(--peso-semi);
  }

  .descarga__meta {
    font-weight: var(--peso-normal);
  }

  /* Marcador de un dato o archivo aún no disponible («Próximamente») */
  .pendiente {
    font-style: italic;
    color: var(--color-texto-suave);
  }

  /* Frase de apertura de una página de contenido */
  .entradilla {
    font-size: var(--paso-1);
    text-wrap: balance;
  }

  .lista-descargas {
    margin-block-start: var(--esp-2xs);
    padding-inline-start: var(--esp-m);
  }

  /* Índice de contenidos interno */
  .indice {
    padding: var(--esp-s) var(--esp-m);
    border: 1px solid var(--color-borde-control);
    border-radius: var(--radio-s);
  }

  .indice__titulo {
    font-weight: var(--peso-semi);
  }

  .indice__lista {
    margin-block-start: var(--esp-2xs);
    padding-inline-start: var(--esp-m);
    list-style: none;
    display: grid;
    gap: var(--esp-3xs);
  }

  /* Tabla accesible con desplazamiento horizontal propio en pantallas estrechas */
  .tabla-contenedor {
    overflow-x: auto;
  }

  .tabla {
    inline-size: 100%;
    border-collapse: collapse;

    & caption {
      padding-block-end: var(--esp-2xs);
      font-weight: var(--peso-semi);
      text-align: start;
    }

    & :is(th, td) {
      padding: var(--esp-2xs) var(--esp-xs);
      border: 1px solid var(--color-borde-control);
      text-align: start;
      vertical-align: top;
    }

    & thead th {
      background-color: var(--color-superficie);
    }

    & tbody th {
      font-weight: var(--peso-normal);
    }

    & td {
      white-space: nowrap;
    }
  }

  /* Tarjeta de entrada */
  .tarjeta-entrada__titulo {
    font-size: var(--paso-1);

    & a {
      color: var(--color-texto);
    }
  }

  .tarjeta-entrada__fecha {
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }
}

/* Portada del concurso (F1-03) */
@layer components {
  .portada__hero {
    padding-block: var(--esp-l) var(--esp-xl);
  }

  /* Móvil: texto y, debajo, el cartel. Escritorio: cartel a la derecha */
  .portada__hero-rejilla {
    display: grid;
    gap: var(--esp-l);
    align-items: start;
  }

  @media (min-width: 60rem) {
    .portada__hero-rejilla {
      grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
      gap: var(--esp-xl);
    }
  }

  /* Hero de la Sociedad (sin cartel): una sola columna, tras el media query para ganarle en escritorio */
  .portada__hero-rejilla--texto {
    grid-template-columns: minmax(0, 1fr);
  }

  .portada__hero-texto {
    --pila-espacio: var(--esp-m);
  }

  .portada__antetitulo {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-semi);
    font-size: var(--paso--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
  }

  /* Mensaje de estado en lugar del antetítulo (portada provisional): frase, no etiqueta */
  .portada__antetitulo--mensaje {
    font-size: var(--paso-0);
    letter-spacing: normal;
    text-transform: none;
  }

  .portada__titulo {
    font-size: var(--paso-4);
    padding-inline-start: var(--esp-s);
    border-inline-start: 0.5rem solid var(--color-titulo-grande);
  }

  .portada__subtitulo {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-semi);
    font-size: var(--paso-1);
  }

  /* Nombre oficial en español bajo el subtítulo (portada inglesa) */
  .portada__oficial {
    font-size: var(--paso--1);
    font-style: italic;
    color: var(--color-texto-suave);
  }

  .portada__entradilla {
    max-inline-size: var(--ancho-texto);
  }

  /* Bloque destacado «como en el cartel» */
  .destacados {
    display: grid;
    gap: var(--esp-2xs);
    padding: var(--esp-s) var(--esp-m);
    border-radius: var(--radio-m);
    background-color: var(--color-superficie);
    font-family: var(--fuente-titulos);
    font-size: var(--paso-1);
    line-height: 1.3;
  }

  .portada__cartel {
    display: grid;
    gap: var(--esp-xs);
    justify-items: center;
    max-inline-size: 28rem;
    inline-size: 100%;
    margin-inline: auto;

    & img {
      inline-size: 100%;
      block-size: auto;
      border-radius: var(--radio-m);
      box-shadow: var(--sombra-l);
    }
  }

  /* Datos clave: tarjetas con container query */
  .datos-clave {
    --rejilla-min: 15rem;
  }

  .dato-clave {
    container-type: inline-size;
    display: block;
    padding: var(--esp-m);
    border-block-start: 0.375rem solid var(--color-decorativo);
    border-radius: var(--radio-m);
    background-color: var(--color-superficie);

    & .dato-clave__titulo,
    & .dato-clave__texto {
      display: block;
    }

    & .dato-clave__titulo {
      margin-block-end: var(--esp-2xs);
      font-family: var(--fuente-titulos);
      font-size: var(--paso-1);
      line-height: 1.2;
    }
  }

  @container (min-width: 20rem) {
    .dato-clave__titulo {
      font-size: var(--paso-2);
    }
  }

  /* Premios */
  .premios {
    --rejilla-min: 17rem;

    align-items: start;
  }

  .premios__item {
    display: grid;
    gap: var(--esp-s);
  }

  .premios__nota {
    color: var(--color-texto-suave);
    max-inline-size: var(--ancho-texto);
  }

  /* Cómo participar */
  .pasos {
    display: grid;
    gap: var(--esp-s);
    max-inline-size: var(--ancho-texto);
    padding-inline-start: var(--esp-m);
  }

  /* Organiza y colabora: sobre crema, como en el cartel */
  .portada__organiza {
    padding-block: var(--esp-xl);
    background-color: var(--color-crema);
  }

  .organiza {
    display: grid;
    gap: var(--esp-l);
    align-items: start;
  }

  @media (min-width: 48rem) {
    .organiza {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .organiza__item {
    display: grid;
    gap: var(--esp-xs);
    align-content: start;
    justify-items: start;
  }

  .organiza__etiqueta {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-semi);
    color: var(--color-texto-suave);
  }

  .organiza__logo-sociedad {
    inline-size: min(15rem, 100%);
    block-size: auto;
  }

  /* Escudo municipal: ancho 7,5rem (120 px, mínimo web 80 px) y área de respeto = 25 % del ancho (docs/marcas/almeria-ciudad.md) */
  .organiza__logo-colaborador {
    --logo-ancho: 7.5rem;

    display: inline-block;
    padding: calc(var(--logo-ancho) * 0.25);

    & img {
      display: block;
      inline-size: var(--logo-ancho);
      block-size: auto;
    }
  }

  .organiza__nombre {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-negrita);
    font-size: var(--paso-2);
    line-height: 1.2;
  }
}

/* Inscripción (F1-05): lista de comprobación y bloques copiables */
@layer components {
  /* El botón con atributo hidden (lo retira copiar.js) no debe quedar visible por su display propio */
  .boton[hidden] {
    display: none;
  }

  .lista-comprobacion {
    list-style: none;

    & li {
      display: flex;
      align-items: baseline;
      gap: var(--esp-xs);
    }

    /* Casilla dibujada: decoración, no un control */
    & li::before {
      content: "";
      flex: none;
      inline-size: 1.125rem;
      block-size: 1.125rem;
      border: var(--borde-grueso) solid var(--color-borde-control);
      border-radius: var(--radio-s);
      translate: 0 0.2em;
    }
  }

  .copiable {
    display: grid;
    gap: var(--esp-2xs);
    justify-items: start;
    margin-block-start: var(--esp-s);
  }

  .copiable__texto {
    inline-size: 100%;
    margin: 0;
    padding: var(--esp-s) var(--esp-m);
    border: var(--borde-fino) solid var(--color-borde-control);
    border-radius: var(--radio-s);
    background-color: var(--color-superficie);
    font-family: var(--fuente-texto);
    font-size: var(--paso--1);
    line-height: var(--interlineado);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .copiable__estado {
    min-block-size: 1.5em;
    color: var(--color-texto-suave);
    font-weight: var(--peso-semi);
  }
}

/* Preguntas frecuentes: <details>/<summary> sin JavaScript (F1-06) */
@layer components {
  .preguntas {
    display: grid;
    gap: var(--esp-2xs);
    margin-block-start: var(--esp-m);
  }

  .pregunta {
    border: var(--borde-fino) solid var(--color-borde-control);
    border-radius: var(--radio-s);
    background-color: var(--color-superficie);

    & summary {
      display: flex;
      align-items: center;
      gap: var(--esp-xs);
      min-block-size: var(--objetivo-tactil);
      padding: var(--esp-2xs) var(--esp-s);
      font-weight: var(--peso-semi);
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      /* Indicador: chevron dibujado con bordes, hereda el color del texto */
      &::before {
        content: "";
        flex: none;
        inline-size: 0.5em;
        block-size: 0.5em;
        border-inline-end: var(--borde-grueso) solid currentColor;
        border-block-end: var(--borde-grueso) solid currentColor;
        rotate: -45deg;
        transition: rotate 0.15s ease;
      }
    }

    &[open] summary::before {
      rotate: 45deg;
    }

    & p {
      margin: 0;
      padding: var(--esp-2xs) var(--esp-s) var(--esp-s);
      padding-inline-start: calc(var(--esp-s) + 0.5em + var(--esp-xs));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pregunta summary::before {
      transition: none;
    }
  }
}

/* Actividades y noticias (F2-06) */
@layer components {
  /* Tarjeta de entrada: imagen (si hay) y texto; el texto va en pila */
  .tarjeta-entrada__texto {
    display: grid;
    align-content: start;
    gap: var(--esp-2xs);
  }

  .tarjeta-entrada__imagen img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio-m);
  }

  .tarjeta-entrada__resumen {
    max-inline-size: var(--ancho-texto);
  }

  /* Listas de tarjetas (sin viñetas), también la vacía que rellena actividades.js */
  .lista-tarjetas {
    display: grid;
    gap: var(--esp-m);

    &:empty {
      display: none;
    }
  }

  /* Índice: móvil en una columna (próximas, noticias, anteriores); escritorio, anteriores y próximas
     a la izquierda y las noticias en una columna a la derecha */
  .actividades {
    display: grid;
    gap: var(--esp-xl);
    margin-block-start: var(--esp-m);

    & > section {
      display: grid;
      align-content: start;
      gap: var(--esp-m);
    }

    /* Solo los encabezados de sección: los títulos de tarjeta llevan siempre el mismo tamaño */
    & > section > h2 {
      font-size: var(--paso-3);
    }
  }

  .grupo-anio > h3 {
    font-size: var(--paso-2);
  }

  .grupo-ciclo > h4 {
    font-size: var(--paso-1);
  }

  @media (min-width: 60rem) {
    .actividades:has(.actividades__noticias) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      column-gap: var(--esp-xl);
      grid-template-areas:
        "proximas noticias"
        "anteriores noticias";

      & .actividades__proximas {
        grid-area: proximas;
      }

      & .actividades__noticias {
        grid-area: noticias;
      }

      & .actividades__anteriores {
        grid-area: anteriores;
      }
    }
  }

  .grupo-anio,
  .grupo-ciclo {
    display: grid;
    gap: var(--esp-m);
    margin-block-start: var(--esp-s);
  }

  .grupo-ciclo h4 {
    color: var(--color-texto-suave);
  }

  /* Paginación */
  .paginacion__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2xs);
    margin-block-start: var(--esp-m);
  }

  .paginacion__enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--objetivo-tactil);
    min-block-size: var(--objetivo-tactil);
    padding-inline: var(--esp-xs);
    border: var(--borde-fino) solid var(--color-borde-control);
    border-radius: var(--radio-m);
    text-decoration: none;

    &:is(a):hover {
      border-color: var(--color-enlace-hover);
    }
  }

  .paginacion__enlace--actual {
    background-color: var(--color-fondo-oscuro);
    border-color: var(--color-fondo-oscuro);
    color: var(--color-texto-inverso);
    font-weight: var(--peso-negrita);
  }

  /* Detalle de entrada */
  .entrada__meta {
    container-type: inline-size;
    display: grid;
    gap: var(--esp-xs);
    padding: var(--esp-s) var(--esp-m);
    border-inline-start: 0.375rem solid var(--color-decorativo);
    border-radius: var(--radio-s);
    background-color: var(--color-superficie);

    & > div {
      display: grid;
      gap: var(--esp-3xs) var(--esp-s);
    }

    & dt {
      color: var(--color-texto-suave);
      font-size: var(--paso--1);
      font-weight: var(--peso-semi);
    }

    & dd {
      margin: 0;
    }
  }

  @container (min-width: 28rem) {
    .entrada__meta > div {
      grid-template-columns: 7rem minmax(0, 1fr);
    }
  }

  .entrada__imagen img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radio-m);
  }

  /* Retrato de página fija (p. ej. /antonio-de-torres/) */
  .retrato {
    max-inline-size: 20rem;
    margin: 0;

    & img {
      inline-size: 100%;
      block-size: auto;
      border-radius: var(--radio-m);
    }

    & figcaption {
      margin-block-start: var(--esp-2xs);
      font-size: var(--paso--1);
      color: var(--color-texto-suave);
    }
  }

  /* Galería: rejilla de miniaturas que enlazan a la imagen grande (sin lightbox) */
  .galeria {
    --rejilla-min: 8rem;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--rejilla-min), 100%), 1fr));
    gap: var(--esp-s);
    margin-block-start: var(--esp-s);

    & img {
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--radio-m);
    }
  }

  .galeria__enlace {
    display: block;
    border-radius: var(--radio-m);
  }

  /* Vídeo de YouTube (F5): miniatura local en 16:9 con el botón encima; el iframe lo crea js/video.js al pulsar */
  .video {
    display: grid;
    gap: var(--esp-xs);
    max-inline-size: 48rem;
    margin-block-start: var(--esp-m);
  }

  .video__marco {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radio-m);
    background-color: var(--color-fondo-oscuro);

    & picture,
    & img,
    & iframe {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      border: 0;
    }

    & img {
      object-fit: cover;
    }
  }

  .video__boton {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: fit-content;
    block-size: fit-content;
    max-inline-size: calc(100% - 2 * var(--esp-s));
    text-align: center;
    box-shadow: var(--sombra-l);

    &:focus-visible {
      outline-color: var(--color-foco-inverso);
      box-shadow: 0 0 0 var(--foco-separacion) var(--color-fondo-oscuro);
    }
  }

  .video__info {
    margin: 0;
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }

  .entrada__vecinas {
    display: grid;
    gap: var(--esp-s);
  }

  .entrada__vecina-etiqueta {
    display: block;
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }

  @media (min-width: 40rem) {
    .entrada__vecinas {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .entrada__vecina--siguiente {
      grid-column: 2;
      text-align: end;
    }
  }
}

/* --- utilities.css --- */
/* Utilidades (únicas reglas, junto al reset de movimiento, que pueden usar !important) */
@layer utilities {
  /* Oculta visualmente pero mantiene el texto para lectores de pantalla */
  .visualmente-oculto:not(:focus, :active) {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* El atributo hidden gana siempre: en reset no basta, cualquier display de layout o components lo pisaría */
  [hidden] {
    display: none !important;
  }

  .texto-suave {
    color: var(--color-texto-suave) !important;
  }

  .sin-margen {
    margin: 0 !important;
  }
}