/* ==========================================================================
   cartel.css — capa de rediseño "cartel de madrugada" (2026-08-31)
   --------------------------------------------------------------------------
   Va la última, después de paginas.css, y re-viste el sistema que ya existe
   sin tocar su estructura: los mismos nombres de clase, la misma paleta de
   marca. Lo que cambia es el acabado.

   Tres decisiones y su porqué:

   1. TIPOGRAFÍA. Anton y Outfit salen; entra Archivo variable. El eje de
      anchura (wdth 62-125) es la razón: los titulares van a 118-124 y quedan
      anchos como un cartel serigrafiado, mientras el texto corrido usa la
      anchura normal. Martian Mono se reserva para etiquetas, botones y
      cifras — nunca para leer párrafos.

   2. CANTOS VIVOS. Fuera los radios de 18px. En su lugar, un chaflán tipo
      entrada de fiesta (clip-path) y sombras duras desplazadas en vez de
      difuminadas. Es lo que separa un cartel impreso de una tarjeta de app.

   3. GRANO. Una capa de ruido SVG sobre todo el sitio. Es el cambio barato
      que más quita el aire de plantilla: rompe el color plano vectorial.

   Los brillos rojos (--brillo-rojo) se anulan aquí en vez de borrarse de
   base.css: si esta capa se quita, la web vuelve entera a como estaba.
   ========================================================================== */

:root {
  /* Ritmo vertical: su valor era clamp(2.75rem, 6vw, 5rem) y con los
     titulares anchos las secciones se tocaban unas con otras. */
  --seccion-y: clamp(3.4rem, 7vw, 7rem);
  --gap: clamp(1.1rem, 2.6vw, 2.2rem);

  /* Cantos vivos en todo el sistema */
  --radio: 0px;
  --radio-s: 0px;
  --radio-pill: 0px;
  --corte: 12px;              /* chaflán */

  /* La retícula se ensancha respecto a los 1180 originales, pero sin pasarse:
     a 1560 las galerías y los muros de fotos se veían demasiado anchos. */
  --ancho: 1460px;

  /* Los halos difuminados dejan paso a sombras duras */
  --brillo-rojo: none;
  --brillo-rojo-fuerte: none;
  --sombra-card: 0 22px 60px rgba(0, 0, 0, .6);

  /* Rojo plano: el degradado de tres paradas era lo más "genérico" del set */
  --degradado-rojo: var(--rojo);

  --hueso: #f6f2e9;
  --mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'Archivo', 'Arial Black', sans-serif;
  --curva: cubic-bezier(.16, .84, .28, 1);
}

/* --------------------------------------------------------------------------
   1 · Atmósfera: trama de puntos detrás y grano de imprenta delante
   -------------------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 8% -10%, rgba(227, 6, 19, .22), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(246, 242, 233, .06) 1px, transparent 0) 0 0 / 24px 24px;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2 · Titulares: anchos, apretados, alineados a la izquierda
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-stretch: 120%;
  font-variation-settings: 'wdth' 120, 'wght' 900;
  letter-spacing: -.03em;
  line-height: .88;
  text-transform: uppercase;
}

h4, h5 {
  font-stretch: 110%;
  font-variation-settings: 'wdth' 110, 'wght' 800;
  letter-spacing: -.01em;
}

/* Cabecera de sección: se abandona el centrado. Un titular a la izquierda con
   su marca de doble barra ordena la página mucho mejor que nueve bloques
   centrados idénticos, que es justo lo que delata una plantilla. */
.cabecera-seccion--centro {
  align-items: flex-start;
  text-align: left;
}
.cabecera-seccion--centro .entradilla { margin-inline: 0; }
.cabecera-seccion--centro .kicker { align-self: flex-start; }
.acciones--centro { justify-content: flex-start; }

.cabecera-seccion h2::before,
.cabecera-seccion h1::before {
  content: '//';
  font-family: var(--mono);
  font-size: .3em;
  font-weight: 700;
  font-variation-settings: normal;
  color: var(--rojo-vivo);
  vertical-align: .95em;
  margin-right: .5em;
  letter-spacing: 0;
}

