/* =========================================================================
   GANADORES PREMIOS EA 2026 — ganadores.css (v2)
   Extiende 2026.css. Mobile first. WCAG 2.1 AA.
   Novedades v2:
     - Barra fija (sticky) de categorías con estado activo (scrollspy)
     - Mosaico masonry de 2 filas en pantallas >= 700 px
     - Botón flotante de volver arriba
   Los selectores de la capa "fallback" usan :where() (especificidad 0)
   para que 2026.css siempre gane si define lo mismo.
   ========================================================================= */

/* ---------- 1. Tokens corporativos (manual de identidad EA) ---------- */
:root {
  --ea-azul-2955: #003764;   /* Gris aviador — principal */
  --ea-azul-5405: #4e738a;
  --ea-azul-5425: #7a97ab;
  --ea-azul-5445: #b7c7d3;
  --ea-rojo-bandera: #ad2e1c;
  --ea-amarillo-bandera: #fac200;
  --ea-azul-cielo: #8dc6e8;

  --ea-tinta: #1c2733;
  --ea-fondo-suave: #eef2f6;
  --ea-blanco: #ffffff;

  --rail-h: 300px;      /* altura del medio en el carril móvil (1 fila) */
  --nav-h: 56px;        /* altura aproximada de la barra fija */
  --radio: 10px;
  --sombra: 0 2px 10px rgba(0, 55, 100, .12);
  --foco: 3px solid var(--ea-amarillo-bandera);

  /* Mosaico (>= 700 px): fila total, hueco e info reservada al pie */
  --fila: 340px;
  --gap-muro: 16px;
  --info-h: 148px;
}

@media (min-width: 1100px) { :root { --fila: 380px; } }

