/* Ocultar el botón ATRÁS por defecto; mostrar solo si JS pone display:block */
.encuesta-top-button .btn-atras { display: none !important; }
.encuesta-top-button .btn-atras[style*="display: block"] { display: flex !important; }

/* Tamaño reducido del botón en móvil */
@media (max-width: 820px) {
  .encuesta-top-button .btn-atras,
  .encuesta-top-button > .btn-atras {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .encuesta-top-button .btn-atras i { font-size: 1.4rem !important; }
}

/* =================== SOLO MÓVIL =================== */
@media (max-width: 820px) {
  html, body { overflow-x: hidden !important; }

  .encuesta-box {
    max-width: 96vw !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* ----- Galería: apilar todo, sin grid/áreas ----- */
  .galeria {
    display: block !important;
    width: 100% !important;
    margin: 16px auto 0 auto !important;
    padding: 0 0 !important;
    box-sizing: border-box !important;
  }

  .galeria-section,
  .galeria-section-img {
    display: block !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto 16px auto !important;
  }

  /* ================= VIDEO ================= */
  .galeria-video {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto 16px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* El truco: dar altura sin depender de metadata usando aspect-ratio */
  .galeria-video video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 70vh !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 12px !important;
    background: #000 !important;
    margin: 0 auto !important;
  }

  /* ================= CARRUSEL ================= */
  /* Contenedor fluido (adiós 1400x1500) */
  .galeria-fotos-container {
    position: relative !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto 16px auto !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  /* Sin altura fija: dejamos que la imagen la defina, pero aseguramos mínimo */
  .galeria-fotos-slider {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important; /* para que nunca “desaparezca” */
    overflow: hidden !important;
  }

  /* Solo el slide activo visible */
  .galeria-foto-slide {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .galeria-foto-slide.active { display: flex !important; }

  .galeria-foto-slide img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 68vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 12px !important;
  }

  /* Flechas del carrusel */
  .galeria-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
  }
  .galeria-prev { left: 8px !important; }
  .galeria-next { right: 8px !important; }
  .galeria-nav i { font-size: 16px !important; }

  /* Indicadores */
  .galeria-indicadores {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 5 !important;
  }
  .galeria-indicadores .indicador {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.6) !important;
  }
  .galeria-indicadores .indicador.active { background: #fff !important; }
}

/* Micro-ajuste teléfonos muy pequeños */
@media (max-width: 520px) {
  .galeria-video video { max-height: 62vh !important; }
  .galeria-foto-slide img { max-height: 64vh !important; }
}

@media (max-width: 820px) {
  .container {
    min-height: unset !important;
    height: auto !important;
    display: block !important;
  }
  .encuesta-box {
    min-height: unset !important;
    height: auto !important;
  }
.galeria-section-img {
    width: 350px !important;
    height: auto !important;
}
.casos-impact-fixed{
  display: none !important;
}

}
@media (max-width: 820px) {
  /* Contenedor general de categorías: sin flex para que el JS pueda ocultarlo con display:none */
  #categorias {
    width: 100%;
    margin: 0 auto;
  }

  /* Grid de 2 columnas iguales y centrado del bloque */
  #categorias-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    max-width: 520px;      /* ancho del bloque centrado */
    margin: 0 auto;        /* centra el grid dentro de la tarjeta */
    justify-items: center; /* centra cada celda */
    align-items: center;
  }

  /* Botones centrados, altura uniforme, permiten 2 líneas si hace falta */
  #categorias-grid .btn-encuesta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    width: 100%;           /* ocupa el ancho de su celda */
    max-width: 240px;      /* no se hacen gigantes */
    min-height: 56px;      /* píldora pareja */
    padding: 10px 18px;
    border-radius: 999px;

    line-height: 1.25;     /* evita que se “aplane” con 2 líneas */
    white-space: normal;   /* permite salto de línea (ej: Telecomunicaciones) */
    word-break: keep-all;
    hyphens: auto;

    /* si el viewport es chico, baja un poco la fuente para textos largos */
    font-size: clamp(14px, 3.4vw, 16px);
  }

  /* El último (“Turismo y Hotelería”) ocupa toda la fila y queda centrado */
  #categorias-grid .btn-encuesta:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 320px;
  }
}

