/* ==========================================================================
   Francisco Nasich — Responsive (Media Queries globales)
   Tablet ≤900px · Mobile ≤640px · Mobile pequeño ≤380px · prefers-reduced-motion
   Mobile Sticky CTA
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE — Mobile first
   ========================================================================== */

/* Tablet */
@media (max-width: 900px) {
  /* Igual que en mobile: el centrado vertical en 100svh genera gap enorme */
  .hero-section {
    align-items: flex-start;
  }

  #problema .pain-grid {
    grid-template-columns: 1fr;
  }

  #problema .pain-reality {
    padding: 28px;
  }

  .final-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pain-grid { flex-direction: column; gap: 16px; }
  /* flex: 0 0 auto evita que el flex-basis:0 del desktop reparta la altura del
     contenedor entre las dos cards y recorte el contenido con overflow:hidden */
  .pain-col { flex: 0 0 auto; padding: var(--space-md) var(--space-md); max-width: none; height: auto; }
  .pain-section { padding-bottom: var(--space-2xl); }

  /* Mobile: columna única + sticky apilado (sin panel visual) */
  .h-step {
    grid-template-columns: 1fr;
    min-height: auto;
    margin-bottom: 16px;
    border-radius: var(--r-md);
  }
  /* Top más compacto para mobile (nav más delgada) */
  .h-step:nth-child(1) { top: 86px; }
  .h-step:nth-child(2) { top: 98px; margin-bottom: 0; }
  .h-step-content { padding: 28px 24px; }
  .h-step-visual { display: none; }
  .h-step-head { gap: 10px; margin-bottom: 14px; }
  .h-step-num { font-size: 40px; }
  .h-step h3 { font-size: 17px; }

  .video-container {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-sm);
  }

  /* Hero video vuelve a 16:9 en mobile */
  .hero-right .video-container {
    aspect-ratio: 16 / 9;
  }

  .sound-toggle-overlay {
    padding: 20px 16px;
  }

  .about-i { grid-template-columns: 1fr; gap: 48px; }

  .offer-grid { grid-template-columns: 1fr; }

  .ba-grid {
    flex-direction: column;
    align-items: center;
  }

  .ba-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --space-md: 20px;
    --space-xl: 64px;
    --space-2xl: 72px;
  }

  .nav-i { padding: 12px var(--space-md); }

  .nav-btn {
    font-size: 13px;
    padding: 9px 16px;
  }

  /* En mobile el centrado vertical genera gap gigante — alinear desde arriba */
  .hero-section {
    align-items: flex-start;
    min-height: auto;
  }

  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;  /* sin named areas → order toma control */
    padding-top: 48px; /* nav mobile real ~44px + 4px aire */
    padding-bottom: 16px;
    gap: 22px;
  }

  /* Resetear grid-area explícito para que order funcione */
  .hero-left   { grid-area: auto; align-self: auto; }
  .hero-bottom { grid-area: auto; }

  /* display:contents desenvuelve .hero-right → sus hijos son grid children directos */
  .hero-right { display: contents; }

  /* Orden mobile: tag → título → subtítulo → video → badges → CTA */
  .hero-tag-wrap      { order: 1; }
  .hero-left          { order: 2; }
  .hero-video-section { order: 3; flex: none; }
  .hero-bottom        { order: 4; }

  .hero-tag-wrap { justify-self: center; width: 100%; display: flex; justify-content: center; }
  .hero-tag { text-align: center; justify-content: center; margin-left: auto; margin-right: auto; }

  /* Video vuelve a 16:9 en mobile, altura automática */
  .video-container.hero-video-container {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  /* Centrar contenido en mobile */
  .hero-content    { text-align: center; align-items: center; }
  .hero-text-group { align-items: center; text-align: center; }
  .hero-text-group .hero-title,
  .hero-text-group .hero-sub { text-align: center; }
  .hero-tag        { margin-left: auto; margin-right: auto; }
  .pill-label-desktop { display: none; }
  .pill-label-mobile  { display: inline; }
  .hero-cta-wrap   { justify-content: center; }

  /* Badges en mobile — tamaño compacto para que el texto entre sin cortarse */
  .hero-pain-pills { gap: 10px; }
  .hero-pill-trigger { padding: 4px 10px 4px 4px; }
  .hero-pill-left { padding: 4px 10px 4px 4px; gap: 5px; margin-right: 8px; }
  .hero-pill-avatar { width: 22px; height: 22px; }
  .hero-pill-avatar svg { width: 13px; height: 13px; }
  .hero-pill-name { font-size: 10.5px; }
  .hero-pill-label { font-size: 10.5px; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.35; }
  .hero-pill-chevron svg { width: 12px; height: 12px; }
  .hero-pill-chevron { margin-left: 6px; }
  .hero-bottom { gap: 20px; }

  .testimonial {
    padding-top: 32px;
  }

  .test-header p {
    font-size: 15px;
  }

  .pain-intro p,
  .about-p {
    font-size: 15px;
  }

  .hero-title {
    font-size: clamp(32px, 9vw, 44px);
    letter-spacing: -0.04em;
    line-height: 1.07;
    margin-bottom: 14px;
  }

  .hero-tag {
    padding: 8px 12px 8px 12px;
    font-size: 12px;
    gap: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* la grid gap (28px) gestiona el espacio */
  }

  .hero-tag-desktop { display: none; }
  .hero-tag-mobile { display: inline; }

  .hero-sub {
    font-size: clamp(15px, 4.3vw, 18px);
    line-height: 1.6;
  }

  .btn-gold {
    background: linear-gradient(135deg, #ff6e2f 0%, #fe426a 100%);
    border: none;
    animation: none;
  }

  .btn-gold--lg {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px 28px;
    font-size: 15px;
  }

  .option-card .btn-gold {
    width: auto;
    align-self: center;
  }

  #problema {
    padding: var(--space-2xl) var(--space-md);
  }

  #problema .pain-header h2 {
    font-size: 24px;
  }

  #problema .pain-reality {
    padding: 24px;
  }

  .final {
    padding: var(--space-2xl) var(--space-md);
  }

  .final h2 {
    font-size: 26px;
    margin-bottom: 28px;
  }

  .option-card {
    padding: 26px 22px;
  }

  .pain-col h3 { font-size: 16px; }

  /* Pain col — accordion en mobile */
  .pain-col {
    padding: 18px 20px;
  }

  .pain-col-trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    width: 100%;
  }

  .pain-col-trigger:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .pain-col-header {
    flex: 1;
    min-width: 0;
  }

  /* h3 sin margen inferior dentro del trigger (el body gestiona el espacio) */
  .pain-col-trigger .pain-col-header h3 {
    margin-bottom: 0;
  }

  .pain-col-chevron {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    color: var(--orange);
    opacity: 0.72;
    transition: transform 0.32s ease;
    margin-top: 22px; /* alinear visualmente con el h3 */
  }

  .pain-col.open .pain-col-chevron {
    transform: rotate(180deg);
  }

  /* Cuerpo colapsado por defecto */
  .pain-col-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  /* Separador superior cuando el body se expande */
  .pain-col.open .pain-col-body {
    max-height: 900px;
    padding-top: 16px;
  }

  /* Desactivar hover lift en mobile (la card ya reacciona al tap) */
  .pain-col:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }

  .test-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .t-metric { padding: 18px; }

  .t-metric .num { font-size: 32px; }

  .test-narrative {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }

  .test-narrative-block { padding: 22px 20px; }

  .test-quote { padding: 28px 22px; }

  .test-quote::before { font-size: 86px; top: -6px; left: 16px; }

  .o-card { padding: 32px 22px; }

  .footer-i {
    flex-direction: column;
    text-align: center;
  }

  .f-links { justify-content: center; }
}