/* Etiqueta sobre el título: mono y en blanco, con un rombo rojo.
   Antes era texto rojo con una rayita; el rojo se reserva ahora para las
   masas grandes y los acentos, no para el texto pequeño. */
.kicker {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .26em;
  color: var(--hueso);
  gap: .7em;
}
.kicker::before {
  width: .55em;
  height: .55em;
  background: var(--rojo-vivo);
  transform: rotate(45deg);
  box-shadow: none;
  flex: none;
}

.entradilla { color: var(--texto-medio); max-width: 62ch; }

/* --------------------------------------------------------------------------
   3 · Botones: chaflán de entrada de fiesta y sombra dura
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
  transition: transform .3s var(--curva), background .3s, color .3s, box-shadow .3s;
}

.btn--primario {
  background: var(--rojo);
  color: var(--hueso);
  box-shadow: none;
}
.btn--primario:hover {
  background: var(--hueso);
  color: var(--fondo);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--rojo);
}

.btn--fantasma {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(246, 242, 233, .45);
  background: transparent;
}
.btn--fantasma:hover {
  background: var(--hueso);
  color: var(--fondo);
  transform: translate(-3px, -3px);
  box-shadow: inset 0 0 0 1px var(--hueso), 6px 6px 0 var(--rojo);
}

/* WhatsApp se queda verde WhatsApp: es el único verde de la web y la gente
   lo reconoce por el color antes que por el icono. */
/* Texto en blanco, no en verde oscuro: al lado del botón rojo -que va en
   hueso- la pareja no concordaba. */
.btn--wa {
  background: #25d366;
  color: #fff;
  box-shadow: none;
}
.btn--wa:hover {
  background: #1fb855;
  color: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--fondo);
}

/* --------------------------------------------------------------------------
   4 · Tarjetas: ficha editorial, no caja redondeada
   -------------------------------------------------------------------------- */
