@media (max-width: 768px) {

  .header-container {
    height: 70px;
  }

  .nav {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: #121212;
    transform: translateY(-120%);
    transition: transform 0.35s ease;
    z-index: var(--z-overlay);
  }

  .nav.active {
    transform: translateY(0);
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
  }

  .nav-link {
    font-size: 1.25rem;
    width: 100%;
    padding: 0.5rem 0;
  }

  .nav-toggle {
    display: flex;
  }
}
/* ==============================
   HERO MOBILE
   ============================== */
   @media (max-width: 768px) {

    .hero {
      min-height: 85vh;
      padding-top: 80px;
    }
  
    .hero-content {
      text-align: left;
    }
  
    .hero-title {
      font-size: 2.2rem;
      line-height: 1.15;
    }
  
    .hero-text {
      font-size: 1rem;
      margin-bottom: var(--space-lg);
    }
  
    .hero-actions {
      flex-direction: column;
      gap: var(--space-sm);
    }
  
    .hero-actions .btn {
      width: 100%;
    }
  }
/* ==============================
   SERVICES MOBILE
   ============================== */
   @media (max-width: 768px) {

    .service-card img {
      height: 140px;
    }
  
    .service-card h3 {
      font-size: 1.1rem;
    }
  }
/* ==============================
   TRUST MOBILE
   ============================== */
   @media (max-width: 768px) {

    .trust-grid {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
      text-align: center;
    }
  
    .trust-item img {
      margin: 0 auto var(--space-sm);
    }
  }
/* ==============================
   SECTION SPACING MOBILE
   ============================== */
   @media (max-width: 768px) {

    .section {
      padding: var(--space-3xl) 0;
    }
  }
        /* ==============================
   ABOUT MOBILE
   ============================== */
@media (max-width: 768px) {

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about-content {
    text-align: center;
  }
}
/* ==============================
   GALLERY MOBILE
   ============================== */
   @media (max-width: 768px) {

    .gallery-grid {
      grid-template-columns: 1fr;
    }
  
    .gallery-item img {
      height: 200px;
    }
  }
  /* --- PEGAR AL FINAL DE CSS --- */

/* 1. Estilos Base (Para computadora) */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Izquierda pequeña, derecha grande */
  gap: 3rem;
  align-items: start;
}

.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Nombre y Apellido en una línea */
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  margin-bottom: 1rem; /* Espacio automático abajo de cada input */
}

/* Evitar doble margen en el grupo de fila */
.form-group-row .form-input {
  margin-bottom: 0;
}

/* 2. Estilos Móviles (Para celular) */
@media (max-width: 768px) {
  .contact-wrapper {
    grid-template-columns: 1fr; /* ¡AQUÍ ESTÁ EL TRUCO! Una sola columna */
    gap: 2rem;
  }

  .contact-sidebar {
    text-align: center;
    order: -1; /* Pone los datos de contacto arriba del formulario */
    margin-bottom: 1rem;
  }

  .form-group-row {
    grid-template-columns: 1fr; /* Nombre arriba, Apellido abajo */
    gap: 1rem;
  }
}
/* --- PEGAR AL FINAL DE assets/css/responsive.css --- */

@media (max-width: 768px) {
  
  /* 1. TEXTOS MÁS GRANDES EN CELULAR */
  .hero-title {
    font-size: 2.4rem !important;
    line-height: 1.1 !important;
  }
  
  .hero-text {
    font-size: 1.1rem !important;
  }

  /* 2. FORMULARIO CÓMODO (1 sola columna) */
  .contact-wrapper {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Pone el mapa y teléfono PRIMERO, luego el formulario */
  .contact-sidebar {
    order: -1 !important; 
    margin-bottom: 1rem !important;
  }

  /* Inputs grandes para dedos en pantalla táctil */
  .form-input {
    height: 50px !important;
    font-size: 16px !important; /* Evita zoom automático en iPhone */
    margin-bottom: 15px !important;
  }
  
  .form-group-row {
    grid-template-columns: 1fr !important; /* Nombre y apellido uno bajo el otro */
  }

  /* 3. SEPARACIÓN DE SECCIONES */
  .section {
    padding: 3rem 0 !important;
  }
}
/* --- AJUSTE FINAL DE ENCUADRE --- */
@media (max-width: 768px) {
  /* Bloqueamos cualquier movimiento lateral del cuerpo */
  html, body {
      overflow-x: hidden !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
  }

  /* Forzamos el contenedor a no exceder la pantalla */
  .container {
      max-width: 100vw !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box !important;
  }

  /* RE-ENCUADRE DE TARJETAS FLOTANTES */
  .cards-floating {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
      align-items: stretch !important;
      gap: 5px !important;
      width: 100% !important;
      margin: 20px 0 !important;
      position: static !important;
      transform: none !important;
  }

  .floating-card {
      flex: 1 !important;
      min-width: 0 !important; /* Clave para que no empujen hacia afuera */
      padding: 10px 4px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
  }

  /* Ajustamos el texto para que NO desborde la caja */
  .floating-card h4 {
      font-size: 0.65rem !important;
      line-height: 1.1 !important;
      width: 100% !important;
      word-wrap: break-word !important;
  }

  .floating-card p {
      font-size: 0.55rem !important;
      line-height: 1.1 !important;
      width: 100% !important;
      word-wrap: break-word !important;
  }

  .floating-card img {
      width: 25px !important;
      height: 25px !important;
      flex-shrink: 0 !important;
  }
}