/* =============================================================================
   MATCH BILBAO BIZKAIA 2026
   -----------------------------------------------------------------------------
   Visual language taken from the current Match Bilbao Bizkaia website:
     · Bariol for headings, in the institutional red #AE0000
     · Roboto for body copy, in grey #7A7A7A
     · white ground, generous whitespace, no card chrome
     · full-bleed logo grid for the exhibitors
     · dark charcoal footer with the diagonal top edge
   Nothing here departs from that language; only the page structure is new.

   1. Fonts
   2. Tokens
   3. Reset & base
   4. Layout & typography
   5. Buttons & links
   6. Header
   7. Hero
   8. Programme
   9. Presentation of Bilbao
  10. Videos
  11. Meet BB's Experts
  12. Exhibitors (logo grid)
  13. Exhibitor page
  14. Discover (brochures)
  15. Contact
  16. Footer
  17. Modal
  18. Utilities & motion
  19. Responsive
   ========================================================================== */

/* 1. FONTS =================================================================
   LAS DOS TIPOGRAFÍAS SE SIRVEN DESDE AQUÍ, NO DESDE GOOGLE.
   Roboto venía de fonts.googleapis.com, y eso significaba que el navegador de
   cada visitante pedía la letra a un servidor de Google ANTES de dibujar nada,
   enviándole su dirección IP en cada carga de cada página. No es una cookie y
   no guarda nada en el dispositivo, pero sí es un dato personal viajando a un
   tercero fuera del Espacio Económico Europeo, sin que el visitante lo pida ni
   pueda evitarlo. Hay jurisprudencia europea sobre exactamente esto.

   Ahora los ocho archivos están en assets/fonts/ y la web no habla con nadie
   para dibujarse. Son los subconjuntos latino y latino extendido en los cuatro
   pesos que se usan: 283 KB en total, y el navegador solo baja los que la
   página necesita de verdad, que es para lo que sirve `unicode-range`.

   Faltan los alfabetos cirílico, griego y vietnamita, que Google servía y aquí
   no están. La web es en inglés y los nombres que aparecen son vascos,
   españoles y del resto de Europa occidental: todo eso cabe en estos dos
   subconjuntos. Si algún día hay que escribir un nombre en griego o cirílico,
   se añade su archivo aquí y ya está.
   ========================================================================== */
@font-face {
  font-family: "Bariol";
  src: url("../fonts/bariol-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bariol";
  src: url("../fonts/bariol-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/roboto-300-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;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/roboto-300-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: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-400-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;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-400-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: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-500-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;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-500-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: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-700-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;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-700-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;
}

/* 2. TOKENS ================================================================ */
:root {
  /* Colours of the original site */
  --red: #ae0000;          /* headings, links — Elementor "primary" */
  --red-btn: #c9202c;      /* LOG IN pill */
  --red-btn-dark: #a5161f;
  --grey-dark: #54595f;    /* "secondary" */
  --grey: #7a7a7a;         /* body text */
  --grey-light: #9aa0a6;
  --line: #e6e6e6;
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --charcoal: #333333;     /* footer */

  --font-head: "Bariol", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
    sans-serif;

  /* El ancho de la página. En pantallas grandes se notaba mucho margen a los
     lados y las portadas de los folletos salían pequeñas para el sitio que
     había. Los párrafos no se estiran con esto: los limita `.measure` a 68
     caracteres por línea, que es lo que se lee cómodo. Lo que crece son las
     imágenes y las retículas, que es donde sobraba hueco.

     Es una sola línea: bajarla vuelve a dejar la página más estrecha. */
  --shell: 1320px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(3rem, 7vw, 6rem);
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --header-h: 92px;
}

/* 3. RESET & BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 10px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--grey);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--red);
  color: #fff;
  padding: 0.7rem 1.2rem;
}
.skip-link:focus { left: 0; }

/* 4. LAYOUT & TYPOGRAPHY =================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* La cabecera y las retículas anchas van al mismo ancho que el resto de la
   página, no a uno propio. Antes eran 1300 frente a 1140, y eso dejaba el
   logotipo 80px por fuera del texto que tenía justo debajo: la cabecera
   parecía descolocada respecto al contenido. Atado a --shell, no pueden
   separarse otra vez. */
.shell--wide { max-width: var(--shell); }

.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
/* Less air at the foot of a section whose column already ends short */
.section--tight { padding-bottom: clamp(1.5rem, 3.5vw, 3rem); }

/* El destino se lee como UNA PANTALLA: se llega a él desde el menú y lo que
   se ve al llegar tiene que ser la sección entera, no la mitad. Por eso lleva
   menos aire que las demás secciones —las otras se encuentran bajando, y ahí
   el aire separa; aquí solo ocupa sitio—, arriba y también abajo, que es lo
   que hizo falta el día que la sección ganó la flecha hacia el programa. */
#presentation {
  padding-top: clamp(1rem, min(3vw, 3.7vh), 2.5rem);
  padding-bottom: clamp(1rem, min(3.5vw, 4.2vh), 2.75rem);
}
/* Y su flecha, pegada a lo que cierra la sección. En las demás el hueco de
   siempre separa bien; aquí cada píxel de más la echa por debajo del borde,
   que es justo donde una flecha que dice "hay más abajo" no sirve de nada. */
#presentation .cue { margin-top: clamp(0.25rem, min(1vw, 0.8vh), 0.75rem); }

/* Y lo mismo, por la misma razón, en "Meet BB's Experts": al llegar desde el
   menú se ven el titular, el párrafo y la banda roja, y la pantalla se acaba
   justo ahí. El pie que avisa de que debajo están los expositores caía dos
   dedos por debajo del borde, o sea que no avisaba a nadie. Recortando el aire
   de arriba y el del titular, entra. */
/* Los vídeos son una pantalla: dos carátulas, sus títulos y el pie que invita
   a seguir. Con el aire de una sección normal no cabía. */
#editions { padding-block: clamp(1.25rem, min(4vw, 4.5vh), 3rem) clamp(1.25rem, min(4vw, 4.5vh), 3.5rem); }
#editions .section-head { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

#event { padding-block: clamp(1.25rem, min(4vw, 3.5vh), 3rem); }

#experts { padding-top: clamp(1.5rem, 3vw, 2rem); }
#experts > .shell > .section-head:first-child {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--red);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

.h-hero { font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.12; }
.h-1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.h-2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.h-3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); }

.h-center { text-align: center; }

/* Small grey caption above a heading, as used across the original site */
.kicker {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--grey-light);
  margin: 0 0 0.5rem;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.08rem; line-height: 1.75; }
