/* ==========================================================================
   MOBILE-ENHANCEMENTS.CSS v1.0
   Mejoras de diseño móvil para MANEXT
   Se carga DESPUÉS de style.css para sobrescribir reglas existentes
   ========================================================================== */

/* ==========================================================================
   SECCIÓN 1: Fixes globales (todas las pantallas)
   ========================================================================== */

/* Prevenir zoom en iOS al enfocar inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
select,
textarea {
  font-size: 16px;
}

/* Touch targets mínimos de 44px (Apple HIG) */
body .btn,
body .nav-link,
body .dropdown-toggle,
body .pagination-btn,
body .pagination-number,
body .filter-btn,
body .blog-read-more,
body .widget-cta-btn,
body .share-btn {
  min-height: 44px;
}

/* Footer links con mejor área de tap */
footer .footer-col p a {
  display: inline-block;
  padding: 0.3rem 0;
}

/* ==========================================================================
   SECCIÓN 2: Tablet (max-width: 1024px)
   ========================================================================== */

@media screen and (max-width: 1024px) {
  body .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  body .hero-grid {
    gap: 2.5rem;
  }

  body .service-detail-image {
    height: 380px;
  }
}

/* ==========================================================================
   SECCIÓN 3: Móvil (max-width: 768px)
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* --- Top Info Bar: Compactar --- */
  body .top-info-bar {
    padding: 0.25rem 0;
    font-size: 0.75rem;
  }

  body .top-info-bar-left {
    display: none;
  }

  body .top-info-bar-right {
    justify-content: center;
    gap: 0.75rem;
  }

  body .top-info-item svg {
    width: 14px;
    height: 14px;
  }

  /* --- Logo más pequeño --- */
  body .logo-img {
    height: 80px !important;
  }

  /* --- Header/Navbar --- */
  body .header {
    padding: 0.25rem 0;
  }

  body .navbar {
    padding: 0.5rem 0;
  }

  /* --- Hero Section --- */
  body .hero {
    padding: 2rem 0;
  }

  body .hero-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.2;
  }

  body .hero-subtitle {
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    line-height: 1.4;
  }

  body .hero-description {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  body .hero-paragraph {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  /* Hero botones full width */
  body .hero-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  body .hero-buttons .btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    text-align: center;
  }

  /* --- Imágenes de servicios --- */
  body .service-detail-image {
    height: auto !important;
    min-height: 200px;
    max-height: 280px;
  }

  /* --- Benefits Grid --- */
  body .benefits-grid {
    gap: 1rem;
  }

  body .benefit-card {
    padding: 1.25rem;
  }

  body .benefit-card h3 {
    font-size: 1rem;
  }

  /* --- Section Headers --- */
  body .section-header h2,
  body .section-title,
  body h2.section-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  body .section-subtitle {
    font-size: 0.95rem;
  }

  body .section-header {
    margin-bottom: 2rem;
  }

  /* --- Footer 1 columna --- */
  body .footer-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  body .footer-col h4 {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
  }

  body .footer-bottom {
    padding: 1.25rem 16px;
  }

  body .footer-bottom p {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  body .footer-bottom-container {
    gap: 0.5rem;
  }

  /* --- Formularios --- */
  body .form-row {
    flex-direction: column;
    gap: 1rem;
  }

  body .form-group input,
  body .form-group select,
  body .form-group textarea {
    padding: 0.875rem 1rem;
    width: 100%;
  }

  body .btn-submit,
  body button[type="submit"] {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
    justify-content: center;
  }

  /* --- Breadcrumbs --- */
  body .breadcrumb-list {
    font-size: 0.8rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
  }

  /* --- Timeline (Nosotros) --- */
  body .nosotros-historia {
    padding: 2.5rem 0;
  }

  body .nosotros-intro {
    padding: 2.5rem 0;
  }

  body .timeline-item {
    gap: 1rem;
  }

  body .timeline-content {
    padding: 1.25rem;
  }

  body .timeline-content h3 {
    font-size: 1.15rem;
  }

  body .timeline-content p {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  /* --- Catálogo: filtros con wrap en vez de scroll --- */
  body .category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow-x: visible;
    padding-bottom: 0;
    -webkit-overflow-scrolling: auto;
  }

  body .filter-btn {
    flex: 0 0 auto;
    padding: 0.6rem 0.9rem;
    font-size: 0.8rem;
    border-radius: 25px;
  }

  /* --- CTA sections --- */
  body .cta-buttons,
  body .cta-inline-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }

  body .cta-buttons .btn,
  body .cta-inline-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Certificaciones badges --- */
  body .certificaciones-badges {
    gap: 1.25rem;
  }

  body .cert-icon {
    width: 90px;
    height: 90px;
  }

  /* --- Blog cards --- */
  body .blog-card-content {
    padding: 1.25rem;
  }

  body .blog-card-title {
    font-size: 1.15rem;
    line-height: 1.35;
  }

  body .blog-card-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  body .blog-meta {
    font-size: 0.8rem;
    gap: 1rem;
  }

  /* --- Productos grid --- */
  body .products-grid {
    gap: 1rem;
  }

  body .product-card {
    border-radius: 10px;
  }

  /* --- Container padding --- */
  body .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --- FAQ accordion --- */
  body .faq-question {
    padding: 1rem;
    font-size: 0.95rem;
    min-height: 48px;
  }

  body .faq-answer {
    padding: 0 1rem 1rem;
    font-size: 0.9rem;
  }

  /* --- Menú móvil: mejor spacing de items --- */
  body .nav-menu .nav-link {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  body .dropdown-menu a {
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   SECCIÓN 4: Móvil pequeño (max-width: 600px)
   ========================================================================== */

@media screen and (max-width: 600px) {

  /* Top bar: solo teléfono visible */
  body .top-info-item:nth-child(2),
  body .top-info-item:nth-child(3) {
    display: none;
  }

  body .top-social-links {
    display: none;
  }

  /* Servicio imágenes más compactas */
  body .service-detail-image {
    max-height: 220px;
  }

  /* Productos 1 columna */
  body .products-grid {
    grid-template-columns: 1fr;
  }

  /* Certificaciones */
  body .certificaciones-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  body .cert-icon {
    width: 80px;
    height: 80px;
  }

  body .cert-label {
    font-size: 0.85rem;
  }

  /* Blog pagination compacta */
  body .pagination-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  body .pagination-number {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  /* Contacto info cards */
  body .location-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ==========================================================================
   SECCIÓN 5: Móvil muy pequeño (max-width: 480px)
   ========================================================================== */

@media screen and (max-width: 480px) {

  /* Logo aún más pequeño */
  body .logo-img {
    height: 64px !important;
  }

  /* Hero text más compacto */
  body .hero-title {
    font-size: 1.35rem !important;
    line-height: 1.2;
  }

  body .hero-subtitle {
    font-size: 0.95rem !important;
  }

  body .hero-description,
  body .hero-paragraph {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  body .hero {
    padding: 1.5rem 0;
  }

  /* Section headers */
  body .section-header h2,
  body .section-title,
  body h2.section-title {
    font-size: 1.3rem;
  }

  body .section-subtitle {
    font-size: 0.85rem;
  }

  /* Reducir padding de secciones */
  body .benefits {
    padding: 2rem 0;
  }

  body .services-detail {
    padding: 1.5rem 0;
  }

  body .nosotros-historia,
  body .nosotros-certificaciones,
  body .nosotros-intro {
    padding: 2rem 0;
  }

  /* Service detail más compacto */
  body .service-detail-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    gap: 1.5rem;
  }

  body .service-detail-content h3 {
    font-size: 1.35rem;
  }

  body .services-intro-header h3 {
    font-size: 1.4rem;
  }

  /* Timeline extra compacto */
  body .timeline-item {
    grid-template-columns: 45px 1fr;
    gap: 0.75rem;
  }

  body .timeline-icon img {
    width: 45px;
    height: 45px;
  }

  body .historia-timeline::before {
    left: 22px;
  }

  body .timeline-content {
    padding: 1rem;
  }

  body .timeline-content h3 {
    font-size: 1.05rem;
  }

  body .timeline-year {
    font-size: 0.75rem;
    padding: 0.35rem 1rem;
  }

  /* Blog article titles */
  body .blog-post-title,
  body .article-header h1,
  body .article-title {
    font-size: 1.5rem !important;
    line-height: 1.25;
  }

  /* Footer centrado */
  body .footer-col {
    text-align: center;
  }

  body .footer-bottom p {
    font-size: 0.8rem;
  }

  /* Container padding reducido */
  body .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Botones más compactos */
  body .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  /* Benefit cards */
  body .benefit-card {
    padding: 1rem;
  }

  body .benefit-icon svg {
    width: 36px;
    height: 36px;
  }

  /* Contact form compacto */
  body .contact-form {
    padding: 1.5rem;
  }

  body .contact-info h2 {
    font-size: 1.3rem;
  }

  /* Info cards */
  body .info-card-header h3 {
    font-size: 1.05rem;
  }

  /* Blog cards */
  body .blog-card-content {
    padding: 1rem;
  }

  body .blog-card-title {
    font-size: 1.05rem;
  }

  body .blog-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  /* Sidebar widgets */
  body .sidebar-widget {
    padding: 1.25rem;
  }

  /* Catalog CTA */
  body .catalog-cta-final {
    padding: 2rem 0;
  }

  body .catalog-cta-final h2 {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   SECCIÓN 6: Pantallas tiny (max-width: 360px)
   ========================================================================== */

@media screen and (max-width: 360px) {

  body .hero-title {
    font-size: 1.2rem !important;
  }

  body .hero-subtitle {
    font-size: 0.85rem !important;
  }

  body .logo-img {
    height: 56px !important;
  }

  body .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
  }

  body .section-header h2,
  body .section-title {
    font-size: 1.15rem;
  }

  body .blog-card-title {
    font-size: 1rem;
  }

  body .service-detail-content h3 {
    font-size: 1.2rem;
  }

  body .timeline-item {
    grid-template-columns: 38px 1fr;
    gap: 0.5rem;
  }

  body .timeline-icon img {
    width: 38px;
    height: 38px;
  }

  body .historia-timeline::before {
    left: 19px;
  }

  body .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  body .benefit-card {
    padding: 0.875rem;
  }

  body .footer-col h4 {
    font-size: 1rem;
  }
}