/**
 * Sistema responsivo Imuv — mobile-first, conversão e apresentação
 * Complementa responsive.css (gutter, hero mobile, seções)
 */

:root {
  --section-pad-y: clamp(2.75rem, 5.5vw, 5rem);
  --touch-min: 2.75rem;
  --content-readable: 42rem;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* —— Header: logo proporcional ao header (evita overflow) —— */
@media (max-width: 63.9375rem) {
  :root {
    --header-h: clamp(3.65rem, 11vw, 4.85rem);
    --logo-h: clamp(2.65rem, 9vw, 3.65rem);
    --header-offset: calc(var(--header-h) + 0.5rem);
  }

  .header-inner {
    gap: 0.4rem;
  }

  .brand img {
    max-width: min(48vw, 11rem);
  }

  .header-actions .btn-header-cta {
    padding: 0.45rem 0.7rem;
    font-size: clamp(0.7rem, 2.6vw, 0.82rem);
    min-height: var(--touch-min);
  }

  .btn-header-cta .wa-icon {
    width: 16px;
    height: 16px;
  }

  .nav-toggle {
    width: var(--touch-min);
    height: var(--touch-min);
  }
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  :root {
    --header-h: 4.75rem;
    --logo-h: 3.85rem;
  }

  .brand img {
    max-width: min(42vw, 14rem);
  }
}

/* —— Tipografia hero (legível no mobile, impacto no desktop) —— */
@media (max-width: 63.9375rem) {
  .theme-light .hero-text {
    font-size: clamp(1rem, 3.4vw, 1.22rem);
    line-height: 1.55;
    max-width: none;
  }

  .theme-light .hero-bullets li {
    font-size: clamp(0.92rem, 3vw, 1.05rem);
  }

  .theme-light .hero-check {
    font-size: 1.1rem;
  }

  .theme-light .hero-closing {
    font-size: 0.95rem;
  }
}

@media (min-width: 64rem) {
  .theme-light .hero-text {
    font-size: clamp(1.15rem, 1.35vw, 1.52rem);
  }

  .theme-light .hero-bullets li {
    font-size: clamp(1.05rem, 1.25vw, 1.38rem);
  }
}

/* —— Seções: ritmo vertical consistente —— */
.section {
  padding-block: var(--section-pad-y);
}

.section-header {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.section-title {
  text-wrap: balance;
}

.section-header .section-subtitle,
.hero-text,
.cta-final-text,
.importancia-text {
  max-width: var(--content-readable);
}

/* —— Tablet (768–1023px) —— */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .theme-light .hero--light {
    padding-top: 1.5rem;
  }

  .theme-light .hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 36rem;
    margin-inline: auto;
    padding-bottom: 1.5rem;
  }

  .theme-light .hero-layout::before,
  .theme-light .hero-layout::after {
    display: none;
  }

  .theme-light .hero-copy {
    order: 1;
    margin-inline: auto;
    width: 100%;
  }

  .theme-light .hero-aside {
    order: 2;
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
  }

  .section--hero-risks .hero-risks-wrap {
    padding-inline: 0;
  }

  .hero-risks {
    max-width: 100%;
    gap: 0.65rem;
  }

  .theme-light .hero-features__bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .quem-somos-grid {
    grid-template-columns: 1fr;
  }

  .quem-somos-visual {
    max-width: 28rem;
    margin-inline: auto;
  }

  .importancia-intro {
    gap: 2rem;
  }

  .pros-card,
  .cons-card {
    padding: 1.5rem;
    transform: none;
  }

  .wa-cta-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .wa-cta-bar__btn {
    width: auto;
    flex: 1 1 auto;
    min-width: min(100%, 16rem);
  }
}

/* —— Desktop (1024px+) —— */
@media (min-width: 64rem) {
  :root {
    --gutter: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  .theme-light .hero-layout {
    grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr);
    gap: clamp(2rem, 3vw, 3rem);
    align-items: start;
    max-width: min(76rem, 100%);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  }

  .theme-light .hero-aside {
    justify-self: start;
    width: 100%;
    max-width: 28rem;
    order: 1;
  }

  .theme-light .hero-copy {
    justify-self: end;
    margin-inline: 0;
    margin-left: auto;
    max-width: min(38rem, 100%);
    order: 2;
  }

  .cta-final-grid {
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .conversion-trust__inner {
    gap: 1rem 2rem;
  }
}

@media (min-width: 80rem) {
  .theme-light .hero-layout {
    grid-template-columns: minmax(24rem, 32rem) minmax(0, 1.18fr);
  }

  .section-header {
    max-width: 56rem;
  }
}

/* —— Painel WhatsApp: grid por largura —— */
@media (min-width: 25rem) and (max-width: 47.9375rem) {
  .wa-panel__topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-inline: 0.85rem;
  }

  .wa-topic {
    min-height: var(--touch-min);
    padding: 0.65rem 0.5rem;
  }
}

