/* ==========================================================================
   Vector Límbico — Landing
   responsive.css — overrides de layout por breakpoint (mobile-first)
   Tablet: >=768px  |  Desktop: >=1280px
   ========================================================================== */

/* ==================== TABLET (>=768px) ==================== */
@media (min-width: 768px) {
  h1 { font-size: 46px; }
  h2 { font-size: 32px; }

  /* Fase 8.7 (H2+H3+U11): tablet/desktop no tenían el problema de
     visibilidad del CTA (confirmado en Fase 8.2), así que se restauran
     aquí los valores originales de padding y tamaño del gráfico del
     Hero que se redujeron solo para la base mobile-first. */
  .hero { padding: var(--space-8) 0; }
  .hero-inner { gap: var(--space-6); }
  .hero-visual svg { max-width: 420px; }
  /* Fase 8.7.2: el ajuste de margen entre los dos párrafos del
     subheadline (necesario para 360x800) no hacía falta en tablet/desktop
     — hay margen de sobra ahí. Se restaura el espaciado por defecto. */
  .hero .subheadline { margin-bottom: 17px; }
  .hero .subheadline + .subheadline { margin-top: 17px; }

  .sectores-secundarios { grid-template-columns: 1fr 1fr; }
  .servicios-grid { grid-template-columns: 1fr 1fr; }
  .flow-grid { grid-template-columns: 1fr 1fr; }

  .cta-group { flex-direction: row; }
  .cta-group .btn { width: auto; }

  .cta-final-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-final-text { flex: 1.4; }
  .cta-final-form { flex: 1; max-width: 360px; }
}

/* ==================== TABLET SOLO (768px–1279px) ====================
   Fase 8.7 (corrección H4): el Método VECTOR no tenía una disposición
   propia para tablet — heredaba la columna vertical de mobile. Se agrega
   una grilla de 2 columnas × 3 filas (V-E / C-T / O-R, en el mismo orden
   que ya existe en el HTML) acotada a este rango exacto para que no
   interfiera con la fila en zigzag que ya existe en desktop (>=1280px).
   Nombres, contenido y jerarquía del Método no se tocan. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  /* Fase 8.7.1 (corrección H16): en 1024x768 el CTA del Hero quedaba 17px
     fuera del primer viewport (Hero sigue apilado en columna en este
     rango, igual que mobile, ya que el layout de fila 60/40 recién
     empieza en desktop >=1280px). Se reduce solo el tamaño del gráfico
     conceptual en este rango — no se toca H1, kicker, subheadline, CTAs,
     ni el padding/gap del Hero. Ahorra ~90px de alto (315px→225px),
     bastante más de lo estrictamente necesario para tener margen real. */
  .hero-visual svg { max-width: 260px; }

  .metodo-timeline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-6);
    border-left: none;
    padding-left: 0;
  }
  .metodo-step {
    border-left: 2px solid var(--color-gray);
    padding-left: var(--space-3);
  }
  .metodo-step::before {
    left: -6px;
    top: 4px;
  }
}

/* ==================== DESKTOP (>=1280px) ==================== */
@media (min-width: 1280px) {
  :root { --section-padding-y: var(--space-12); }

  h1 { font-size: 60px; }

  .container { padding-inline: var(--space-4); }

  /* Header completo */
  .main-nav { display: block; }
  .main-nav ul { display: flex; gap: var(--space-4); }
  /* Header siempre oscuro (correcciones #1/#6): el texto de nav no
     necesita variante para fondo claro. */
  .main-nav a { text-decoration: none; color: var(--color-white); font-weight: 500; font-size: 15px; }
  .header-actions .btn-primary.btn-small { display: inline-flex; }
  .menu-toggle { display: none; }

  /* Hero 60/40 */
  .hero-inner { flex-direction: row; align-items: center; gap: var(--space-8); }
  .hero-text { flex: 0 0 58%; max-width: none; }
  .hero-visual { order: 0; flex: 0 0 38%; }
  .cta-group { flex-direction: row; }
  .cta-group .btn { width: auto; }

  /* Fase 8.7 (corrección H6, ajuste): el rebalanceo de columnas del
     formulario se acotó a 768–1279px. Como el bloque de tablet (min-width
     :768px) no tiene límite superior, sus reglas seguían aplicando aquí
     también y esto achicaba el formulario en desktop sin que hubiera sido
     un problema ahí (confirmado en Fase 8.2: 748/420 se veía bien). Se
     restauran explícitamente los valores originales de desktop. */
  .cta-final-text { flex: 1; }
  .cta-final-form { max-width: 420px; }

  /* Solución: 4 columnas con línea conectora horizontal */
  .flow-grid {
    grid-template-columns: repeat(4, 1fr);
    position: relative;
  }
  .flow-grid::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-gray);
  }

  /* Sectores: grid asimétrico 60/40 */
  .sectores-grid {
    grid-template-columns: 3fr 2fr;
    align-items: stretch;
  }
  .sector-card.principal { display: flex; flex-direction: column; justify-content: center; }
  .sectores-secundarios { grid-template-columns: 1fr; }

  /* Servicios 3x2 */
  .servicios-grid { grid-template-columns: repeat(3, 1fr); }

  /* Método VECTOR: timeline horizontal en zigzag */
  .metodo-timeline {
    flex-direction: row;
    border-left: none;
    padding-left: 0;
    border-top: 2px solid var(--color-gray);
    padding-top: var(--space-4);
    gap: var(--space-2);
  }
  .metodo-step {
    flex: 1;
    padding-top: 0;
  }
  .metodo-step::before {
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
  }
  .metodo-step:nth-child(even) { margin-top: var(--space-6); }

  /* Footer en columnas */
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}