/* RESPONSIVE CSS SIMPLE Y SEGURO */

/* ============================================
   RESPONSIVE BÁSICO PARA MÓVILES
   ============================================ */

/* Solo aplicar cambios en móviles pequeños */
@media screen and (max-width: 768px) {
  
  /* Header y logo más pequeños */
  #header h1 {
    font-size: 50px !important;
  }
  
  #header h1 img {
    max-height: 120px !important;
  }
  
  #header p {
    font-size: 0.9em !important;
  }
  
  /* Banner responsive */
  #banner h2 {
    font-size: 2em !important;
  }
  
  #banner p {
    font-size: 1em !important;
    padding: 0 20px !important;
  }
  
  #banner .actions .button {
    display: block !important;
    width: 90% !important;
    margin: 10px auto !important;
    text-align: center !important;
  }
  
  /* Servicios en una columna */
  .row .col-4 {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  .service-card {
    margin: 0 20px 20px 20px !important;
  }
  
  /* Newsletter responsive */
  #four .row .col-6 {
    width: 100% !important;
    margin-bottom: 15px !important;
  }
  
  #four input[type="text"],
  #four input[type="email"],
  #four input[type="submit"] {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  
  /* Carousel más pequeño */
  .carousel-slide img {
    height: 250px !important;
  }
  
  .carousel-caption h3 {
    font-size: 1.2em !important;
  }
  
  .carousel-caption p {
    font-size: 0.9em !important;
  }
  
  /* Padding general para móviles */
  .container {
    padding: 0 15px !important;
  }
  
  /* Footer responsive */
  #footer .row .col-6 {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================
   RESPONSIVE PARA TABLETS
   ============================================ */

@media screen and (max-width: 1024px) and (min-width: 769px) {
  
  /* Servicios en 2 columnas para tablets */
  .row .col-4:nth-child(3n) {
    width: 50% !important;
  }
  
  .row .col-4:nth-child(even) {
    width: 50% !important;
  }
  
  /* Ajustar carousel para tablet */
  .carousel-slide img {
    height: 300px !important;
  }
}

/* ============================================
   MEJORAS GENERALES
   ============================================ */

/* Asegurar que las imágenes no se desborden */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Evitar scroll horizontal */
body {
  overflow-x: hidden !important;
}

/* Mejorar legibilidad en móviles */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.3 !important;
  }
}