/* ======= RESPONSIVE — SEPHORA EDITION ======= */

@media (max-width: 1024px) {
  .sp-about-inner { grid-template-columns: 1fr; gap: 48px; }
  .sp-img-frame img { height: 450px; }
  .sp-about-float-card { bottom: -20px; right: 20px; }
  .sp-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .sp-gallery-tall { grid-row: span 1; }
  .sp-gallery-wide { grid-column: span 1; }
  .sp-gallery-item img { height: 260px; }
  .sp-offer-inner {
    grid-template-columns: 1fr;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
  }
  .sp-offer-visual { min-height: 320px; }
  .sp-cards-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
  }
  .sp-about-inner {
    grid-template-columns: 1fr;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    gap: 48px !important;
  }
  .sp-product-card { width: 100% !important; }
  .sp-benefits-inner {
    grid-template-columns: repeat(2, 1fr);
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  .sp-benefit-card {
    width: calc(50% - 12px) !important;
    -webkit-flex: 0 0 calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
  }
  .sj-nav { padding: 16px 24px; }
  .sj-nav .nav-links { gap: 20px; }
  .sp-about, .sp-programs, .sp-reviews { padding: 100px 32px; }
  .sp-reviews { padding-left: 0; padding-right: 0; }
  .sp-offer, .sp-benefits, .sp-gallery { padding: 80px 32px; }
}

