/*
 * Estilos comunes del sitio público (escrito a mano; no pasa por Vite ni por el CSS de 2025).
 */

/* Fuentes Ciutadella en WOFF2 (unos 30% más ligeras). Reemplazan las @font-face del CSS de 2025,
   que apuntan a los .woff: con la misma familia y el mismo peso gana la última que se declara. */
@font-face { font-family: Ciutadella; src: url('/assets/fonts/ciutadella/Ciutadella-Regular.woff2') format('woff2'), url('/assets/fonts/ciutadella/Ciutadella Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Ciutadella; src: url('/assets/fonts/ciutadella/Ciutadella-Italic.woff2') format('woff2'), url('/assets/fonts/ciutadella/Ciutadella Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Ciutadella; src: url('/assets/fonts/ciutadella/Ciutadella-Light.woff2') format('woff2'), url('/assets/fonts/ciutadella/Ciutadella Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Ciutadella; src: url('/assets/fonts/ciutadella/Ciutadella-Medium.woff2') format('woff2'), url('/assets/fonts/ciutadella/Ciutadella Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Ciutadella; src: url('/assets/fonts/ciutadella/Ciutadella-SemiBold.woff2') format('woff2'), url('/assets/fonts/ciutadella/Ciutadella SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Ciutadella; src: url('/assets/fonts/ciutadella/Ciutadella-Bold.woff2') format('woff2'), url('/assets/fonts/ciutadella/Ciutadella Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

/* Flechas (→ ↗): Ciutadella no las tiene. Con una fuente del sistema, el navegador no descarga
   los archivos .woff viejos solo para buscarlas ahí. */
.flecha { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 400; }

/* Botón del sitio: texto con una línea azul debajo, esquinas rectas; al pasar el mouse se llena de azul
   (el mismo lenguaje que los 3 botones de la portada). Sobre fondo oscuro, añade .boton-decj--claro. */
.boton-decj {
    display: inline-block;
    padding: 10px 28px 8px;
    border: 0;
    border-bottom: 3px solid #4e92ce;
    border-radius: 0;
    background: transparent;
    color: #303030;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.boton-decj--claro { color: #fff; }
.boton-decj:hover,
.boton-decj:focus-visible { background: #4e92ce; color: #fff; }
.boton-decj:focus-visible { outline: 2px solid #4e92ce; outline-offset: 3px; }
.boton-decj[disabled] { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .boton-decj { transition: none; } }