/*
  detalle.css — Estilos especificos de pais.html (cabecera de pais, galeria,
  mapa Leaflet, sistema de 8 pestanas, tarjetas de atracciones/platos,
  calculadora de presupuesto, semaforo de seguridad, testimonios).
  Ver sistema-diseno.md secciones 1.5, 6.2, 6.3, 6.4 para la especificacion.
*/

/* ============ Barra superior (volver + selector de idioma) ============
   Migrado desde el <style> inline que pais.html traia como placeholder (ver
   nota en pais.html): esta es su ubicacion definitiva. */

.detail-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--container-padding-mobile);
}
.detail-topbar__start {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
@media (max-width: 639px) {
  /* Bug real encontrado en QA visual (2026-09-13, mismo hallazgo que
     .home__topbar en home.css): .lang-selector pasa a `position: fixed` en
     la esquina superior derecha via la regla `.detail-topbar .lang-selector`
     mas abajo, sacandolo del flujo. En movil angosto, el boton "Volver a
     [pais]" + el beta-badge (unico hijo real que le queda a este flex
     container) llegan a ocupar suficiente ancho como para terminar debajo
     del selector de idioma fijo -- se ve el ejemplo real con "Volver a
     Marruecos" + "Beta 1.5" tapados por la bandera/ES. Se reserva espacio a
     la derecha (ancho aproximado del selector + su offset `right`) y se
     permite que el grupo haga wrap a una segunda linea si no entra, en vez
     de superponerse. */
  .detail-topbar {
    padding-right: 132px;
  }
}
@media (min-width: 640px) {
  .detail-topbar { padding-inline: var(--container-padding-tablet); }
}
@media (min-width: 1024px) {
  .detail-topbar { padding-inline: var(--container-padding-desktop); }
}

/* ============ Exportacion a PDF ============
   Ver js/pdf-export.js. */

/* Overlay de "Generando PDF...": solo feedback visual durante la
   exportacion, no cumple ningun rol de ocultamiento (ver arriba). */

.pdf-export-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-void);
  color: var(--gold-500);
  font-family: var(--font-display), var(--font-ui);
  font-size: var(--fs-xl, 1.25rem);
  font-weight: 600;
  letter-spacing: var(--ls-heading-lg, normal);
}

/* ============ Pie de pagina ============ */

.detail-footer {
  padding: var(--space-6) var(--container-padding-mobile) var(--space-8);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-subtle, rgba(244, 245, 249, 0.08));
  margin-top: var(--space-8);
}
.detail-footer__sep {
  margin: 0 0.4em;
}
@media (min-width: 640px) {
  .detail-footer { padding-inline: var(--container-padding-tablet); }
}
@media (min-width: 1024px) {
  .detail-footer { padding-inline: var(--container-padding-desktop); }
}

/*
  El selector de idioma queda fijo en la esquina superior derecha durante
  todo el scroll (igual criterio que en el HOME, sistema-diseno.md 6.6).
  Necesita quedar por ENCIMA de --z-header (20): comparte esa capa con
  .detail-tabs (la barra de pestanas, sticky top:0 - ver mas abajo), y al
  estar antes en el DOM que las pestanas, con el mismo z-index perderia el
  empate de pintado apenas la barra de pestanas queda pegada arriba, tapando
  o bloqueando el selector. Se lo sube a --z-dropdown para que siempre quede
  clickeable; esto no choca con su propio panel desplegable, que ya usa esa
  misma capa (el panel sigue pintandose despues/encima del trigger).
*/
/* 2026-10-10: deja de ser fijo (tapaba la barra de pestanas pegada arriba): queda
   en la barra superior y se va con el scroll. */
.detail-topbar { position: relative; }
.detail-topbar .lang-selector {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  transform: translateY(-50%);
  z-index: var(--z-dropdown);
}

/* ============ Cabecera ============ */

.detail-header {
  position: relative;
  padding: var(--space-16) 0 var(--space-8);
  background: var(--bg-base);
}

.detail-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .detail-header__inner {
    flex-direction: row;
    align-items: center;
  }
}

.detail-header__flag {
  width: 120px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .detail-header__flag { width: 160px; }
}

.detail-header__info {
  flex: 1;
  min-width: 0;
}

.detail-header__name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-lg);
  color: var(--text-primary);
}

.detail-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-3);
}
.detail-header__meta > div {
  display: flex;
  flex-direction: column;
}
.detail-header__meta dt {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase-sm);
}
.detail-header__meta dd {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  font-weight: 500;
}

.detail-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.detail-header__favorite {
  border-radius: var(--radius-circle);
}
.detail-header__favorite.is-favorite {
  color: var(--gold-500);
}
.detail-header__favorite.is-animating {
  animation: favorite-pop 200ms ease-out;
}

/* ============ Galeria de fotos (sistema-diseno.md 6.4) ============ */

.gallery {
  position: relative;
  margin-top: var(--space-6);
}

.gallery__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  scrollbar-width: thin;
}

.gallery__track {
  display: flex;
  gap: var(--space-3);
  width: 100%;
}

.gallery__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface-2);
}
@media (min-width: 640px) {
  .gallery__slide { flex-basis: 60%; }
}
@media (min-width: 1024px) {
  .gallery__slide { flex-basis: 40%; }
}

.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__counter {
  position: absolute;
  top: var(--space-4);
  right: calc(var(--container-padding-mobile) + var(--space-2));
  padding: var(--space-1) var(--space-3);
  background: rgba(11, 14, 23, 0.65);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-pill);
}

