/* ═══════════════════════════════════════════════════════
   06-responsive.css — AJG AI Solutions
   All media queries / breakpoints
   ═══════════════════════════════════════════════════════ */


/* ── Large desktop ── */
@media (max-width: 1440px) {
  .hero {
    gap: 38px;
  }
  h1 {
    font-size: clamp(48px, 4.4vw, 72px);
  }
  .hero-copy {
    font-size: 19px;
  }
  .hero-visual-wrap {
    max-width: 560px;
  }
}

/* ── Desktop ── */
@media (max-width: 1280px) {
  h1 { font-size: clamp(28px, 5vw, 36px); }
  .mid-cta-inner { flex-direction: column; text-align: center; padding: 24px 20px; gap: 16px; }
  .mid-cta-inner .btn { width: 100%; text-align: center; white-space: normal; }
  .hero, .problem-grid, .solution-grid, .cases-grid, .cred-grid, .cta-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    gap: 34px;
    min-height: auto;
    padding-bottom: 64px;
  }
  .hero-visual-wrap {
    max-width: 100%;
    margin-left: 0;
    min-height: auto;
    padding-top: 18px;
    border-radius: 0;
  }
  .floating.top {
    width: 100%;
  }
  .system-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .flow-row {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .benefits-grid, .cases-cards, .process-grid, .stack-grid {
    grid-template-columns: 1fr 1fr;
  }
  .problem-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Hide nav at tablet/mobile only ── */
@media (max-width: 1280px) {
  header nav, .top-cta {
    display: none !important;
  }
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .prob-sol-grid { gap: 40px; }
  .prob-sol-right { padding-left: 40px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  h1 { font-size: clamp(2.2rem, 6vw, 3.5rem) !important; }
  h2 { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; }
  .section { padding: 80px 2rem 60px !important; }
  .process-grid { grid-template-columns: repeat(3,1fr) !important; gap: 12px !important; }
  #resultados .process-grid { grid-template-columns: 1fr !important; }
  header { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  body, html { overflow-x: hidden !important; }

  section > .inner {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .process-grid { gap: 12px !important; }
  .cases-cards { grid-template-columns: repeat(2, 1fr) !important; }
  img { max-width: 100%; }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .flow-sticky {
    grid-template-columns: 45% 50% !important;
    gap: 5% !important;
    padding: 0 5% !important;
  }
  .flow-h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  #flow-card-display { padding: 1.8rem !important; min-height: 240px !important; }
  .flow-metrics { gap: 8px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .bento-card { padding: 1rem 1.1rem; }
}

/* ── Small tablet / large mobile ── */
@media (max-width: 900px) {
  .section {
    padding: 64px 2rem 40px;
  }
  .flow-section { height: auto !important; }
  .flow-sticky {
    position: relative !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 60px 20px !important;
    gap: 2rem !important;
  }
  .flow-right { display: none; }
  .flow-indicators { gap: 0 !important; }
  .flow-ind {
    flex-direction: column;
    align-items: flex-start;
    opacity: 1;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .flow-ind-line { display: none; }
  .flow-ind-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    padding-top: 0;
  }
  .flow-ind.open .flow-ind-body {
    max-height: 300px;
    opacity: 1;
    padding-top: 0.75rem;
  }
  .flow-ind.open {
    border-color: rgba(56,189,248,0.25);
    background: rgba(56,189,248,0.04);
  }
  .flow-ind-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(248,251,255,0.6);
    margin-bottom: 0.75rem;
  }
  .flow-ind-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .flow-metrics {
    grid-template-columns: repeat(3, 1fr);
    opacity: 1 !important;
    transform: none !important;
    margin-top: 1.5rem;
    display: grid !important;
  }
  .flow-metric-num { font-size: 1.4rem !important; }
}

/* ── Mobile ── */
@media (max-width: 780px) {
  .problem-cards {
    gap: 10px;
  }
  .problem-card {
    padding: 14px;
    min-height: auto;
    gap: 10px;
  }
  .flow-mobile .flow-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .flow-mobile .flow-metric {
    min-width: 0;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .flow-mobile .flow-metric-num.highlight-grey {
    color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-size: 2rem !important;
  }
  .eyeline {
    max-width: 100%;
    white-space: normal;
    font-size: 11px;
  }
  header {
    padding: 18px 20px 8px;
  }
  .brand-copy .sub {
    white-space: normal;
  }
  .badge {
    max-width: 100%;
    line-height: 1.6;
  }
  h1 {
    font-size: clamp(36px, 10vw, 48px);
  }
  .hero-copy {
    font-size: 17px;
    line-height: 1.6;
  }
  .hero-actions {
    margin-top: 24px;
  }
  .btn {
    width: 100%;
  }
  .hero-chips {
    gap: 8px;
  }
  .chip {
    font-size: 10px;
  }
  .system-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .flow-row {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .metrics, .result-grid, .problem-cards, .benefits-grid, .cases-cards, .process-grid, .stack-grid {
    grid-template-columns: 1fr;
  }
  .step-connector {
    display: none;
  }
  .system-watermark {
    width: 150px;
    right: -8px;
    top: 170px;
  }
  .cta-shell {
    padding: 36px 0;
  }
  .cases-shell {
    padding: 30px 0;
  }
  .problem-shell {
    padding: 30px 0;
  }
  .stack-shell {
    padding: 28px 0;
  }
  .section {
    padding: 52px 20px 32px;
  }
  .system-grid {
    grid-template-columns: 1fr;
  }
  .benefit-card {
    min-height: auto;
  }
  .process-card {
    min-height: auto;
  }
  .prose-lg, .prose-md, .prose-sm {
    max-width: 100%;
  }
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-btn { display: flex; }
  .mobile-nav { display: block; }
  .transform-grid { grid-template-columns: 1fr; }
  .prob-sol-grid { grid-template-columns: 1fr; gap: 40px; }
  .prob-sol-right { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.07); padding-top: 40px; }
}

@media (max-width: 768px) {
  /* Navbar */
  header nav { display: none !important; }
  .top-cta { display: none !important; }
  .menu-btn { display: flex !important; }

  /* Hero */
  .hero { padding-top: 80px !important; }
  .hero-slim { min-height: auto !important; padding: 80px 1.25rem 48px !important; }
  .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* Cards 1 columna */
  .cases-grid,
  .process-grid,
  .cred-grid { grid-template-columns: 1fr !important; }
  .cases-cards { gap: 10px !important; grid-template-columns: 1fr !important; }
  .card, .process-card, .case-card,
  .benefit-card, .result-card { padding: 1.2rem !important; }

  /* Métricas */
  .metrics { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

  /* CTA banner columna */
  .mid-cta-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 24px 20px !important;
    align-items: stretch !important;
  }
  .mid-cta-inner .btn { width: 100% !important; text-align: center !important; min-height: 44px !important; }

  /* Transform grid */
  .transform-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Footer */
  footer, .footer-inner, .footer-grid {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    align-items: center !important;
  }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr !important; }

  /* Section spacing */
  .section { padding: 60px 1.25rem 40px !important; }
  section > .inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Touch targets */
  button, a, [role="button"] { min-height: 44px; }

  /* No overflow */
  body, html { overflow-x: hidden !important; }
  body { max-width: 100vw; }
  body, section { overflow-x: hidden; }

  /* Padding secciones */
  .card, .process-card, .benefit-card, .result-card,
  .action, .mini-item, .faq-item {
    padding: 1.1rem !important;
  }

  /* Bento grid mobile */
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 100%;
    padding: 0 4px;
  }
  .bento-large { grid-column: span 2; }
  .bento-card {
    padding: 0.9rem;
    border-radius: 12px;
  }
  .bento-icon { width: 30px; height: 30px; border-radius: 8px; }
  .bento-icon svg { width: 15px; height: 15px; }
  .bento-name { font-size: 0.85rem; }
  .bento-desc {
    font-size: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bento-badge { font-size: 0.55rem; padding: 2px 6px; }
  .bento-cat { display: none; }

  /* WF fields */
  .wf-fields {
    grid-template-columns: 1fr;
  }

  /* Widget showcase */
  .widget-showcase .system-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .bento-grid { gap: 6px; }
  .bento-card { padding: 0.75rem; }
  .widget-showcase .system-grid { grid-template-columns: 1fr !important; }
}

/* ── Show hamburger at 1280px ── */
@media (max-width: 1280px) {
  .menu-btn { display: flex; }
  .mobile-nav { display: block; }
}

/* ── problema_mobile_grid: 1 columna en mobile ── */
@media (max-width: 640px) {
  .problem-cards { grid-template-columns: 1fr !important; }
}

/* ── faq_una_columna_desktop: 2 columnas en desktop ── */
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: 1fr 1fr; }
}

/* ── herramientas_bento_tablet: 2 columnas en tablet ── */
@media (min-width: 640px) and (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr 1fr !important; }
  .bento-large { grid-column: span 2; }
}

/* ── texto_11px_mobile: mínimo legible en móvil ── */
@media (max-width: 640px) {
  .eyebrow, .micro-label { font-size: 12px; }
  .eyeline { font-size: 12px; }
  .chip { font-size: 11px; }
}

/* ── proceso_flechas_movil: ocultar flechas → en layout de 1 columna ── */
@media (max-width: 780px) {
  .process-arrow { display: none; }
}

/* ── CORRECCIONES MOBILE ── */

/* doble_menu: ocultar nav desktop en mobile con !important */
@media (max-width: 900px) {
  nav, .top-cta { display: none !important; }
}

/* problema_grid_movil: colapsar a 1 columna full-width */
@media (max-width: 768px) {
  .problem-grid { grid-template-columns: 1fr !important; }
  .problem-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
  #problema { padding-top: 72px !important; }
}

/* cards_texto_pequeno: mínimo legible en cards */
@media (max-width: 768px) {
  .pc-text { font-size: 15px !important; line-height: 1.5 !important; text-align: center !important; }
  .problem-card { font-size: 14px !important; }
}

/* hero_tag_ilegible: ocultar etiqueta superior en mobile */
@media (max-width: 480px) {
  .eyeline { display: none !important; }
}

/* scroll_button_flotante: ocultar back-to-top en mobile */
@media (max-width: 768px) {
  .back-to-top { display: none !important; }
}

/* ── DIMENSIONES MOBILE ── */

/* section_padding_movil: padding estándar 80px/24px en secciones */
@media (max-width: 768px) {
  .section { padding: 80px 24px 60px !important; }
  section > .inner { padding-left: 24px !important; padding-right: 24px !important; }
}

/* cards_padding_movil: mínimo 20px de padding en todas las cards */
@media (max-width: 768px) {
  .card, .process-card, .case-card, .benefit-card, .result-card, .problem-card,
  .faq-item, .transform-card, .bento-card { padding: 20px !important; }
}

/* flow_card_padding_movil: padding 20px en cards del flow section */
@media (max-width: 768px) {
  .flow-v2-card-header { padding: 20px 20px 0 !important; }
  .flow-v2-card-visual { padding: 20px 20px 16px !important; }
  .flow-v2-card-body   { padding: 0 20px 20px !important; }
}

/* mid_cta_movil: padding generoso y border-radius en mid-CTA */
@media (max-width: 768px) {
  .mid-cta-inner { padding: 40px 24px !important; border-radius: 24px !important; }
}

/* section_labels_movil: eyebrow labels legibles en mobile */
@media (max-width: 768px) {
  .eyebrow, .micro-label { font-size: 12px !important; letter-spacing: 0.12em !important; }
}

/* botones_cta_movil: altura mínima 56px en botones CTA */
@media (max-width: 768px) {
  .btn { min-height: 56px !important; }
}

/* transform_label_movil: etiquetas ANTES/DESPUÉS legibles en mobile */
@media (max-width: 768px) {
  .transform-label, .before-label, .after-label { font-size: 11px !important; }
}

/* transform_text_movil: texto antes/después con tamaño y espaciado legible */
@media (max-width: 768px) {
  .transform-text { font-size: 14px !important; line-height: 1.7 !important; }
}

/* process_title_movil: título de proceso proporcional al ancho mobile */
@media (max-width: 768px) {
  .process-title { font-size: clamp(20px, 5.5vw, 24px) !important; }
}

/* result_card_min_height: quitar altura mínima fija en 1 columna mobile */
@media (max-width: 768px) {
  .result-card { min-height: 0 !important; }
}

/* footer_padding_movil: reducir margen superior excesivo en mobile */
@media (max-width: 768px) {
  footer { margin-top: 40px !important; padding: 28px 0 32px !important; }
}

/* cta_panel_movil: más aire interno en el panel de formulario final */
@media (max-width: 900px) {
  .cta-panel {
    padding: 16px !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  .cta-panel .btn { font-size: 0.85rem !important; padding: 12px 20px !important; }
}

/* faq_q_movil: preguntas del FAQ con tamaño y altura de línea óptimos */
@media (max-width: 768px) {
  .faq-q { font-size: 15px !important; line-height: 1.45 !important; }
}

/* faq_a_movil: respuestas del acordeón con lectura cómoda en pantalla chica */
@media (max-width: 768px) {
  .faq-a { font-size: 14px !important; line-height: 1.8 !important; }
}

/* hero_copy_size_movil: subtítulo del hero proporcional en pantallas <480px */
@media (max-width: 480px) {
  .hero-copy { font-size: 17px !important; }
}

/* hero_h1_size_movil: h1 más grande para aprovechar el ancho en 360-430px */
@media (max-width: 768px) {
  h1 { font-size: clamp(38px, 11vw, 52px) !important; }
}

/* line_height_body_movil: más espacio entre líneas en textos de lectura */
@media (max-width: 768px) {
  .hero-copy, .flow-card-desc, .pc-text { line-height: 1.7 !important; }
}

/* metric_num_movil: números de métricas con más impacto visual */
@media (max-width: 768px) {
  .flow-metric-num, .metric-num { font-size: 1.75rem !important; }
}

/* hero_badge_movil: badge/chip del hero legible en pantalla chica */
@media (max-width: 768px) {
  .badge, .chip { font-size: 12px !important; }
}

/* pill_tags_movil: pills de tecnología con tamaño mínimo legible */
@media (max-width: 768px) {
  .flow-card-pill, .stack-chip { font-size: 12px !important; }
}

/* gap_sections_movil: separación mínima 12px en todos los grids */
@media (max-width: 768px) {
  .problem-cards, .cases-cards, .process-grid, .transform-grid,
  .benefits-grid, .stack-grid, .faq-grid { gap: 12px !important; }
}

/* herramientas_solo_dos_movil: mostrar solo n8n y Claude Code en mobile */
@media (max-width: 768px) {
  #herramientas .bento-card:not(.bento-large) { display: none !important; }
  #herramientas .bento-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #herramientas .bento-large { grid-column: span 1 !important; min-height: 130px !important; }
}

/* siguiente_paso_movil: layout de 1 columna con espaciado correcto */
@media (max-width: 900px) {
  .cta-shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 32px 0 16px !important;
    border-radius: 20px !important;
  }
  .cta-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 20px !important;
    text-align: left !important;
  }
  .cta-grid .eyebrow { justify-content: flex-start; }
  .cta-grid h2 { font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.2 !important; }
  .cta-grid .section-copy { font-size: 0.85rem !important; }
  .cta-panel { border-radius: 20px !important; }
}

