@font-face {
  font-family: "Sfizia";
  src: url("../fonts/Sfizia-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Sfizia";
  src: url("../fonts/Sfizia-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Sfizia";
  src: url("../fonts/Sfizia-RegularItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
}

:root {
  --color-ink: #15204f;
  --color-ink-soft: #31489b;
  --color-royal: #283583;
  --color-royal-dark: #1b2558;
  --color-royal-light: #5265c0;
  --color-gold: #b8a263;
  --color-gold-soft: #d8c89a;
  --color-paper: #f4efe3;
  --color-paper-strong: #efe5cf;
  --color-paper-glass: rgba(244, 239, 227, 0.86);
  --color-white: #ffffff;
  --color-white-soft: rgba(255, 255, 255, 0.72);
  --color-shadow: rgba(12, 18, 48, 0.24);
  --color-shadow-strong: rgba(12, 18, 48, 0.42);
  --color-success: #2c8f5b;
  --radius-xs: 0.5rem;
  --radius-sm: 0.9rem;
  --radius-md: 1.4rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 0.95rem;
  --space-4: 1.25rem;
  --space-5: 1.6rem;
  --space-6: 2rem;
  --space-7: 2.7rem;
  --space-8: 3.4rem;
  --font-display: "Sfizia", Georgia, serif;
  --font-body: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --page-width: min(1200px, calc(100vw - 2rem));
  --shadow-card: 0 24px 70px var(--color-shadow);
  --shadow-lift: 0 20px 40px rgba(20, 32, 79, 0.18);

  /* Paleta principal extraída del PDF */
  --color-bg:           #2A3F92;   /* Azul índigo profundo (fondo) */
  --color-bg-dark:      #1E2E70;   /* Variante más oscura para sombras/gradientes */
  --color-bg-light:     #3550AA;   /* Variante más clara para hover/cards */

  --color-gold:         #AA9954;   /* Dorado ocre (texto principal sobre azul) */
  --color-gold-bright:  #C4B46A;   /* Dorado más vivo para titulares */
  --color-gold-muted:   #8A7D44;   /* Dorado atenuado para texto secundario */

  --color-white:        #FFFFFF;
  --color-white-90:     rgba(255, 255, 255, 0.9);
  --color-white-60:     rgba(255, 255, 255, 0.6);
  --color-white-20:     rgba(255, 255, 255, 0.2);

  /* Colores semánticos */
  --color-text-primary:   var(--color-gold);
  --color-text-secondary: var(--color-gold-muted);
  --color-text-emphasis:  var(--color-gold-bright);  /* para términos en cursiva */
  --color-accent:         var(--color-gold-bright);
  --color-border:         var(--color-gold-muted);
  --color-overlay:        rgba(42, 63, 146, 0.85);

  /* ── TIPOGRAFÍA ─────────────────────────────────────────── */
  --font-display:   'Sfizia', sans-serif;
  --font-body:      'Sfizia', Georgia, serif;

  --font-size-xs:   0.75rem;    /*  12px */
  --font-size-sm:   0.875rem;   /*  14px */
  --font-size-base: 1rem;       /*  16px */
  --font-size-md:   1.125rem;   /*  18px */
  --font-size-lg:   1.375rem;   /*  22px */
  --font-size-2lg:  2.75rem;    /*  44px — texto grande accesible (el doble de --font-size-lg) */
  --font-size-xl:   1.75rem;    /*  28px */
  --font-size-2xl:  2.25rem;    /*  36px */
  --font-size-3xl:  3.5rem;     /*  56px */
  --font-size-hero: 6rem;       /*  96px — número de sección */

  --line-height-tight:  1.15;
  --line-height-body:   1.4;
  --line-height-loose:  1.8;

  --letter-spacing-wide:  0.04em;
  --letter-spacing-tight: -0.02em;

  /* ── ESPACIADO ──────────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --page-max-width:    440px;   /* Ancho máx de la tarjeta/página (ratio 1:2.17) */
  --page-padding-x:   var(--space-8);
  --page-padding-y:   var(--space-10);

  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-pill: 9999px;

  /* ── SOMBRAS ─────────────────────────────────────────────── */
  --shadow-gold:   0 4px 24px rgba(170, 153, 84, 0.25);
  --shadow-card:   0 8px 40px rgba(30, 46, 112, 0.5);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.08);

  /* ── TRANSICIONES ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-ink);
  font-family: var(--font-body);
  background: #ffffff;
}

body.apartado,
body.glosario,
body.terminos {
  background: var(--color-royal);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

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

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.site-shell::before,
.site-shell::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}

.site-header,
.nav-drawer,
.page-root,
.site-footer,
.mapa-contacto,
.noscript-banner {
  position: relative;
  z-index: 1;
}

.site-header {
  width: 100%;
  margin: 0;
  padding: 1em 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-gold-muted);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--color-white);
  min-width: 3rem;
}

.brand__logo {
  width: 3rem;
  height: 3rem;
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.top-nav,
.language-switch {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.top-nav__link,
.language-switch__link,
.button,
.route-link,
.control-button {
  border: 0;
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.top-nav__link {
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 2em;
  line-height: 1;
  padding: 0 2em;
}

.language-switch__link {
  padding: 0;
  opacity: 0.2;
  border: none;
}

.language-switch__link img {
  width: 30px;
  height: 30px;
}

.top-nav__link:hover,
.language-switch__link:hover,
.button:hover,
.control-button:hover {
}

.top-nav__link.is-active {
  /*
  background: rgba(184, 162, 99, 0.22);
  */
  color: rgba(216, 200, 154, 0.55);
  /*color: var(--color-paper);
  */
}

.language-switch__link.is-active {
  opacity: 1;
}

.route-link:hover .route-item__title {
  color: var(--color-royal);
}

.page-root {
  width: var(--page-width);
  margin: 2rem auto;
}

.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.3rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  cursor: pointer;
}

.button--primary {
  background: var(--color-gold);
  color: var(--color-royal-dark);
}

.button--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.language-panel {
  padding: clamp(2rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
}

.language-panel > img {
  max-height: 50vh;
}

.language-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.language-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  text-decoration: none;
}

.language-card__flag {
  width: 6em;
  height: 6em;
  object-fit: contain;
}

.language-card__label {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: center;
}

.selector-groups {
  margin-top: 2rem;
}

.selector-group + .selector-group {
  margin-top: 3rem;
}

.selector-group__title {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 0.4em;
}

.map-layout {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: var(--space-6);
  align-items: start;
}

.contacto-layout,
.expedicion-layout {
  padding: clamp(2rem, 4vw, 2rem)
}

.contacto-layout h2 {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  margin: 1.2em 0 0.6em;
}

.contacto-layout ol {
  margin: 0;
  padding-left: 0;
}

.contacto-layout ol p {
  color: var(--color-royal);
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  margin: 0 0 0.4em 0;
}

.contacto-layout ol p.bold {
  font-weight: 700;
}

.expedicion-layout h1 {
  color: var(--color-royal);
  font-family: var(--font-display);
  margin: 1.2em 0 0.6em;
}

.expedicion-layout p {
  color: var(--color-royal);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2em;
  margin: 1.2em 0 0.6em;
}

.expedicion-layout p.text-subtitulo,
.expedicion-layout a {
  color: var(--color-gold);
}

.map-figure {
  overflow: hidden;
}

.map-figure__frame {
  padding: 1.2rem;
}

.map-figure__frame img {
  width: 100%;
  background: #fff;
}

.route-panel {
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.86);
}

