/* ============================================================
   CICA LIFE — Responsive (mobile-first)
   Centraliza TODAS las media queries del proyecto.
   Breakpoints: xs 375 / sm 428 / md 768 / lg 1024 / xl 1280
   Requiere: variables.css cargado antes
   ============================================================ */

/* ----------------------------------------------------------
   GLOBAL — Inputs / touch targets / fluid type
   ---------------------------------------------------------- */

/* Evita zoom automático en iOS Safari (font-size < 16px) */
input,
select,
textarea {
  font-size: max(16px, var(--font-size-small));
}

/* Touch targets accesibles */
.btn,
.calc-sex-btn,
.calc-amount-btn,
.calc-tab,
.section-faq__question,
.navbar__cta,
.calc-step3-title + .form-field input {
  min-height: 44px;
}

/* Tipografía fluida para headlines principales */
.section-hero__headline,
.calc-headline,
.section-cta-close__headline {
  font-size: clamp(28px, 8vw, var(--font-size-h1-desktop));
}

.section-hook__headline,
.section-benefits__headline,
.section-proof__headline,
.section-how__headline,
.section-faq__headline {
  font-size: clamp(24px, 6vw, var(--font-size-h2-desktop));
}

/* ----------------------------------------------------------
   NAVBAR
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar__container {
    height: 56px;
  }

  .navbar__logo-img {
    height: 28px;
  }
}

@media (min-width: 1024px) {
  .navbar__container {
    height: 72px;
  }

  .navbar__cta {
    padding-inline: var(--space-10);
  }
}

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .section-hero {
    padding-block: var(--section-padding-mobile);
  }

  .section-hero__ctas .btn {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .section-hero__container {
    max-width: var(--container-reading);
  }

  .section-hero__ctas {
    flex-direction: row;
  }

  .section-hero__ctas .btn {
    width: auto;
  }
}

/* ----------------------------------------------------------
   HOOK / GANCHO EMOCIONAL
   ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .section-hook__container {
    max-width: var(--container-reading);
    margin-inline: auto;
  }
}

/* ----------------------------------------------------------
   CALCULADORA
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .calc-wizard {
    max-width: 100%;
  }

  .calc-card {
    padding: var(--space-5);
  }

  /* Tabs apilados si no caben en una fila */
  .calc-tabs {
    flex-wrap: wrap;
  }

  .calc-tab {
    flex: 1 1 30%;
  }
}

@media (min-width: 768px) {
  .calc-wizard {
    max-width: 540px;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .calc-wizard {
    max-width: 600px;
  }
}

/* ----------------------------------------------------------
   BENEFICIOS
   ---------------------------------------------------------- */
@media (max-width: 427px) {
  .section-benefits__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 428px) and (max-width: 767px) {
  .section-benefits__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .section-benefits__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------------------------------------------------
   PRUEBA SOCIAL
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .section-proof__metrics {
    grid-template-columns: 1fr;
  }

  .section-proof__testimonials {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .section-proof__metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .section-proof__testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .section-proof__badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ----------------------------------------------------------
   CÓMO FUNCIONA
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .section-how__steps {
    flex-direction: column;
    gap: var(--space-8);
  }

  .section-how__connector {
    display: none;
  }
}

@media (min-width: 1024px) {
  .section-how__steps {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }

  .section-how__connector {
    display: block;
  }
}

/* ----------------------------------------------------------
   FAQ / OBJECIONES
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .section-faq__accordion {
    margin-top: var(--space-6);
  }

  .section-faq__question {
    padding-block: var(--space-4);
  }

  .section-faq__cta {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .section-faq__accordion {
    max-width: 780px;
    margin-inline: auto;
  }
}

/* ----------------------------------------------------------
   CTA DE CIERRE
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .section-cta-close__contrast {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .section-cta-close__contrast {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .footer__container {
    text-align: center;
  }

  .footer__links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  .footer__container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    flex-wrap: wrap;
  }

  .footer__legal {
    max-width: 480px;
  }
}

/* ----------------------------------------------------------
   STICKY CTA (mobile only)
   ---------------------------------------------------------- */
.sticky-cta {
  /* iPhone con home indicator: respeta el área segura inferior */
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

.sticky-cta .btn {
  min-height: 44px;
}

@media (min-width: 768px) {
  .sticky-cta {
    display: none;
  }
}

/* ----------------------------------------------------------
   THANK-YOU PAGE
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .thank-you__actions .btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .thank-you__inner {
    max-width: var(--container-reading);
  }
}