/* ==========================================================================
   GAIA TRAVEL GROUP — panel de accesibilidad
   Propio, sin servicios externos: no carga scripts de terceros ni envía datos.
   Las preferencias se guardan en el navegador de quien visita.
   ========================================================================== */

/* Texto solo para lectores de pantalla */
.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;
}

/* ---------- Botón flotante ---------- */

.a11y-btn{
  position:fixed; z-index:90;
  inset-inline-start:1.25rem; bottom:1.25rem;
  width:54px; height:54px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:var(--ink); color:var(--white);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(8,37,72,.6);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.a11y-btn:hover{ transform:scale(1.06); background:var(--ink-soft); }
.a11y-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.a11y-btn svg{ width:26px; height:26px; fill:currentColor; }

/* ---------- Panel ---------- */

.a11y-panel{
  position:fixed; z-index:91;
  inset-inline-start:1.25rem; bottom:5.5rem;
  width:min(330px, calc(100vw - 2.5rem));
  max-height:min(70vh, 560px); overflow-y:auto;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(8,37,72,.55);
  padding:1.4rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.a11y-panel.is-open{ opacity:1; visibility:visible; transform:none; }

.a11y-panel h2{
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin:0 0 1.1rem;
}
.a11y-group{ margin-bottom:1.2rem; }
.a11y-group > span{
  display:block; font-size:.82rem; color:var(--ink-45);
  margin-bottom:.5rem;
}
.a11y-row{ display:flex; gap:.4rem; flex-wrap:wrap; }

.a11y-opt{
  flex:1 1 auto; min-width:56px;
  padding:.6rem .7rem;
  font-family:var(--sans); font-size:.84rem;
  background:var(--ivory); color:var(--ink-70);
  border:1px solid var(--line); cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  text-align:center;
}
.a11y-opt:hover{ border-color:var(--ink); }
.a11y-opt[aria-pressed="true"]{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.a11y-opt:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.a11y-reset{
  width:100%; margin-top:.4rem; padding:.7rem;
  background:transparent; border:1px solid var(--line-gold); color:var(--ink);
  font-family:var(--sans); font-size:.84rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease);
}
.a11y-reset:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }

.a11y-note{ font-size:.8rem; color:var(--ink-45); margin:.9rem 0 0; line-height:1.5; }

/* ==========================================================================
   AJUSTES QUE APLICA EL PANEL
   ========================================================================== */

/* Tamaño de letra: escala todo el sitio desde la raíz */
html.a11y-fs-1{ font-size:19px; }
html.a11y-fs-2{ font-size:21px; }
html.a11y-fs-3{ font-size:24px; }

/* Alto contraste: texto negro sobre blanco y bordes marcados */
html.a11y-contrast{
  --ink:        #00203F;
  --ink-70:     #000000;
  --ink-45:     #1A1A1A;
  --ivory:      #FFFFFF;
  --sand:       #FFFFFF;
  --line:       rgba(0,0,0,.55);
  --line-gold:  rgba(0,0,0,.55);
  --gold-ink:   #4A3C00;
}
html.a11y-contrast body{ background:#fff; }
html.a11y-contrast .tiers{ background:#fff; }
/* Las fotos se oscurecen más para que el texto encima siempre gane */
html.a11y-contrast .hero::before,
html.a11y-contrast .band::before,
html.a11y-contrast .quote::before,
html.a11y-contrast .page-hero::before{ background:rgba(0,0,0,.72); }
html.a11y-contrast .dest::after,
html.a11y-contrast .exp__card::after{
  background:linear-gradient(to top, rgba(0,0,0,.88) 15%, rgba(0,0,0,.35) 100%);
}
html.a11y-contrast .header.is-solid{ background:#fff; box-shadow:0 1px 0 #000; }
html.a11y-contrast .btn{ border-width:2px; }

/* Fondo oscuro: para quien prefiere leer en negativo */
html.a11y-dark{
  --ink:        #E8EEF6;
  --ink-70:     #E2E9F2;
  --ink-45:     #AFBDCE;
  --ivory:      #0B1B2E;
  --sand:       #12263D;
  --line:       rgba(255,255,255,.22);
  --line-gold:  rgba(233,210,86,.45);
  --gold-ink:   #E9D256;
}
html.a11y-dark body{ background:#0B1B2E; color:#E8EEF6; }
html.a11y-dark .header.is-solid{ background:#0B1B2E; }
html.a11y-dark .header.is-solid .nav a,
html.a11y-dark .header.is-solid .burger span{ color:#E8EEF6; background-color:transparent; }
html.a11y-dark .mega,
html.a11y-dark .lang-switch__menu,
html.a11y-dark .a11y-panel,
html.a11y-dark .tier,
html.a11y-dark .itin,
html.a11y-dark .trip,
html.a11y-dark .ready__card{ background:#12263D; }
html.a11y-dark .a11y-opt{ background:#0B1B2E; color:#E2E9F2; }
html.a11y-dark .btn--outline{ color:#E8EEF6; }
html.a11y-dark .exp__btn svg{ stroke:#E8EEF6; }

/* Subrayar enlaces para que se distingan sin depender del color */
html.a11y-links main a,
html.a11y-links .footer a,
html.a11y-links .nav a{ text-decoration:underline; text-underline-offset:.22em; }

/* Tipografía de lectura fácil: sin serif, más espaciada */
html.a11y-readable{
  --serif: "Jost", "Segoe UI", Arial, sans-serif;
}
html.a11y-readable body{ letter-spacing:.012em; line-height:1.9; }
html.a11y-readable h1, html.a11y-readable h2,
html.a11y-readable h3, html.a11y-readable h4{ line-height:1.25; font-weight:500; }
html.a11y-readable .eyebrow,
html.a11y-readable .nav a,
html.a11y-readable .btn,
html.a11y-readable .link-underline{ letter-spacing:.06em; }

/* Detener movimiento: parallax, carrusel automático y apariciones */
html.a11y-still *,
html.a11y-still *::before,
html.a11y-still *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
html.a11y-still .reveal{ opacity:1 !important; transform:none !important; }

/* Mismo corte en que aparece la barra inferior; la separación usa su altura
   real para que el botón nunca quede montado encima. */
@media (max-width:1100px){
  .a11y-btn{ bottom:calc(var(--mobilebar-h, 56px) + .9rem); width:48px; height:48px; }
  .a11y-panel{ bottom:calc(var(--mobilebar-h, 56px) + 4.4rem); }
}