/* =============================================================
   Europa Cup Floral Art — Eurofleurs Murcia 2027
   Hoja base: tokens, reset, tipografía, contenedor, botones.
   Todo lo demás (header, footer, secciones) se construye encima.
   ============================================================= */


/* -------------------------------------------------------------
   1. TOKENS DE DISEÑO
   Centralizados aquí para poder reescribir TODA la identidad
   visual cambiando sólo este bloque.
   ------------------------------------------------------------- */
:root {

    /* --- Paleta --- */
    /* Azul marino institucional (extraído del logo) */
    --color-primary:        #00316b;
    --color-primary-dark:   #0097d8;
    --color-primary-soft:   #e8eef7;   /* fondos muy claros */
    --color-primary-yellow:   #e9e50f;   /* fondos muy claros */

    /* Acento — magenta del pétalo rosa del logo. Uso PUNTUAL. */
    --color-accent:         #d4145a;
    --color-accent-dark:    #a80f47;

    /* Texto */
    --color-text:           #1a1a1a;
    --color-text-muted:     #5f6470;
    --color-text-inverse:   #ffffff;

    /* Superficies */
    --color-bg:             #ffffff;
    --color-bg-soft:        #faf9f6;   /* off-white cálido */
    --color-bg-dark:        #00316b;   /* secciones invertidas */

    /* Bordes y separadores */
    --color-border:         #e6e8ec;
    --color-border-strong:  #c9ced8;


    /* --- Tipografía --- */
    --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Escala fluida (clamp = se adapta sin media queries) */
    --fs-xs:    0.8125rem;                       /* 13 px */
    --fs-sm:    0.9375rem;                       /* 15 px */
    --fs-base:  1rem;                            /* 16 px */
    --fs-lg:    1.125rem;                        /* 18 px */
    --fs-xl:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-h3:    clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
    --fs-h2:    clamp(2rem,   1.5rem + 2.2vw, 2.75rem);
    --fs-h1:    clamp(2.5rem, 1.8rem + 3.2vw, 4rem);

    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-base:   1.65;

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    --tracking-tight:   -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.06em;


    /* --- Espaciado (escala 4 px) --- */
    --space-1:  0.25rem;    /*  4 px */
    --space-2:  0.5rem;     /*  8 px */
    --space-3:  0.75rem;    /* 12 px */
    --space-4:  1rem;       /* 16 px */
    --space-5:  1.5rem;     /* 24 px */
    --space-6:  2rem;       /* 32 px */
    --space-7:  3rem;       /* 48 px */
    --space-8:  4rem;       /* 64 px */
    --space-9:  6rem;       /* 96 px */
    --space-10: 8rem;       /* 128 px */

    /* Padding vertical estándar de una sección */
    --section-py: clamp(3rem, 6vw, 6rem);


    /* --- Contenedor --- */
    --container-max:     1200px;
    --container-narrow:  860px;
    --container-px:      clamp(1rem, 4vw, 2rem);


    /* --- Radios --- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-pill: 999px;


    /* --- Sombras (suaves, editoriales) --- */
    --shadow-sm: 0 1px 2px rgba(0, 49, 107, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 49, 107, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 49, 107, 0.12);


    /* --- Transiciones --- */
    --transition-fast:  120ms ease;
    --transition-base:  200ms ease;
    --transition-slow:  400ms ease;

    /* --- Altura del header en estado inicial (no scrolled) --- */
    /* padding-block * 2 + altura del logo. Útil para dimensionar el hero. */
    --header-h: 112px;
}

@media (max-width: 991.98px) {
    :root { --header-h: 100px; }
}


/* -------------------------------------------------------------
   2. RESET MÍNIMO MODERNO
   ------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    /* Compensa el header fijo cuando saltamos a un ancla (#) */
    scroll-padding-top: var(--header-h);
}

body {
    margin: 0;
    /* Empuja el contenido hacia abajo para que no quede tapado por el header fijo */
    padding-top: var(--header-h);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Las páginas con hero NO necesitan ese padding: el hero ya empieza en y=0
   y el header transparente flota encima */
body.has-hero {
    padding-top: 0;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

picture { display: block; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-primary-dark);
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0 0 var(--space-4);
}

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


/* -------------------------------------------------------------
   3. TIPOGRAFÍA BASE
   Titulares en serif (Cormorant), texto en sans (Inter).
   ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-serif);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-primary);
    letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-medium); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-xl); }

/* Eyebrow / antetítulo: pequeñito, en sans, mayúsculas, espaciado. */
.eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-base);
    color: var(--color-text-muted);
}

.text-muted   { color: var(--color-text-muted); }
.text-center  { text-align: center; }