/* ── FLOW SECTION MOBILE ── */
@media (max-width: 768px) {
  /* numero_flow_movil */
  .flow-v2-card-bignum { font-size: clamp(2.8rem, 10vw, 4rem) !important; }
  /* titulo_card_flow_movil */
  .flow-card-title { font-size: clamp(16px, 4.5vw, 20px) !important; }
  /* header_flow_movil */
  .flow-v2-card-header { padding-top: 24px !important; }
  /* titulo_seccion_flow */
  .flow-v2-heading { font-size: clamp(1.6rem, 5.5vw, 2rem) !important; margin-bottom: 8px !important; }
  /* gap_cards_flow_movil */
  .flow-v2-card-wrap { padding-bottom: 1rem !important; }
}

/* seccion_flow_top_movil */
@media (max-width: 768px) {
  #flowSection { padding-top: 60px !important; }
}

/* ── REDUCCION DE CONTENIDO ── */

/* ocultar_transformacion + ocultar_flow_section: mobile + tablet */
@media (max-width: 1024px) {
  #flowSection { display: none !important; }
  /* Resetear el margin negativo que jalaba la sección siguiente al flow */
  #flowSection + .section {
    margin-top: 0 !important;
    padding-top: 80px !important;
  }
  #flowSection + .section::before { display: none !important; }
}

