/* =========================================================================
   style.css — XXIV Conferencia Internacional de APTE en Reus
   Nomenclatura BEM. El layout usa la rejilla NATIVA de Bootstrap 5.3
   (.container / .row / .col-*); aquí sólo se estilan los componentes.
   Índice:
     1.  Reset / base
     2.  Tipografía y utilidades
     3.  Container / section
     4.  Botones, enlaces, encabezados
     5.  Topbar + Header + Nav
     6.  Secciones
     7.  Footer
     8.  Modales (agenda full-width)
     9.  Animación (scroll-reveal + reduced-motion)
     10. Responsive
   ========================================================================= */

/* ============================ 0. TIPOGRAFÍA ============================= */
/* FG Futurist (versión TRIAL), variantes no inclinadas. */
@font-face {
    font-family: "FG Futurist";
    src: url("../FG_Futurist/FG_FuturistTRIAL-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "FG Futurist";
    src: url("../FG_Futurist/FG_FuturistTRIAL-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "FG Futurist";
    src: url("../FG_Futurist/FG_FuturistTRIAL-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    overflow-x: clip;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-ink);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
picture,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

a {
    color: var(--color-primary-strong);
    text-underline-offset: .18em;
}

button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-heading);
}

p { margin: 0; }
ul { margin: 0; }

/* Compensa el header sticky al saltar a un ancla (nativo o vía scrollIntoView). */
:target,
section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-lg)); }

:focus-visible {
    outline: 3px solid var(--color-primary-strong);
    outline-offset: 2px;
    border-radius: 2px;
}
.section--dark :focus-visible,
.travel__panel:focus-visible,
[data-overlay] :focus-visible { outline-color: #fff; }

/* ====================== 2. TIPOGRAFÍA / UTILIDADES ====================== */
.u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: var(--z-skiplink);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-ink);
    color: #fff;
    font-family: var(--font-display);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transform: translateY(-160%);
    transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ======================= 3. CONTAINER / SECTION ======================= */
/* Alineamos el ancho del contenedor de Bootstrap con el del diseño (1240). */
.container,
.container-lg,
.container-xl,
.container-xxl { max-width: var(--container-max); }

.section {
    padding-block: var(--section-pad-y);
    background: var(--color-surface);
}
.section--muted { background: var(--color-surface-alt); }
.section--dark {
    background: var(--color-dark);
    color: var(--color-on-dark);
}
.section--flush { padding-block: 0; }

.section-heading {
    font-size: var(--fs-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-tight);
    text-transform: uppercase;
    text-wrap: pretty;
    margin-bottom: var(--space-lg);
}
.section-heading__accent { color: var(--color-primary); }

.section-intro {
    font-size: var(--fs-lead);
    margin-bottom: var(--space-xl);
}
.section--dark .section-intro { color: rgba(255, 255, 255, .88); }

/* El ancho lo marca la columna Bootstrap que la contiene, no un max-width. */
.prose { font-size: var(--fs-lead); width: 100%; }
.prose > * + * { margin-top: var(--space-md); }
.section--dark .prose { color: rgba(255, 255, 255, .88); }

.link-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

/* ===================== 4. BOTONES / ENLACES / HEADINGS ================= */
.button {
    --btn-bg: var(--color-primary);
    --btn-fg: #fff;
    --btn-bd: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: .85em 1.6em;
    font-family: var(--font-display);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 2px solid var(--btn-bd);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.button:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.button:active { transform: translateY(-1px); }

.button--primary { --btn-bg: var(--color-primary); --btn-bd: var(--color-primary); }
.button--outline {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink);
    --btn-bd: var(--color-ink);
}
.button--outline:hover { --btn-fg: #fff; --btn-bg: var(--color-ink); }

/* Botón "fantasma" sobre fondo azul (header): blanco 10 %, sin borde visible */
.button--ghost {
    --btn-bg: rgba(255, 255, 255, .1);
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, .1);
    border-width: 1px;
    backdrop-filter: blur(2px);
}
.button--ghost:hover { --btn-bg: rgba(255, 255, 255, .2); --btn-bd: rgba(255, 255, 255, .2); }

