/* ==========================================================================
ALARCOS — VARIANTE 9: "Oficial+"
--------------------------------------------------------------------------
Punto de partida distinto al de v1–v8: la web OFICIAL de producción
(style.css, sin nitido en el ) mejorada página a página con el
usuario (2026-09-16). Este fichero solo añade lo nuevo de cada página;
no redefine la identidad. Desde el 2026-09-17 es la ÚNICA capa: las
variantes 1–8 (nitido.css y sucesoras) se retiraron del ensayo y ninguna
ruta emite ya marcado .n-*.
INDEX · franja de cifras encima de "Últimas noticias": la que producción
tiene oculta (iconos en cajas, fetch comentado), rehecha como texto:
cifra grande en tabular-nums, etiqueta pequeña en versalitas, separadores
finos. Los valores vienen SIEMPRE de stats.php.
========================================================================== */
/* ── Tokens de la v9 (unificación 2026-09-17) ─────────────────────────────
Toda la hoja consume ESTOS tokens: no escribas hexadecimales ni sombras
sueltas. Reutilizan la paleta de style.css (--alarcos-*) y añaden los
neutros, las sombras y los radios que antes iban repetidos a mano. */
body.v9 {
--v9-ink: var(--alarcos-dark, #1f2933); /* titulares y texto principal */
--v9-text: #4b5563; /* entradillas, descripciones */
--v9-body: #2d3748; /* texto largo de lectura (artículo, bio) */
--v9-muted: #64748b; /* metadatos, etiquetas */
--v9-soft: #94a3b8; /* placeholders, iconos apagados */
--v9-surface: #eef2f6; /* fondos suaves (chips, huecos) */
--v9-surface-2: #f5f8fb; /* fondos de banda / panel claro */
--v9-line: rgba(31, 41, 51, 0.10); /* filete estándar */
--v9-line-soft: rgba(31, 41, 51, 0.07);
--v9-line-strong: rgba(31, 41, 51, 0.15);
--v9-brand: var(--alarcos-blue); /* azul de MARCA: trazos, bordes, degradados, iconos */
--v9-action: #0b6fa4; /* azul de ACCIÓN para texto y rellenos con texto blanco:
5,5:1 sobre blanco (WCAG AA); el de marca da 3,3:1 */
--v9-action-hover: #08608f;
--v9-action-line: rgba(var(--alarcos-blue-value), 0.35); /* borde de píldoras secundarias */
--v9-green-ink: #26500a; /* verde legible sobre el verde de marca (4,9:1) y sus tintes */
--v9-panel: var(--alarcos-dark, #1f2933); /* paneles oscuros (slider, footer) */
--v9-panel-2: #2d3748;
--v9-gradient: linear-gradient(90deg, var(--alarcos-blue), var(--alarcos-green));
--v9-shadow-sm: 0 4px 14px rgba(31, 41, 51, 0.06);
--v9-shadow: 0 8px 24px rgba(31, 41, 51, 0.08);
--v9-shadow-md: 0 10px 28px rgba(31, 41, 51, 0.12);
--v9-shadow-lg: 0 16px 36px rgba(31, 41, 51, 0.14);
--v9-shadow-action: 0 8px 20px rgba(var(--alarcos-blue-value), 0.22);
--v9-r-card: var(--border-radius-lg, 1.25rem); /* tarjetas, paneles */
--v9-r-media: var(--border-radius-md, 0.75rem);/* imágenes, cajas internas */
--v9-r-sm: 8px; /* controles pequeños */
--v9-r-pill: 50px; /* botones y filtros */
--v9-label-size: 0.72rem; /* rótulos en versalitas */
--v9-label-track: 0.08em;
}
/* ── Foco de respaldo (2026-09-23) ────────────────────────────────────────
El anillo verde del sitio para cualquier tabulable SIN regla de foco propia
(atajos de audiencia, enlaces del pie…). Especificidad (0,1,0) gracias a
:where(): cualquier regla de componente lo pisa sin tocar nada. */
.v9 :where(a, button, input, select, textarea, [tabindex]):where(:focus-visible) {
outline: 3px solid rgba(var(--alarcos-green-value), 0.7);
outline-offset: 2px;
}
/* ── Familia de botones de la v9 (unificación 2026-09-17) ─────────────────
Dos niveles y nada más:
· CTA grande = la píldora OFICIAL de producción (.view-all-news-btn /
.btn-alarcos-primary de style.css): borde azul sólido, 0.8rem × 2rem.
· Acción contextual = .v9-btn: píldora pequeña con borde azul al 35 %,
se rellena de azul al pasar. Las clases históricas (.v9-pager__btn,
.v9-evt__link, .v9-wp-act, .v9-wp-cite__*) son alias de esta regla:
no vuelvas a declarar una píldora suelta, añade la clase al selector. */
.v9-btn,
.v9-pager__btn,
.v9-evt__link,
.v9-wp-act,
.v9-wp-cite__copy,
.v9-wp-cite__close,
.v9-contact__dir,
.v9-search__btn,
.v9-wp-tools__clear,
.v9-wp-tools__print {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 40px;
padding: 0.5rem 1.1rem; /* misma geometría que .v9-filter__btn */
border-radius: var(--v9-r-pill);
border: 2px solid var(--v9-action-line);
background: #fff;
color: var(--v9-action);
font: inherit;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
list-style: none;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.v9-btn:hover, .v9-btn:focus-visible,
.v9-pager__btn:hover, .v9-pager__btn:focus-visible,
.v9-evt__link:hover, .v9-evt__link:focus-visible,
.v9-wp-act:hover, .v9-wp-act:focus-visible,
.v9-wp-cite__copy:hover, .v9-wp-cite__close:hover,
.v9-contact__dir:hover, .v9-contact__dir:focus-visible {
background: var(--v9-action);
border-color: var(--v9-action);
color: #fff;
transform: translateY(-1px);
}
.v9-btn:focus-visible, .v9-pager__btn:focus-visible, .v9-evt__link:focus-visible, .v9-wp-act:focus-visible {
outline: 3px solid rgba(var(--alarcos-green-value), 0.6);
outline-offset: 2px;
}
.v9-btn i, .v9-pager__btn i, .v9-evt__link i, .v9-wp-act i { font-size: 0.82em; }
/* Relleno azul: el botón de las cajas de búsqueda y cualquier acción principal pequeña */
.v9-btn--primary,
.v9-search__btn {
border-color: var(--v9-action);
background: var(--v9-action);
color: #fff;
}
.v9-btn--primary:hover, .v9-btn--primary:focus-visible,
.v9-search__btn:hover, .v9-search__btn:focus-visible {
background: var(--v9-action-hover);
border-color: var(--v9-action-hover);
color: #fff;
}
/* Pequeño: dentro de paneles densos (citas, herramientas) */
.v9-btn--sm,
.v9-wp-cite__copy,
.v9-wp-cite__close { min-height: 36px; padding: 0.3rem 0.85rem; font-size: 0.8rem; }
/* Fantasma: acciones secundarias sin borde (limpiar filtros, imprimir) */
.v9-btn--ghost,
.v9-wp-tools__clear,
.v9-wp-tools__print {
border-color: transparent;
background: transparent;
color: var(--v9-muted);
}
.v9-btn--ghost:hover, .v9-btn--ghost:focus-visible,
.v9-wp-tools__clear:hover, .v9-wp-tools__clear:focus-visible,
.v9-wp-tools__print:hover, .v9-wp-tools__print:focus-visible {
background: var(--v9-surface);
border-color: transparent;
color: var(--v9-action);
transform: none;
}
/* Objetivo táctil mínimo (WCAG 2.5.8, 24×24): los enlaces-botón de texto suelto
("Leer más", "Ver todos", "Citar", extras) alcanzan 24 px de alto sin cambiar de aspecto */
.v9-evt__more, .v9-nw__more, .v9-wp-more, .v9-linea__extra, .v9-sp__item, .v9-sp__all, .v9-form__more a, .v9-news__all { min-height: 24px; display: inline-flex; align-items: center; }
.v9-sp__item { display: inline; padding: 0.15rem 0; line-height: 1.5; }
/* Desactivado */
.v9-btn.is-off, .v9-btn[disabled],
.v9-pager__btn.is-off { border-color: var(--v9-line-strong); background: #fff; color: var(--v9-muted); pointer-events: none; transform: none; }
/* Titular del hero oficial: el mismo tinte de titular que el resto de la v9 */
body.v9 .hero-title { color: var(--v9-ink); }
/* Contraste AA (auditoría 2026-09-17): las clases de producción escriben el azul de
marca (3,3:1) como color de texto con !important; aquí pasan al azul de acción.
El relleno al pasar deja de ser el degradado azul→verde (blanco sobre verde: 1,9:1)
y es el azul de acción sólido, como en toda la familia .v9-btn. */
body.v9 .view-all-news-btn, body.v9 .btn-alarcos-outline, body.v9 .hero-pre-badge, body.v9 .filter-btn, body.v9 .TXTAzultoVerde { color: var(--v9-action) !important; }
body.v9 .view-all-news-btn:hover, body.v9 .view-all-news-btn:focus-visible,
body.v9 .btn-alarcos-outline:hover, body.v9 .btn-alarcos-outline:focus-visible { background: var(--v9-action) !important; border-color: var(--v9-action) !important; color: #fff !important; }
body.v9 .btn-alarcos-primary { background: var(--v9-action) !important; }
body.v9 .btn-alarcos-primary:hover, body.v9 .btn-alarcos-primary:focus-visible { background: var(--v9-action-hover) !important; }
body.v9 .view-all-news-btn:focus-visible, body.v9 .btn-alarcos-primary:focus-visible, body.v9 .btn-alarcos-outline:focus-visible, body.v9 .v9-filter__btn:focus-visible { outline: 3px solid rgba(var(--alarcos-green-value), 0.7); outline-offset: 3px; }
.v9-stats {
padding: clamp(28px, 4vw, 52px) 0 clamp(8px, 1.5vw, 16px);
}
/* Dentro del hero (2026-09-16): franja a todo el ancho del contenedor bajo
las dos columnas; el hero gana la prueba y el bloque de noticias, aire. */
/* Atajos por audiencia bajo los CTA del hero (2026-09-22): fila discreta, tres perfiles con dos destinos */
.v9-aud { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.4rem; font-size: 0.86rem; color: var(--v9-muted); }
.v9-aud__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; }
.v9-aud__item i { width: 1.1rem; text-align: center; }
.v9-aud__item i { color: var(--v9-green-ink); font-size: 0.8rem; }
.v9-aud__k { font-size: var(--v9-label-size); font-weight: 700; letter-spacing: var(--v9-label-track); text-transform: uppercase; color: var(--v9-muted); margin-right: 0.15rem; }
.v9-aud a { color: var(--v9-action); font-weight: 600; text-decoration: none; }
.v9-aud a + a::before { content: "·"; color: var(--v9-muted); margin-right: 0.55rem; font-weight: 400; }
.v9-aud a:hover { text-decoration: underline; }
.v9-stats--hero {
padding: clamp(24px, 3.5vw, 44px) 0 0;
margin-top: clamp(8px, 1.5vw, 16px);
}
.v9-stats--hero .v9-stats__grid {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid var(--v9-line);
border-radius: var(--v9-r-media);
overflow: hidden;
}
/* Respiro y separación entre el hero (con partículas) y las noticias */
.v9-news {
background: linear-gradient(180deg, var(--v9-surface-2) 0%, #ffffff 100%);
border-top: 1px solid var(--v9-line-soft);
margin-top: clamp(24px, 3vw, 40px);
}
.v9-stats__grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
margin: 0;
border-top: 1px solid var(--v9-line);
border-bottom: 1px solid var(--v9-line);
}
.v9-stat {
min-width: 0;
padding: 1.4rem 1.2rem;
border-left: 1px solid var(--v9-line);
}
.v9-stat:first-child { border-left: none; }
/* antes que a propósito: la cifra manda visualmente; el orden
semántico sigue siendo correcto dentro del . */
.v9-stat__num {
display: block;
margin: 0;
font-size: clamp(1.7rem, 2.6vw, 2.35rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--v9-ink);
font-variant-numeric: tabular-nums;
}
.v9-stat__label {
display: block;
margin-top: 0.45rem;
font-size: var(--v9-label-size);
font-weight: 600;
letter-spacing: var(--v9-label-track);
text-transform: uppercase;
color: var(--v9-muted);
}
/* Acento de marca: un trazo corto bajo la cifra, azul→verde de la casa */
.v9-stat__num::after {
content: "";
display: block;
width: 28px;
height: 3px;
margin-top: 0.7rem;
border-radius: 2px;
background: var(--v9-gradient);
}
@media (max-width: 1100px) {
.v9-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v9-stat:nth-child(4) { border-left: none; }
.v9-stat:nth-child(n+4) { border-top: 1px solid var(--v9-line); }
}
@media (max-width: 600px) {
.v9-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v9-stat { padding: 1.1rem 0.9rem; }
.v9-stat:nth-child(4) { border-left: 1px solid var(--v9-line); }
.v9-stat:nth-child(odd) { border-left: none; }
.v9-stat:nth-child(n+3) { border-top: 1px solid var(--v9-line); }
.v9-stat__label { font-size: 0.66rem; letter-spacing: 0.06em; }
}
/* ==========================================================================
INDEX · Últimas noticias — SLIDER corporativo (6ª iteración, 2026-09-16)
--------------------------------------------------------------------------
Banner 1200×400 ENTERO a la izquierda, panel oscuro con el texto a la
derecha (el texto nunca va debajo ni encima de la imagen), pestañas
numeradas con los titulares como índice/navegación, barra de progreso.
========================================================================== */
.v9-news {
padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 80px);
}
.v9-news__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.4rem;
}
.v9-news__kicker {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.3rem;
font-size: var(--v9-label-size);
font-weight: 600;
letter-spacing: var(--v9-label-track);
text-transform: uppercase;
color: var(--v9-action);
}
.v9-news__kicker::before {
content: "";
width: 28px;
height: 3px;
border-radius: 2px;
background: var(--v9-gradient);
}
.v9-news__title {
margin: 0;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--v9-ink);
}
.v9-news__all {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.5rem;
border: 2px solid var(--alarcos-blue);
border-radius: var(--v9-r-pill);
font-weight: 600;
font-size: 0.9rem;
color: var(--v9-action);
text-decoration: none;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.v9-news__all:hover,
.v9-news__all:focus-visible { background: var(--v9-action); color: #fff; transform: translateY(-2px); }
.v9-news__all .material-icons-outlined { font-size: 1.15rem; }
/* ── Slider ────────────────────────────────────────────────────────────── */
.v9-slider {
--v9-delay: 6500ms;
/* Mismo oscuro que el pie de la web oficial (2026-09-16, "por unificar"):
.site-footer = linear-gradient(135deg, --alarcos-dark var(--v9-ink), #2d3748). */
--v9-panel: var(--v9-ink);
--v9-panel-2: #2d3748;
}
.v9-slider__viewport {
position: relative;
border-radius: var(--v9-r-card);
overflow: hidden;
background: var(--v9-panel);
box-shadow: var(--v9-shadow-lg);
}
/* Filete de marca arriba */
.v9-slider__viewport::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
z-index: 3;
background: var(--v9-gradient);
}
.v9-slider__track {
position: relative;
margin: 0;
padding: 0;
list-style: none;
display: grid; /* todas las diapositivas en la misma celda */
}
.v9-slide {
grid-area: 1 / 1;
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
opacity: 0;
visibility: hidden;
transform: translateX(24px);
transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}
.v9-slide.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s;
z-index: 1;
}
/* Imagen: el banner entero, centrado verticalmente sobre un fondo neutro
que empasta con su propio blanco */
.v9-slide__media {
display: flex;
align-items: center;
background: var(--v9-surface-2);
padding: 1.4rem;
min-width: 0;
}
.v9-slide__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 1;
object-fit: cover;
border-radius: var(--v9-r-media);
box-shadow: var(--v9-shadow-md);
background: #fff;
}
.v9-slide__img--empty {
background: linear-gradient(135deg, rgba(var(--alarcos-blue-value), 0.15), rgba(var(--alarcos-green-value), 0.15));
}
/* Panel de texto */
.v9-slide__panel {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.85rem;
padding: 2.2rem 2.4rem 3.6rem; /* hueco inferior para los controles */
color: #fff;
background:
radial-gradient(120% 90% at 100% 0%, rgba(var(--alarcos-blue-value), 0.18), transparent 60%),
linear-gradient(135deg, var(--v9-panel) 0%, var(--v9-panel-2) 100%);
min-width: 0;
}
.v9-slide__meta {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.62);
}
.v9-slide__new {
display: inline-block;
padding: 0.18rem 0.6rem;
border-radius: var(--v9-r-pill);
background: var(--alarcos-green);
color: var(--v9-green-ink);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: var(--v9-label-track);
text-transform: uppercase;
}
.v9-slide__title {
margin: 0;
font-size: clamp(1.15rem, 1.7vw, 1.5rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: #fff;
}
.v9-slide__excerpt {
margin: 0;
font-size: 0.93rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
}
.v9-slide__cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
align-self: flex-start;
margin-top: 0.4rem;
padding: 0.7rem 1.4rem;
border-radius: var(--v9-r-pill);
background: #fff;
color: var(--v9-action);
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Hover como los demás botones de la web oficial: se rellena de azul, sube
y le sale un halo. (La versión anterior solo subía 2px con sombra negra
sobre el panel oscuro: invisible.) */
.v9-slide__cta {
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.v9-slide__cta:hover,
.v9-slide__cta:focus-visible {
background: var(--v9-action);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(var(--alarcos-blue-value), 0.45), 0 0 0 4px rgba(255, 255, 255, 0.12);
}
.v9-slide__cta .material-icons-outlined { font-size: 1.1rem; transition: transform 0.2s ease; }
.v9-slide__cta:hover .material-icons-outlined { transform: translateX(4px); }
/* Controles: abajo a la derecha del panel */
.v9-slider__controls {
position: absolute;
right: 2.4rem;
bottom: 1.4rem;
z-index: 2;
display: flex;
align-items: center;
gap: 0.6rem;
}
.v9-slider__arrow {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.28);
background: transparent;
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.v9-slider__arrow:hover,
.v9-slider__arrow:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.v9-slider__arrow .material-icons-outlined { font-size: 1.2rem; }
.v9-slider__counter {
font-size: 0.78rem;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.55);
font-variant-numeric: tabular-nums;
min-width: 4.2em;
text-align: center;
}
.v9-slider__counter b { color: #fff; font-weight: 700; }
/* Miniaturas de navegación: los propios banners, sin titular */
.v9-thumbs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1rem;
margin: 1.1rem 0 0;
padding: 0;
list-style: none;
}
.v9-thumb { min-width: 0; }
.v9-thumb button {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
border-radius: var(--v9-r-media);
overflow: hidden;
opacity: 0.55;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.v9-thumb button:hover,
.v9-thumb button:focus-visible { opacity: 0.85; }
.v9-thumb button:focus-visible { outline: 2px solid var(--alarcos-blue); outline-offset: 3px; }
.v9-thumb.is-active button { opacity: 1; transform: translateY(-2px); }
.v9-thumb__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 1;
object-fit: cover;
background: #fff;
border: 1px solid var(--v9-line);
border-radius: var(--v9-r-media) var(--v9-r-media) 0 0;
box-sizing: border-box;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.v9-thumb.is-active .v9-thumb__img {
border-color: var(--v9-action);
box-shadow: var(--v9-shadow-action);
}
.v9-thumb__img--empty {
background: linear-gradient(135deg, rgba(var(--alarcos-blue-value), 0.12), rgba(var(--alarcos-green-value), 0.12));
}
.v9-thumb__num {
position: absolute;
top: 6px;
left: 6px;
padding: 0.1rem 0.45rem;
border-radius: var(--v9-r-pill);
background: rgba(31, 41, 51, 0.85);
color: #fff;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.v9-thumb__bar {
display: block;
height: 4px;
background: var(--v9-surface);
overflow: hidden;
}
.v9-thumb__progress {
display: block;
height: 100%;
width: 100%;
transform-origin: left;
transform: scaleX(0);
background: var(--v9-gradient);
}
.v9-thumb.is-active .v9-thumb__progress { transform: scaleX(1); }
.v9-slider.is-playing .v9-thumb.is-active .v9-thumb__progress {
animation: v9-progress var(--v9-delay) linear forwards;
}
@keyframes v9-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.v9-news__empty {
padding: 2rem;
text-align: center;
color: var(--v9-muted);
border: 1px dashed var(--v9-line-strong);
border-radius: var(--v9-r-media);
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
/* Tira desplazable: siempre están las 5; la activa se centra sola (JS) */
.v9-thumbs {
display: flex;
gap: 0.8rem;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding: 4px 2px 6px;
margin-inline: -2px;
}
.v9-thumbs::-webkit-scrollbar { display: none; }
.v9-thumb { flex: 0 0 168px; scroll-snap-align: center; }
}
@media (max-width: 900px) {
.v9-slide { grid-template-columns: 1fr; }
.v9-slide__media { padding: 1rem 1rem 0; background: var(--v9-panel); }
.v9-slide__panel { padding: 1.4rem 1.4rem 3.4rem; }
.v9-slider__controls { right: 1.4rem; bottom: 1.1rem; }
}
@media (max-width: 600px) {
.v9-thumb { flex-basis: 132px; }
.v9-slide__title { font-size: 1.1rem; }
.v9-slide__excerpt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.v9-slide { transition: none; }
.v9-news__all, .v9-slide__cta, .v9-slide__cta .material-icons-outlined { transition: none; }
.v9-news__all:hover, .v9-slide__cta:hover { transform: none; }
.v9-thumb__progress { animation: none !important; }
.v9-thumb button { transition: none; }
}
/* ==========================================================================
MIEMBROS · filtro por categoría (v9, 2026-09-16)
========================================================================== */
.v9-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.v9-filter__btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 40px;
padding: 0.5rem 1.1rem;
border-radius: var(--v9-r-pill);
border: 2px solid var(--v9-action-line);
background: #fff;
color: var(--v9-ink);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.v9-filter__btn:hover,
.v9-filter__btn:focus-visible {
border-color: var(--v9-action);
color: var(--v9-action);
transform: translateY(-1px);
}
.v9-filter__btn.is-active,
.v9-filter__btn.active {
background: var(--v9-action);
border-color: var(--v9-action);
color: #fff;
}
.v9-filter__count {
font-size: 0.72rem;
font-weight: 700;
padding: 0.1rem 0.45rem;
border-radius: var(--v9-r-pill);
background: rgba(var(--alarcos-blue-value), 0.10);
color: var(--v9-action);
font-variant-numeric: tabular-nums;
}
/* 2026-09-22 (axe): blanco sobre el azul aclarado por la transparencia daba 3,59:1 -> fondo oscuro propio (AA) */
.v9-filter__btn.is-active .v9-filter__count,
.v9-filter__btn.active .v9-filter__count { background: rgba(0, 0, 0, 0.30); color: #fff; }
.v9-filter__count:empty { display: none; }
/* Móvil (2026-09-21): el wrap centrado apila las píldoras en varias filas
desiguales (zigzag) y se come media pantalla antes de llegar al contenido
(Miembros, Publicaciones, Instalaciones). Tira horizontal deslizable en su lugar. */
@media (max-width: 600px) {
/* 2026-09-25 — REVISADO: esto era `nowrap` + `overflow-x:auto` (tira deslizable, 21-09) para
evitar el «zigzag» de las píldoras al envolver. Medido en móvil real, el remedio era peor:
los filtros de Miembros ocupaban 909 px en una pantalla de 376, los de Publicaciones 779 y
los de Eventos 704 — es decir, la mayoría de los filtros eran INVISIBLES y nada indicaba
que se pudiera arrastrar. El zigzag venía del centrado, no del wrap: envolviendo con
`justify-content: flex-start` las píldoras quedan alineadas y todas a la vista. */
.v9-filter {
flex-wrap: wrap;
justify-content: flex-start;
row-gap: 0.4rem;
padding-bottom: 0.3rem;
}
.v9-filter::-webkit-scrollbar { height: 0; }
/* Al pasar de tira deslizable a wrap (arriba), una píldora más ancha que la pantalla ya no
se puede arrastrar: se salía. Caso real, Transferencia: «Desarrollo Global de Software y
Gestión del Conocimiento» medía 413 px en 400. Ahora puede encoger y partir el texto en
dos líneas; las cortas siguen en una sola porque solo se parte lo que no cabe. */
.v9-filter__btn { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
/* EXCEPCIÓN (2026-09-25, reporte del usuario): los filtros de TEMA de Noticias no son 4-6
píldoras como los de Miembros o Publicaciones, sino 12 (Líneas) + 8 (Tipo). Deslizables
medían 2.419 px y 1.511 px en una pantalla de 376: el lector no ve qué temas hay ni
intuye que puede deslizar. Aquí sí conviene envolver en varias filas —el «zigzag» que
motivó la regla de arriba venía del centrado, no del wrap—, así que se envuelve
alineando a la izquierda y con las píldoras un punto más compactas. */
/* (los estilos del viven en su propio bloque de 700px, más abajo) */
.v9-etqbar__det > summary {
cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem;
padding: .35rem 0;
}
.v9-etqbar__det > summary::-webkit-details-marker { display: none; }
.v9-etqbar__det > summary::after {
content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
font-size: .62rem; transition: transform .18s ease;
}
.v9-etqbar__det[open] > summary::after { transform: rotate(180deg); }
.v9-etqbar__n {
font-size: .68rem; background: var(--v9-chip, rgba(0,0,0,.06));
border-radius: 999px; padding: 0 .4rem; font-weight: 600;
}
.v9-filter--etq {
flex-wrap: wrap;
overflow-x: visible;
scroll-snap-type: none;
row-gap: 0.4rem;
}
.v9-filter--etq .v9-filter__btn {
scroll-snap-align: none;
font-size: 0.78rem;
padding-block: 0.28rem;
}
}
/* Estados del buscador de miembros (antes en un