/* -------------------------------------------------------------
   4. CONTENEDOR
   ------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

.container-narrow {
    max-width: var(--container-narrow);
}


/* -------------------------------------------------------------
   5. SECCIONES
   Patrón uniforme de padding vertical, con variantes de fondo.
   ------------------------------------------------------------- */
.section {
    padding-block: var(--section-py);
}

.section--soft {
    background-color: var(--color-bg-soft);
}

.section--primary {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.section--primary h1,
.section--primary h2,
.section--primary h3,
.section--primary h4 {
    color: var(--color-text-inverse);
}

.section--primary .text-muted {
    color: rgba(255, 255, 255, 0.75);
}

.section.bg-image{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* -------------------------------------------------------------
   6. BOTONES
   Sólo dos variantes base + un modificador de tamaño.
   Sin bordes redondeados extremos: pill suave y formato sobrio.
   ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85rem 1.75rem;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    line-height: 1;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Primario — relleno azul marino */
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}
.btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Outline — para acciones secundarias */
.btn--outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Sobre fondo oscuro */
.section--primary .btn--outline {
    color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
}
.section--primary .btn--outline:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
}

/* Acento — uso muy puntual (un único CTA destacado por página) */
.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
}
.btn--accent:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Tamaños */
.btn--lg {
    padding: 1.05rem 2.25rem;
    font-size: var(--fs-base);
}
.btn--sm {
    padding: 0.6rem 1.25rem;
    font-size: var(--fs-xs);
}


/* -------------------------------------------------------------
   7. UTILIDADES MÍNIMAS
   ------------------------------------------------------------- */
.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;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-6);
}


/* -------------------------------------------------------------
   8. SITE HEADER
   - Sticky en top, se contrae al hacer scroll (clase .is-scrolled).
   - Menú lateral en escritorio, desplegable en móvil.
   ------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-5);
    transition: padding var(--transition-base);
}

/* Logo */
.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    position: relative;
}
.site-header__logo img {
    height: 64px;
    width: auto;
    transition: height var(--transition-base),
                opacity var(--transition-base);
}
/* Versión blanca apilada encima de la de color */
.site-header__logo-white {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

/* Grupo derecha del header: selector + toggle + nav */
.site-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* ---- Selector de idioma ES / EN ---- */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px;
    transition: border-color var(--transition-base);
}
.lang-switcher__btn {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    line-height: 1;
    transition: background-color var(--transition-base),
                color var(--transition-base);
    cursor: pointer;
}
.lang-switcher__btn:hover {
    color: var(--color-primary);
}
.lang-switcher__btn.is-active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Estado contraído (al hacer scroll) */
.site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}
.site-header.is-scrolled .site-header__inner {
    padding-block: var(--space-3);
}
.site-header.is-scrolled .site-header__logo img {
    height: 44px;
}

/* ---- Navegación (escritorio) ---- */
.site-nav {
    display: flex;
    align-items: center;
    
}
.site-nav__list {
    display: flex;
    gap: var(--space-7);

    
}
.site-nav__list a {
    position: relative;
    display: inline-block;
    font-family: var(--font-sans) !important;
    font-weight: var(--fw-medium) !important;
    color: var(--color-text);
    letter-spacing: 0.01em;
    padding-block: var(--space-2);
}
.site-nav__list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}
.site-nav__list a:hover {
    color: var(--color-primary);
}
.site-nav__list a:hover::after,
.site-nav__list a.is-active::after {
    width: 100%;
}

/* Estado activo: peso semibold y color primario */
.site-nav__list a.is-active {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

/* ---- Botón hamburguesa (oculto en escritorio) ---- */
.site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}
.site-header__toggle:hover {
    background-color: var(--color-primary-soft);
}


/* ---- Móvil: < 992px ---- */
@media (max-width: 991.98px) {

    .site-header__logo img { height: 52px; }
    .site-header.is-scrolled .site-header__logo img { height: 40px; }

    .site-header__toggle {
        display: inline-flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background-color: var(--color-bg);
        border-top: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        padding: var(--space-5) var(--container-px) var(--space-6);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--transition-base),
                    opacity var(--transition-base),
                    visibility var(--transition-base);
    }
    .site-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
    }
    .site-nav__list li {
        border-bottom: 1px solid var(--color-border);
    }
    .site-nav__list li:last-child {
        border-bottom: 0;
    }
    .site-nav__list a {
        display: block;
        font-family: var(--font-serif);
        font-size: var(--fs-xl);
        font-weight: var(--fw-medium);
        color: var(--color-primary);
        padding-block: var(--space-4);
    }
    .site-nav__list a.is-active {
        font-weight: var(--fw-bold);
    }
    .site-nav__list a::after {
        display: none;
    }
}