.button--sm { padding: .6em 1.2em; font-size: var(--fs-body); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .3em;
    color: inherit;
}
.link-arrow .apte-icon {
    width: 1.25em; height: 1.25em;
    transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover .apte-icon { transform: translateX(5px); }
.link-arrow--down:hover .apte-icon { transform: translateY(4px); }

.tag {
    display: inline-block;
    padding: .4em 1em;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 500;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
}

/* ==================== 5. TOPBAR / HEADER / NAV ======================== */
.topbar { background: var(--color-ink); color: #fff; }
.topbar__inner {
    display: flex;
    align-items: center;
    min-height: var(--topbar-h);
    padding-block: var(--space-xs);
}
.topbar__logo { height: 30px; width: auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-primary);
    color: #fff;
    transition: box-shadow var(--dur-fast) var(--ease-out);
}
.site-header--scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-height: var(--nav-h);
    padding-block: var(--space-sm);
    transition: min-height var(--dur-fast) var(--ease-out);
}
.site-header--scrolled .site-header__inner { min-height: 64px; }

.site-header__brand { display: inline-flex; flex: 0 0 auto; }
.site-header__brand img { width: 118px; height: auto; }

.site-nav { flex: 1 1 auto; }
.site-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(.75rem, .2rem + 1.5vw, 1.75rem);
    padding: 0;
    margin: 0;
}
.site-nav__link {
    position: relative;
    display: inline-block;
    padding: var(--space-2xs) 0;
    color: #fff;
    font-size: var(--fs-body);
    text-decoration: none;
}
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="true"]::after { transform: scaleX(1); }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 0 0 auto;
}
.lang-switch { position: relative; }
.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    background: transparent;
    border: 0;
    color: #fff;
    font-family: var(--font-display);
    text-transform: uppercase;
    cursor: pointer;
}
.lang-switch__toggle .apte-icon { width: 1.1em; height: 1.1em; }
.lang-switch__toggle[aria-expanded="true"] .apte-icon:last-child { transform: rotate(180deg); }

.lang-switch__menu {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    right: 0;
    z-index: 20;
    min-width: 160px;
    margin: 0;
    padding: var(--space-2xs);
    list-style: none;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}
.lang-switch__option {
    width: 100%;
    display: block;
    padding: .55em .8em;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    text-align: left;
    font-family: var(--font-display);
    color: var(--color-ink);
    cursor: pointer;
}
.lang-switch__option:hover,
.lang-switch__option[aria-current="true"] {
    background: var(--color-primary-050);
    color: var(--color-primary-strong);
}

/* --- Google Translate: se oculta todo el "chrome" que inyecta --- */
.goog-te-banner-frame,
.goog-te-gadget-icon,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }
.goog-te-gadget { font-size: 0 !important; color: transparent !important; }
.goog-te-gadget .goog-te-combo { display: none !important; }
#google_translate_element { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body { top: 0 !important; }
.skiptranslate > iframe { display: none !important; visibility: hidden !important; }
font { background: transparent !important; box-shadow: none !important; }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
}

.offcanvas { background: var(--color-primary); color: #fff; overflow: hidden; }
/* Decoración de fondo del menú móvil (imagen a 50 %). */
#navMobile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/bg-mobil.png") center / cover no-repeat;
    opacity: .1;
    pointer-events: none;
    z-index: 0;
}
#navMobile .offcanvas-header,
#navMobile .offcanvas-body { position: relative; z-index: 1; }

.offcanvas__brand img { width: 130px; height: auto; display: block; }

.offcanvas-body { display: flex; flex-direction: column; }
.offcanvas__nav { flex: 1 1 auto; }
.offcanvas .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.offcanvas .site-nav__link { font-size: 1.375rem; }
.offcanvas .site-nav__link[aria-current="true"] { font-weight: 700; }
.offcanvas__cta {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-xl);
    font-size: var(--fs-lead);
}
.offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Con el menú móvil abierto se congela el scroll de la página. */
.is-nav-open,
.is-nav-open body {
    overflow: hidden;
    overscroll-behavior: none;
}
.is-nav-open body { touch-action: none; }
.is-nav-open .offcanvas { touch-action: pan-y; }

/* =========================== 6. SECCIONES ============================ */