.text-justify { text-align: justify; }
.measure { max-width: 68ch; }

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { max-width: 72ch; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center p { margin-inline: auto; }

/* 5. BUTTONS & LINKS ======================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.9rem;
  border-radius: 999px;
  border: 2px solid var(--red-btn);
  background: var(--red-btn);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--red-btn-dark); border-color: var(--red-btn-dark); }

.btn--outline { background: transparent; color: var(--red-btn); }
.btn--outline:hover { background: var(--red-btn); color: #fff; }

.btn--light { background: #fff; border-color: #fff; color: var(--red-btn); }
.btn--light:hover { background: rgba(255, 255, 255, 0.85); border-color: transparent; }

.btn--sm { padding: 0.55rem 1.35rem; font-size: 0.78rem; }
.btn--lg { padding: 0.9rem 2.3rem; font-size: 0.92rem; }
.btn .ico { width: 15px; height: 15px; }

/* --- "Add to calendar": el botón con su menú -------------------------------
   Es un <details>, así que se abre, se cierra y se maneja con el teclado sin
   una sola línea de JavaScript. Lo único que hace el script es cerrarlo al
   pulsar fuera, que es lo que espera cualquiera. */
.cal { position: relative; display: inline-block; }
.cal > summary { list-style: none; }
.cal > summary::-webkit-details-marker { display: none; }
.cal > summary::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.cal[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.cal > summary:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }

/* Se la pone el script al bloque que contiene un menú abierto. Sin esto, los
   bloques de debajo que todavía están entrando —y por tanto llevan transform—
   se dibujan encima, y el menú se ve pero no se deja pulsar. */
.cal-encima { position: relative; z-index: 60; }

.cal__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 15rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.13);
  text-align: left;
}
.cal__menu a,
.cal__menu button {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  border-radius: 9px;
  color: var(--grey-dark);
  font-size: 0.92rem;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cal__menu small { display: block; font-size: 0.75rem; color: var(--grey-light); }

/* Los dos encabezados del menú: "las fechas" y "el programa entero". No se
   pulsan, solo dicen de qué va cada mitad. */
.cal__group {
  padding: 0.5rem 0.8rem 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.cal__group--sep {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.cal__menu a:focus-visible,
.cal__menu button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
@media (hover: hover) {
  .cal__menu a:hover,
  .cal__menu button:hover { background: var(--bg-soft); color: var(--red); }
  .cal__menu a:hover small,
  .cal__menu button:hover small { color: var(--grey-dark); }
}

/* Pegado al borde derecho no cabe: el menú se abre hacia dentro. */
@media (max-width: 560px) {
  .cal, .cal > summary { display: flex; width: 100%; }
  .cal__menu { left: 0; right: 0; min-width: 0; }
}

.link-red {
  color: var(--red);
  font-family: var(--font-head);
  font-weight: 700;
  transition: opacity 0.25s var(--ease);
}
.link-red:hover { opacity: 0.7; }

/* 6. HEADER ================================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  /* El hueco entre el logotipo, el menú y los botones. Va más justo que el
     resto de la página porque en esta fila cabe poco: seis entradas de menú y
     dos botones dentro del mismo ancho que tiene el texto de abajo. */
  gap: 1rem;
  min-height: var(--header-h);
  padding-block: 0.75rem;
}
.header__brand { flex: none; display: flex; align-items: baseline; gap: 0.6rem; }
.header__brand img { height: 16px; width: auto; }
.header__year {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--red);
  letter-spacing: 0.06em;
}
.header__nav { margin-left: auto; }
.header__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__link {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey);
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.header__link:hover,
.header__link[aria-current="true"] { color: var(--red); }
.header__actions { flex: none; display: flex; align-items: center; gap: 0.5rem; }

/* La cabecera va más justa que el resto de la página, y por una razón que solo
   se ve el día que abre la plataforma: ese día el Login deja de ser un enlace
   y pasa a ser una pastilla, y dos pastillas ocupan unos 45px más que una
   pastilla y un enlace. A 1280px —una anchura de portátil de las más
   corrientes— el menú se quedaba sin sitio y se partía en dos filas.
   Aquí se recupera ese espacio: un poco menos de hueco entre las entradas del
   menú, un poco menos de relleno en los dos botones. No se nota mirando la
   web, y evita tener que plegar el menú 70px antes para todo el mundo. */
.header__actions .btn { padding-inline: 1.05rem; }

/* AQUÍ HABÍA DOS BOTONES Y TRES REGLAS MÁS.
   =========================================================================
   La cabecera llevaba Login y alta. Hasta el día que abría la plataforma el
   alta era el botón rojo y el Login un enlace de texto (`.header__login`); a
   partir de ese día se cambiaban los papeles. Y como en un móvil estrecho no
   caben logotipo, dos botones y el botón del menú, el Login se escondía de la
   barra y aparecía dentro del desplegable (`.header__links-login`), con la
   marca `.header__enter` para poder encontrarlo tuviera el aspecto que
   tuviera ese día.

   Ahora en la cabecera hay un botón y es el Login, siempre igual. No hace
   falta esconder nada en el móvil —logotipo, un botón y el menú caben hasta
   en 320px— ni tener una copia en el desplegable, ni un estilo de enlace para
   los días en que era enlace. Las tres reglas se fueron con los dos botones.

   `.header__enter` sigue puesto en el HTML, pero ya no lo lee ninguna regla:
   se queda como agarradero por si algún día hay que volver a distinguirlo. */

.burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 9px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--grey-dark);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.header[data-menu="open"] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header[data-menu="open"] .burger span:nth-child(2) { opacity: 0; }
.header[data-menu="open"] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 7. HERO ================================================================== */
/* ARRIBA MENOS QUE ABAJO, Y A PROPÓSITO.
   Antes eran 112px por los dos lados. Los de abajo separan la portada de la
   sección siguiente y hacen falta; los de arriba caían debajo de una cabecera
   que ya mide 93px, así que lo primero que veía quien abría la web eran 205px
   de blanco. Y ese blanco se pagaba al final: en un portátil corriente las
   cifras —4 días, 1:1— se quedaban por debajo del borde de la pantalla.
   Lo que se recorta aquí no se le quita a nada: se le quita al hueco.

   Y EL HUECO MIRA TAMBIÉN EL ALTO DE LA VENTANA, no solo el ancho.
   `min(3.5vw, 4vh)` se queda con el menor de los dos, así que en una pantalla
   ancha y baja —un portátil de 1366×768, que descontando pestañas y barra de
   tareas le deja al navegador unos 630px— el aire se encoge solo. Con vw a
   secas, esa pantalla recibía el mismo hueco que un monitor grande: el ancho
   le sobraba y el alto no lo tenía. */
.hero {
  position: relative;
  padding-block: clamp(1rem, min(3.5vw, 4vh), 3rem) clamp(2rem, min(8vw, 9vh), 7rem);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__dates {
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin: 0 0 1rem;
}
.hero__title { margin-bottom: 0.5rem; }
.hero__title .yr { color: var(--grey-dark); }
.hero__subtitle {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--grey-dark);
  margin: 0 0 1.1rem;
  line-height: 1.35;
}
.hero__lead { max-width: 56ch; margin-bottom: 1.25rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* LOS LOGOS DE QUIEN RESPALDA EL EVENTO, EN LA PORTADA.
   Los mismos del pie, pero aquí el fondo es claro y no hace falta la caja
   blanca que allí los despega del gris oscuro: van sueltos sobre la página.

   Más pequeños que en el pie —42px contra 56— porque aquí no son el cierre de
   la web sino una nota al pie de la entrada: tienen que decir quién está
   detrás sin quitarle la mirada al titular ni a los dos botones de abajo.
   Alineados a la izquierda, sobre el mismo eje que todo lo demás de esta
   columna, y no centrados como en el pie. */
/* `flex-start` y no `flex-end`: alineados por abajo, los dos grupos quedaban
   descolgados el uno del otro —su etiqueta a distinta altura— porque los
   logos que lleva cada uno no miden lo mismo. Alineados por arriba, las dos
   etiquetas van en la misma línea y las dos filas de logos también. El nivel
   de los logos dentro de su fila lo iguala la altura fija de `.socios__row`. */
.socios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Centrados en su columna, no pegados al margen izquierdo como el resto del
     texto. Ocupan poco más de un tercio del ancho, y arrimados a la izquierda
     dejaban un vacío a su derecha que se leía como que faltaba algo; en medio,
     el aire se reparte y los dos grupos se leen como un bloque. */
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0 0 clamp(0.9rem, min(2.2vw, 2.2vh), 1.35rem);
}
/* Cada grupo en una línea: la etiqueta, y al lado sus logotipos. Estuvo con la
   etiqueta encima, y así ocupa menos alto y se lee de corrido —"Organizer: tal,
   Strategic Partners: tal y tal"— en vez de como dos columnitas. */
.socios__grupo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.socios__head {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-light);
  /* La etiqueta no se parte en dos líneas: "Strategic / Partners" partido deja
     el logotipo descolgado a media altura de un texto de dos pisos. */
  white-space: nowrap;
}
/* La banda de altura fija es lo que pone a todos los logos al mismo nivel.
   Cada marca tiene sus proporciones —una es casi cuadrada, otra apaisada, otra
   lleva el texto al lado— y sin una banda común cada una se apoyaba donde le
   tocaba. Ahora todas se centran en la misma franja, midan lo que midan. */