/* -------------------------------------------------------------
   9. SITE FOOTER
   - Fondo azul marino, texto claro.
   - 3 columnas en escritorio: marca+social, navegación, legal.
   - Barra inferior con copyright y crédito.
   ------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-bg-dark);
    color: rgba(255, 255, 255, 0.75);
    padding-top: var(--space-9);
    padding-bottom: var(--space-5);
}

.site-footer__top {
    padding-bottom: var(--space-8);
}

/* --- Columna marca --- */
.site-footer__logo {
    display: inline-block;
    line-height: 0;
    margin-bottom: var(--space-5);
}
.site-footer__logo img {
    height: 70px;
    width: auto;
}

.site-footer__tagline {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: rgba(255, 255, 255, 0.75);
    max-width: 380px;
    margin-bottom: var(--space-5);
}

/* --- Iconos sociales --- */
.site-footer__social {
    display: flex;
    gap: var(--space-3);
}
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    transition: all var(--transition-base);
}
.site-footer__social a:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
    border-color: var(--color-text-inverse);
    transform: translateY(-2px);
}

/* --- Columnas de enlaces --- */
.site-footer__heading {
    /* Aquí sí queremos sans (es una etiqueta de UI, no un titular editorial) */
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-5);
}

.site-footer__links li {
    margin-bottom: var(--space-3);
}
.site-footer__links li:last-child {
    margin-bottom: 0;
}
.site-footer__links a {
    display: inline-block;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-base),
                transform var(--transition-base);
}
.site-footer__links a:hover {
    color: var(--color-text-inverse);
    transform: translateX(3px);
}

/* --- Barra inferior --- */
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}
.site-footer__bottom p {
    margin: 0;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.55);
}
.site-footer__bottom a {
    color: rgba(255, 255, 255, 0.75);
}
.site-footer__bottom a:hover {
    color: var(--color-text-inverse);
}

/* --- Móvil --- */
@media (max-width: 767.98px) {
    .site-footer__brand,
    .site-footer__col {
        margin-bottom: var(--space-7);
    }
    .site-footer__col:last-child {
        margin-bottom: 0;
    }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}


/* -------------------------------------------------------------
   10. HERO (home)
   - Full-bleed con imagen de fondo + degradado.
   - Se monta DEBAJO del header (margin-top negativo) para que
     el header transparente quede flotando encima.
   ------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    text-align: center;
    overflow: hidden;
    padding-top: var(--header-h);   /* compensa el header encima */
    padding-bottom: var(--space-8);

    /* Degradado oscuro encima de la imagen para legibilidad */
    /*background-image:       linear-gradient(180deg,            rgba(0, 31, 71, 0.55) 0%,            rgba(0, 31, 71, 0.45) 40%,            rgba(0, 31, 71, 0.75) 100%),        url('../img/bg-hero.jpg');*/

    background-image:    linear-gradient(180deg, rgba(0, 31, 71, 0.55) 0%, rgba(0, 31, 71, 0.45) 40%, rgb(109 146 193 / 34%) 100%), url(../img/bg-hero.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__logo {
    width: clamp(260px, 38vw, 480px);
    height: auto;
    margin-bottom: var(--space-6);
    filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.45));
    animation: heroFadeUp 900ms ease both;
}

.hero__tagline {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
    max-width: 720px;
    margin: 0 auto var(--space-7);
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    animation: heroFadeUp 900ms 150ms ease both;
}

.hero__cta {
    animation: heroFadeUp 900ms 300ms ease both;
    background-color: #0097d8 !important;
    border: 2px solid #3aaddf;
}


.hero__cta:hover {
    background-color: #ffc600 !important;
    border: 2px solid #f1d56d;
}

/* Indicador de scroll (la flechita abajo) */
.hero__scroll {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
    border-radius: var(--radius-pill);
    transition: color var(--transition-base), transform var(--transition-base);
    animation: heroBounce 2.4s ease-in-out infinite;
}
.hero__scroll:hover {
    color: var(--color-text-inverse);
}

/* Animaciones */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes heroBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

/* Respeta a quienes prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .hero__logo,
    .hero__tagline,
    .hero__cta,
    .hero__scroll {
        animation: none;
    }
}


/* -------------------------------------------------------------
   11. HEADER TRANSPARENTE SOBRE HERO
   Se activa sólo en páginas con body.has-hero, mientras el
   header NO tenga la clase .is-scrolled. Al hacer scroll vuelve
   al estado normal automáticamente.
   ------------------------------------------------------------- */
