/* LP Dr. Luiz Filipe: estilos da página (aprovados na prévia). Não editar pelo chat da Lovable. */
/* Layout: padrão Atem (hero tela cheia com foto de fundo bege, seções alternadas creme / creme rosado / azul-marinho, um botão por seção).
   Página de anúncio com visual único: tema claro fixo de propósito. */
:root{
  --fundo:#FAFAF8;        /* quase branco, como o feed do médico */
  --fundo-2:#EEF1F3;      /* cinza-azulado bem claro para alternar seções */
  --texto:#1B2B3A;        /* azul escuro suavizado, nunca preto puro */
  --texto-suave:#4F5D6B;
  --marca:#022135;        /* azul-marinho da identidade */
  --rosa:#E4BBCC;         /* rosa da identidade */
  --rosa-escuro:#9C5C74;  /* rosa com contraste para detalhes pequenos */
  --linha:#DCE1E5;
  --branco:#FFFFFF;
  --f-titulo:"Cormorant Garamond", "Times New Roman", Georgia, serif;
  --f-texto:"Poppins", "Segoe UI", Arial, sans-serif;
  --max:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--f-texto);font-size:16px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-titulo);font-weight:600;line-height:1.12;text-wrap:balance;margin:0;color:var(--marca)}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:24px}
