/*
Theme Name: Petini
Theme URI: https://drjoaopetini.com
Author: Julio Angeli
Description: Tema sob medida para o site do Dr. Joao Marcelo Petini - ortopedia e traumatologia, cirurgia de quadril e joelho.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: petini
*/


  /* ============ TOKENS — dark é o tema deliberado desta página ============ */
  :root{
    --bg:#0B1719; --surface:#132428; --surface-alt:#1A2E33;
    --ink:#E7EEEF; --ink-2:#A6B6BA; --ink-3:#76898D; --border:#274045;
    --primary:#5FA8BE; --primary-dark:#85C2D4; --primary-light:#16333B; --on-primary:#04161A;
    --accent:#E0A94F; --accent-light:#2A2013;
    --whatsapp:#25D366; --on-whatsapp:#04161A; --error:#FF8A7A;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.4);
    --shadow-md: 0 10px 24px rgba(0,0,0,.4);
    --shadow-lg: 0 28px 64px rgba(0,0,0,.55);
    --radius-sm:6px; --radius-md:14px; --radius-lg:24px; --radius-pill:999px;
    --font-display:'Domine', Georgia, 'Times New Roman', serif;
    --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --ease-standard: cubic-bezier(.22,.61,.36,1);
    --duration-fast: 180ms; --duration-base: 500ms; --duration-slow: 900ms;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#F3F6F6; --surface:#FFFFFF; --surface-alt:#E6EDEE;
      --ink:#16232A; --ink-2:#47585F; --ink-3:#71838A; --border:#D5DEE0;
      --primary:#1C4E5E; --primary-dark:#123540; --primary-light:#DEEAEC; --on-primary:#FFFFFF;
      --accent:#BF8B3E; --accent-light:#F5ECDB;
      --whatsapp:#25D366; --on-whatsapp:#FFFFFF; --error:#B3261E;
      --shadow-sm: 0 1px 2px rgba(22,35,42,.07), 0 1px 1px rgba(22,35,42,.05);
      --shadow-md: 0 10px 24px rgba(22,35,42,.10);
      --shadow-lg: 0 28px 64px rgba(22,35,42,.16);
    }
  }
  :root[data-theme="light"]{
    --bg:#F3F6F6; --surface:#FFFFFF; --surface-alt:#E6EDEE;
    --ink:#16232A; --ink-2:#47585F; --ink-3:#71838A; --border:#D5DEE0;
    --primary:#1C4E5E; --primary-dark:#123540; --primary-light:#DEEAEC; --on-primary:#FFFFFF;
    --accent:#BF8B3E; --accent-light:#F5ECDB;
    --whatsapp:#25D366; --on-whatsapp:#FFFFFF; --error:#B3261E;
    --shadow-sm: 0 1px 2px rgba(22,35,42,.07), 0 1px 1px rgba(22,35,42,.05);
    --shadow-md: 0 10px 24px rgba(22,35,42,.10);
    --shadow-lg: 0 28px 64px rgba(22,35,42,.16);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;}
  h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;color:var(--ink);}
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img,svg{max-width:100%;}
  ::selection{background:var(--primary-light);}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  .wrap{max-width:1200px;margin-inline:auto;padding-inline:24px;}
  @media (max-width:640px){ .wrap{padding-inline:20px;} }
  section{padding-block:96px;}
  @media (max-width:640px){ section{padding-block:64px;} }

  .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-block-end:44px;flex-wrap:wrap;}
  .section-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:500;margin-block-start:10px;max-width:20ch;}
  .section-head .sub{color:var(--ink-2);font-size:15px;max-width:46ch;margin-block-start:10px;}
  .section-head .cta{font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap;}
  .section-head .cta:hover{text-decoration:underline;}

  .btn{font-family:var(--font-body);font-weight:600;font-size:14.5px;padding:14px 26px;border-radius:var(--radius-pill);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);}
  .btn-primary{background:var(--primary);color:var(--on-primary);}
  .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05);}
  .btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
  .btn-outline:hover{border-color:var(--accent);color:var(--accent);}
  .btn-whatsapp{background:var(--whatsapp);color:#fff;}
  .btn-whatsapp:hover{transform:translateY(-1px);filter:brightness(.96);}

  .icon-round{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);}
  .icon-round:hover{border-color:var(--accent);}
  .icon-round svg{width:17px;height:17px;color:var(--ink);}
  .icon-round.filled{background:var(--primary);border-color:var(--primary);}
  .icon-round.filled svg{color:var(--on-primary);}
  .icon-round.is-disabled{opacity:.35;pointer-events:none;}
  .lang-toggle{width:auto;padding-inline:14px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink);}

  /* ============ NAV ============ */
  header.site-nav{position:fixed;top:0;left:0;right:0;z-index:40;padding-block:20px;transition:background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard);}
  header.site-nav.scrolled{background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);padding-block:14px;}
  .nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;}
  /* flex:none — sem isso o .brand encolhe no celular e o overflow:hidden corta
     o nome ("Dr. Petini" virava "Dr. Petir"). */
  .brand{font-family:var(--font-display);font-weight:600;font-size:18px;position:relative;height:34px;display:flex;align-items:center;overflow:hidden;flex:none;}
  .brand-text{display:block;white-space:nowrap;transition:transform .4s var(--ease-standard), opacity .3s var(--ease-standard);}
  .brand-avatar{position:absolute;left:0;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1.5px solid var(--border);opacity:0;transform:translateY(120%);transition:transform .4s var(--ease-standard), opacity .3s var(--ease-standard);}
  header.site-nav.scrolled .brand-text{transform:translateY(-130%);opacity:0;}
  header.site-nav.scrolled .brand-avatar{transform:translateY(0);opacity:1;}
  .nav-links{display:flex;gap:30px;font-size:13.5px;font-weight:500;color:var(--ink-2);}
  .nav-links a:hover{color:var(--primary);}
  .nav-row .btn-primary{white-space:nowrap;}

  /* Abaixo de 960px os links saem da barra; sem o menu recolhido o site ficava
     sem navegação nenhuma no celular e no tablet em retrato. */
  .nav-burger{display:none;}
  @media (max-width:960px){
    .nav-links{display:none;}
    .nav-burger{display:flex;}
  }
  @media (max-width:560px){ .nav-row .btn-primary{display:none;} }
  .mobile-menu{display:none;background:var(--bg);border-block-start:1px solid var(--border);margin-block-start:14px;}
  .mobile-menu.is-open{display:block;}
  @media (min-width:961px){ .mobile-menu{display:none !important;} }
  .mobile-menu .menu-links{display:flex;flex-direction:column;padding-block:6px 18px;}
  .mobile-menu .menu-links a{padding-block:14px;font-size:15.5px;font-weight:500;color:var(--ink-2);border-block-end:1px solid var(--border);}
  .mobile-menu .menu-links a:last-child{border-block-end:0;}
  .mobile-menu .btn{width:100%;justify-content:center;margin-block-start:14px;}

  /* ============ HERO ============ */
  .hero{padding-block:150px 0;overflow:clip;position:relative;}
  .hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:12px;align-items:end;}
  @media (max-width:940px){ .hero-grid{grid-template-columns:1fr;} }
  .hero-left{padding-block-end:70px;}
  .hero h1{font-size:clamp(38px,6vw,72px);font-weight:500;line-height:1.02;letter-spacing:-.01em;}
  .hero h1 em{font-style:normal;color:var(--primary);}
  .hero-sub{color:var(--ink-2);font-size:16.5px;max-width:42ch;margin-block:22px 32px;}
  .hero-cue{display:flex;align-items:center;gap:16px;margin-block-end:56px;}
  .hero-cue span{font-size:13px;color:var(--ink-2);}
  .scroll-cue-btn{animation:scrollCueBounce 1.8s ease-in-out infinite;}
  @keyframes scrollCueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
  @media (prefers-reduced-motion: reduce){ .scroll-cue-btn{animation:none;} }
  .hero-social{display:flex;gap:12px;}

  .hero-right{position:relative;}
  .hero-photo{position:relative;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(120% 100% at 70% 20%, var(--primary-light) 0%, var(--surface) 55%, var(--bg) 100%);display:flex;align-items:flex-end;justify-content:center;}
  .hero-photo svg{width:56%;color:var(--border);opacity:.9;margin-block-end:-4%;}
  .hero-photo img{position:absolute;left:0;right:0;top:-7%;width:100%;height:114%;object-fit:cover;object-position:50% 20%;}
  .hero-photo .duotone{position:absolute;inset:0;background:linear-gradient(155deg, var(--primary) 0%, transparent 45%, transparent 70%, var(--bg) 115%);mix-blend-mode:multiply;opacity:.5;}
  .hero-photo .fade-bottom{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(0deg, rgba(3,8,9,.68) 0%, rgba(3,8,9,0) 100%);pointer-events:none;}

  /* Balões flutuam sobre a imagem, em vidro fosco (glassmorphism), "quebrando" a moldura da
     foto como na referência — não dependem do tema da página, já que a referência de contraste
     é a foto por baixo, não o fundo do site. */
  .hero-badge{
    position:absolute;z-index:3;
    background:rgba(10,20,22,.45);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
    border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);
    box-shadow:0 16px 40px rgba(0,0,0,.32);color:#fff;
  }
  .badge-years{top:12%;right:-26px;padding:18px 26px;text-align:center;}
  .badge-years b{display:block;font-family:var(--font-display);font-size:40px;font-weight:500;line-height:1;color:#fff;}
  .badge-years span{font-size:10.5px;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78);}
  .badge-trust{bottom:10%;left:-22px;padding:18px 24px;max-width:220px;}
  .badge-trust .stars{display:block;color:var(--accent);font-size:14px;letter-spacing:2px;margin-block-end:8px;}
  .badge-trust b{display:block;font-family:var(--font-display);font-weight:600;font-size:19px;color:#fff;margin-block-end:5px;}
  .badge-trust .label{font-size:11.5px;color:rgba(255,255,255,.8);line-height:1.4;display:block;}
  @media (max-width:1180px){
    .badge-years{right:10px;}
    .badge-trust{left:10px;}
  }
  /* No celular a foto fica estreita e o balão de anos, ancorado no topo, caía
     em cima do rosto. Os dois descem para a faixa de baixo da foto (torso e
     jaleco), alinhados pela base. O max-width do balão de avaliações reserva
     a largura do balão de anos para os dois não se encostarem. */
  @media (max-width:640px){
    .badge-years{top:auto;bottom:14px;right:12px;padding:12px 16px;max-width:120px;}
    .badge-years b{font-size:26px;}
    .badge-years span{font-size:9.5px;line-height:1.3;display:block;}
    .badge-trust{bottom:14px;left:12px;max-width:calc(100% - 152px);padding:12px 14px;}
    .badge-trust .stars{font-size:12px;letter-spacing:1.5px;margin-block-end:6px;}
    .badge-trust b{font-size:16px;margin-block-end:3px;}
    .badge-trust .label{font-size:10.5px;}
  }

  /* ============ ABOUT + STATS ============ */
  .stat-pair{display:flex;gap:0;border-left:1px solid var(--border);}
  .stat-pair .stat{flex:1;padding-inline:28px;}
  .stat-pair .stat + .stat{border-left:1px solid var(--border);}

  /* ============ EXPERTISE (topo — logo abaixo do hero) ============ */
  .expertise-head{max-width:760px;margin-inline:auto;text-align:center;}
  .expertise-head h2{font-size:clamp(28px,4vw,44px);font-weight:500;line-height:1.18;margin-block:18px;text-wrap:balance;}
  .expertise-head p{color:var(--ink-2);font-size:16px;max-width:62ch;margin-inline:auto;}

  /* Cards empilham ao rolar: cada .stack-card gruda (sticky) num "top" cada vez
     maior, então o próximo cobre o anterior — que continua visível "espiando"
     atrás. Superfície neutra igual ao resto do site (mesmo tratamento de
     spec-card/post-card/testi-card) — a cor entra só como faixa lateral fina
     e no ícone, alternando entre os dois tons que já existem no sistema. */
  .stack-cards{display:flex;flex-direction:column;align-items:center;gap:14px;margin-block-start:56px;}
  .stack-card{
    position:sticky;
    width:100%;
    max-width:540px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:26px 28px 26px 24px;
    box-shadow:var(--shadow-md);
  }
  .stack-card:nth-child(1){ top:88px; }
  .stack-card:nth-child(2){ top:102px; }
  .stack-card:nth-child(3){ top:116px; }
  .stack-card:nth-child(4){ top:130px; }
  .stack-card:nth-child(5){ top:144px; }
  .stack-card:nth-child(6){ top:158px; }
  .stack-card:nth-child(7){ top:172px; }
  .stack-card:nth-child(8){ top:186px; }
  /* Cards ficam mais altos no celular; encurtar o escalonamento evita que o fim
     do card fique abaixo da dobra enquanto ele está grudado no topo. */
  @media (max-width:560px){
    .stack-card:nth-child(1){ top:72px; }
    .stack-card:nth-child(2){ top:80px; }
    .stack-card:nth-child(3){ top:88px; }
    .stack-card:nth-child(4){ top:96px; }
    .stack-card:nth-child(5){ top:104px; }
    .stack-card:nth-child(6){ top:112px; }
    .stack-card:nth-child(7){ top:120px; }
    .stack-card:nth-child(8){ top:128px; }
  }
  .stack-tone-a{ border-left:4px solid var(--primary); }
  .stack-tone-b{ border-left:4px solid var(--accent); }
  .stack-badge{width:52px;height:52px;border-radius:50%;display:block;object-fit:cover;margin-block-end:14px;}
  .stack-card h3{font-family:var(--font-body);font-weight:700;font-size:19px;line-height:1.3;color:var(--ink);margin-block-end:8px;}
  .stack-card p{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:56ch;margin:0;}
  .stack-when{margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--border);}
  .stack-when .k{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-block-end:5px;}
  .stack-when .v{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-2);}

  .diff-grid{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center;}
  @media (max-width:860px){ .diff-grid{grid-template-columns:1fr;} }
  .diff-text .pill{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:7px 16px;margin-block-end:20px;}
  .diff-text h2{font-size:clamp(26px,3.4vw,38px);font-weight:500;line-height:1.16;margin-block-end:18px;text-wrap:balance;}
  .diff-text p{color:var(--ink-2);font-size:15.5px;line-height:1.75;max-width:56ch;}
  .diff-text p + p{margin-block-start:16px;}
  .choose-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;}
  .choose-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
  .trust-overlay{position:absolute;left:16px;bottom:16px;background:rgba(10,20,22,.5);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);padding:16px 22px;color:#fff;}
  .trust-overlay .lbl{font-size:11.5px;color:rgba(255,255,255,.75);}
  .trust-overlay b{display:block;font-family:var(--font-display);font-size:34px;font-weight:500;margin-block:2px 4px;font-variant-numeric:tabular-nums;}
  .trust-overlay .sub{font-size:11.5px;color:rgba(255,255,255,.85);max-width:22ch;display:block;}
  .conditions-block{margin-block-start:56px;padding-block-start:36px;border-top:1px solid var(--border);}
  .conditions-label{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-block-end:18px;}
  .conditions-tags{display:flex;flex-wrap:wrap;gap:10px;}
  .condition-tag{font-size:13px;padding:8px 16px;border-radius:var(--radius-pill);background:var(--surface-alt);color:var(--ink-2);border:1px solid var(--border);}
  .stat b{font-family:var(--font-display);font-size:44px;font-weight:500;color:var(--ink);display:block;font-variant-numeric:tabular-nums;}
  .stat span{font-size:11.5px;color:var(--ink-3);font-family:var(--font-mono);letter-spacing:.04em;}

  /* ============ TRUST STRIP ============ */
  /* ============ MARQUEE DE SOCIEDADES MÉDICAS ============
     A largura de "um conjunto" (5 logos) é medida em JS e repetida em cópias
     suficientes para nunca faltar conteúdo na tela — sem isso, telas largas
     mostram um "vazio" no fim do loop. O deslocamento do keyframe usa
     --set-width (calculado em runtime), não um -50% fixo. */
  .trust-strip{padding-block:40px;border-block:1px solid var(--border);overflow:hidden;}
  .logos-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);}
  .logos-track{display:flex;align-items:center;gap:96px;width:max-content;animation:logosMarquee 34s linear infinite;}
  .logos-marquee:hover .logos-track{animation-play-state:paused;}
  @media (prefers-reduced-motion: reduce){
    .logos-track{animation:none;}
    .logo-item[data-clone]{display:none;}
  }
  @keyframes logosMarquee{from{transform:translateX(0);}to{transform:translateX(calc(-1 * var(--set-width, 900px)));}}
  .logo-item{flex:none;height:48px;display:flex;align-items:center;opacity:.8;transition:opacity var(--duration-fast) var(--ease-standard);}
  .logo-item:hover{opacity:1;}
  .logo-item img{height:100%;width:auto;display:block;}
  .logo-item .logo-light{display:none;}
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]) .logo-item .logo-light{display:block;}
    :root:not([data-theme="dark"]) .logo-item .logo-dark{display:none;}
  }
  :root[data-theme="light"] .logo-item .logo-light{display:block;}
  :root[data-theme="light"] .logo-item .logo-dark{display:none;}

  /* ============ CONTEÚDO (grid assimétrico) ============ */
  /* Carrossel de artigos: a faixa cresce no eixo X conforme novos posts entram,
     sem alterar a altura da seção nem exigir novo layout a cada publicação.
     A margem negativa + padding deixa o card sangrar até a borda da tela ao
     rolar, mantendo o primeiro card alinhado com o título da seção. */
  .posts-head-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .posts-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-24px;padding-inline:24px;padding-block-end:6px;}
  .posts-track::-webkit-scrollbar{display:none;}
  @media (max-width:640px){ .posts-track{margin-inline:-20px;padding-inline:20px;} }
  .post-card{scroll-snap-align:start;flex:none;width:330px;position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;transition:border-color var(--duration-fast) var(--ease-standard);}
  .post-card:hover{border-color:var(--accent);}
  @media (max-width:640px){ .post-card{width:276px;} }
  .post-card .thumb{flex:none;aspect-ratio:16/10;background:linear-gradient(150deg, var(--primary-light) 0%, var(--bg) 120%);position:relative;overflow:hidden;}
  .post-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .post-card .tags{position:absolute;top:14px;left:14px;display:flex;gap:8px;}
  .post-card .tag{font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);}
  .post-card .body{padding:18px 20px 22px;}
  .post-card .body .eyebrow{margin-block-end:8px;display:block;}
  .post-card h3{font-family:var(--font-body);font-size:16.5px;font-weight:600;line-height:1.3;}

  /* ============ PROVA SOCIAL (banner + carrossel de depoimentos) ============ */
  .proof-banner{display:grid;grid-template-columns:.72fr 1.28fr;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-block-end:20px;}
  @media (max-width:700px){ .proof-banner{grid-template-columns:1fr;} }
  .proof-photo{position:relative;min-height:180px;}
  .proof-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;}
  .proof-stat{padding:30px 36px;display:flex;align-items:center;gap:18px;}
  @media (max-width:520px){ .proof-stat{padding:24px 20px;gap:14px;flex-wrap:wrap;} }
  .proof-stat .stars{color:var(--primary);font-size:22px;letter-spacing:3px;flex:none;}
  .proof-stat b{display:block;font-family:var(--font-display);font-size:22px;font-weight:500;}
  .proof-stat span{font-size:12.5px;color:var(--ink-2);}
  .testi-note{font-size:12px;color:var(--ink-3);font-style:italic;margin-block-end:24px;max-width:70ch;}
  .testi-head{display:flex;justify-content:space-between;align-items:center;margin-block-end:16px;}
  .testi-head .eyebrow{font-size:13px;}
  .proof-nav{display:flex;gap:10px;}
  .testi-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:6px;scrollbar-width:none;}
  .testi-track::-webkit-scrollbar{display:none;}
  .testi-card{scroll-snap-align:start;flex:none;width:260px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;display:flex;flex-direction:column;gap:12px;}
  .testi-card .stars{color:var(--primary);font-size:13px;letter-spacing:1.5px;}
  .testi-card p{font-size:13.5px;color:var(--ink);line-height:1.55;flex:1;}
  .testi-card .who{font-size:11px;font-family:var(--font-mono);color:var(--ink-3);border-top:1px solid var(--border);padding-top:12px;}


  /* ============ CONTATO ============ */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  @media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-grid h2{font-size:clamp(28px,3.6vw,42px);font-weight:500;max-width:14ch;margin-block-end:20px;}
  .clinic-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--shadow-sm);}
  .clinic-card-head{display:flex;gap:16px;align-items:flex-start;}
  .clinic-card-head h3{font-family:var(--font-body);font-size:17.5px;font-weight:700;color:var(--ink);margin-block-end:6px;line-height:1.3;}
  .clinic-card-head p{font-size:13.5px;color:var(--ink-2);line-height:1.5;}
  .clinic-info-list{display:flex;flex-direction:column;gap:12px;padding-block:18px;border-block:1px solid var(--border);}
  .clinic-info-row{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);}
  .clinic-info-row svg{width:18px;height:18px;color:var(--primary);flex:none;}

  /* ============ FOOTER ============ */
  footer{border-top:1px solid var(--border);padding-block:56px 32px;}
  .foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:center;}
  .foot-who{display:flex;gap:14px;align-items:center;}
  .foot-avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--border);flex:none;}
  .foot-who h4{font-family:var(--font-body);font-size:20px;font-weight:600;line-height:1.2;margin:0;}
  .foot-who p{font-size:12.5px;color:var(--ink-3);margin-block-start:8px;}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-block-start:28px;padding-block-start:20px;border-block-start:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--ink-3);}

  /* ============ VOLTAR AO TOPO ============
     Fica acima do botão do WhatsApp, centralizado com ele, e só aparece depois
     que a pessoa já rolou o suficiente para o atalho fazer sentido. */
  .to-top{position:fixed;bottom:92px;right:30px;z-index:49;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast), border-color var(--duration-fast) var(--ease-standard);}
  .to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
  .to-top:hover{border-color:var(--accent);color:var(--accent);}
  .to-top svg{width:18px;height:18px;}

  /* ============ WHATSAPP FLOAT ============ */
  .wa-float{position:fixed;bottom:24px;right:24px;z-index:50;width:56px;height:56px;border-radius:50%;background:var(--whatsapp);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);}
  .wa-float svg{width:26px;height:26px;}
  .wa-float .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--whatsapp);animation:pulse 2.4s var(--ease-standard) infinite;}
  @keyframes pulse{0%{transform:scale(1);opacity:.6;}100%{transform:scale(1.7);opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .wa-float .ring{animation:none;display:none;} }

  /* ============ ARTIGO ============ */
  .article{max-width:740px;margin-inline:auto;padding-inline:24px;padding-block:136px 0;}
  @media (max-width:640px){ .article{padding-inline:20px;padding-block-start:110px;} }

  .back-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-3);margin-block-end:32px;transition:color var(--duration-fast) var(--ease-standard);}
  .back-link:hover{color:var(--accent);}
  .back-link svg{width:15px;height:15px;}

  .article-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
  .article-meta .tag{padding:6px 13px;border-radius:var(--radius-pill);background:var(--surface-alt);color:var(--ink-2);border:1px solid var(--border);letter-spacing:.06em;}
  .article-title{font-size:clamp(29px,4.4vw,46px);font-weight:500;line-height:1.15;margin-block:20px 0;}

  .byline{display:flex;align-items:center;gap:13px;margin-block-start:28px;padding-block:20px;border-block:1px solid var(--border);}
  .byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--border);flex:none;}
  .byline b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);}
  .byline span{font-size:12px;color:var(--ink-3);}

  .article-hero{margin-block:36px;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;max-width:100%;background:linear-gradient(150deg, var(--primary-light) 0%, var(--bg) 120%);border:1px solid var(--border);}
  .article-hero img{width:100%;height:100%;object-fit:cover;display:block;}

  .lang-note{margin-block:32px 0;padding:14px 18px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:13.5px;line-height:1.6;color:var(--ink-3);}

  .prose{margin-block-start:36px;font-size:17.5px;line-height:1.78;color:var(--ink-2);}
  .prose p{margin-block-end:24px;}
  .prose p.lead{font-size:20px;line-height:1.6;color:var(--ink);}
  .prose h2{font-family:var(--font-display);font-size:clamp(21px,2.6vw,27px);font-weight:500;color:var(--ink);line-height:1.25;margin-block:44px 16px;}
  .prose strong{color:var(--ink);font-weight:600;}
  @media (max-width:640px){ .prose{font-size:16.5px;} .prose p.lead{font-size:18.5px;} }

  .disclaimer{margin-block-start:52px;padding:18px 20px;background:var(--surface-alt);border-radius:var(--radius-md);font-size:13px;line-height:1.65;color:var(--ink-3);}

  .author-box{margin-block-start:40px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow-sm);}
  .author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--border);flex:none;}
  .author-box .who{flex:1;min-width:200px;}
  .author-box h3{font-family:var(--font-body);font-size:16px;font-weight:700;margin-block-end:4px;}
  .author-box p{font-size:13.5px;color:var(--ink-2);line-height:1.6;}

  /* ============ OUTROS ARTIGOS ============ */
  .more{margin-block-start:96px;padding-block:64px;border-block-start:1px solid var(--border);}
  .more h2{font-size:clamp(22px,2.8vw,30px);font-weight:500;margin-block-end:28px;}
  .more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media (max-width:820px){ .more-grid{grid-template-columns:1fr;} }
  .more-card{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:border-color var(--duration-fast) var(--ease-standard);}
  .more-card:hover{border-color:var(--accent);}
  .more-card .thumb{aspect-ratio:16/10;background:linear-gradient(150deg, var(--primary-light) 0%, var(--bg) 120%);position:relative;}
  .more-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .more-card .body{padding:16px 18px 20px;}
  .more-card .eyebrow{font-size:11px;display:block;margin-block-end:7px;}
  .more-card h3{font-family:var(--font-body);font-size:15.5px;font-weight:600;line-height:1.35;}

  /* ============ AJUSTES DO WORDPRESS ============
     Regras que não existiam no protótipo em HTML: link de pular conteúdo,
     agrupador dos botões da barra, listagem de artigos e paginação. */
  .skip-link{position:absolute;left:-9999px;top:0;}
  .skip-link:focus{left:16px;top:16px;z-index:100;background:var(--surface);color:var(--ink);padding:12px 18px;border-radius:var(--radius-pill);border:1px solid var(--border);}
  .nav-actions{display:flex;align-items:center;gap:10px;}
  .nav-cta{padding:11px 20px;font-size:13px;}

  .posts-empty{color:var(--ink-2);font-size:15px;}

  /* Na listagem o card volta a ser grade: precisa anular o que o carrossel define. */
  .archive-head-section{padding-block:136px 0;}
  @media (max-width:640px){ .archive-head-section{padding-block-start:110px;} }
  .archive-title{font-size:clamp(28px,4vw,44px);font-weight:500;line-height:1.16;margin-block-start:14px;max-width:22ch;}
  .archive-list-section{padding-block:48px 96px;}
  .archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  @media (max-width:900px){ .archive-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .archive-grid{grid-template-columns:1fr;} }
  .archive-grid .post-card{width:auto;flex:initial;scroll-snap-align:none;}

  .archive-pagination{margin-block-start:44px;}
  .archive-pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .archive-pagination .page-numbers{display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding-inline:12px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:600;}
  .archive-pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent);}
  .archive-pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}

  /* O conteúdo do artigo agora vem do editor, que gera tags próprias. */
  .prose img{border-radius:var(--radius-md);height:auto;}
  .prose ul,.prose ol{margin-block:0 24px;padding-left:22px;}
  .prose li{margin-block-end:8px;}
  .prose blockquote{margin:0 0 24px;padding-left:20px;border-left:3px solid var(--primary);color:var(--ink);font-style:italic;}
  .prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}
  .prose figure{margin:0 0 24px;}
  .prose figcaption{font-size:13px;color:var(--ink-3);margin-block-start:8px;}