body.has-hero .site-header:not(.is-scrolled) {
    background-color: rgba(255, 206, 124, 0.12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Crossfade de logos: mostrar el blanco, ocultar el de color */
body.has-hero .site-header:not(.is-scrolled) .site-header__logo-color {
    opacity: 0;
}
body.has-hero .site-header:not(.is-scrolled) .site-header__logo-white {
    opacity: 1;
}

/* Enlaces del menú en blanco */
body.has-hero .site-header:not(.is-scrolled) .site-nav__list a,
body.has-hero .site-header:not(.is-scrolled) .site-nav__list a.is-active {
    color: var(--color-text-inverse) !important;
}
body.has-hero .site-header:not(.is-scrolled) .site-nav__list a::after {
    background-color: var(--color-text-inverse);
}

/* EXCEPCIÓN: cuando el menú móvil está abierto, recupera su aspecto
   normal (fondo blanco sólido, texto azul) aunque estemos en la home
   sobre el hero. Si no, el panel desplegable tendría texto blanco
   sobre fondo blanco translúcido = invisible. */
@media (max-width: 991.98px) {
    body.has-hero .site-header:not(.is-scrolled) .site-nav.is-open .site-nav__list a,
    body.has-hero .site-header:not(.is-scrolled) .site-nav.is-open .site-nav__list a.is-active {
        color: var(--color-primary) !important;
    }
}

/* Hamburguesa en blanco */
body.has-hero .site-header:not(.is-scrolled) .site-header__toggle {
    color: var(--color-text-inverse);
}
body.has-hero .site-header:not(.is-scrolled) .site-header__toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Selector de idioma en blanco (header transparente sobre hero) */
body.has-hero .site-header:not(.is-scrolled) .lang-switcher {
    border-color: rgba(255, 255, 255, 0.35);
}
body.has-hero .site-header:not(.is-scrolled) .lang-switcher__btn {
    color: rgba(255, 255, 255, 0.85);
}
body.has-hero .site-header:not(.is-scrolled) .lang-switcher__btn:hover {
    color: var(--color-text-inverse);
}
body.has-hero .site-header:not(.is-scrolled) .lang-switcher__btn.is-active {
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
}


/* -------------------------------------------------------------
   12. WELCOME SECTION (home)
   - 2 columnas: texto + 4 tarjetas de acceso rápido en grid 2x2.
   ------------------------------------------------------------- */
.welcome__intro .eyebrow {
    margin-bottom: var(--space-3);
}

@media (min-width: 992px) {
    .welcome__intro {
        padding-right: var(--space-6);
    }
}

.access-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 991.98px) {
    .access-cards {
        margin-top: var(--space-7);
    }
}
@media (max-width: 575.98px) {
    .access-cards {
        grid-template-columns: 1fr;
    }
}

/* --- Tarjeta individual --- */
.access-card {
    position: relative;
    display: block;
    padding: var(--space-6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

/* Degradado azul claro que aparece sutilmente al hacer hover */
.access-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
                var(--color-primary-soft) 0%,
                transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
}

.access-card:hover {
    border: 1px dashed #c9ced8;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
}
.access-card:hover::before {
    opacity: 1;
}

/* --- Icono --- */
.access-card__icon {
    display: inline-flex;   
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    /*background-color: var(--color-primary-soft);*/
    /*color: var(--color-primary);*/
    color: #d8c200;
    background-color: #fff2c4;

    float: left;
    margin-right: 15px;

    font-size: 1.4rem;
    margin-bottom: var(--space-4);
    transition: background-color var(--transition-base),
                color var(--transition-base);
}
.access-card:hover .access-card__icon {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* --- Título --- */
.access-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    line-height: var(--lh-snug);
    margin: 0 0 var(--space-2);
}

/* --- Descripción --- */
.access-card__desc {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--lh-snug);
}

/* --- Flecha que aparece en hover --- */
.access-card__arrow {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    color: var(--color-primary);
    font-size: 1.1rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--transition-base),
                transform var(--transition-base);
}
.access-card:hover .access-card__arrow {
    opacity: 1;
    transform: translateX(0);
}


/* -------------------------------------------------------------
   13. FEATURE CARDS SECTION (home)
   - Sección blanca con título centrado y 3 tarjetas grandes.
   - Mismo lenguaje visual que .access-card pero a mayor escala.
   - Incluye .section-head reutilizable para futuras secciones.
   ------------------------------------------------------------- */

/* ---- Cabecera reutilizable de sección (centrada) ---- */
.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-8);
}
.section-head h2 {
    margin-bottom: var(--space-3);
}
.section-head .lead {
    margin: 0;
}

/* ---- Columnas: separación vertical cuando se apilan ---- */
.features__col {
    margin-bottom: var(--space-5);
}
@media (min-width: 992px) {
    .features__col {
        margin-bottom: 0;
    }
}