.card,
.local,
.otra-fiesta,
.testimonio,
.faq__item {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.card { transition: transform .45s var(--curva), background .45s; }
.card:hover { transform: translateY(-7px); }

.card__media,
.card__media img,
.duo__media,
.duo__media img,
.carrusel img,
.local img {
  border-radius: 0;
}

.card__media img,
.duo__media img {
  filter: grayscale(.3) contrast(1.06);
  transition: filter .5s var(--curva), transform .8s var(--curva);
}
.card:hover .card__media img,
.duo:hover .duo__media img { filter: none; transform: scale(1.04); }

/* --------------------------------------------------------------------------
   5 · Migas, formularios y detalles en mono
   -------------------------------------------------------------------------- */
.migas,
.migas a {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.campo label,
.campo > span {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.campo input,
.campo select,
.campo textarea {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   6 · Foco visible, coherente con el resto
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--hueso);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7 · Palabras largas en pantallas estrechas
   --------------------------------------------------------------------------
   El eje de anchura hace los titulares bastante más anchos que Anton, que era
   condensada. En móvil eso hacía que "UNIVERSIPARTY" o "GRADUACIONES" se
   salieran de su caja, así que ahí se vuelve a anchura normal. */
@media (max-width: 640px) {
  h1, h2, h3 {
    font-stretch: 100%;
    font-variation-settings: 'wdth' 100, 'wght' 900;
    overflow-wrap: break-word;
  }
}

/* --------------------------------------------------------------------------
   8 · Ajustes de anchura para cajas pensadas para una condensada
   --------------------------------------------------------------------------
   Anton era condensada; Archivo a wdth 118 ocupa bastante más. En las piezas
   con caja estrecha se baja el eje en vez de bajar el cuerpo: se conserva la
   presencia y deja de salirse. */
.cifra b {
  font-stretch: 104%;
  font-variation-settings: 'wdth' 104, 'wght' 900;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  letter-spacing: -.02em;
}

/* La banda de cifras grandes: 5.5rem en Archivo ancha no cabía en su columna */
.seccion--cifras .cifra b {
  font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 900;
  /* Ojo al tocar esto: la banda lleva filete y sangrado a la izquierda, así
     que la caja útil son ~18px menos. Con 4rem "111.000+" se salía a 1440. */
  font-size: clamp(2rem, 4vw, 3.6rem);
}

/* 108 de anchura dejaba "Graduaciones" 4px fuera de su tarjeta a 1440. */
.card h3,
.otra-fiesta__nombre,
.local h3 {
  font-stretch: 102%;
  font-variation-settings: 'wdth' 102, 'wght' 900;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   9 · Scroll horizontal en tablet (fallo que ya venía de antes)
   --------------------------------------------------------------------------
   Entre 768 y 1024 el documento medía 574px más de ancho que la ventana y la
   web se movía en horizontal. Comprobado que no es el panel del menú:
   ocultándolo el scroll seguía igual. `clip` en las dos capas lo corta sin
   crear un contenedor de scroll —`hidden` sí lo crearía y rompería el salto
   con anclas. Hace falta también en body: puesto sólo en html, el valor se
   propaga desde body y se queda en `visible`. */
html,
body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   10 · Titulares de tarjeta y cifras en pantallas estrechas
   -------------------------------------------------------------------------- */
h3 {
  font-stretch: 110%;
  font-variation-settings: 'wdth' 110, 'wght' 900;
}

@media (max-width: 640px) {
  .cifra b,
  .seccion--cifras .cifra b {
    font-stretch: 92%;
    font-variation-settings: 'wdth' 92, 'wght' 900;
    font-size: clamp(1.35rem, 6.4vw, 2rem);
  }
}

/* --------------------------------------------------------------------------
   11 · Tope de columnas al ensanchar la retícula
   --------------------------------------------------------------------------
   Las rejillas son `auto-fit` con un mínimo en píxeles. Con el contenedor a
   1180 salían 3-4 columnas; al subirlo a 1560 salían hasta 7, y las tarjetas
   se quedaban en 195px con los títulos partidos. El mínimo sube en la misma
   proporción para que el ancho extra haga las tarjetas más grandes, no más
   tarjetas. */
@media (min-width: 1200px) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   12 · Botones en móvil
   --------------------------------------------------------------------------
   Martian Mono con .18em de espaciado alarga bastante las etiquetas: en el
   aviso de cookies, "Solo las necesarias" saltaba a dos líneas y quedaba más
   alto que el botón de al lado. */
@media (max-width: 480px) {
  .btn {
    font-size: .64rem;
    letter-spacing: .13em;
    padding: .95rem 1.35rem;
  }
}

/* ==========================================================================
   13 · PORTADA — composición de cartel
   --------------------------------------------------------------------------
   Tres filas en vez de un bloque centrado:

     · arriba      logo y estado de reservas, separados por un filete;
     · abajo izq.  el titular grande y los botones;
     · derecha     el claim arriba y las cifras abajo, estirado de arriba
                   abajo para que la columna pese lo mismo que el titular.

   El equilibrio venía justo de ahí: con el contenido pegado abajo quedaban
   375px de negro muerto en la mitad superior a 1080 de alto. Ahora la columna
   derecha ocupa esa franja y el vídeo queda enmarcado por contenido.
   ========================================================================== */

.hero--cartel {
  position: relative;
  /* Pantalla completa. El bloque de texto se queda arriba pegado al menú y
     la banda de cifras cierra abajo, así que el alto de más se lo lleva el
     centro: ahí es donde se ve el vídeo. */
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  padding: calc(var(--nav-h) + clamp(30px, 5.5vh, 76px)) 0 clamp(34px, 5vh, 60px);
  overflow: hidden;
  isolation: isolate;
}

.hero--cartel .hero__fondo { position: absolute; inset: 0; z-index: -3; }
.hero--cartel .hero__fondo img,
.hero--cartel .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--cartel .hero__video {
  opacity: 0;
  transition: opacity .9s ease;
}
.hero--cartel .hero__video.listo { opacity: 1; }

/* Velo: negro arriba y abajo, rojo entrando en diagonal, y un barrido de
   líneas finas encima. Es lo que hace que el fondo se lea como un cartel y no
   como una foto de archivo con texto encima. */
.hero--cartel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, var(--fondo) 2%, rgba(8, 7, 10, .74) 34%, rgba(8, 7, 10, .30) 62%, rgba(8, 7, 10, .88) 100%),
    linear-gradient(115deg, rgba(227, 6, 19, .40) 0%, transparent 48%);
}
.hero--cartel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .5) 0 1px, transparent 1px 4px);
}