.socios__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  gap: clamp(0.9rem, 2vw, 1.5rem);
}
.socios__item {
  display: grid;
  place-items: center;
  transition: opacity 0.25s var(--ease);
}
.socios__item:hover { opacity: 0.7; }
/* Por alto y con un tope de ancho: a igualdad de altura, una marca apaisada
   como Wizz Air ocupa el triple de superficie que una cuadrada y se come a
   las demás. El tope la sujeta sin deformarla —`object-fit: contain`— y deja
   los tres pesos parecidos. */
.socios__item img {
  height: 38px;
  width: auto;
  max-width: 128px;
  object-fit: contain;
}

/* Aquí hubo una pastilla oscura detrás del logo organizador, y una regla que
   le daba más alto por ir en vertical. Las dos sobran desde que ese logotipo
   es la versión horizontal con la letra en negro: va suelto sobre la página
   como los demás, y a la misma altura. */

@media (max-width: 560px) {
  .socios { gap: 1.1rem 1.5rem; }
  .socios__item img { height: 31px; }
}

.hero__media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__facts {
  display: grid;
  /* Adapts to however many figures are configured — three today, four before */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.hero__fact .v {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--red);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.hero__fact .l {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-light);
}

/* Placeholder tile used whenever an image file is not supplied yet */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 140px;
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
  background: var(--bg-soft);
  border: 1px dashed var(--line);
}

/* 8. PROGRAMME ============================================================= */
/* The programme is the heart of the page, so it gets a raised card of its own
   inside the event section instead of being one more quiet block. */
.prog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  /* EL AIRE DE ESTA TARJETA SE MIDE CONTRA LA PANTALLA.
     El programa es a lo que se llega desde el menú, y lo que se ve al llegar
     tiene que ser el programa entero, no sus dos tercios de arriba. Entre el
     relleno de la sección, el de la tarjeta y el hueco bajo el titular se
     iban 330px antes de la primera palabra del primer día. */
  /* Y menos relleno a los lados: cada 10px que se le quitan aquí son 10px más
     de ancho repartidos entre las cinco tarjetas de día, y cuanto más anchas,
     menos líneas ocupa el resumen de cada día. */
  padding: clamp(1rem, min(4vw, 3vh), 2rem) clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1rem, min(5vw, 3vh), 2rem);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.07);
}

.h-prog {
  text-align: center;
  font-size: clamp(1.75rem, min(4.4vw, 5vh), 2.6rem);
  letter-spacing: -0.01em;
  margin-bottom: clamp(0.9rem, min(3vw, 2.2vh), 1.5rem);
}

.prog__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.25rem;
  margin-bottom: 2.75rem;
}
.prog__tab {
  background: none;
  border: 0;
  padding: 0.35rem 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--grey);
  transition: color 0.25s var(--ease);
}
/* Solo donde hay ratón: en una pantalla táctil el "hover" se queda pegado
   después de tocar, y acababa habiendo dos días en rojo a la vez — el elegido
   y el último que se tocó. */
@media (hover: hover) {
  .prog__tab:hover { color: var(--red); }
}
.prog__tab[aria-selected="true"] { color: var(--red); }
.prog__tab .d { display: block; font-size: 0.78rem; font-weight: 400; color: var(--grey-light); }

.prog__panel[hidden] { display: none; }
.prog__theme {
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 2.5rem;
}

/* --- The day, as a timeline ----------------------------------------------
   Everything here is one colour. What makes a fifteen-slot day readable is
   structure, not emphasis: the day is cut into its parts, a rail runs down
   the times to carry the eye, and a session that lasts four hours says so.
   ------------------------------------------------------------------------ */

/* Where the rail runs, measured from the left edge of the list, and how much
   clearance everything keeps from it. The time column, the dot, the body and
   the band labels are all placed from these two, so they cannot drift apart
   when the rail moves — which is all that changes on a phone. */
.tl { --rail: 74px; --clear: 1.1rem; --dot: 7px; }
.tl[hidden] { display: none; }

.tl-band + .tl-band { margin-top: 1.6rem; }
.tl-band__label {
  margin: 0 0 0.5rem;
  padding-left: calc(var(--rail) + var(--clear) + 0.3rem);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
}

.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
  position: relative;
}
/* The rail. It stops short of the first and last dot so the line reads as
   joining them rather than running off the ends. */
.timeline::before {
  content: '';
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: var(--rail);
  width: 1px;
  background: var(--line);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--rail) - var(--clear)) 1fr;
  gap: calc(var(--clear) * 2);
  padding: 0.7rem 0;
  line-height: 1.5;
}
.tl-item--brief { padding: 0.45rem 0; }
.tl-item[hidden] { display: none; }

/* The dot sits on the rail, on the first line of the row. */
.tl-item::before {
  content: '';
  position: absolute;
  left: calc(var(--rail) - (var(--dot) / 2) + 0.5px);
  top: 1.05rem;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--grey-light);
}

.tl-item__time {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* The end of a session, under its start. Quieter, because the start is what
   somebody looks for and the end is what they check. */
.tl-item__to {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--grey-light);
  white-space: nowrap;
}
/* The dash is tied to the hour with a non-breaking space: in a narrow column
   it was falling onto a line of its own. */
.tl-item__to::before { content: '\2013\00a0'; }

.tl-item__body h3 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--grey-dark);
}
.tl-item--brief .tl-item__body h3 { margin: 0; }
.tl-item__body p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.tl-item__venue {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-light);
}

.prog__note {
  max-width: 820px;
  margin: 2.25rem auto 0;
  font-size: 0.86rem;
  color: var(--grey-light);
}

/* --- Programme: view switch, itineraries, overview ------------------------ */
/* The bar sits between the heading and the programme itself: how to read it
   on the left, what to take away on the right. */
.prog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(0.9rem, min(3vw, 2.2vh), 1.5rem);
}

/* A bordered pair reads unmistakably as two states of one thing, which a row
   of plain text buttons does not. */