.gallery__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(11, 14, 23, 0.5);
  color: var(--text-primary);
}
@media (pointer: fine) {
  .gallery__arrow { display: inline-flex; }
}
.gallery__arrow--prev { left: var(--space-2); }
.gallery__arrow--next { right: var(--space-2); }

/* ============ Mapa 2D (Leaflet) ============ */

.detail-map-section {
  margin-top: var(--space-10);
}

.detail-section-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

/* Leyenda discreta del mapa: gris secundario, sin competir con el contenido. */
.detail-map__notice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.8;
  margin-bottom: var(--space-3);
}
.map-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.map-legend::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 6px var(--gold-500);
}
.map-legend--place::before {
  width: 10px;
  height: 10px;
  background: var(--bg-base);
  border: 2px solid var(--gold-500);
}

.detail-map {
  height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: #0b0c10;
}

/* Mapa oscuro: las teselas de OpenStreetMap se oscurecen por CSS (mismo
   proveedor, sin claves ni licencias extra). Invertir + rotar el tono deja
   el agua y el fondo casi negros y las etiquetas en grises tenues. */
.map-tiles-dark {
  filter: invert(1) hue-rotate(180deg) brightness(0.78) contrast(0.85) saturate(0.35);
}

/* Puntos del mapa (L.divIcon, ver dotIcon/cityDivIcon en js/detalle.js):
   el contenedor es el area tactil y ::after dibuja el punto dorado con un
   halo suave, estetica de "constelacion" como en el globo. */
.leaflet-marker-icon.map-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.leaflet-marker-icon.map-dot::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-400, var(--gold-500));
  box-shadow: 0 0 6px 1px var(--gold-glow-35, rgba(212, 175, 55, 0.35));
  transition: transform 0.2s ease;
}
.leaflet-marker-icon.map-dot:hover::after { transform: scale(1.6); }
.leaflet-marker-icon.map-dot--profile::after {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18), 0 0 10px 2px var(--gold-glow-35, rgba(212, 175, 55, 0.35));
}
.leaflet-marker-icon.map-dot--capital::after {
  width: 11px;
  height: 11px;
  background: #fff6d8;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25), 0 0 14px 3px rgba(212, 175, 55, 0.5);
}

.leaflet-marker-icon.map-dot--place::after {
  width: 9px;
  height: 9px;
  background: rgba(11, 12, 16, 0.9);
  border: 2px solid var(--gold-500);
  box-shadow: 0 0 8px 1px var(--gold-glow-35, rgba(212, 175, 55, 0.35));
}
.map-popup__kicker {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}

/* Grupos de ciudades (markercluster): circulo de vidrio oscuro con cifra dorada. */
.leaflet-marker-icon.map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 20, 25, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
  color: var(--gold-500);
  font-size: 12px;
  font-weight: 600;
}