/* --- Banner -------------------------------------------------------- */
.banner { padding-block: var(--space-xl); }
.banner__media {
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
.banner__media img { width: 100%; height: auto; }

/* --- Intro (h1) — imagen a altura completa de la columna --------- */
.intro__media {
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.intro__media img { width: 100%; height: 100%; object-fit: cover; }
.intro__body { align-self: center; }
.intro__title {
    font-size: var(--fs-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-tight);
    text-wrap: pretty;
    margin-bottom: var(--space-lg);
}
.intro__title .u-accent { color: var(--color-primary); }

/* --- Programa --------------------------------------------------- */
.program__download { margin-block: var(--space-lg) var(--space-2xl); }
.program-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.program-card__date {
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
    text-transform: uppercase;
}
.program-card .button { margin-top: auto; }

/* --- Inscripciones (imagen de fondo + overlay) ------------------ */
.enroll {
    position: relative;
    isolation: isolate;
    color: #fff;
    text-align: center;
    background: var(--color-ink) center / cover no-repeat;
    padding-block: clamp(4rem, 2rem + 8vw, 7.5rem);
}
.enroll::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-overlay);
}
.enroll__title { font-size: var(--fs-display); text-transform: uppercase; }
.enroll__intro { margin: var(--space-lg) 0 var(--space-xl); }
.enroll__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}

/* --- ¿Qué es APTE? — cifras grandes y espectaculares ----------- */
.about__logo-wrap { display: flex; justify-content: center; }
.about__logo { max-width: 380px; width: 100%; height: auto; }

.stats {
    list-style: none;
    padding-top: var(--space-2xl);
    margin-top: var(--space-3xl);
}
.stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-md);
    border-top: 3px solid var(--color-primary);
}
.stats__num {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
    line-height: .95;
    letter-spacing: -.03em;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.stats__label {
    font-family: var(--font-display);
    font-size: var(--fs-small);
    text-transform: uppercase;
    color: var(--color-ink);
}

/* --- Tecnoparc (imagen de fondo + carrusel Swiper) ------------- */
.tecnopark {
    position: relative;
    isolation: isolate;
    color: #fff;
    background: var(--color-ink) center / cover no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}
.tecnopark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .58));
}
.tecnopark__links { margin-top: var(--space-xl); }

.tecnopark__carousel {
    margin-top: var(--space-3xl);
    overflow: visible;
}
.tecnopark__carousel .swiper-wrapper {
    /* autoplay lineal para efecto "cinta infinita" */
    transition-timing-function: linear;
}
.tecnopark__slide {
    height: auto;
}
.tecnopark__figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 4 / 3;
}
.tecnopark__figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-soft);
}
.tecnopark__carousel:hover .tecnopark__figure img { transform: scale(1.03); }

/* --- feature-split (Reus / Gaudí) --------------------------- */
.feature-split__media {
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.feature-split__media img { width: 100%; height: auto; display: block; }

/* Gaudí: el mural va FUERA de la columna, en absoluto, ocupando la mitad
   derecha de la sección y todo su alto, anclado a la esquina inferior derecha. */
.feature-split--bleed {
    position: relative;
    overflow: hidden;
}
.feature-split--bleed .feature-split__media {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    height: 100%;
    overflow: visible;
    border-radius: 0;
    pointer-events: none;
}
.feature-split--bleed .feature-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
}
.feature-split__panorama {
    margin-top: var(--space-2xl);
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.feature-split__panorama img { width: 100%; height: auto; }

/* --- Cómo llegar (acordeón horizontal, transición fina) ------ */
/* La anchura se anima con grid-template-columns (unidades fr), que el
   navegador interpola de forma suave — mucho más fina que animar flex-grow. */
.travel__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    min-height: 480px;
    transition: grid-template-columns 900ms cubic-bezier(.22, 1, .36, 1);
}
.travel__list[data-open="1"] { grid-template-columns: 6fr 1.1fr 1.1fr 1.1fr; }
.travel__list[data-open="2"] { grid-template-columns: 1.1fr 6fr 1.1fr 1.1fr; }
.travel__list[data-open="3"] { grid-template-columns: 1.1fr 1.1fr 6fr 1.1fr; }
.travel__list[data-open="4"] { grid-template-columns: 1.1fr 1.1fr 1.1fr 6fr; }