.route-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.route-item {
  align-items: center;
}

.route-link {
  display: inline-flex;
  align-items: center;
  display: grid;
  grid-template-columns: 3em 1fr auto;
  gap: 0.8rem;
}

.route-item__number {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  color: var(--color-royal);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}

.route-item__title {
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  margin: 0;
}

.section-layout {
  align-items: start;
}

/* ── COMPONENTES DE LAYOUT ────────────────────────────────── */

/* Tarjeta de página/slide (replica la pantalla del PDF) */
.page-card {
  position: relative;
  width: 100%;
  padding: var(--page-padding-y) var(--page-padding-x);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cabecera de la tarjeta: número + icono de audio */
.page-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

/* Número de sección — el gran "3" del PDF */
.section-number {
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  font-weight: 900;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
}

/* Titular principal tipo lead */
.headline {
  font-family: var(--font-body);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gold-bright);
  line-height: var(--line-height-tight);
  margin-bottom: 0;
}

/* Cuerpo de texto */
.body-text {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-gold);
  line-height: var(--line-height-body);
  margin-bottom: 0;
}

/* Contenido HTML libre (página de términos) */
.terminos-content {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-gold);
  line-height: var(--line-height-body);
}

.terminos-content h2,
.terminos-content h3 {
  color: var(--color-gold-bright);
  margin: 1.5rem 0 0.5rem;
}

.terminos-content p {
  margin: 0 0 1rem;
}

.terminos-content ul,
.terminos-content ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.terminos-content a {
  color: var(--color-gold-bright);
}

.terminos-content strong {
  color: var(--color-gold-bright);
}

/* Modo de texto grande, activado por .text-size-toggle */
.page-card.is-text-large .body-text {
  font-size: var(--font-size-xl);
}

/* Botón para alternar el tamaño del texto */
.text-size-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-pill);
  border: 2px solid #fff;
  background: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin: 1rem 0;
}

.text-size-toggle:hover {
  opacity: 0.6;
}

.text-size-toggle.is-active {
  background: #fff;
  color: var(--color-royal);
}

/* Label / metadato pequeño */
.label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-gold-muted);
}

.section-progress {
  margin-top: 1.2rem;
}

.section-progress__slider {
  --progress-percent: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.3rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--color-gold) var(--progress-percent),
    #9a9a9a var(--progress-percent)
  );
  cursor: pointer;
}

.section-progress__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-gold-bright);
  border: 2px solid #fff;
  cursor: pointer;
}

.section-progress__slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-gold-bright);
  border: 2px solid #fff;
  cursor: pointer;
}