@media (max-width: 640px) {
  /* Nav */
  .sj-nav .nav-links a:not(.nav-cta) { display: none; }
  .sj-nav .logo img { height: 48px; }
  .nav-cta { padding: 8px 20px; font-size: 11px; }

  /* Hero */
  .sp-hero-content { padding: 0 20px; }
  .sp-hero-badge { font-size: 10px; letter-spacing: 0.2em; gap: 10px; margin-bottom: 24px; }
  .sp-badge-line { width: 30px; }
  .sp-title-line:first-child { font-size: 22px; }
  .sp-title-accent { font-size: 48px; }
  .sp-title-small { font-size: 16px; }
  .sp-hero-sub { font-size: 14px; margin: 20px auto 32px; max-width: 100%; }
  .sp-hero-cta { font-size: 12px; }
  .sp-cta-text { padding: 14px 20px 14px 24px; }
  .sp-cta-arrow { width: 44px; height: 44px; }
  .sp-hero-proof { flex-direction: row; gap: 10px; }
  .sp-proof-avatars img { width: 28px; height: 28px; }
  .sp-proof-text { font-size: 12px; }

  /* Marquee stats */
  .sp-marquee { padding: 14px 0; }
  .sp-marquee-item { font-size: 11px; }
  .sp-marquee-item strong { font-size: 14px; }
  .sp-marquee-track { gap: 28px; }

  /* About — force stack for Chrome mobile */
  .sp-about { padding: 60px 20px; }
  .sp-about-inner {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    gap: 36px !important;
  }
  .sp-img-frame img { height: 360px; }
  .sp-about-float-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: -30px;
    margin-left: 16px;
    display: inline-block;
    padding: 20px 28px;
  }
  .sp-float-number { font-size: 36px; }
  .sp-float-label { font-size: 11px; }
  .sp-about-title { font-size: 28px; }
  .sp-about-desc { font-size: 15px; }
  .sp-section-tag { font-size: 10px; letter-spacing: 0.2em; }
  .sp-tag-line { width: 28px; }
  .sp-about-highlights { gap: 16px; margin-top: 28px; }
  .sp-highlight { padding: 14px 16px; gap: 14px; }
  .sp-highlight-icon { width: 40px; height: 40px; }
  .sp-highlight-icon svg { width: 20px; height: 20px; }
  .sp-highlight-title { font-size: 14px; }
  .sp-highlight-sub { font-size: 12px; }

  /* Gallery */
  .sp-gallery { padding: 0 8px; }
  .sp-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 4px;
  }
  .sp-gallery-tall { grid-row: span 1; }
  .sp-gallery-wide { grid-column: span 1; }
  .sp-gallery-item img { height: 160px; }

  /* Offer — force stack on Chrome mobile */
  .sp-offer { padding: 48px 12px; }
  .sp-offer-inner {
    border-radius: 12px;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
  }
  .sp-offer-visual { min-height: 240px; }
  .sp-offer-content { padding: 28px 20px; }
  .sp-offer-tag { font-size: 10px; margin-bottom: 12px; }
  .sp-offer-title { font-size: 24px; margin-bottom: 14px; }
  .sp-offer-desc { font-size: 14px; margin-bottom: 20px; }
  .sp-offer-bullets { gap: 10px; margin-bottom: 28px; }
  .sp-bullet { font-size: 13px; gap: 10px; }
  .sp-bullet svg { width: 16px; height: 16px; flex-shrink: 0; }
  .sp-offer-cta {
    width: 100%;
    justify-content: center;
    padding: 16px 28px;
    font-size: 12px;
    border-radius: 50px;
  }
  .sp-offer-urgency { font-size: 11px; margin-top: 16px; }

  /* Programs — force single column on all mobile browsers */
  .sp-programs { padding: 60px 16px; }
  .sp-section-header { margin-bottom: 40px; }
  .sp-section-title { font-size: 32px; }
  .sp-section-sub { font-size: 14px; }
  .sp-cards-grid {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    gap: 20px !important;
    max-width: 100% !important;
  }
  .sp-product-card { width: 100% !important; }
  .sp-card-img { height: 200px; }
  .sp-card-body { padding: 24px 20px; }
  .sp-card-tag { font-size: 9px; padding: 4px 12px; }
  .sp-card-name { font-size: 22px; }
  .sp-card-price { font-size: 26px; margin-bottom: 12px; }
  .sp-card-price small { font-size: 13px; }
  .sp-card-desc { font-size: 13px; margin-bottom: 16px; }
  .sp-card-features { margin-bottom: 24px; }
  .sp-card-features li { font-size: 12px; padding: 7px 0; gap: 8px; }
  .sp-card-features li::before { width: 5px; height: 5px; }
  .sp-card-btn { padding: 14px; font-size: 12px; }
  .sp-card-ribbon { font-size: 9px; padding: 5px 36px; top: 16px; right: -36px; }

  /* Benefits — force 2-col with flexbox for Chrome compat */
  .sp-benefits { padding: 48px 16px; }
  .sp-benefits-inner {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .sp-benefit-card {
    width: calc(50% - 6px) !important;
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    padding: 24px 14px;
  }
  .sp-benefit-icon { width: 48px; height: 48px; margin-bottom: 16px; }
  .sp-benefit-icon svg { width: 24px; height: 24px; }
  .sp-benefit-card h3 { font-size: 15px; margin-bottom: 8px; }
  .sp-benefit-card p { font-size: 12px; line-height: 1.5; }

  /* Reviews marquee */
  .sp-reviews { padding: 60px 0 48px; }
  .sp-reviews .sp-section-header { padding: 0 20px !important; margin-bottom: 32px; }
  .sp-review-card { width: 280px; padding: 24px; border-radius: 12px; }
  .sp-review-stars { margin-bottom: 14px; }
  .sp-review-stars svg { width: 12px; height: 12px; }
  .sp-review-text { font-size: 14px; margin-bottom: 18px; line-height: 1.6; }
  .sp-review-author { gap: 10px; padding-top: 16px; }
  .sp-review-author img { width: 36px; height: 36px; }
  .sp-review-name { font-size: 13px; }
  .sp-review-role { font-size: 11px; }
  .sp-review-marquee { padding: 8px 0; }

  /* Final CTA */
  .sp-final-cta { min-height: 50vh; }
  .sp-final-content { padding: 48px 20px; }
  .sp-final-title { font-size: 28px; }
  .sp-final-sub { font-size: 15px; margin-bottom: 36px; }
  .sp-cta-large { font-size: 12px; }
  .sp-cta-large .sp-cta-text { padding: 14px 20px 14px 24px; }
  .sp-cta-large .sp-cta-arrow { width: 44px; height: 44px; }

  /* Footer */
  .sp-footer { padding: 48px 20px 28px; }
  .sp-footer-logo img { height: 36px; }
  .sp-footer-logo { margin-bottom: 24px; }
  .sp-footer-links { flex-direction: column; gap: 14px; margin-bottom: 20px; }
  .sp-footer-links a { font-size: 12px; }
  .sp-footer-social { flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .sp-footer-social a { font-size: 12px; }
  .sp-footer-copy { font-size: 11px; }

  /* Form responsive (descubrimiento) */
  #view-form .fv-card-header { padding: 24px 20px; }
  #view-form .fv-card-body { padding: 24px 20px; }
  #view-form .fv-card-footer { padding: 0 20px 24px; }
  #view-form .fv-form-row { grid-template-columns: 1fr; }
  #view-form .fv-card-header-text h1 { font-size: 18px; }
  #view-form .fv-avatar { width: 44px; height: 44px; font-size: 18px; }

  /* Video responsive (clase) */
  #view-video .vv-header h1 { font-size: 22px; }
  #view-video .vv-overlay { padding: 8px 10px; }
  #view-video .vv-icon-circle { width: 38px; height: 38px; margin-bottom: 6px; }
  #view-video .vv-icon-circle svg { width: 16px; height: 16px; }
  #view-video .vv-overlay h2 { font-size: 14px; margin-bottom: 3px; }
  #view-video .vv-overlay p { font-size: 10px; margin-bottom: 10px; line-height: 1.3; max-width: 220px; }
  #view-video .vv-btn-cta { padding: 9px 16px; font-size: 9px; gap: 5px; letter-spacing: 0.04em; }
  #view-video .vv-btn-cta svg { width: 12px; height: 12px; }
  #view-video .vv-btn-continue { font-size: 10px; margin-top: 5px; margin-bottom: 48px; }
}