/* ---- Tarjeta ---- */
.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: var(--space-7) var(--space-6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}


/* Degradado azul claro que aparece en hover */
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                #9ec8d6b3  0%,
                transparent 65%);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
}

.feature-card:hover {
    border: 1px dashed #c9ced8;
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
}
.feature-card:hover::before {
    opacity: 1;
}

/* ---- Icono grande en círculo ---- */
.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 2rem;
    margin-bottom: var(--space-5);
    transition: background-color var(--transition-base),
                color var(--transition-base),
                transform var(--transition-base);
}
.feature-card:hover .feature-card__icon {
    /*background-color: var(--color-primary);*/
    background-color: #ffc500;
    color: var(--color-text-inverse);
    transform: scale(1.05);
}

/* ---- Título ---- */
.feature-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    line-height: var(--lh-snug);
    margin: 0 0 var(--space-3);
}

/* ---- Descripción ---- */
.feature-card__desc {
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
    margin: 0 0 var(--space-5);
}

/* ---- CTA "Saber más" abajo ---- */
.feature-card__cta {
    /* Empuja el CTA al fondo si las tarjetas tienen alturas distintas */
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    letter-spacing: 0.02em;
}
.feature-card__cta i {
    transition: transform var(--transition-base);
}
.feature-card:hover .feature-card__cta i {
    transform: translateX(4px);
}


.feature-card.inverse{
    background: linear-gradient(206deg, #0097d8b3, #004c7a);
    color: var(--color-text-inverse) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
}

.feature-card.inverse .feature-card__title{
    color: var(--color-text-inverse) !important;
}
.feature-card.inverse .feature-card__desc{
    color: var(--color-text-inverse) !important;
}

.feature-card.inverse .feature-card__cta{
    color: var(--color-primary-yellow) !important;
}


/* -------------------------------------------------------------
   14. SPONSORS SECTION (home)
   - Logos centrados en una fila flex con buen aire entre ellos.
   - Hover sutil: ligero zoom.
   ------------------------------------------------------------- */
.sponsors__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-7) var(--space-9);
}

.sponsors__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.sponsors__item img {
    max-height: 80px;
    max-width: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform var(--transition-base),
                opacity var(--transition-base);
}

.sponsors__item:hover img {
    transform: scale(1.05);
}

@media (max-width: 575.98px) {
    .sponsors__item img {
        max-height: 64px;
    }
}


/* -------------------------------------------------------------
   15. PAGE: EL CERTAMEN
   - Imagen con redes sociales superpuestas (.media-figure).
   - Tarjetas info compactas (.info-card en .info-grid).
   ------------------------------------------------------------- */

/* Espacio extra entre el header fijo y el primer contenido en páginas internas */
.page-certamen h1 {
    font-size: var(--fs-h1);
    margin-bottom: var(--space-6);
}

/* En móvil/tablet la imagen va arriba con margen inferior */
@media (max-width: 991.98px) {
    .page-certamen__media {
        margin-bottom: var(--space-7);
    }
}

/* En escritorio damos un poco de aire entre la imagen y el texto */
@media (min-width: 992px) {
    .page-certamen__content {
        padding-left: var(--space-6);
    }
}

/* --- Imagen con redes sociales superpuestas --- */
.media-figure {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.media-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.media-figure__share {
    position: absolute;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.media-figure__share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base),
                color var(--transition-base),
                transform var(--transition-base);
}
.media-figure__share a:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    transform: translateY(-2px);
}

/* --- Tarjetas info (Cuándo / Dónde) --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-7);
}
@media (max-width: 575.98px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

.info-card {
    padding: var(--space-5) var(--space-6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.info-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-3);
    line-height: var(--lh-snug);
}

.info-card__list {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.info-card__list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    line-height: var(--lh-snug);
}
.info-card__list li:last-child {
    margin-bottom: 0;
}
.info-card__list i {
    color: var(--color-primary);
    font-size: 1rem;
    flex-shrink: 0;
}


/* -------------------------------------------------------------
   16. PAGE STUB (placeholder de páginas en preparación)
   ------------------------------------------------------------- */
.page-stub__inner {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding-block: var(--space-7);
}

.page-stub__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 2.5rem;
    margin-bottom: var(--space-6);
}

.page-stub h1 {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-4);
}

.page-stub .lead {
    margin-bottom: var(--space-7);
}


/* -------------------------------------------------------------
   17. FORMS (sistema genérico reutilizable)
   - .form-group, .form-label, .form-control, .form-check
   - .form-choice (radio cards)
   - .form-actions
   - .callout (avisos contextuales)
   ------------------------------------------------------------- */

