/* =============================================================================
   SEPTO · app.css
   Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa · www.dantetesta.com.br

   LEIA A TABELA ANTES DE MUDAR QUALQUER NUMERO DESTE ARQUIVO.
   Ela nao e decoracao: e a geometria MEDIDA das cinco referencias que o cliente
   escolheu, extraida com `ferramentas/medir-ref.mjs`. Adjetivo nao restringe nada;
   numero restringe. Mexer aqui sem medir de novo e voltar para o padrao.

   medida            oktilcal  doctor  nauthemes  medisch  clinicom  septo-hoje   AQUI
   ----------------  --------  ------  ---------  -------  --------  ----------   ----
   display            90/900     -       77/300    75/500   100/300    24px       76/500
   corpo              18px      14px     16px      16px     18px      16px        16px
   razao display/corpo 5,0x      -       4,8x      4,7x     5,6x      1,5x        4,75x
   raio dominante     554 em 0  475 em 0 800 em 0 1019 em 0 349 em 0  82 em 0     0
   raio de botao      40        0 e 10   3         8        3         24 e 30     0
   container          1200      1200     1270      1320     1140      1140        1240
   respiro de secao   120/120    -        -        116-130  120/120   sem padrao  120
   altura de botao    50-70     43-44    38-47     50-60    55        37-54       56
   rotulo de botao    16/600    14/400   15/500    15/700   14/600    14/400      15/600
   superficie         branco    branco   VERDE     branco   branco    branco      branco
   altura da home     9210      8001     8123      9442     7861      2436        7000+

   TRES LEITURAS QUE MANDAM AQUI
   1. O site antigo tinha razao 1,5x: nao era minimalismo, era ausencia de voz.
      O corpo NAO escala. So display, H2 e H3 recebem clamp(). Inflar tudo junto
      foi o que um cliente descreveu como "textos gigantes".
   2. Raio zero e unanime nas cinco referencias. Cartao arredondado com sombra e
      vocabulario de construtor visual e o olho treinado reconhece na hora.
   3. Cor: #005850 foi MEDIDO no arquivo do logo (5,2% da area). Da 8,36:1 sobre
      branco, entao passa AA como TEXTO, o que e raro em cor de marca.
      #8898a0 da 2,98:1 e e DECORATIVO. Nunca use como texto.
   ============================================================================= */

/* ---------------------------------------------------------------- 1. fontes */
/* Self-hospedadas. latin-ext existe e nao custa requisicao: o unicode-range faz
   o navegador baixar so o que a pagina precisa. */

@font-face{
	font-family:"Petrona";
	src:url("../fonts/petrona-latin.woff2") format("woff2");
	font-weight:300 700; font-style:normal; font-display:swap;
	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:"Petrona";
	src:url("../fonts/petrona-latin-ext.woff2") format("woff2");
	font-weight:300 700; font-style:normal; font-display:swap;
	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:"Be Vietnam Pro";
	src:url("../fonts/bevietnam400-latin.woff2") format("woff2");
	font-weight:400; font-style:normal; font-display:swap;
	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:"Be Vietnam Pro";
	src:url("../fonts/bevietnam400-latin-ext.woff2") format("woff2");
	font-weight:400; font-style:normal; font-display:swap;
	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:"Be Vietnam Pro";
	src:url("../fonts/bevietnam600-latin.woff2") format("woff2");
	font-weight:600; font-style:normal; font-display:swap;
	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:"Be Vietnam Pro";
	src:url("../fonts/bevietnam600-latin-ext.woff2") format("woff2");
	font-weight:600; font-style:normal; font-display:swap;
	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;
}

/* Fallbacks com metrica CASADA (R82). Os numeros abaixo foram MEDIDOS por
   `_docs/dev/medir-fallback.mjs`, comparando a largura de avanco real da fonte
   contra a do fallback do sistema. Chutar size-adjust e a forma mais comum de
   "otimizar CLS" sem otimizar nada: a troca de fonte continua empurrando a pagina. */
@font-face{
	font-family:"Petrona fallback";
	src:local("Georgia"),local("Times New Roman"),local("serif");
	size-adjust:99.25%; ascent-override:86.65%; descent-override:27.20%; line-gap-override:0%;
}
@font-face{
	font-family:"BVP fallback";
	src:local("Arial"),local("Helvetica"),local("sans-serif");
	size-adjust:109.02%; ascent-override:91.72%; descent-override:24.77%; line-gap-override:0%;
}