.prog__views {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.prog__view {
  background: none;
  border: 0;
  padding: 0.55rem 1.35rem;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--grey);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.prog__view:hover { color: var(--red); }
.prog__view[aria-pressed="true"] { background: var(--red); color: #fff; }

.prog__pane[hidden] { display: none; }

/* The two itineraries of the day that splits. */
.prog__groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  max-width: 820px;
  margin: 0 auto 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.prog__group {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--grey);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.prog__group:hover { color: var(--red); border-color: var(--red); }
.prog__group[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.prog__groups__note {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-light);
}

/* .tl-item sets display:grid, which would defeat the hidden attribute. */
.tl-item[hidden] { display: none; }

.prog__day-cal { max-width: 820px; margin: 1.75rem auto 0; text-align: center; }

/* --- Overview: the five days side by side -------------------------------- */
/* The week as five rows, not five columns.
   -----------------------------------------------------------------------------
   It was five columns, which fits the days on one screen but gives each about
   230px to say anything in — so "Crusoe Treasure underwater winery" arrived
   over three lines, and because the summaries differ in length the highlight
   lists ended up at ragged heights with voids above them.

   Laid out as rows, the same content gets the full width of the shell: the day
   and its theme on the left, what happens that day on the right. Nothing wraps
   that does not need to, every day starts at the same left edge, and the eye
   reads down the week.

   This is done entirely in the stylesheet — the markup is untouched, so the
   WordPress plugin renders the same thing from the same classes. */
/* LA VISTA DE CONJUNTO: UNA TARJETA POR DÍA.
   ---------------------------------------------------------------------------
   Antes era una fila de ancho completo por día. Los cinco días ocupaban
   pantalla y media, y en una web donde el programa es justo lo que la gente
   viene a mirar, había que bajar solo para enterarse de cuántos días eran.

   En tarjetas se ven los cinco a la vez y se comparan sin leer: la forma de
   cada una ya dice si ese día está cargado o es de llegada. Para el detalle
   está la otra pestaña, que no se toca.

   `auto-fit` con un ancho mínimo evita fijar cuántas caben por fila: cinco en
   un monitor, dos o tres en una tableta y una en el móvil, sin una regla por
   cada tamaño y sin que ninguna quede estrujada. */
.prog__overview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 12rem, no 13: con 13 los cinco días sumaban justo el ancho disponible en
     un portátil de 1280 y el quinto se caía a una segunda fila él solo, que
     es precisamente lo que veníamos a evitar. */
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
}
.ov-day {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: clamp(0.7rem, min(2vw, 1.8vh), 1.1rem);
  display: flex;
  flex-direction: column;
  /* Los momentos destacados se pegan abajo, así que todas las tarjetas los
     alinean a la misma altura por mucho que su resumen ocupe más o menos. */
  gap: 0;
}
.ov-day__n {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.ov-day__date {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.ov-day__theme {
  margin: 0.35rem 0 0;
  font-size: 1.04rem;
  line-height: 1.22;
  color: var(--grey-dark);
}
.ov-day__text {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  line-height: 1.48;
  color: var(--grey);
}
/* Adónde va cada grupo el día que el programa se parte en dos. Van con punto
   —son dos opciones, no un texto seguido— y el nombre del grupo en negrita,
   que es lo que se busca al leerlas en diagonal. */
.ov-day__routes {
  margin: 0.45rem 0 0;
  list-style: disc;
  padding-left: 1.05rem;
  font-size: 0.79rem;
  line-height: 1.42;
  color: var(--grey);
}
.ov-day__routes li { margin: 0.2rem 0 0; }
.ov-day__routes b { color: var(--grey-dark); font-weight: 500; }

/* Los momentos del día, uno bajo otro con la hora delante. En una tarjeta
   estrecha una fila corrida se partiría por cualquier sitio y dejaría las
   horas huérfanas de su actividad. */
.ov-day__list {
  list-style: none;
  margin: auto 0 0;
  padding: 0.7rem 0 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.78rem;
}
.ov-day__list li {
  margin: 0;
  color: var(--grey-dark);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: baseline;
  line-height: 1.4;
}
.ov__t {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ov-day__split {
  margin: 0.4rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.ov-day__theme {
  margin: 0 0 0.6rem;
  font-size: 1.22rem;
  color: var(--red);
}
.ov-day__text { margin: 0; font-size: 0.95rem; line-height: 1.6; max-width: 60ch; }
/* The highlights run along the row instead of stacking. Three or four moments
   of a day are a line, not a list. */
.ov-day__list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  font-size: 0.875rem;
}
.ov-day__list li {
  margin: 0;
  color: var(--grey-dark);
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.ov__t {
  font-family: var(--font-head);
  font-weight: 700;
  /* Grey rather than red: the day's theme is already red just to its left, and
     two reds in the same row compete instead of ranking. */
  color: var(--grey-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ov-day__split {
  margin: 0.55rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-light);
}

@media (max-width: 620px) {
  .prog__bar { justify-content: center; }
  .prog__views { width: 100%; }
  .prog__view { flex: 1; }

  /* Los días, como una fila deslizable.
     ---------------------------------------------------------------------------
     Eran cinco nombres largos con `flex-wrap`, y a 390px se partían a capricho:
     uno, uno, dos juntos, uno. Quinientos píxeles de pestañas antes de llegar
     al programa, y sin parecer botones.

     Como fichas en una fila que se desliza con el dedo ocupan sesenta, se ve
     de un vistazo cuántos días hay, y el elegido se distingue por relleno y no
     solo por color. La fila llega hasta los bordes de la pantalla para que se
     note que hay más a la derecha. */
  .prog__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 0.5rem;
    margin: 0 calc(var(--gutter) * -1) 1.5rem;
    padding: 0 var(--gutter) 0.4rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .prog__tabs::-webkit-scrollbar { height: 3px; }
  .prog__tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

  .prog__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
    line-height: 1.25;
    white-space: nowrap;
  }
  .prog__tab[aria-selected="true"] {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }
  .prog__tab .d { font-size: 0.7rem; }
  .prog__tab[aria-selected="true"] .d { color: rgba(255, 255, 255, 0.85); }

  .prog__theme { margin-bottom: 1.5rem; }

  /* En el móvil, las cinco tarjetas van en una FILA QUE SE DESLIZA, no
     apiladas. Apiladas ocupaban más de dos pantallas —más que el diseño que
     vinimos a condensar— y para saber cuántos días eran había que bajar hasta
     el final. Deslizando, el programa entero cabe de un vistazo.
     Es el mismo gesto que ya hacen las pestañas de día, justo encima.

     Cada tarjeta ocupa el 78% del ancho, así que la siguiente ASOMA por el
     borde: sin ese trozo visible nadie sabría que hay más y se quedaría
     creyendo que el evento dura un día. */
  .prog__overview {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Los lados se comen el margen de la tarjeta para que la primera empiece
       alineada con el texto y la última no quede pegada al borde. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.35rem;
    scrollbar-width: none;
  }
  .prog__overview::-webkit-scrollbar { display: none; }
  .ov-day {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .ov-day__theme { font-size: 1.08rem; }
  .ov-day__text { font-size: 0.9rem; }
}

/* 9. PRESENTATION OF BILBAO ================================================ */
/* EL DESTINO TIENE QUE CABER EN UNA PANTALLA.
   Las dos fotos se apilaban con su proporción natural —4:3 cada una— y entre
   las dos medían más que el texto de al lado: se pulsaba "Destination" en el
   menú y la segunda foto quedaba cortada por el borde de abajo, así que la
   sección no se veía entera nunca.

   Ahora la columna de fotos MIDE LO QUE MIDA EL TEXTO y las fotos se reparten
   esa altura a partes iguales, recortando por los lados lo que sobre. Es lo
   que se hace con una foto de acompañamiento: importa que llene su hueco, no
   que se vea completa. Y como la altura la manda el texto, la sección entera
   ocupa lo que ocupe el texto, que es una pantalla. */
.present {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* `stretch` y no `start`: puestas en fila, las fotos miden bastante menos de
     alto que la columna de texto, y arrimadas arriba dejaban un palmo de
     blanco debajo que se leía como que faltaba algo. Estirando la columna y
     centrando lo que lleva dentro, ese aire se reparte arriba y abajo y las
     fotos quedan a la altura del texto. */
  align-items: stretch;
}
/* LAS DOS FOTOS: APILADAS, COMO SIEMPRE, PERO MÁS PEQUEÑAS.
   A 523px de ancho la sección medía 944 de alto y no entraba en ninguna
   pantalla: se llegaba a ella desde el menú y lo que se veía era el texto y
   media foto. Se probaron dos atajos y los dos cambiaban la sección en vez de
   las fotos —recortarlas a 2:1, que las dejaba aplastadas, y ponerlas en fila,
   que rompía la composición—. Lo que hacía falta era más simple: las mismas
   fotos, en el mismo sitio, un poco más pequeñas.

   A 330px la sección se queda en 699 y entra entera —con la flecha que lleva
   al programa incluida, que es lo último que hay y lo que de verdad tiene que
   verse—. El tope va en la columna
   y no en la retícula a propósito: así la columna de texto conserva sus 653px
   de ancho, que es la medida de línea con la que está compuesta. Y centradas,
   para que el hueco que sobra a su lado se reparta y no quede todo a un lado. */
.present__media {
  display: grid;
  gap: 1rem;
  max-width: 330px;
  margin-inline: auto;
  align-content: center;
}
.present__media figure { margin: 0; }
/* 4:3, la proporción de siempre. Estuvieron a 2:1 para que la sección del
   destino cupiera entera en una pantalla, y el precio era que las fotos se
   veían aplastadas: una panorámica forzada ya no es la foto. Cabe menos y se
   ven bien, que es el orden correcto de prioridades para una foto. */
.present__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.present__cap {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-light);
  padding-top: 0.5rem;
}

/* EL PIE QUE DICE QUE HAY MÁS ABAJO.
   La flecha es un cuadrado girado 45° con dos lados pintados: no hace falta
   traer un icono ni una tipografía más para dibujar una punta de flecha.
   Se mueve despacio, lo justo para que el ojo la encuentre, y se queda quieta
   para quien ha pedido menos movimiento en su sistema. */
.cue { margin: clamp(0.75rem, min(2vw, 2vh), 1.25rem) 0 0; text-align: center; }
.cue__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  /* DESTACADAS SIN SER MÁS GRANDES.
     El cuerpo se queda en 0.82rem: estas flechas van al pie de cada sección y
     a tamaño de titular competirían con el titular de la siguiente, que es
     justo lo que no tienen que hacer. Lo que cambia es el peso y el tono —de
     regular a negrita, y del gris del cuerpo al del pie, que es más oscuro—,
     y el grosor del trazo de la punta. Ocupan lo mismo y se ven bastante más;
     es lo que pasa con una palabra en negrita dentro de un párrafo. */
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.cue__link:hover { color: var(--red); }
.cue__arrow {
  width: 11px;
  height: 11px;
  /* 3px y no 2: la punta tiene que pesar lo mismo que el texto que lleva
     encima, o con el texto en negrita se queda en un hilo al lado. */
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  animation: cue-baja 2.4s var(--ease) infinite;
}
@keyframes cue-baja {
  0%, 60%, 100% { transform: rotate(45deg) translate(0, 0); }
  30%           { transform: rotate(45deg) translate(3px, 3px); }
}
@media (prefers-reduced-motion: reduce) {
  .cue__arrow { animation: none; }
}

/* Los tres bloques de la portada, entre la entrada y las cifras.
   La retícula se ajusta a cuantos haya —hoy tres— en vez de fijar cuatro
   columnas: con cuatro fijas y tres bloques quedaba una columna vacía a la
   derecha y el conjunto se leía descentrado. Es la misma regla que usan las
   cifras que van justo debajo, así que los dos bloques se alinean. */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  /* La raya de separación ya dice dónde acaba un bloque y empieza el otro, así
     que el hueco no tiene que decirlo otra vez. Eran 112px entre la entrada y
     estos tres bloques, y otros 104 hasta las cifras: 216px de nada en la
     parte de la web que más gente ve y menos gente baja. */
  margin-top: clamp(0.75rem, min(2.5vw, 3vh), 1.75rem);
  padding-top: clamp(0.75rem, min(2.5vw, 3vh), 1.75rem);
  border-top: 1px solid var(--line);
}
.pillar h2 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.pillar p { margin: 0; font-size: 0.92rem; }

/* 10. VIDEOS =============================================================== */

/* Los vídeos viven dentro de "Presentation of Bilbao", debajo del texto y las
   fotos. Necesitan aire por arriba y una línea que los separe, o se leerían
   pegados al último párrafo como si fueran parte de él; pero no tanto aire
   como para parecer otra sección distinta, que es justo lo que eran antes. */
/* Este titular llevaba encima una raya y 112px de hueco, que era lo que lo
   separaba del texto del destino cuando colgaba de él. Ya no cuelga de nada:
   es una sección, y una sección no necesita una raya para separarse de la
   anterior, que además es de otro color. */
.videos__head { margin-top: 0; padding-top: 0; border-top: 0; }

/* La rejilla no llega al ancho completo. Con los vídeos a 581px de ancho la
   sección medía 979px y no cabía en una pantalla de portátil: el pie que
   invita a seguir bajando quedaba fuera, o sea que no invitaba a nadie. A
   1040px caben los dos vídeos, sus títulos y el pie, todo a la vez. */
.videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1040px;
  margin-inline: auto;
}
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video__frame img,
.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video__play {
  position: relative;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 0;
  background: var(--red-btn);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease);
}
.video__play:hover { transform: scale(1.08); }
.video__play:disabled { background: var(--line); color: var(--grey-light); cursor: default; }
.video__play svg { width: 18px; height: 18px; margin-left: 3px; }
.video__ph {
  position: absolute;
  bottom: 0.9rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.video__meta { padding-top: 1rem; }
.video__meta h3 { font-size: 1.1rem; margin: 0 0 0.3rem; }
.video__meta p { margin: 0; font-size: 0.93rem; }

/* 11. MEET BB'S EXPERTS ==================================================== */
/* "How it works" va DESPUÉS de las dos puertas, así que necesita separarse de
   ellas con una línea: si no, los cuatro pasos parecen letra pequeña de la
   banda roja en vez de un apartado propio. */
/* Los cuatro pasos cierran la portada. El hueco mira también el alto de la
   ventana: en una pantalla ancha y baja se encoge solo, como el resto. */
/* Los cuatro pasos viven en su propia banda, y ahí el fondo gris ya los
   separa de lo de arriba: la raya sobraba. */
.steps__head { margin-top: 0; padding-top: 0; border-top: 0; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1rem, min(3.5vw, 3vh), 2.25rem);
  text-align: center;
}
.step__n {
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
}
.step h3 { font-size: 1.02rem; margin: 0 0 0.35rem; }
.step p { margin: 0; font-size: 0.92rem; }

/* Dos mitades: darse de alta y entrar. Cada una con su título, su explicación
   y su botón, separadas por una línea fina — no por un hueco, que a esta
   anchura se lee como que sobra sitio y no como que son dos cosas. */
/* LAS DOS PUERTAS, EN LA PORTADA.
   Caja gris y botones rojos, que es el lenguaje del resto de la web: el rojo
   macizo es la acción principal en todas partes, y aquí también. Estuvo un
   rato al revés —caja roja y botones blancos— y eso obligaba a invertirlo:
   la acción principal acababa en blanco, que es la que menos pesa.

   Lo demás no cambia: las dos mitades una al lado de la otra con una raya en
   medio, y en miniatura, porque vive en la columna del texto de la portada. */
.take-part {
  margin-top: clamp(0.9rem, min(2.5vw, 2.5vh), 1.4rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: clamp(0.85rem, min(2vw, 2.2vh), 1.15rem) clamp(1rem, 2vw, 1.3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.85rem, 2vw, 1.4rem);
  /* `stretch` y no `start`: las dos mitades ya no tienen la misma altura de
     contenido —la de entrar lleva encima el aviso de la fecha y la del alta
     no— y arrimadas arriba los dos botones quedaban a distinta altura, que en
     dos cosas que se ofrecen a la vez se lee como un descuido. */
  align-items: stretch;
}
.take-part__half { display: flex; flex-direction: column; align-items: flex-start; }
/* La raya va entre las dos, nunca antes de la primera. */
.take-part__half + .take-part__half {
  padding-left: clamp(0.85rem, 2vw, 1.4rem);
  border-left: 1px solid var(--line);
}
.take-part h2 {
  font-size: 0.98rem;
  line-height: 1.25;
  margin: 0 0 0.3rem;
}
.take-part p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--grey);
}
/* `auto` y no una medida fija: empuja el botón al fondo de su mitad, y como
   las dos mitades miden lo mismo, los dos botones se apoyan en la misma línea
   por mucho que una lleve encima el aviso de la fecha y la otra no. Con dos
   márgenes fijos quedaban a distinta altura, que en dos cosas ofrecidas a la
   vez se lee como un descuido.

   `auto` solo añade el hueco que sobra, y en la mitad más alta no sobra nada
   —ahí el hueco lo pone el margen de abajo del aviso, unas líneas más abajo—.
   Por eso ese margen existe: es el suelo del que `auto` no puede bajar. */
.take-part .btn { margin-top: auto; }
/* El aviso de la fecha: una línea, sin pastilla ni borde. A este tamaño, un
   recuadro más es ruido. */
.take-part__note {
  margin: 0.55rem 0 0.7rem !important;
  font-size: 0.74rem !important;
  color: var(--grey-light) !important;
}

/* En estrecho no caben dos columnas: se apilan, y la raya pasa a ir encima. */
@media (max-width: 900px) {
  .take-part { grid-template-columns: 1fr; }
  .take-part__half + .take-part__half {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* La página que explica cuándo abre la plataforma (platform.html).
   =========================================================================
   Aquí pasan dos cosas: el aviso de que la plataforma todavía no abre y, justo
   debajo, los cuatro pasos de "cómo funciona". No son dos temas: el segundo es
   la respuesta al primero —«si no puedo entrar, ¿para qué me doy de alta
   ahora?»—, y la página tiene que leerse así, de un tirón.

   Lo que había antes lo contaba al revés. El aviso iba alineado a la izquierda
   en una columna estrecha y los pasos centrados de lado a lado, sobre una
   banda gris que empezaba de golpe: dos ejes, dos anchos y un corte de color
   en medio. Tres maneras distintas de decir «esto de abajo es otra cosa».

   Ahora es una sola página: mismo eje, misma medida, un solo fondo y una raya
   fina donde antes empezaba el gris. La raya separa lo justo para que se vea
   que empieza otro asunto, sin cortar la página en dos.

   Y el bloque de arriba ocupa lo que tiene que ocupar. Con el titular y el
   aire de una portada se comía la pantalla entera él solo, y los pasos —que
   son la mitad útil— quedaban siempre por debajo del borde. Aquí el titular
   es un aviso, no una portada: más pequeño, y el aire justo. */
.gate {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}
/* EL AVISO PESA MENOS QUE LO QUE VIENE DEBAJO, Y ES A PROPÓSITO.
   El titular es un cartel de "todavía no": dice una cosa, se lee de un
   vistazo y no da para más. Los cuatro pasos de abajo son lo único que esta
   página cuenta y no cuenta ninguna otra, así que el peso de la página está
   ahí. Por eso este titular va por debajo de un `h-1` de portada y el de
   "cómo funciona" va por encima. */
.gate h1 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }
/* Centrada la caja, hay que centrar también cualquier columna que lleve
   dentro, o lo que haya queda descolgado bajo un titular centrado. */
.gate .measure { max-width: 100%; margin-inline: auto; }
.gate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: clamp(1rem, min(2.2vw, 2.2vh), 1.4rem) 0 0;
}
/* Botones de tamaño corriente y no `--lg`: son el segundo camino de esta
   página —el primero es esperar al 29— y a tamaño grande pesaban más que el
   titular que tienen encima. */
.gate__actions .btn { padding: 0.6rem 1.5rem; font-size: 0.78rem; }

/* Los cuatro pasos, al mismo ancho y bajo la misma raya. Iban a lo ancho de
   la página entera y cada paso quedaba como una isla —cuatro columnas
   estrechas separadas por un palmo—; a esta medida se leen como cuatro partes
   de una misma respuesta. */
/* La raya de arriba sustituye a la banda gris. Va dentro del contenido y no
   de lado a lado a propósito: una línea de borde a borde vuelve a ser un
   corte, y lo que se quiere aquí es una costura. */
#how > .shell {
  max-width: 54rem;
  border-top: 1px solid var(--line);
  padding-top: clamp(1.1rem, min(2.5vw, 2.6vh), 1.9rem);
}
/* Y con el peso que le toca. Los cuatro pasos son el contenido de esta
   página: el aviso de arriba se lee en dos segundos y no vuelve a hacer
   falta, y esto es lo que alguien se lleva de aquí. Así que su titular va a
   tamaño de portada —por encima del que tiene encima—, y los pasos a cuerpo
   de lectura y no de pie de foto. */
