/* ==========================================================================
   Capa de experiencia de uso  ·  se carga en ultimo lugar

   No rediseña las páginas: corrige lo que el visitante nota y las hojas
   anteriores no resuelven de forma consistente en las 34 plantillas.

     1. superficies oscuras: ya no hay negro, hay una gama azul de marca
     2. contraste de texto garantizado sobre esas superficies
     3. foco visible de teclado en todo lo que se pueda accionar
     4. anclas que no quedan debajo de la cabecera fija
     5. objetivos táctiles de 44 px en móvil
     6. mapas: encuadre, leyenda y respeto por prefers-reduced-motion
   ========================================================================== */

:root {
  /* gama de superficies oscuras (sustituye a los antiguos fondos negros) */
  --eb-s-900: #0c1b33;
  --eb-s-800: #0f2140;
  --eb-s-700: #12294b;
  --eb-s-600: #163156;
  --eb-s-500: #1a3a63;
  /* textos sobre superficie oscura, todos por encima de 4.5:1 */
  --eb-on-dark: #f2f6fc;
  --eb-on-dark-soft: #c3d0e4;
  --eb-on-dark-faint: #9aabc4;
  /* acentos */
  --eb-accent: #c8102e;
  --eb-accent-soft: #ff8a93;
  --eb-focus-ring: #ffb020;
  --eb-header-h: 92px;
}

/* 1 · SUPERFICIES OSCURAS --------------------------------------------------
   Cualquier bloque pintado con la gama nueva garantiza texto claro, aunque la
   hoja original solo hubiera fijado el color del titulo. */
.eb-surface-dark,
.eb-mapa-sec {
  background: var(--eb-s-800);
  color: var(--eb-on-dark);
}

.eb-mapa-sec :is(h1, h2, h3, h4, h5, h6) { color: var(--eb-on-dark); }
.eb-mapa-sec p:not([class]) { color: var(--eb-on-dark-soft); }

/* 2 · CONTRASTE -----------------------------------------------------------
   El texto gris apagado sobre azul oscuro era el punto mas debil: se sube al
   tono claro de la paleta sin tocar los textos que ya tenian color propio. */
.eb-mapa-sec .eb-mapa-texto { color: var(--eb-on-dark-soft); }
.eb-mapa-sec .eb-mapa-fig figcaption { color: var(--eb-on-dark-faint); }
.eb-mapa-sec .eb-mapa-eyebrow { color: var(--eb-accent-soft); }

/* Enlaces dentro de bloques oscuros: subrayado visible, no solo color. */
.eb-surface-dark a:not([class]),
.eb-mapa-sec a:not([class]) {
  color: #ffd9dd;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 3 · FOCO DE TECLADO -----------------------------------------------------
   Antes solo se veia el outline por defecto del navegador, que sobre fondo
   oscuro es invisible. Se usa :focus-visible para no molestar al raton. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--eb-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Salto directo al contenido: primer tabulador de la página. */
.eb-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100000;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--eb-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top .18s ease;
}
.eb-skip:focus { top: 0; }

/* 4 · ANCLAS --------------------------------------------------------------
   Los enlaces internos dejaban el titulo tapado por la cabecera fija. */
:target,
[id]:is(section, article, h1, h2, h3, form, .eb-mapa-sec) {
  scroll-margin-top: calc(var(--eb-header-h) + 12px);
}
html { scroll-behavior: smooth; }

/* 5 · OBJETIVOS TACTILES --------------------------------------------------
   En movil varios botones e iconos quedaban por debajo del minimo usable. */