/* ---- Callout: aviso contextual ---- */
.callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-primary-soft);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-7);
}
.callout > i {
    color: var(--color-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.15em;
}
.callout p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: var(--lh-base);
}
.callout strong {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

/* ---- Form base ---- */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label,
.form-choice legend {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
    line-height: var(--lh-snug);
}

.form-label__required {
    color: var(--color-accent);
    margin-left: 2px;
    font-weight: var(--fw-bold);
}

/* ---- Inputs y textarea ---- */
.form-control {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.4;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
}
.form-control:hover {
    border-color: var(--color-border-strong);
}
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 49, 107, 0.12);
}
.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.55;
}

textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

/* ---- Texto de ayuda bajo un input ---- */
.form-help {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    line-height: var(--lh-snug);
}

/* ---- Checkbox ---- */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}
.form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}
.form-check__label {
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: var(--lh-snug);
}
.form-check__label a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Radio cards (.form-choice) ---- */
.form-choice {
    /* fieldset reset */
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-5);
}
.form-choice__col {
    margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
    .form-choice__col {
        margin-bottom: 0;
    }
}

.form-choice__option {
    display: block;
    cursor: pointer;
    height: 100%;
}

/* Ocultar el radio nativo pero mantenerlo accesible */
.form-choice__option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-choice__card {
    display: block;
    height: 100%;
    padding: var(--space-5);
    background-color: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base),
                background-color var(--transition-base),
                transform var(--transition-base);
}
.form-choice__option:hover .form-choice__card {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.form-choice__option input[type="radio"]:checked + .form-choice__card {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
}
.form-choice__option input[type="radio"]:focus-visible + .form-choice__card {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.form-choice__title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
    line-height: var(--lh-snug);
}
.form-choice__desc {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-snug);
}

/* ---- Acciones del formulario ---- */
.form-actions {
    margin-top: var(--space-7);
    display: flex;
    justify-content: flex-start;
    gap: var(--space-3);
}


/* -------------------------------------------------------------
   18. NEWS CARDS (home: últimas noticias)
   - Imagen 16:10 arriba, body con fecha + título + extracto + CTA.
   - Hover: tarjeta se eleva, imagen hace zoom suave.
   ------------------------------------------------------------- */
.news__col {
    margin-bottom: var(--space-5);
}
@media (min-width: 992px) {
    .news__col {
        margin-bottom: 0;
    }
}

.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

/* ---- Imagen ---- */
.news-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-bg-soft);
}
.news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.news-card:hover .news-card__media img {
    transform: scale(1.04);
}

/* ---- Cuerpo de la tarjeta ---- */
.news-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.news-card__date {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.news-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin: 0 0 var(--space-3);
}
.news-card__title a {
    color: var(--color-primary);
}
.news-card__title a:hover {
    color: var(--color-primary-dark);
}

.news-card__excerpt {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
    margin: 0 0 var(--space-5);
}

.news-card__cta {
    /* Empuja el CTA al fondo aunque los extractos varíen de longitud */
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    letter-spacing: 0.02em;
}
.news-card__cta i {
    transition: transform var(--transition-base);
}
.news-card:hover .news-card__cta i {
    transform: translateX(4px);
}



.section.welcome{
    padding-top: 15vh;
    padding-bottom: 15vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.section.features{
    padding-top: 15vh;
    padding-bottom: 15vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}







/* -------------------------------------------------------------
   19. PAGE INFORMACION
   ------------------------------------------------------------- */
   .info-map {
    width: 100%;
    height: 360px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
    z-index: 0; /* Leaflet usa z-index alto, contenerlo */
}
.info-block {
    margin-bottom: var(--space-6);
}
@media (min-width: 992px) {
    .info-block { margin-bottom: 0; }
}
.info-social {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    font-size: 1.5rem;
}
.info-social a {
    color: var(--color-primary);
    transition: transform var(--transition-base);
}
.info-social a:hover {
    transform: translateY(-3px);
}












/* -------------------------------------------------------------
   20. TIMELINE (home)
   - PC: bloque horizontal ~200px, label izquierda + track
   - Móvil: label arriba full, hitos en 2 columnas
   ------------------------------------------------------------- */


   .timeline-section{
    padding-block: 0;
    border-top: 3px solid var(--color-primary);
    border-bottom: 1px solid #eee;
   }

   .timeline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: center;
    min-height: 120px;
    background-image: url(../img/bgdot.png);
    padding-top: 30px;
    padding-bottom: 30px;

}
.timeline__label {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    padding-right: var(--space-5);
    border-right: 1px solid var(--color-border-strong);
}
.timeline__track {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: var(--space-4) 0;
    margin: 0;
    list-style: none;
}
/* Línea horizontal que une los círculos */
.timeline__track::before {
    content: '';
    position: absolute;
    top: 26px; /* centro del círculo (12px radio + padding) */
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--color-border-strong);
    z-index: 0;
}
.timeline__step {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--space-2);
}
.timeline__dot {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    border: 2px solid var(--color-border-strong);
    margin-bottom: var(--space-3);
    transition: all var(--transition-base);
}
.timeline__text {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
    max-width: 130px;
}