#how .steps__head h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
#how .steps { gap: clamp(1rem, 2vw, 1.75rem); }
#how .step h3 { font-size: 1rem; }
#how .step p { font-size: 0.9rem; }
#how .step__n { width: 44px; height: 44px; margin-bottom: 0.7rem; font-size: 0.95rem; }
#how .steps__head { margin-bottom: clamp(1rem, min(2.5vw, 2.5vh), 1.6rem); }
#how .steps__head p { max-width: 100%; font-size: 0.95rem; }

/* El aire de la página. El relleno corriente de sección es el de una web de
   ocho bloques; aquí hay dos, y con él el aviso arrancaba a 134px de la
   cabecera, descolgado, y los pasos no llegaban nunca a verse sin bajar.
   Del alto de la ventana además del ancho, para que en un portátil bajo la
   página entera —aviso y pasos— siga entrando de una vez. */
[data-gate] { padding-block: clamp(1.5rem, min(4vw, 4vh), 2.75rem) 0; }
#how { padding-block: clamp(0.9rem, min(2.2vw, 2.2vh), 1.6rem) clamp(2rem, 5vw, 4rem); }

/* 12. EXHIBITORS — full-bleed logo grid ==================================== */
/* The directory opens a subject of its own inside "Meet BB's Experts", right
   under the red login band. Without this it starts flush against the band. */
