/* =============================================================================
   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;           /* ponto de estado "aberta agora" */
	--fechado:#FF6B5A;        /* ponto de estado "fechada". So PONTO, nunca texto:
	                             da 3,1:1 sobre branco, que reprova para texto normal.
	                             Elemento decorativo de 7px nao e texto e nao precisa
	                             passar em 4,5:1; o significado vem da palavra ao lado. */

	/* 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)}
/* O titulo da home tem uma palavra de 21 letras, "otorrinolaringologico,", que
   NAO quebra. A 38px ela mede 354px: cabe em 390 (358 uteis) e vaza 26px em 360,
   largura comum de Android, e 66px em 320 (medido em 2026-10-28). Abaixo de 390
   o titulo acompanha a tela; dali para cima a escala do Estudo continua valendo. */
.hero .display{font-size:min(var(--t-display),calc(10.6vw - 4px))}
.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. */
/* Proporcao da banda REFEITA para caber o retrato do trio inteiro.
   A celula grande era 546x420 (1,30 deitada) e a foto e 1086x1448 (0,75 em pe).
   Nessa combinacao o recorte so aproveitava 57% da altura, e cortava o medico
   sentado na altura do peito, que foi a reclamacao da clinica.
   Com 1,1fr e 560px a celula fica 436x560 (0,78), e o recorte passa a aproveitar
   96% da foto: entra praticamente inteira. As duas celulas verticais ficam
   396x560 (0,707), quase a mesma proporcao de antes (0,719), entao as imagens
   delas continuam servindo sem retrabalho. */
.banda{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:var(--goteira);height:560px}
.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))}
/* O veu desta celula era VERDE, calibrado para a placa azul que estava aqui.
   A foto mudou para a fachada laranja da clinica, e verde sobre laranja compoe
   barro: as duas cores ficam a 180 graus no circulo e o veu apaga as duas.
   Trocado por veu neutro, com o peso MEDIDO em `_docs/dev/trata-imagens.php`
   contra a faixa de baixo da foto nova:
     fundo da faixa .............. rgb(140, 111, 86)
     veu verde antigo (.55) ...... composto rgb( 63, 89, 73) · branco  7,65:1
     veu neutro (.78 de #002824) . composto rgb( 30, 55, 47) · branco 12,66:1
   Os dois passam AA. O neutro passa por margem maior E deixa o laranja da
   marca aparecer, que e o motivo da troca. */
.banda__cel--fachada::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,40,36,.10),rgba(0,40,36,.22) 50%,rgba(0,40,36,.78))}
/* A legenda ficava na BASE da celula, debaixo do relogio. O relogio sobe 70px
   sobre a banda, de proposito, e cobria a legenda inteira: duas frases escritas
   que ninguem nunca leu. Subiu para o topo.
   O fundo e SOLIDO, e nao mais um degrade sobre a foto, porque o cliente troca
   as fotos: com degrade o contraste depende de qual imagem esta embaixo, e a
   proxima troca pode reprovar sem ninguem perceber. Em rgba(0,40,36,.86) o pior
   caso possivel e uma foto 100% branca, e ele ainda da 10,33:1 com texto branco.
   Contraste que nao depende da foto nao quebra quando a foto muda. */
.banda__legenda{
	position:absolute;left:0;top:0;z-index:2;padding:9px 14px;color:#fff;
	font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
	background:rgba(0,40,36,.86)}
.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}

/* 7c. Carrossel do corpo clinico, na celula grande (2026-10-28).
   Sem o veu em degrade da celula: a ficha tem fundo SOLIDO, o mesmo da
   `.banda__legenda` (10,33:1 no pior caso, foto toda branca), e escurecer o
   retrato inteiro para proteger um texto que ja esta protegido so apagaria o
   medico. Rosto ancorado no alto: o retrato e 3/4 e a celula e mais larga. */
.banda__cel--carrossel::after{content:none}
.carrossel,.carrossel__trilho{position:absolute;inset:0}
.carrossel__slide{position:absolute;inset:0;opacity:0;visibility:hidden;
	transition:opacity .7s var(--ease),visibility 0s linear .7s}