/* Mobile pequeño */
@media (max-width: 380px) {
  .hero-title { font-size: 24px; }
  .test-metrics { grid-template-columns: 1fr; }
  .hero-pill-name  { font-size: 9.5px; }
  .hero-pill-label { font-size: 9.5px; }
  .hero-pill-left  { padding: 4px 8px 4px 4px; gap: 4px; margin-right: 6px; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fi,
  .hero-content,
  .hero-video-section,
  .hero-tag-wrap,
  .hero-bottom,
  .hero-tag::before {
    animation: none;
    transition: none;
  }
  .fi { opacity: 1; transform: none; }
  .hero-video-section { opacity: 1; transform: none; }
  .hero-tag-wrap { opacity: 1; transform: none; }
  .hero-bottom { opacity: 1; transform: none; }
  .hero-content { animation: none; opacity: 1; transform: none; }
  .btn-gold { animation: none; }
  .card-glow { display: none; }
  /* Pill sin animación → simplemente aparece */
  nav.is-compact .nav-i {
    animation: none;
    filter: none;
  }
}

/* ==========================================================================
   ADD-ONS responsive (mayo 2026)
   - Mobile: carrusel horizontal de pills (Gastón/Romina)
   - Mobile: activar before/after slider, ocultar ba-grid
   - Mobile: cupos badge centrado
   ========================================================================== */

@media (max-width: 640px) {
  /* Carrusel horizontal de Gastón/Romina en mobile — scroll-snap */
  .hero-pain-pills {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    gap: 10px;
    padding-bottom: 6px;
    margin: 0 calc(var(--space-md) * -1); /* sangrado al borde para indicar scroll */
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    -webkit-overflow-scrolling: touch;
  }

  .hero-pain-pills::-webkit-scrollbar { display: none; }
  .hero-pain-pills { scrollbar-width: none; }

  .hero-pain-pill {
    flex: 0 0 auto;
    min-width: 86%;
    max-width: 92%;
    scroll-snap-align: start;
  }

  .hero-pill-detail p {
    /* Más espacio para leer en el contexto de carrusel */
    margin-top: 4px;
  }

  /* Ocultar el grid 2-cols antes/después y mostrar el slider interactivo */
  .ba-section .ba-grid { display: none; }
  .ba-slider { display: block; }

  /* CTA wrap + cupos centrados */
  .hero-cta-wrap { justify-content: center; flex-direction: column; align-items: center; }

  /* Centrar el cupos-badge cuando es hijo directo del hero-bottom o el offer */
  .hero-bottom .cupos-badge,
  .offer-i .cupos-badge {
    align-self: center;
  }
}