/* ---------------------------------------------------------------- 2. tokens */
:root{
	/* cor. contraste sobre branco anotado ao lado, medido, nao estimado */
	--verde:#005850;          /* 8,36:1 · institucional, botao, texto de acento */
	--verde-fundo:#00473f;    /* faixa escura */
	--tinta:#333333;          /* 12,63:1 · corpo e titulo */
	--tinta-2:#5A6B72;        /* 5,55:1 · secundario */
	--neutro:#8898a0;         /* 2,98:1 · DECORATIVO. proibido como texto */
	--linha:#E4E9E8;
	--superficie:#F2F5F4;
	--branco:#ffffff;
	--vivo:#1BB07C;           /* so o ponto de estado "aberta agora" */

	/* forma */
	--r:0;
	--r-pill:999px;
	--container:1240px;
	--leitura:820px;          /* medida de leitura de artigo */
	--sec-y:120px;
	--header-h:88px;
	--goteira:6px;

	/* tipografia. o corpo NAO tem clamp, de proposito */
	--f-display:"Petrona","Petrona fallback",Georgia,serif;
	--f-corpo:"Be Vietnam Pro","BVP fallback",Arial,sans-serif;
	--t-corpo:1rem;
	--t-lead:1.0625rem;
	--t-h3:1.5rem;
	--t-h2:clamp(2rem,1.35rem + 2.1vw,2.875rem);
	--t-display:clamp(2.375rem,1.05rem + 4.3vw,4.75rem);

	/* motion */
	--dur:.55s;
	--ease:cubic-bezier(.2,.7,.3,1);
}

/* ------------------------------------------------------------------ 3. base */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden}              /* fixed escapa do overflow do body, nao do html */
body{
	margin:0; background:var(--branco); color:var(--tinta);
	font:400 var(--t-corpo)/1.7 var(--f-corpo);
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--verde);text-decoration-thickness:1px;text-underline-offset:.18em}
button{font:inherit}
[hidden]{display:none !important}    /* `hidden` perde para qualquer classe sem isto */
picture{display:contents}            /* senao mede 0x0 e engana o verificador de overflow */

:focus-visible{outline:3px solid var(--verde);outline-offset:3px}

.septo-pular{
	position:absolute;left:-9999px;top:0;z-index:999;
	background:var(--verde);color:#fff;padding:14px 20px;font-weight:600;
}
.septo-pular:focus{left:0}