.carrossel__slide.is-ativo{opacity:1;visibility:visible;transition:opacity .7s var(--ease),visibility 0s}
.banda__cel .carrossel__slide img{object-position:50% 14%}
.carrossel__info{
	position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 18px 16px;
	background:rgba(0,40,36,.86);color:#fff}
.carrossel__nome{font-size:1rem;font-weight:600;line-height:1.3}
.carrossel__nome a{color:#fff;text-decoration:none}
.carrossel__nome a:hover{text-decoration:underline;text-underline-offset:3px}
.carrossel__dado{font-size:.75rem;line-height:1.45;color:rgba(255,255,255,.82);margin-top:3px}
.carrossel__ctrl{position:absolute;top:0;right:0;z-index:3;display:flex;align-items:center;
	background:rgba(0,40,36,.86);color:#fff}
.carrossel__btn{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;
	background:transparent;color:#fff;cursor:pointer;border-radius:var(--r)}
.carrossel__btn:hover{background:rgba(255,255,255,.14)}
.carrossel__btn:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.carrossel__cont{font-size:.75rem;font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.carrossel__ico-play,.carrossel__btn[aria-pressed="true"] .carrossel__ico-pausa{display:none}
.carrossel__btn[aria-pressed="true"] .carrossel__ico-play{display:block}
html:not(.js) .carrossel__ctrl{display:none}
@media (prefers-reduced-motion:reduce){.carrossel__slide,.carrossel__slide.is-ativo{transition:none}}

/* ------------------------------------- 8. ASSINATURA 1: Relogio de Regioes
   REDESENHADO em 2026-10-14, a pedido da clinica ("hoje esta dificil de ser
   visto de primeira") e com a medicao de `mede-dobra.mjs` por tras:

     tela          antes                      depois
     1366x768      ABAIXO DA DOBRA            acima
     1440x900      77px de 139 visiveis       acima
     768x1024      207px de 276 visiveis      acima
     390x844       ABAIXO DA DOBRA            acima (trilho horizontal)

   Eram DOIS defeitos somados, e so um era de estilo:
   1. POSICAO. Ele vinha depois de uma banda de 420px e caia fora da primeira
      tela. Subiu para logo abaixo do titulo e das acoes.
   2. PESO. Era branco sobre pagina branca, com tipo de 11 a 14px, e lia como
      legenda das fotos. Virou faixa VERDE cheia, com tipo maior.

   Contraste sobre o verde #005850, medido em `mede-contraste.mjs`:
     branco ................... 8,36:1
     branco a 72% ............. 5,16:1
     #7FD3C3 (aberta agora) ... 4,78:1
   Todos passam AA para texto normal. */
.relogio{
	position:relative;z-index:4;background:var(--verde);color:#fff;
	display:grid;grid-template-columns:repeat(5,1fr)}
.relogio--hero{margin-top:30px;width:100%}
.relogio--secao{width:100%}
.reg{padding:22px 20px 24px;border-left:1px solid rgba(255,255,255,.22);min-width:0}
.reg:first-child{border-left:0}
.reg__nome{font-size:1.0625rem;font-weight:600;color:#fff;margin-bottom:7px;line-height:1.25}
/* Uma linha por unidade (2026-10-28). O texto da linha carrega o estado
   ("aberta ate 17h", "abre amanha, 8h"), e o ponto repete em cor; quem nao
   distingue verde de vermelho le a mesma coisa. Nome em branco cheio (8,36:1),
   estado em branco a 72% (5,16:1), os dois medidos sobre o #005850. */
.reg__lista{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:7px}
.reg__un{display:flex;align-items:flex-start;gap:8px;font-size:.8125rem;line-height:1.4;color:#fff}
.reg__un .reg__ponto{margin-top:6px}
.reg__un-nome{font-weight:600;margin-right:5px}
.reg__un-txt{display:inline-block;color:rgba(255,255,255,.72)}  /* quebra inteiro, nunca "abre / amanha" */
/* `.reg__ponto` e reusado pelo seletor, pelo quadro de unidades e pela folha do
   WhatsApp. O PADRAO e vermelho (fechada) e so o estado aberto pinta de verde,
   em TODOS os contextos: deixar a regra verde so no relogio faria o ponto ficar
   vermelho embaixo da palavra "aberta" nos outros tres lugares. */
.reg__ponto{
	width:8px;height:8px;border-radius:var(--r-pill);background:var(--fechado);flex:0 0 auto}
.reg__un--aberta .reg__ponto,
.seletor__estado--aberta .reg__ponto,
.ulinha__estado--aberta .reg__ponto,
.zap__estado--aberta .reg__ponto{
	background:var(--vivo);animation:septo-pulso 2.4s var(--ease) infinite}
@keyframes septo-pulso{0%,100%{opacity:1}50%{opacity:.35}}
/* chamada curta acima da faixa: diz o que a faixa e, sem gastar uma celula */
.relogio__rotulo{
	display:flex;align-items:center;gap:14px;margin-top:34px;
	font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--verde)}
.relogio__rotulo::before{content:"";width:44px;height:2px;background:var(--verde);flex:0 0 auto}
.relogio__rotulo + .relogio--hero{margin-top:14px}

/* ------------------------------------------------------------- 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. Agora com FOTOGRAFIA de
   fundo: eram quatro retangulos de texto, e a clinica pediu imagem.

   O veu e UNIFORME em 0,72, e nao um degrade: o pior caso e aritmetico e vale
   para qualquer foto que entre aqui depois. Sobre uma foto 100% branca o
   composto da rgb(71,100,97), que com texto branco rende 6,44:1, passa AA com
   folga sem depender de qual imagem esta embaixo. Degrade daria contraste que
   muda junto com a foto, e a proxima troca reprovaria em silencio. */
.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:340px;padding:28px;background:var(--verde-fundo);color:#fff;
	text-decoration:none;overflow:hidden;isolation:isolate}
.area__foto{position:absolute;inset:0;z-index:-2}
.area__foto img{
	width:100%;height:100%;object-fit:cover;
	transition:transform 1.4s var(--ease)}
.area::before{
	content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,40,36,.72);
	transition:background var(--dur) var(--ease)}
.area:hover::before{background:rgba(0,88,80,.86)}
.area:hover .area__foto img{transform:scale(1.05)}
.area__n{font-size:.75rem;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.75);margin-bottom:auto}
.area__nome{font-family:var(--f-display);font-weight:500;font-size:2rem;line-height:1.05;color:#fff}
.area__desc{font-size:.875rem;color:rgba(255,255,255,.82);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}
/* Quadro deitado, para foto que nao tem resolucao para o 4/5 (A Septo, 1000x629). */
.split__midia--deitada{aspect-ratio:16/10}
.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.1fr 1fr;height:480px}
	.banda__cel--equipe{display:none}   /* preserva video e fachada 24h, que e o diferencial */
	.relogio{grid-template-columns:repeat(3,1fr)}
	.relogio--hero{margin-top:24px}
	.reg:nth-child(4){border-left:0}
	.reg:nth-child(n+4){border-top:1px solid rgba(255,255,255,.22)}
	.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}
	/* No celular a celula grande ocupa a largura toda, entao ela precisa de
	   ALTURA para o retrato em pe nao virar uma faixa. 420px deixa o trio
	   legivel; as duas de baixo seguem compactas. */
	.banda{grid-template-columns:1fr 1fr;grid-template-rows:420px 200px;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}
	/* Trilho horizontal no celular. Cinco regioes empilhadas em duas colunas
	   davam 415px de altura e jogavam a faixa inteira para fora da primeira
	   tela, que e justamente o defeito que este redesenho veio corrigir. Em
	   trilho, a faixa cabe em 1 linha e o deslize lateral mostra o resto.
	   O `overflow-x:auto` CONTEM a rolagem no proprio elemento: o documento
	   continua sem barra lateral (R86). */
	.relogio{
		grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(166px,1fr);
		overflow-x:auto;overscroll-behavior-x:contain}
	.relogio--hero{margin-top:22px}
	.reg{border-left:1px solid rgba(255,255,255,.22);border-top:0;padding:14px 16px 14px}
	.reg:first-child{border-left:0}
	/* Mais apertado desde 2026-10-28: a lista por unidade deixou a faixa 26px
	   mais alta e ela passou a ser cortada pela dobra do 390x844 (mede-dobra.mjs). */
	.reg__nome{margin-bottom:4px}
	.reg__lista{gap:5px}
	.relogio__rotulo{margin-top:18px}
	.relogio__rotulo + .relogio--hero{margin-top:10px}
	.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__detalhe,.ulinha__detalhe,.zap__detalhe{
	font-style:normal;font-weight:500;color:var(--tinta-2);text-transform:none;letter-spacing:0}
.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 */
/* Tres colunas desde 2026-10-28: o marco do MEC saiu a pedido da clinica, e a
   quarta coluna ficaria vazia. */
.trilha{display:grid;grid-template-columns:repeat(3,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}
}
@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(2,1fr);gap:var(--goteira)}  /* PUC-Rio e ABORL-CCF; o MEC saiu em 2026-10-28 */
.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}