/* Tarjetas del mapa (popups de Leaflet) con estilo de vidrio, sin flecha. */
.detail-map .leaflet-popup-content-wrapper {
  background: rgba(20, 20, 25, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.detail-map .leaflet-popup-content {
  margin: 10px 14px;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.detail-map .leaflet-popup-tip-container { display: none; }
.detail-map .leaflet-popup-close-button { color: rgba(255, 255, 255, 0.5); }
.detail-map .leaflet-control-zoom a {
  background: rgba(20, 20, 25, 0.85);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
.detail-map .leaflet-control-attribution {
  background: rgba(11, 12, 16, 0.7);
  color: rgba(255, 255, 255, 0.45);
}
.detail-map .leaflet-control-attribution a { color: rgba(212, 175, 55, 0.8); }

/* ============ Provincias / regiones tocables (js/provincias.js) ============ */
.map-legend--province::before {
  width: 12px;
  height: 9px;
  border-radius: 2px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.7);
  box-shadow: none;
}

/* Leaflet solo libera el max-width:100% del reset (css/reset.css) para el SVG del overlayPane;
   sin esto el SVG del pane propio de provincias se encoge y los poligonos quedan desfasados. */
.leaflet-container .leaflet-provinces-pane svg { max-width: none !important; max-height: none !important; }

/* Boton mostrar/ocultar: control de vidrio arriba a la derecha, 44px de alto para el dedo. */
.detail-map .provinces-toggle { border: 0; }
.provinces-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 20, 25, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.provinces-toggle__btn[hidden] { display: none; }
.provinces-toggle__btn[aria-pressed="true"] { border-color: rgba(212, 175, 55, 0.6); color: var(--gold-500); }
.provinces-toggle__btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.provinces-toggle__icon {
  width: 14px;
  height: 11px;
  border-radius: 2px;
  border: 1.5px solid currentColor;
  background: rgba(212, 175, 55, 0.12);
}

/* Tarjeta de la provincia: hoja inferior en celular, panel lateral en escritorio. */
.province-card {
  position: absolute;
  z-index: 1000;
  left: 8px;
  right: 8px;
  bottom: 8px;
  max-height: calc(100% - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: rgba(20, 20, 25, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-sm);
  line-height: 1.45;
  cursor: auto;
  animation: province-card-in 0.18s ease-out;
}
.province-card[hidden] { display: none; }
/* Celular: el mapa gana un poco de alto y la tarjeta ocupa como maximo la mitad inferior,
   para que la provincia tocada siga a la vista. */
@media (max-width: 639px) {
  .detail-map { height: 420px; }
  .province-card { max-height: 52%; padding: 12px 14px 12px; }
  .province-card__facts { margin-top: 6px; }
}
/* Fondo oscuro tambien fuera del mundo (Leaflet pone #ddd por defecto en .leaflet-container). */
.detail-map.leaflet-container { background: #0b0c10; }
/* Misma especificidad que la regla por defecto de Leaflet (que carga despues): sin esto la atribucion queda clara. */
.detail-map.leaflet-container .leaflet-control-attribution { background: rgba(11, 12, 16, 0.7); color: rgba(255, 255, 255, 0.45); }
@keyframes province-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .province-card { animation: none; } }
@media (min-width: 640px) {
  .province-card { left: auto; right: 10px; bottom: auto; top: 62px; width: 320px; max-height: calc(100% - 92px); }
}
.province-card__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.province-card__close:hover, .province-card__close:focus-visible { color: var(--gold-500); }
.province-card .map-popup__kicker { padding-right: 40px; }
.province-card__title {
  margin: 0;
  padding-right: 40px;
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}
.province-card__local { margin: 2px 0 0; color: rgba(255, 255, 255, 0.55); font-size: var(--fs-xs, 0.75rem); }
.province-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 16px;
  margin: 10px 0 0;
}
.province-card__facts:empty { display: none; }
.province-card__facts dt { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.province-card__facts dd { margin: 0; color: #fff; font-weight: 500; overflow-wrap: anywhere; }
.province-card__count { margin: 12px 0 4px; color: var(--gold-500); font-weight: 600; }
.province-card__count--empty { color: rgba(255, 255, 255, 0.55); font-weight: 400; font-size: var(--fs-xs, 0.75rem); }
.province-card__places { list-style: none; margin: 0; padding: 0; }
.province-card__place {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: none;
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.province-card__place:hover, .province-card__place:focus-visible { color: var(--gold-500); outline: none; background: rgba(212, 175, 55, 0.06); }
.province-card__place-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(11, 12, 16, 0.9);
  border: 2px solid var(--gold-500);
}
.province-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: rgba(212, 175, 55, 0.9);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
}

/* Enlace "Ver guia completa" dentro del popup de Leaflet de una ciudad con perfil (Fase 3). */
.map-popup__city-link {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--gold-600);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.detail-map__unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6);
  color: var(--text-secondary);
  text-align: center;
}

/* ============ Aviso de "guia no disponible" (paises fuera de los 50) ============ */

.detail-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding: var(--space-4) var(--space-5);
  background: rgba(245, 158, 11, 0.12);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.detail-notice .icon {
  color: var(--color-warning);
  flex-shrink: 0;
}

/* ============ Sistema de pestanas (sistema-diseno.md 6.2) ============ */

.detail-tabs {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
  margin-top: var(--space-10);
}

/*
  Bug reportado: la barra desbordaba horizontalmente (overflow-x:auto) pero
  con scrollbar-width:none no quedaba ninguna pista visible de que hubiera
  mas pestanas ni forma de llegar a ellas con el mouse. Se agregan botones
  de flecha a los costados (ver .detail-tabs__nav-btn) que solo aparecen
  cuando realmente hay contenido oculto (logica en detalle.js).
*/
.detail-tabs__scroller {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.detail-tabs__list {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  flex: 1 1 auto;
  min-width: 0;
}
.detail-tabs__list::-webkit-scrollbar { display: none; }

.detail-tabs__nav-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-base), background var(--transition-base);
}
.detail-tabs__nav-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-2);
}
.detail-tabs__nav-btn:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}
.detail-tabs__nav-btn .icon {
  width: 16px;
  height: 16px;
}
.detail-tabs__nav-btn[hidden] {
  display: none;
}
/* Movil: el chip-scroll con scroll-snap + swipe (mas abajo) ya es la
   interaccion esperada, los botones de flecha solo estorbarian espacio. */
@media (max-width: 639px) {
  .detail-tabs__nav-btn {
    display: none !important;
  }
}

.detail-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-uppercase-sm);
  color: var(--text-secondary);
  border-bottom: 3px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}
.detail-tabs__tab:hover {
  color: var(--text-primary);
}
.detail-tabs__tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--gold-500);
}

/*
  sistema-diseno.md 6.2 solo pide icono en el chip movil ("Cada chip lleva
  icono (24px) + label corto"); la variante de escritorio/tablet (barra con
  subrayado) no lo menciona, solo texto. Se oculta aca (en vez de no
  renderizarlo desde detalle.js) para no duplicar el markup entre variantes.
  Ademas de fidelidad al diseno, libera ~28px por pestana (icono 20px + gap
  8px) que ayudan a que la barra de 8 pestanas necesite scrollear menos en
  los idiomas con etiquetas mas cortas (ES/EN/FR) en viewports de escritorio,
  donde el ancho disponible queda acotado por --container-max-width.
*/
@media (min-width: 640px) {
  .detail-tabs__tab .icon {
    display: none;
  }
}

/* Movil: chips horizontales con scroll-snap (sistema-diseno.md 6.2) */
@media (max-width: 639px) {
  .detail-tabs__list {
    scroll-snap-type: x mandatory;
    padding-block: var(--space-2);
  }
  .detail-tabs__tab {
    scroll-snap-align: start;
    border-bottom: none;
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
  }
  .detail-tabs__tab.is-active {
    background: var(--gold-500);
    color: var(--text-on-gold);
  }
}