@media (max-width: 820px) {

  /* Contenedor principal del carrusel */
  .galeria-fotos-container {
    position: relative !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto 16px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;     /* bordes redondeados sin “sangrar” */
    background: #000 !important;     /* fondo neutro detrás de la imagen */
  }

  /* Pista de slides: usa posición relativa para apilar slides */
  .galeria-fotos-slider {
    position: relative !important;
    width: 100% !important;
    /* Alto elástico que funciona en todos los móviles */
    min-height: clamp(220px, 56dvh, 80vw) !important;
  }

  /* Cada slide ocupa todo el contenedor y se apila */
  .galeria-foto-slide {
    position: absolute !important;
    inset: 0 !important;                    /* top/right/bottom/left = 0 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease !important;
  }

  /* Solo el activo es visible */
  .galeria-foto-slide.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* La imagen nunca se recorta y queda centrada */
  .galeria-foto-slide img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }
}

@media (max-width: 820px) {
  /* Un único “origen de verdad” para el ancho visible dentro de la tarjeta */
  :root {
    --media-side: 12px;   /* coincide con .galeria { padding: 0 12px } */
    --media-max: 700px;   /* mismo límite que usas para el video */
  }

  /* Asegura el mismo padding lateral para video e imágenes */
  .galeria-section,
  .galeria-section-img {
    /* padding-left: var(--media-side) !important;
    padding-right: var(--media-side) !important; */
    box-sizing: border-box !important;
  }

  /* GALERÍA: igual ancho que el video, centrada y sin desbordes */
  .galeria-fotos-container {
    position: relative !important;
    width: calc(100% - (var(--media-side) * 2)) !important;          /* = video */
    max-width: calc(var(--media-max) - (var(--media-side) * 2)) !important; /* = video */
    margin: 0 auto 16px auto !important;
    box-sizing: border-box !important;

    border-radius: 12px !important;
    overflow: hidden !important;      /* respeta el borde redondeado */
    background: #000 !important;

    /* Evita cortes subpíxel en Safari/iOS al redondear tamaños */
    transform: translateZ(0) !important;
    contain: paint !important;
  }

  /* Pista y slides: una sola imagen visible, centrada */
  .galeria-fotos-slider {
    position: relative !important;
    min-height: clamp(220px, 56dvh, 80vw) !important; /* alto elástico y robusto */
  }
  .galeria-foto-slide {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease !important;
  }
  .galeria-foto-slide.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Imagen: nunca se recorta y queda centrada */
  .galeria-foto-slide img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (max-width: 820px) {
  /* 0) Elimina el ancho fijo heredado */
  .galeria-section-img {
    width: 100% !important;          /* ← adiós 350px */
    max-width: 700px !important;
    padding: 0 !important;
    margin: 0 auto 16px auto !important;
    box-sizing: border-box !important;
  }

  /* 1) Un único padding lateral del bloque que contiene ambos */
  .galeria {
    padding: 0 12px !important;
    box-sizing: border-box !important;
    overflow: clip !important;        /* recorta posibles 1px “traviesos” */
  }

  /* 2) Misma caja para video y galería */
  .galeria-fotos-container {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto 16px auto !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    overflow: hidden !important;      /* evita desborde interior */
    background: #000 !important;
  }

  /* 3) Carrusel: una sola imagen visible, centrada */
  .galeria-fotos-slider {
    position: relative !important;
    min-height: clamp(220px, 56dvh, 80vw) !important;
  }
  .galeria-foto-slide {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease !important;
  }
  .galeria-foto-slide.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .galeria-foto-slide img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }

  /* 4) Por si algún pixel extra intenta salir */
  .encuesta-box { overflow: clip !important; }
}