/* Tokens e utilitários — Conecta Mais Saúde (Figma) */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Mesmo alinhamento do header (1440px + padding lateral) */
.site-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 1024px) {
  .site-container {
    padding-inline: 100px;
  }
}

:root {
  --brand-lime: #81c447;
  --brand-teal: #03a99e;
  --brand-green: #06a99b;
  --brand-deep: #008178;
  --brand-dark: #02302c;
  --nyanza: #e2f1d2;
  --slate-950: #020618;
  --footer-bg: #f8f8f8;
  --gradient-brand: linear-gradient(217deg, #81c447 0%, #03a99e 99%);
  /* Gradiente 3 — Planos (teal → lime) */
  --gradient-section: linear-gradient(251deg, #03a99e 0%, #81c447 98.973%);
  /* Gradiente 2 — Depoimentos, CTA, newsletter (lime → teal) */
  --gradient-highlight: linear-gradient(244deg, #81c447 0%, #03a99e 98.973%);
}

.font-display {
  font-family: "Playfair Display", Georgia, serif;
}

.text-gradient-accent {
  display: inline-block;
  padding: 0.05em 0.14em 0.2em;
  margin: -0.05em -0.14em -0.12em;
  line-height: 1.2;
  vertical-align: baseline;
  overflow: visible;
  background: linear-gradient(180deg, var(--brand-lime) 0%, var(--brand-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
}

.bg-gradient-brand {
  background: var(--gradient-brand);
}

.bg-gradient-section {
  background: var(--gradient-section);
}

.bg-gradient-highlight {
  background: var(--gradient-highlight);
}

/* CTA psicólogos — card 1240px, cantos 32px (Figma 80:825) */
.cta-psicologos-card {
  background: linear-gradient(228.18deg, #81c447 0%, #03a99e 98.973%);
  border-radius: 32px;
}

@media (max-width: 1023px) {
  .cta-psicologos-card {
    background: linear-gradient(255.67deg, #81c447 0%, #03a99e 98.973%);
    border-radius: 0;
    margin-inline: -1.25rem;
    width: calc(100% + 2.5rem);
  }
}

/* Blog — card ebook/download (Figma 80:2580 / 80:2667, Gradiente 3) */
.blog-ebook-card {
  background: linear-gradient(250.02deg, #03a99e 0%, #81c447 98.973%);
}

@media (min-width: 1024px) {
  .blog-ebook-card {
    background: linear-gradient(236.608deg, #03a99e 0%, #81c447 98.973%);
  }
}

/* Blog — cards com foto (Figma 80:2563, 80:2574, 80:2672) */
.blog-post-card {
  isolation: isolate;
}

.blog-post-card__media {
  pointer-events: none;
}

.blog-post-card__img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.blog-post-card__img--featured {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Recorte da foto — post 2 (evita área clara atrás do título) */
.blog-post-card__img--post-two {
  width: 100%;
  height: 149.98%;
  left: -0.13%;
  top: -50.05%;
}

@media (min-width: 1024px) {
  .blog-post-card__img--post-two {
    height: 410.26%;
    left: -0.02%;
    top: -236.39%;
  }
}

.blog-post-card__badge {
  position: relative;
  z-index: 10;
}

.blog-post-card__title {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  min-height: 84px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
}

.blog-post-card__title-text {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  color: #f8fafc;
}

/* Newsletter sobrepõe o topo do footer (Figma Home 80:407) */
.newsletter-section {
  position: relative;
  z-index: 10;
  padding-bottom: 0;
}

.newsletter-section .newsletter-card {
  margin-bottom: -33px;
}

@media (min-width: 1024px) {
  .newsletter-section .newsletter-card {
    margin-bottom: -92px;
  }
}

.site-footer {
  padding-top: 75px;
  padding-bottom: 32px;
}

@media (min-width: 1024px) {
  .site-footer {
    padding-top: 150px;
  }
}

/* Pré-footer / Newsletter (Figma 74:1655 desktop / 74:1971 mobile) */
.newsletter-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(249.352deg, #03a99e 0%, #81c447 98.973%);
}

@media (min-width: 1024px) {
  .newsletter-card {
    min-height: 200px;
    border-radius: 32px;
    background: linear-gradient(213.795deg, #03a99e 0%, #81c447 98.973%);
  }
}

.newsletter-card__envelope {
  position: absolute;
  pointer-events: none;
  left: 7px;
  top: 7px;
  width: 64px;
  height: 56px;
}

@media (min-width: 1024px) {
  .newsletter-card__envelope {
    left: 15px;
    top: 78px;
    width: 103px;
    height: 90px;
  }
}

.newsletter-form__input {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 20px;
  font-size: 16px;
  line-height: 26px;
  color: var(--slate-950);
  outline: none;
}

.newsletter-form__input::placeholder {
  color: #62748e;
}

.newsletter-form__submit {
  width: 100%;
  border: 0;
  padding: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: #f1f5f9;
  background: #02302c;
  cursor: pointer;
}

.newsletter-form__submit:hover {
  background: var(--brand-deep);
}

@media (max-width: 1023px) {
  .newsletter-form {
    min-height: 120px;
  }

  .newsletter-form__input,
  .newsletter-form__submit {
    flex: 1 0 0;
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  .newsletter-form__input,
  .newsletter-form__submit {
    font-size: 20px;
  }

  .newsletter-form__input {
    width: 360px;
    text-align: left;
  }

  .newsletter-form__input::placeholder {
    text-align: left;
  }

  .newsletter-form__submit {
    width: 150px;
  }
}

.btn-primary {
  background: var(--gradient-brand);
  border: 2px solid var(--brand-lime);
}

.btn-outline {
  border: 2px solid var(--brand-lime);
  color: var(--brand-green);
}

.card-motivo {
  border-width: 1px 3px 3px 1px;
  border-style: solid;
  border-color: #cad5e2;
}

.plan-card-bemestar {
  background:
    radial-gradient(
      ellipse at 100% 0%,
      rgba(116, 179, 43, 0.35) 0%,
      rgba(255, 255, 255, 1) 70%
    ),
    #fff;
}

.plan-card-integral {
  background:
    radial-gradient(
      ellipse at 90% 10%,
      rgba(0, 129, 120, 0.25) 0%,
      rgba(255, 255, 255, 1) 65%
    ),
    #fff;
}

.hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Overlay radial do Figma (Hero desktop 1240×500) */
  background: radial-gradient(
    ellipse 95% 90% at 22% 46%,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(13, 13, 13, 0.44) 39%,
    rgba(26, 26, 26, 0.38) 48%,
    rgba(51, 51, 51, 0.25) 65%,
    transparent 100%
  );
}

@media (max-width: 1023px) {
  .hero-overlay::after {
    /* Hero mobile 350×350 */
    background: radial-gradient(
      ellipse 90% 85% at 22% 46%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(13, 13, 13, 0.44) 56%,
      rgba(26, 26, 26, 0.38) 62%,
      rgba(51, 51, 51, 0.25) 75%,
      transparent 100%
    );
  }
}

/* Menu mobile */
#mobile-nav.is-open {
  display: flex;
}

#mobile-nav {
  display: none;
}

@media (min-width: 1024px) {
  #mobile-nav {
    display: none !important;
  }
}

/* Accordion */
.accordion-panel {
  display: none;
}

.accordion-item.is-open .accordion-panel {
  display: block;
}

.accordion-item.is-open .accordion-icon-plus {
  display: none;
}

.accordion-item:not(.is-open) .accordion-icon-minus {
  display: none;
}

/* Carrossel tratamentos (mobile) */
.treatments-track {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.treatments-track > * {
  scroll-snap-align: start;
}

.treatments-track::-webkit-scrollbar {
  display: none;
}

/* Logo composto (ícone + wordmark) */
.brand-logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 9.5rem;
  height: 2.25rem;
}

@media (min-width: 1024px) {
  .brand-logo {
    width: 11.75rem;
    height: 3.0625rem;
  }
}

.brand-logo__icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: 28%;
  object-fit: contain;
  object-position: left center;
}

.brand-logo__title {
  position: absolute;
  left: 30%;
  top: 14%;
  height: 46%;
  width: auto;
  max-width: 68%;
  object-fit: contain;
  object-position: left center;
}

.brand-logo__tagline {
  position: absolute;
  left: 41%;
  top: 67%;
  height: 25%;
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: left center;
}

/* Hero — Figma: 80:442 desktop, 80:2828 mobile */
.hero-banner {
  isolation: isolate;
  border-radius: 12px;
}

.hero-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Cards de tratamento */
.treatment-card {
  position: relative;
  display: block;
  height: 8.125rem;
  overflow: hidden;
  border-radius: 0.375rem;
}

.treatment-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Por que nós — foto preenche o container (cover) */
.porque-nos-col {
  align-self: stretch;
}

@media (min-width: 1024px) {
  .porque-nos-col {
    align-self: flex-end;
  }
}

.porque-nos-media {
  position: relative;
  flex-shrink: 0;
}

.porque-nos-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ícones decorativos */
.icon-box {
  flex-shrink: 0;
  object-fit: contain;
}

/* Planos — título responsivo */
.plan-title {
  font-size: clamp(2rem, 6vw, 3.125rem);
  line-height: 1.1;
}

/* Setas depoimentos — Figma 80:817 (32×32, ícone ~30×14) */
.testimonial-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  overflow: hidden;
}

.testimonial-arrow-btn img {
  display: block;
  width: 1.875rem;
  height: 0.875rem;
  max-width: none;
  flex-shrink: 0;
}

.testimonial-arrow-btn--next {
  transform: rotate(180deg) scaleY(-1);
}

/* Depoimentos */
.testimonials-panel {
  position: relative;
  overflow: hidden;
}

/* Figma 80:824 — Quote IMG BG: 278×200, right inset ~100px em painel 1340px */
.testimonials-panel__watermark {
  position: absolute;
  top: 0;
  right: 7.46%;
  width: 20.75%;
  max-width: 278px;
  height: auto;
  aspect-ratio: 278 / 200;
  object-fit: contain;
  object-position: right top;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .testimonials-panel__watermark {
    right: 100px;
    width: 278px;
    height: 200px;
    max-width: none;
    aspect-ratio: auto;
  }
}

@media (max-width: 1023px) {
  .testimonials-panel__watermark {
    right: 0;
    width: 72px;
    height: 52px;
    max-width: none;
    aspect-ratio: auto;
  }
}

/* Footer social (Figma 48×48) */
.footer-social {
  gap: 20px;
}

.social-link {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.social-link__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 48px;
  max-height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.social-link__icon {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}