/* ===========================================================
   Keila Lucena — Página de Links
   Hero (desktop / tablet / mobile)
   =========================================================== */

:root{
  --bg: #031C11;
  --cream: #EFDBBF;
  --white: #FFF;

  --photo-w: 744px;     /* largura nativa da foto wide */
  --content-w: 940px;   /* coluna de conteúdo no desktop */
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  background: var(--bg);
  min-height: 100%;
}

body{
  position: relative;
  font-family: 'Lora', serif;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Faixa decorativa no topo da página */
body::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #EFDBBF;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  z-index: 10;
}

img{ display: block; }

/* ============================= HERO ============================= */
.hero{
  position: relative;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 430px 20px 40px;   /* top = 430px · bottom = 40px (ícones → divisória) */
  text-align: center;
}

/* Foto — centro ao topo, atrás do conteúdo */
.hero__photo{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--photo-w);
  max-width: 100%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.hero__photo img{
  width: 100%;
  height: auto;
}

.hero__content{
  position: relative;
  z-index: 1;
}

/* Logo / assinatura */
.hero__logo{
  width: 260px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 36px;
}

/* ============================= CITAÇÃO ============================= */
.quote{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  width: min(754px, 90%);   /* caixa: 754px no desktop, 90% em telas menores */
  margin: 0 auto 44px;
  padding: 24px 16px;
  text-align: left;

  /* Fundo com fade nas laterais */
  background: linear-gradient(90deg,
    rgba(3, 28, 17, 0.00) 0%,
    #02100A 50%,
    rgba(3, 28, 17, 0.00) 100%);

  /* Linhas (topo e base) com gradiente que some nas pontas */
  border-style: solid;
  border-width: 1px 0;
  border-image: linear-gradient(90deg,
    rgba(239, 219, 191, 0.00) 0%,
    #EFDBBF 50%,
    rgba(239, 219, 191, 0.00) 100%) 1;
}

.quote__mark{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: 4px;
}

.quote__text{
  width: 534px;        /* largura do texto no desktop */
  max-width: 100%;     /* encolhe junto com a caixa em telas menores */
  color: var(--white);
  font-family: 'Lora', serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}
.quote__text b{ font-weight: 700; }

/* ============================= BOTÃO WHATSAPP ============================= */
.btn-whatsapp{
  display: flex;
  width: 360px;
  max-width: 100%;
  height: 50px;
  margin: 0 auto 28px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 100px;
  background: var(--white);

  color: #031C11;
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;

  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-whatsapp:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.btn-whatsapp:active{ transform: translateY(0); }

/* ============================= REDES SOCIAIS ============================= */
.social-label{
  color: var(--white);
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
}

.social{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.social__link{
  display: inline-flex;
  transition: transform .15s ease, opacity .15s ease;
}
.social__link:hover{
  transform: translateY(-2px);
  opacity: .85;
}
.social__link img{
  width: 32px;
  height: 32px;
}

/* ============================= SERVIÇOS ============================= */
.services{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 20px 90px;
  text-align: center;
}

/* Divider — mesmo gradiente da borda da citação */
.divider{
  width: min(940px, 90%);
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg,
    rgba(239, 219, 191, 0.00) 0%,
    #EFDBBF 50%,
    rgba(239, 219, 191, 0.00) 100%);
}

.services__eyebrow{ margin: 40px 0 4px; }   /* divisória → badge (40px) · badge → título (4px) */

.services__title{
  color: #F4F3F2;
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 42px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -1.5px;
  margin-bottom: 48px;
}

/* Badge (pílula) — base reutilizável */
.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 12px;
  border-radius: 100px;
  background: #4F593A;
  color: #D6D0D1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;   /* todos os badges: 14px no desktop */
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

/* ----------------------------- CARD ----------------------------- */
.card{
  position: relative;
  overflow: hidden;
  width: min(620px, 90%);
  margin: 0 auto;
  border-radius: 16px;
  background: #F4F3F2;
  text-align: left;
}

.card__picture{ display: contents; }

/* Imagem fixa, topo-direita. Mantém tamanho natural e só cresce
   (cobre) quando o card fica mais alto que a imagem. */
.card__img{
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top right;
  pointer-events: none;
  user-select: none;
}

.card__content{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
}

.card__head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;            /* título → badge (desktop) */
  width: 374px;
  max-width: 100%;
}

