/* ===== Gina Saúde — site de marketing =====
   Consome a biblioteca do DS: gina-ds.css (linkado ANTES deste arquivo).
   A Rubik, o reset de box-sizing, o modelo de foco (anel-duplo) e os tokens de
   cor/acento vêm da lib. Aqui ficam só os apelidos do site + a camada editorial
   (grid, escala de display e highlight amarelo, que são próprios do marketing).
   Acento: CTAs usam o degradê LARANJA da marca (--grad-cta). Regra: nunca hex de
   acento cru — sempre via token. ============================================ */

:root{
  /* ---- apelidos sobre a biblioteca (gina-ds.css) ---- */
  --ink:       var(--gina-text-strong);    /* #02000A (neutral/darkest) — texto/H1 do Figma */
  --ink-soft:  var(--color-text-sub);      /* parágrafos */
  --white:     var(--color-surface);       /* superfície branca dos cards */
  --footer:    var(--gina-ink-principal);  /* #292929 — rodapé igual ao Figma */
  --grad:      var(--grad-cta);            /* degradê de AÇÃO (laranja) — Cadastre-se, CTAs */

  /* ---- camada editorial do marketing (fora da rampa do DS) ---- */
  --bg:        #ebebeb;   /* color/background/canvas do Figma */
  --bg-alt:    #e3e3e3;   /* seção alternada levemente mais escura */
  --yellow:    #fff35b;   /* highlight amarelo editorial */
  /* padding lateral: 128px @1440 (Figma px-128); vira 32px fixo abaixo de 1200px */
  --pad:       128px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-rg);           /* base 16px (a lib usa 20px no body — aqui voltamos pro editorial) */
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow-x:clip;                  /* a imagem-hero sangra até a borda direita sem gerar scroll */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:1184px;margin:0 auto;padding:0 32px}

/* fundo branco na página de perfil do profissional */
body.bg-white{background:#fff}
/* header permanece sempre cinza, mesmo no fundo branco do perfil */
/* card de perfil sobre fundo branco ganha borda sutil p/ não sumir */
body.bg-white .prof-card{border:1px solid #ececec}

/* ===== Header / Nav (fiel ao Figma — tela de Login) ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--gina-ink-darkest);   /* #050505 */
}
.nav{
  display:flex;align-items:center;gap:40px;
  max-width:1184px;margin:0 auto;padding:18px 32px;
}
.nav__logo img{height:48px;width:auto}
.nav__links{display:flex;gap:40px;list-style:none}
.nav__links a{
  /* general/body-1: Rubik Light 16, lh1.5, tracking 4% */
  font-weight:300;font-size:var(--fs-rg);line-height:1.5;letter-spacing:0.04em;
  color:var(--ink);padding:2px 6px;border-radius:4px;
  transition:background .28s var(--ease), color .28s var(--ease);
}
/* marca amarela da Gina: realça a PÁGINA ATUAL (is-active, em BOLD) e o hover */
.nav__links a:hover{background:#fff7a8}
.nav__links a.is-active{background:var(--yellow);font-weight:700}
.nav__toggle{display:none;background:none;border:0;font-size:28px;cursor:pointer}
/* grupo à direita: busca + CTAs, com separadores */
.nav__right{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav__sep{width:1px;height:26px;background:var(--color-border)}
.nav__search{
  width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--color-text);
}
.nav__search:hover{color:var(--color-accent)}
.nav__cta{height:48px;padding:0 24px}   /* botões do header reutilizam .btn */

/* FAB de suporte (degradê de ação — laranja) */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:56px;height:56px;border-radius:var(--radius-pill);
  background:var(--grad-cta);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:var(--shadow-1);
}

/* ===== Tipografia utilitária ===== */
.eyebrow{font-weight:700;font-size:var(--fs-rg);letter-spacing:.2px;margin-bottom:18px}
.eyebrow.mark{background:var(--yellow);display:inline-block;padding:2px 6px}
h1,.h1{font-weight:700;font-size:var(--fs-display-lg);line-height:1.04;letter-spacing:-1px}
.h1-light{font-weight:300;font-size:var(--fs-display-lg);line-height:1.08;letter-spacing:-1px}
h2,.h2{font-weight:300;font-size:var(--fs-display-sm);line-height:1.1}
.lead{font-weight:300;font-size:var(--fs-editorial-lead);color:var(--ink-soft);max-width:46ch}
.body{font-weight:300;font-size:var(--fs-editorial-body);color:var(--ink-soft);margin-bottom:18px}
.mark{background:var(--yellow);padding:2px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ===== Botões ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  /* general/button: Rubik SemiBold 16, tracking 2% */
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-rg);line-height:1;letter-spacing:0.02em;
  height:48px;padding:0 24px;border-radius:100px;border:2px solid var(--ink);
  cursor:pointer;background:none;color:var(--ink);
  transition:opacity .26s var(--ease), background-color .26s var(--ease), color .26s var(--ease), transform .26s var(--ease);
}
.btn:active{transform:scale(.98)}
/* background-origin:border-box → o degradê preenche TODA a border-box (a borda é transparente p/ manter
   o mesmo tamanho do .btn--outline). Sem isso, o gradiente fica na padding-box e a faixa de 2px da borda
   mostra a cor clampada das pontas (coral na esq / laranja na dir) = "as pontinhas". */
