/**
 * SonicMaps site — shared base for the redesigned pages (2026).
 *
 * Tokens, reset, typography, buttons, header and footer. Page-specific sections live in
 * their own file (sm-home.css for the landing page). Nothing here is used by the old pages,
 * and the new pages use none of the old inline styles, slick/ or animations.js.
 */

:root {
    --sm-ink: #0E1A2B;
    --sm-ink-hero: #14243A;
    --sm-muted: #4A5668;
    --sm-muted-2: #5B6778;
    --sm-bg: #F5F7FA;
    --sm-surface: #FFFFFF;
    --sm-border: #E3E8EF;
    --sm-blue: #2F62C8;
    --sm-blue-dark: #1F4AA0;
    --sm-blue-tint: #E7EEFC;
    --sm-editor: #4F7FD9;
    --sm-green: #5F7A22;
    --sm-green-dark: #4C631A;
    --sm-green-tint: #EEF3E1;
    --sm-player: #7D9A35;
    --sm-gold: #ECAA46;
    /* El dorado de arriba se eligió para fondo oscuro: sobre blanco da 2,0:1 y no
       llega ni al 3:1 del texto grande. Esta es su pareja para fondo claro, ~4:1. */
    --sm-gold-dark: #A9761E;
    --sm-navy: #0E1A2B;
    --sm-night: #080808;
    --sm-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sm-serif: 'Marcellus', Georgia, 'Times New Roman', serif;
    --sm-section-pad: clamp(64px, 9vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--sm-font);
    color: var(--sm-ink);
    background: var(--sm-bg);
    line-height: 1.5;
}

img { max-width: 100%; }

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