/* ================================================= 18. quadro de unidades
   Entrou com a revisao do cliente. A home respondia "a Tijuca esta aberta"
   quando a pergunta e "QUAL das tres". Padrao de LINHA, nao de cartao: as
   colunas se alinham entre si e a comparacao entre unidades vira vertical,
   que e como se escolhe dentro de uma mesma rede. Tambem evita repetir a
   grade de quatro paineis que a secao de areas ja usa. */
.quadro{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.ulinha{
	background:var(--branco);display:grid;align-items:center;gap:28px;padding:22px 26px;
	grid-template-columns:1.05fr .95fr 1.55fr 230px}
/* filete de 3px na borda viva: marca a unidade 24h sem gastar mais um selo
   colorido numa linha que ja tem estado, endereco, horario e botao */
.ulinha--24h{border-left:3px solid var(--verde);padding-left:23px}
.ulinha__id{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.ulinha__nome{font-size:1.0625rem;font-weight:600;line-height:1.3}
.ulinha__nome a{color:var(--tinta);text-decoration:none}
.ulinha__nome a:hover{color:var(--verde);text-decoration:underline}
.ulinha__selo{
	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}
.ulinha__quando{min-width:0}
.ulinha__estado{
	display:inline-flex;align-items:center;gap:6px;
	font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
	color:var(--tinta-2)}
.ulinha__estado--aberta{color:var(--verde)}
.ulinha__horario{font-size:.8125rem;color:var(--tinta-2);margin-top:6px;line-height:1.5}
/* Aviso de hora marcada. Verde e não cinza: é informação que muda a decisão de
   sair de casa, não nota de rodapé. --tinta-2 dá 5,55:1 e --verde 8,36:1. */
.ulinha__marcada,.ubloco__marcada{
	font-size:.75rem;line-height:1.5;color:var(--verde);font-weight:500;margin-top:6px}
.ubloco__marcada{margin-top:12px}
.ulinha__onde{font-size:.875rem;line-height:1.5;min-width:0}
.ulinha__rua{display:block;color:var(--tinta)}
.ulinha__ref{display:block;color:var(--tinta-2);font-size:.8125rem;margin-top:3px}
.ulinha__contato{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ulinha__fones{display:flex;flex-direction:column;gap:2px;font-size:.8125rem}
.ulinha__fones a{color:var(--tinta-2);text-decoration:none}
.ulinha__fones a:hover{color:var(--verde);text-decoration:underline}
.quadro__pe{margin-top:32px}

/* --------------------------------------------- 18b. faixa "a clinica por dentro"
   Quatro fotos reais da clinica, coladas com a mesma goteira de 6px do resto do
   sistema. Legenda em etiqueta solida, pelo mesmo motivo da banda do hero: o
   cliente troca foto, e contraste que depende da foto quebra na proxima troca. */
.estrutura{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--goteira)}
.estrutura__cel{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--superficie)}
.estrutura__cel img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transition:transform 1.2s var(--ease)}
.estrutura__cel:hover img{transform:scale(1.04)}
/* faixa de uma foto so, largura do container */
.faixa-foto{position:relative;overflow:hidden;background:var(--superficie);aspect-ratio:5/2}
.faixa-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.estrutura__legenda{
	position:absolute;left:0;bottom:0;z-index:2;padding:9px 14px;color:#fff;
	font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
	background:rgba(0,40,36,.86)}