.travel__panel {
    position: relative;
    isolation: isolate;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    color: #fff;
    text-align: left;
    background: var(--color-primary) center / cover no-repeat;
    cursor: pointer;
}
.travel__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-overlay-primary);
    transition: background-color 900ms cubic-bezier(.22, 1, .36, 1);
}
.travel__panel--open::before { background: rgba(0, 0, 0, .55); }
.travel__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: font-size 900ms cubic-bezier(.22, 1, .36, 1);
}
.travel__panel--open .travel__title { font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); }
.travel__desc {
    font-size: var(--fs-body);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}
.travel__panel--open .travel__desc {
    opacity: 1;
    max-height: 24em;
    transition: opacity var(--dur-mid) var(--ease-soft);
}
/* Mientras la card cambia de anchura, el texto de apoyo se oculta al instante
   (sin transición) y sólo reaparece cuando el movimiento ha terminado. */
.travel__list--switching .travel__desc {
    opacity: 0 !important;
    max-height: 0 !important;
    transition: none !important;
}
.travel__more {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .3em;
    transition: opacity var(--dur-mid) var(--ease-soft);
}
.travel__panel--open .travel__more { opacity: 0; }

/* --- Localizador + hoteles -------------------------------- */
.locator {
    position: relative;
    isolation: isolate;
    padding-block: clamp(2.5rem, 1rem + 6vw, 5rem);
}
.locator__map-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-surface-alt);
}
.locator__map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    overflow: hidden;
    filter: saturate(.92);
}
.locator__map .leaflet-control-attribution { font-size: 10px; }
/* El contenedor y sus huecos dejan pasar el puntero para poder arrastrar el
   mapa; sólo el panel, la tarjeta de sede y el botón capturan clics.
   (pointer-events se hereda, así que los huecos vacíos también dejan pasar.) */
.locator .container { position: relative; z-index: 1; pointer-events: none; }
.locator__panel,
.locator .contact-card,
.locator__toggle { pointer-events: auto; }
.locator__panel {
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, .75rem + 2vw, 2rem);
    box-shadow: var(--shadow-pop);
}

/* Botón flotante para alternar mapa / listado (sólo en tablet y menores). */
.locator__toggle {
    display: none;
    position: absolute;
    top: var(--space-md);
    right: var(--container-pad);
    z-index: 6;
    align-items: center;
    gap: var(--space-2xs);
    padding: .6em 1.1em;
    background: var(--color-ink);
    color: #fff;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--fs-small);
    box-shadow: var(--shadow-pop);
    cursor: pointer;
}
.locator__toggle .apte-icon { width: 1.2em; height: 1.2em; }
.locator__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.hotel-search { display: flex; flex-direction: column; gap: var(--space-sm); }
.field {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: #fff;
    color: var(--color-ink);
    border-radius: var(--radius-pill);
    padding: .55em 1.1em;
}
.field .apte-icon { width: 1.15em; height: 1.15em; color: var(--color-muted); flex: 0 0 auto; }
.field__input,
.field__select {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: .3em 0;
}
.field__input:focus,
.field__select:focus { outline: none; }
.field:focus-within { outline: 3px solid #fff; outline-offset: 2px; }

.hotel-results {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 620px;
    overflow-y: auto;
    padding-right: var(--space-2xs);
}
.hotel-card {
    background: #fff;
    color: var(--color-ink);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: transform var(--dur-fast) var(--ease-out);
}
.hotel-card:hover { transform: translateY(-3px); }
.hotel-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}
/* El nombre del hotel es un botón: al pulsarlo se centra en el mapa. */
.hotel-card__locate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}
.hotel-card__locate-icon {
    flex: 0 0 auto;
    width: 1.15em; height: 1.15em;
    color: var(--color-primary);
    transition: transform var(--dur-fast) var(--ease-out);
}
.hotel-card__locate:hover .hotel-card__locate-icon { transform: scale(1.15); }
.hotel-card--active { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hotel-card__stars {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary);
    font-size: 20px;
    letter-spacing: .1em;
    line-height: 1;
}
.hotel-card__desc { font-size: var(--fs-body); color: var(--color-ink-70); }
.hotel-card__contact {
    display: grid;
    gap: var(--space-2xs);
    margin-top: var(--space-sm);
    font-size: var(--fs-small);
}
.hotel-card__contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    width: fit-content;
    color: var(--color-ink-70);
    text-decoration: none;
}
.hotel-card__contact a:hover { color: var(--color-primary); text-decoration: underline; }
.hotel-card__contact svg { width: 1em; height: 1em; flex: 0 0 auto; }
.hotel-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-sm);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary-strong);
    text-decoration: underline;
    text-underline-offset: .3em;
}
.hotel-empty { color: #fff; font-family: var(--font-display); }

/* Tarjeta de sede: cuadrada, pequeña, anclada abajo a la derecha del mapa. */
.locator__venue {
    position: absolute;
    z-index: 3;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(1rem, 3vw, 2.5rem);
    width: clamp(210px, 62vw, 280px);
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-lg);
    overflow: hidden;
    box-shadow: var(--shadow-pop);
}
.locator__venue-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-primary);
}
.locator__venue-eyebrow .apte-icon { width: 1.15em; height: 1.15em; }
.locator__venue .contact-card__title,
.locator__venue-name { font-size: var(--fs-h4); margin: 0; }
.locator__venue-addr { margin: 0; font-size: var(--fs-small); color: var(--color-ink-70); }
.locator__venue .contact-card__actions {
    flex-direction: column;
    gap: var(--space-2xs);
    margin-top: auto;
}
.locator__venue .link-arrow { font-size: var(--fs-small); }
.locator__venue .link-arrow .apte-icon { width: 1.1em; height: 1.1em; }