/* La reja: cabecera arriba a todo el ancho, y debajo dos columnas */
.hero__reja {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(28px, 4.5vw, 80px);
  row-gap: clamp(34px, 5vh, 62px);
  align-content: stretch;
  /* Sin `width`: la anchura y los márgenes los pone .contenedor
     (`width: min(100% - 2.5rem, var(--ancho))`). Poniendo width:100% aquí se
     comía los márgenes laterales y el contenido salía pegado al canto. */
}

.hero__cabecera {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(246, 242, 233, .16);
}

.hero__logo {
  width: clamp(52px, 5.2vw, 84px);
  height: auto;
  filter: drop-shadow(0 6px 28px rgba(227, 6, 19, .55));
}

.hero--cartel .hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: clamp(.6rem, 1.1vw, .72rem);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--hueso);
}
/* El punto que late ya lo pone .hero__badge::before en home.css: no hace
   falta añadir otro. Aquí sólo se le quita la cápsula. */

.hero--cartel .hero__contenido {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  max-width: none;
  text-align: left;
}

.hero--cartel h1 {
  font-size: clamp(2.15rem, 6.5vw, 6.6rem);
  font-stretch: 122%;
  font-variation-settings: 'wdth' 122, 'wght' 900;
  line-height: .84;
  letter-spacing: -.045em;
  margin-bottom: clamp(30px, 4.2vw, 58px);
}
.hero--cartel h1 .linea { display: block; }

/* El renglón corto va pequeño y espaciado: da entrada al titular sin robarle
   presencia, y evita el bloque de tres líneas todas iguales. */
.hero--cartel h1 .linea--menor {
  font-size: .29em;
  font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: .2em;
  margin-bottom: .85em;
}

.hero--cartel h1 em {
  font-style: normal;
  -webkit-text-stroke: 2px var(--hueso);
  color: transparent;
}

/* La losa roja: una palabra sobre fondo pleno, como un sello.
   Letra blanca, no negra: sobre el rojo de marca el hueso da 4,6:1 y además
   es lo que hace que la palabra siga leyéndose como titular y no como un
   recorte. Misma regla en todos los banners rojos de la web. */
.hero--cartel h1 .losa {
  display: inline-block;
  background: var(--rojo);
  color: var(--hueso);
  padding: 0 .12em .06em;
}

/* Columna derecha estirada: claim arriba, cifras abajo */
.hero__ficha {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(26px, 4vh, 46px);
}

.hero--cartel .hero__claim {
  margin: 0;
  font-size: clamp(.92rem, 1.1vw, 1rem);
  line-height: 1.7;
  color: var(--texto-medio);
  border-left: 2px solid var(--rojo);
  padding-left: 18px;
}