:focus-visible { outline: 3px solid #FFC56B; outline-offset: 3px; border-radius: 4px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.section { padding: var(--sm-section-pad) 0; }

.serif { font-family: var(--sm-serif); font-weight: 400; }

.eyebrow {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sm-blue);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Buttons ---------- */

/* font-family, border y cursor están aquí porque .btn también se usa en <button>,
   que no hereda la tipografía y trae borde y cursor propios del navegador. */
.btn {
    display: inline-block;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    padding: 15px 28px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--lg { font-size: 17px; padding: 16px 32px; }

.btn--dark { background: var(--sm-ink-hero); color: #FFFFFF; }
.btn--dark:hover { background: #0B1626; color: #FFFFFF; }
.btn--shadow { box-shadow: 0 12px 28px -12px rgba(20, 36, 58, 0.6); }

.btn--light { background: rgba(255, 255, 255, 0.85); color: var(--sm-ink-hero); }
.btn--light:hover { background: #FFFFFF; color: var(--sm-ink-hero); }

.btn--white { background: #FFFFFF; color: var(--sm-ink); font-size: 15px; padding: 12px 20px; border-radius: 10px; }
.btn--white:hover { background: #EAF1FA; color: var(--sm-ink); }

.btn--blue { background: var(--sm-blue); color: #FFFFFF; }
.btn--blue:hover { background: var(--sm-blue-dark); color: #FFFFFF; }

.btn--green { background: var(--sm-green); color: #FFFFFF; }
.btn--green:hover { background: var(--sm-green-dark); color: #FFFFFF; }

/* Contorno, para los controles que despliegan contenido en la propia página en
   vez de llevarte a otra: pesan menos que un relleno y no compiten con el hero.
   Al pasar por encima pasa a blanco sobre --sm-bg, como las tarjetas. */
.btn--ghost {
    background: none;
    border: 1px solid var(--sm-border);
    color: var(--sm-blue);
    font-size: 15px;
    padding: 12px 22px;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn--ghost:hover { background: var(--sm-surface); border-color: var(--sm-blue); color: var(--sm-blue-dark); }

/* .btn--ghost se declara despues de .btn--lg y con la misma especificidad, asi que
   le ganaba el tamano y el boton grande salia pequeno. Las dos clases juntas tienen
   que ganar a cada una por separado. El relleno vertical es 15 y no 16 para
   compensar el borde de 1px: asi la altura total coincide con la de .btn--lg sin
   borde y los dos botones de una fila miden igual. */
.btn--lg.btn--ghost { font-size: 17px; padding: 15px 31px; }

/* Las demás variantes se usan sobre <a>; estas dos van sobre <button>. */
button.btn { font-family: inherit; cursor: pointer; }

.link-strong { font-weight: 700; font-size: 15px; text-decoration: none; }
.link-strong:hover { text-decoration: underline; }

/* ---------- Header (transparent: sits on the page's own background) ---------- */

/* Almost transparent over the hero: a 7% black veil.
   It relies on the hero's dark top; a page with a light background needs a solid variant. */
.site-header {
    position: relative;
    z-index: 20;
    background: #00000012;
}

.site-header__inner {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    color: #FFFFFF;
}
.brand:hover { color: #FFFFFF; }
.brand__name { font-family: var(--sm-serif); font-size: 26px; }
.brand__by { font-size: 12px; color: #eaf1fabf; letter-spacing: 0.04em; }

/* On desktop the wrapper disappears and nav + actions become direct flex children */
.site-header__menu { display: contents; }

.site-nav { display: flex; gap: 37px; font-size: 17px; font-weight: 500; flex-wrap: wrap; }
.site-nav a { color: #FFFFFF; text-decoration: none; }
.site-nav a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 5px; }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

/* Secondary button: same shape and size as .btn--white, but a translucent fill */
.site-header__login {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    background: #FFFFFF1F;
    padding: 12px 20px;
    border-radius: 10px;
    transition: background-color 0.15s ease;
}
.site-header__login:hover { color: #FFFFFF; background: #FFFFFF33; }

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -5px;
    padding: 0;
    border: 0;
    background: none;
    color: #FFFFFF;
    cursor: pointer;
}
.menu-toggle svg { width: 34px; height: 34px; }
.menu-toggle__close { display: none; }

@media (max-width: 980px) {
    /* Without JS the menu simply wraps under the brand; with JS it collapses behind the button */
    .js .site-header__inner { flex-wrap: nowrap; }
    .js .menu-toggle { display: inline-flex; }

    .js .site-header__menu {
        display: none;
        position: absolute;
        top: 68px;
        left: 16px;
        right: 16px;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        border-radius: 16px;
        background: rgba(14, 26, 43, 0.97);
        box-shadow: 0 24px 48px -20px rgba(14, 26, 43, 0.7);
    }
    .js .site-header.is-open .site-header__menu { display: flex; }
    .js .site-header.is-open .menu-toggle__open { display: none; }
    .js .site-header.is-open .menu-toggle__close { display: block; }

    .js .site-nav { flex-direction: column; gap: 0; font-size: 17px; }
    .js .site-nav a { padding: 13px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

    .js .site-header__actions { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 4px; }
    .js .site-header__actions .site-header__login,
    .js .site-header__actions .btn { font-size: 16px; padding: 14px 20px; }
}

@media (max-width: 380px) {
    .brand__by { display: none; }
}

/* ---------- Cabecera clara ---------- */

/* La cabecera de arriba va en blanco sobre el cielo de la portada. Las páginas sin
   cielo —precios, FAQ— la necesitan sólida sobre fondo claro. La coherencia entre
   páginas la dan los componentes (logotipo, tipografía, botones, espaciado), no el
   color del fondo. */
.site-header--light { background: var(--sm-surface); border-bottom: 1px solid var(--sm-border); }
.site-header--light .brand,
.site-header--light .brand:hover { color: var(--sm-ink); }
.site-header--light .brand__by { color: var(--sm-muted-2); }
.site-header--light .menu-toggle { color: var(--sm-ink); }

/* Solo en escritorio: por debajo de 980px el menú se despliega en un panel oscuro
   y allí el texto blanco es el correcto. */
@media (min-width: 981px) {
    .site-header--light .site-nav a { color: #3A4656; }
    .site-header--light .site-nav a:hover,
    .site-header--light .site-nav a[aria-current="page"] { color: var(--sm-ink); }
    .site-header--light .site-nav a[aria-current="page"] { font-weight: 700; text-decoration: none; }
    .site-header--light .site-header__login { color: var(--sm-ink); background: var(--sm-bg); }
    .site-header--light .site-header__login:hover { color: var(--sm-ink); background: #E6EBF2; }
}

/* ---------- Skyline: remate de página, justo encima del pie ---------- */

/* La silueta se recorta igual que en la portada (el SVG mide 43vw de alto a ancho
   completo y se ve su parte superior). Su base es negra sólida, así que el pie que
   va debajo continúa ese negro en lugar del azul general: sin costura. */
.page-skyline {
    height: 30vw;
    background: url(../../images/skyline.svg) top center / 100% auto no-repeat;
}
@media (max-width: 768px) {
    .page-skyline { background-image: url(../../images/skyline.webp); }
}
.site-footer--after-skyline { background: var(--sm-night); }

/* ---------- Footer ---------- */

.site-footer { background: var(--sm-navy); color: #B7C2D3; }

.site-footer__inner {
    padding-top: 56px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 32px;
    font-size: 15px;
}

.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col strong { color: #7FA6FF; }
.site-footer__col a { color: #D5DCE6; text-decoration: none; }
.site-footer__col a:hover { color: #FFFFFF; text-decoration: underline; }

.site-footer__brand { font-family: var(--sm-serif); font-size: 22px; color: #FFFFFF; }
.site-footer__about { font-size: 14px; line-height: 1.6; }

.site-footer__bottom {
    border-top: 1px solid #1F1F1F;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px 24px;
    flex-wrap: wrap;
    font-size: 14px;
}

.site-footer__sponsors { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-footer__sponsors a { display: block; line-height: 0; }
.site-footer__sponsors img { height: 44px; width: auto; }
/* The Creative Europe mark has dark blue lettering: it needs a light plate on the night footer */
.site-footer__plate { background: #FFFFFF; border-radius: 8px; padding: 6px 10px; }
.site-footer__plate img { height: 32px; }

.site-footer__lang a { color: #D5DCE6; text-decoration: none; }
.site-footer__lang a:hover { color: #FFFFFF; text-decoration: underline; }
.site-footer__lang [aria-current] { color: #FFFFFF; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
}

/* ---------- Visor ampliado (dialog nativo) ---------- */

/* Vive aqui desde que lo usan la portada y las guias del centro de ayuda. Las reglas
   de pie de foto y video solo las ejercita la portada; en las demas paginas quedan
   inertes porque ese marcado no existe. */

.lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgba(8, 8, 8, 0.84); }
/* Medio y texto van en una sola tarjeta blanca, con el mismo lenguaje que las de la
   página, en vez de dos cajas sueltas flotando sobre el fondo oscuro. --lb-w lo fija el
   JS con el ancho natural del medio, para no ampliarlo más allá de lo que da de sí. */
.lightbox__panel {
    margin: 0;
    width: min(var(--lb-w, 1100px), 94vw);
    max-height: 94vh;
    background: var(--sm-surface);
    border-radius: 16px;
    /* Recorta las esquinas del medio y, en pantallas bajas, deja desplazar el conjunto */
    overflow: hidden auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lightbox img,
.lightbox video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 86vh;
    object-fit: contain;
    background: #1E2633;
}
/* Con pie, el medio cede altura para que quepan los dos sin desplazar */
.lightbox__panel--captioned img,
.lightbox__panel--captioned video { max-height: 58vh; }
.lightbox img { cursor: zoom-out; }

.lightbox__caption { padding: 22px 26px 24px; color: var(--sm-ink); }
.lightbox__caption > * { display: block; }
/* El cuerpo primero y las excepciones con dos clases: un `> span` a secas le gana en
   especificidad a .lightbox__title y lo dejaría gris y pequeño. */
.lightbox__caption > span { font-size: 16px; line-height: 1.6; color: var(--sm-muted); }
.lightbox__caption > .lightbox__title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--sm-ink); margin-bottom: 8px; }
.lightbox__caption > .lightbox__note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--sm-muted-2); }
.lightbox__caption > .lightbox__note::before { content: "* "; }
.lightbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #FFFFFF;
    color: var(--sm-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.lightbox__close svg { width: 20px; height: 20px; }
/* En pantallas pequeñas la imagen es tan corta que un botón anclado a su esquina se le
   come un trozo. El visor pasa a ocupar la pantalla entera: la imagen se centra y el
   botón se ancla a la esquina del viewport, lejos de ella. */
@media (max-width: 768px) {
    .lightbox { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; }
    .lightbox[open] {
        display: flex;
        /* En columna: el pie va debajo del medio, no a su lado */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* `safe` evita que, si el contenido no cabe, el centrado recorte la parte de arriba
           y la deje fuera de alcance. Donde no se entienda, queda el `center` de la línea anterior. */
        justify-content: safe center;
        padding: 56px 2vw 20px;
        overflow-y: auto;
    }
    .lightbox__panel { width: 96vw; max-height: none; }
    .lightbox img, .lightbox video { max-height: 52dvh; }
    .lightbox__panel--captioned img, .lightbox__panel--captioned video { max-height: 42dvh; }
    .lightbox__caption { padding: 18px 18px 20px; }
    .lightbox__close { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] { animation: lightbox-in 0.16s ease-out; }
    @keyframes lightbox-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
}