.contact-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    margin-top: var(--space-md);
}
.contact-card__actions .link-arrow {
    background: transparent;
    border: 0;
    cursor: pointer;
}
.contact-card__actions .apte-icon { width: 1.25em; height: 1.25em; }

/* --- FAQ + Contacto ------------------------------------- */
.faq { border-top: 1px solid rgba(0, 0, 0, .25); margin-top: var(--space-xl); }
.faq__item { border-bottom: 1px solid rgba(0, 0, 0, .25); }
.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, .9rem + 1.2vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
.faq__icon {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: var(--radius-sm);
    transition: transform var(--dur-mid) var(--ease-soft);
}
.faq__item--open .faq__icon { transform: rotate(180deg); }
.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dur-mid) var(--ease-soft),
                opacity var(--dur-mid) var(--ease-soft);
}
.faq__item--open .faq__answer { grid-template-rows: 1fr; opacity: 1; }
.faq__answer > div { overflow: hidden; min-height: 0; }
.faq__answer p {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    text-transform: none;
    padding-bottom: var(--space-lg);
}

.contact-card {
    background: #fff;
    border: var(--border-card);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.contact-card__title {
    font-size: var(--fs-h3);
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.contact-card__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.contact-card__list li { display: flex; align-items: center; gap: var(--space-sm); }
.contact-card__list a { color: var(--color-primary-strong); overflow-wrap: anywhere; }
.contact-card__list .apte-icon { width: 1.25em; height: 1.25em; color: var(--color-primary); flex: 0 0 auto; }

/* --- Patrocinadores ---------------------------------- */
.sponsors { text-align: center; }
.sponsors__title {
    font-size: var(--fs-h3);
    text-transform: uppercase;
    margin-bottom: var(--space-xl);
}
.sponsors__item {
    aspect-ratio: 192 / 89;
    display: grid;
    place-items: center;
    background: var(--color-line);
    color: var(--color-ink-70);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
}

/* ============================ 7. FOOTER ============================= */
.site-footer { background: var(--color-dark); color: #fff; }
.site-footer__inner { padding-block: var(--space-3xl); }
.site-footer__meta {
    /* Sin override del padding-left: se conserva el gutter de la columna
       Bootstrap. El sangrado extra + la línea divisoria sólo en escritorio. */
    border-left: 1px solid rgba(255, 255, 255, .25);
}
@media (min-width: 992px) {
    .site-footer__meta { padding-left: clamp(1rem, 2vw, var(--space-3xl)); }
}
.site-footer__brand img { width: 150px; height: auto; }
.site-footer__organizers { margin-top: var(--space-xl); }
.site-footer__organizers-label { font-size: var(--fs-body); margin-bottom: var(--space-sm); }
.site-footer__logos { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.site-footer__logos img { height: 48px; width: auto; }

.site-footer__dates {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1rem + 2.4vw, 2.5rem);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.site-footer__dates .u-accent { color: var(--color-primary); }
.site-footer__contact-title { font-size: var(--fs-h3); text-transform: uppercase; margin: var(--space-md) 0; }
.site-footer__contact-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.site-footer__contact-list li { display: flex; align-items: center; gap: var(--space-sm); }
.site-footer__contact-list a { color: #fff; overflow-wrap: anywhere; }
.site-footer__contact-list .apte-icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.site-footer__legal {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.site-footer__legal a { color: rgba(255, 255, 255, .8); font-size: var(--fs-body); }

/* ==================== 8. MODALES (agenda) ==================== */
/* Modal nativo de Bootstrap. Deja ~10vh de fondo visible en los 4 lados y
   oscurece el backdrop. El contenido interno hace scroll (modal-dialog-scrollable). */
.modal-title { font-family: var(--font-display); text-transform: uppercase; }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .72; }

.agenda-modal .modal-dialog {
    --agenda-gutter: 10vh;
    max-width: calc(100vw - var(--agenda-gutter) * 2);
    height: calc(100dvh - var(--agenda-gutter) * 2);
    margin: var(--agenda-gutter) auto;
}
.agenda-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    max-height: 100%;
    overflow: hidden;
}
.agenda-modal .modal-body { padding: 0; overflow-y: auto; }
.agenda-modal__inner {
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, .5rem + 3vw, 3rem);
}
.agenda-modal__close {
    position: absolute;
    top: clamp(.75rem, .25rem + 1.5vw, 1.5rem);
    right: clamp(.75rem, .25rem + 1.5vw, 1.5rem);
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    border: 0;
    color: var(--color-ink);
    cursor: pointer;
    z-index: 3;
}
.agenda-modal__close .apte-icon { width: 28px; height: 28px; }
.agenda-modal__tag { margin-bottom: var(--space-md); }
.agenda-modal__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.1rem + 3vw, 2.75rem);
    text-transform: uppercase;
    margin-bottom: var(--space-2xl);
}

.agenda { display: flex; flex-direction: column; }
.agenda__item {
    display: grid;
    grid-template-columns: minmax(140px, 180px) 1fr;
    gap: var(--space-lg);
    padding-block: var(--space-xl);
    border-top: 1px solid var(--color-line);
}
.agenda__item:last-child { border-bottom: 1px solid var(--color-line); }
.agenda__time {
    align-self: start;
    display: inline-block;
    padding: .35em .9em;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.agenda__body { font-size: var(--fs-lead); }
.agenda__body > * + * { margin-top: var(--space-sm); }
.agenda__act-title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    text-transform: uppercase;
    line-height: var(--lh-heading);
}
.agenda__place { color: var(--color-ink-70); }
.agenda__body ul { padding-left: 1.2em; }

/* ======================= 9. SCROLL-REVEAL ======================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition: opacity var(--dur-slow) var(--ease-soft),
                transform var(--dur-slow) var(--ease-soft);
    will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(calc(-1 * var(--reveal-shift))); }
[data-reveal="right"] { transform: translateX(var(--reveal-shift)); }
[data-reveal="zoom"] { transform: scale(.9); }
[data-reveal="rise"] { transform: translateY(calc(1.6 * var(--reveal-shift))) scale(.97); }
[data-reveal].is-visible { opacity: 1; transform: none; }

.no-js [data-reveal] { opacity: 1; transform: none; }

/* --- Animación de ENTRADA (banner + intro): se dispara al cargar la página,
       en secuencia escalonada, no con el scroll.
       IMPORTANTE: el estado inicial NO tiene transition, así el elemento
       arranca ya oculto y desplazado (sin bajar). La transición sólo existe
       al pasar a `.is-entered`, de modo que el único movimiento es la entrada. */
[data-enter] {
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
}
[data-enter="left"]  { transform: translateX(-56px); }
[data-enter="scale"] { transform: scale(1.04); }
[data-enter="rise"]  { transform: translateY(140px); }

.is-entered [data-enter] {
    opacity: 1;
    transform: none;
    transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
    transition-delay: calc(var(--enter-i, 0) * 160ms);
}
/* Banner: sube desde bastante más abajo, opacidad 0 → 1, con desaceleración
   suave (easeOutCubic). Sin bajar primero, sin rebote. */
.is-entered [data-enter="rise"] {
    transition: opacity 2s cubic-bezier(0.33, 1, 0.68, 1),
                transform 2s cubic-bezier(0.33, 1, 0.68, 1);
}

.no-js [data-enter] { opacity: 1; transform: none; }

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

/* ========================= 10. RESPONSIVE ======================== */
@media (max-width: 991.98px) {
    .site-nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .site-header__inner { justify-content: space-between; gap: var(--space-sm); }
    .site-header__actions .button { display: none; }
    .lang-switch__current { display: none; }

    .site-footer__meta { border-left: 0; }
}

@media (max-width: 991.98px) {
    /* En pantallas medianas/pequeñas el mural vuelve al flujo, bajo el texto,
       pegado al borde inferior de la sección (sin padding-bottom ni radio). */
    .feature-split--bleed { padding-bottom: 0; }
    .feature-split--bleed .feature-split__media {
        position: static;
        width: 100%;
        height: auto;
        margin-top: var(--space-xl);
        overflow: hidden;
        border-radius: 0;
    }
    .feature-split--bleed .feature-split__media img {
        width: 100%;
        height: auto;
        max-height: 60vh;
        object-position: center;
    }

    /* --- Localizador (tablet y menores): marco de 80vh, mapa a pantalla
           completa y columna "Encuentra tu hotel" superpuesta con scroll
           interno. Un botón flotante alterna entre ambos. --------------- */
    .locator {
        height: 80vh;
        min-height: 440px;
        padding-block: 0;
        overflow: hidden;
    }
    .locator__map-wrap { z-index: 0; }
    .locator__map { height: 100%; }

    .locator__toggle { display: inline-flex; }

    .locator .container {
        position: absolute;
        inset: 0;
        height: 100%;
        padding: 0;
        z-index: 2;
    }
    .locator__layout {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;   /* .row de Bootstrap trae flex-wrap:wrap; con altura
                                fija + dirección columna las columnas se irían a
                                una 2ª "columna" lateral y desaparecerían. */
        height: 100%;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;   /* la columna necesita capturar el scroll táctil */
        background: var(--color-primary);
        transition: transform .45s var(--ease-soft), opacity .3s var(--ease-soft);
    }
    .locator__col {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .locator__panel {
        height: auto;
        border-radius: 0;
        box-shadow: none;
    }
    .hotel-results { max-height: none; overflow: visible; }

    /* En la vista de hoteles, la sede queda como bloque superior; en la vista
       de mapa conserva su posición flotante sobre el mapa. */
    .locator:not(.is-map-view) .locator__venue {
        display: flex;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        padding: 3.25rem var(--container-pad) var(--space-md);
    }
    .locator:not(.is-map-view) .locator__layout {
        padding-top: 12.5rem;
    }

    /* Estado "ver mapa": la columna se desliza fuera y queda el mapa. */
    .locator.is-map-view .locator__layout {
        transform: translateX(-105%);
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 767.98px) {

    .travel__list,
    .travel__list[data-open] { grid-template-columns: 1fr; min-height: 0; }
    .travel__panel { min-height: 128px; }
    .travel__panel--open .travel__desc { max-height: 44em; }

    .agenda__item { grid-template-columns: 1fr; gap: var(--space-sm); }

    .tecnopark { background-attachment: scroll; }

    /* En móvil el modal deja un margen menor para no quedar demasiado estrecho. */
    .agenda-modal .modal-dialog { --agenda-gutter: 3vh; }
}

@media (max-width: 479.98px) {
    .enroll__actions { flex-direction: column; }
    .enroll__actions .button { width: 100%; justify-content: center; }
}