/* ==========================================================================
   Iván Lucio · Alcaldía de Chimbo 2027-2031
   media.css — ÚNICAMENTE reglas @media (responsive).
   Ningún estilo base vive aquí; solo overrides por breakpoint.
   Breakpoints alineados a los presets de dispositivo de Chrome DevTools:
   ≥1440 escritorio grande · 1200 laptop · 992 tablet horizontal ·
   768 tablet vertical · 480 móvil grande · 360 móvil pequeño
   ========================================================================== */

/* ==========================================================================
   1) ≥1440px — Escritorio grande / monitores anchos
   ========================================================================== */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
  .hero h1 { font-size: 5rem; }
}

/* ==========================================================================
   2) ≤1199px — Laptop / escritorio pequeño
   ========================================================================== */
@media (max-width: 1199px) {
  .primary-nav ul { gap: 1.1rem; }
  .nav-link { font-size: 0.88rem; }
}

/* ==========================================================================
   2b) ≤1099px — El menú (9 enlaces) pasa a hamburguesa
   ========================================================================== */
@media (max-width: 1099px) {
  :root { --header-h: 68px; }

  .header-mobile-actions { display: flex; }
  .nav-toggle { display: flex; }

  .primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    background: var(--blanco);
    padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .primary-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    width: 100%;
  }
  .nav-link { font-size: 1rem; display: block; padding-block: 0.3rem; }
  .nav-cta { width: 100%; justify-content: center; }

  /* Menú inferior: aparece aquí (tablet) y se mantiene en todos los tamaños menores.
     Vuelve a pisar ".nav-link" de arriba porque comparte esa clase (para el scroll-spy). */
  .bottomnav { display: flex; }
  .bottomnav-link { display: flex; font-size: 0.68rem; padding-block: 0; }

  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0)); }
  .back-to-top { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0) + 1rem); }
}

/* ==========================================================================
   3) ≤991px — Tablet horizontal
   ========================================================================== */
