/* mobile.css — Consolidado y limpio (creado automáticamente
   Contiene solo estilos móviles y breakpoints claros.
   Breakpoints principales: 992px, 768px, 480px, 420px
*/

/* ---------------------------------------
   Breakpoint: tablet grande / small desktop
   (ancho máximo 992px)
   --------------------------------------- */
@media (max-width: 992px) {

  /* Hero: limitar ancho del contenido y ajustar tipografías */
  .hero-content {
    max-width: 90%;
    margin: 0 auto;
    padding: 1.5rem 0;
  }

  .hero-text h1 {
    font-size: 3.8rem;
  }

  .hero-text .subtitle {
    font-size: 1.8rem;
  }

  .hero-image-container {
    display: none; /* ocultar imágenes decorativas si perturban layout */
  }

  /* Timeline: apilar y ajustar espacios */
  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }

  .timeline-date {
    margin-right: 0;
    margin-bottom: 1rem;
    width: auto;
    align-self: flex-start;
  }

  .timeline-content {
    margin-left: 0;
    width: 100%;
  }

  /* Sobre el programa: tarjetas en columna centradas */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    justify-items: center;
    width: 100%;
    margin: 0 auto;
  }

  .about-card {
    width: 92%;
    max-width: 460px;
    margin: 0 auto;
    padding: 1.2rem;
    box-sizing: border-box;
  }

  .program-description p { text-align: center; }

  /* Formularios y secciones generales */
  .section { padding: 3.5rem 1rem; }
  .section h2 { font-size: 2.8rem; }
}

/* ---------------------------------------
   Breakpoint: tablets / móviles grandes
   (ancho máximo 768px)
   --------------------------------------- */
@media (max-width: 768px) {

  /* HERO - usar dvh para altura en móviles y centrar contenido */
  .hero {
    height: 100vh;
    min-height: auto;   /* Anular min-height del desktop */
    padding: 2rem 0;
    background: url('../img/Banner desktopmobile-02-02.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .hero-content {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
  }
  /*Imagen del hero logo de la campaña*/
  .hero-suptitle-logo,
  .hero img.logo {
    width: 30dvh;
    height: auto;
    display: block;
    margin: 0 auto 0.6rem;
    object-fit: contain;
  }

  .hero-text h1 {
    font-size: clamp(1.6rem, 7.5vw, 2.6rem);
    line-height: 1.04;
    margin: 0 0 0.2rem;
  }

  .hero-text .subtitle {
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    margin-bottom: 0.35rem;
  }

  .hero-text .manifesto {
    font-size: clamp(0.9rem, 3.6vw, 1rem);
    padding: 0 0.6rem;
    max-width: 92%;
    margin: 0 auto;
  }

  /* Botones: limitar ancho y centrar */
  .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 1rem;
    padding: 0 1rem;
  }

  .cta-primary,
  .cta-secondary,
  #download-bases {
    display: inline-block;
    width: auto;
    max-width: 86%;
    padding: 0.8rem 1.6rem;
    margin: 0.6rem auto;
    text-align: center;
  }

  /* Ajustes para grids de requisitos y items */
  .requirements-grid,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 auto;
  }

  .requirement-item,
  .about-card {
    padding: 1.2rem;
  }

  /* Formularios */
  .application-form { padding: 1.2rem; margin: 0 0.5rem; }
  .form-section h2 { font-size: 2.2rem; }
}

/* ---------------------------------------
   Breakpoint: móviles (ancho máximo 480px)
   --------------------------------------- */
@media (max-width: 480px) {

  /* Hero más compacto en ancho y tipografías */
  .hero-text h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
  }

  .hero-text .subtitle {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }

  .hero-text .manifesto {
    font-size: 1rem;
    margin-bottom: 1.2rem;
    padding: 0 0.6rem;
  }

  .cta-primary {
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
  }

  .nav-links a { font-size: 0.8rem; padding: 6px 8px; }

  .about-card,
  .requirement-item {
    width: 94%;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
  }

  /* Timeline: simplificado para pantallas muy pequeñas */
  .timeline-container { padding-left: 40px; padding-right: 20px; margin-top: 3rem; }
  .timeline-item { flex-direction: column !important; align-items: flex-start !important; margin-bottom: 4rem; padding: 1.5rem 1rem; background: transparent; box-shadow: none; }
  .timeline-date { font-size: 0.9rem; padding: 0.6rem 0.9rem; width: auto; max-width: 160px; box-shadow: 0 3px 10px rgba(74,155,62,0.25); }

  .timeline-content {
    width: 100%;
    border-left: 3px solid var(--prisma-yellow) !important;
    border-right: none !important;
    padding: 1.5rem 1rem;
    margin: 0 !important;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  }

  /* FAQ y formulario */
  .faq-question, .faq-answer { font-size: 0.95rem; padding: 0.9rem 1rem; }
  .form-group input, .form-group textarea, .form-group select { font-size: 0.9rem; padding: 0.7rem; border-radius: 6px; }
  .submit-btn { font-size: 1rem; padding: 0.8rem 1.6rem; margin-top: 1rem; }

  /* Footer compacto */
  .footer { padding: 2rem 1rem; }
  .footer .logos { gap: 1rem; margin-bottom: 1rem; }
  .footer .logo-img { height: 55px !important; max-width: 130px !important; }
}

/* ---------------------------------------
   Breakpoint: muy pequeños (ancho máximo 420px)
   Ajustes finos para teléfonos estrechos
   --------------------------------------- */
@media (max-width: 420px) {
  .hero { 
    height: 100vh;
    min-height: auto;
    background-position: 65% center; /* Ajustar posición para dispositivos pequeños */
    background-size: cover;
  }
  .hero-text h1 { font-size: clamp(1.4rem, 8.5vw, 2.2rem); }
  .hero-text .manifesto { font-size: 0.95rem; }
  .cta-primary { padding: 0.7rem 1.2rem; font-size: 0.95rem; }
  .about-card { width: 94%; padding: 0.9rem; }
  .section { padding: 2.5rem 0.8rem; }
  
  /* Ajustes footer para pantallas muy pequeñas */
  .footer { padding: 1.8rem 0.8rem; }
  .footer .logos { gap: 0.7rem; }
  .footer .logo-img { height: 45px !important; max-width: 100px !important; padding: 4px 8px !important; }
}

/* Ajustes responsivos para el bloque de formulario CTA */
.cta-google-form-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 94%;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
    box-sizing: border-box;
}

.cta-google-form-inner p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--prisma-white);
    max-width: 680px;
}

/* Botones dentro del bloque: ocupan el ancho disponible pero con límite */
.cta-google-form-inner .cta-primary,
.cta-google-form-inner .cta-secondary {
    width: 100%;
    max-width: 420px;
    padding: 14px 20px;
    font-size: 1.05rem;
    border-radius: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Si usas icono + texto, mantener espacio */
.cta-google-form-inner .cta-secondary i,
.cta-google-form-inner .cta-primary i {
    margin-right: 8px;
    font-size: 1.05em;
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 420px) {
    .cta-google-form-inner {
        padding: 0.8rem;
        gap: 10px;
    }

    .cta-google-form-inner p {
        font-size: 0.95rem;
    }

    .cta-google-form-inner .cta-primary,
    .cta-google-form-inner .cta-secondary {
        max-width: 92%;
        padding: 12px 16px;
        font-size: 0.98rem;
        border-radius: 32px;
    }
}

/* FIN - mobile.css consolidado */