/* Optimización Móvil Completa - Página Paneles Solares */

/* ========================================
   1. HERO SECTION - Optimización de espacio e imagen
   ======================================== */
@media (max-width: 640px) {
  /* Hero Section más compacto con altura optimizada */
  section.relative.pt-24 {
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
    min-height: 65vh !important;
    max-height: 65vh !important;
  }

  /* Contenedor de imagen del hero - asegurar cobertura completa */
  section.relative.pt-24 > .absolute.inset-0 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Imagen del hero - cubrir todo el espacio correctamente */
  section.relative.pt-24 > .absolute.inset-0 > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Overlay gradient - asegurar que cubra toda la imagen */
  section.relative.pt-24 > .absolute.inset-0.bg-gradient-to-br {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }

  /* Contenido del hero - asegurar que esté por encima */
  section.relative.pt-24 > .container-zonit {
    position: relative !important;
    z-index: 10 !important;
  }

  /* Breadcrumb más compacto */
  section.relative.pt-24 nav.text-sm {
    margin-bottom: 1rem !important;
    font-size: 0.75rem !important;
  }

  /* Título hero más compacto */
  section.relative.pt-24 h1 {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
  }

  /* Descripción hero más compacta */
  section.relative.pt-24 p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    padding: 0 1rem !important;
  }
}

/* ========================================
   2. SECCIÓN "SISTEMAS FOTOVOLTAICOS" - Primera sección de contenido
   ======================================== */