.detail-tab-panel {
  padding-block: var(--space-8);
  animation: tab-panel-in var(--transition-base);
}
@keyframes tab-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.detail-tab-panel h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.detail-tab-panel h3:first-child {
  margin-top: 0;
}
.detail-tab-panel p {
  color: var(--text-secondary);
  line-height: var(--lh-content);
  margin-bottom: var(--space-3);
}
.detail-lead {
  font-size: var(--fs-md);
  color: var(--text-primary) !important;
}

/* ============ Secciones de ciudad.html (sistema de diseno 6.2 no aplica: ciudad.html no tiene pestanas, apila las 5 secciones en una sola pagina de scroll continuo) ============ */

.city-section {
  padding-block: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}
.city-section--first {
  border-top: none;
  padding-top: var(--space-6);
}
.city-section h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.city-section h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}
.city-section h4:first-of-type {
  margin-top: 0;
}
.city-section p {
  color: var(--text-secondary);
  line-height: var(--lh-content);
  margin-bottom: var(--space-3);
}

/* Rutas y conexiones */
.route-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}
.route-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.route-card__mode {
  align-self: flex-start;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold-500);
  color: var(--gold-500);
}
.route-card__title {
  font-weight: 600;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
.route-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0 !important;
}
.route-card__link {
  font-size: var(--fs-sm);
  margin: 0 !important;
}
.route-card__link a {
  color: var(--gold-500);
}

.detail-list {
  list-style: disc;
  padding-left: var(--space-6);
  color: var(--text-secondary);
  line-height: var(--lh-content);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.chip {
  padding: var(--space-1) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* ============ Tarjetas de atracciones/gastronomia ============ */

.content-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .content-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .content-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

.content-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.content-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Sin foto real del lugar: fondo neutro con icono (nunca una imagen al azar). */
.content-card__image--vacia {
  display: grid;
  place-items: center;
  background: var(--bg-surface-hover);
  color: var(--text-secondary, currentColor);
}

.content-card__image--vacia .icon {
  width: 40px;
  height: 40px;
  opacity: 0.5;
}

.content-card__body {
  padding: var(--space-4);
}

.content-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-2) !important;
}

.content-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: 0 !important;
}

/* ============ Clima ============ */

.season-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) {
  .season-list { grid-template-columns: repeat(2, 1fr); }
}

.season-card {
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.season-card__name {
  font-weight: 600;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-1) !important;
}
.season-card__months {
  font-weight: 400;
  color: var(--text-tertiary);
}

/* ============ Presupuesto ============ */

.cost-breakdown {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.cost-breakdown__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.cost-breakdown__item + .cost-breakdown__item {
  border-top: 1px solid var(--border-subtle);
}
.cost-breakdown__amount {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cost-breakdown__note {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

.budget-levels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) {
  .budget-levels-grid { grid-template-columns: repeat(3, 1fr); }
}

.budget-level-card {
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}
.budget-level-card__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-500) !important;
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase-sm);
  margin-bottom: var(--space-2) !important;
}
.budget-level-card__amount {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2) !important;
}
.budget-level-card__amount span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-tertiary);
}
.budget-level-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: 0 !important;
}

/* Contenedor de la calculadora interactiva: lo completa budget-calculator.js */
.budget-calculator {
  min-height: 80px;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.budget-calc__row {
  margin-bottom: var(--space-4);
}
.budget-calc__row label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.budget-calc__row label span:last-child {
  color: var(--gold-500);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
/*
  Slider custom (sistema-diseno.md 6.3): track fino de 6px, thumb dorado de
  22px visible, pero con un area tactil real de 44px de alto (el input entero
  queda alto y el track/thumb se centran dentro via margin-top negativo en el
  thumb webkit) -- mas simple y robusto en pantallas chicas que un ::before
  transparente superpuesto, y con el mismo resultado practico: se puede
  arrastrar el slider tocando en una franja generosa, no solo el circulo de
  22px. accent-color queda como refuerzo nativo (algunos navegadores lo usan
  para el foco/seleccion incluso con los pseudo-elementos ya definidos).
*/
.budget-calc__row input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  accent-color: var(--gold-500);
  cursor: pointer;
}

.budget-calc__row input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border-default);
}
.budget-calc__row input[type='range']::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border-default);
}

.budget-calc__row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px; /* centra el thumb de 22px sobre el track de 6px (Firefox lo centra solo) */
  border-radius: var(--radius-circle);
  background: var(--gold-500);
  border: 3px solid var(--bg-base);
  box-shadow: var(--shadow-gold-glow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.budget-calc__row input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  background: var(--gold-500);
  border: 3px solid var(--bg-base);
  box-shadow: var(--shadow-gold-glow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

@media (pointer: fine) {
  .budget-calc__row input[type='range']:hover::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px var(--gold-glow-15), var(--shadow-gold-glow);
  }
  .budget-calc__row input[type='range']:hover::-moz-range-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px var(--gold-glow-15), var(--shadow-gold-glow);
  }
}
.budget-calc__row input[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.15);
}
.budget-calc__row input[type='range']:active::-moz-range-thumb {
  transform: scale(1.15);
}

/* Foco de teclado: el anillo generico de reset.css queda descentrado sobre un
   input de 44px de alto con un thumb visual de 22px, asi que aca se
   reemplaza (nunca se quita sin reemplazo, sistema-diseno.md 1.7) por un
   halo alrededor del thumb mismo. */
