/* Instituto Lambert — camada responsiva (mobile/tablet).
   Só o que não pode ser inline: media queries.
   Os seletores casam o valor serializado do atributo style,
   que o navegador normaliza com espaço ("font-size: 20px"). */

[data-nav-toggle] { display: none; }

@media (max-width: 860px) {

  /* ============ CABEÇALHO ============ */
  [data-nav-toggle] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 10px;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
  }
  [data-nav] { display: none !important; }
  [data-nav][data-open] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 2px !important;
    padding: 8px 0 14px !important;
  }
  [data-nav][data-open] > a,
  [data-nav][data-open] [data-menu] > a {
    padding: 13px 2px !important;
    font-size: 17px !important;
    min-height: 46px;
    display: flex;
    align-items: center;
  }
  [data-nav][data-open] [data-menu] { display: block !important; width: 100%; }
  [data-nav][data-open] [data-submenu] {
    display: block !important;
    position: static !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-width: 0 !important;
  }
  [data-nav][data-open] [data-submenu] a { min-height: 46px; display: flex !important; align-items: center; }
  [data-topbar] { display: none !important; }
  [data-header] { height: 68px !important; }
  [data-navbar] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    box-shadow: 0 2px 12px rgba(15, 32, 48, .18);
    max-height: 100vh;
    overflow-y: auto;
  }
  [data-logo] { height: 44px !important; }

  /* ============ ESTRUTURA ============ */
  [style*="grid-template-columns"]:not([data-colorbar]) { grid-template-columns: minmax(0, 1fr) !important; }
  [data-colorbar] { grid-template-columns: 1fr 1fr 1fr !important; }
  [style*="grid-template-columns"] > * { min-width: 0 !important; }
  [style*="1cm"] { gap: 22px !important; }
  [style*="nowrap"] { flex-wrap: wrap !important; }
  /* ---- Recuo lateral: 32px, definido uma única vez na seção ---- */
  section, article { padding-left: 32px !important; padding-right: 32px !important; }
  section div, section ul, section ol, section form, section summary,
  article div, article ul, article ol, footer div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
  [style*="1200px"], [style*="1140px"], [style*="1080px"],
  [style*="1000px"], [style*="960px"], [style*="900px"] { max-width: 100% !important; }

  /* ============ ESCALA TIPOGRÁFICA ============
     Reduz cada tamanho inline mantendo a hierarquia,
     com piso de 15px para texto corrido. */
  [style*="font-size: 46px"] { font-size: 31px !important; }
  [style*="font-size: 44px"] { font-size: 30px !important; }
  [style*="font-size: 40px"] { font-size: 29px !important; }
  [style*="font-size: 38px"] { font-size: 28px !important; }
  [style*="font-size: 37px"] { font-size: 28px !important; }
  [style*="font-size: 35px"] { font-size: 27px !important; }
  [style*="font-size: 36px"] { font-size: 28px !important; }
  [style*="font-size: 34px"] { font-size: 27px !important; }
  [style*="font-size: 33px"] { font-size: 26px !important; }
  [style*="font-size: 32px"] { font-size: 25px !important; }
  [style*="font-size: 31px"] { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 24px !important; }
  [style*="font-size: 29px"] { font-size: 23px !important; }
  [style*="font-size: 28px"] { font-size: 23px !important; }
  [style*="font-size: 27px"] { font-size: 22px !important; }
  [style*="font-size: 26px"] { font-size: 21px !important; }
  [style*="font-size: 25px"] { font-size: 21px !important; }
  [style*="font-size: 24px"] { font-size: 20px !important; }
  [style*="font-size: 23px"] { font-size: 19px !important; }
  [style*="font-size: 22px"] { font-size: 19px !important; }
  [style*="font-size: 21px"] { font-size: 18px !important; }
  [style*="font-size: 20px"] { font-size: 17px !important; }
  [style*="font-size: 19px"] { font-size: 17px !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }
  [style*="font-size: 17px"] { font-size: 16px !important; }
  [style*="font-size: 16px"] { font-size: 15.5px !important; }
  [style*="font-size: 15px"] { font-size: 15px !important; }

  /* Conforto de leitura: entrelinha e largura de medida */
  p, li { line-height: 1.68 !important; text-wrap: pretty; }
  p[style*="line-height: 1.15"] { line-height: 1.15 !important; }
  p[style*="font-size: 31px"], p[style*="font-size: 27px"] { line-height: 1.25 !important; }
  p { max-width: 68ch; }
  h1, h2 { line-height: 1.28 !important; letter-spacing: -0.01em; }
  h3 { line-height: 1.35 !important; }

  /* Foto primeiro, texto abaixo — e ambos na mesma largura */
  [style*="grid-template-columns"] > image-slot,
  [style*="grid-template-columns"] > img,
  [style*="grid-template-columns"] > div:has(> image-slot:only-child),
  [style*="grid-template-columns"] > div:has(> img:only-child) { order: -1 !important; }
  [style*="grid-template-columns"] > image-slot,
  [style*="grid-template-columns"] > img { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  [style*="grid-template-columns"] > * { padding-left: 0 !important; padding-right: 0 !important; }
  p, h1, h2, h3, h4, ul, ol { max-width: 100% !important; }

  section[data-hero-full] {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex !important;
    align-items: stretch;
  }
  section[data-hero-full] > image-slot {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }
  /* Overlay que contém texto deixa de ser absoluto: a seção cresce com o conteúdo */
  section[data-hero-full] > div:has(h1),
  section[data-hero-full] > div:has(h2) {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
    min-height: 320px;
  }
  section[data-hero-full] > div:has(h1):not([data-x]),
  section[data-hero-full] > div:has(h2):not([data-x]) { padding-left: 32px !important; padding-right: 32px !important; }
  section[data-hero-full] > div:has(h1) > div,
  section[data-hero-full] > div:has(h2) > div { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* Logo repetido no herói (já existe no cabeçalho) */
  section[data-hero-full] img[alt*="Instituto Lambert"] { display: none !important; }

  /* Herói empilhado: aqui a foto vira fundo de tela cheia e o texto branco
     corre por cima dela inteira (camisa clara, poltrona), não só do canto
     escuro como no desktop — os 15% de sombra do desktop não bastam. */
  section[data-hero-full] > div[data-veu] { background: rgba(9,17,24,.45) !important; }

  /* ============ CARTÕES: sangram na borda, texto no mesmo recuo ============ */
  section div[style*="background"]:not([data-gallery]):not([data-svc-block]),
  section div[style*="border:"]:not([data-gallery]),
  section div[style*="border: 1px"]:not([data-gallery]),
  section article, section details, section blockquote, article + article,
  section [style*="grid-template-columns"] > article,
  section [style*="grid-template-columns"] > blockquote,
  section [style*="grid-template-columns"] > details,
  section [style*="grid-template-columns"] > div[style*="background"] {
    margin-left: -32px !important;
    margin-right: -32px !important;
    width: calc(100% + 64px) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    border-radius: 0 !important;
  }
  /* cartão dentro de cartão não sangra de novo */
  section div[style*="background"] div[style*="background"],
  section div[style*="background"] div[style*="border:"],
  section article div[style*="background"], section article div[style*="border:"],
  section details div[style*="background"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* trilhas de carrossel mantêm os cartões contidos */
  [data-blog-track] > article, [data-gallery] > *,
  [data-blog-track] > article div[style*="background"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
  }
  [data-blog-track] > article { padding-left: 20px !important; padding-right: 20px !important; }
  section blockquote > div, section blockquote p,
  section article > div, section article div,
  section details > div, section [data-svc-block] > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
  }
  [data-svc-block] {
    margin-left: -32px !important;
    margin-right: -32px !important;
    width: calc(100% + 64px) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    border-radius: 0 !important;
  }

  /* ============ IMAGENS: largura total, sem margem lateral ============ */
  section image-slot:not([shape="circle"])[style*="width: 100%"],
  article image-slot:not([shape="circle"])[style*="width: 100%"],
  section > img:not([style*="border-radius: 999px"]):not([style*="object-fit: contain"]),
  section > div > img:not([style*="border-radius: 999px"]):not([style*="object-fit: contain"]) {
    margin-left: -32px !important;
    margin-right: -32px !important;
    width: calc(100% + 64px) !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
  /* imagens dentro de cartões seguem contidas no cartão.
     O :not(object-fit: contain) é o mesmo escape das duas regras acima: sem ele
     o ícone do WhatsApp dentro dos botões-pílula (que têm background inline)
     era esticado para 100% e espremia o rótulo em 3 linhas. */
  [style*="background"] > image-slot,
  [style*="border"] > image-slot,
  [style*="background"] > img:not([style*="object-fit: contain"]),
  [style*="border"] > img:not([style*="object-fit: contain"]) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 8px !important;
  }
  section[data-hero-full] image-slot { margin: 0 !important; width: 100% !important; }

  /* ============ IMAGENS ============ */
  img[style*="height: 172px"] { height: 76px !important; }
  img[style*="height: 130px"], img[style*="height: 120px"] { height: 68px !important; }
  image-slot:not([shape="circle"]), section img:not([style*="border-radius: 999px"]):not([style*="object-fit: contain"]) { border-radius: 10px !important; }
  section[data-hero-full] > image-slot { border-radius: 0 !important; }
  [data-logo], [data-topbar] img, a[aria-label="Falar no WhatsApp"] img { border-radius: 0 !important; }
  image-slot[style*="height: 520px"],
  image-slot[style*="height: 470px"] { height: 360px !important; }
  image-slot[style*="height: 480px"],
  image-slot[style*="height: 420px"] { height: 290px !important; }
  image-slot[style*="height: 340px"],
  image-slot[style*="height: 300px"] { height: 230px !important; }
  image-slot[style*="height: 200px"],
  image-slot[style*="height: 190px"] { height: 210px !important; }
  image-slot[style*="height: 180px"],
  image-slot[style*="height: 170px"] { height: 190px !important; }
  image-slot[style*="height: 140px"] { height: 180px !important; }
  image-slot[style*="min-height: 380px"],
  image-slot[style*="min-height: 420px"] { min-height: 250px !important; }
  iframe { height: 250px !important; }

  /* ============ FORMULÁRIOS E BOTÕES ============ */
  img[alt="Socell"] { margin-left: auto !important; margin-right: auto !important; }
  [data-cta-center] {
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  form { max-width: 100% !important; }
  form[style*="999px"] { flex-wrap: wrap !important; }
  form[style*="999px"] > input,
  form[style*="999px"] > button { min-width: 0 !important; flex: 1 1 100% !important; }
  /* Newsletter do rodapé: botão embaixo do campo de email */
  footer form { flex-direction: column !important; align-items: stretch !important; }
  footer form > input, footer form > button { flex: 1 1 auto !important; width: 100% !important; }
  footer h2 { text-align: center !important; }
  input, textarea, select, button { font-size: 16px !important; }
  input, textarea, button[type="submit"] { min-height: 46px; }

  /* ============ CARROSSEL DO BLOG ============ */
  [data-blog-track] > article, [data-blog-track] > article[style*="340px"] { flex: 0 0 78vw !important; }

  /* ============ GALERIA DO CENTRO: CARROSSEL ============ */
  [data-gallery] {
    margin-left: -32px !important;
    margin-right: -32px !important;
    width: calc(100% + 64px) !important;
    display: flex !important;
    gap: 8px !important;
    scroll-padding-left: 0;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px !important;
  }
  section [data-gallery] > image-slot,
  [data-gallery] > * {
    flex: 0 0 86% !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    scroll-snap-align: start;
    height: 230px !important;
  }

  /* Lista de passos com barra lateral mantém o recuo */
  section div[style*="border-left"] { padding-left: 18px !important; }

  /* ============ BLOCO DE SERVIÇOS (home) ============ */
  [data-svc-block] { padding-top: 30px !important; padding-bottom: 30px !important; }
  [data-svc-list] { gap: 12px !important; font-size: 16px !important; }
  [data-svc-list] > li { gap: 9px !important; align-items: flex-start; line-height: 1.45; }
}

@media (max-width: 1024px) {
  a[aria-label="Falar no WhatsApp"] { right: 4px !important; }
}

@media (max-width: 520px) {
  section { padding-left: 32px !important; padding-right: 32px !important; }
  [style*="font-size: 46px"] { font-size: 28px !important; }
  [style*="font-size: 44px"] { font-size: 27px !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"],
  [style*="font-size: 37px"], [style*="font-size: 35px"] { font-size: 25px !important; }
  [style*="font-size: 36px"], [style*="font-size: 34px"] { font-size: 25px !important; }
  [style*="font-size: 33px"], [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size: 31px"], [style*="font-size: 30px"],
  [style*="font-size: 29px"], [style*="font-size: 28px"] { font-size: 22px !important; }
  [style*="font-size: 27px"], [style*="font-size: 26px"],
  [style*="font-size: 25px"] { font-size: 20px !important; }

  /* CTAs de largura fixa ocupam a linha inteira */
  a[style*="width: 280px"], a[style*="width: 240px"],
  a[style*="width: 200px"], a[style*="width: 416px"] { width: 100% !important; }

  image-slot[style*="height: 520px"],
  image-slot[style*="height: 470px"] { height: 300px !important; }
  [data-blog-track] > article { flex: 0 0 88vw !important; }
  [data-grid-2][data-grid-2] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  section [data-grid-2][data-grid-2] > div, [data-grid-2] > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 14px 12px !important;
  }
  [data-grid-2] image-slot { height: 96px !important; }
  [data-grid-2] p, [data-grid-2] h3 { font-size: 14px !important; }
}

/* CTA "Agende sua avaliação" (seção Além da Visão): rótulo longo */
@media (max-width: 520px) {
  [data-cta-stem] {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.3 !important;
    padding: 12px 16px !important;
  }
  [data-cta-stem] img { width: 22px !important; height: 22px !important; }
}

/* ============ CTA do Colírio PRP: foto sempre inteira ============
   A moldura usa aspect-ratio (7/5, a proporção da própria foto), então nada
   é recortado em nenhuma largura. Entre 620 e 860px a foto é centralizada
   com largura máxima para não virar meia tela de altura no tablet. */
@media (max-width: 860px) {
  #colirio-prp-img-19 { height: auto !important; aspect-ratio: 7 / 5; }
}
@media (min-width: 620px) and (max-width: 860px) {
  #colirio-prp-img-19 {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
  }
}

/* ============ Herói da Cirurgia de Catarata ============
   A foto nova é clara (parede branca atrás da paciente), então o véu de 45%
   dos outros heróis não segura o texto branco. No empilhamento a imagem fica
   atrás do bloco inteiro, por isso aqui o véu é chapado e mais forte. */
@media (max-width: 860px) {
  section[data-hero-full] > div[data-veu="grad"] { background: rgba(9,17,24,.62) !important; }
}

/* ============ FAIXA DE LOGOS DO GRUPO ZTL (rodape) ============
   A imagem tem 1965px e o conteudo comeca aos 73px (3,7% da largura), entao o
   translateX(-40px) do desktop so cabe enquanto ela e exibida com ~1080px. Abaixo
   disso os 40px passam a comer o logo do Instituto Lambert; aqui o deslocamento sai. */
@media (max-width: 1100px) {
  img[alt^="Grupo ZTL"] { transform: none !important; }
}

/* ============ BOTÕES-PÍLULA NO MOBILE: rótulo quebrado ============
   Rótulos longos ("Agende uma avaliação de Oftalmologia Regenerativa") não cabem
   em uma linha em nenhuma largura de celular, então o que dá para consertar é
   COMO eles quebram:
   - centralizado, não encostado à esquerda com um vão grande à direita;
   - text-wrap: balance divide as linhas por igual em vez de largar uma palavra
     órfã embaixo ("…Dr. Lisandro / Lambert");
   - nos botões com ícone, o ícone entra no fluxo do texto (inline-block) em vez
     de ser um item flex: assim ícone e rótulo ficam juntos e centralizados,
     e não o ícone colado na borda esquerda com o texto solto no meio.
   O :not([aria-label]) preserva os botões flutuantes (WhatsApp e voltar ao topo),
   que são só ícone e têm posicionamento próprio. */
@media (max-width: 860px) {
  a[style*="border-radius: 999px"]:not([aria-label]) {
    text-align: center !important;
    text-wrap: balance;
  }
  a[style*="border-radius: 999px"]:not([aria-label]):has(> img) {
    display: inline-block !important;
  }
  a[style*="border-radius: 999px"]:not([aria-label]) > img[style*="object-fit: contain"] {
    width: 29px !important;
    height: 29px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: -5px 6px -5px 0 !important;
  }
  /* O CTA do WhatsApp da Home é filho direto de um grid, então a regra que tira o
     padding lateral das colunas levava junto o padding dele e o rótulo colava na
     borda da pílula. Aqui o recuo volta (é o mesmo 18px do style inline).
     Feito com regra própria de propósito: pôr um :not() naquela regra aumentaria a
     especificidade dela e ela passaria a vencer o recuo interno dos cartões do Blog. */
  [style*="grid-template-columns"] > a[style*="border-radius: 999px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ============ BOTÕES DO CELULAR: UM TAMANHO SÓ ============
   Antes cada botão tinha o seu: 10 alturas diferentes (35 a 49px), fonte 14/15/16
   e três pesos, porque cada seção veio com o padding e a fonte do editor. Aqui todos
   os CTAs passam a ter a MESMA caixa: largura da coluna de conteúdo, altura 48px
   (alvo de toque confortável — vários estavam em 35–43px) e a mesma tipografia.
   Como fonte, entrelinha e padding ficam iguais, a altura sai igual sozinha:
   15 × 1,35 = 20,25 + 28 de padding = 48px. Os de duas linhas dão 69px, também
   iguais entre si.

   Por que 520px e não 860: entre 520 e 860 a dupla "Solicitar Colírio PRP" /
   "Falar com a equipe" ainda fica lado a lado; largura total só faz sentido depois
   que tudo já está empilhado (verificado: empilha abaixo de 520).

   max-width: calc(100vw - 64px) alinha o botão com a coluna de texto mesmo quando o
   pai dele é a seção inteira (caso da Oftalmologia, cujo pai tem a largura da tela);
   64px = os 32px de recuo lateral que as seções usam no celular.

   Ficam de fora: os flutuantes ([aria-label]) e o chip de categoria dos posts
   ("Terapia com células tronco", href=?tag=), que é etiqueta e não botão. */
@media (max-width: 520px) {
  a[style*="border-radius: 999px"]:not([aria-label]):not([href*="?tag="]),
  form button[type="submit"] {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: calc(100vw - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 48px !important;
    padding: 14px 22px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }
  /* Ícone junto do rótulo. 29px = os 22px anteriores +30% (pedido do cliente).
     As margens verticais negativas encolhem só a CAIXA do ícone para o cálculo da
     linha (29 − 10 = 19px, menos que os 20,25 do texto), então ele não estica a
     altura do botão; o desenho continua com 29px e sobra para dentro do padding.
     vertical-align: -8px mantém o mesmo centro óptico de antes (6px acima da
     linha de base): 6 − 29/2 ≈ −8,5. */
  a[style*="border-radius: 999px"]:not([aria-label]) > img {
    width: 29px !important;
    height: 29px !important;
    display: inline-block !important;
    vertical-align: -8px !important;
    margin: -5px 7px -5px 0 !important;
  }
  /* Botão com borda de 1px: 1px a menos de padding em cima e embaixo, senão fica
     2px mais alto que os de fundo chapado e a fileira desalinha. */
  a[style*="border-radius: 999px"][style*="border: 1px solid"]:not([aria-label]) {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
}

/* ============ FOTOS INTEIRAS NO CELULAR ============
   O <image-slot> enquadra a foto como 'cover': ela preenche a caixa e o que sobra
   é cortado. No celular as caixas vêm com altura fixa do editor (180–300px), então
   fotos em pé perdiam metade — a Tânia ficava sem o topo da cabeça, os rostos da
   página do Colírio PRP eram cortados no queixo e as 5 fotos da clínica (3:4)
   viravam uma tarja.

   Correção: aqui cada slot recebe a proporção da SUA imagem e passa a ter altura
   automática. Como a caixa fica com a mesma proporção do arquivo, o 'cover' não
   tem o que cortar e também não sobra tarja vazia (é diferente de object-fit:
   contain, que encolheria a foto e deixaria faixas ao lado).

   - height/min-height/max-height precisam ser zerados junto: o :host do componente
     traz height:100% e vários slots trazem min-height inline; só a aspect-ratio
     não vence isso.
   - Ficam de fora os heróis (a foto é fundo de texto: ali o corte é proposital e
     dar altura própria a ela abriria buraco atrás do título).
   - A proporção é a do arquivo de hoje; se a imagem for trocada por outra de
     formato diferente, o número aqui precisa acompanhar.
   Medido em 390px e 768px nas 18 páginas: 81 slots cortavam de 4% a 61%. */
@media (max-width: 860px) {
  #blog-img-1,
  #blog-img-11,
  #blog-img-13,
  #blog-img-15,
  #blog-img-3,
  #blog-img-5,
  #blog-img-7,
  #blog-img-9,
  #cirurgia-de-catarata-img-2,
  #cirurgia-de-catarata-img-3,
  #cirurgia-de-catarata-img-4,
  #cirurgia-de-catarata-img-5,
  #cirurgia-de-catarata-img-6,
  #cirurgia-de-catarata-img-7,
  #cirurgia-de-catarata-img-8,
  #cirurgia-de-catarata-img-9,
  #cirurgia-de-retina-img-2,
  #cirurgia-de-retina-img-3,
  #cirurgia-de-retina-img-4,
  #cirurgia-de-retina-img-5,
  #cirurgia-de-retina-img-6,
  #cirurgia-de-retina-img-7,
  #cirurgia-de-retina-img-8,
  #cirurgia-de-retina-img-9,
  #colirio-prp-img-1,
  #colirio-prp-img-10,
  #colirio-prp-img-11,
  #colirio-prp-img-12,
  #colirio-prp-img-13,
  #colirio-prp-img-14,
  #colirio-prp-img-15,
  #colirio-prp-img-16,
  #colirio-prp-img-17,
  #colirio-prp-img-18,
  #colirio-prp-img-2,
  #colirio-prp-img-3,
  #colirio-prp-img-4,
  #colirio-prp-img-5,
  #colirio-prp-img-6,
  #colirio-prp-img-7,
  #colirio-prp-img-8,
  #colirio-prp-img-9,
  #home-img-1,
  #home-img-10,
  #home-img-11,
  #home-img-2,
  #home-img-5,
  #home-img-6,
  #home-img-7,
  #home-img-8,
  #home-img-9,
  #livro-img-1,
  #livro-img-2,
  #livro-img-3,
  #medicina-integrativa-img-3,
  #oftalmologia-blog-1,
  #oftalmologia-blog-2,
  #oftalmologia-blog-3,
  #oftalmologia-blog-4,
  #oftalmologia-blog-5,
  #oftalmologia-blog-6,
  #oftalmologia-img-10,
  #oftalmologia-img-11,
  #oftalmologia-img-12,
  #oftalmologia-img-2,
  #oftalmologia-img-3,
  #oftalmologia-img-4,
  #oftalmologia-img-5,
  #oftalmologia-img-6,
  #oftalmologia-img-7,
  #oftalmologia-img-8,
  #oftalmologia-img-9,
  #oi-celulas,
  #oi-dr,
  #oi-g1,
  #oi-g2,
  #oi-g3,
  #oi-g4,
  #oi-g5,
  #oi-harvard-img,
  #psicologia-e-terapia-do-movimento-img-1 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #blog-img-1 { aspect-ratio: 1080 / 867; }   /* Blog — cortava 66% */
  #blog-img-11 { aspect-ratio: 960 / 640; }   /* Blog — cortava 59% */
  #blog-img-13 { aspect-ratio: 960 / 640; }   /* Blog — cortava 59% */
  #blog-img-15 { aspect-ratio: 960 / 640; }   /* Blog — cortava 59% */
  #blog-img-3 { aspect-ratio: 960 / 640; }   /* Blog — cortava 59% */
  #blog-img-5 { aspect-ratio: 960 / 640; }   /* Blog — cortava 59% */
  #blog-img-7 { aspect-ratio: 960 / 640; }   /* Blog — cortava 59% */
  #blog-img-9 { aspect-ratio: 960 / 640; }   /* Blog — cortava 59% */
  #cirurgia-de-catarata-img-2 { aspect-ratio: 380 / 200; }   /* Cirurgia de Catarata — cortava 29% */
  #cirurgia-de-catarata-img-3 { aspect-ratio: 1600 / 1937; }   /* Cirurgia de Catarata — cortava 61% */
  #cirurgia-de-catarata-img-4 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Catarata — cortava 74% */
  #cirurgia-de-catarata-img-5 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Catarata — cortava 74% */
  #cirurgia-de-catarata-img-6 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Catarata — cortava 74% */
  #cirurgia-de-catarata-img-7 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Catarata — cortava 74% */
  #cirurgia-de-catarata-img-8 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Catarata — cortava 74% */
  #cirurgia-de-catarata-img-9 { aspect-ratio: 1600 / 1066; }   /* Cirurgia de Catarata — cortava 48% */
  #cirurgia-de-retina-img-2 { aspect-ratio: 1080 / 1080; }   /* Cirurgia de Retina — cortava 80% */
  #cirurgia-de-retina-img-3 { aspect-ratio: 1600 / 1937; }   /* Cirurgia de Retina — cortava 69% */
  #cirurgia-de-retina-img-4 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Retina — cortava 74% */
  #cirurgia-de-retina-img-5 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Retina — cortava 74% */
  #cirurgia-de-retina-img-6 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Retina — cortava 74% */
  #cirurgia-de-retina-img-7 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Retina — cortava 74% */
  #cirurgia-de-retina-img-8 { aspect-ratio: 1600 / 2133; }   /* Cirurgia de Retina — cortava 74% */
  #cirurgia-de-retina-img-9 { aspect-ratio: 1600 / 1066; }   /* Cirurgia de Retina — cortava 48% */
  #colirio-prp-img-1 { aspect-ratio: 632 / 848; }   /* Colirio PRP — cortava 65% */
  #colirio-prp-img-10 { aspect-ratio: 348 / 354; }   /* Colirio PRP — cortava 81% */
  #colirio-prp-img-11 { aspect-ratio: 360 / 354; }   /* Colirio PRP — cortava 80% */
  #colirio-prp-img-12 { aspect-ratio: 288 / 324; }   /* Colirio PRP — cortava 40% */
  #colirio-prp-img-13 { aspect-ratio: 300 / 336; }   /* Colirio PRP — cortava 40% */
  #colirio-prp-img-14 { aspect-ratio: 300 / 276; }   /* Colirio PRP — cortava 83% */
  #colirio-prp-img-15 { aspect-ratio: 300 / 276; }   /* Colirio PRP — cortava 83% */
  #colirio-prp-img-16 { aspect-ratio: 300 / 276; }   /* Colirio PRP — cortava 83% */
  #colirio-prp-img-17 { aspect-ratio: 300 / 276; }   /* Colirio PRP — cortava 83% */
  #colirio-prp-img-18 { aspect-ratio: 300 / 276; }   /* Colirio PRP — cortava 83% */
  #colirio-prp-img-2 { aspect-ratio: 348 / 234; }   /* Colirio PRP — cortava 77% */
  #colirio-prp-img-3 { aspect-ratio: 348 / 234; }   /* Colirio PRP — cortava 77% */
  #colirio-prp-img-4 { aspect-ratio: 348 / 234; }   /* Colirio PRP — cortava 77% */
  #colirio-prp-img-5 { aspect-ratio: 348 / 234; }   /* Colirio PRP — cortava 77% */
  #colirio-prp-img-6 { aspect-ratio: 360 / 234; }   /* Colirio PRP — cortava 76% */
  #colirio-prp-img-7 { aspect-ratio: 348 / 354; }   /* Colirio PRP — cortava 81% */
  #colirio-prp-img-8 { aspect-ratio: 348 / 354; }   /* Colirio PRP — cortava 81% */
  #colirio-prp-img-9 { aspect-ratio: 348 / 354; }   /* Colirio PRP — cortava 81% */
  #home-img-1 { aspect-ratio: 760 / 760; }   /* (home) — cortava 33% */
  #home-img-10 { aspect-ratio: 800 / 450; }   /* (home) — cortava 38% */
  #home-img-11 { aspect-ratio: 800 / 450; }   /* (home) — cortava 38% */
  #home-img-2 { aspect-ratio: 1080 / 1920; }   /* (home) — cortava 62% */
  #home-img-5 { aspect-ratio: 1000 / 1200; }   /* (home) — cortava 44% */
  #home-img-6 { aspect-ratio: 800 / 450; }   /* (home) — cortava 38% */
  #home-img-7 { aspect-ratio: 800 / 450; }   /* (home) — cortava 38% */
  #home-img-8 { aspect-ratio: 800 / 450; }   /* (home) — cortava 38% */
  #home-img-9 { aspect-ratio: 800 / 450; }   /* (home) — cortava 38% */
  #livro-img-1 { aspect-ratio: 1080 / 1080; }   /* Livro — cortava 33% */
  #livro-img-2 { aspect-ratio: 1600 / 1937; }   /* Livro — cortava 47% */
  #livro-img-3 { aspect-ratio: 1080 / 1080; }   /* Livro — cortava 33% */
  #medicina-integrativa-img-3 { aspect-ratio: 1080 / 1920; }   /* Medicina Integrativa — cortava 59% */
  #oftalmologia-blog-1 { aspect-ratio: 1080 / 867; }   /* Oftalmologia — cortava 58% */
  #oftalmologia-blog-2 { aspect-ratio: 960 / 640; }   /* Oftalmologia — cortava 49% */
  #oftalmologia-blog-3 { aspect-ratio: 960 / 640; }   /* Oftalmologia — cortava 49% */
  #oftalmologia-blog-4 { aspect-ratio: 960 / 640; }   /* Oftalmologia — cortava 49% */
  #oftalmologia-blog-5 { aspect-ratio: 960 / 640; }   /* Oftalmologia — cortava 49% */
  #oftalmologia-blog-6 { aspect-ratio: 960 / 640; }   /* Oftalmologia — cortava 49% */
  #oftalmologia-img-10 { aspect-ratio: 1600 / 2133; }   /* Oftalmologia — cortava 74% */
  #oftalmologia-img-11 { aspect-ratio: 1600 / 1066; }   /* Oftalmologia — cortava 48% */
  #oftalmologia-img-12 { aspect-ratio: 1600 / 1524; }   /* Oftalmologia — cortava 59% */
  #oftalmologia-img-2 { aspect-ratio: 1600 / 1937; }   /* Oftalmologia — cortava 69% */
  #oftalmologia-img-3 { aspect-ratio: 380 / 200; }   /* Oftalmologia — cortava 32% */
  #oftalmologia-img-4 { aspect-ratio: 937 / 450; }   /* Oftalmologia — cortava 38% */
  #oftalmologia-img-5 { aspect-ratio: 1080 / 1080; }   /* Oftalmologia — cortava 70% */
  #oftalmologia-img-6 { aspect-ratio: 1600 / 2133; }   /* Oftalmologia — cortava 74% */
  #oftalmologia-img-7 { aspect-ratio: 1600 / 2133; }   /* Oftalmologia — cortava 74% */
  #oftalmologia-img-8 { aspect-ratio: 1600 / 2133; }   /* Oftalmologia — cortava 74% */
  #oftalmologia-img-9 { aspect-ratio: 1600 / 2133; }   /* Oftalmologia — cortava 74% */
  #oi-celulas { aspect-ratio: 1080 / 1080; }   /* Oftalmologia Integrativa — cortava 74% */
  #oi-dr { aspect-ratio: 2000 / 1333; }   /* Oftalmologia Integrativa — cortava 30% */
  #oi-g1 { aspect-ratio: 1456 / 1042; }   /* Oftalmologia Integrativa — cortava 65% */
  #oi-g2 { aspect-ratio: 1450 / 1038; }   /* Oftalmologia Integrativa — cortava 65% */
  #oi-g3 { aspect-ratio: 1437 / 1043; }   /* Oftalmologia Integrativa — cortava 66% */
  #oi-g4 { aspect-ratio: 1438 / 1042; }   /* Oftalmologia Integrativa — cortava 66% */
  #oi-g5 { aspect-ratio: 1433 / 1033; }   /* Oftalmologia Integrativa — cortava 66% */
  #oi-harvard-img { aspect-ratio: 1024 / 1024; }   /* Oftalmologia Integrativa — cortava 64% */
  #psicologia-e-terapia-do-movimento-img-1 { aspect-ratio: 560 / 808; }   /* Psicologia e Terapia do Movimento — cortava 74% */
}

/* Estes tres slots sao itens de um flex em linha, e item de flex estica na
   vertical por padrao (align-items: normal): a altura vinha da linha inteira
   (880px em vez dos 440 da proporcao) e a foto voltava a ser cortada ao meio.
   align-self: start devolve a altura para a proporcao. So mexe no eixo vertical
   — sao itens de linha, o alinhamento horizontal nao muda. */
@media (max-width: 860px) {
  #oftalmologia-img-11,
  #cirurgia-de-catarata-img-9,
  #cirurgia-de-retina-img-9 { align-self: start !important; }
}


/* Campo "Assunto": enquanto nada foi escolhido, o rotulo fica na mesma cor dos
   placeholders dos outros campos (o :invalid vale porque o select e required). */
select[name="Assunto"][data-tema="escuro"]:invalid { color: rgba(255,255,255,.55) !important; }
select[name="Assunto"]:invalid { color: rgba(31,59,77,.55) !important; }


@media (max-width: 860px) {
  /* Foto do Dr. Lisandro na Home: e um retrato 1080x1920 e, ocupando a largura
     inteira do celular, ficava com 693px = 82% da altura da tela. Limitar a
     LARGURA reduz a altura na mesma proporcao, sem recortar nada da foto
     (mexer em height/max-height devolveria o recorte do cover). */
  #home-img-2 { max-width: 300px !important; margin-left: auto !important;
                margin-right: auto !important; justify-self: center; }
}