.septo-so-leitor{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.wrap{width:min(100% - 48px,var(--container));margin-inline:auto}
.wrap--leitura{width:min(100% - 48px,var(--leitura))}

/* ----------------------------------------------------------- 4. tipografia */
.display{font-family:var(--f-display);font-weight:500;font-size:var(--t-display);
         line-height:1.02;letter-spacing:-.015em;color:var(--tinta)}
.display em{font-style:normal;color:var(--verde)}
.h2{font-family:var(--f-display);font-weight:500;font-size:var(--t-h2);
    line-height:1.1;letter-spacing:-.01em;color:var(--tinta)}
.h3{font-family:var(--f-corpo);font-weight:600;font-size:var(--t-h3);line-height:1.25;color:var(--tinta)}
.lead{font-size:var(--t-lead);line-height:1.62;color:var(--tinta-2)}

/* eyebrow com regua, sempre a esquerda (R71) */
.eyebrow{
	display:flex;align-items:center;gap:14px;
	font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
	color:var(--verde);margin-bottom:22px;
}
.eyebrow::before{content:"";width:44px;height:2px;background:var(--verde);flex:0 0 auto}

/* numeral solto SOBE de peso: sem palavra ao lado que o sustente, some da tela */
.num{font-family:var(--f-display);font-weight:700;line-height:1;color:var(--verde)}

/* --------------------------------------------------------------- 5. botoes */
.btn{
	height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
	padding:0 26px;border:1px solid transparent;border-radius:var(--r);
	font-size:.9375rem;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
	transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn--1{background:var(--verde);color:#fff}
.btn--1:hover{background:var(--verde-fundo)}
.btn--2{background:transparent;color:var(--verde);border-color:var(--verde)}
.btn--2:hover{background:var(--verde);color:#fff}
.btn--claro{background:#fff;color:var(--verde)}
.btn--pequeno{height:44px;padding:0 18px;font-size:.875rem}

/* --------------------------------------------------------------- 6. header */
.hd{border-bottom:1px solid var(--linha);background:var(--branco)}
.hd__in{height:var(--header-h);display:flex;align-items:center;gap:32px}
.hd__logo{display:block;flex:0 0 auto}
.hd__logo img{width:var(--logo-w,132px);height:auto}
.hd__nav{margin-inline-start:auto}
.hd__nav ul{display:flex;gap:24px;align-items:center}
.hd__nav a{color:var(--tinta);text-decoration:none;font-size:.9375rem;font-weight:500;
           padding:6px 0;border-bottom:2px solid transparent}
.hd__nav a:hover,.hd__nav .current-menu-item > a{border-bottom-color:var(--verde);color:var(--verde)}
.hd__selo{text-decoration:none;
	display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;
	border:1px solid var(--verde);color:var(--verde);
	font-size:.8125rem;font-weight:600;white-space:nowrap;
}
.hd__ponto{width:7px;height:7px;border-radius:var(--r-pill);background:var(--vivo);
           box-shadow:0 0 0 3px rgba(27,176,124,.22);flex:0 0 auto}
.hd__cta{height:40px;padding:0 18px;font-size:.875rem}
.hd__menu{display:none;width:44px;height:44px;border:1px solid var(--linha);background:none;
          align-items:center;justify-content:center;cursor:pointer}
.hd__menu span,.hd__menu span::before,.hd__menu span::after{
	content:"";display:block;width:20px;height:2px;background:var(--tinta);position:relative}
.hd__menu span::before{position:absolute;top:-6px}
.hd__menu span::after{position:absolute;top:6px}

/* gaveta mobile. `fixed` escapa do overflow-x do body, entao o proprio painel
   precisa conter o seu conteudo, senao o documento ganha scroll lateral (R86) */
.drawer{
	position:fixed;inset:0;z-index:90;overflow:hidden;visibility:hidden;
	background:rgba(0,40,36,.45);opacity:0;transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.drawer.is-aberta{visibility:visible;opacity:1}
.drawer__painel{
	position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:#fff;
	padding:24px;overflow-y:auto;transform:translateX(100%);
	transition:transform var(--dur) var(--ease)}
.drawer.is-aberta .drawer__painel{transform:none}
.drawer__fechar{position:absolute;top:16px;right:16px;width:44px;height:44px;
                border:1px solid var(--linha);background:none;cursor:pointer;font-size:20px}
.drawer__nav ul{display:grid;gap:2px;margin-top:48px}
.drawer__nav a{display:block;padding:14px 0;border-bottom:1px solid var(--linha);
               color:var(--tinta);text-decoration:none;font-size:1.0625rem;font-weight:500}

/* ----------------------------------------------------------------- 7. hero */
.hero__row{display:flex;align-items:flex-end;gap:56px;margin-top:20px}
.hero__acoes{display:flex;gap:12px;flex:0 0 auto}
.banda{margin-top:28px}

/* -------------------------------------------------- 7b. banda de midia do hero
   Composicao declarada no Estudo: uma celula-destaque e duas verticais.
   Nasceu do ACERVO: os retratos da SEPTO sao 0,75 e 0,67 e recorte largo
   decapita as pessoas. Provado antes de existir CSS. */
.banda{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--goteira);height:420px}
.banda__cel{position:relative;overflow:hidden;background:#0e1a18;min-width:0}
.banda__cel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda__cel--video::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,40,36,.10),rgba(0,40,36,.20) 50%,rgba(0,40,36,.80))}
/* veu na cor da marca sobre a fachada azul, aprovado no Estudo: a placa continua
   legivel e o azul para de brigar com o verde da interface */
.banda__cel--fachada::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,88,80,.28),rgba(0,71,63,.55))}
.banda__legenda{
	position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;color:#fff;
	font-size:.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
	background:linear-gradient(180deg,transparent,rgba(0,40,36,.72))}
.play{position:absolute;left:26px;bottom:96px;z-index:3;display:flex;align-items:center;
      gap:14px;color:#fff;text-decoration:none}
.play__disco{width:66px;height:66px;border-radius:var(--r-pill);flex:0 0 auto;
             background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);
             display:grid;place-items:center;transition:background var(--dur) var(--ease)}