/* ---------- 2. Fallbacks de baja especificidad (por si faltan en 2026.css) */
:where(body) {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ea-tinta);
  background: var(--ea-blanco);
  line-height: 1.55;
}
:where(.container) { max-width: 1100px; margin-inline: auto; padding-inline: 1rem; }
:where(.site-header) { background: var(--ea-blanco); border-bottom: 4px solid var(--ea-azul-2955); }
:where(.brand-logos img) { max-height: 64px; width: auto; padding-block: .6rem; }
:where(.hero--brand) { background: var(--ea-azul-2955); color: var(--ea-blanco); padding-block: 2rem 2.4rem; }
:where(.hero--brand h1) { margin: 0 0 .5rem; font-size: clamp(1.5rem, 4.5vw, 2.3rem); line-height: 1.2; }
:where(.lead) { font-size: 1.05rem; max-width: 65ch; }
:where(.section) { padding-block: 2.2rem; }
:where(.section--soft) { background: var(--ea-fondo-suave); }
:where(h2) { color: var(--ea-azul-2955); font-size: clamp(1.3rem, 3.5vw, 1.7rem); margin: 0 0 .35rem; }
:where(a) { color: var(--ea-azul-2955); }
:where(.btn) {
  display: inline-block; padding: .65rem 1.1rem; border-radius: 6px;
  text-decoration: none; font-weight: 600;
}
:where(.btn.primary) { background: var(--ea-amarillo-bandera); color: var(--ea-azul-2955); }
:where(.actions) { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
:where(.site-footer) { background: var(--ea-azul-2955); color: var(--ea-blanco); padding-block: 1.5rem; margin-top: 2rem; }
:where(.site-footer a) { color: var(--ea-azul-cielo); }
:where(.footer-links) { list-style: none; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
:where(.skip-link) {
  position: absolute; left: -999px; top: 0; background: var(--ea-amarillo-bandera);
  color: var(--ea-azul-2955); padding: .6rem 1rem; z-index: 100; font-weight: 700;
}
:where(.skip-link):focus { left: 0; }

/* ---------- 3. Accesibilidad global ---------- */
:focus-visible { outline: var(--foco); outline-offset: 2px; border-radius: 4px; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

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

/* ---------- 4. Barra fija de categorías (sticky + scrollspy) ----------
   Menú ligero: dos filas de cuatro enlaces de texto, sin botones.
   El estado activo y el hover se marcan con un subrayado fino.
   Móvil: retícula compacta a todo el ancho, texto centrado.
   Escritorio: filas alineadas a la izquierda con más aire. ------------- */
.nav-categorias {
  position: sticky; top: 0; z-index: 50;
  background: var(--ea-azul-2955);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 2px 10px rgba(0, 20, 40, .28);
}

/* En móvil el menú usa márgenes laterales menores que el resto del
   contenido: así aprovecha todo el ancho de la pantalla y los literales
   caben en una sola línea */
.nav-categorias .container { padding-inline: .5rem; }
@media (min-width: 700px) { .nav-categorias .container { padding-inline: 1rem; } }

.menu-categorias {
  list-style: none; margin: 0; padding: .25rem 0 .3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 + 4: dos filas */
  column-gap: .25rem; row-gap: .1rem;
  align-items: stretch;
}
.menu-categorias li { min-width: 0; text-align: center; display: flex; }

.menu-categorias a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0;
  padding: .3rem .05rem;                    /* fino a la vista, cómodo al dedo */
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  /* Tipografía fluida: se adapta al ancho real del iPhone en lugar de
     recortar el literal con puntos suspensivos */
  font-size: .7rem;
  font-weight: 600; line-height: 1.15;
  letter-spacing: 0;
  /* Los literales largos ("Investigación") se ajustan en dos líneas en
     vez de cortarse; hyphens reparte la palabra con guion cuando cabe */
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto; -webkit-hyphens: auto;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.menu-categorias a:hover {
  color: var(--ea-blanco);
  border-bottom-color: var(--ea-azul-cielo);
}
.menu-categorias a[aria-current="true"] {
  color: var(--ea-amarillo-bandera);
  border-bottom-color: var(--ea-amarillo-bandera);
}
.menu-categorias a:focus-visible { outline-color: var(--ea-azul-cielo); outline-offset: 1px; }

/* Escritorio: mismas dos filas, alineadas a la izquierda, con más aire
   y tipografía en versalitas para un acabado más institucional */
@media (min-width: 700px) {
  .menu-categorias {
    grid-template-columns: repeat(4, max-content);
    justify-content: flex-start;
    column-gap: clamp(1.6rem, 5vw, 3.2rem);
    padding: .4rem 0 .5rem;
  }
  .menu-categorias li { text-align: left; }
  .menu-categorias a {
    display: inline-block; width: auto;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .3rem 0;
    white-space: nowrap; hyphens: none; -webkit-hyphens: none;
  }
}

/* Las anclas descuentan la altura de la barra fija */
.disciplina { scroll-margin-top: calc(var(--nav-h) + .75rem); }

/* ---------- 5. Botón flotante de volver arriba ---------- */
.btn-subir {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ea-azul-2955); color: var(--ea-blanco);
  display: grid; place-items: center;
  box-shadow: 0 3px 12px rgba(0, 20, 40, .35);
}
.btn-subir svg { width: 22px; height: 22px; fill: currentColor; }
.btn-subir:hover { background: var(--ea-azul-5405); }
/* Con JS aparece solo tras hacer scroll; sin JS es visible siempre */
.js .btn-subir { opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.js .btn-subir.visible { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- 6. Sección de disciplina y carril base (móvil: 1 fila) ---- */
.disciplina-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.disciplina-cabecera p { margin: .1rem 0 0; color: var(--ea-azul-5405); max-width: 70ch; }

.galeria { position: relative; margin-top: 1.1rem; }

/* Carril: funciona SIN JavaScript gracias a scroll-snap nativo */
.carril {
  list-style: none; margin: 0; padding: .35rem .35rem 1rem;
  display: flex; gap: 1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* El snap alinea las tarjetas con el borde interior del carril, en la
     misma referencia que usa el JS de las flechas */
  scroll-padding-inline-start: .35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--ea-azul-5425) transparent;
}
.carril::after { content: ""; flex: 0 0 .1px; }

/* ---------- 7. Tarjeta de obra ---------- */
.obra {
  flex: 0 0 auto; scroll-snap-align: start;
  background: var(--ea-blanco); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
  display: flex; flex-direction: column;
  max-width: min(88vw, 640px);
  scroll-margin-top: calc(var(--nav-h) + .75rem);
}

.obra-media { margin: 0; position: relative; background: var(--ea-fondo-suave); }
/* La anchura de la tarjeta la dicta la proporción real de la obra */
.obra-media img {
  display: block; height: var(--rail-h); width: auto;
  max-width: min(84vw, 620px); object-fit: contain;
}
.obra-media a { display: block; }
.obra-media a:hover img { opacity: .92; }

.medalla {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 999px; padding: .28rem .7rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  background: var(--ea-azul-2955); color: var(--ea-blanco);
}
.medalla--primero { background: var(--ea-amarillo-bandera); color: var(--ea-azul-2955); }
.medalla svg { width: .85em; height: .85em; fill: currentColor; }

.contador-coleccion {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  background: rgba(0, 55, 100, .85); color: var(--ea-blanco);
  border-radius: 6px; padding: .2rem .55rem; font-size: .8rem; font-weight: 700;
}

.obra-info { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .18rem; box-sizing: border-box; }
.obra-modalidad {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ea-azul-5405);
}
.obra-autor { margin: 0; font-size: 1.06rem; color: var(--ea-azul-2955); line-height: 1.25; }
.obra-titulo { margin: 0; font-style: italic; color: var(--ea-tinta); font-size: .95rem; }
.obra-accion { margin: .5rem 0 0; }
.obra-accion a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .3rem .2rem;
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.obra-accion svg { width: 1em; height: 1em; fill: currentColor; flex: none; }

.obra--desierta .obra-info { padding-block: 1.4rem; }
.obra--desierta { justify-content: center; min-width: 240px; background: var(--ea-fondo-suave); box-shadow: none; border: 1px dashed var(--ea-azul-5425); }

/* ---------- 7 bis. MÓVIL: la obra manda sobre el ancho -----------------
   Por debajo de 700 px la tarjeta ocupa casi todo el ancho de pantalla y
   la imagen se ajusta a ese ancho (no a una altura fija), de modo que las
   obras horizontales se ven a tamaño completo, sin bandas laterales.
   La altura queda limitada para que una obra vertical no ocupe toda la
   pantalla y siga viéndose el pie de la tarjeta. --------------------- */
@media (max-width: 699px) {
  /* El scroll-padding acompaña al padding para que los puntos de snap
     y los objetivos de las flechas sigan coincidiendo exactamente */
  .carril {
    gap: .75rem; padding-inline: .5rem; scroll-padding-inline-start: .5rem;
    /* Cada tarjeta conserva su altura natural: sin estirarse hasta la
       altura de la obra más alta del carril (que dejaba un gran hueco
       blanco bajo las obras horizontales) */
    align-items: flex-start;
  }

  .obra {
    width: 88vw; max-width: 88vw;   /* deja ver el borde de la siguiente */
  }

  .obra-media img,
  .video-fachada img {
    width: 100%; height: auto;
    max-width: 100%; max-height: 58vh;
    object-fit: contain;
  }
  .video-fachada { width: 100%; }
  .video-incrustado { width: 100%; height: auto; max-width: 100%; aspect-ratio: 16 / 9; }

  /* Obras verticales: se limita algo más para no comerse la pantalla */
  .obra--alta .obra-media img { max-height: 62vh; }
}

/* ---------- 8. Fachada de vídeo ---------- */
.video-fachada {
  display: block; position: relative; padding: 0; border: 0;
  background: var(--ea-fondo-suave); cursor: pointer; font: inherit;
}
.video-fachada img { display: block; height: var(--rail-h); width: auto; max-width: min(84vw, 620px); object-fit: contain; }
.video-fachada .boton-play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-fachada .boton-play span {
  width: 72px; height: 50px; border-radius: 12px;
  background: rgba(0, 55, 100, .9);
  display: grid; place-items: center;
  transition: transform .15s ease, background .15s ease;
}
.video-fachada:hover .boton-play span,
.video-fachada:focus-visible .boton-play span { background: var(--ea-rojo-bandera); transform: scale(1.06); }
.video-fachada .boton-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.video-incrustado { height: var(--rail-h); aspect-ratio: 16 / 9; max-width: min(84vw, 620px); }
.video-incrustado iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 9. MOSAICO MASONRY de 2 filas (pantallas >= 700 px) -------
   Rejilla de flujo horizontal: las obras verticales (.obra--alta) ocupan
   las dos filas a toda altura; las horizontales y cuadradas se apilan de
   dos en dos. La anchura de cada pieza la fija su proporción real, porque
   la altura de las imágenes es fija por fila. ------------------------- */
@media (min-width: 700px) {
  .carril {
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: repeat(2, var(--fila));
    grid-auto-columns: max-content;
    align-items: stretch;
    /* start (no center): las tarjetas apiladas de una columna comparten
       borde izquierdo => un único punto de snap por columna. Con center,
       cada tarjeta generaba un punto distinto y el botón "anterior" se
       quedaba clavado entre ambos. */
    justify-items: start;
    gap: var(--gap-muro);
  }
  .carril::after { content: none; }

  .obra { max-width: min(60vw, 660px); height: 100%; }
  .obra--alta { grid-row: span 2; }
  /* La obra se centra en su tarjeta: si el pie es más ancho que la
     imagen, el aire queda repartido a ambos lados */
  .obra-media { display: flex; align-items: center; justify-content: center; }

  /* Altura de imagen fija por fila => la anchura sale de la proporción */
  .obra-media img,
  .video-fachada img {
    height: calc(var(--fila) - var(--info-h));
    max-width: min(60vw, 640px);
  }
  .obra--alta .obra-media img {
    height: calc(var(--fila) * 2 + var(--gap-muro) - var(--info-h));
  }
  .video-incrustado { height: calc(var(--fila) - var(--info-h)); max-width: min(60vw, 640px); }

  /* Pie de tarjeta con altura reservada y texto acotado para que todas
     las piezas encajen en la retícula (el lightbox muestra el texto
     completo) */
  .obra-info { height: var(--info-h); overflow: hidden; }
  .obra-modalidad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obra-autor {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .obra-titulo {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .obra-accion { margin-top: auto; }
  .obra-accion a { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; min-height: 40px; }

  .obra--desierta { grid-row: span 2; display: flex; }
}

/* ---------- 10. Controles del carril (mejora progresiva con JS) ------- */
.controles-carril { display: none; }
.js .controles-carril { display: flex; align-items: center; gap: .7rem; margin-top: .35rem; }
.flecha-carril {
  appearance: none; border: 1px solid var(--ea-azul-5425); border-radius: 50%;
  width: 44px; height: 44px; flex: none;
  background: var(--ea-blanco); color: var(--ea-azul-2955); cursor: pointer;
  display: grid; place-items: center;
}
.flecha-carril svg { width: 18px; height: 18px; fill: currentColor; }
.flecha-carril:hover:not(:disabled) { background: var(--ea-azul-2955); color: var(--ea-blanco); }
.flecha-carril:disabled { opacity: .35; cursor: default; }

.progreso-carril { flex: 1; height: 4px; border-radius: 999px; background: var(--ea-azul-5445); overflow: hidden; }
.progreso-carril i {
  display: block; height: 100%; width: 100%;
  background: var(--ea-azul-2955);
  transform-origin: left; transform: scaleX(.15);
  transition: transform .12s linear;
}

/* ---------- 11. Impresión ---------- */
@media print {
  .carril { display: flex; flex-wrap: wrap; overflow: visible; height: auto; }
  .controles-carril, .btn-subir, .nav-categorias,
  .video-fachada .boton-play { display: none !important; }
  .obra { box-shadow: none; border: 1px solid var(--ea-azul-5445); break-inside: avoid; height: auto; }
}
/* =========================================================================
   PATROCINADORES — añadir al final de assets2026/ganadores.css
   Dos niveles:
     1) Franja de patrocinio al pie de cada tarjeta de galardón (1 a 4).
     2) Banda "Con el patrocinio de" al final de la página.
   Mobile first. No requiere JavaScript.
   ========================================================================= */

/* La franja del pie ocupa altura dentro de la tarjeta: en el mosaico de
   escritorio hay que ampliar el pie y compensar la fila para que las obras
   no encojan. Estas dos variables sustituyen a las de más arriba. */
:root {
  --info-h: 190px;   /* antes 148px: cabe la franja de patrocinio */
  --fila: 420px;     /* antes 380px: compensa el pie más alto */
}

/* ---------- 1. Franja de patrocinio en la tarjeta ---------- */
.obra-patrocinio {
  /* Se pega al fondo de la tarjeta y el filete va de lado a lado */
  margin: .7rem -1rem 0;
  padding: .5rem 1rem .1rem;
  border-top: 1px solid var(--ea-azul-5445);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .45rem 1.25rem;   /* aire entre el rótulo "Patrocina" y los logotipos */
}

.patrocinio-rotulo {
  /* En móvil ocupa su propia línea: los logotipos disponen de todo el
     ancho de la tarjeta y caben dos por fila */
  margin: 0 0 .15rem; flex: 1 0 100%;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ea-azul-5405);
}

.patrocinio-logos {
  list-style: none; margin: 0; padding: 0; min-width: 0; max-width: 100%;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem .75rem;
}

/* Altura normalizada: la caja manda, la proporción se respeta */
.patrocinio-logos li { min-width: 0; max-width: 100%; }
.patrocinio-logos img {
  display: block;
  height: 100px; width: auto;
  max-width: min(184px, 100%); object-fit: contain;
}

/* Ajuste óptico: los logotipos cuadrados o con isotipo alto pesan más a
   igual altura, así que se reducen un 20 % para equilibrar la fila.
   Añadir la clase al <li> correspondiente. */
.patrocinio-logos .logo--cuadrado img { height: 32px; max-width: min(128px, 100%); }
/* Logotipos muy alargados: se permite algo más de anchura */
.patrocinio-logos .logo--ancho img { max-width: min(260px, 100%); }

@media (min-width: 700px) {
  .patrocinio-rotulo { flex: none; }
  
  .logo-p img { height: 52px; max-width: min(240px, 100%); }
  .logo-m img { height: 60px; max-width: min(240px, 100%); }
  .logo-g img { height: 80px; max-width: min(240px, 100%); }
  .logo-h img { height: 140px; max-width: min(240px, 100%); }
  .patrocinio-logos .logo--cuadrado img { height: 42px; max-width: min(160px, 100%); }
  .patrocinio-logos .logo--ancho img { max-width: min(300px, 100%); }
}

/* En el mosaico, la franja se ancla al fondo del pie de la tarjeta */
@media (min-width: 700px) {
  .obra-accion { margin-top: 0; }
  .obra-patrocinio { margin-top: auto; }
}

/* ---------- 2. Banda final de patrocinadores ---------- */
.banda-patrocinadores { text-align: center; }
.banda-patrocinadores h2 {
  font-size: clamp(1rem, 3vw, 1.2rem);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ea-azul-5405); margin-bottom: 1.2rem;
}
.banda-patrocinadores .patrocinadores-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1.2rem 4rem;
}
.banda-patrocinadores .patrocinadores-lista img {
  display: block;
  /* height: 56px; */
  width: auto; max-width: 220px; object-fit: contain;
}
.banda-patrocinadores .patrocinadores-lista .logo--cuadrado img { height: 45px; max-width: 140px; }
@media (min-width: 700px) {
  .banda-patrocinadores .patrocinadores-lista img { height: 72px; max-width: 300px; }
  .banda-patrocinadores .patrocinadores-lista .logo--cuadrado img { height: 58px; max-width: 180px; }
}

/* Si el logotipo enlaza a la web del patrocinador */
.patrocinio-logos a, .patrocinadores-lista a { display: block; }
.patrocinio-logos a:focus-visible,
.patrocinadores-lista a:focus-visible { outline: var(--foco); outline-offset: 3px; }

@media print {
  .obra-patrocinio { break-inside: avoid; }
}

/* ---------- 3. ENCAJE DE LA IMAGEN EN LA TARJETA (escritorio) ----------
   En el mosaico, el ancho de columna lo fijaba el contenido más ancho del
   pie (títulos largos, fila de logotipos), de modo que la tarjeta salía
   más ancha que la obra y aparecía una banda gris a los lados.
   Con width:0 + min-width:100% el pie deja de aportar anchura propia y
   se adapta a la que marca la imagen; la tarjeta encaja con la obra.
   ------------------------------------------------------------------- */
@media (min-width: 700px) {
  .obra {
    /* Anchura mínima legible para el pie cuando la obra es muy estrecha */
    min-width: 230px;
  }
  .obra-info { width: 0; min-width: 100%; box-sizing: border-box; }

  /* Fondo del marco igual al de la tarjeta: si por la proporción de la
     obra quedara algún milímetro de aire, no se percibe como "caja gris" */
  .obra-media { background: var(--ea-blanco); }
}

/* ---------- 4. PIE DE TARJETA ADAPTADO AL ANCHO DE LA OBRA ------------
   Al encajar la tarjeta con la imagen, el pie es más estrecho que antes:
   los textos se ajustan en dos líneas en lugar de recortarse con puntos
   suspensivos, y la altura reservada crece para que quepan.
   --------------------------------------------------------------------- */
:root { --info-h: 355px; --fila: 585px; }

@media (min-width: 700px) {
  /* El pie es un contenedor flex: sus hijos se encogían para caber en la
     altura fija y los textos aparecían cortados por la mitad (el
     -webkit-line-clamp queda anulado en elementos flex). Con flex: none
     cada línea conserva su altura natural. */
  .obra-info > * { flex: 0 0 auto; }
  .obra-modalidad {
    white-space: normal; overflow: hidden; line-height: 1.4;
    display: block; max-height: 2.8em;
  }
  .obra-autor { display: block; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
  .obra-titulo { display: block; line-height: 1.4; max-height: 2.8em; overflow: hidden; }
  .obra-accion a {
    white-space: normal; overflow: visible; text-overflow: clip;
    align-items: flex-start;
  }
  .obra-accion svg { margin-top: .35em; }
}

/* ---------- 5. LA IMAGEN DEFINE SU CAJA, TAMBIÉN EN ALTURA -------------
   El mosaico daba a la imagen la altura completa de su fila (una o dos),
   de modo que una obra cuadrada o apaisada en una tarjeta de dos filas se
   "contenía" y dejaba aire arriba y abajo. Ahora la altura de la fila es
   un máximo, no una medida fija: la imagen se escala hasta donde llegue
   conservando su proporción y el marco mide exactamente lo que ella.
   --------------------------------------------------------------------- */
@media (min-width: 700px) {
  /* La tarjeta no se estira a la altura de sus filas */
  .obra { height: auto; align-self: start; }

  .obra-media img,
  .video-fachada img {
    height: auto; width: auto;
    max-height: calc(var(--fila) - var(--info-h));
    max-width: min(60vw, 640px);
  }
  .obra--alta .obra-media img,
  .obra--alta .video-fachada img {
    /* height: auto también aquí: la regla de dos filas tiene más
       especificidad y seguía imponiendo la altura de la fila */
    height: auto; width: auto;
    max-height: calc(var(--fila) * 2 + var(--gap-muro) - var(--info-h));
    max-width: min(60vw, 640px);
  }
  .video-incrustado { height: auto; max-height: calc(var(--fila) - var(--info-h)); }
}

/* ---------- 6. SIN VIÑETAS EN LAS LISTAS DE LOGOTIPOS ------------------
   La hoja del portal (2026.css) marca los <li> con más peso que nuestro
   list-style:none. Las plantillas institucionales lo hacen de cuatro
   formas distintas, así que se neutralizan las cuatro: la propiedad
   list-style, el pseudoelemento ::marker, una viñeta escrita con
   ::before/::after y una viñeta dibujada como imagen de fondo.
   Los selectores incluyen el contenedor para ganar en especificidad, y
   llevan !important porque compiten con una hoja que no controlamos.
   --------------------------------------------------------------------- */
.obra-patrocinio ul.patrocinio-logos,
.obra-patrocinio ul.patrocinio-logos > li,
.banda-patrocinadores ul.patrocinadores-lista,
.banda-patrocinadores ul.patrocinadores-lista > li,
nav.nav-categorias ul.menu-categorias,
nav.nav-categorias ul.menu-categorias > li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  /* Viñeta dibujada como imagen de fondo */
  background-image: none !important;
  background: none !important;
  /* Sangrías que suelen acompañar a la viñeta */
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}

/* display distinto de list-item: el marcador no llega a generarse */
.obra-patrocinio ul.patrocinio-logos > li,
.banda-patrocinadores ul.patrocinadores-lista > li,
nav.nav-categorias ul.menu-categorias > li {
  display: block !important;
}
nav.nav-categorias ul.menu-categorias > li { display: flex !important; }

.obra-patrocinio ul.patrocinio-logos > li::marker,
.banda-patrocinadores ul.patrocinadores-lista > li::marker,
nav.nav-categorias ul.menu-categorias > li::marker { content: none !important; }

.obra-patrocinio ul.patrocinio-logos > li::before,
.obra-patrocinio ul.patrocinio-logos > li::after,
.banda-patrocinadores ul.patrocinadores-lista > li::before,
.banda-patrocinadores ul.patrocinadores-lista > li::after,
nav.nav-categorias ul.menu-categorias > li::before,
nav.nav-categorias ul.menu-categorias > li::after {
  content: none !important;
  display: none !important;
  background: none !important;
}