.sec{padding-block:clamp(72px,9vw,120px)}
.sec--2{background:var(--fundo-2)}
.sec--escura{background:var(--marca);color:#E9EEF2}
.sec--escura h2{color:var(--branco)}
.rotulo{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--texto-suave)}
.sec--escura .rotulo{color:#9FB0BE}

/* Botão */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--marca);color:var(--branco);text-decoration:none;font-family:var(--f-texto);font-weight:500;font-size:16px;line-height:1.3;padding:17px 30px;border-radius:6px;transition:background .2s,transform .2s;text-align:left}
.btn:hover{background:#0B3350;transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--rosa);outline-offset:3px}
.btn svg{flex:none;width:18px;height:18px}
.btn--claro{background:var(--branco);color:var(--marca)}
.btn--claro:hover{background:#E9EEF2}

/* 1. Abertura */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#B4A89C;color:var(--branco)}
.hero__foto{position:absolute;inset:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:0% 100%}
.hero__txt{position:relative;z-index:2;width:100%}
.hero::before{content:"";position:absolute;z-index:1;pointer-events:none;background:url(/img/simbolo-branco.png) center/contain no-repeat;width:560px;height:564px;left:-220px;top:40%;transform:translateY(-50%);opacity:.13}
.hero__col{max-width:520px;margin-left:auto;display:flex;flex-direction:column;gap:26px;padding-block:64px}
.hero__logo{width:200px;height:auto}
.hero .rotulo{color:var(--branco)}
.hero__txt{text-shadow:0 1px 14px rgba(60,45,35,.35)}
.hero .btn{text-shadow:none}
.hero h1{font-size:clamp(42px,5.2vw,64px);color:var(--branco)}
.hero h1 em{font-style:italic;font-weight:500;display:block;font-size:.62em;line-height:1.2;margin-top:12px;color:var(--branco)}
.hero__sub{font-size:17px;color:var(--branco);max-width:460px}
.hero__dados{font-size:13.5px;line-height:1.65;color:var(--branco);border-top:1px solid rgba(255,255,255,.45);padding-top:18px}
.hero__dados strong{color:var(--branco);font-weight:600}
.hero .btn{align-self:flex-start}

/* 2. Dor e solução */
.dor-sec{position:relative;overflow:hidden}
.dor{position:relative;z-index:1;display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(40px,7vw,104px);align-items:center}
.dor__intro{display:flex;flex-direction:column;gap:22px;font-size:17px;color:var(--texto-suave)}
.dor__intro h2{font-size:clamp(34px,4vw,48px)}
.dor__intro .btn{align-self:flex-start;margin-top:8px}
.itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.item{display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:center;background:var(--branco);border-radius:8px;padding:18px 22px;box-shadow:0 6px 22px rgba(2,33,53,.07);font-size:15.5px;line-height:1.6}
.item b{color:var(--marca);font-weight:600}
.item__ic{width:40px;height:40px;border-radius:6px;background:var(--marca);display:grid;place-items:center}
.item__ic svg{width:20px;height:20px;fill:none;stroke:var(--branco);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.marca-dagua{position:absolute;left:-0.04em;bottom:-0.28em;margin:0;font-family:var(--f-titulo);font-weight:500;font-size:clamp(110px,15vw,220px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(2,33,53,.10);pointer-events:none;user-select:none;white-space:nowrap}

/* 3. Sobre o médico */
.sobre{padding:0}
.sobre__grid{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.sobre__foto{position:relative;min-height:420px;order:2}
.sobre__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 30%}
.sobre__txt{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(56px,7vw,96px) clamp(24px,6vw,88px) clamp(56px,7vw,96px) max(24px,calc((100vw - var(--max)) / 2 + 24px))}
.sobre__txt h2{font-size:clamp(34px,3.8vw,46px)}
.sobre__txt h2 em{font-style:italic;font-weight:500;color:var(--rosa)}
.sobre__txt p{max-width:520px;color:#D5DEE5}
.sobre__txt .btn{align-self:flex-start;margin-top:10px}

/* Símbolo da marca como textura, em baixa opacidade */
.textura{position:relative;overflow:hidden}
.textura>*{position:relative;z-index:1}
.textura::before{content:"";position:absolute;z-index:0;pointer-events:none;background:center/contain no-repeat}
.sobre.textura::before{background-image:url(/img/simbolo-branco.png);width:560px;height:564px;left:-140px;bottom:-150px;opacity:.06}

/* 5. Dúvidas */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:44px;align-items:center}
.faq h2{font-size:clamp(34px,4vw,48px);text-align:center}
.faq__lista{width:100%;border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-weight:500;font-size:17px;color:var(--marca)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--linha);position:relative;transition:transform .25s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--marca);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .2s}
.faq details[open] summary i::after{opacity:0}
.faq details p{padding:0 48px 24px 4px;color:var(--texto-suave)}

/* 6. Chamada final */
.final-sec{background:#F3E3EA url(/img/fundo-petalas.jpg) center/cover no-repeat;position:relative}
.final-sec::before{content:"";position:absolute;inset:0;background:rgba(180,168,156,.8)}
.final-sec>.wrap{position:relative}
.final-sec .rotulo,.final-sec .final p,.final-sec .final h2{color:var(--branco)}
.final-sec .final{text-shadow:0 1px 14px rgba(60,45,35,.35)}
.final-sec .final .btn{text-shadow:none}
.final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;max-width:720px;margin:0 auto}
.final h2{font-size:clamp(36px,4.6vw,56px)}
.final p{font-size:17px;color:var(--texto-suave);max-width:560px}

/* 7. Rodapé */
.rodape{background:var(--marca);color:#B9C6D1;font-size:14px;line-height:1.7;padding-block:64px 40px}
.rodape__topo{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.rodape__logo{width:190px;height:auto}
.rodape h3{font-family:var(--f-texto);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#9FB0BE;margin-bottom:10px}
.rodape a{color:#E9EEF2}
.rodape__base{padding-top:24px;font-size:12.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8EA0B0}

/* Animação leve em poucos pontos: só liga quando o script adiciona .anim (sem JS, tudo aparece normal) */
.anim .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.anim .rv{opacity:1;transform:none;transition:none}}

@media (max-width:900px){
  .hero{min-height:auto;flex-direction:column;align-items:stretch}
  .hero__txt{order:1}
  .hero__foto{order:2;position:relative;inset:auto;margin-top:14px}
  .hero__foto img{height:auto;object-fit:initial;max-width:520px;margin:0 auto}
  .hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#B4A89C 0%,rgba(180,168,156,0) 22%)}
  .hero__col{padding-block:28px 0;gap:16px;max-width:none;margin:0;align-items:center;text-align:center}
  .hero h1{font-size:36px}
  .hero__sub{font-size:15.5px;line-height:1.6}
  .hero__dados{font-size:12.5px;padding-top:14px}
  .hero__sub{margin-inline:auto}
  .hero .btn{align-self:stretch;justify-content:center}
  .hero__logo{width:160px}
  .hero::before{display:none}
  .dor{grid-template-columns:1fr}
  .sobre.textura::before{width:340px;height:342px;left:auto;right:-110px;bottom:-90px}
  .sobre__grid{grid-template-columns:1fr}
  .sobre__foto{order:0}
  .sobre__foto{height:520px}
  .sobre__txt{padding:16px 24px 64px}
  .rodape__topo{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding-inline:20px}
  .btn{width:100%;justify-content:center;padding:17px 22px}
  .dor__intro .btn,.sobre__txt .btn{align-self:stretch}
  .item{padding:16px 18px;gap:14px}
  .marca-dagua{font-size:96px;bottom:-0.22em}
  .faq details p{padding-right:4px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.faq summary i{transition:none}}