/*
=====================================================
BAQUEANO — Capa de identidad "Cartografía viva"
=====================================================

PROPÓSITO:
  Dar al Website una identidad visual propia, coherente con el eslogan
  "Descubre lo que no sale en el mapa", y corregir los fallos de contraste
  y de adaptación a pantallas pequeñas detectados en la auditoría visual
  (capturas reales en 390 px y 1440 px, 2026-10-03).

ARQUITECTURA:
  - Capa ADITIVA: se carga la ÚLTIMA (js/global-injector.js) en todas las
    páginas. No modifica HTML ni JavaScript; conserva toda la información y
    funcionalidad. Revertir = quitar esta hoja.
  - Secciones:
      1. Tokens de marca (colores, radios, sombras teñidas, textura).
      2. Base global segura (foco, tipografía, interacción, movimiento).
      3. Firma visual: curvas de nivel topográficas y etiquetas tipo coordenada.
      4. Correcciones de la portada, acotadas por id de sección.
      5. Asistente BAQUI en móvil.
  - Se usa !important solo donde el CSS heredado ya lo usa (styles.css e
    index-exact.css suman más de 4.000); sin él la corrección no aplica.

ACCESIBILIDAD:
  Contraste AA en los títulos corregidos, foco visible naranja de marca,
  objetivos táctiles ≥ 44 px y respeto a prefers-reduced-motion.

RELACIÓN:
  css/variables.css, css/colors.css (paleta oficial), css/pages/index-exact.css
  (estilos de portada que esta capa corrige), assets/textures/topografia.svg.
=====================================================
*/

/* ===================================================
   1. TOKENS DE MARCA
   =================================================== */
:root {
  --bq-id-ink: #0F172A;        /* Texto principal */
  --bq-id-navy: #0F172A;       /* Fondos profundos */
  --bq-id-teal: #165D6F;       /* Color institucional */
  --bq-id-orange: #F65E01;     /* Acento: brújula / acción */
  --bq-id-sand: #F4E6C1;       /* Papel cartográfico */
  --bq-id-moss: #4A7A5A;       /* Naturaleza */
  --bq-id-on-dark: #F8FAFC;    /* Texto sobre fondos oscuros */
  --bq-id-on-dark-soft: rgba(248, 250, 252, 0.78);

  /* Escala de radios: interior más cerrado, contenedores más suaves */
  --bq-id-radius-sm: 10px;
  --bq-id-radius-md: 16px;
  --bq-id-radius-lg: 24px;

  /* Sombras teñidas de teal (una sola fuente de luz, arriba) */
  --bq-id-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --bq-id-shadow-md: 0 12px 32px -8px rgba(22, 93, 111, 0.22);
  --bq-id-shadow-lg: 0 28px 60px -18px rgba(15, 23, 42, 0.38);

  --bq-id-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bq-id-topo: url("../assets/textures/topografia.svg");
}

/* ===================================================
   2. BASE GLOBAL SEGURA
   =================================================== */

/* Foco visible con el naranja de brújula (WCAG 2.4.7 / 2.4.11). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bq-id-orange);
  outline-offset: 3px;
}

/* Titulares equilibrados y párrafos sin palabras huérfanas. */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* Cifras alineadas en contadores, precios y estadísticas. */
:where([class*="stat"], [class*="price"], [class*="count"], time) {
  font-variant-numeric: tabular-nums;
}

/* Respuesta táctil al pulsar (simula un botón físico). */
:where(button, [role="button"], a[class*="btn"], a[class*="button"]):active {
  transform: translateY(1px) scale(0.985);
}

/* Las imágenes nunca desbordan su contenedor. Especificidad cero (:where)
   para que las librerías de mapas (mosaicos con max-width: none) prevalezcan. */
:where(img, video, iframe) { max-width: 100%; }

/* Desplazamiento suave solo si el usuario no pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contenido decorativo que sobresale (manchas, halos) no crea scroll lateral. */
html, body { overflow-x: clip; }

/* ===================================================
   3. FIRMA VISUAL: CARTOGRAFÍA VIVA
   =================================================== */

/* Curvas de nivel topográficas como "papel de mapa" de fondo.
   Se pinta en ::before con mask-image, así el color sale del token y la
   textura nunca tapa contenido ni recibe clics. */