/* El directorio va pegado a la entrada de la sección. Llevaba 96px de hueco
   encima, que era lo que lo separaba de la banda roja cuando la banda estaba
   aquí; ahora lo único que tiene encima es el texto que lo describe, y entre
   una cosa y lo que la describe no hace falta un palmo. */
.directory { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Category buttons and the name search sit on one line, and stack on narrow
   screens. The search keeps the plain, ruled look of the rest of the page. */
.dir-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin-bottom: 1rem;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 2rem;
}
.dir-search { position: relative; display: flex; align-items: center; }
.dir-search__ico {
  position: absolute;
  left: 0.1rem;
  display: flex;
  color: var(--grey-light);
  pointer-events: none;
}
.dir-search__ico svg { width: 15px; height: 15px; }
.dir-search input {
  width: 15rem;
  max-width: 100%;
  padding: 0.5rem 0.4rem 0.5rem 1.6rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--grey-dark);
  transition: border-color 0.25s var(--ease);
}
.dir-search input::placeholder { color: var(--grey-light); }
.dir-search input:focus { outline: none; border-bottom-color: var(--red); }
.dir-search input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* The browser's own clear button, kept but toned down to the page's palette */
.dir-search input::-webkit-search-cancel-button { cursor: pointer; }

.dir-count {
  text-align: center;
  margin: 0 0 1.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.filter {
  background: none;
  border: 0;
  padding: 0.3rem 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--grey);
  transition: color 0.25s var(--ease);
}
.filter:hover { color: var(--red); }
.filter[aria-pressed="true"] { color: var(--red); }

/* The brand is the content: square tiles, logo edge to edge, no chrome. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* El `display` de aquí abajo anulaba el atributo `hidden` del navegador: el
   script ocultaba las tarjetas al filtrar y el CSS las volvía a enseñar, así
   que pulsar un filtro no hacía nada visible. Cualquier elemento con display
   propio que se oculte con `hidden` necesita esta línea. */
.logo-tile[hidden] { display: none; }

.logo-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
.logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s var(--ease);
}
/* Logos that carry their own background colour should fill the tile */
.logo-tile img[data-bleed="true"] { object-fit: cover; }
.logo-tile:hover img { transform: scale(1.04); }

.logo-tile__name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 0.9rem 0.85rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.logo-tile:hover .logo-tile__name,
.logo-tile:focus-visible .logo-tile__name { opacity: 1; }

.logo-tile__mark {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--grey-light);
}

.directory__empty { text-align: center; padding: 3rem 1rem; color: var(--grey-light); }

