/* ===== Paleta 60/30/10 (sem degradês) ===== */
:root{
  --white:#FFFFFF;   /* 60 */
  --pink:#F7AEAD;    /* 30 */
  --cream:#FCF6BD;   /* 10 */

  --ink:#1F2937;
  --muted:#6B7280;
  --line:#ECECEC;

  --radius-lg:24px;
  --radius-md:16px;
  --shadow:0 18px 50px rgba(31,41,55,.08);

  --hero-h: 650px;   /* altura fixa do hero no desktop */
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{ width:min(1160px,92vw); margin:0 auto }

/* ===== Botão padrão ===== */
.btn{
  border:0; cursor:pointer; padding:14px 18px; border-radius:14px; font-weight:800;
  background:var(--cream); color:#2b2b2b; box-shadow:var(--shadow); transition:transform .15s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

/* ===== HERO (500px desktop) ===== */
.hero{
  position:relative;
  background:var(--pink);
  overflow:hidden;
  padding:0;
}
@media (min-width:1024px){
  .hero{ height:var(--hero-h) }
}

/* Grid ocupa toda a altura e define camadas */
.hero-grid{
  display:grid; gap:22px; align-items:center;
  grid-template-columns:1.05fr .95fr;
  height:100%;
  position:relative; z-index:2;
}
.hero-col{
  display:flex; flex-direction:column; justify-content:center;
  padding:28px 0 42px;
  position:relative; z-index:6;
}

/* Coluna da imagem (abaixo do texto, acima do fundo) */
.hero-media{
  position:relative; z-index:3;
  display:flex; align-items:flex-end; justify-content:flex-end;
}

/* Marca d'água atrás da imagem da modelo */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("assets/MARCA-16.png");
  background-repeat:no-repeat;
  background-size:clamp(500px,50vw,3000px);
  background-position:right 0% top 0%;
  opacity:.08;
  filter:grayscale(100%) contrast(110%);
  pointer-events:none;
  z-index:1;
}
.person-cutout{ margin:0; position:relative; z-index:2; display:flex; align-items:flex-end }
.person-cutout img{
  display:block;
  height: calc(var(--hero-h) - 15px);
  width:auto;
  filter:none !important; box-shadow:none !important; transform:none;
}

/* Onda no rodapé do hero */
.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; z-index:5;
}
.hero-wave svg{ display:block; height:72px }

/* Tipografia do hero */
.hero-logo{ width: clamp(180px,26vw,320px); height:auto; display:block; margin:0 0 6px }
.hero-title{ margin:0 0 8px; font-size:clamp(28px,4.2vw,48px); line-height:1.3; letter-spacing:-.02em }
.t-strong{ color:var(--ink) }
.t-accent{ background:var(--cream); border-radius:.35em; padding:.02em .22em }
.hero-lead{ color:#374151; margin:4px 0 10px; max-width:60ch }

.waitlist{ display:flex; gap:10px; margin:10px 0 6px }
.waitlist input{
  flex:1; padding:16px; border:1.5px solid #e7e7e7; border-radius:14px; font-size:1rem; background:#fff;
}
.waitlist input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 6px rgba(31,41,55,.08) }
.hint{ color:#425466; font-size:.9rem; margin:4px 2px 0 }

.ticks{ list-style:none; margin:14px 0 26px; padding:0; display:flex; gap:10px; flex-wrap:wrap }
.ticks li{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 12px; font-weight:700 }

/* Marca d'água geral do hero */
.hero-watermark{
  position:absolute; top:8px; left:10px; width:min(820px,58vw); opacity:.08; pointer-events:none; z-index:1;
}

/* ===== Seções comuns ===== */
.section{ padding:44px 0; border-top:1px solid var(--line);}
.section-head{ margin-bottom:16px }
.section-head h2{ margin:6px 0 6px; font-size:clamp(22px,3vw,32px) }
.section-head p{ margin:0; color:#6B7280 }
.accent{ width:46px; height:6px; background:var(--pink); border-radius:6px }
.pills{ display:flex; gap:10px; flex-wrap:wrap }
.pill{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 14px; font-weight:800 }

/* Remove o traço superior apenas na seção About */
.section.about{
  border-top: 0;           /* ou: border-top: none; */
}

/* ===== ABOUT (cards em 3 colunas, ícone ao lado do título, texto central) ===== */
.about-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:24px;
  margin:10px 0 16px;
}
.about-card{
  background:#fff;
  border:1.8px solid var(--line);
  border-radius:18px;
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow: var(--shadow);
}
.about-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:8px;
}
.about-head i{ color:var(--ink); font-size:24px; line-height:1 }
.about-card h3{ margin:0; font-size:1.06rem; letter-spacing:.002em }
.about-card p{
  margin:8px 0 0; color:#556176; font-size:.98rem; line-height:1.65; max-width:34ch;
}