:is(#porqueBaqueano, #experienciasSection, #testimoniosSection, #comunidadSeccion) {
  position: relative;
  isolation: isolate;
}

:is(#porqueBaqueano, #experienciasSection, #testimoniosSection, #comunidadSeccion)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bq-id-teal);
  opacity: 0.07;
  -webkit-mask-image: var(--bq-id-topo);
  mask-image: var(--bq-id-topo);
  -webkit-mask-size: 640px 640px;
  mask-size: 640px 640px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

/* Variación de posición para que las secciones no repitan el mismo relieve. */
#experienciasSection::before { -webkit-mask-position: 220px 80px; mask-position: 220px 80px; }
#testimoniosSection::before { -webkit-mask-position: -140px 300px; mask-position: -140px 300px; }
#comunidadSeccion::before { -webkit-mask-position: 60px -200px; mask-position: 60px -200px; opacity: 0.09; }

/* Etiquetas superiores como marcas de brújula: trazo naranja + texto espaciado. */
:is(.vivir-eyebrow, .inspire-eyebrow, .scenic-eyebrow) {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.16em !important;
}

:is(.inspire-eyebrow, .scenic-eyebrow)::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--bq-id-orange);
}

/* ===================================================
   4. CORRECCIONES DE LA PORTADA (index.html)
   =================================================== */

/* --- 4.1 Hero: el contenedor medía 446 px en pantallas de 390 px --- */
#heroNicaragua .exact-container {
  width: 100% !important;
  max-width: min(1320px, 100%) !important;
  box-sizing: border-box !important;
  padding-inline: clamp(16px, 5vw, 56px) !important;
}

/* El hero es una grilla con columna implícita: tomaba el ancho mínimo del
   buscador (el <input> trae ~194 px por defecto) y medía 386 px en 320 px,
   cortando título, texto y botones. Columna fluida + input encogible. */
#heroNicaragua {
  grid-template-columns: minmax(0, 1fr) !important;
}

#heroNicaragua :is(.exact-container, .hero-exact-content) {
  min-width: 0 !important;
}

#heroNicaragua .hero-exact-search input[type="search"] {
  min-width: 0 !important;
  flex: 1 1 auto;
  width: 100%;
  text-overflow: ellipsis;
}

#heroNicaragua .hero-exact-actions {
  flex-wrap: wrap !important;
}

#heroNicaragua .hero-exact-title {
  font-size: clamp(2.35rem, 10.4vw, 5.6rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;
  overflow-wrap: anywhere;
}

/* --- 4.2 Contrato de SUPERFICIE OSCURA (causa raíz del texto ilegible) ---
   css/theme-switcher.css y css/headings-system.css obligan a TODOS los títulos de <main> a usar
   var(--text-primary) con !important (incluido -webkit-text-fill-color), y esa
   variable vale #0F172A en modo claro: por eso aparecían títulos azul marino
   sobre fondos azul marino. En lugar de competir con más !important, cada
   superficie oscura redefine las variables de texto para su contenido; la regla
   del tema sigue funcionando y toma el color correcto según el contexto.
   Cualquier página puede usarlo con el atributo data-surface="dark". */
:is([data-surface="dark"], .map-card-exact, .ai-card-exact, .exp-card-exact, .scenic-banner-card) {
  --text-primary: var(--bq-id-on-dark);
  --text-secondary: var(--bq-id-on-dark-soft);
  --text-muted: rgba(248, 250, 252, 0.62);
  --text-light: var(--bq-id-on-dark);
  /* css/headings-system.css aplica la misma idea a todos los H2 con --heading-ink */
  --heading-ink: var(--bq-id-on-dark);
  --heading-muted: var(--bq-id-sand);
}

/* --- 4.3 Experiencias: fotos con degradado suficiente para leer el título --- */
#experienciasSection .exp-card-gradient {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 30%, rgba(15, 23, 42, 0.55) 62%, rgba(15, 23, 42, 0.92) 100%) !important;
}

#experienciasSection .exp-card-info h3 {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

#experienciasSection .exp-card-exact {
  border-radius: var(--bq-id-radius-lg) !important;
  box-shadow: var(--bq-id-shadow-md) !important;
  transition: transform 0.35s var(--bq-id-ease), box-shadow 0.35s var(--bq-id-ease) !important;
}