@media (max-width: 24.9375rem) {
  .wa-panel__topics {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 48rem) {
  .wa-panel__topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* —— Grids: evitar overflow horizontal —— */
.hero-layout,
.hero-risks,
.hero-features__bar,
.services-grid,
.benefits-grid,
.process-grid,
.mission-grid,
.stats-grid,
.quem-somos-grid,
.importancia-intro,
.cta-final-grid,
.footer-grid,
.pros-cons--desktop,
.wa-panel__topics {
  min-width: 0;
}

.hero-layout > *,
[class*="grid"] > *,
.hero-features__bar > *,
.hero-risks > * {
  min-width: 0;
}

/* —— Fotos e mídia —— */
.photo-frame--wide {
  aspect-ratio: 16 / 9;
  max-height: clamp(11rem, 38vw, 22rem);
}

@media (max-width: 47.9375rem) {
  .photo-frame--tall {
    aspect-ratio: 4 / 5;
    max-height: min(70vw, 20rem);
    margin-inline: auto;
    width: 100%;
  }

  .servicos-banner {
    margin-bottom: 1.5rem;
  }
}

/* —— Widget de avaliações (Elfsight Google Reviews) —— */
.reviews-widget-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reviews-widget-wrap iframe {
  max-width: 100%;
}

/* —— Conversão: alvos de toque (≈44px) —— */
.btn,
.btn-header-cta,
.btn-whatsapp,
.wa-topic,
.mobile-nav-link,
.accordion-trigger,
.nav-toggle,
.hero-risk,
.service-card-wa,
.conversion-trust__cta,
.sticky-cta__wa,
.mobile-nav-cta {
  touch-action: manipulation;
}

.btn-whatsapp--hero,
.wa-panel__cta,
.wa-cta-bar__btn,
.mobile-nav-cta,
.btn-header-cta {
  min-height: var(--touch-min);
  align-items: center;
}

.accordion-trigger {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.mobile-nav-link {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.hero-risk__cta {
  display: inline-block;
  padding: 0.15rem 0;
  min-height: 2rem;
}

/* —— Sticky CTA + safe area —— */
@media (max-width: 47.9375rem) {
  body.theme-light {
    padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }

  .sticky-cta {
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .sticky-cta__wa {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }
}

/* —— Faixa de confiança —— */
@media (max-width: 47.9375rem) {
  .conversion-trust {
    padding-block: 0.75rem;
  }

  .conversion-trust__item {
    font-size: 0.78rem;
  }
}

@media (min-width: 48rem) {
  .conversion-trust__list {
    gap: 0.65rem 1.5rem;
  }
}

/* —— Cards mobile —— */
@media (max-width: 47.9375rem) {
  .benefit-card,
  .service-card,
  .process-card,
  .mission-card {
    width: 100%;
  }

  .stats-panel {
    margin-inline: 0;
  }

  .wa-cta-bar--convert {
    text-align: left;
  }
}

/* —— Foco visível (acessibilidade + conversão) —— */
:where(
  a.btn,
  .wa-topic,
  .nav-link,
  .mobile-nav-link,
  .hero-risk,
  .service-card-wa,
  .sticky-cta__wa,
  .conversion-trust__cta,
  .hero-cta-alt
):focus-visible {
  outline: 2px solid var(--blue-cta, #1e6fd9);
  outline-offset: 3px;
}

.theme-light :where(.btn-header-cta):focus-visible {
  outline-color: var(--orange, #ff7a00);
}

/* —— Hero riscos: respiro em todas as larguras —— */
.hero-risks-wrap .container,
.hero-risks-wrap {
  width: 100%;
}

@media (min-width: 64rem) {
  .hero-risks-wrap {
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
  }

  .hero-risks {
    gap: 1rem;
  }
}