/* reducir_faq_movil: mostrar solo pregunta 1 y 3 en mobile */
@media (max-width: 768px) {
  #faq .faq-grid .faq-item:nth-child(2),
  #faq .faq-grid .faq-item:nth-child(4) { display: none !important; }
}

/* ── flow_invisible_movil: alternativa estática del flow para móvil/tablet ── */
.flow-mobile { display: none; }
@media (max-width: 1024px) {
  .flow-mobile { display: block; }
}

/* ── flow_tablet_grid: 2 columnas en tablet (640–1024px) ── */
@media (min-width: 640px) and (max-width: 1024px) {
  .flow-mobile-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .flow-mobile .flow-metrics {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

.flow-mobile-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flow-mobile-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(10,22,40,0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.flow-mobile-num {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #dde9ff 0%, #35d8ff 30%, #1e50d0 60%, #35d8ff 85%, #dde9ff 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-gradient 6s ease-in-out infinite;
  flex-shrink: 0;
  width: 44px;
  padding-top: 2px;
}

.flow-mobile-content {
  flex: 1;
  min-width: 0;
}

/* ── problema_cards_larga: ocultar cards 3 y 4 en mobile ── */
@media (max-width: 768px) {
  .problem-card-mobile-hide { display: none !important; }
}
/* problem-card-mobile-only: solo visible en mobile ── */
.problem-card-mobile-only { display: none !important; }
@media (max-width: 780px) {
  .problem-card-mobile-only { display: flex !important; }
}

/* ── proceso_muy_largo_movil: reducir tamaño del número y padding ── */
@media (max-width: 768px) {
  .process-num { font-size: clamp(2.8rem, 9vw, 4.5rem) !important; }
  .process-card { min-height: auto !important; padding: 18px !important; }
  #proceso { padding-top: 52px !important; }
}