#experienciasSection .exp-card-exact:hover {
  transform: translateY(-4px);
  box-shadow: var(--bq-id-shadow-lg) !important;
}

/* --- 4.4 Banner final: titular azul sobre azul marino --- */
/* El titular usa el arena de marca (variable declarada en el propio elemento). */
#bannerAtardecer .scenic-title {
  --text-primary: var(--bq-id-sand);
  --heading-ink: var(--bq-id-sand);
  background: none !important;
}

/* --- 4.5 Ritmo responsive de tabletas y móviles --- */
@media (max-width: 1024px) {
  /* Mapa y planificador: una columna en lugar de dos columnas estrechas */
  #mapaAiSection .map-ai-grid-exact {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Experiencias: dos columnas en tableta */
  #experienciasSection .experiences-row-exact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ¿Por qué BAQUEANO?: introducción arriba y pilares debajo */
  #porqueBaqueano .why-baqueano-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 760px) {
  /* Experiencias: carrusel horizontal con encaje (scroll-snap); las 4 tarjetas
     siguen disponibles y cada título se lee completo. */
  #experienciasSection .experiences-row-exact {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: minmax(78%, 1fr) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 0.75rem !important;
    scrollbar-width: thin;
  }

  #experienciasSection .exp-card-exact {
    scroll-snap-align: start;
    min-height: 240px;
  }

  #porqueBaqueano .why-pillars-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Tarjeta del mapa: texto arriba y mapa a lo ancho debajo (antes el mapa
     quedaba comprimido a un costado en 390 px). */
  #mapaAiSection .map-card-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    /* En la portada actual la tarjeta es una grilla de 160 px + 130 px. */
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #mapaAiSection .map-visual-wrap,
  #mapaAiSection .map-visual-viewport {
    width: 100% !important;
    min-height: 240px;
  }

  /* Banner final y comunidad: apilados, texto alineado a la izquierda */
  #bannerAtardecer .scenic-banner-card,
  #comunidadSeccion .community-card-exact {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
  }

  #bannerAtardecer .scenic-banner-right {
    text-align: left !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  #bannerAtardecer .scenic-btns-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #bannerAtardecer .scenic-btns-row a {
    justify-content: center !important;
    min-height: 48px;
  }

  #comunidadSeccion .community-perks-row {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 1rem !important;
    justify-content: flex-start !important;
  }

  #comunidadSeccion :is(.community-left-host, .host-info-text, .community-perk-item) {
    text-align: left !important;
    align-items: flex-start !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  #porqueBaqueano .why-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===================================================
   5. ASISTENTE BAQUI EN MÓVIL
   =================================================== */
/* En pantallas pequeñas la burbuja de sugerencia (260 px) tapaba ~20 % de la
   pantalla en todo el recorrido. Se conserva la mascota: al tocarla se abre
   el panel completo con las mismas acciones (Escuchar, Abrir panel). */
@media (max-width: 640px) {
  .bq-assistant .bq-suggestion {
    display: none !important;
  }
}

/* ===================================================
   6. BARRA SUPERIOR EN MÓVIL
   =================================================== */
/* Causa raíz (2026-10-03, 390 px): navigation-mega.css fija el contenedor de
   acciones en 36 px, pero global-language.js mantiene visible el idioma en
   móvil; el resultado empujaba la hamburguesa a x=405, fuera de la pantalla,
   y el celular quedaba sin menú. Además SOS estaba oculto justo en el
   dispositivo donde más se necesita.
   Ahora el contenedor mide lo que su contenido y la barra queda:
   [marca] [SOS] [idioma] [menú]. Iniciar sesión sigue en el menú y en la
   barra de pulgar (Perfil). */
@media (max-width: 480px) {
  #mainNavbar :is(.exact-nav-actions, .global-nav-actions) {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin-left: auto !important;
  }

  #mainNavbar :is(.exact-container, .nav-inner) {
    gap: 8px !important;
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)) !important;
  }

  /* La marca cede espacio antes que los controles. */
  #mainNavbar :is(.exact-nav-brand, .navbar-brand-pill) {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  #mainNavbar :is(.sos-quick-btn, .navbar-sos-btn) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  #mainNavbar :is(.sos-quick-btn, .navbar-sos-btn) span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  #mainNavbar :is(.global-language, .navbar-lang-pill) {
    min-height: 44px !important;
    padding: 0 10px !important;
  }

  #mainNavbar :is(.exact-nav-mobile-toggle, .mobile-nav-toggle) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
}