.play:hover .play__disco{background:rgba(255,255,255,.3)}
.play__tri{width:0;height:0;margin-left:4px;border-left:15px solid #fff;
           border-top:9px solid transparent;border-bottom:9px solid transparent}
.play__txt{font-size:.875rem;font-weight:500;line-height:1.4;max-width:210px}
.play__txt b{display:block;font-size:1rem;font-weight:600}

/* ------------------------------------- 8. ASSINATURA 1: Relogio de Regioes */
.relogio{
	position:relative;z-index:4;background:var(--branco);border-top:3px solid var(--verde);
	display:grid;grid-template-columns:repeat(5,1fr)}
.relogio--hero{margin-top:-70px;margin-left:auto;width:min(100%,940px)}
.relogio--secao{width:100%;border:1px solid var(--linha);border-top:3px solid var(--verde)}
.reg{padding:18px 16px 20px;border-left:1px solid var(--linha);min-width:0}
.reg:first-child{border-left:0}
.reg__nome{font-size:.875rem;font-weight:600;color:var(--tinta);margin-bottom:6px}
.reg__meta{font-size:.75rem;color:var(--tinta-2);line-height:1.45}
.reg__estado{
	display:inline-flex;align-items:center;gap:6px;margin-top:8px;
	font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
	color:var(--tinta-2)}
.reg__estado--aberta{color:var(--verde)}
.reg__ponto{width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;flex:0 0 auto}
.reg__estado--aberta .reg__ponto{animation:septo-pulso 2.4s var(--ease) infinite}
@keyframes septo-pulso{0%,100%{opacity:1}50%{opacity:.35}}

/* ------------------------------------------------------------- 9. secoes */
.sec{padding-block:var(--sec-y)}
.sec--claro{background:var(--superficie)}
.sec--escuro{background:var(--verde-fundo);color:#fff}
/* :where() zera a especificidade do seletor de tipo, entao um componente que
   declara a propria cor continua vencendo dentro da faixa escura */
.sec--escuro :where(h1,h2,h3,h4,p,li){color:#fff}
.sec--escuro .lead{color:rgba(255,255,255,.82)}
.sec--escuro .eyebrow{color:#7FD3C3}
.sec--escuro .eyebrow::before{background:#7FD3C3}
.sec__cabeca{max-width:760px;margin-bottom:56px}
.sec__cabeca .lead{margin-top:18px}

/* faixa de prova em numeros */
.provas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linha)}
.prova{background:var(--branco);padding:36px 28px}
.sec--claro .prova{background:var(--superficie)}
.prova__num{font-size:3.25rem}
.prova__txt{font-size:.9375rem;color:var(--tinta-2);margin-top:10px;line-height:1.5}

/* paineis de area, colados, sem raio e sem sombra */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--goteira)}
.area{
	position:relative;display:flex;flex-direction:column;justify-content:flex-end;
	min-height:320px;padding:28px;background:var(--superficie);color:var(--tinta);
	text-decoration:none;overflow:hidden;transition:background var(--dur) var(--ease)}
.area:hover{background:var(--verde);color:#fff}
.area:hover .area__desc,.area:hover .area__n{color:rgba(255,255,255,.8)}
.area__n{font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--tinta-2);margin-bottom:auto}
.area__nome{font-family:var(--f-display);font-weight:500;font-size:2rem;line-height:1.05}
.area__desc{font-size:.875rem;color:var(--tinta-2);margin-top:10px;line-height:1.5}

/* split editorial */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split--midia-dir .split__midia{order:2}
.split__midia{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--superficie)}
.split__midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__texto > * + *{margin-top:20px}

/* lista com marcador proprio */
.checks{display:grid;gap:14px}
.checks li{position:relative;padding-left:30px;color:var(--tinta-2)}
.checks li::before{
	content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--verde)}

/* chips factuais: fato, nunca adjetivo */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
	display:inline-flex;align-items:center;padding:5px 11px;border:1px solid var(--linha);
	font-size:.75rem;font-weight:500;color:var(--tinta-2);background:var(--branco)}