/* The directory before the first company registers. Same soft ground as the
   alternating sections, so an empty state reads as part of the page rather
   than as something that failed to load. */
.dir-waiting {
  text-align: center;
  background: var(--bg-soft);
  border-radius: 4px;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem);
  max-width: 46rem;
  margin-inline: auto;
}
.dir-waiting .lead { color: var(--grey-dark); margin-top: 0; }
.dir-waiting p { margin-bottom: 0; }

/* 13. EXHIBITOR PAGE ======================================================= */
.ex-page { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.ex-page__title { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.ex-head {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ex-head__logo { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.ex-head__cat {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--red);
  padding-top: 1rem;
}

.ex-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ex-contact li { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; align-items: start; }
.ex-contact svg { width: 15px; height: 15px; color: var(--red); margin-top: 0.35rem; }
.ex-contact a { transition: color 0.25s var(--ease); }
.ex-contact a:hover { color: var(--red); }

.ex-body p { text-align: justify; }

.ex-more { text-align: center; margin-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.ex-related { display: grid; grid-template-columns: repeat(4, 1fr); }

.ex-back { text-align: center; padding-block: clamp(2rem, 4vw, 3rem); }

/* 14. DISCOVER — brochures ================================================= */
.brochures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.brochure__cover {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  cursor: pointer;
  aspect-ratio: 800 / 1024;
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.brochure__cover img { width: 100%; height: 100%; object-fit: cover; }
.brochure__cover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}
.brochure__meta { padding-top: 0.9rem; }
.brochure__meta h3 { font-size: 1.02rem; margin: 0 0 0.25rem; }
.brochure__meta p { margin: 0 0 0.6rem; font-size: 0.9rem; }
.brochure__links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.brochure__dl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  color: var(--red);
  transition: opacity 0.25s var(--ease);
}
.brochure__dl:hover { opacity: 0.7; }
.brochure__dl svg { width: 13px; height: 13px; }

.brochures__all { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* 15. CONTACT ============================================================== */
.channels {
  display: grid;
  /* Adapts to however many channels are configured — two today, four before.
     Capping the column rather than letting it take a full fraction keeps a
     short row gathered in the middle instead of stranded at both edges. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 6vw, 5rem);
}
.channel__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  margin-bottom: 0.9rem;
}
.channel__icon svg { width: 16px; height: 16px; }
.channel h3 { font-size: 1.02rem; margin: 0 0 0.2rem; }
.channel .note { font-size: 0.86rem; color: var(--grey-light); margin: 0 0 0.6rem; }
.channel a { color: var(--grey-dark); word-break: break-word; transition: color 0.25s var(--ease); }
.channel a:hover { color: var(--red); }

.newsletter {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
/* Elegir, no escribir. Dos tarjetas grandes, una por público; cada una lleva
   a su formulario. Se apilan solas si algún día hay un público más. */
.nl-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; }
/* Rojas y con la letra en blanco, como la banda de acceso: son una llamada a
   la acción, no una nota al pie. En blanco pasaban por un aviso. */
.nl-opt {
  display: flex;
  flex-direction: column;
  /* Las dos tarjetas miden lo mismo aunque una frase ocupe dos líneas, así que
     el texto se centra: si no, la más corta se queda con un hueco debajo. */
  justify-content: center;
  gap: 0.25rem;
  min-height: 5rem;
  padding: 1.15rem 1.35rem;
  border: 2px solid var(--red);
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.nl-opt__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.25;
  color: #fff;
  /* La flecha va pegada al final del texto, no flotando en la esquina. */
  padding-right: 1.1rem;
  background: no-repeat right 0.32em / 0.62rem auto
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.nl-opt__note { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); line-height: 1.45; }
.nl-opt:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }
@media (hover: hover) {
  .nl-opt:hover {
    background: var(--red-btn-dark);
    border-color: var(--red-btn-dark);
    box-shadow: 0 10px 24px rgba(174, 0, 0, 0.22);
    transform: translateY(-2px);
  }
}
.nl-consent { font-size: 0.78rem; color: var(--grey-light); margin-top: 0.75rem; }

/* 16. FOOTER =============================================================== */
/* The diagonal edge above the dark footer, as on the current site.
   The block itself is white and the charcoal triangle is cut inside it. */
.footer { background: var(--charcoal); color: rgba(255, 255, 255, 0.7); }
.footer__wedge { height: clamp(50px, 7vw, 110px); background: #fff; }
.footer__wedge::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--charcoal);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Institutional logos: the Bilbao Bizkaia mark sits directly on the dark
   ground, the official partner marks in white boxes — exactly as today. */
.insts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.insts__item {
  background: #fff;
  padding: 0.85rem 1.1rem;
  display: grid;
  place-items: center;
  transition: opacity 0.25s var(--ease);
}
.insts__item--plain { background: none; padding: 0; }
.insts__item:hover { opacity: 0.82; }
.insts__item img { height: 56px; width: auto; }
.insts__item--plain img { height: 86px; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.7fr)) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__brand img {
  height: 17px;
  width: auto;
  margin-bottom: 1.25rem;
  filter: brightness(0) invert(1);
}
.footer__statement { font-size: 0.88rem; max-width: 40ch; }
/* Los títulos de las columnas del pie son h2, no h3 ni h4. El pie aparece en
   TODAS las páginas, y en platform.html no hay ningún h2 por encima: con h3
   saltaba de h1 a h3 y rompía el esquema de títulos que usa un lector de
   pantalla para recorrer la página. Con h2 encaja en todas, porque bajar de
   nivel nunca es un salto; solo lo es subir más de uno de golpe. */
.footer h2 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 1rem;
  font-weight: 500;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer li a { font-size: 0.88rem; transition: color 0.25s var(--ease); }
.footer li a:hover { color: #fff; }
.footer__handle { font-size: 0.88rem; color: #fff; margin-bottom: 0.6rem; }
.footer__socials { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.footer__socials a {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: background-color 0.25s var(--ease);
}
.footer__socials a:hover { background: var(--red); }
.footer__socials svg { width: 15px; height: 15px; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__legal a:hover { color: #fff; }

/* 17. MODAL ================================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
}
.modal[data-open="true"] { opacity: 1; visibility: visible; }
.modal__box {
  width: min(960px, 100%);
  max-height: 88vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.modal__head h3 { margin: 0; font-size: 1.15rem; }
.modal__close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
}
.modal__close:hover { background: var(--bg-soft); }
.modal__close svg { width: 13px; height: 13px; }
.modal__body { overflow: auto; }
.modal__body iframe { width: 100%; height: 62vh; border: 0; display: block; }
.modal__foot {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.preview {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.preview__cover { aspect-ratio: 800 / 1024; overflow: hidden; border: 1px solid var(--line); }
.preview__cover img { width: 100%; height: 100%; object-fit: cover; }
.preview__copy { align-self: center; }
.preview__copy h4 { font-size: 1.25rem; margin: 0 0 0.4rem; }
.preview__note {
  font-size: 0.86rem;
  color: var(--grey-light);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
}

/* 17b. PÁGINAS LEGALES ======================================================
   Aviso legal, privacidad, cookies y accesibilidad. Son páginas de leer, no de
   mirar: una sola columna estrecha, sin fotos y sin adornos.

   El ancho está en caracteres y no en píxeles porque lo que cansa la vista no
   son los centímetros sino cuántas palabras hay que recorrer antes de saltar de
   línea. Estas páginas se leen cuando algo ha ido mal —una reclamación, una
   duda sobre los datos— y ese no es momento de pelearse con la tipografía. */
.legal { max-width: 72ch; }
.legal h2 { margin-top: 2.5rem; }
.legal h2:first-of-type { margin-top: 2rem; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1.1rem; }
.legal li { margin-bottom: 0.5rem; }
.legal__date {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 2rem;
}

/* El resumen de arriba: lo que contestaría alguien con prisa. En privacidad y
   en cookies la respuesta corta es la que casi todo el mundo busca. */
.legal__note {
  background: var(--bg-soft);
  border-left: 3px solid var(--red);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: 2rem;
}
.legal__note p:last-child { margin-bottom: 0; }

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
}
.legal__table th,
.legal__table td {
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal__table th { color: var(--grey-dark); font-weight: 500; }
.legal__back { margin-top: 3rem; }

/* En el móvil una tabla de tres columnas se estruja hasta partir las palabras
   letra a letra. Cada fila pasa a ser un bloque con su etiqueta delante. */
@media (max-width: 620px) {
  .legal__table thead { display: none; }
  .legal__table tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: 0.7rem 0;
  }
  .legal__table td { display: block; border: 0; padding: 0.15rem 0; }
  .legal__table td:first-child { font-weight: 500; color: var(--grey-dark); }
}

/* 18. UTILITIES & MOTION =================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* 19. RESPONSIVE =========================================================== */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .channels, .steps, .pillars { grid-template-columns: 1fr 1fr; }
  .brochures { grid-template-columns: repeat(3, 1fr); }
}

/* --- LO QUE SE PROBÓ PARA LAS PANTALLAS BAJAS, Y POR QUÉ NO ESTÁ ------------
   Un portátil de 1366×768 le deja al navegador unos 540px de alto, frente a
   los ~810 de un monitor. Cabe un tercio menos, y se probaron tres caminos:

     1. Encoger cosas sueltas —titular, foto, letra de los bloques— por debajo
        de cierta altura. Cambiaba las proporciones: la misma web se veía
        distinta según la ventana.
     2. Recortar las fotos: las del destino a 2:1 y la de la portada con tope
        de alto. Ganaba sitio, pero LAS FOTOS SE VEÍAN APLASTADAS, que es por
        lo que se quitó todo esto.
     3. Encoger la página entera con `zoom`, del 96% al 85% según la altura.
        Ese no deformaba nada —es lo que hace el zoom del navegador— pero
        añadía una escalera de seis escalones que mantener, y le deshacía
        parte del trabajo a quien bajara el zoom a mano.

   Ninguno está puesto. La web se ve igual en todas las pantallas y en las
   bajas entra menos, que es lo que hace cualquier web; quien quiera ver más
   de una vez tiene el zoom de su navegador.

   Lo que SÍ se conserva son los huecos: siguen mirando el alto de la ventana
   con `min(Xvw, Yvh)`. Eso no deforma nada ni cambia ningún tamaño de letra
   —solo aprieta el aire en pantallas bajas— y es lo que hace que el programa
   entero quepa en una pantalla, que se pidió aparte. */

/* --- Cuándo se pliega el menú ----------------------------------------------
   El menú necesita unos 1275px para caber en una sola fila: son cinco
   entradas y una de ellas es "Match Bilbao Bizkaia 2026", que es larga de por
   sí. Por debajo de eso las entradas se iban envolviendo y la cabecera salía
   partida en dos y hasta en tres filas, con el logotipo arriba y el menú
   desparramado debajo. Se veía roto, y en portátiles con la ventana a media
   pantalla —1024, 1152, 1200— pasaba constantemente.

   Así que el menú se pliega tras el botón de siempre bastante antes de llegar
   a ese punto. Pliega SOLO la cabecera: la retícula de la página (portada a
   dos columnas, folletos, expositores) sigue cambiando a 900px, que es donde
   le toca. Antes las dos cosas compartían la misma regla, y mover una habría
   arrastrado a la otra.

   EL NÚMERO ES 1275 Y NO 1250 desde que la cabecera puede llevar dos botones:
   abierta la plataforma, el Login pasa de enlace a pastilla y la fila necesita
   unos 30px más. Entre 1251 y 1275 el menú se partía en dos filas ese día y
   solo ese día. Son anchuras en las que casi nadie tiene la ventana —1280 es
   la de portátil corriente, y esa sigue con el menú entero—, así que se pliega
   ahí en vez de apretar más la cabecera.

   Si se toca este número hay que tocar también main.js, que lo repite para
   saber cuándo cerrar el menú al cambiar el tamaño de la ventana. Y
   tools/verify/site.js mide la cabecera a catorce anchuras, con la plataforma
   abierta y cerrada: si el número se queda corto, lo dice antes de publicar. */
@media (max-width: 1275px) {
  :root { --header-h: 68px; }

  .burger { display: flex; margin-left: auto; }
  .header__nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
      visibility 0.25s var(--ease);
    margin-left: 0;
  }
  .header[data-menu="open"] .header__nav { opacity: 1; visibility: visible; transform: none; }
  .header__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1rem;
  }
  /* The rule sits on the block, not on the inline link, or it would only span
     the width of the text. Blocking the link also widens the tap target. */
  .header__link { display: block; padding: 0.85rem 0; font-size: 0.95rem; }
  .header__links > li { border-bottom: 1px solid var(--line); }
}

/* La retícula de la página, que se pliega más tarde y por su cuenta. */
@media (max-width: 900px) {
  .hero__inner, .present, .videos, .newsletter { grid-template-columns: 1fr; }
  /* Plegada la sección a una columna, las fotos tienen la página entera de
     ancho y siguen bien en fila. Más abajo, en el móvil, ya no: ver 560px. */
  .hero__facts { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .logo-grid, .ex-related { grid-template-columns: repeat(3, 1fr); }
  .ex-head { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* En el móvil las fotos del destino se sueltan del tope de 360px. Ahí el alto
   ya no es el problema que era en el escritorio —esto se lee bajando de todas
   formas— y el ancho es el que es, así que se aprovecha entero.

   Va después de la regla de arriba y no en el bloque de 560px que hay más
   arriba en la hoja: a igualdad de peso manda la última, y allí no ganaba. */
@media (max-width: 900px) {
  .present__media { max-width: none; }
}

@media (max-width: 620px) {
  .brochures { grid-template-columns: 1fr 1fr; }
  .logo-grid, .ex-related { grid-template-columns: repeat(2, 1fr); }
  .channels, .steps, .pillars { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  /* The wordmark is 796×48, so scale it by width to keep the header on one
     row alongside the login button and the burger. */
  .header__inner { gap: 0.5rem; }
  .header__brand { gap: 0.4rem; }
  .header__brand img { width: min(150px, 39vw); height: auto; }
  .header__year { font-size: 0.78rem; }
  .header__actions { gap: 0.25rem; }
  .header__actions .btn { padding: 0.45rem 0.9rem; font-size: 0.7rem; }
  /* Aquí se hacía el relevo del Login entre la barra y el menú, cuando había
     dos botones y no cabían. Con uno solo se queda en la barra a cualquier
     ancho: es la única acción de la cabecera y esconderla sería esconder lo
     que la gente viene a pulsar. */
  .burger { width: 36px; padding: 8px; }
  /* The rail moves in; everything placed from it follows on its own. */
  .tl { --rail: 58px; --clear: 0.9rem; }
  .tl-item__time { font-size: 0.9rem; }
  .preview { grid-template-columns: 1fr; }
  .preview__cover { max-width: 180px; }
}

/* --- Pantallas muy estrechas (iPhone SE y parecidos) -----------------------
   A 320px la cabecera se salía 6px: el logotipo, el botón de alta y el botón
   del menú no caben juntos. No es un ancho común hoy, pero 6px de barra
   horizontal se ven, y se ven en TODA la página, no solo en la cabecera.

   Se le quita tamaño a lo que puede perderlo sin dejar de entenderse: el
   logotipo y el relleno del botón. El botón del menú no se toca, porque
   achicarlo empeora la zona de pulsación, que es lo último que conviene
   estrechar en la pantalla más pequeña. */
@media (max-width: 380px) {
  .header__brand img { width: min(130px, 34vw); }
  .header__actions .btn { padding: 0.4rem 0.7rem; font-size: 0.66rem; }
}