/* ------------------------------------------------- 19. grade de corpo clinico */
.medicos{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.medico{min-width:0}
.medico__foto{
	position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--superficie);display:block}
.medico__foto img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transition:transform 1.2s var(--ease)}
.medico:hover .medico__foto img{transform:scale(1.04)}
.medico__nome{font-size:1.0625rem;font-weight:600;line-height:1.35;margin-top:16px}
.medico__nome a{color:var(--tinta);text-decoration:none}
.medico__nome a:hover{color:var(--verde)}
.medico__crm{font-size:.8125rem;color:var(--tinta-2);margin-top:7px}
/* marcador DECLARADO como provisorio. Tracejado porque vazio parece acabado e
   texto cheio parece informacao. Some sozinho quando o campo for preenchido. */
.medico__pend{
	display:inline-block;margin-top:9px;padding:3px 9px;border:1px dashed var(--neutro);
	font-size:.75rem;color:var(--tinta-2)}
/* A oitava célula "Equipe completa" saiu a pedido da clínica, e o CSS dela saiu
   junto: regra que ninguém usa é sobra, e sobra de CSS é o que faz uma folha de
   estilo dobrar de tamanho sem ninguém saber de onde veio. */

/* ------------------------------------------- 20. bloco completo de unidade */
.sec--regiao{padding-block:72px}
.sec--regiao + .sec--regiao{padding-top:0}
.regiao__cabeca{
	display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
	padding-bottom:16px;border-bottom:2px solid var(--verde);margin-bottom:var(--goteira)}