/* Estado actual destacado */
.timeline__step.is-ready .timeline__dot {
    background: rgb(0, 102, 128);
    border-color: rgb(57, 145, 216);
    box-shadow: 0 0 0 6px rgba(20, 174, 212, 0.15);
    transform: scale(1.15);
}


/* Estado actual destacado */
.timeline__step.is-current .timeline__dot {
    background: green;
    border-color: greenyellow;
    box-shadow: 0 0 0 6px rgba(97, 212, 20, 0.15);
    transform: scale(1.15);
}
.timeline__step.is-current .timeline__text {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

/* ---- Móvil ---- */
@media (max-width: 767.98px) {
    .timeline {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        min-height: 0;
    }
    .timeline__label {
        text-align: center;
        padding: 0 0 var(--space-4);
        border-right: 0;
        border-bottom: 1px solid var(--color-border-strong);
    }
    .timeline__track {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5) var(--space-4);
    }
    .timeline__track::before {
        display: none; /* la línea no tiene sentido en grid 2 columnas */
    }
    .timeline__step {
        flex: none;
    }
    .timeline__text {
        max-width: 100%;
    }
}










/* -------------------------------------------------------------
   21. FAQ (acordeón)
   - Usa <details>/<summary> nativos: cero JS, accesible.
   ------------------------------------------------------------- */
   .faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.faq__item {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
}
.faq__item[open] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--transition-base);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover {
    background-color: var(--color-primary-soft);
}
.faq__icon {
    flex-shrink: 0;
    color: var(--color-primary);
    transition: transform var(--transition-base);
}
.faq__item[open] .faq__icon {
    transform: rotate(180deg);
}
.faq__a {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}


/* =============================================================
   22. FORMULARIO DE INSCRIPCIÓN — estados de error y éxito
   ============================================================= */

/* Garantiza que el atributo HTML `hidden` siempre oculte el elemento,
   incluso cuando la clase tenga display:flex o display:block. */
[hidden] { display: none !important; }

/* ---- Campo en error ---- */
.form-control--error {
    border-color: var(--color-accent) !important;
    background-color: #fff5f8;
}
.form-control--error:focus {
    box-shadow: 0 0 0 3px rgba(212, 20, 90, 0.14) !important;
}

/* ---- Grupo con error ---- */
.form-group--error {
    position: relative;
}

/* ---- Mensaje de error bajo el campo ---- */
.form-error {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-accent);
    line-height: var(--lh-snug);
}

/* ---- Texto de ayuda en estado error ---- */
.form-help--error {
    color: var(--color-accent);
}

/* ---- Alerta de resumen (banner superior del formulario) ---- */
.form-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
}
.form-alert > i {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: 1px;
}
.form-alert--error {
    background-color: #fff0f5;
    border: 1px solid rgba(212, 20, 90, 0.25);
    color: var(--color-accent);
}

/* ---- Honeypot: completamente invisible (sin display:none) ---- */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    tab-size: 0;
}

/* ---- Pantalla de éxito ---- */
.inscripcion-exito {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: var(--space-9) var(--space-8);
    max-width: 560px;
    margin: 0 auto;
}

.inscripcion-exito__icono {
    font-size: 4rem;
    color: #1e9e5a;
    margin-bottom: var(--space-5);
    line-height: 1;
    filter: drop-shadow(0 4px 16px rgba(30, 158, 90, 0.25));
}

.inscripcion-exito__titulo {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
    line-height: var(--lh-tight);
}

.inscripcion-exito__num {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background-color: var(--color-primary-soft);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    margin: 0 0 var(--space-5);
}
.inscripcion-exito__num strong {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.inscripcion-exito__desc {
    font-size: var(--fs-lg);
    line-height: var(--lh-base);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
}

.inscripcion-exito__sub {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-7);
}

/* ---- Spinner de envío (botón ocupado) ---- */
.insc-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}


/* =============================================================
   23. SINGLE NOTICIA / POST
   ============================================================= */

/* ---- Hero con imagen de cabecera ---- */
.single__hero {
    background-color: var(--color-bg-dark);
    background-size: cover;
    background-position: center;
    padding-top: calc(var(--header-h) + var(--space-8));
    padding-bottom: var(--space-9);
    color: var(--color-text-inverse);
}

