/* ==========================================================================
   Dra. Nadjanine Linhares  ·  Gastroenterologia e Hepatologia
   Sistema visual derivado da identidade oficial da cliente:
   verde profundo #162219 · champanhe #D9C29B · creme #F0ECE8
   Tema TRAVADO em escuro. Acento único: champanhe.
   Raio: superfícies 16px · elementos interativos pílula.
   ========================================================================== */

@font-face{font-family:'Jost';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(../fonts/jost-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(../fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* rampa de verde: uma família só, sem inversão de tema */
  --v-950:#0B120E;
  --v-900:#0F1712;
  --v-850:#131E17;
  --v-800:#16241B;
  --v-700:#1C3123;
  --v-600:#24422E;

  /* tinta */
  --creme:#F0ECE8;      /* 16,2:1 sobre --v-950 */
  --corpo:#C9C7C0;      /* 11,5:1 */
  --apagado:#98A395;    /* 6,9:1  */

  /* acento ÚNICO */
  --ouro:#D9C29B;       /* 11,1:1 */
  --ouro-claro:#F0E0C8;
  --ouro-fundo:#A98A5C;

  --linha:rgba(217,194,155,.14);
  --linha-forte:rgba(217,194,155,.28);

  --r:16px;             /* raio de superfície */
  --r-sm:10px;
  --wrap:1240px;
  --gut:clamp(20px,5vw,48px);
  --pad-b:clamp(76px,8.6vw,116px);
  --curva:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--v-950);color:var(--corpo);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.75;font-weight:400;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--ouro);color:var(--v-950)}

/* --------------------------------------------------------- tipografia --- */
h1,h2,h3,h4{
  font-family:'Jost',system-ui,sans-serif;color:var(--creme);
  font-weight:300;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.35rem,5.1vw,4.35rem);line-height:1.07;letter-spacing:-.014em}
h2{font-size:clamp(1.85rem,3.5vw,3rem);line-height:1.13;letter-spacing:-.008em}
h3{font-size:clamp(1.2rem,1.6vw,1.42rem);line-height:1.28;letter-spacing:-.004em;font-weight:400}
p,li,summary,figcaption,blockquote{text-wrap:pretty}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.corpo,p:not([class]){max-width:62ch}

.kicker{
  font-family:'Jost',sans-serif;font-size:.72rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.24em;color:var(--ouro);
  margin:0;hyphens:none;
}
.lead{
  font-size:clamp(1.12rem,1.75vw,1.42rem);line-height:1.62;font-weight:300;
  color:var(--creme);max-width:34ch;letter-spacing:.001em;
}
.tiny{font-size:.875rem;line-height:1.6;color:var(--corpo)}
.num{font-variant-numeric:lining-nums tabular-nums}
.ouro{color:var(--ouro)}

/* ------------------------------------------------------------ estrutura -- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--pad-b);isolation:isolate}
.sec--900{background:var(--v-900)}
.sec--850{background:var(--v-850)}

/* superfície de bloco em 3 camadas: malha + fragmento do símbolo */
.tela{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.tela::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 64L64 0M-16 48L48 -16M16 80L80 16' stroke='%23D9C29B' stroke-width='.6' fill='none' opacity='.16'/%3E%3C/svg%3E");
}
.tela::after{
  content:'';position:absolute;
  width:var(--mono-w,54%);aspect-ratio:1054/757;
  right:var(--mono-x,-14%);top:var(--mono-y,-26%);bottom:var(--mono-b,auto);
  background:url(../brand/simbolo.webp) center/contain no-repeat;
  opacity:var(--mono-op,.05);transform:rotate(var(--mono-rot,0deg));
}

/* ------------------------------------------------------------- botões ---- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:'Jost',sans-serif;font-size:1.0rem;font-weight:400;
  letter-spacing:.03em;text-decoration:none;hyphens:none;white-space:nowrap;
  padding:1.02em 1.85em;border-radius:999px;border:0;cursor:pointer;
  transition:transform .35s var(--curva),box-shadow .35s var(--curva),background-color .35s var(--curva);
}
.btn .ic{width:1.2em;height:1.2em;flex:none;color:currentColor}
.btn--pri{background:var(--ouro);color:var(--v-950);box-shadow:0 10px 34px rgba(217,194,155,.14)}
.btn--pri:hover{background:var(--ouro-claro);transform:translateY(-2px);box-shadow:0 16px 44px rgba(217,194,155,.24)}
.btn--pri:active{transform:translateY(0) scale(.985)}
.btn--inv{background:var(--creme);color:var(--v-900);box-shadow:0 10px 34px rgba(0,0,0,.34)}
.btn--inv:hover{background:#fff;transform:translateY(-2px)}
.btn--inv:active{transform:translateY(0) scale(.985)}
.btn--fant{background:transparent;color:var(--creme);box-shadow:inset 0 0 0 1px var(--linha-forte);padding:.92em 1.6em}
.btn--fant:hover{background:rgba(217,194,155,.08);box-shadow:inset 0 0 0 1px var(--ouro);transform:translateY(-2px)}
.btn--fant:active{transform:translateY(0) scale(.985)}

.lnk{
  display:inline-flex;align-items:center;gap:.45em;color:var(--ouro);
  text-decoration:none;font-weight:500;font-size:.95rem;
  border-bottom:1px solid rgba(217,194,155,.34);padding-bottom:2px;
  transition:border-color .3s var(--curva),color .3s var(--curva);
}
.lnk:hover{border-color:var(--ouro);color:var(--ouro-claro)}
.lnk .ic{width:1em;height:1em}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--ouro);outline-offset:3px;border-radius:4px;
}

/* --------------------------------------------------------------- ícone --- */
.ic{width:1em;height:1em;display:inline-block;vertical-align:middle;fill:currentColor}
.ic--bloco{width:26px;height:26px;color:var(--ouro)}

/* ---------------------------------------------------------- revelação ---- */
/* Regra de segurança: o estado escondido das PALAVRAS depende de .esp, que é
   a classe que o próprio JS adiciona ao dividir o título. Sem JS não existe
   .pl nem .esp, então nada nasce invisível. */
.js .esp .pl{opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--curva),transform .8s var(--curva);
  transition-delay:calc(var(--i,0) * .1s + .05s)}
.js .esp.is-in .pl{opacity:1;transform:none}

.js .rv{opacity:0;transform:translateY(18px);transition:opacity .85s var(--curva),transform .85s var(--curva)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv[data-casc]>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--curva),transform .7s var(--curva)}
.js .rv[data-casc].is-in>*{opacity:1;transform:none}
.js .rv[data-casc].is-in>*:nth-child(1){transition-delay:.05s}
.js .rv[data-casc].is-in>*:nth-child(2){transition-delay:.13s}
.js .rv[data-casc].is-in>*:nth-child(3){transition-delay:.21s}
.js .rv[data-casc].is-in>*:nth-child(4){transition-delay:.29s}
.js .rv[data-casc].is-in>*:nth-child(5){transition-delay:.37s}
.js .rv[data-casc].is-in>*:nth-child(6){transition-delay:.45s}
.pl{display:inline-block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv,.js .rv[data-casc]>*,.js .esp .pl{opacity:1!important;transform:none!important}
}

/* ------------------------------------------------------ tipografia mob --- */
@media (max-width:560px){
  p,li{hyphens:auto;hyphenate-limit-chars:9 4 4}
  .kicker,.btn,.tag,.pill{hyphens:none}
}

/* ---------------------------------------------------------- utilitários -- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ouro);color:var(--v-950);
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-family:'Jost',sans-serif;text-decoration:none}
.pular:focus{left:0}