.budget-calc__row input[type='range']:focus-visible {
  outline: none;
}
.budget-calc__row input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color), var(--shadow-gold-glow);
}
.budget-calc__row input[type='range']:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color), var(--shadow-gold-glow);
}

.budget-calc__total {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.budget-calc__total-label {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase-sm);
  margin-bottom: var(--space-2) !important;
}
.budget-calc__total-amount {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--gold-500) !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-1) !important;
}
.budget-calc__total-converted {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0 !important;
}
.budget-calc__notice {
  font-size: var(--fs-xs);
  color: var(--color-warning);
  margin-top: var(--space-2);
  margin-bottom: 0 !important;
}

/* ============ Semaforo de seguridad (sistema-diseno.md 1.5) ============ */

.detail-emergency {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  color: var(--text-primary) !important;
}

/* ============ Idioma y cultura ============ */

.phrase-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.phrase-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}
@media (min-width: 640px) {
  .phrase-row { grid-template-columns: 1.2fr 1fr 1fr; align-items: center; }
}
.phrase-row__phrase {
  font-weight: 600;
  color: var(--text-primary);
}
.phrase-row__translation {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.phrase-row__phonetic {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  font-style: italic;
}

.testimonial-card {
  padding: var(--space-5);
  background: var(--bg-surface);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius-md);
}
.testimonial-card p {
  color: var(--text-primary);
  font-size: var(--fs-md);
  margin-bottom: var(--space-3);
}
.testimonial-card cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--text-secondary);
}
.testimonial-card__disclaimer {
  font-size: var(--fs-xs) !important;
  color: var(--text-tertiary) !important;
  margin-top: var(--space-1);
}

/* Mas lugares para visitar (pestana Atracciones, ver js/detalle.js renderMorePlaces).
   Las fichas reutilizan .route-card; solo se suman las lineas de dato practico. */
.place-section-title {
  margin-top: var(--space-8, 2rem);
}
.place-card__meta {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0 !important;
}
.place-card__meta strong {
  color: var(--text-primary);
  font-weight: 600;
}