@media (max-width: 640px) {
  /* Sección con padding generoso para respirar */
  section.py-20.bg-white:first-of-type {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Título principal - grande y con espacio abajo */
  section.py-20.bg-white h2 {
    font-size: 1.5rem !important; /* 24px - más grande */
    margin-bottom: 1.25rem !important; /* Más espacio */
    line-height: 1.3 !important;
    padding-bottom: 0.5rem !important; /* Espacio adicional */
  }

  /* Párrafos con buen espaciado y legibilidad */
  section.py-20.bg-white p.text-lg {
    font-size: 0.9375rem !important; /* 15px - más legible */
    line-height: 1.7 !important; /* Más espacio entre líneas */
    margin-bottom: 1.25rem !important; /* Más espacio entre párrafos */
    color: #374151 !important; /* Gris oscuro para mejor lectura */
  }

  /* Segundo párrafo - espacio extra antes de la lista */
  section.py-20.bg-white p.text-lg:nth-of-type(2) {
    margin-bottom: 2rem !important; /* MÁS espacio debajo del segundo párrafo */
    padding-bottom: 0.5rem !important; /* Padding adicional */
  }

  /* Grid de 2 columnas con espaciado generoso */
  section.py-20.bg-white .grid.lg\\:grid-cols-2 {
    gap: 2rem !important; /* Más espacio entre columnas */
  }

  /* Espacio entre elementos del contenedor */
  section.py-20.bg-white .space-y-6 {
    gap: 1.75rem !important; /* MÁS espacio entre bloques */
  }

  /* Lista de beneficios con MUCHO más espaciado */
  section.py-20.bg-white .space-y-3 {
    gap: 1rem !important; /* MÁS espacio entre items de lista */
    margin-top: 2rem !important; /* MÁS espacio arriba de la lista */
    padding-top: 0.5rem !important; /* Padding adicional arriba */
  }

  section.py-20.bg-white .space-y-3 .flex {
    font-size: 0.875rem !important; /* 14px - legible */
    line-height: 1.7 !important; /* MÁS espacio entre líneas */
    padding: 0.375rem 0 !important; /* MÁS padding vertical para cada item */
    margin-bottom: 0.25rem !important; /* Espacio adicional entre items */
  }

  section.py-20.bg-white .space-y-3 .w-2.h-2 {
    width: 0.4375rem !important; /* Bullets ligeramente más grandes */
    height: 0.4375rem !important;
    flex-shrink: 0 !important;
    margin-top: 0.5rem !important; /* Alineación con texto */
  }

  /* Imagen con mejor presentación */
  section.py-20.bg-white .relative img {
    border-radius: 0.75rem !important;
    margin-top: 1rem !important; /* Espacio arriba si hay imagen */
  }
}

/* ========================================
   3. SECCIÓN "BENEFICIOS DE LA ENERGÍA SOLAR"
   ======================================== */
@media (max-width: 640px) {
  /* Reducir padding de sección */
  section.py-20.bg-white:nth-of-type(2) {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Encabezado más compacto */
  section.py-20.bg-white:nth-of-type(2) .text-center.mb-12 {
    margin-bottom: 1.25rem !important;
  }

  section.py-20.bg-white:nth-of-type(2) h2 {
    font-size: 1.375rem !important;
    margin-bottom: 0.5rem !important;
  }

  section.py-20.bg-white:nth-of-type(2) .text-center p {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    padding: 0 1rem !important;
  }

  /* Cards de beneficios en 1 columna compacta */
  section.py-20.bg-white:nth-of-type(2) .grid.md\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  section.py-20.bg-white:nth-of-type(2) .card-zonit {
    padding: 1.25rem !important;
  }

  /* Iconos más pequeños */
  section.py-20.bg-white:nth-of-type(2) .w-16.h-16 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  section.py-20.bg-white:nth-of-type(2) .w-16.h-16 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Títulos de cards más compactos */
  section.py-20.bg-white:nth-of-type(2) h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Texto de cards más compacto */
  section.py-20.bg-white:nth-of-type(2) .card-zonit p {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
  }
}

/* ========================================
   4. SECCIÓN "¿CÓMO RECUPERAS TU INVERSIÓN?" (Fondo oscuro)
   ======================================== */
@media (max-width: 640px) {
  /* Reducir padding */
  section.py-20.bg-secondary {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Contenedor más compacto */
  section.py-20.bg-secondary .max-w-4xl {
    padding: 0 1rem !important;
  }

  /* Título más compacto */
  section.py-20.bg-secondary h2 {
    font-size: 1.375rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
  }

  /* Párrafo introductorio más compacto */
  section.py-20.bg-secondary .mb-12 {
    margin-bottom: 1rem !important;
  }

  section.py-20.bg-secondary p.text-lg {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
  }

  /* Grid de 2 cards en 1 columna */
  section.py-20.bg-secondary .grid.md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
  }

  section.py-20.bg-secondary .card-zonit {
    padding: 1.25rem !important;
  }

  /* Iconos más pequeños */
  section.py-20.bg-secondary .w-16.h-16 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  section.py-20.bg-secondary .w-16.h-16 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Títulos más compactos */
  section.py-20.bg-secondary h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Texto más compacto */
  section.py-20.bg-secondary .card-zonit p {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
  }
}

/* ========================================
   5. SECCIÓN "PASOS PARA COMENZAR"
   ======================================== */
@media (max-width: 640px) {
  /* Reducir padding */
  section.py-20.bg-white:nth-of-type(3) {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Encabezado más compacto */
  section.py-20.bg-white:nth-of-type(3) .text-center.mb-12 {
    margin-bottom: 1.25rem !important;
  }

  section.py-20.bg-white:nth-of-type(3) h2 {
    font-size: 1.375rem !important;
    margin-bottom: 0.5rem !important;
  }

  section.py-20.bg-white:nth-of-type(3) .text-center p {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
  }

  /* Cards en 1 columna compacta */
  section.py-20.bg-white:nth-of-type(3) .grid.md\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  section.py-20.bg-white:nth-of-type(3) .card-zonit {
    padding: 1.25rem !important;
  }

  /* Iconos más pequeños */
  section.py-20.bg-white:nth-of-type(3) .w-16.h-16 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  section.py-20.bg-white:nth-of-type(3) .w-16.h-16 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Títulos más compactos */
  section.py-20.bg-white:nth-of-type(3) h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Texto más compacto */
  section.py-20.bg-white:nth-of-type(3) .card-zonit p {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
  }
}

/* ========================================
   6. SECCIÓN CTA "COMIENZA A AHORRAR HOY"
   ======================================== */
@media (max-width: 640px) {
  /* Reducir padding */
  section.bg-primary.py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Título más compacto */
  section.bg-primary.py-12 h2 {
    font-size: 1.375rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
  }

  /* Párrafo más compacto */
  section.bg-primary.py-12 p {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.25rem !important;
  }

  /* Botón más compacto */
  section.bg-primary.py-12 .btn-primary {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
  }
}

/* ========================================
   7. FOOTER - Optimización mobile
   ======================================== */
@media (max-width: 640px) {
  /* Footer más compacto */
  footer.bg-primary {
    padding-top: 1.75rem !important;
    padding-bottom: 1.25rem !important;
  }

  /* Grid en 2 columnas */
  footer .grid.grid-cols-1 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Primera columna (logo) ocupa todo el ancho */
  footer .grid > div:first-child {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }

  /* Títulos más compactos */
  footer h3 {
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
  }

  footer h4 {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Texto más compacto */
  footer p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.625rem !important;
  }

  /* Redes sociales centradas */
  footer .flex.space-x-4 {
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  footer .flex.space-x-4 a {
    padding: 0.375rem !important;
  }

  footer .flex.space-x-4 svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Links más compactos */
  footer ul li a {
    padding: 0.25rem 0.375rem !important;
    font-size: 0.75rem !important;
  }

  /* Información de contacto compacta */
  footer .space-y-2 {
    gap: 0.25rem !important;
  }

  footer .space-y-2 > div {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  footer .space-y-2 svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  /* Botón footer */
  footer .btn-primary {
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
  }

  /* Ocultar sección Empresa en móvil */
  footer .grid > div:nth-child(3) {
    display: none !important;
  }

  /* Sección de Contacto ocupa toda la fila */
  footer .grid > div:nth-child(4) {
    grid-column: 1 / -1 !important;
  }

  /* Socio comercial compacto */
  footer .border-t.border-gray-700.mt-8 {
    margin-top: 1rem !important;
    padding-top: 0.75rem !important;
  }

  footer .inline-flex.items-center.space-x-2 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.25rem 0.375rem !important;
    font-size: 0.6875rem !important;
  }

  /* Copyright compacto */
  footer .border-t.border-gray-700.pt-8 {
    padding-top: 0.75rem !important;
    margin-top: 0.5rem !important;
  }

  footer .border-t.border-gray-700.pt-8 p {
    font-size: 0.625rem !important;
  }
}

/* ========================================
   8. BOTÓN WHATSAPP - Optimización móvil
   ======================================== */
@media (max-width: 640px) {
  /* Botón WhatsApp más pequeño */
  .fixed.bottom-4.right-4 a {
    width: 3rem !important;
    height: 3rem !important;
  }

  .fixed.bottom-4.right-4 svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  /* Ocultar tooltip en móvil */
  .fixed.bottom-4.right-4 .absolute.bottom-full {
    display: none !important;
  }
}

/* ========================================
   9. AJUSTES GENERALES DE CONTENEDORES
   ======================================== */
@media (max-width: 640px) {
  /* Container más compacto */
  .container-zonit {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reducir márgenes innecesarios */
  .space-y-6 > * + * {
    margin-top: 1rem !important;
  }

  .space-y-3 > * + * {
    margin-top: 0.5rem !important;
  }

  /* Imágenes responsivas */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ========================================
   10. PANTALLAS MUY PEQUEÑAS (< 375px)
   ======================================== */
@media (max-width: 375px) {
  /* Hero aún más compacto */
  section.relative.pt-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 1.75rem !important;
  }

  section.relative.pt-24 h1 {
    font-size: 1.5rem !important;
  }

  section.relative.pt-24 p {
    font-size: 0.8125rem !important;
  }

  /* Todas las secciones más compactas */
  section.py-20 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  /* Títulos principales más pequeños */
  h2 {
    font-size: 1.25rem !important;
  }

  h3 {
    font-size: 0.9375rem !important;
  }

  /* Texto más pequeño */
  p {
    font-size: 0.75rem !important;
  }

  /* Cards ultra compactos */
  .card-zonit {
    padding: 1rem !important;
  }

  /* Botones más pequeños */
  .btn-primary {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.8125rem !important;
  }
}