.card__title{
  width: 100%;
  color: #031C11;
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 42px;
  font-style: italic;
  font-weight: 400;
  line-height: 104.038%;
  letter-spacing: -2.94px;
}

.card__badge{
  width: 371px;
  max-width: 100%;
  font-size: 14px;   /* badge do card (desktop) */
}

.card__desc{
  width: 374px;
  max-width: 100%;
  color: #505050;
  font-family: 'Lora', serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

/* ----------------------------- ACORDEÃO ----------------------------- */
.accordions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}
.accordion{ align-self: stretch; }

.accordion__head{
  display: flex;
  width: 100%;
  padding: 8px 16px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 4px;
  background: #FFF;
  cursor: pointer;
}

.accordion__title{
  color: #505050;
  font-family: 'Lora', serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.accordion__arrow{
  flex: 0 0 auto;
  transition: transform .3s ease;
}
.accordion.is-open .accordion__arrow{ transform: rotate(180deg); }

.accordion__panel{
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.accordion.is-open .accordion__panel{ max-height: 320px; }

.checklist{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 6px;
}
.checklist li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #505050;
  font-family: 'Lora', serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.checklist img{
  width: 12px;
  height: 12px;
  margin-top: 1px;
  flex: 0 0 auto;
}

/* ----------------------------- BOTÃO CTA ----------------------------- */
.btn-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 100px;
  background: #031C11;
  color: #F4F3F2;
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.btn-cta:active{ transform: translateY(0); }

/* Lista de cards empilhados */
.cards{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;          /* ocupa toda a largura (cards capam em 620px) */
}

/* Caixa branca estática (sem toggle) */
.info-box{
  width: 100%;
  padding: 8px 16px;
  border-radius: 4px;
  background: #FFF;
  color: #505050;
  font-family: 'Lora', serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
}

/* ============================= PRODUTOS DIGITAIS ============================= */
.products{
  background: #FFF;
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.products__header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.products__title{
  color: #031C11;
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 36px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}
.products__sub{
  width: 297px;
  max-width: 100%;
  color: #505050;
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.badge--track{
  letter-spacing: 5.6px;
}

/* ----------------------------- CARD ESCURO (produto) ----------------------------- */
.card--dark{ background: #031C11; }
.card--dark .card__title,
.card--dark .card__desc{ color: #F4F3F2; }
.card--dark .card__badge{ width: 100%; }   /* badge degradê = largura do título */
.card--dark .accordion__head{ background: #4F593A; }
.card--dark .accordion__title{ color: #F4F3F2; }
.card--dark .checklist li{ color: #F4F3F2; }
.card--dark .btn-cta{ background: #F4F3F2; color: #031C11; }

/* Badge degradê (fade nas laterais), texto escuro.
   Tamanho/largura seguem o mesmo padrão do badge dos cards brancos. */
.badge--ghost{
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.00) 0%,
    #FFF 50%,
    rgba(255, 255, 255, 0.00) 100%);
  color: #031C11;
}

/* ============================= SOBRE ============================= */
.about{
  position: relative;
  background: #031C11;
  overflow: hidden;
  padding-bottom: 6vw;   /* respiro inferior proporcional (como o topo da hero) */
}

/* Foto: fundo full-bleed no desktop (atrás do conteúdo) */
.about__photo{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% center;
}

.about__inner{
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 90px 20px 0;
  display: flex;
  justify-content: flex-end;
}

.about__col{
  width: 603px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.about__logo{
  width: 190px;
  height: auto;
}

.about__bio{
  color: #FFF;
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.about__bio p{ margin: 0; }
.about__bio p + p{ margin-top: 1.4em; }   /* linha em branco entre parágrafos */

.about__pills{
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about__pills li{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 12px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.00) 0%,
    #FFF 31.945%,
    #FFF 64.358%,
    rgba(255, 255, 255, 0.00) 100%);
  color: #031C11;
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.about__pills img{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.about__closing{
  color: #FFF;
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

/* ============================= RODAPÉ ============================= */
.footer{
  background: #031C11;
  border-top: 4px solid #EFDBBF;
  padding: 28px 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.footer__copy{
  color: #FFF;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
}
.footer__credit-link{
  display: inline-flex;
  transition: opacity .15s ease;
}
.footer__credit-link:hover{ opacity: .8; }
.footer__credit{
  display: block;
  width: 244px;
  height: auto;
}

/* Grão / ruído animado sobre toda a página */
.noise{
  display: block;
  width: 100vw;
  height: 100vh;
  opacity: .09;
  background-image: url('https://nutriesthercosta.com.br/wp-content/uploads/2026/04/ruido-animado.gif');
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: plus-lighter;
}

/* ============================= MOBILE ============================= */
@media (max-width: 768px){
  .hero{
    max-width: none;
    /* padding-top proporcional à largura, acompanha a foto (que escala com 100vw). */
    padding: 65vw 0 25px;   /* bottom 25px (ícones → divisória) */
  }

  /* Foto mobile ocupa a largura da tela, centro ao topo */
  .hero__photo{
    width: 100vw;
  }

  /* Conteúdo a 90% da tela, centralizado */
  .hero__content{
    width: 90%;
    margin: 0 auto;
  }

  /* Espaçamentos do hero mobile (ritmo do Figma) */
  .hero__logo{
    margin-bottom: 23px;   /* logo → citação */
  }

  .quote{
    width: 100%;        /* ocupa os 90% do conteúdo no mobile */
    gap: 13px;
    padding: 16px 18px;
    margin-bottom: 24px;   /* citação → botão */
  }
  .quote__text{
    width: 474px;       /* largura máxima do texto no mobile */
    font-size: 14px;    /* texto menor no mobile */
  }
  .quote__mark{
    width: 30px;
    height: 30px;
  }

  .btn-whatsapp{
    margin-bottom: 23px;   /* botão → "ou me encontre" */
  }

  .social-label{
    margin-bottom: 14px;   /* label → ícones */
  }

  .social{
    gap: 15px;             /* ícones (largura 126 / 3 de 32px) */
  }

  /* ---- Serviços (mobile) ---- */
  .badge{ font-size: 10px; }   /* todos os badges: 10px no mobile */
  .services__eyebrow{ margin: 25px 0 2px; }   /* divisória → badge (25px) · badge → título (2px) */

  .services__title{
    font-size: 30px;
    letter-spacing: -1px;
    margin-bottom: 36px;
  }

  .card__head{
    width: 197px;
    gap: 4px;            /* título → badge (mobile) */
  }

  .card__title{
    font-size: 24px;
    line-height: 104.038%;
    letter-spacing: -1.68px;
  }

  /* Quebra de linha só no desktop (Mentoria / Financeira PF) */
  .br-desktop{ display: none; }

  .card__badge{
    width: 100%;         /* acompanha a largura do título, texto centralizado */
    font-size: 10px;     /* badge do card (mobile) */
  }

  .card__desc{
    width: 197px;
    font-size: 14px;
    line-height: 110%;
  }

  .accordion__title{ font-size: 12px; }

  .checklist li{ font-size: 12px; }

  /* Seções sem padding lateral no mobile → cards ficam 90% da tela cheia */
  .services{ padding-left: 0; padding-right: 0; }
  .products{ padding-left: 0; padding-right: 0; }

  /* Produtos Digitais (mobile) */
  .products__title{ font-size: 24px; }

  /* Bloco com 16px de padding no mobile */
  .card__content{ padding: 16px; }

  /* Usa a imagem mobile (já com o fade embutido), cobrindo o card */
  .card__img{
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: top right;
  }

  /* Listas dos acordeões com fundo branco (header + lista = caixa branca) */
  .accordion.is-open .accordion__head{
    border-radius: 4px 4px 0 0;
  }
  .accordion__panel{
    background: #FFF;
    border-radius: 0 0 4px 4px;
  }

  /* Cards escuros: lista sem fundo branco (texto creme sobre o card) */
  .card--dark .accordion__panel{ background: transparent; }
  .card--dark .accordion.is-open .accordion__head{ border-radius: 4px; }

  /* ---- Sobre (mobile): conteúdo em cima, foto embaixo ---- */
  .about__inner{
    padding: 30px 20px 0;
    justify-content: center;
  }
  .about__col{
    width: 100%;
    max-width: 360px;
    align-items: center;
    gap: 13px;
  }
  .about__bio,
  .about__closing{ width: 100%; }

  /* Respiro inferior proporcional no mobile (30px menor) */
  .about{ padding-bottom: calc(17vw - 30px); }

  /* Botões dos cards no mobile: 14px e altura fixa 48px */
  .btn-cta{
    height: 48px;
    font-size: 14px;
  }

  /* Foto volta ao fluxo (abaixo do conteúdo), com topo esmaecido no fundo */
  .about__photo{ position: static; }
  .about__photo img{
    height: auto;
    object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
  }
}