/* Como llegar: tarjetas de vidrio por forma de transporte (ver renderGettingThere). */
.transit-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.transit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: 16px;
  background: rgba(20, 20, 25, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.transit-card--wide { grid-column: 1 / -1; }
.transit-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.transit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--gold-500);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  flex-shrink: 0;
}
.transit-card__icon .icon { width: 18px; height: 18px; }
#country-tab-panels .transit-card__title {
  margin: 0;
  font-size: var(--fs-md, 1rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.transit-card__badge {
  margin-left: auto;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--gold-500);
  color: var(--gold-500);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
  text-align: center;
}
.transit-card__label {
  margin: 0 !important;
  font-size: var(--fs-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.transit-card__text {
  margin: 0 !important;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-content);
}
.transit-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.transit-card__list .route-card__mode { margin-right: var(--space-2); }
.transit-card__link {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gold-500);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.transit-card__link:hover { text-decoration: underline; }
.chip__code {
  margin-left: 4px;
  color: var(--gold-500);
  font-weight: 600;
  font-size: 0.85em;
}

/* Widget de clima (renderClimateWidget): tiempo actual + 12 meses con los mejores en dorado. */
.climate-widget {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border-radius: 16px;
  background: rgba(20, 20, 25, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.climate-widget__now {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.climate-widget__now[hidden] { display: none; }
.climate-widget__temp { font-size: 1.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); }
.climate-widget__desc { font-size: var(--fs-sm); color: var(--text-secondary); }
.climate-widget__icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8 0 45%, rgba(255, 210, 110, 0.35) 46% 70%, transparent 71%);
}
.climate-widget__icon.is-night { background: radial-gradient(circle at 60% 40%, transparent 0 38%, #e9ecf7 39% 55%, transparent 56%); }
.climate-widget__icon--cloudy, .climate-widget__icon--fog, .climate-widget__icon--drizzle,
.climate-widget__icon--rain, .climate-widget__icon--snow, .climate-widget__icon--storm {
  border-radius: 14px;
  height: 18px;
  background: linear-gradient(#cfd5e6, #9aa3bd);
}
.climate-widget__icon--rain, .climate-widget__icon--drizzle, .climate-widget__icon--storm { box-shadow: 0 8px 0 -6px #6fb6ff; }
.climate-widget__best {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4) !important;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.climate-widget__best strong { color: var(--gold-500); font-weight: 600; text-transform: capitalize; }
.climate-widget__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 8px var(--gold-500); }
.climate-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  height: 170px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.climate-chart__month {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: end;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}
.climate-chart__bar {
  width: min(70%, 22px);
  border-radius: 6px 6px 2px 2px;
  background: rgba(255, 255, 255, 0.14);
  align-self: end;
}
.climate-chart__month.is-best .climate-chart__bar {
  background: linear-gradient(var(--gold-500), rgba(212, 175, 55, 0.45));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}
.climate-chart__temp { font-size: 11px; color: rgba(255, 255, 255, 0.75); }
.climate-chart__rain { font-size: 10px; color: #6fb6ff; opacity: 0.8; }
.climate-chart__name { font-size: 11px; color: var(--text-tertiary); text-transform: capitalize; }
.climate-chart__month.is-best .climate-chart__name,
.climate-chart__month.is-best .climate-chart__temp { color: var(--gold-500); }
.climate-widget__note {
  margin: var(--space-3) 0 0 !important;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Planificador de vuelo con ruta animada (js/route-anim.js). */
.flight-planner__label {
  display: block;
  font-size: var(--fs-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.flight-planner__select {
  width: min(100%, 360px);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(11, 12, 16, 0.8);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: inherit;
}
.flight-planner__select:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.flight-planner__map {
  height: 280px;
  margin-top: var(--space-3);
  border-radius: 12px;
  overflow: hidden;
  background: #0b0c10;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.flight-planner__map .leaflet-control-attribution {
  background: rgba(11, 12, 16, 0.7);
  color: rgba(255, 255, 255, 0.45);
}
.flight-planner__stats {
  margin: var(--space-3) 0 0 !important;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-height: 1.4em;
}
.flight-planner__stats strong { color: var(--gold-500); }
.flight-planner__note {
  margin: var(--space-1) 0 0 !important;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-tertiary);
}
.leaflet-marker-icon.flight-plane {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.leaflet-marker-icon.flight-plane svg {
  width: 22px;
  height: 22px;
  color: #fff6d8;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.9));
  transition: transform 0.15s linear;
}

/* Datos practicos: telefonos de emergencia y enchufes (pestana Seguridad). */
.practical-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-2);
}
.practical-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.practical-tile--main { border-color: rgba(212, 175, 55, 0.45); }
.practical-tile__label {
  font-size: var(--fs-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.practical-tile__value { font-size: 1.25rem; font-weight: 600; }
.practical-tile__value a { color: var(--gold-500); text-decoration: none; }
.practical-tile__value a:hover, .practical-tile__value a:focus-visible { text-decoration: underline; }
.practical-note {
  margin: var(--space-2) 0 0 !important;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-tertiary);
}
.plug-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.plug-chip {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--gold-500);
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.08);
}
.plug-power { color: var(--text-secondary); font-size: var(--fs-sm); margin-left: var(--space-1); }

/* Credito de cada foto (autor, licencia y fuente), obligatorio por la licencia. */
.gallery__credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  padding: 18px 10px 6px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 45%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery__credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); }

.gallery__slide img:focus-visible { outline: 3px solid var(--focus-ring-color, #f2d27a); outline-offset: -3px; }
.gallery__credit a { display: inline-block; padding-block: 5px; }
@media (max-width: 639px) {
}

/* "Lo esencial en 3 dias" (js/itinerario.js). */
.itinerary { margin-top: var(--space-5); }
.itinerary__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.itinerary__title { margin: 0; font-size: var(--fs-lg); }
.itinerary__toggle[aria-pressed="true"] { border-color: var(--gold-500); color: var(--gold-500); }
.itinerary__days {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.itinerary-day {
  padding: var(--space-4);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--day-color);
}
.itinerary-day__title { margin: 0 0 var(--space-2); font-size: var(--fs-md); color: var(--day-color); }
.itinerary-day__stops { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: 6px; }
.itinerary-day__stops li { display: flex; align-items: center; gap: 8px; }
.itinerary-step {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.72rem; font-weight: 700; color: #0b0c10; background: var(--day-color, var(--gold-500));
}
.itinerary-day .itinerary-step { background: var(--day-color); }
.itinerary-day__note { margin: 0 !important; font-size: var(--fs-sm); color: var(--text-secondary); }
.leaflet-marker-icon.map-step { background: none; border: 0; }
.leaflet-marker-icon.map-step span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 0.78rem/1 var(--font-ui, sans-serif); color: #0b0c10; background: var(--day-color);
  box-shadow: 0 0 0 2px rgba(11, 12, 16, 0.85), 0 0 12px rgba(242, 210, 122, 0.55);
}

.city-planner__selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.city-planner__selects .flight-planner__select { display: block; width: 100%; margin-top: var(--space-1); text-transform: none; letter-spacing: normal; font-size: var(--fs-sm); }

/* ============ Resumen estatico de /pais/<slug> (#seo-static) ============
   Lo genera scripts/generar-paginas-pais.js en el HTML inicial (para buscadores
   y para quien navega sin JS) y js/detalle.js lo elimina apenas pinta la guia
   completa: solo se ve durante la carga o sin JavaScript. */
.seo-static {
  padding-block: var(--space-8) var(--space-12);
  color: var(--text-secondary);
  overflow-wrap: break-word;
}
.seo-static h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.seo-static h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-block: var(--space-6) var(--space-2);
}
.seo-static p,
.seo-static li {
  max-width: 72ch;
  line-height: 1.6;
}
.seo-static ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-4);
  list-style: disc;
}
.seo-static strong { color: var(--text-primary); font-weight: 600; }

/* Telefonos de emergencia: toda la tarjeta comoda de tocar (44 px). */
.practical-tile__value a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; }

/* Cabecera del pais mas aireada: mas espacio entre bandera, nombre, datos y botones. */
.detail-header__inner { gap: var(--space-6); }
@media (min-width: 640px) {
  .detail-header__inner { gap: var(--space-10, 40px); }
}
.detail-header__name { margin-bottom: var(--space-2); }
.detail-header__meta { gap: var(--space-4) var(--space-10, 40px); margin-top: var(--space-4); }
.detail-header__meta > div { gap: 4px; }
.detail-header__meta dt { letter-spacing: 0.08em; }
.detail-header__actions { gap: var(--space-4); margin-top: var(--space-6); }