.btn--grad{background:var(--grad);color:#fff;border-color:transparent;background-origin:border-box}
.btn--dark{background:var(--gina-ink-principal);color:#fff;border-color:var(--gina-ink-principal)}  /* #292929 (Entrar) */
.btn--outline{background:transparent;color:var(--ink)}
/* hover: gradiente escurece; escuro vira outline (borda preta, sem bg, texto preto); outline preenche */
.btn--grad:hover{opacity:.88}
.btn--dark:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}

/* ===== Hero ===== */
.hero{padding:72px 0 96px}
/* seção mais contida e centralizada (mais padding lateral que o resto do site) */
.hero .wrap{max-width:1040px}
.hero__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.hero h1{margin-bottom:24px}
.hero__cta{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero__img{position:relative;display:flex;justify-content:flex-end}
.hero__img img{
  width:100%;max-width:600px;height:auto;
  aspect-ratio:528/477;object-fit:contain;
}
/* desktop: a foto cresce pra DIREITA a partir da posição empurrada (borda esquerda fixa),
   usando parte do respiro lateral da seção — maior, sem perder o deslocamento. */
@media (min-width:1185px){
  .hero__img{justify-content:flex-start;min-width:0}
  .hero__img img{width:470px;max-width:none}
}

/* ===== Seção mockup do app (dentro de card branco) =====
   Proporções medidas no original (card 829x438 @ vw1440):
   padding 50px 52px · texto col ~369px · título 42px/peso400 · celular 364x453 */
/* padding-bottom maior acomoda o vazamento dos celulares sem invadir a próxima seção */
.feature{padding:40px 0 180px}
.feature__card{
  background:var(--white);
  border-radius:18px;
  box-shadow:rgba(15,15,15,.08) -0.6px 0.8px 25px 4px;   /* sombra de destaque (card showcase da home) */
  padding:60px 64px;
  width:100%;
  min-height:470px;
  margin:0 auto;
  position:relative;
  overflow:visible;
}
.feature__txt{
  max-width:44%;          /* coluna de texto à esquerda */
}
.feature__txt .eyebrow{margin-bottom:22px}
.feature__txt h2{margin-bottom:22px;font-weight:400;font-size:var(--fs-display-md);line-height:1.06;letter-spacing:-.5px}
.feature__txt .body{margin-bottom:30px;font-size:var(--fs-editorial-body)}
/* dois celulares maiores, ancorados no canto superior-direito, vazando por baixo */
.feature__img{position:absolute;top:80px;right:60px;width:450px;height:560px}
.feature__img img{
  position:absolute;top:0;right:0;
  width:450px;max-width:none;display:block;
}

/* ===== Comunidade ===== */
.community{background:var(--bg-alt);padding:90px 0}
.community__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.community__img img{width:100%;max-width:440px;object-fit:cover;aspect-ratio:3/4}
.community__txt .h2{margin-bottom:24px;font-weight:300;font-size:var(--fs-xxlg);line-height:1.12}
.community__txt .body{max-width:48ch}

/* ===== CTA / Form ===== */
.signup{padding:100px 0}
.signup__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.signup h2.big{font-weight:700;font-size:var(--fs-giant);line-height:1.02;letter-spacing:-1.5px;margin-bottom:24px}
.card{
  background:var(--white);border-radius:28px;padding:48px;
  /* chapado: sem sombra */
}
.field{margin-bottom:24px}
.field label{display:block;font-size:var(--fs-editorial-caption);font-weight:400;margin-bottom:8px}
.field input{
  width:100%;padding:16px 18px;border:1.5px solid #c9c9c9;border-radius:14px;
  font-family:inherit;font-size:var(--fs-rg);background:#fff;
}
.field input:focus{outline:none;border-color:var(--ink)}

/* ===== Páginas internas ===== */
.page-hero{padding:120px 0 60px}   /* respiro generoso abaixo do header (gina cuida) */
.page-hero .h1{max-width:18ch}
.about-intro{padding:70px 0 70px}   /* topo balanceado com a base */
.about-intro__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:start}
.about-intro__grid .h1{text-align:right}
.about-mission{background:var(--bg-alt);padding:90px 0}
.about-mission__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-mission__img{position:relative}
.about-mission__photo{
  width:100%;max-width:520px;margin-left:auto;
  aspect-ratio:520/543;object-fit:cover;display:block;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20viewBox%3D%2723.999%2020.502%20152%20158.998%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M33.758%2060.174c-17.32%2024.757-8.751%2062.067%203.819%2086.859%207.773%2015.332%2021.838%2035.886%2046.141%2031.984%205.526-.887%2010.586-3.167%2016.054-4.271%2016.952-3.424%2036.019%204.667%2051.766-1.53%206.229-2.451%2011.013-6.889%2014.686-11.707%2011.588-15.202%2012.988-35.352%203.585-51.58-6.596-11.383-18.021-20.815-22.417-32.896-4.313-11.851-1.286-24.74-4.481-36.828-3.886-14.703-20.471-25.243-37.541-16.56-6.449%203.28-11.975%207.686-19.005%2010.185-7.319%202.602-15.435%203.282-22.862%205.674-13.94%204.488-23.516%2011.767-29.745%2020.67z%27/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%27none%27%20viewBox%3D%2723.999%2020.502%20152%20158.998%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M33.758%2060.174c-17.32%2024.757-8.751%2062.067%203.819%2086.859%207.773%2015.332%2021.838%2035.886%2046.141%2031.984%205.526-.887%2010.586-3.167%2016.054-4.271%2016.952-3.424%2036.019%204.667%2051.766-1.53%206.229-2.451%2011.013-6.889%2014.686-11.707%2011.588-15.202%2012.988-35.352%203.585-51.58-6.596-11.383-18.021-20.815-22.417-32.896-4.313-11.851-1.286-24.74-4.481-36.828-3.886-14.703-20.471-25.243-37.541-16.56-6.449%203.28-11.975%207.686-19.005%2010.185-7.319%202.602-15.435%203.282-22.862%205.674-13.94%204.488-23.516%2011.767-29.745%2020.67z%27/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
/* quote sobreposta no canto inferior esquerdo da foto */
.quote{position:absolute;left:6%;bottom:16%;max-width:62%;z-index:2}
.quote p{margin-bottom:0;display:inline}
.quote .mark{
  font-weight:700;font-size:var(--fs-editorial-body-lg);line-height:1.45;
  background:var(--yellow);box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:2px 4px;
}
.about-mission__caption{margin-top:20px;max-width:520px;margin-left:auto}
.about-mission__caption cite{display:block;font-style:normal;font-weight:700;font-size:var(--fs-editorial-body)}
.about-mission__caption cite span{display:block;font-weight:300;color:var(--ink-soft);font-size:var(--fs-editorial-caption);margin-top:2px}

/* ===== Grid profissionais ===== */
.pros{padding:50px 0 90px}
.pros__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pro-card{
  background:var(--white);border-radius:var(--radius-md);
  padding:var(--space-xs) var(--space-sm) var(--space-sm);   /* chapado: topo 16 (leading) → óptico ≈ 24, laterais/base 24 */
  display:flex;flex-direction:column;                        /* sem sombra (igual aos cards do app, Figma) */
}
.pro-card h3{font-weight:300;font-size:var(--fs-display-2xs);line-height:1.15;margin-bottom:16px}
.pro-card .loc{font-size:var(--fs-editorial-caption);color:var(--ink-soft);margin-bottom:12px;min-height:21px}
.pro-card .spec{margin-bottom:24px}
.pro-card .spec span{background:var(--yellow);font-weight:500;font-size:var(--fs-editorial-caption);padding:2px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pro-card .btn{margin-top:auto;align-self:flex-start;height:44px;padding:0 26px}

/* ===== Página de detalhe do profissional ===== */
.prof-detail{padding:60px 0 90px}
.prof-card{
  position:relative;
  background:var(--white);
  border-radius:18px;
  /* chapado: sem sombra */
  padding:64px 70px 70px;
  max-width:830px;
  margin:0 auto;            /* centralizado horizontalmente */
  overflow:visible;          /* altura cresce com o conteúdo */
}
/* blob decorativa no canto superior direito, vazando bem pra fora */
.prof-card__blob{
  position:absolute;top:-44px;right:-90px;
  width:300px;height:300px;pointer-events:none;
}
.prof-card .ico{flex:0 0 auto}
.prof-card__loc{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-rg);color:var(--ink-soft);margin-bottom:16px;
}
.prof-card .h1{max-width:14ch;margin-bottom:14px;position:relative;z-index:1}
.prof-card__spec{margin-bottom:32px}
.prof-card__spec span{
  background:var(--yellow);font-weight:700;font-size:var(--fs-rg);
  padding:2px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.prof-card__bio{
  font-weight:300;font-size:var(--fs-editorial-body);color:var(--ink-soft);line-height:1.7;
  max-width:60ch;margin-bottom:56px;position:relative;z-index:1;
}
.prof-card__plano{margin-bottom:26px}
.prof-card__plano-q{font-weight:700;font-size:var(--fs-editorial-body);margin-bottom:6px}
.prof-card__plano-a{font-weight:300;font-size:var(--fs-editorial-body);color:var(--ink-soft)}
.prof-card__tel{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-editorial-body-lg)}

/* ===== Footer (fiel ao Figma — tela de Login) ===== */
.site-footer{background:var(--gina-ink-2);color:#fff;padding:64px 0 56px}
.site-footer__inner{display:flex;align-items:flex-start;gap:56px}
.site-footer__logo{padding-right:56px;border-right:1px solid var(--gina-ink-3)}
.site-footer__logo img{height:40px;filter:brightness(0) invert(1)}
.site-footer__col h4{font-size:var(--fs-rg);font-weight:var(--fw-bold);margin-bottom:18px}
.site-footer__col a,.site-footer__col span{display:block;font-size:var(--fs-sm);color:#d6d6d6;margin-bottom:14px}
.site-footer__col a{text-decoration:underline}
.site-footer__col a:hover{color:#fff}
.site-footer__right{margin-left:auto}
.site-footer__social{display:flex;gap:14px;margin-bottom:28px}
.site-footer__social a{
  width:36px;height:36px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;
}
.site-footer__social .ig{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 70%,#285AEB 110%)}
.site-footer__social .yt{background:#ff0000}
.site-footer__social .tw{background:#1d9bf0}
.site-footer__legal-txt{font-size:var(--fs-sm);color:#9a9a9a;line-height:var(--lh-relaxed)}
.site-footer__copy{margin-top:24px;font-size:var(--fs-sm);color:#9a9a9a}

/* ===== Página legal (privacidade / termos) ===== */
.legal{padding:60px 0 90px}
.legal .wrap{max-width:820px}
.legal__draft{
  background:var(--yellow);display:inline-block;
  font-weight:var(--fw-bold);font-size:var(--fs-editorial-caption);line-height:1.4;
  padding:8px 12px;border-radius:8px;margin-bottom:28px;
}
.legal h2{font-weight:var(--fw-bold);font-size:var(--fs-display-3xs);line-height:1.2;margin:40px 0 14px}
.legal h2:first-of-type{margin-top:8px}
.legal p,.legal li{
  font-weight:var(--fw-light);font-size:var(--fs-editorial-body);color:var(--ink-soft);
  line-height:1.7;margin-bottom:14px;
}
.legal ul{padding-left:22px;margin-bottom:14px}
.legal a{text-decoration:underline}
.legal__updated{font-size:var(--fs-editorial-caption);color:var(--ink-soft);margin-top:32px}

/* ===== Responsivo ===== */
@media (max-width:1200px){
  :root{--pad:32px}
}
@media (max-width:900px){
  h1,.h1,.h1-light{font-size:var(--fs-xxlg)}
  h2,.h2{font-size:var(--fs-xlg)}
  .signup h2.big{font-size:var(--fs-display-md)}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--bg);padding:10px var(--pad) 24px;
    border-bottom:1px solid var(--gina-ink-darkest);
  }
  .nav__links.open{display:flex}
  .nav__links li{padding:10px 0}
  /* hambúrguer fica à DIREITA; busca/CTAs do header sa em no mobile */
  .nav__toggle{display:block;order:3;margin-left:auto}
  .nav__right{display:none}
  .hero__grid,.community__grid,.signup__grid,
  .about-intro__grid,.about-mission__grid{grid-template-columns:1fr;gap:40px}
  .feature{padding:40px 0 60px}
  .feature__card{padding:40px 32px;min-height:0}
  .feature__txt{max-width:100%}
  .feature__txt h2{font-size:var(--fs-display-xs)}
  .feature__img{position:static;width:auto;height:auto;margin-top:28px}
  .feature__img img{position:static;width:100%;max-width:340px;margin:0 auto}
  .about-intro__grid .h1{text-align:left}
  .hero__img img,.feature__img img,.community__img img,.about-mission__img img{margin:0 auto}
  .pros__grid{grid-template-columns:repeat(2,1fr)}
  .nav__right{gap:12px}
  .site-footer__inner{flex-wrap:wrap;gap:32px}
  .site-footer__logo{border-right:0;padding-right:0;flex-basis:100%}
  .site-footer__right{margin-left:0}
}
@media (max-width:560px){
  .pros__grid{grid-template-columns:1fr}
  .card{padding:30px}
  h1,.h1,.h1-light{font-size:var(--fs-display-xs)}
}