.single__hero-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---- Breadcrumb ---- */
.single__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.6);
    flex-wrap: wrap;
}
.single__breadcrumb a {
    color: rgba(255,255,255,.7);
}
.single__breadcrumb a:hover {
    color: #fff;
}
.single__breadcrumb i {
    font-size: 10px;
    opacity: .5;
}

/* ---- Título hero ---- */
.single__titulo {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 2vw + 1rem, 3rem);
    font-weight: var(--fw-semibold);
    color: #fff;
    line-height: var(--lh-tight);
    margin: 0;
    text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.single__subtitulo {
    font-size: var(--fs-lg);
    color: rgba(255,255,255,.8);
    margin: 0;
    font-style: italic;
}

.single__meta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.7);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.single__meta i {
    margin-right: 4px;
    opacity: .7;
}

/* ---- Layout 2 columnas ---- */
.single__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-9);
    align-items: start;
}
@media (max-width: 991.98px) {
    .single__layout {
        grid-template-columns: 1fr;
    }
    .single__sidebar {
        order: -1;  /* sidebar arriba en móvil */
    }
}

/* ---- Extracto ---- */
.single__extracto {
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    font-style: italic;
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-5);
    margin-bottom: var(--space-6);
    line-height: var(--lh-base);
}

/* ---- Cuerpo del post (HTML de TinyMCE) ---- */
.single__body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
}
.single__body h2 {
    font-size: var(--fs-h3);
    margin-top: var(--space-7);
    margin-bottom: var(--space-4);
}
.single__body h3 {
    font-size: var(--fs-xl);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}
.single__body p {
    margin-bottom: var(--space-4);
}
.single__body img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin-block: var(--space-5);
}
.single__body ul, .single__body ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}
.single__body li {
    margin-bottom: var(--space-2);
}
.single__body blockquote {
    border-left: 3px solid var(--color-primary);
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-primary-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text-muted);
}

/* ---- Galería ---- */
.single__galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: var(--space-7) 0;
}
.single__galeria-item {
    margin: 0;
}
.single__galeria-item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base);
}
.single__galeria-item img:hover {
    transform: scale(1.02);
}
.single__galeria-item figcaption {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    text-align: center;
}

/* ---- Tags ---- */
.single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-6) 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.single__tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

/* ---- Autor ---- */
.single__autor {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-6);
}
.single__autor-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 2rem;
}
.single__autor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.single__autor-info strong {
    display: block;
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}
.single__autor-info p {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* ---- Sidebar ---- */
.single__sidebar-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
}
.single__sidebar-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.single__sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.single__sidebar-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.single__sidebar-list img {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}
.single__sidebar-list a {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    line-height: var(--lh-snug);
    display: block;
    margin-bottom: var(--space-1);
}
.single__sidebar-list a:hover {
    color: var(--color-primary);
}
.single__sidebar-list time {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}


/* =============================================================
   24. SKELETON CARDS (Fan Zone / páginas próximamente)
   ============================================================= */

.fz-skeleton-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.fz-skeleton-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Base del skeleton */
.fz-skeleton {
    background: linear-gradient(
        90deg,
        #e8eaed 25%,
        #f4f5f7 50%,
        #e8eaed 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
   /* animation: skeleton-shimmer 1.6s ease-in-out infinite;*/
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.fz-skeleton--img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.fz-skeleton--title {
    height: 20px;
    width: 70%;
    border-radius: var(--radius-sm);
}

.fz-skeleton--line {
    height: 14px;
    width: 100%;
    border-radius: var(--radius-sm);
}

.fz-skeleton--line-short {
    width: 55%;
}

/* Mensaje "próximamente" */
.fz-coming-soon {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--space-7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.fz-coming-soon i {
    font-size: 1.1rem;
    opacity: .6;
}

/* ---- Tarjetas informativas ---- */
.fz-info-card {
    background: rgba(232, 238, 247, 0.45);
    border: 2px solid var(--color-border-strong);
    border-radius: 0;
    padding: var(--space-7) var(--space-6);
    text-align: center;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.fz-info-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.fz-info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.8);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 1.75rem;
    margin-bottom: var(--space-5);
}

.fz-info-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-3);
    line-height: var(--lh-snug);
}

.fz-info-card__subtitle {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-base);
    margin: 0;
}


/* =============================================================
   25. TALENTO JOVEN
   ============================================================= */

.tj-media {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.tj-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .tj-media {
        margin-top: var(--space-7);
    }
}

.tj-quote {
    margin: 0;
    padding: var(--space-7) 0;
}
.tj-quote p {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    font-weight: var(--fw-medium);
    color: var(--color-text-inverse);
    line-height: var(--lh-snug);
    margin: 0 0 var(--space-4);
    font-style: italic;
}
.tj-quote cite {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    font-style: normal;
}