.section-progress__slider::-moz-range-track {
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: #9a9a9a;
}

.section-progress__slider::-moz-range-progress {
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
}

/*** AUDIO PANEL ***/

.audio-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
}

/* Botón para alternar entre visita completa y accesible */
.version-toggle {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gold-bright);
  line-height: var(--line-height-tight);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.version-toggle:hover {
  opacity: 0.6;
}

.version-toggle.is-hidden {
  display: none;
}

.audio-panel__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.audio-panel-lenguaje.is-hidden {
  display: none;
}

/* Vídeo en lengua de signos (versión accesible, es).
   Se mantiene renderizado pero invisible (no display:none) para poder
   pedir pantalla completa; :fullscreen lo expande a toda la pantalla. */
.adapted-video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 1px;
  height: 1px;
  opacity: 0;
  background: #000;
  cursor: pointer;
}

.adapted-video:fullscreen,
.adapted-video:-webkit-full-screen {
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: contain;
}

.control-button {
  display: inline-flex;
  align-items: center;
  background: var(--color-royal);
  cursor: pointer;
  padding: 0;
}

.control-button:hover {
  opacity: 0.6;
}

.control-button.is-hidden {
  display: none;
}

.control-button img {
  width: 60px;
  height: 60px;
}

.section-card__footer {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}

.section-card__footer .button {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.section-card__footer .button img {
  width: 50px;
  height: 50px;
}

.button[aria-disabled="true"],
.route-link[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.mapa-contacto {
  width: 100%;
  margin: 0;
  padding: 0;
}

/*** FOOTER ***/

.site-footer {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 2em 0;
  display: flow;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-royal);
}

.site-footer__logos {
  width: var(--page-width);
  margin: 0 auto 4em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10em;
}

.site-footer__logos img {
  height: auto;
  max-height: 10em;
  width: auto;
}

.site-footer__logos_gob {
  width: var(--page-width);
  padding: 0 4em;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.site-footer__logos_gob img {
  height: auto;
  width: 14em;
}

.app-error {
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-lift);
}

.app-error__title {
  margin: 0;
  color: var(--color-royal);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.app-error__text {
  margin: 0;
  margin-top: 1rem;
  line-height: 1.7;
  color: rgba(21, 32, 79, 0.8);
}

.noscript-banner {
  width: var(--page-width);
  margin: 1rem auto 2rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: #fff4cf;
  color: #5b4700;
}

@media (max-width: 960px) {
  .map-layout,
  .section-layout,
  .language-grid {
    grid-template-columns: 1fr;
  }

   .site-footer__logos {
    gap: 4em;
    margin-bottom: 2em;
  }

  .site-footer__logos img {
    height: 6rem;
  }

  .site-footer__logos_gob {
    flex-direction: column;
    gap: 2em;
  }

  .site-footer__logos_gob img {
    height: 3rem;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding: 0.75rem 1rem;
    align-items: center;
  }

  .site-header__actions {
    width: auto;
  }

  .top-nav,
  .language-switch {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-drawer {
    display: block;
  }

  .page-root {
    margin-top: 0;
  }

   .site-footer__logos {
    gap: 4em;
    margin-bottom: 2em;
  }

  .site-footer__logos img {
    height: 6rem;
  }

  .site-footer__logos_gob {
    flex-direction: column;
    gap: 2em;
  }

  .site-footer__logos_gob img {
    height: 3rem;
  }
}

@media (max-width: 520px) {
  :root {
    --page-width: min(100vw - 1rem, 100%);
  }

  .site-header,
  .nav-drawer,
  .page-root,
  .site-footer,
  .noscript-banner {
    width: 100vw;
  }

  .top-nav__link,
  .language-switch__link {
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
  }

  .site-footer__logos {
    gap: 4em;
    margin-bottom: 2em;
  }

  .site-footer__logos img {
    height: 6rem;
  }

  .site-footer__logos_gob {
    flex-direction: column;
    gap: 2em;
  }

  .site-footer__logos_gob img {
    height: 3rem;
  }
}

/* ── HAMBURGUESA / NAV DRAWER ───────────────────────────── */

.menu-icon {
  color: var(--color-white);
  margin-right: 1rem;
  font-size: 2.8em;
}

.navbar ul,
.navbar-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 6px;
}

.navbar ul li,
.navbar-menu ul li {
  display: inline-flex;
  align-items: center;
}

.navbar-menu ul li .top-nav__link {
  font-size: 1.6em;
}

/* Ocultar checkbox y menú hamburguesa en desktop */
.menu-toggle, .menu-icon, .navbar-menu {
    display: none;
}

@media (max-width: 768px) {
    .menu-icon {
        display: block;
        cursor: pointer;
    }

    .navbar {
      display: none;
    }
    
    .navbar-menu {
        display: none;
        top: 100%;
        width: 100%;
        left: 0;
        background-color: var(--color-royal);
        padding: 2em;
        z-index: 10;
    }

    .navbar ul,
    .navbar-menu ul {
        flex-direction: column;
        align-items: end;
        justify-content: center;
    }
   
}