/* Panel del codigo QR (js/qr.js). */
.qr-dialog { position: fixed; inset: 0; z-index: var(--z-modal, 1000); display: grid; place-items: center; padding: 16px; background: rgba(3, 5, 10, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qr-dialog[hidden] { display: none; }
.qr-dialog__panel { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border-radius: 20px; background: rgba(16, 19, 30, 0.96); border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.qr-dialog__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text-secondary); }
.qr-dialog__close:hover { background: rgba(255, 255, 255, 0.06); }
.qr-dialog__title { margin: 0 32px 6px; font-size: var(--fs-lg); }
.qr-dialog__hint { margin: 0 0 14px !important; font-size: var(--fs-sm); color: var(--text-secondary); }
.qr-dialog__canvas { min-height: 200px; display: grid; place-items: center; color: var(--text-tertiary); }
.qr-dialog__canvas canvas { width: 100%; height: auto; border-radius: 14px; }
.qr-dialog__actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.qr-dialog__actions .btn { min-height: 44px; }

/* Historia verificada de cada lugar (desplegable). */
.place-card__history { margin-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: var(--space-2); }
.place-card__history summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--gold-500); font-weight: 600; font-size: var(--fs-sm); list-style: none; }
.place-card__history summary::-webkit-details-marker { display: none; }
.place-card__history summary::before { content: "▸"; transition: transform 0.15s; }
.place-card__history[open] summary::before { transform: rotate(90deg); }
.place-card__history p { margin: 0 0 6px !important; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; }
.place-card__history a { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* Curiosidades verificadas (pestana Idioma y cultura). */
.fact-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.fact-card { position: relative; padding: 14px 16px 14px 44px; border-radius: 14px; background: rgba(212, 175, 55, 0.06); border: 1px solid rgba(212, 175, 55, 0.22); color: var(--text-secondary); line-height: 1.5; }
.fact-card::before { content: '✦'; position: absolute; left: 16px; top: 13px; color: var(--gold-500); }
.practical-tile__value--text { font-size: 1rem; font-weight: 600; color: var(--text-primary); }

/* Conversor rapido de moneda (js/conversor.js). */
.converter { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: var(--space-5); }
@media (min-width: 720px) { .converter { grid-template-columns: 1fr 1.4fr auto 1.4fr; align-items: end; } .converter__result, .converter__note { grid-column: 1 / -1; } }
.converter__field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }
.converter__amount, .converter__select { min-height: 48px; padding: 10px 12px; border-radius: 10px; background: rgba(11, 12, 16, 0.8); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.12); font: inherit; font-size: 1rem; text-transform: none; letter-spacing: normal; width: 100%; }
.converter__amount:focus-visible, .converter__select:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.converter__swap { justify-self: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.45); color: var(--gold-500); font-size: 1.3rem; background: rgba(212, 175, 55, 0.08); }
.converter__result { margin: 0 !important; font-size: 1.15rem; color: var(--text-secondary); }
.converter__result strong { color: var(--gold-500); font-size: 1.5rem; }
.converter__note { margin: 0 !important; font-size: var(--fs-xs); color: var(--text-tertiary); }

/* Foto de cada lugar para visitar (Wikimedia Commons) con su credito. */
.place-card__photo { position: relative; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: rgba(255, 255, 255, 0.04); }
.place-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-card__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 5px; font-size: 0.7rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-card__photo figcaption a { color: inherit; display: inline-block; padding-block: 5px; }

/* Micro-guia: datos rapidos en pastillas (fillQuickFacts en js/detalle.js). */
.quick-facts { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quick-facts[hidden] { display: none; }
.quick-fact { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.quick-fact:hover, .quick-fact:focus-visible { border-color: rgba(212, 175, 55, 0.55); background: rgba(212, 175, 55, 0.07); }
.quick-fact .icon { width: 16px; height: 16px; color: var(--gold-500); flex: none; }
.quick-fact__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }
.quick-fact__value { color: var(--text-primary); font-weight: 600; }
@media (max-width: 639px) {
  .quick-facts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .quick-facts::-webkit-scrollbar { display: none; }
  .quick-facts li { flex: none; scroll-snap-align: start; }
}

/* Celular: acciones de la cabecera en una sola fila (compartir y QR solo con
   icono; el PDF con texto corto). El texto completo queda para lectores de pantalla. */
@media (max-width: 639px) {
  .detail-header__actions { flex-wrap: nowrap; gap: var(--space-2); }
  #share-button, #qr-button { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; flex: none; }
  #share-button span, #qr-button span, #download-pdf-button span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  #download-pdf-button { min-height: 44px; padding-inline: 14px; flex: none; }
  #download-pdf-button::after { content: "PDF" / ""; font-weight: 600; }
}

/* Festivales y fiestas (pestana Clima). */
.festival-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.festival-card { padding: var(--space-4); border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid var(--gold-500); display: flex; flex-direction: column; gap: 4px; }
.festival-card__when { margin: 0 !important; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-500); font-weight: 600; }
.festival-card__variable { text-transform: none; letter-spacing: normal; color: var(--text-tertiary); font-weight: 400; }
.festival-card__name { margin: 2px 0 0; font-size: var(--fs-md); color: var(--text-primary); }
.festival-card__place { margin: 0 !important; font-size: var(--fs-sm); color: var(--text-tertiary); }
.festival-card__desc { margin: 4px 0 0 !important; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.festival-card__source { margin-top: auto; padding-top: 6px; font-size: var(--fs-xs); color: var(--text-tertiary); }

/* "Reservá tu viaje": botones a socios de viaje (pestana Como llegar). */
.booking-card { margin: 0 0 var(--space-5); padding: var(--space-4); border-radius: 16px; background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(212, 175, 55, 0.35); }
.booking-card__title { margin: 0 0 var(--space-3); font-size: var(--fs-lg); }
.booking-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.booking-btn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 12px; background: rgba(11, 12, 16, 0.75); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-primary); text-decoration: none; }
.booking-btn:hover, .booking-btn:focus-visible { border-color: var(--gold-500); background: rgba(212, 175, 55, 0.1); }
.booking-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.booking-btn .icon { width: 22px; height: 22px; color: var(--gold-500); flex: none; }
.booking-btn__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.booking-btn__text strong { font-size: var(--fs-md); font-weight: 600; }
.booking-btn__text span { font-size: var(--fs-xs); color: var(--text-tertiary); }
.booking-btn__arrow { margin-left: auto; color: var(--text-tertiary); }
.booking-card__note { margin: var(--space-3) 0 0 !important; font-size: var(--fs-xs); color: var(--text-tertiary); }