.regiao__nome{
	font-family:var(--f-display);font-weight:500;font-size:1.875rem;line-height:1.1;color:var(--verde)}
.regiao__conta{font-size:.8125rem;color:var(--tinta-2)}
.ublocos{display:grid;gap:var(--goteira)}
.ubloco{display:grid;grid-template-columns:1fr 400px;border:1px solid var(--linha);background:var(--branco)}
.ubloco--24h{border-top:3px solid var(--verde)}
.ubloco__dados{padding:30px 32px}
.ubloco__cabeca{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.ubloco__nome{font-size:1.25rem;font-weight:600;line-height:1.25}
.ubloco__nome a{color:var(--tinta);text-decoration:none}
.ubloco__nome a:hover{color:var(--verde);text-decoration:underline}
.ubloco__grade{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;align-items:start}
.ubloco__col{display:grid;gap:22px;align-content:start;min-width:0}
.ubloco__campo{min-width:0}
.ubloco__val{font-size:.9375rem;line-height:1.6;color:var(--tinta)}
.ubloco__ref{display:block;font-size:.8125rem;color:var(--tinta-2);margin-top:4px}
.ubloco__fones{display:flex;flex-direction:column;gap:3px}
.ubloco__fones a{color:var(--tinta);text-decoration:none}
.ubloco__fones a:hover{color:var(--verde);text-decoration:underline}
.ubloco__acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.ubloco__mapa{border-left:1px solid var(--linha);min-height:340px;position:relative}
.uni__mapa{margin-top:36px;height:380px;position:relative}

/* ---------------------------------------------------------- 21. mapa */
.mapa{position:relative;height:100%;min-height:260px;background:var(--superficie)}
.mapa__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Malha desenhada em CSS, sem baixar nada: o painel LE como mapa em vez de ler
   como caixa cinza vazia esperando conteudo que nao chegou. */
.mapa__botao{
	position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
	align-items:flex-start;gap:16px;padding:30px 32px;
	text-decoration:none;color:var(--tinta);background:var(--superficie);
	background-image:
		linear-gradient(var(--linha) 1px,transparent 1px),
		linear-gradient(90deg,var(--linha) 1px,transparent 1px);
	background-size:38px 38px,38px 38px;
	transition:background-color var(--dur) var(--ease)}
.mapa__botao:hover{background-color:#E7EDEB}
.mapa__nota{display:block;font-style:normal;font-size:.75rem;color:var(--tinta-2);margin-top:8px}
/* marcador geometrico, raio zero como o resto do sistema: um alfinete
   arredondado seria o unico canto redondo do site inteiro */
.mapa__pino{position:relative;width:26px;height:26px;background:var(--verde);flex:0 0 auto}
.mapa__pino::after{
	content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
	background:#fff}
.mapa__txt{font-size:.875rem;line-height:1.5;color:var(--tinta-2)}
.mapa__txt b{display:block;font-size:.9375rem;font-weight:600;color:var(--verde);margin-bottom:3px}

/* ------------------------------------------- 22. WhatsApp flutuante
   Nao abre conversa unica: abre a escolha de unidade. Botao flutuante com um
   numero so manda o paciente da Tijuca para o atendente da Barra, que e o
   defeito que a Assinatura 2 existe para fechar. */
.zap{position:fixed;right:20px;bottom:20px;z-index:80}
.zap__botao{
	display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px;
	background:var(--verde);color:#fff;text-decoration:none;
	font-size:.9375rem;font-weight:600;line-height:1;
	transition:background var(--dur) var(--ease)}
.zap__botao:hover{background:var(--verde-fundo)}
.zap__marca{display:flex;flex:0 0 auto}
.zap__folha{
	position:absolute;right:0;bottom:62px;width:min(92vw,340px);background:var(--branco);
	border:1px solid var(--linha);border-top:3px solid var(--verde);
	max-height:min(70vh,520px);overflow-y:auto}
.zap__cabeca{
	display:flex;align-items:flex-start;gap:12px;padding:18px 18px 14px;
	border-bottom:1px solid var(--linha)}
.zap__t{font-size:.9375rem;font-weight:600;line-height:1.4;color:var(--tinta)}
.zap__x{
	margin-left:auto;width:30px;height:30px;flex:0 0 auto;border:1px solid var(--linha);
	background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--tinta-2)}
.zap__lista{padding:6px 0 10px}
.zap__regiao{
	padding:14px 18px 6px;font-size:.6875rem;font-weight:600;letter-spacing:.14em;
	text-transform:uppercase;color:var(--verde)}
.zap__item{
	display:flex;flex-direction:column;gap:4px;padding:10px 18px;text-decoration:none;
	transition:background var(--dur) var(--ease)}
.zap__item:hover{background:var(--superficie)}
.zap__uni{font-size:.9375rem;font-weight:500;color:var(--tinta)}
.zap__estado{
	display:inline-flex;align-items:center;gap:6px;
	font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
	color:var(--tinta-2)}
.zap__estado--aberta{color:var(--verde)}

/* ------------------------------------------------ 23. aviso de estado honesto */
.aviso{border:1px solid var(--linha);border-left:3px solid var(--verde);padding:28px 30px;max-width:740px}
.aviso__rot{
	font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
	color:var(--verde);margin-bottom:10px}
.aviso__txt{font-size:1.0625rem;line-height:1.6;color:var(--tinta)}
.aviso__acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

.exames--coluna{grid-template-columns:1fr}

/* ---------------------------------------------------- 24. responsivo do novo */
@media (max-width:1023px){
	.ulinha{grid-template-columns:1fr;gap:12px;padding:20px 22px;align-items:start}
	.ulinha--24h{padding-left:19px}
	.ulinha__contato{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
	.medicos{grid-template-columns:repeat(2,1fr);gap:24px}
	.estrutura{grid-template-columns:repeat(2,1fr)}
	.ubloco{grid-template-columns:1fr}
	.ubloco__mapa{border-left:0;border-top:1px solid var(--linha);min-height:260px}
	.sec--regiao{padding-block:56px}
	.uni__mapa{height:300px}
}
@media (max-width:639px){
	.medicos{gap:18px}
	.medicos__mais{padding:22px}
	.medicos__mais-t{font-size:1.25rem}
	.ubloco__grade{grid-template-columns:1fr;gap:20px}
	.ubloco__dados{padding:24px 22px}
	.regiao__nome{font-size:1.5rem}
	.zap{right:14px;bottom:14px}
	.zap__botao{height:48px;padding:0 14px}
	.zap__rotulo{display:none}
	.aviso{padding:24px 22px}
	.uni__mapa{height:260px}
	.exames--coluna .btn{width:auto}
}