/* ===== FAQ ===== */
.qa{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px 14px; margin:10px 0; box-shadow:var(--shadow) }
.qa summary{ cursor:pointer; font-weight:800 }
.qa p{ color:#6b7280; margin:8px 0 0 }

/* ===== Footer ===== */
.footer{ border-top:3px solid var(--pink); background:var(--white) }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:28px; padding:32px 0 18px }
.foot-col h4{ margin:0 0 10px; font-size:1rem; font-weight:800 }
.foot-logo{ margin:0 0 6px; font-size:1.05rem; font-weight:800 }
.foot-desc{ margin:0 0 12px; color:#6B7280; max-width:32ch }
.foot-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.foot-list a{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px }
.foot-list a:hover{ border-color:var(--pink) }
.icon-list li{ display:grid; grid-template-columns:18px 1fr; align-items:start; gap:10px }
.ico{ color:var(--pink); display:inline-grid; place-items:center }
.ico i{ font-size:18px; line-height:1 }

/* Ícones sociais – nunca sublinhar */
.socials{ display:flex; gap:12px; align-items:center }
.socials .social-btn{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:transparent;
  border:1.6px solid rgba(31,41,55,.75); color:#2f3a48; transition:.12s;
  text-decoration:none !important;
}
.socials .social-btn:hover{ transform:translateY(-1px); color:var(--pink); border-color:var(--pink) }
.footer .socials a,
.footer .socials a:link,
.footer .socials a:visited,
.footer .socials a:hover,
.footer .socials a:focus,
.footer .socials a:active,
.footer .socials .social-btn,
.footer .socials .social-btn i{
  text-decoration:none !important;
  text-underline-offset:0 !important;
  text-decoration-thickness:0 !important;
}
.footer .socials .social-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(247,174,173,.45);
}

.foot-bottom{ border-top:1px solid var(--line); background:var(--white) }
.foot-bottom-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 }
.foot-bottom p{ margin:0; color:#6b7280; font-size:.92rem }
.foot-links{ display:flex; gap:14px }
.foot-links a{ color:var(--muted); text-decoration:none }
.foot-links a:hover{ color:var(--ink); border-bottom:1px solid var(--pink) }

/* ===== Breakpoints ===== */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr }
  .hero-media{ justify-content:center }
  .hero-media::before{
    background-position:center top;
    background-size:clamp(260px,48vw,480px);
  }
  .person-cutout img{ height: clamp(380px, 54vw, 540px) }

  .about-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:900px){
  .hero{ padding-top:18px }
  .hero-media::before{
    background-position:center 8%;
    background-size:clamp(240px,56vw,460px);
  }
  .person-cutout img{ height: clamp(340px, 62vw, 500px) }
}
@media (max-width:640px){
  .waitlist{ flex-direction:column }
  .footer-grid{ grid-template-columns:1fr }
  .foot-bottom-row{ flex-direction:column; align-items:flex-start }
  .about-cards{ grid-template-columns: 1fr; }
}