/* ==========================================================================
   Responsivo — base desktop (1240px+) definida em style.css.
   Breakpoints ajustam navegação, grids e espaçamentos.
   ========================================================================== */

/* Telas grandes (1440px+): um pouco mais de respiro no container */
@media (min-width: 1440px) {
  :root {
    --container-width: 1320px;
  }
}

/* ---- 1024–1199px: desktop estreito — compactar benefícios para não colidir com a Aline ---- */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero__image {
    height: 76%;
  }

  .hero__benefits {
    gap: 0.6rem;
  }

  .hero__benefits li {
    gap: 0.45rem;
  }

  .hero__benefit-text {
    font-size: 0.75rem;
  }

  .hero__benefit-icon {
    width: 22px;
    height: 22px;
  }

  .hero__benefit-icon--shield svg {
    width: 20px;
    height: 20px;
  }
}

/* ---- 1024px: navegação vira menu mobile / grids reduzem para 2 colunas ---- */
@media (max-width: 1023px) {
  .site-header__inner {
    padding-block: 0.5rem;
  }

  .site-header__brand {
    width: 158.6px;
    height: 35.2px;
  }

  .site-header__logo {
    top: -11.16px;
    left: -6.29px;
    height: 56.87px;
  }

  .menu-toggle {
    display: flex;
  }

  .site-header__actions > .btn {
    display: none;
  }

  .site-nav__cta {
    display: block;
  }

  .site-nav {
    display: block;
    flex: none;
    justify-content: normal;
    min-width: auto;
    position: fixed;
    top: var(--header-height, 72px);
    left: 0;
    right: 0;
    background: rgba(12, 12, 12, 0.98);
    border-bottom: 1px solid rgba(212, 175, 124, 0.2);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--transition-slow), opacity var(--transition-base);
    z-index: var(--z-menu);
  }

  .site-nav.is-open {
    max-height: 480px;
    opacity: 1;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-sm) var(--container-padding) var(--space-lg);
  }

  .site-nav__list li {
    width: 100%;
  }

  .site-nav__link {
    display: block;
    padding-block: 0.85rem;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .hero {
    flex-direction: column;
  }

  .hero__inner {
    text-align: center;
    padding-block: clamp(1.5rem, 4vh, 2.5rem);
  }

  .hero__content {
    max-width: none;
  }

  .hero__text {
    margin-inline: auto;
  }

  .hero__actions,
  .hero__benefits {
    justify-content: center;
  }

  .hero__side-quote {
    display: none;
  }

  .hero__figure {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: auto;
  }

  .hero__image {
    position: relative;
    top: auto;
    right: auto;
    height: min(42vh, 340px);
    width: auto;
    max-width: 100%;
  }

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

  .therapies__figure {
    position: static;
    max-height: 260px;
  }

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

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

  .sobre__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .sobre__figure {
    max-width: 340px;
    margin-inline: auto;
  }

  .sobre__lotus {
    width: 160px;
    top: -30px;
    right: -30px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__social {
    grid-column: 1 / -1;
  }
}

/* ---- 768px ---- */
@media (max-width: 768px) {
  .section {
    padding-block: var(--space-xl);
  }

  .section__head {
    margin-bottom: var(--space-lg);
  }

  .benefits-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: var(--space-xl) var(--space-md);
  }

  .site-footer__brand p {
    margin-inline: auto;
  }

  .site-footer__nav ul {
    align-items: center;
  }

  .site-footer__social {
    justify-content: center;
  }

  .contato__list li {
    text-align: left;
  }
}

/* ---- 430px ---- */
@media (max-width: 430px) {
  .therapies__grid {
    grid-template-columns: 1fr;
  }

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

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__benefits {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }

  .cta-final .btn {
    width: 100%;
  }

  .contato__actions {
    flex-direction: column;
  }

  .contato__actions .btn {
    width: 100%;
  }
}

/* ---- 390px ---- */
@media (max-width: 390px) {
  .sobre__lotus {
    display: none;
  }
}

/* ---- 360px ---- */
@media (max-width: 360px) {
  :root {
    --container-padding: 1rem;
  }

  .btn {
    padding: 0.85rem 1.4rem;
  }

  .hero__image {
    height: min(36vh, 280px);
  }
}