/* Atajos de reserva bajo la cabecera del pais. */
.hero-booking { margin-top: var(--space-5); }
.hero-booking:empty { display: none; }
.hero-booking__label { margin: 0 0 8px !important; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }
.hero-booking__row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-booking__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--text-primary); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.5); transition: transform 0.15s, background 0.15s; }
.hero-booking__btn .icon { width: 18px; height: 18px; color: var(--gold-500); }
.hero-booking__btn--primary { background: linear-gradient(135deg, #e6c560, #c99a2e); color: #14110a; border-color: transparent; box-shadow: 0 6px 18px rgba(212, 175, 55, 0.25); }
.hero-booking__btn--primary .icon { color: #14110a; }
.hero-booking__btn:hover, .hero-booking__btn:focus-visible { transform: translateY(-1px); background: rgba(212, 175, 55, 0.16); }
.hero-booking__btn--primary:hover, .hero-booking__btn--primary:focus-visible { background: linear-gradient(135deg, #f0d273, #d4a73a); }
.hero-booking__btn:focus-visible, .cta-block__btn:focus-visible, .itinerary__book:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
@media (max-width: 639px) {
  .hero-booking__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .hero-booking__btn { padding: 10px 8px; font-size: var(--fs-sm); }
}
@media (prefers-reduced-motion: reduce) { .hero-booking__btn { transition: none; } .hero-booking__btn:hover { transform: none; } }

/* Bloque de reserva contextual (Atracciones, Seguridad). */
.cta-block { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin: var(--space-6) 0 var(--space-2); padding: var(--space-4); border-radius: 16px; background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(212, 175, 55, 0.4); }
.cta-block__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(212, 175, 55, 0.15); }
.cta-block__icon .icon { width: 22px; height: 22px; color: var(--gold-500); }
.cta-block__title { margin: 0 !important; font-weight: 700; color: var(--text-primary); }
.cta-block__text { margin: 2px 0 0 !important; font-size: var(--fs-sm); color: var(--text-secondary); }
.cta-block__btn { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 10px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; color: #14110a; background: linear-gradient(135deg, #e6c560, #c99a2e); }
.cta-block__note { grid-column: 1 / -1; margin: 0 !important; font-size: var(--fs-xs); color: var(--text-tertiary); }
@media (min-width: 720px) {
  .cta-block { grid-template-columns: auto 1fr auto; }
  .cta-block__btn { grid-column: auto; justify-self: end; }
}
@media (max-width: 639px) { .cta-block__btn { justify-self: stretch; justify-content: center; } }

/* Itinerario: reservar actividades. */
.itinerary__book { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; margin-top: var(--space-3); padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; color: #14110a; background: linear-gradient(135deg, #e6c560, #c99a2e); }
@media (max-width: 639px) {
  .hero-booking__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hero-booking__btn { gap: 5px; padding: 10px 4px; font-size: 0.82rem; min-width: 0; }
  .hero-booking__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-booking__btn .icon { width: 15px; height: 15px; flex: none; }
}

.cta-block__more { grid-column: 1 / -1; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.cta-block__more a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); text-decoration: none; border: 1px solid rgba(212, 175, 55, 0.45); background: rgba(255, 255, 255, 0.04); }
.cta-block__more a:hover, .cta-block__more a:focus-visible { background: rgba(212, 175, 55, 0.14); }
.booking-card__claim { margin: var(--space-3) 0 0 !important; font-size: var(--fs-sm); }
.booking-card__claim a { color: var(--gold-500); text-decoration: underline; text-underline-offset: 2px; }

.booking-card__more { margin: var(--space-3) 0 0 !important; font-size: var(--fs-sm); color: var(--text-secondary); }
.booking-card__more a { color: var(--gold-500); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding-block: 6px; }

/* Foto propia de cada atraccion destacada, con credito. */
.content-card__figure { position: relative; margin: 0; }
.content-card__figure .content-card__image { display: block; width: 100%; }
.content-card__credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 5px; font-size: 0.7rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-card__credit a { color: inherit; display: inline-block; padding-block: 5px; }