@media (max-width: 767px) {
  .eb-main :is(a[class*="btn"], button, .hd-ic, [role="button"]) {
    min-height: 44px;
  }
  .eb-main :is(a[class*="btn"], button):not(.nep-rep-item-tools button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Estado activo perceptible: el pulsado se nota sin esperar a la navegacion. */
.eb-main :is(a[class*="btn"], button):active { transform: translateY(1px); }

/* 6 · MAPAS ---------------------------------------------------------------
   Encuadre comun para los 60+ mapas del sitio y leyenda legible. */
.eb-mapa-sec .eb-mapa-fig {
  background: var(--eb-s-900);
  border-color: rgba(255, 255, 255, .10);
}

.eb-map {
  width: 100%;
  height: auto;
  max-height: 460px;
  margin-inline: auto;
}

/* La ruta animada se detiene si el visitante pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eb-map-route { animation: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* 7 · LECTURA -------------------------------------------------------------
   Titulos que no rompen en una palabra huerfana y parrafos de ancho comodo. */
.eb-main :is(h1, h2, h3) { text-wrap: balance; }
.eb-main p { text-wrap: pretty; }

/* Cuando el titular ya trae sus saltos escritos a mano, equilibrar las lineas
   los deshace: en «TÉRMINOS Y CONDICIONES DE<br>TRANSPORTE…» el «DE» saltaba
   de linea y quedaba pegado a «TRANSPORTE». Ahí manda el <br> del autor. */
.eb-main :is(h1, h2, h3):has(br) { text-wrap: initial; }

/* 8 · IMAGENES ------------------------------------------------------------ */
.eb-main img { height: auto; }
.eb-main img[loading="lazy"] { background: rgba(148, 163, 184, .12); }

/* 9 · VOLVER ARRIBA -------------------------------------------------------
   Las paginas de destino miden varias pantallas; sin esto el unico camino de
   vuelta al menu es arrastrar la barra de desplazamiento. */
.eb-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--eb-s-700);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(9, 18, 36, .38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.eb-top.is-on { opacity: 1; visibility: visible; transform: none; }
.eb-top:hover { background: var(--eb-accent); }

/* El editor abierto ocupa el lado derecho: el boton se aparta. */
#nep-panel.open ~ .eb-top,
body.nep-open .eb-top { right: 398px; }

@media (max-width: 600px) {
  .eb-top { right: 12px; bottom: 12px; }
  body.nep-open .eb-top { display: none; }
}

/* 10 · SELECCION Y BARRA DE DESPLAZAMIENTO -------------------------------- */
::selection { background: rgba(200, 16, 46, .22); }


/* 11 · CARRUSELES DE LA PORTADA ------------------------------------------
   Swiper trae `.swiper-wrapper{height:100%}`, pensado para carruseles de altura
   fija. Estos no la tienen, así que ese 100% se resolvía contra el bloque de al
   lado: las reseñas se estiraban a 629 px para 373 de contenido y quedaba media
   tarjeta en blanco. Con altura automática cada carrusel mide lo que ocupa. */
.ax-rev-slider > .swiper-wrapper,
.ax-dslider > .swiper-wrapper,
.ax-gflags-swiper > .swiper-wrapper,
.ax-hsteps > .swiper-wrapper { height: auto; }
.ax-rev-slider .swiper-slide { height: auto; }

/* El panel de reseñas se ajusta a sus tarjetas en vez de estirarse hasta la
   columna de la izquierda. (Convertirlo en flex no vale: Swiper mide el ancho
   del contenedor y las diapositivas se le desbordan.) */
.ax-rev-track { align-self: start; }

/* Cinco líneas exactas por comentario. Las reseñas rondan las 200 letras, así
   que caben enteras, y las seis tarjetas miden lo mismo sin estirarse. */
.ax-rev-txt {
  flex: none;
  min-height: 8.5em;          /* 5 líneas · line-height 1.7 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* Cada bandera conserva su ancho natural dentro de la cinta. */
.ax-gflags-swiper .swiper-slide { width: auto; }

/* Al arrastrar un carrusel no se selecciona el texto de las tarjetas. */
.ax-rev-slider, .ax-dslider, .ax-gflags-swiper, .ax-hsteps { -webkit-user-select: none; user-select: none; }

/* Flecha apagada cuando ya no hay hacia dónde avanzar. */
.ax-rev-prev.swiper-button-disabled, .ax-rev-next.swiper-button-disabled { opacity: .35; cursor: default; }

/* 12 · SALTOS DE LÍNEA EN MÓVIL ------------------------------------------
   main.css (la plantilla comprada) trae `@media(max-width:767px){ br{display:none} }`:
   por debajo de 768 px desaparecía TODO salto de línea del sitio. Donde el
   autor no dejó espacio alrededor del <br>, las palabras se pegaban:

     «TÉRMINOS Y CONDICIONES DE<br>TRANSPORTE…»  →  «DETRANSPORTE…»
     «CENTRAL TELEFÓNICA<br>916057367»           →  «CENTRAL TELEFÓNICA916057367»

   Se devuelve el comportamiento normal. Las secciones que sí quieren ignorar
   el salto en móvil ya lo piden una por una (`.ax-benef h2 br`, `.ax-loc-title
   h2 br`…) y esas reglas siguen mandando por ser más específicas. */
@media (max-width: 767px) {
  br { display: revert; }
}

/* 13 · CABECERA FIJA ------------------------------------------------------
   `header.hd` ya pedía `position:sticky`, pero no se quedaba arriba: dos hojas
   del tema ponen `overflow-x:hidden` en html y body, y eso convierte al body en
   contenedor de scroll. Lo pegajoso pasa entonces a depender del body —que no
   se desplaza— y la cabecera se iba con la página.

   `overflow-x:clip` recorta igual el desbordamiento horizontal pero NO crea un
   contenedor de scroll, así que sticky vuelve a funcionar. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* La cabecera manda sobre cualquier capa de la página. */
header.hd { z-index: 1000; }

/* Las anclas descuentan la altura real de la cabecera. */
:root { --eb-header-h: 74px; }