/* ========================================================================== Baby Center — Medicina Reprodutiva Sistema visual. Régua de 1200px, coluna de texto de 68ch. Contraste conferido: todos os pares de texto acima de 4.5:1. ========================================================================== */ /* --- 1. fichas ---------------------------------------------------------- */ :root{ --navy:#004076; --navy-deep:#002F57; --ink:#0B2239; --ink-soft:#47596B; --ink-faint:#5E7184; --rose:#E4759D; --rose-num:#C4356E; --rose-btn:#C22E6C; --rose-text:#B52360; --rose-pale:#FBEDF2; --rose-line:#F2C9D8; --sky:#E8F1F7; --sky-deep:#D3E4F0; --sand:#FBF9F7; --paper:#FFFFFF; --line:rgba(0,64,118,.13); --line-strong:rgba(0,64,118,.24); --rule:1200px; --gut:clamp(20px,5vw,40px); /* escala de espaço: um passo por degrau, usada em todo o lado */ --e1:4px; --e2:8px; --e3:12px; --e4:18px; --e5:26px; --e6:36px; --e7:52px; --e8:72px; --e9:96px; --secao:clamp(54px,6.4vw,88px); /* ar acima e abaixo de cada faixa */ --secao-fina:clamp(38px,4.2vw,58px); --gap:clamp(18px,2.2vw,26px); /* entre cartões de uma grelha */ --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* escala tipográfica — medida por linha, não por tamanho */ /* razao de ~1.22 entre degraus — degraus curtos, escada continua */ --t-mega:clamp(2rem,1.45rem + 2.2vw,3.05rem); --t-h1:clamp(1.78rem,1.4rem + 1.5vw,2.5rem); --t-h2:clamp(1.4rem,1.24rem + .64vw,1.78rem); --t-h3:clamp(1.1rem,1.04rem + .24vw,1.26rem); --t-lead:clamp(1.02rem,.99rem + .13vw,1.12rem); --t-body:1rem; --t-small:.9rem; --t-micro:.82rem; } /* --- 2. base ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } body{ margin:0;background:var(--sand);color:var(--ink); font-family:var(--sans);font-size:var(--t-body);line-height:1.65; font-weight:400;-webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--navy);text-underline-offset:.18em;text-decoration-thickness:.06em} a:hover{color:var(--rose-text)} :focus-visible{outline:2.5px solid var(--rose-btn);outline-offset:3px;border-radius:2px} ::selection{background:var(--rose-pale);color:var(--navy-deep)} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--navy-deep); letter-spacing:-.015em;margin:0;text-wrap:balance} h1{font-size:var(--t-h1);line-height:1.14} h2{font-size:var(--t-h2);line-height:1.22} h3{font-size:var(--t-h3);line-height:1.36;font-weight:600} p{margin:0 0 1.15em} strong{font-weight:650;color:var(--navy-deep)} hr{border:0;border-top:1px solid var(--line);margin:0} /* --- 3. estrutura ------------------------------------------------------- */ .regua{max-width:var(--rule);margin-inline:auto;padding-inline:var(--gut)} .secao{padding-block:var(--secao)} .secao--fina{padding-block:var(--secao-fina)} .secao--sky{background:var(--sky)} .secao--paper{background:var(--paper)} .secao--navy{background:var(--navy);color:#E6EEF5} .secao--navy h1,.secao--navy h2,.secao--navy h3{color:#fff} .secao--navy a:not(.btn){color:#fff} .secao--navy .btn--claro,.chamada .btn--claro{color:var(--navy)} .secao--navy .btn--claro:hover,.chamada .btn--claro:hover{color:var(--navy-deep)} .secao--navy .btn--rosa,.chamada .btn--rosa{color:#fff} .linha-topo{border-top:1px solid var(--line)} /* rótulo: etiqueta pequena com o ponto da marca */ .rotulo{ display:flex;align-items:center;gap:.6em;margin:0 0 1.1rem; font-family:var(--sans);font-size:var(--t-micro);font-weight:650; letter-spacing:.14em;text-transform:uppercase;color:var(--rose-text); } .rotulo::before{content:"";width:.5em;height:.5em;border-radius:50%; background:var(--rose);flex:none} .secao--navy .rotulo,.heroi .rotulo,.chamada .rotulo{color:#F8C8DA} .secao--navy .rotulo::before,.heroi .rotulo::before,.chamada .rotulo::before{background:var(--rose)} .cabeca-secao{max-width:46ch;margin-bottom:clamp(var(--e5),3vw,var(--e7))} .cabeca-secao p{color:var(--ink-soft);font-size:var(--t-lead);line-height:1.55;margin:.7em 0 0} .secao--navy .cabeca-secao p{color:#BFD3E4} /* --- 4. botões ---------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--sans);font-size:var(--t-small);font-weight:650; letter-spacing:.02em;line-height:1;padding:.95em 1.6em; border:1.5px solid transparent;border-radius:2px;cursor:pointer; text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease; min-height:46px; } .btn--rosa{background:var(--rose-btn);color:#fff;border-color:var(--rose-btn)} .btn--rosa:hover{background:#A81B56;border-color:#A81B56;color:#fff} .btn--navy{background:var(--navy);color:#fff;border-color:var(--navy)} .btn--navy:hover{background:var(--navy-deep);color:#fff} .btn--linha{background:transparent;color:var(--navy);border-color:var(--line-strong)} .btn--linha:hover{background:var(--navy);color:#fff;border-color:var(--navy)} .btn--claro{background:#fff;color:var(--navy);border-color:#fff} .btn--claro:hover{background:var(--sky);color:var(--navy-deep)} .btn--vazio-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .btn--vazio-claro:hover{background:#fff;color:var(--navy)} .seta{display:inline-block;transition:transform .2s ease} a:hover .seta{transform:translateX(3px)} /* --- 5. cabeçalho ------------------------------------------------------- */ .barra-info{background:var(--navy-deep);color:#BCD2E4;font-size:var(--t-micro)} .barra-info .regua{display:flex;gap:1.5rem;align-items:center; justify-content:flex-end;min-height:38px;flex-wrap:wrap} .barra-info a{color:#DCE8F2;text-decoration:none;display:inline-flex;align-items:center;gap:.45em} .barra-info a:hover{color:#fff;text-decoration:underline} .barra-info .sep{opacity:.35} @media (max-width:1100px){.barra-info .so-largo{display:none}} @media (max-width:860px){ .barra-info .regua{justify-content:center;gap:.9rem;min-height:34px} .barra-info .esconde-mob{display:none} } .topo{position:sticky;top:0;z-index:60;background:rgba(251,249,247,.94); backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)} .topo .regua{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);min-height:74px} .marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;margin-right:auto;min-height:44px} .marca img.simb{width:40px;height:40px} .marca img.wm{height:26px;width:auto} @media (max-width:600px){ .acoes-topo .btn--rosa{display:none} .topo .regua{min-height:64px;gap:12px} } @media (max-width:430px){.marca img.wm{height:21px}.marca img.simb{width:34px;height:34px}} .menu{display:flex;align-items:center;gap:clamp(2px,1.1vw,16px);list-style:none;margin:0;padding:0} .menu > li{position:relative} .menu > li > a{ display:block;padding:.7em .5em;font-size:var(--t-small);font-weight:600; color:var(--navy-deep);text-decoration:none;white-space:nowrap; border-bottom:2px solid transparent; } .menu > li > a:hover,.menu > li.atual > a{color:var(--rose-text);border-bottom-color:var(--rose)} .tem-filhos > a::after{content:"";display:inline-block;width:.34em;height:.34em;margin-left:.5em; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg)} .submenu{ position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%) translateY(-6px); background:var(--paper);border:1px solid var(--line); box-shadow:0 18px 40px -18px rgba(0,47,87,.3); padding:14px;margin:0;list-style:none;min-width:252px; opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease; border-radius:2px; } .submenu--2col{min-width:500px;columns:2;column-gap:14px} .menu > li:hover > .submenu,.menu > li:focus-within > .submenu{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .submenu a{display:block;padding:.68em .7em;min-height:40px;font-size:.88rem;line-height:1.35; color:var(--ink);text-decoration:none;break-inside:avoid;border-radius:2px} .submenu a:hover{background:var(--rose-pale);color:var(--rose-text)} .submenu .ver-tudo{margin-top:6px;border-top:1px solid var(--line);padding-top:10px; font-weight:650;color:var(--rose-text);font-size:var(--t-micro);letter-spacing:.08em; text-transform:uppercase} .acoes-topo{display:flex;align-items:center;gap:10px;flex:none} @media (max-width:1140px){.menu,.acoes-topo .btn--linha{display:none}} /* gaveta do telemóvel */ .hamb{display:none;width:46px;height:46px;border:1px solid var(--line-strong);background:transparent; border-radius:2px;cursor:pointer;padding:0;align-items:center;justify-content:center} .hamb span,.hamb span::before,.hamb span::after{content:"";display:block;width:19px;height:1.8px; background:var(--navy);transition:transform .22s ease,opacity .18s ease} .hamb span::before{transform:translateY(-6px)} .hamb span::after{transform:translateY(4.2px)} @media (max-width:1140px){.hamb{display:flex}} body.gaveta-aberta .hamb span{background:transparent} body.gaveta-aberta .hamb span::before{transform:rotate(45deg)} body.gaveta-aberta .hamb span::after{transform:translateY(-1.8px) rotate(-45deg)} .gaveta{ position:fixed;inset:0 0 0 auto;width:min(400px,90vw);z-index:80; background:var(--paper);border-left:1px solid var(--line); transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1); overflow-y:auto;overscroll-behavior:contain;padding:22px var(--gut) 60px; } body.gaveta-aberta .gaveta{transform:translateX(0)} .veu{position:fixed;inset:0;background:rgba(0,47,87,.42);z-index:70;opacity:0;visibility:hidden; transition:opacity .25s ease} body.gaveta-aberta .veu{opacity:1;visibility:visible} .gaveta h4{font-family:var(--sans);font-size:var(--t-micro);font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-faint);margin:26px 0 8px} .gaveta > a{display:block;padding:.62em 0;color:var(--ink);text-decoration:none;font-size:.97rem; border-bottom:1px solid var(--line);font-weight:600} .gaveta a:hover{color:var(--rose-text)} .gaveta .fecha{position:absolute;top:18px;right:var(--gut);width:44px;height:44px;border:0; background:transparent;font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer} .gaveta details{border-bottom:1px solid var(--line)} .gaveta details > summary{padding:.62em 0;cursor:pointer;font-size:.97rem;color:var(--ink); list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:600} .gaveta details > summary::-webkit-details-marker{display:none} .gaveta details > summary::after{content:"+";font-size:1.2rem;color:var(--rose-text);font-weight:400} .gaveta details[open] > summary::after{content:"–"} .gaveta details a{display:flex;align-items:center;min-height:42px;padding:.4em 0 .4em 1rem;font-size:.9rem;color:var(--ink-soft); border-bottom:0;text-decoration:none;font-weight:400} .gaveta .dados-gaveta{margin-top:30px;padding-top:22px;border-top:1px solid var(--line); font-size:var(--t-small);color:var(--ink-soft);line-height:1.7} .gaveta .dados-gaveta a{display:inline-flex;align-items:center;min-height:40px;border:0; padding:0;font-weight:500;color:var(--navy)} /* --- 6. herói ----------------------------------------------------------- */ .heroi{position:relative;background:var(--navy);color:#E6EEF5;overflow:hidden;isolation:isolate} .heroi-fundo{position:absolute;inset:0;z-index:0} .heroi-fundo img{width:100%;height:100%;object-fit:cover;object-position:64% 16%; filter:saturate(.82) contrast(1.04)} /* véu: quase opaco à esquerda, onde mora o texto; aberto à direita, onde estão os rostos */ .heroi-fundo::after{content:"";position:absolute;inset:0; background: linear-gradient(96deg,rgba(0,40,74,.975) 0%,rgba(0,42,78,.95) 36%,rgba(0,45,84,.76) 62%,rgba(0,48,88,.56) 100%), linear-gradient(to top,rgba(0,34,64,.82) 0%,rgba(0,34,64,0) 46%)} .heroi .regua{position:relative;z-index:2;display:grid; grid-template-columns:minmax(0,min(58%,640px));align-items:center; padding-block:clamp(var(--e8),7vw,var(--e9));min-height:clamp(392px,50vh,512px)} .heroi h1{color:#fff;font-size:var(--t-mega);line-height:1.1;letter-spacing:-.02em;font-weight:400; text-shadow:0 1px 26px rgba(0,26,48,.35)} .heroi h1 em{font-style:italic;color:#FBC4D8;font-weight:400} .heroi .lead{font-size:var(--t-lead);line-height:1.65;color:#CBDCEA;max-width:46ch;margin:1.15rem 0 0} .heroi .botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.9rem} .heroi .marcadores{display:flex;flex-wrap:wrap;gap:1.1rem 1.8rem;margin-top:2.2rem; padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.18)} .heroi .marcador{display:flex;align-items:center;gap:.55em;font-size:var(--t-small);color:#BFD3E4} .heroi .marcador svg{width:19px;height:19px;color:#F8C8DA;flex:none} @media (max-width:980px){ .heroi .regua{grid-template-columns:minmax(0,1fr)} .heroi-fundo img{object-position:66% 14%} .heroi-fundo::after{background: linear-gradient(180deg,rgba(0,47,87,.93) 0%,rgba(0,47,87,.9) 55%,rgba(0,42,78,.96) 100%)} .heroi::after{opacity:.09;right:-26%} } /* capa das páginas internas */ .capa{background:var(--paper);border-bottom:1px solid var(--line);position:relative;overflow:hidden} .capa .regua{padding-block:clamp(34px,5vw,60px);position:relative;z-index:2} .capa h1{max-width:22ch} .capa .lead{color:var(--ink-soft);font-size:var(--t-lead);max-width:60ch;margin:1rem 0 0;line-height:1.55} .capa::after{content:"";position:absolute;right:-90px;top:-70px;width:300px;height:300px; background:url(../img/simbolo.png) center/contain no-repeat;opacity:.07;pointer-events:none} .migalha{font-size:var(--t-micro);color:var(--ink-faint);margin-bottom:1rem;letter-spacing:.03em} .migalha a{color:var(--ink-soft);text-decoration:none} .migalha a:hover{color:var(--rose-text);text-decoration:underline} .migalha span{opacity:.5;padding:0 .45em} /* --- 7. números --------------------------------------------------------- */ .numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--e6)} .numero{padding-top:1.1rem;border-top:2px solid var(--rose)} .numero .valor{font-family:var(--serif);font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem); line-height:1;color:var(--navy);font-weight:400;letter-spacing:-.03em;display:block} .secao--navy .numero .valor{color:#fff} .numero .rot{display:block;margin-top:.55rem;font-size:var(--t-small);color:var(--ink-soft); line-height:1.4;max-width:26ch} .secao--navy .numero .rot{color:#B5CCE0} /* --- 8. cartões e listas ------------------------------------------------ */ .grelha{display:grid;gap:var(--gap)} .grelha--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .grelha--3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))} .grelha--4{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))} .cartao{background:var(--paper);border:1px solid var(--line);border-radius:2px; display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden; transition:border-color .2s ease,transform .2s ease} .cartao:hover{border-color:var(--rose);transform:translateY(-3px);color:inherit} .cartao .foto{aspect-ratio:16/10;overflow:hidden;background:var(--sky)} .cartao .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .cartao:hover .foto img{transform:scale(1.04)} .cartao .corpo{padding:clamp(var(--e4),1.9vw,var(--e5));display:flex;flex-direction:column; flex:1;gap:var(--e2)} .cartao h3{color:var(--navy-deep)} .cartao:hover h3{color:var(--rose-text)} .cartao p{color:var(--ink-soft);font-size:var(--t-small);line-height:1.55;margin:0} .cartao .pe{margin-top:auto;padding-top:.8rem;font-size:var(--t-micro);font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--rose-text)} .cartao .data{font-size:var(--t-micro);color:var(--ink-faint);letter-spacing:.06em; text-transform:uppercase} /* lista de ligações — só tipografia e fio */ .lista-fios{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,4vw,56px)} @media (max-width:680px){.lista-fios{columns:1}} .lista-fios li{break-inside:avoid;border-bottom:1px solid var(--line)} .lista-fios a{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:.85em 0;min-height:44px;color:var(--ink);text-decoration:none;font-size:.99rem;line-height:1.35} .lista-fios a:hover{color:var(--rose-text)} .lista-fios a::after{content:"→";color:var(--rose);opacity:0;transform:translateX(-5px); transition:opacity .18s ease,transform .18s ease;flex:none} .lista-fios a:hover::after{opacity:1;transform:translateX(0)} /* caminhos: mulher / homem / casal */ .caminhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px; background:var(--line);border:1px solid var(--line)} .caminho{background:var(--paper);padding:clamp(var(--e5),2.6vw,var(--e6));text-decoration:none; color:inherit;display:flex;flex-direction:column;gap:var(--e2);transition:background .2s ease} .caminho:hover{background:var(--rose-pale);color:inherit} .caminho .n{font-family:var(--serif);font-size:1.3rem;color:var(--rose-num);line-height:1} .caminho p{color:var(--ink-soft);font-size:var(--t-small);margin:0;line-height:1.55} .caminho .pe{margin-top:.4rem;font-size:var(--t-micro);font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--rose-text)} /* --- 9. artigo / corpo de texto ----------------------------------------- */ .pagina{display:grid;grid-template-columns:minmax(0,1fr) 300px; gap:clamp(var(--e6),4.4vw,var(--e8));align-items:start} @media (max-width:940px){.pagina{grid-template-columns:1fr}} .pagina--contato{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)} @media (max-width:940px){.pagina--contato{grid-template-columns:1fr}} .prosa{max-width:64ch;font-size:var(--t-body);line-height:1.75;color:var(--ink)} .prosa > *:first-child{margin-top:0} .prosa h2{margin:2.4em 0 .7em;font-size:var(--t-h2);line-height:1.2;scroll-margin-top:110px} .prosa h2:first-child{margin-top:0} .prosa h3{margin:2em 0 .55em;font-size:var(--t-h3);scroll-margin-top:110px} .prosa p{margin:0 0 1.25em} .prosa a{color:var(--navy);font-weight:550} .prosa ul,.prosa ol{margin:0 0 1.5em;padding-left:0;list-style:none} .prosa ul > li{position:relative;padding-left:1.6em;margin-bottom:.7em} .prosa ul > li::before{content:"";position:absolute;left:.25em;top:.72em; width:.42em;height:.42em;border-radius:50%;background:var(--rose)} .prosa ol{counter-reset:p} .prosa ol > li{position:relative;padding-left:2.2em;margin-bottom:.7em;counter-increment:p} .prosa ol > li::before{content:counter(p);position:absolute;left:0;top:.02em; font-family:var(--serif);font-size:1.1em;color:var(--rose-text);font-weight:600} .prosa blockquote{margin:1.8em 0;padding:0 0 0 1.4em;border-left:3px solid var(--rose); font-family:var(--serif);font-size:1.12em;line-height:1.5;color:var(--navy-deep);font-style:italic} .prosa img{margin:1.8em 0;border-radius:2px} .prosa figure{margin:1.8em 0} .prosa .data-revisao{margin:0 0 2.2em;font-size:var(--t-small);color:var(--ink-faint)} .prosa figcaption{font-size:var(--t-small);color:var(--ink-faint);margin-top:.6em} .prosa table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:var(--t-small)} .prosa th,.prosa td{border:1px solid var(--line);padding:.7em .85em;text-align:left} .prosa th{background:var(--sky);font-weight:650;color:var(--navy-deep)} .rolavel{overflow-x:auto;-webkit-overflow-scrolling:touch} .figura-capa{margin:0 0 clamp(var(--e5),2.8vw,var(--e6));border-radius:2px;overflow:hidden} .figura-capa img{width:100%;aspect-ratio:16/9;object-fit:cover} /* trilho lateral */ .trilho{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--e4)} @media (max-width:940px){.trilho{position:static}} .trilho-caixa{background:var(--paper);border:1px solid var(--line);padding:var(--e5);border-radius:2px} .trilho-caixa h4{font-family:var(--sans);font-size:var(--t-micro);font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .9rem} .trilho-caixa ol{list-style:none;margin:0;padding:0;counter-reset:t} .trilho-caixa ol li{counter-increment:t;border-bottom:1px solid var(--line)} .trilho-caixa ol li:last-child{border-bottom:0} .trilho-caixa ol a{display:flex;align-items:center;min-height:42px;padding:.5em 0 .5em 1.9em; position:relative;font-size:.88rem;line-height:1.4;color:var(--ink-soft);text-decoration:none} .trilho-caixa ol a::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:50%; transform:translateY(-50%); font-size:.7rem;font-weight:700;color:var(--rose);letter-spacing:.04em} .trilho-caixa ol a:hover{color:var(--rose-text)} .trilho-caixa ul{list-style:none;margin:0;padding:0} .trilho-caixa ul li{border-bottom:1px solid var(--line)} .trilho-caixa ul li:last-child{border-bottom:0} .trilho-caixa ul a{display:flex;align-items:center;min-height:42px;padding:.5em 0;font-size:.88rem; line-height:1.4;color:var(--ink-soft);text-decoration:none} .trilho-caixa ul a:hover{color:var(--rose-text)} .trilho-caixa ul a[aria-current]{color:var(--rose-text);font-weight:650} .trilho-cta{background:var(--navy);color:#CFE0EE;padding:var(--e5);border-radius:2px} .trilho-cta h4{color:#fff;font-family:var(--serif);font-size:1.08rem;font-weight:500; letter-spacing:-.01em;text-transform:none;margin:0 0 .5rem} .trilho-cta p{font-size:var(--t-small);line-height:1.55;margin:0 0 1.1rem;color:#B5CCE0} .trilho-cta .btn{width:100%} /* --- 10. equipa / médico ------------------------------------------------ */ .medico{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(var(--e5),3.4vw,var(--e8));align-items:center} @media (max-width:840px){.medico{grid-template-columns:1fr}} .medico .retrato{border-radius:2px;overflow:hidden;background:var(--sky)} .medico .retrato img{width:100%;aspect-ratio:4/5;object-fit:cover} .credenciais{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.55rem} .credenciais li{position:relative;padding-left:1.5em;font-size:var(--t-small); color:var(--ink-soft);line-height:1.5} .credenciais li::before{content:"";position:absolute;left:0;top:.52em;width:.5em;height:.5em; border-radius:50%;background:var(--rose)} .secao--navy .credenciais li{color:#C6D8E7} .faixa-equipa{margin:clamp(var(--e6),3.4vw,var(--e7)) 0 0;border-radius:2px;overflow:hidden} .faixa-equipa img{width:100%} /* --- 11. passo a passo -------------------------------------------------- */ .passos{counter-reset:passo;display:grid;gap:0} .passo{counter-increment:passo;display:grid;grid-template-columns:auto minmax(0,1fr); gap:clamp(var(--e4),2.4vw,var(--e6));padding:clamp(var(--e5),2.4vw,var(--e6)) clamp(0px,1.4vw,var(--e4)); border-top:1px solid var(--line);text-decoration:none;color:inherit;align-items:start; transition:background .18s ease} .passo:last-child{border-bottom:1px solid var(--line)} .passo:hover{background:var(--paper);color:inherit} .passo .n{font-family:var(--serif);font-size:clamp(1.45rem,1.15rem + 1vw,2rem);line-height:.95; color:var(--rose-num);font-weight:400;min-width:2.2ch;font-variant-numeric:tabular-nums} .passo h3{margin-bottom:.4rem} .passo:hover h3{color:var(--rose-text)} .passo p{color:var(--ink-soft);font-size:var(--t-small);margin:0;line-height:1.6;max-width:64ch} /* --- 12. sociedades ----------------------------------------------------- */ .selos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:clamp(var(--e3),1.6vw,var(--e5))} .selos img{height:clamp(54px,6.4vw,74px);width:auto;opacity:.72;filter:grayscale(1); transition:opacity .2s ease,filter .2s ease} .selos img:hover{opacity:1;filter:grayscale(0)} /* --- 13. formulário ----------------------------------------------------- */ .form{display:grid;gap:var(--e4)} .form .par{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)} @media (max-width:640px){.form .par{grid-template-columns:1fr}} .campo{display:flex;flex-direction:column;gap:.4rem} .campo label{font-size:var(--t-micro);font-weight:650;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-soft)} .campo input,.campo select,.campo textarea{ font-family:var(--sans);font-size:var(--t-body);color:var(--ink); background:var(--paper);border:1px solid var(--line-strong);border-radius:2px; padding:.8em .9em;min-height:46px;width:100%;transition:border-color .18s ease} .campo textarea{min-height:128px;resize:vertical;line-height:1.55} .campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--rose-btn);outline:none;box-shadow:0 0 0 3px var(--rose-pale)} .form .aviso{font-size:var(--t-micro);color:var(--ink-faint);line-height:1.5} .secao--navy .campo label{color:#AFC7DA} .secao--navy .campo input,.secao--navy .campo select,.secao--navy .campo textarea{ background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);color:#fff} .secao--navy .campo input::placeholder,.secao--navy .campo textarea::placeholder{color:#8FAABF} .secao--navy .form .aviso{color:#9DB6CA} /* --- 14. contacto ------------------------------------------------------- */ .dados{display:grid;gap:var(--e5)} .dado{border-top:1px solid var(--line);padding-top:1rem} .dado .rot{font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--rose-text);display:block;margin-bottom:.4rem} .dado p{font-size:var(--t-body);color:var(--ink);line-height:1.55;margin:0} .dado a{font-size:var(--t-body);color:var(--ink);line-height:1.55;margin:0;text-decoration:none; display:flex;align-items:center;min-height:40px} .dado a:hover{color:var(--rose-text);text-decoration:underline} .mapa{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--sky)} .mapa iframe{display:block;width:100%;height:clamp(300px,42vw,450px);border:0} /* --- 15. chamada final -------------------------------------------------- */ .chamada{background:var(--navy);color:#D3E2EE;position:relative;overflow:hidden} .chamada::before{content:"";position:absolute;left:-130px;bottom:-150px;width:420px;height:420px; background:url(../img/simbolo.png) center/contain no-repeat;opacity:.09} .chamada .regua{position:relative;z-index:2;display:grid; grid-template-columns:minmax(0,1fr) auto;gap:clamp(var(--e5),3.4vw,var(--e7));align-items:center; padding-block:clamp(var(--e7),5.4vw,var(--e8))} @media (max-width:820px){.chamada .regua{grid-template-columns:1fr}} .chamada h2{color:#fff;font-size:var(--t-h2);max-width:22ch} .chamada p{color:#BFD3E4;margin:.8rem 0 0;max-width:52ch;font-size:var(--t-lead);line-height:1.55} .chamada .botoes{display:flex;flex-wrap:wrap;gap:12px} /* --- 15b. artigo anterior / próximo ------------------------------------- */ .vizinhos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} @media (max-width:640px){.vizinhos{grid-template-columns:1fr}} .vizinho{background:var(--paper);padding:22px clamp(18px,2.5vw,28px);text-decoration:none; color:inherit;display:flex;flex-direction:column;gap:.45rem;min-height:96px; transition:background .2s ease} .vizinho:hover{background:var(--rose-pale);color:inherit} .vizinho .rot{font-size:var(--t-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--rose-text)} .vizinho .tit{font-family:var(--serif);font-size:1.02rem;line-height:1.35;color:var(--navy-deep)} .vizinho--prox{text-align:right;align-items:flex-end} /* --- 16. rodapé --------------------------------------------------------- */ .rodape{background:var(--navy-deep);color:#A8C1D6;font-size:var(--t-small); padding-block:clamp(48px,6vw,72px) 0} .rodape a{color:#CBDCEA;text-decoration:none} .rodape a:hover{color:#fff;text-decoration:underline} .rodape-grelha{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(140px,1fr)); gap:clamp(var(--e5),3vw,var(--e7))} @media (max-width:940px){.rodape-grelha{grid-template-columns:1fr 1fr}} @media (max-width:560px){.rodape-grelha{grid-template-columns:1fr}} .rodape h4{font-family:var(--sans);font-size:var(--t-micro);font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:#7C9BB5;margin:0 0 1rem} .rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem} .rodape ul li{display:flex;align-items:center;min-height:40px} .rodape ul a{display:inline-flex;align-items:center;min-height:40px} .rodape .wm-rodape{height:30px;width:auto;margin-bottom:1.1rem} .rodape .sobre{line-height:1.65;max-width:38ch;color:#9BB5CB} .redes{display:flex;gap:10px;margin-top:1.3rem} .redes a{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%; display:flex;align-items:center;justify-content:center;color:#CBDCEA; transition:background .2s ease,border-color .2s ease} .redes a:hover{background:var(--rose-btn);border-color:var(--rose-btn);color:#fff} .redes svg{width:17px;height:17px;fill:currentColor} .rodape-pe{margin-top:clamp(var(--e6),3.4vw,var(--e7));border-top:1px solid rgba(255,255,255,.12); padding-block:22px;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between; font-size:var(--t-micro);color:#7C9BB5} .rodape-pe a{display:inline-flex;align-items:center;min-height:40px;color:#9BB5CB} /* --- 17. whatsapp flutuante --------------------------------------------- */ .wpp{position:fixed;right:18px;bottom:18px;z-index:55;width:54px;height:54px;border-radius:50%; background:#1EA952;display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.42);transition:transform .2s ease} .wpp:hover{transform:scale(1.07)} .wpp svg{width:29px;height:29px;fill:#fff} /* --- 17b. ícones -------------------------------------------------------- */ svg.ic{width:22px;height:22px;flex:none;display:block} .ic-caixa{display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:50%;background:var(--rose-pale);color:var(--rose-text); margin-bottom:1rem;flex:none} .ic-caixa svg.ic{width:23px;height:23px} .secao--navy .ic-caixa,.chamada .ic-caixa{background:rgba(255,255,255,.12);color:#F8C8DA} .ic-linha{display:inline-flex;align-items:center;gap:.55em} .ic-linha svg.ic{width:18px;height:18px;color:var(--rose-text)} .pilar{display:flex;flex-direction:column} .pilar h3{margin:0} .pilar p{color:var(--ink-soft);font-size:var(--t-small);line-height:1.65;margin:.55rem 0 0} .caminho .ic-caixa{margin-bottom:.35rem} .cartao .corpo .ic-linha{color:var(--rose-text);font-size:var(--t-micro);font-weight:700; letter-spacing:.1em;text-transform:uppercase} /* o bloco pode ter 1 ou 3 linhas (rótulo + várias ligações): o ícone cobre todas */ .dado{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .8rem;align-items:start} .dado > svg.ic{grid-column:1;grid-row:1 / -1;margin-top:.2rem;color:var(--rose);width:19px;height:19px} .dado > :not(svg.ic){grid-column:2;min-width:0} .barra-info svg.ic{width:14px;height:14px;opacity:.8} /* convénios: cada logo num ladrilho branco, recortados do banner da própria clínica */ .convenios{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--e3); max-width:1000px;margin:var(--e5) auto 0} .convenio{background:var(--paper);border:1px solid var(--line);border-radius:2px; min-height:96px;display:flex;align-items:center;justify-content:center; padding:var(--e3) var(--e4);transition:border-color .2s ease} .convenio:hover{border-color:var(--rose-line)} .convenio img{max-height:58px;max-width:100%;width:auto;object-fit:contain} .convenios-nota{margin:var(--e4) 0 0;font-size:var(--t-small);color:var(--ink-soft)} @media (max-width:1000px){.convenios{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.convenios{grid-template-columns:repeat(2,1fr)} .convenio{min-height:84px;padding:var(--e2) var(--e3)}.convenio img{max-height:50px}} /* --- 18. utilitários ---------------------------------------------------- */ .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} .saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff; padding:12px 18px;text-decoration:none} .saltar:focus{left:8px;top:8px} .centro{text-align:center} .mt-g{margin-top:clamp(var(--e5),3vw,var(--e7))} .mt-m{margin-top:var(--e5)} /* --- 19. pontes para as classes do WordPress ---------------------------- */ .menu > li.menu-item-has-children > a::after{content:"";display:inline-block;width:.34em;height:.34em; margin-left:.5em;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg)} .menu .sub-menu{ position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%) translateY(-6px); background:var(--paper);border:1px solid var(--line); box-shadow:0 18px 40px -18px rgba(0,47,87,.3); padding:14px;margin:0;list-style:none;min-width:252px; opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;border-radius:2px} .menu > li:hover > .sub-menu,.menu > li:focus-within > .sub-menu{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .menu .sub-menu a{display:flex;align-items:center;min-height:40px;padding:.68em .7em;font-size:.88rem; line-height:1.35;color:var(--ink);text-decoration:none;border-radius:2px} .menu .sub-menu a:hover{background:var(--rose-pale);color:var(--rose-text)} .menu > li.current-menu-item > a, .menu > li.current-menu-ancestor > a, .menu > li.current-page-ancestor > a{color:var(--rose-text);border-bottom-color:var(--rose)} /* a gaveta recebe e
soltos, sem