/* Menú móvil intocable (causa raíz 2026-10-03): styles.css pone el fondo
   difuminado en z-index 10040, pero el panel vive dentro de #mainNavbar, que
   crea su propio contexto de apilamiento en 9900. El fondo quedaba ENCIMA del
   panel: se veía borroso y ningún enlace respondía al toque. Mientras el menú
   está abierto, el navbar completo sube por encima del fondo. */
body.nav-drawer-open #mainNavbar {
  z-index: 10050 !important;
}

/* La barra de pulgar (navegación rápida) se mantiene visible aunque el panel
   lateral (navegación completa) esté abierto: son componentes distintos. El
   panel reserva env(safe-area-inset-bottom) + 90 px abajo para no quedar
   tapado (css/navigation-mega.css, MENÚ GLOBAL v2). */
body.nav-drawer-open .bq-thumbbar {
  visibility: visible;
}

/* Teléfonos muy estrechos (≤ 359 px): la marca queda solo con el logo. */
@media (max-width: 359px) {
  #mainNavbar :is(.exact-nav-brand-text, .navbar-brand-text) {
    display: none !important;
  }
}

/* ===================================================
   7. BARRA DE PULGAR (navegación inferior en celular)
   =================================================== */
/* La crea js/global-injector.js (injectThumbBar). En celular lo importante
   queda al alcance del pulgar: Inicio, Explorar, Mapa, Mi Viaje y BAQUI.
   Se activa por espacio disponible (≤ 768 px), no por modelo de teléfono.
   Respeta la barra de gestos de iOS/Android con safe-area-inset-bottom. */
.bq-thumbbar { display: none; }

@media (max-width: 768px) {
  :root { --bq-thumbbar-h: 64px; }

  .bq-thumbbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 11990; /* bajo BAQUI abierto (12000) y modales; sobre el contenido */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    min-height: var(--bq-thumbbar-h);
    padding: 4px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    background: rgba(15, 23, 42, 0.94);
    border-top: 1px solid rgba(244, 230, 193, 0.14);
    box-shadow: 0 -10px 28px -12px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    font-family: Inter, system-ui, sans-serif;
  }

  .bq-thumbbar a,
  .bq-thumbbar button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 56px;
    padding: 6px 2px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: rgba(248, 250, 252, 0.72);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s var(--bq-id-ease), background-color 0.2s var(--bq-id-ease);
  }

  .bq-thumbbar span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Misma caja de 26 px para íconos y la imagen de BAQUI: etiquetas alineadas. */
  .bq-thumbbar i {
    font-size: 1.15rem;
    height: 26px;
    line-height: 26px;
  }

  .bq-thumbbar [aria-current="page"] {
    color: var(--bq-id-sand);
  }

  /* Marca de brújula sobre la pestaña activa */
  .bq-thumbbar [aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: var(--bq-id-orange);
    transform: translateX(-50%);
  }

  .bq-thumbbar .bq-thumbbar-baqui {
    color: #fff;
  }

  .bq-thumbbar .bq-thumbbar-baqui img {
    width: 30px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  }

  @media (hover: hover) {
    .bq-thumbbar :is(a, button):hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
  }

  /* El contenido final nunca queda tapado por la barra. */
  body.bq-has-thumbbar {
    padding-bottom: calc(var(--bq-thumbbar-h) + env(safe-area-inset-bottom)) !important;
  }

  /* BAQUI ya tiene su acceso en la barra: la mascota flotante se oculta en
     celular para no tapar botones ni textos (antes ocupaba ~96×120 px en todo
     el recorrido). El panel, la voz y todas sus funciones siguen intactos. */
  body.bq-has-thumbbar .bq-assistant .bq-mascot,
  body.bq-has-thumbbar .bq-assistant .bq-mascot-minimize,
  body.bq-has-thumbbar .bq-assistant .bq-reopen-tab {
    display: none !important;
  }

  /* El panel abierto de BAQUI se apoya sobre la barra, no detrás de ella. */
  body.bq-has-thumbbar .bq-assistant .bq-drawer {
    bottom: calc(var(--bq-thumbbar-h) + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--bq-thumbbar-h) - 70px - env(safe-area-inset-bottom)) !important;
  }

  /* Aviso de cookies y reproductores fijos: por encima de la barra. */
  /* 2026-10-06: también la barra de música (#stickyMusicBar) y el mini reproductor; la
     auditoría de botones en navegador real encontró sus controles tapados por esta barra. */
  body.bq-has-thumbbar :is(#bqCookieConsent, .bq-cookie-consent, .cookie-consent, .persistent-audio-player, .global-music-player, .bq-gallery-control, #stickyMusicBar, .musica-sticky-bottom-bar, .baq-mini-player) {
    margin-bottom: calc(var(--bq-thumbbar-h) + env(safe-area-inset-bottom));
  }
}

