/* =======================
   STYLES.CSS - Versión Final Corregida
   ======================= */

:root {
  --color-primary: #006CB5;
  --color-secondary: #4CAF50;
  --color-white: #ffffff;
  --text-on-light: #333333;
  --text-on-dark: #f7f6f6;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --border-radius: 6px;
  --container-max: 1200px;
  --color-header-start: #004a99;
  --color-header-end: #007ac1;
  --color-body-start: #f0f4f8;
  --color-body-end: #d9e2ec;
  --color-footer-start: #002f4b;
  --color-footer-end: #004e92;
}

/* 1. RESET CRÍTICO PARA MÓVIL */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Evita que el padding ensanche los divs */
}

html, body {
  max-width: 100%;
  overflow-x: hidden; /* Prohibido el scroll lateral */
  width: 100%;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--color-body-start), var(--color-body-end));
}

/* 2. CONTENEDORES FLEXIBLES */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/* 3. HEADER Y NAVEGACIÓN */
header {
  background: linear-gradient(90deg, var(--color-header-start), var(--color-header-end));
  padding: var(--space-sm) 0;
  position: relative;
  z-index: 1000;
}

.matrix-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.matrix-header .logo img {
  height: 40px; /* Reducido para móvil */
  width: auto;
}

/* Título responsivo */
.matrix-header h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-white);
  text-align: center;
  margin: 0 10px;
}

/* Menú Principal Desktop */
.menu-principal {
  list-style: none;
  display: flex;
  gap: 15px;
  align-items: center;
}

.menu-principal a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  transition: background 0.3s;
}

/* 4. LAYOUT PRINCIPAL (EL ERROR ESTABA AQUÍ) */
.main-container {
  flex: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-sm);
  display: grid;
  grid-template-columns: 2fr 1fr; /* Desktop */
  gap: var(--space-lg);
}

/* 5. TARJETAS DE SERVICIOS */
.card-container-3d {
  width: 100%;
  perspective: 1000px;
  margin-bottom: var(--space-sm);
}

.animated-section {
  background: var(--color-white);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: var(--text-on-light);
  transform-style: preserve-3d;
}

/* 6. FORMULARIO DE CONTACTO (EL ERROR ESTABA AQUÍ) */
.form-container {
  background: var(--color-white);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: var(--text-on-light);
  width: 100%; /* Ocupa el ancho de su columna */
  height: fit-content;
  position: sticky;
  top: 100px;
}

.form-container input, 
.form-container textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* ==========================================================
   SECCIÓN RESPONSIVA MÓVIL (CORRECCIÓN TOTAL)
   ========================================================== */

@media (max-width: 850px) {
  /* Forzar columna única */
  .main-container {
    grid-template-columns: 1fr !important;
    padding: var(--space-sm);
  }

  /* Título arriba del logo o centrado */
  .matrix-header {
    flex-wrap: wrap;
  }

  .matrix-header h2 {
    width: 100%;
    order: 3;
    margin-top: 10px;
    font-size: 1rem;
  }

  /* Botón Hamburguesa */
  .hamburger {
    display: block;
    font-size: 2rem;
    order: 2;
  }

  /* Menú desplegable */
  .menu-principal {
    display: none; /* Se activa con la clase .active via JS */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-header-start);
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }

  .menu-principal.active {
    display: flex;
  }

  /* Desactivar efectos 3D en móvil para evitar saltos de pantalla */
  .animated-section {
    transform: none !important;
    transition: none !important;
  }

  /* Formulario al final de los servicios */
  .form-container {
    position: static;
    max-width: 100%;
    margin-top: 20px;
  }

  /* Hero responsivo */
  .hero-content h1 {
    font-size: 1.8rem;
  }

  /* Ajuste de ReCaptcha para que no rompa el ancho */
  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}

/* Footer y Chat */
.chat-section {
  z-index: 2000;
}

@media (max-width: 480px) {
  .footer-links {
    gap: 10px;
  }
  .footer-links a img {
    width: 32px;
    height: 32px;
  }
}