/* card de post e de medico */
.grade{display:grid;gap:32px}
.grade--3{grid-template-columns:repeat(3,1fr)}
.grade--4{grid-template-columns:repeat(4,1fr)}
.card{min-width:0}
.card__midia{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--superficie);display:block}
.card__midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                 transition:transform 1.2s var(--ease)}
.card:hover .card__midia img{transform:scale(1.04)}
.card__titulo{font-size:1.125rem;font-weight:600;line-height:1.35;margin-top:16px}
.card__titulo a{color:var(--tinta);text-decoration:none}
.card__titulo a:hover{color:var(--verde)}
.card__meta{font-size:.8125rem;color:var(--tinta-2);margin-top:8px}
/* retrato de medico: proporcao 3/4 nativa do acervo, NUNCA recorte oval */
.card--medico .card__midia{aspect-ratio:3/4}

/* faixa de chamada final. cor distinta do rodape, senao os dois blocos grudam */
.cta-final{background:var(--verde);color:#fff;padding-block:88px}
.cta-final .h2,.cta-final p{color:#fff}
.cta-final__in{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}

/* --------------------------------------------------------------- 10. rodape */
.ft{background:var(--verde-fundo);color:rgba(255,255,255,.82);padding-block:72px 32px}
.ft a{color:#fff;text-decoration:none}
.ft a:hover{text-decoration:underline}
.ft__topo{display:grid;grid-template-columns:1.2fr 2fr;gap:56px;padding-bottom:48px;
          border-bottom:1px solid rgba(255,255,255,.16)}
.ft__unidades{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.ft__uni-nome{color:#fff;font-weight:600;font-size:.9375rem;margin-bottom:6px}
.ft__uni-txt{font-size:.8125rem;line-height:1.55}
.ft__base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
          padding-top:28px;font-size:.8125rem}

/* ------------------------------------------------------ 11. reveal (gated) */
/* Sem JS o conteudo aparece. Esconder atras de opacity:0 cru some para o
   crawler e para quem tem JS quebrado. */
.js .reveal{opacity:0;transform:translateY(22px);
            transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
	                     transition-duration:.01ms !important;scroll-behavior:auto !important}
	.js .reveal{opacity:1;transform:none}
}

/* ------------------------------------------------------------ 12. tablet */
@media (max-width:1023px){
	:root{--sec-y:88px}
	.hd__nav{display:none}
	.hd__menu{display:flex;margin-inline-start:auto}
	.hd__selo{display:none}
	.hero__row{flex-direction:column;align-items:flex-start;gap:22px}
	.banda{grid-template-columns:1.4fr 1fr;height:360px}
	.banda__cel--equipe{display:none}   /* preserva video e fachada 24h, que e o diferencial */
	.relogio{grid-template-columns:repeat(3,1fr)}
	.relogio--hero{width:100%;margin-top:-40px}
	.reg:nth-child(4){border-left:0}
	.areas{grid-template-columns:repeat(2,1fr)}
	.provas{grid-template-columns:repeat(2,1fr)}
	.grade--3,.grade--4{grid-template-columns:repeat(2,1fr)}
	.split{grid-template-columns:1fr;gap:40px}
	.split--midia-dir .split__midia{order:0}
	.ft__topo{grid-template-columns:1fr;gap:40px}
	.ft__unidades{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------ 13. celular */
@media (max-width:639px){
	:root{--sec-y:64px;--header-h:72px}
	.wrap,.wrap--leitura{width:calc(100% - 32px)}
	.hd__in{gap:12px}
	.hd__cta{padding:0 14px;font-size:.8125rem}
	.banda{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px;height:auto}
	.banda__cel--video{grid-column:1/-1}
	.banda__cel--equipe{display:block}
	.play{left:20px;bottom:20px}
	.play__disco{width:54px;height:54px}
	.relogio{grid-template-columns:1fr 1fr}
	.relogio--hero{margin-top:0}
	.reg{border-left:0;border-top:1px solid var(--linha)}
	.reg:nth-child(odd){border-right:1px solid var(--linha)}
	.areas,.provas,.grade--3,.grade--4{grid-template-columns:1fr}
	.hero__acoes{flex-direction:column;width:100%}
	.area{min-height:220px}
	.prova__num{font-size:2.5rem}
	.cta-final__in{flex-direction:column;align-items:flex-start}
	.ft__unidades{grid-template-columns:1fr}
	.btn{width:100%}
	.hd__cta,.btn--pequeno{width:auto}
}

/* ============================================================ 14. paginas internas
   O site antigo repetia uma faixa de 300px com foto em TODO template, o que
   deixava toda pagina com a mesma hierarquia e nenhuma com voz. Aqui o cabecalho
   e tipografico: gasta menos altura e deixa a pagina comecar a falar antes. */
.cab{padding:48px 0 8px}
.migalhas{font-size:.8125rem;color:var(--tinta-2);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.migalhas a{color:var(--tinta-2);text-decoration:none}
.migalhas a:hover{color:var(--verde);text-decoration:underline}
.cab__t{max-width:14ch}
.cab__lead{max-width:640px;margin-top:22px}

/* prosa do editor: medida de leitura, nunca a largura do container */
.prosa > * + *{margin-top:22px}
.prosa h2{font-family:var(--f-display);font-weight:500;font-size:var(--t-h2);line-height:1.12;margin-top:48px}
.prosa h3{font-size:1.375rem;font-weight:600;margin-top:36px}
.prosa ul{display:grid;gap:12px}
.prosa ul li{position:relative;padding-left:26px}
.prosa ul li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--verde)}
.prosa img{margin-block:12px}
.prosa a{text-decoration:underline}

/* ------------------------------- ASSINATURA 2 · seletor de unidade p/ WhatsApp */
.seletor__grade{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--goteira)}
.seletor__regiao{background:var(--branco);border:1px solid var(--linha);padding:26px 26px 20px}
.sec--claro .seletor__regiao{background:var(--branco)}
.seletor__nome{
	font-family:var(--f-display);font-weight:500;font-size:1.625rem;line-height:1.1;
	color:var(--verde);padding-bottom:16px;border-bottom:2px solid var(--verde);margin-bottom:4px}
.seletor__lista{display:grid}
.seletor__item{padding:20px 0;border-bottom:1px solid var(--linha)}
.seletor__item:last-child{border-bottom:0;padding-bottom:0}
.seletor__topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seletor__uni{font-size:1.0625rem;font-weight:600;color:var(--tinta);text-decoration:none}
.seletor__uni:hover{color:var(--verde);text-decoration:underline}
.seletor__24{
	display:inline-flex;align-items:center;padding:3px 9px;background:var(--verde);color:#fff;
	font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.seletor__end{font-size:.875rem;color:var(--tinta-2);margin-top:6px;line-height:1.5}
.seletor__estado{
	display:inline-flex;align-items:center;gap:6px;margin-top:10px;
	font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2)}
.seletor__estado--aberta{color:var(--verde)}
.seletor__estado--aberta .reg__ponto{animation:septo-pulso 2.4s var(--ease) infinite}
.seletor__acoes{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* --------------------------------------------- lista de exames com chips factuais */
.exames{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--goteira)}
.exame{background:var(--branco);border:1px solid var(--linha);padding:24px 26px 26px;min-width:0}
.exame__nome{font-size:1.0625rem;font-weight:600;line-height:1.35;color:var(--tinta)}
.exame__txt{font-size:.9375rem;color:var(--tinta-2);margin-top:8px;line-height:1.6}

/* ------------------------------------------ ASSINATURA 3 · Trilha de Exame */
.trilha{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--goteira);counter-reset:etapa}
.trilha__etapa{
	position:relative;padding:32px 26px 30px;background:var(--superficie);min-width:0}
.trilha__etapa::before{
	content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--verde)}
.trilha__n{
	display:block;font-family:var(--f-display);font-weight:700;font-size:1.75rem;
	color:var(--verde);line-height:1;margin-bottom:16px}
.trilha__t{font-size:1.125rem;font-weight:600;color:var(--tinta)}
.trilha__d{font-size:.875rem;color:var(--tinta-2);margin-top:10px;line-height:1.6}

/* -------------------------------------------------------------- paginacao */
.navigation.pagination{margin-top:56px}
.nav-links{display:flex;gap:6px;flex-wrap:wrap}
.page-numbers{
	display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;
	padding:0 12px;border:1px solid var(--linha);color:var(--tinta);text-decoration:none;font-size:.9375rem}
.page-numbers:hover{border-color:var(--verde);color:var(--verde)}
.page-numbers.current{background:var(--verde);border-color:var(--verde);color:#fff;font-weight:600}

@media (max-width:1023px){
	.cab{padding-top:36px}
	.cab__t{max-width:none}
	.seletor__grade{grid-template-columns:1fr}
	.exames{grid-template-columns:1fr}
	.trilha{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:639px){
	.trilha{grid-template-columns:1fr}
	.seletor__acoes .btn{width:auto;flex:1 1 auto}
}

/* ------------------------------------------------------ 15. single de unidade */
.uni__acoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.uni{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:start}
.uni__dados{background:var(--superficie);padding:32px 30px;position:sticky;top:24px}
.uni__bloco{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--linha)}
.uni__rot{
	font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
	color:var(--verde);margin-bottom:8px}
.uni__val{font-size:.9375rem;line-height:1.6;color:var(--tinta)}
.horas{width:100%;border-collapse:collapse;font-size:.875rem}
.horas th{text-align:left;font-weight:500;color:var(--tinta-2);padding:5px 0;width:46%}
.horas td{text-align:right;color:var(--tinta);padding:5px 0}
.uni__foto{margin-bottom:32px}
.uni__texto .prosa{max-width:var(--leitura)}

@media (max-width:1023px){
	.uni{grid-template-columns:1fr;gap:36px}
	.uni__dados{position:static}
}

/* --------------------------------------------------- 16. estado vazio honesto */
.vazio{max-width:640px;padding:56px 0}

/* ================================================= 17. composicao editorial
   Texto corrido solto numa secao nao e pagina, e documento colado. Estes
   componentes existem para DISTRIBUIR a copy do cliente com hierarquia, sem
   reescreve-la. */

/* paragrafo de abertura: corpo maior, mas ainda longe do display */
.manifesto{font-size:1.25rem;line-height:1.62;color:var(--tinta);max-width:34ch}
.sec--escuro .manifesto{color:#fff}

/* legenda de figura */
.legenda{
	margin-top:12px;font-size:.8125rem;line-height:1.5;color:var(--tinta-2);
	padding-left:14px;border-left:2px solid var(--verde)}
.sec--escuro .legenda{color:rgba(255,255,255,.7);border-left-color:#7FD3C3}

/* coluna de leitura com a marca ancorada na lateral */
.editorial{display:grid;grid-template-columns:220px 1fr;gap:64px;align-items:start}
.editorial__marca{position:sticky;top:32px}
.editorial__marca img{width:132px;height:auto;opacity:.5;filter:grayscale(1)}
.editorial__texto{max-width:var(--leitura)}
.editorial__texto p + p{margin-top:22px}
.editorial__texto p{font-size:1.0625rem;line-height:1.72;color:var(--tinta-2)}

/* capitular editorial: so no PRIMEIRO paragrafo, e so no desktop.
   Em coluna estreita a letra come metade da primeira linha. */
.capitular::first-letter{
	float:left;font-family:var(--f-display);font-weight:500;font-size:4.25rem;
	line-height:.82;margin:.08em .12em 0 0;color:var(--verde)}

/* citacao de missao */
.citacao{max-width:900px}
.citacao__txt{
	font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);
	line-height:1.28;color:#fff;margin-top:18px;padding-left:28px;
	border-left:3px solid #7FD3C3}

/* selos de credencial: ano, instituicao e o que aquilo significa */
.selos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--goteira)}
.selo{background:var(--branco);border:1px solid var(--linha);padding:32px 28px 30px;min-width:0}
.selo__ano{font-family:var(--f-display);font-weight:700;font-size:2.5rem;line-height:1;color:var(--verde)}
.selo__inst{
	font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
	color:var(--tinta);margin-top:12px}
.selo__txt{font-size:.9375rem;line-height:1.6;color:var(--tinta-2);margin-top:12px}

@media (max-width:1023px){
	.editorial{grid-template-columns:1fr;gap:32px}
	.editorial__marca{position:static}
	.editorial__marca img{width:104px}
	.selos{grid-template-columns:1fr}
	.manifesto{max-width:none}
}
@media (max-width:639px){
	.manifesto{font-size:1.125rem}
	.capitular::first-letter{font-size:3rem}
}

/* Split com texto curto ao lado de foto alta: centralizar verticalmente cria um
   vao morto acima do texto. Ancora no topo e deixa o texto respirar por baixo. */
.split--topo{align-items:start}
.split--topo .split__texto{padding-top:8px}