/* Prime Odontologia - Santa Maria/RS
   Palette: chosen, not inherited. Their mark samples as white-on-white, so there is
   no brand colour to take. Cool clinical neutrals + one deep petrol blue pulled down
   from the feed's sky blue (#30a8d8) until it passes AA on paper. Locked accent.
   Radius rule: surfaces 4px, interactive elements full pill. Nothing else. */

@font-face{font-family:Outfit;src:url(assets/fonts/outfit-200-latin.woff2) format('woff2');font-weight:200;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;src:url(assets/fonts/outfit-200-latin-ext.woff2) format('woff2');font-weight:200;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Outfit;src:url(assets/fonts/outfit-300-latin.woff2) format('woff2');font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;src:url(assets/fonts/outfit-300-latin-ext.woff2) format('woff2');font-weight:300;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Outfit;src:url(assets/fonts/outfit-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;src:url(assets/fonts/outfit-400-latin-ext.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Outfit;src:url(assets/fonts/outfit-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-400-latin-ext.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(assets/fonts/archivo-500-latin-ext.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#eef1f1;
  --surface:#e4e9ea;
  --ink:#10262c;
  --muted:#4a6067;
  --accent:#0d6d8a;
  --accent-ink:#ffffff;
  --line:rgba(16,38,44,.14);
  --line-soft:rgba(16,38,44,.08);
  --map-filter:none;
  --ease:cubic-bezier(.22,.8,.28,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0d1a1e;
    --surface:#132428;
    --ink:#e8eeef;
    --muted:#9fb3b8;
    --accent:#56b9d8;
    --accent-ink:#08171b;
    --line:rgba(232,238,239,.16);
    --line-soft:rgba(232,238,239,.09);
    --map-filter:invert(1) hue-rotate(180deg) saturate(.7) brightness(.95);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:target,section[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img,svg,iframe{display:block;max-width:100%}
h1,h2,h3{font-family:Outfit,system-ui,sans-serif;font-weight:300;margin:0;line-height:1.1}
p{margin:0}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 16px;z-index:50}
.skip:focus{left:12px;top:12px}

/* ---------- buttons: one label per intent, pill radius ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;
  font-family:Archivo,sans-serif;font-weight:500;font-size:15px;
  padding:14px 26px;border-radius:999px;
  transition:transform .18s var(--ease),filter .18s var(--ease);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-ghost{
  display:inline-flex;align-items:center;white-space:nowrap;
  color:var(--ink);text-decoration:none;font-size:15px;
  padding:14px 4px;border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- nav: single line, 64px ---------- */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.nav-in{height:64px;display:flex;align-items:center;gap:28px}
.nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  font-family:Outfit,sans-serif;font-weight:400;font-size:17px;letter-spacing:.02em;margin-right:auto}
.nav-brand em{font-style:normal;font-weight:200;color:var(--muted)}
.nav-emblem{width:26px;height:16px;color:var(--accent);flex:none}
.nav-links{display:flex;gap:26px}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--muted);
  transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--accent)}
/* The hero already carries the WhatsApp button. Showing a second one 500px away
   is the same CTA twice in one screen, so the nav copy only arrives once the
   hero's has scrolled off. With JS off it is simply always there. */
.js .nav .btn{opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.js .nav.stuck .btn{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* ---------- hero: asymmetric split, the arcs perform ---------- */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(64px,9vw,110px)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.wordmark{
  font-size:clamp(3.1rem,8.4vw,6.4rem);font-weight:200;letter-spacing:-.025em;
  line-height:1.02;margin-bottom:26px;
}
.wordmark em{font-style:normal;font-weight:300;color:var(--accent);letter-spacing:-.015em}
.hero-sub{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:38ch;line-height:1.55}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.hero-art{color:var(--accent)}
.arcs{width:100%;height:auto;opacity:.9}
.arc-base{opacity:.28}

/* ---------- team: stacked rows, arcs grow with age of patient ---------- */
.sec-title{
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:300;letter-spacing:-.01em;
  margin-bottom:clamp(28px,4vw,44px);
}
.team{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line-soft)}
.docs{list-style:none;margin:0;padding:0}
.doc{display:grid;grid-template-columns:104px 1fr;gap:clamp(20px,4vw,48px);
     align-items:center;padding:clamp(26px,3.4vw,38px) 0;border-bottom:1px solid var(--line-soft)}
.doc:first-child{border-top:1px solid var(--line-soft)}
/* the arcs grow down the list, smallest patient first. Right-aligned so all three
   sit on one shared baseline and the growth is the thing you notice. */
.doc-arc{color:var(--accent);display:flex;justify-content:flex-end;align-items:flex-end}
.doc-arc svg{height:auto;opacity:.85}
.doc-arc-s svg{width:46%}
.doc-arc-m svg{width:72%}
.doc-arc-l svg{width:100%}
.doc-body h3{font-size:clamp(1.28rem,2.5vw,1.75rem);font-weight:300;letter-spacing:-.012em}
.doc-spec{font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-top:9px}
.doc-note{color:var(--muted);margin-top:12px;max-width:46ch;font-size:15.5px}

/* ---------- services: grouped grid, not a hairline list ---------- */
.services{padding:clamp(56px,8vw,96px) 0;background:var(--surface)}
/* 7 items, never a blank cell: the last one spans the remainder at every
   breakpoint (4-col -> 4+2+span2, 2-col -> 3 rows + span2, 1-col -> plain). */
.svc{list-style:none;margin:0;padding:0;display:grid;
     grid-template-columns:repeat(2,1fr);gap:2px;
     background:var(--line-soft);border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}
.svc li:last-child{grid-column:span 2}
@media (min-width:1000px){.svc{grid-template-columns:repeat(4,1fr)}}
.svc li{background:var(--surface);padding:26px 24px;display:flex;align-items:center;gap:14px}
.svc li::before{
  content:"";width:22px;height:11px;flex:none;
  border:1.5px solid var(--accent);border-bottom:0;border-radius:22px 22px 0 0;
}
.svc-name{font-family:Outfit,sans-serif;font-size:1.06rem;font-weight:400;letter-spacing:.005em}
.svc-foot{margin-top:26px;color:var(--muted);font-size:15px}

/* ---------- photo slots: deliberately empty, sized to the real crop ---------- */
.shots{padding:clamp(56px,8vw,96px) 0}
.shots-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px)}
.slot-box{
  aspect-ratio:4/3;border-radius:4px;background:var(--surface);
  border:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.slot-mark{width:56px;height:34px;color:var(--accent);opacity:.5}
.slot-tag{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.slot figcaption{margin-top:12px;font-size:14px;color:var(--muted)}

/* ---------- contact ---------- */
.contact{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--line-soft)}
.contact-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.contact address{font-style:normal;font-size:1.12rem;line-height:1.75;margin-bottom:30px}
.contact-note{margin-top:18px;color:var(--muted);font-size:15px}
.map{border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.map iframe{width:100%;height:340px;border:0;filter:var(--map-filter)}

/* ---------- footer ---------- */
.foot{background:var(--surface);border-top:1px solid var(--line-soft);
      padding:clamp(44px,6vw,68px) 0}
.foot-brand{font-family:Outfit,sans-serif;font-size:1.25rem;font-weight:400}
.foot-brand em{font-style:normal;font-weight:200;color:var(--muted)}
.foot-addr{margin-top:14px;color:var(--muted);font-size:15px}
.foot-cro{margin-top:8px;color:var(--muted);font-size:15px}
.foot-legal{margin-top:22px;color:var(--muted);font-size:13.5px;max-width:66ch;line-height:1.6}

/* ---------- motion ---------- */
.arc{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.js .arc{animation:draw 1.15s var(--ease) forwards}
.js .arc-1{animation-delay:.12s}
.js .arc-2{animation-delay:.30s}
.js .arc-3{animation-delay:.48s}
.js .arc-base{opacity:0;animation:fade .8s var(--ease) .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:.28}}

.js [data-reveal] [data-stagger],
.js [data-reveal].pre{opacity:0}
.js [data-reveal] [data-stagger]{transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].in [data-stagger]{opacity:1;transform:none}
.js [data-reveal].pre{transition:opacity .6s var(--ease)}
.js [data-reveal].pre.in{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js .nav .btn{transition:none}
  .js .arc{stroke-dashoffset:0;animation:none}
  .js .arc-base{opacity:.28;animation:none}
  .js [data-reveal] [data-stagger],
  .js [data-reveal].pre{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .hero-in{grid-template-columns:1fr;gap:38px}
  .hero-art{order:-1;max-width:340px}
  .contact-in{grid-template-columns:1fr}
  .map iframe{height:280px}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .hero{padding:36px 0 52px}
  .hero-art{max-width:260px}
  .wordmark{font-size:clamp(2.7rem,13vw,3.6rem);margin-bottom:20px}
  .hero-cta{margin-top:28px;gap:16px}
  .hero-cta .btn,.contact-copy .btn{width:100%}
  .btn-ghost{padding:10px 0}
  .doc{grid-template-columns:64px 1fr;gap:18px;align-items:start}
  .shots-in{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .svc li:last-child{grid-column:auto}
  .svc li{padding:20px}
}