@media (max-width: 991px) {
  /* La foto de portada queda tapada por el bloque de texto: el título queda arriba del todo
     y el subtítulo + botón + enlace se agrupan bien abajo del todo, dejando libre el medio
     (donde está la cara del candidato). Truco del "margin-top: auto" en .hero-subtitle: separa
     el grupo de arriba (título) del grupo de abajo (subtítulo, botón, enlace) sin más contenedores.

     El alto YA NO es "115vh" (más que una pantalla: obligaba a bajar para ver el botón).
     Ahora es "lo que queda de pantalla real" = 100% menos el header (fijo arriba) menos el
     menú inferior (fijo abajo, desde ≤1099px): así el título, la foto, el texto y el botón
     entran siempre en la primera pantalla, sin tener que deslizar. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-h) - var(--bottomnav-h));
    min-height: calc(100svh - var(--header-h) - var(--bottomnav-h) - env(safe-area-inset-bottom, 0));
  }
  .eyebrow { display: none; }
  .hero-inner { flex: 1; display: flex; flex-direction: column; padding-bottom: 1rem; }
  .hero-copy { flex: 1; display: flex; flex-direction: column; }
  .hero-subtitle { margin-top: auto; }
  .hero-actions { justify-content: flex-start; }
  .hero-mas { margin-top: 0.6rem; }

  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item { border-bottom: 1px solid rgba(255,255,255,0.08); }

  .horizontes-timeline { grid-template-columns: 1fr 1fr; }
  .horizonte-item:last-child { grid-column: 1 / -1; }

  /* Apiladas (mapa arriba, foto abajo) en vez de lado a lado: el "gap" de 2rem era para
     separarlas en horizontal, no para dejar un salto tan grande en vertical. */
  .mapa-layout { grid-template-columns: 1fr; gap: 0.9rem; }

  .candidato-inner { grid-template-columns: 1fr; }
  .candidato-foto { position: static; max-width: 380px; margin-inline: auto; }

  .destacada-inner { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .noticias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .equipo-card { flex-basis: 170px; }
}

/* ==========================================================================
   4) ≤767px — Tablet vertical / móviles grandes
   ========================================================================== */
@media (max-width: 767px) {
  .section { padding-block: 2.25rem; }
  .section-title { font-size: 1.95rem; margin-bottom: 0.75rem; }
  .section-lead { font-size: 0.96rem; margin-bottom: 1.25rem; }
  .mapa-chips { margin-bottom: 1rem; }

  .stats-bar--banner { height: clamp(48px, 10vw, 58px); gap: 0.6rem; }
  .stats-banner-text { font-size: 1rem; }

  .hero { padding-block: 2.25rem 0; }
  .hero h1 { font-size: 2.6rem; }

  .equipo-grid { gap: 0.75rem; }
  .equipo-card { flex-basis: calc(50% - 0.4rem); max-width: calc(50% - 0.4rem); }
  .equipo-card figcaption { padding: 0.75rem 0.8rem 0.9rem; }
  .equipo-card figcaption strong { font-size: 1.15rem; }
  .equipo-cargo { font-size: 0.75rem; }
  .propuesta-card { flex-basis: 100%; max-width: none; }
  .destacado-card strong { font-size: 2.4rem; }
  .noticias-grid { grid-template-columns: minmax(0, 1fr); }
  .noticia-card--horizontal { grid-column: auto; width: 100%; }
  .noticia-card--vertical { width: 100%; justify-self: center; }
  .hero-subtitle { max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .desafios-grid,
  .objetivos-list,
  .pilares-grid,
  .videos-grid,
  .programas-grid,
  .ejes-grid { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .compromisos-grid { grid-template-columns: 1fr 1fr; }

  .eje-header { padding: 1.25rem; gap: 0.6rem; }
  .eje-header-top { gap: 0.85rem; }
  .eje-icon { width: 44px; height: 44px; }
  .eje-body-inner { padding: 1.25rem; gap: 1.25rem; }

  .mapa-svg-wrap { padding: 0.6rem; }
  #mapa-svg .mapa-pin text { font-size: 28px; }

  .horizontes-timeline { grid-template-columns: 1fr; }
  .horizonte-item:last-child { grid-column: auto; }

  .footer-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-legal { text-align: left; }
}

/* ==========================================================================
   4b) ≤768px — Equipo: cada sección (Concejalía Urbana, Concejalía Rural, Vocales...)
   en una sola fila, para ahorrar alto (320 / 375 / 425 / 768). Si todas las tarjetas caben,
   quedan centradas y quietas (.is-centered, por script.js). Si no caben, script.js las corre
   con JS exactamente lo necesario para revelar la oculta, y vuelve sola: nunca de más,
   nunca deja espacios en blanco (ver wireEquipoMarquee en script.js).
   ========================================================================== */
@media (max-width: 768px) {
  /* "Full-bleed": el carrusel usa el ancho completo de la pantalla, no el del .container
     (que tiene margen a los lados). El padding de adentro compensa para que las cartas no
     queden pegadas al borde. Ojo: es "margin-left", no "transform", a propósito — la
     animación de entrada (equipoIn) ya anima "transform" y lo pisaría al terminar. */
  .equipo-seccion {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  .equipo-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(0.75rem, 3vw, 1.5rem);
    padding-inline: 1.25rem;
  }
  .equipo-grid.is-centered { justify-content: center; }
  .equipo-card { flex: 0 0 150px; max-width: none; }

  /* Los chips de parroquia/grupo, en una sola fila que se desliza sola (mismo truco). */
  .chips-scroll {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  .mapa-chips { flex-wrap: nowrap; padding-inline: 1.25rem; }
  /* Mismo ancho para todos los chips (antes cada uno medía lo que medía su propio texto:
     "San José" quedaba angosto y "La Asunción" ancho, deparejo). Con flex:0 0 <ancho> ya
     no se achican ni se agrandan según el texto, y el texto que no entra en una línea pasa
     a la siguiente (el botón crece de alto, no de ancho). */
  .mapa-chip { flex: 0 0 136px; text-align: center; }
}

/* ==========================================================================
   5) ≤480px — Móvil estándar (iPhone SE / la mayoría de Android)
   ========================================================================== */
@media (max-width: 480px) {
  :root { --header-h: 62px; }

  .section { padding-block: 1.85rem; }
  .section-lead { margin-bottom: 1rem; }

  .brand-text small { display: none; }
  .brand-mark { width: 36px; height: 36px; font-size: 1.05rem; }

  .eyebrow { font-size: 0.72rem; padding: 0.35rem 0.8rem; }
  .hero h1 { font-size: 2.3rem; }
  .hero-subtitle { font-size: 0.92rem; }

  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item { padding: 1.1rem 0.6rem; }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: 0.72rem; }

  /* Antes se ocultaban los cuadros en pantallas angostas; ahora la tira (una sola imagen que
     se repite) se achica sola con la franja, así que se mantiene en todos los tamaños. */
  .stats-bar--banner { height: clamp(36px, 11vw, 48px); gap: 0.5rem; }
  .stats-banner-text { font-size: 0.86rem; }

  .desafio-card { padding: 1.15rem; }
  .potencialidades { padding: 1.15rem 1.25rem; font-size: 0.94rem; }

  .objetivo-general-box p { font-size: 0.95rem; }
  .objetivos-list li { padding: 0.95rem 1rem; }

  .eje-header h3 { font-size: 1.02rem; }
  .eje-ambito { font-size: 0.78rem; }
  .proyecto-chip { font-size: 0.75rem; padding: 0.4rem 0.7rem; }

  .video-caption { font-size: 0.85rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  .compromisos-grid { grid-template-columns: 1fr; }
  .social-list a { width: 40px; height: 40px; }

  .mapa-chip { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
  .mapa-panel { padding: 1.25rem; }
  .mapa-panel-nombre { font-size: 1.2rem; }
  #mapa-svg .mapa-pin text { font-size: 34px; stroke-width: 7px; }

  .back-to-top { right: 0.9rem; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0) + 0.9rem); width: 40px; height: 40px; font-size: 1.05rem; }
}

/* ==========================================================================
   6) ≤360px — Móviles muy pequeños (Galaxy Fold, gama baja)
   ========================================================================== */
@media (max-width: 360px) {
  .container { padding-inline: 1rem; }

  .hero h1 { font-size: 2rem; }
  .hero-subtitle { font-size: 0.86rem; }
  .btn { padding: 0.8rem 1.2rem; font-size: 0.88rem; }

  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 1.2rem; }
  .stat-label { font-size: 0.66rem; }

  .section-title { font-size: 1.7rem; }

  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }

  .contacto-datos li { font-size: 0.86rem; }
  .footer-nav { gap: 0.85rem 1rem; }
}

/* ---------- Accesibilidad: usuarios con preferencia de menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}