/* Banda de cifras a todo el ancho, cerrando la portada por abajo */
.hero--cartel .hero__pie {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 48px);
  margin: 0;
  padding-top: clamp(22px, 3vh, 34px);
  border-top: 1px solid rgba(246, 242, 233, .18);
}
.hero--cartel .hero__pie > div {
  display: flex;
  align-items: baseline;
  gap: .7em;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.hero--cartel .hero__pie strong {
  font-family: var(--display);
  font-stretch: 110%;
  font-variation-settings: 'wdth' 110, 'wght' 800;
  font-size: clamp(1.6rem, 3vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--texto);
}

/* Texto en vertical pegado al canto: detalle de cartel impreso */
.hero__canto {
  position: absolute;
  left: 14px;
  bottom: 120px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(246, 242, 233, .42);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Entrada escalonada */
.hero__cabecera,
.hero--cartel h1 .linea,
.hero--cartel .acciones,
.hero__claim,
.hero--cartel .hero__pie,
.hero__canto {
  opacity: 0;
  animation: sube .95s var(--curva) forwards;
}
@keyframes sube {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__cabecera                  { animation-delay: .10s; }
.hero--cartel h1 .linea:nth-child(1) { animation-delay: .26s; }
.hero--cartel h1 .linea:nth-child(2) { animation-delay: .36s; }
.hero--cartel h1 .linea:nth-child(3) { animation-delay: .46s; }
.hero--cartel .acciones          { animation-delay: .60s; }
.hero__claim                     { animation-delay: .40s; }
.hero--cartel .hero__pie         { animation-delay: .70s; }
.hero__canto                     { animation-delay: .95s; }

/* El texto del canto sólo cabe cuando sobra margen lateral de verdad. El
   contenedor mide `min(100% - 2.5rem, 1560px)`, así que hasta 1700px de
   ventana los lados son 20px y el rótulo se montaba sobre el titular. */
@media (max-width: 1700px) {
  .hero__canto { display: none; }
}

@media (max-width: 1100px) {
  .hero__reja { grid-template-columns: 1fr; grid-template-rows: auto; }
  .hero--cartel .hero__contenido,
  .hero__ficha,
  .hero--cartel .hero__pie { grid-column: 1; }
  .hero--cartel .hero__contenido { grid-row: 1; }
  .hero__ficha { grid-row: 2; align-self: start; }
  /* Las cifras van detrás del claim, no delante: en una sola columna el orden
     de lectura es el del documento, y la banda es el cierre. */
  .hero--cartel .hero__pie { grid-row: 3; }
  .hero--cartel .hero__claim { max-width: 60ch; }
}

@media (max-width: 820px) {
  /* Tres cifras en fila no caben: "+111.000 ASISTENTES" se comía a la de al
     lado. Pasan a lista, con la cifra a la izquierda y la etiqueta a la
     derecha, que es como estaban antes de subirlas a banda. */
  .hero--cartel .hero__pie {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 6px;
  }
  .hero--cartel .hero__pie > div {
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid rgba(246, 242, 233, .16);
  }
  .hero--cartel .hero__pie strong { font-size: clamp(1.4rem, 6vw, 1.9rem); }
}

@media (max-width: 768px) {
  .hero--cartel { padding-bottom: 42px; }
  .hero--cartel h1 { font-size: clamp(2.15rem, 11.6vw, 4.2rem); font-stretch: 114%; font-variation-settings: 'wdth' 114, 'wght' 900; }
  .hero--cartel h1 .linea--menor { font-stretch: 100%; font-variation-settings: 'wdth' 100, 'wght' 600; }
  .hero__cabecera { padding-bottom: 14px; }
  .hero__reja { row-gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cabecera,
  .hero--cartel h1 .linea,
  .hero--cartel .acciones,
  .hero__claim,
  .hero--cartel .hero__pie,
  .hero__canto { opacity: 1; animation: none; }
}

/* ==========================================================================
   14 · Las fichas de dentro, al mismo idioma que la portada
   --------------------------------------------------------------------------
   Lo que chirriaba: medallones redondos con halo rojo, todo centrado y el
   "Ver más" en rojo. Eso es de otro sistema. Aquí manda lo mismo que arriba:
   cantos vivos, alineado a la izquierda, numeral de índice, etiqueta en mono
   y el rojo reservado para masas, no para textos pequeños.
   ========================================================================== */

.categoria {
  justify-items: start;
  text-align: left;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.25rem, 2vw, 1.6rem) clamp(1.35rem, 2.2vw, 1.7rem);
  counter-increment: ficha-cat;
  transition: transform .45s var(--curva), background .45s;
}
.categorias { counter-reset: ficha-cat; }

.categoria:hover {
  transform: translateY(-8px);
  border-color: var(--borde);
  background: var(--superficie-alta);
}

/* Numeral de índice arriba a la derecha, como en las fichas de la portada */
.categoria::after {
  content: counter(ficha-cat, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(246, 242, 233, .34);
}

/* El icono deja de ser una medalla: cuadro con chaflán, sin halo */
.categoria__icono {
  width: 62px;
  height: 62px;
  border-radius: 0;
  border: 1px solid var(--borde);
  background: rgba(246, 242, 233, .05);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .35s, border-color .35s;
}
.categoria:hover .categoria__icono {
  background: var(--rojo);
  border-color: var(--rojo);
}
.categoria__icono svg { width: 34px; height: 34px; stroke: var(--hueso); }
.categoria:hover .categoria__icono svg { stroke: var(--fondo); }

.categoria h3 {
  font-stretch: 112%;
  font-variation-settings: 'wdth' 112, 'wght' 900;
  letter-spacing: -.015em;
}

/* "Ver más" en mono y en hueso: el rojo se queda para los botones */
.categoria__mas {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--hueso);
  display: inline-flex;
  gap: .6em;
  transition: gap .35s var(--curva), color .3s;
}
.categoria__mas::after { content: '→'; }
.categoria:hover .categoria__mas { gap: 1em; }

/* La foto del fondo: gris de fondo y a color al pasar, como las tarjetas */
.categoria__foto img {
  filter: grayscale(.55) contrast(1.08);
  transition: filter .55s var(--curva), transform .8s var(--curva);
}
.categoria:hover .categoria__foto img { filter: grayscale(.1); transform: scale(1.05); }

/* --------------------------------------------------------------------------
   14.1 · Banda de cifras: filete rojo y etiqueta en mono, alineado izquierda
   -------------------------------------------------------------------------- */
.seccion--cifras .cifras { text-align: left; }
.seccion--cifras .cifra {
  padding-left: 18px;
  border-left: 2px solid var(--rojo);
}
.seccion--cifras .cifra::before { display: none; }
.seccion--cifras .cifra b { text-shadow: none; }
.seccion--cifras .cifra span {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* --------------------------------------------------------------------------
   14.2 · Chapa de fecha de las próximas fiestas
   -------------------------------------------------------------------------- */
[class*='evento'] [class*='fecha'],
.evento__fecha {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   14.3 · Cinta marquesina: la misma que en la portada que le gusta
   -------------------------------------------------------------------------- */
.marquesina {
  background: var(--rojo);
  border-block: 2px solid var(--fondo);
}
.marquesina__pista span {
  font-family: var(--display);
  font-stretch: 108%;
  font-variation-settings: 'wdth' 108, 'wght' 800;
  color: var(--hueso);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14.4 · Muro de residencias y universidades
   --------------------------------------------------------------------------
   Las placas venían con un filo de color por tipo: rojo, violeta y turquesa.
   Agrupar por color está bien pensado, pero el violeta y el turquesa se salen
   de la paleta y hacen ruido. La etiqueta de arriba ya dice de qué tipo es
   cada una, así que el color pasa a ser siempre el rojo de marca y quien
   agrupa es el texto. */
.marca,
.marca[data-tipo='universidad'],
.marca[data-tipo='hospital'] { --tono: var(--rojo); }

/* Tres filas exactas. Son 15 placas (14 residencias y universidades + la de
   "la siguiente, la tuya"), así que los repartos que cuadran son 5x3 y 3x5.
   Con `flex` y una base en rem salía lo que cupiera —siete por fila a 1560, y
   la última coja—, así que pasa a rejilla con el número de columnas dicho a
   mano en cada tramo. */
.muro-marcas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.marca {
  flex: none;
  max-width: none;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background: var(--superficie);
  text-align: left;
  justify-items: start;
}
.marca > span:first-child,
.marca [class*='tipo'] {
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.marca strong,
.marca b {
  font-family: var(--display);
  font-stretch: 110%;
  font-variation-settings: 'wdth' 110, 'wght' 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   14.5 · Pie y formulario: los últimos rótulos rojos que quedaban
   --------------------------------------------------------------------------
   Los títulos de columna del pie y las etiquetas de los campos iban en rojo
   vivo. En texto pequeño el rojo sobre negro se queda en 3.8:1 de contraste y
   además rompe la regla del sistema: el rojo va en masas, no en letra chica.
   Pasan a mono en hueso, con el rombo rojo de acento. */
.pie h4 {
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 600;
  font-variation-settings: normal;
  font-stretch: normal;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--hueso);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.pie h4::before {
  content: '';
  width: .5em;
  height: .5em;
  background: var(--rojo-vivo);
  transform: rotate(45deg);
  flex: none;
}

.campo label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--texto-tenue);
}
.campo label span { color: var(--rojo-vivo); }

/* La firma tipográfica del pie, como en la portada que le gusta */
.pie__rejilla { position: relative; }
.pie .contenedor { overflow: clip; }

/* --------------------------------------------------------------------------
   14.6 · Últimos rótulos: cabecera del formulario y pie de las reseñas
   -------------------------------------------------------------------------- */

/* La cabecera del formulario era el único titular centrado que quedaba */
.formulario__cabecera {
  text-align: left;
  align-items: flex-start;
}
.formulario__cabecera h2::before {
  content: '//';
  font-family: var(--mono);
  font-size: .3em;
  font-weight: 700;
  font-variation-settings: normal;
  font-stretch: normal;
  color: var(--rojo-vivo);
  vertical-align: .95em;
  margin-right: .5em;
}
.formulario__cabecera p { margin-inline: 0; }

/* El "Cumpleaños · Vallecas" de cada reseña iba en rojo vivo a 12px */
.testimonio footer span,
.testimonio__meta,
.testimonio cite + span,
.testimonio small {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* --- 14.7 · La llamada final, al idioma del cartel ------------------------
   `.acciones--centro` pasó a alinear a la izquierda, pero `.cta-final`
   seguía centrando su titular y su texto: quedaba el título en el centro
   con el botón pegado al canto izquierdo, cada uno por su lado. Todo a la
   izquierda, con la doble barra, como el resto de cabeceras. */
.cta-final { text-align: left; }
.cta-final .entradilla { margin-inline: 0; }
.cta-final h2::before {
  content: '//';
  font-family: var(--mono);
  font-size: .3em;
  font-weight: 700;
  font-variation-settings: normal;
  font-stretch: normal;
  color: var(--rojo-vivo);
  vertical-align: .95em;
  margin-right: .5em;
}

/* Y el brillo rojo del fondo deja de estar clavado en el centro: entra en
   diagonal desde la izquierda, como los velos de las portadas. */
.cta-final::before {
  background: linear-gradient(115deg, rgba(227, 6, 19, .30) 0%, transparent 55%);
}

@media (max-width: 1149px) {
  .muro-marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .muro-marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   15 · Los iconos, sin caja
   --------------------------------------------------------------------------
   Había tres contenedores distintos metiendo cada icono en un cuadradito:
   `.lista-check__icono` (borde + degradado radial rojo), `.dato__icono`
   (caja de 42px con fondo rojo al 16%) y `.categoria__icono`. Tres cajas
   pequeñas repetidas veinte veces por página ensucian: cada una pide un
   borde, un fondo y un radio, y compiten con las fichas que ya son cajas.

   El icono se sostiene solo. Sin borde, sin fondo y sin padding: sólo el
   trazo, en rojo, alineado con el texto que acompaña.
   ========================================================================== */

.lista-check__icono,
.dato__icono,
.categoria__icono {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.lista-check__icono {
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--rojo-vivo);
  stroke-width: 1.9;
}
.lista-check li:hover .lista-check__icono { transform: none; }

.dato__icono {
  width: 30px;
  height: 30px;
  color: var(--rojo-vivo);
}
.dato__icono svg { width: 26px; height: 26px; }

/* En las fichas de categoría el icono es la ilustración principal: sin caja
   puede crecer y ganar presencia. */
.categoria__icono {
  width: auto;
  height: auto;
  display: block;
}
.categoria__icono svg {
  width: 46px;
  height: 46px;
  stroke: var(--rojo-vivo);
  transition: stroke .35s, transform .45s var(--curva);
}
.categoria:hover .categoria__icono svg {
  stroke: var(--hueso);
  transform: scale(1.06);
}

/* ==========================================================================
   16 · Repaso de revisión
   ========================================================================== */

/* --- 16.1 · Las portadas de página, con el mismo tratamiento que el inicio --
   Tenían un velo flojo y nada más. Al lado de la portada del inicio parecían
   de otra web. Ahora llevan el mismo velo en diagonal, el mismo barrido de
   líneas y el texto apoyado abajo en vez de flotando en el centro. */
.portada { align-content: end; }

.portada::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .3;
  background:
    linear-gradient(115deg, rgba(227, 6, 19, .30) 0%, transparent 46%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .5) 0 1px, transparent 1px 4px);
}
.portada > .contenedor { position: relative; z-index: 1; }

/* --- 16.2 · El renglón rojo de los titulares de portada -------------------
   Iba en rojo pleno sobre foto: "HABLAMOS" en rojo a 90px se queda en 3,8:1
   de contraste y encima rompe la regla del sistema (el rojo va en masas, no
   en letra). Pasa a losa: fondo rojo y letra en tinta, como "MADRID" en el
   inicio. Se lee a la primera y es el mismo gesto. */
.portada h1 .degradado {
  display: inline-block;
  background: var(--rojo);
  color: var(--hueso);
  padding: 0 .12em .06em;
  -webkit-text-fill-color: currentColor;
}

/* --- 16.3 · Últimos iconos dentro de un círculo --------------------------- */
.canal__icono,
.paso__icono,
.contacto__icono,
[class*='__icono'] {
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* --- 16.4 · Pies de tarjeta alineados ------------------------------------
   El enlace "Ver más" quedaba a distinta altura en cada tarjeta de la fila,
   porque los títulos ocupan una o dos líneas. Con la columna estirada, el
   enlace se pega abajo y la fila queda a escuadra. */
.card { display: flex; flex-direction: column; }
.card__media { flex: none; }
.card__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .55rem;
}
.card__cuerpo .categoria__mas,
.card__cuerpo .card__mas { margin-top: auto; padding-top: .5rem; }

/* Lo mismo en las fichas de categoría */
.categoria { align-content: start; }
.categoria .categoria__mas { margin-top: auto; }

/* --------------------------------------------------------------------------
   17 · Márgenes laterales
   --------------------------------------------------------------------------
   El contenedor era `min(100% - 2.5rem, var(--ancho))`: 20px a cada lado,
   fijos. Con el ancho subido a 1560 eso significaba que entre 1200 y 1690 de
   ventana el contenido iba casi pegado al canto —el titular arrancaba a 20px
   del borde de la pantalla— y se leía apretado.

   Ahora el margen crece con la ventana y sólo se planta cuando el tope de
   1560 toma el relevo (por encima de ~1690, donde ya sobra sitio de sobra).
   En móvil se queda en los 20px de siempre, que ahí es lo correcto. */
.contenedor {
  width: min(100% - clamp(2.5rem, 6.5vw, 8rem), var(--ancho));
}

/* En móvil eran 14px por lado. Se quedan en 20, como el resto del sistema:
   14 con titulares tan grandes hace que el texto roce el canto. */
@media (max-width: 480px) {
  .contenedor { width: min(100% - 2.5rem, var(--ancho)); }
}

/* --------------------------------------------------------------------------
   18 · El menú, en el mismo eje que el contenido
   --------------------------------------------------------------------------
   `.nav__interior` llevaba su propio `min(100% - 2rem, ...)`: 16px por lado,
   fijos. El contenido va ahora con margen variable, así que a 1440 el logo
   arrancaba en 16 y el titular en 47 — dos ejes distintos a la vista. Con la
   misma fórmula, logo, titular y todo lo demás caen en la misma vertical. */
.nav__interior {
  width: min(100% - clamp(2.5rem, 7.5vw, 9.5rem), var(--ancho));
}

@media (max-width: 480px) {
  .nav__interior { width: min(100% - 2.5rem, var(--ancho)); }
}

/* --------------------------------------------------------------------------
   19 · Mosaico recortado, con su botón centrado
   --------------------------------------------------------------------------
   Dos tarjetas de la misma fila con distinto número de fotos dejaban un
   socavón: la de doce fotos estiraba la fila y la de seis se quedaba con el
   fondo vacío debajo. Ahora todas enseñan las mismas y el resto sale al
   pulsar. El botón va centrado, que es donde se busca. */
.carrusel[data-recortado] .carrusel__pista > *:nth-child(n + 7) { display: none; }

.carrusel__mas {
  display: block;
  margin: 0 auto clamp(1.1rem, 3vw, 1.75rem);
  padding: .9rem 1.7rem;
  background: transparent;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(246, 242, 233, .32);
  color: var(--texto);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background .3s, color .3s, transform .3s var(--curva), box-shadow .3s;
}
.carrusel__mas:hover {
  background: var(--hueso);
  color: var(--fondo);
  transform: translate(-3px, -3px);
  box-shadow: inset 0 0 0 1px var(--hueso), 6px 6px 0 var(--rojo);
}