@media print {
  .bq-thumbbar { display: none !important; }
}

/* ===================================================
   8. PORTADA: AJUSTES DE COMPOSICIÓN
   =================================================== */

/* 8.1 "¿Qué querés vivir?": el título iba a la izquierda mientras la
   etiqueta y el párrafo iban centrados. */
#vivirSelector .vivir-title {
  text-align: center !important;
  margin-inline: auto !important;
}

/* 8.2 Destinos que inspiran: las polaroids estaban en position:absolute
   encima del botón "Explorar destino" (x 482–888 sobre x 348–572 en 1440 px).
   Pasan al flujo normal, debajo del botón, con desplazamiento horizontal. */
.inspire-feature {
  flex-wrap: wrap !important;
}

.inspire-feature > .inspire-gallery-editorial {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 1.25rem !important;
  z-index: 1;
}

.inspire-feature > .inspire-gallery-editorial .polaroid-strip {
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block: 6px;
}

.inspire-feature > .inspire-gallery-editorial .polaroid-strip::-webkit-scrollbar { display: none; }
.inspire-feature > .inspire-gallery-editorial .polaroid-item { flex: 0 0 auto; scroll-snap-align: start; }

/* 8.3 Encabezados de sección con enlace a la derecha: en celular el enlace
   bajaba cortado ("Ver todas las experi…"). Ahora se acomoda debajo. */
@media (max-width: 600px) {
  :is(#experienciasSection, #testimoniosSection) .section-header-exact {
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    row-gap: 0.5rem !important;
  }

  :is(#experienciasSection, #testimoniosSection) .section-header-link {
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }
}

/* ===================================================
   9. PIE DE PÁGINA: MARCA COMPLETA EN CELULAR
   =================================================== */
/* js/global-asset-curator.js pone el ícono de marca a min(230px, 100%) junto
   al texto "BAQUEANO / Nicaragua auténtica": en 390 px el texto quedaba en
   x 262–413, cortado en todas las páginas internas. El ícono acompaña al
   nombre con un tamaño proporcional; el nombre nunca se corta. */
#siteFooter .footer-logo-row img.bq-footer-proposal-logo,
#siteFooter .footer-logo-row .footer-logo-img {
  width: clamp(52px, 14vw, 76px) !important;
  max-height: 64px !important;
  flex: 0 0 auto;
}

#siteFooter .footer-logo-row { gap: 12px; }
#siteFooter .footer-brand-text-block { min-width: 0; }

/* ===================================================
   10. PERFIL: ESTADÍSTICAS EN CELULAR
   =================================================== */
/* Con sesión iniciada, las 4 cifras + "Editar perfil" iban en una sola fila
   y se salían de la pantalla (x hasta 510 px en 390 px). En celular pasan a
   dos columnas; el botón ocupa la fila completa. */
@media (max-width: 600px) {
  .prof-user-card .prof-stats-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .prof-user-card .prof-stats-box .prof-btn-edit {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 44px;
  }
}

/* 8.4 "Más que un destino": la tarjeta quedaba en 164 px junto al botón y el
   texto se partía palabra por palabra. Tarjeta y botón comparten la fila solo
   si caben; si no, el botón baja a su propia línea. */
.inspire-map-territorial .inspire-map-footer {
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.inspire-map-territorial .inspire-story-card {
  flex: 1 1 260px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.inspire-map-territorial .inspire-story-card .story-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.inspire-map-territorial .inspire-browse-all-btn {
  flex: 0 1 auto;
  min-height: 48px;
}