/* ==========================================================================
   Hospital Veterinário Atibaia — Saúde levada a sério.
   Folha de estilos principal. Sem frameworks; animações via transform/opacity.
   ========================================================================== */

:root {
  /* Paleta institucional */
  --ink: #0A262E;          /* petróleo quase preto — fundos de impacto */
  --petrol: #0E3D4A;       /* azul petróleo institucional */
  --petrol-2: #155467;     /* petróleo claro — hovers */
  --teal: #5E9F97;         /* verde-azulado secundário */
  --teal-light: #8FD0C4;   /* sinal "ao vivo" sobre fundo escuro */
  --mist: #DCE7E4;         /* cinza-esverdeado muito claro */
  --paper: #F3F5F4;        /* off-white frio */
  --white: #FFFFFF;
  --sand: #C4A36F;         /* detalhe quente, uso pontual */

  --text: #122830;
  --muted: #56686D;
  --on-dark: #EAF1EF;
  --on-dark-muted: #9DB3B1;
  --line: rgba(10, 38, 46, .14);
  --line-dark: rgba(234, 241, 239, .16);

  /* Tipografia */
  --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-sans: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;

  --t-hero: clamp(2.9rem, 6.6vw, 7rem);
  --t-h2: clamp(2.2rem, 4.4vw, 4.4rem);
  --t-h3: clamp(1.5rem, 2.2vw, 2.1rem);
  --t-lead: clamp(1.12rem, 1.35vw, 1.32rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-label: .75rem;

  /* Layout */
  --gutter: clamp(1rem, 4vw, 4rem);
  --max: 1440px;
  --section: clamp(5.5rem, 11vw, 11rem);
  --header-h: 84px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--teal-light); color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  background: var(--white); color: var(--ink); padding: .75rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Rótulos e títulos editoriais */
.label {
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex; align-items: center; gap: .75rem;
}
.label::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .7; }
.label--plain::before { display: none; }
.on-dark .label { color: var(--teal-light); }

.h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 350;
  font-variation-settings: "opsz" 72;
}
.h2 em, .display em { font-style: italic; font-weight: 300; color: var(--teal); }
.on-dark .h2 em { color: var(--teal-light); }
.h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -.01em;
  font-weight: 400;
}
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--muted); max-width: 38em; }
.on-dark .lead { color: var(--on-dark-muted); }
.prose { max-width: 36em; color: var(--muted); }
.prose p + p { margin-top: 1em; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  --bg: var(--petrol); --fg: var(--white);
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  min-height: 3.25rem; padding: .85rem 1.5rem;
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease-out), background-color .3s, color .3s, border-color .3s;
}
.btn::after { /* varredura de luz */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn .arrow { transition: transform .5s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--light { --bg: var(--white); --fg: var(--ink); }
.btn--whats { --bg: #1F8F5F; --fg: #fff; }
.btn--whats:hover { --bg: #1A7C52; }
.btn--ghost { --bg: transparent; --fg: currentColor; border-color: currentColor; }
.btn--ghost:hover { --bg: rgba(255,255,255,.08); }
.btn--line { --bg: transparent; --fg: var(--petrol); border-color: var(--line); }
.btn--line:hover { border-color: var(--petrol); }
.btn--sm { min-height: 2.6rem; padding: .55rem 1rem; font-size: .85rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none;
  padding-bottom: .25rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease-out);
}
.link-arrow:hover { background-size: 35% 1px; }
.link-arrow svg { width: 1em; height: 1em; transition: transform .5s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Pulso "ao vivo" */
.pulse {
  position: relative; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--teal-light); flex: none;
}
.pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--teal-light); opacity: 0;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--white);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.site-header::before { /* véu de legibilidade sobre o Hero */
  content: ""; position: absolute; inset: 0 0 -40px 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 26, 32, .55), transparent);
  transition: opacity .5s;
}
.site-header__inner {
  position: relative; height: var(--header-h);
  display: flex; align-items: center; gap: 2rem;
}
.site-header.is-solid {
  background: rgba(243, 245, 244, .82);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-solid::before { opacity: 0; }
.site-header.is-solid .site-header__inner { height: 72px; }
.site-header--static { color: var(--ink); }

.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; flex: none; }
.brand__mark { width: 2.5rem; height: 2.5rem; flex: none; }
.brand__text { display: grid; line-height: 1; }
.brand__top { font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.brand__name { font-family: var(--f-display); font-size: 1.55rem; letter-spacing: -.01em; margin-top: .2rem; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(.9rem, 1.6vw, 1.8rem); }
.nav a {
  position: relative; font-size: .9rem; font-weight: 500; text-decoration: none; padding-block: .4rem;
  opacity: .88; transition: opacity .3s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }

.header-cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.badge-24 {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid currentColor; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.badge-24:hover { background: var(--white); color: var(--ink); }
.is-solid .badge-24:hover, .site-header--static .badge-24:hover { background: var(--ink); color: var(--white); }
.is-solid .pulse, .site-header--static .pulse { background: var(--teal); }
.is-solid .pulse::after, .site-header--static .pulse::after { border-color: var(--teal); }

.menu-toggle {
  display: none; margin-left: auto; width: 2.9rem; height: 2.9rem; border: 1px solid currentColor;
  background: transparent; border-radius: 2px; cursor: pointer; position: relative;
}
.menu-toggle span {
  position: absolute; left: 50%; width: 1.1rem; height: 1.5px; background: currentColor; translate: -50% 0;
  transition: transform .45s var(--ease-out), opacity .3s;
}
.menu-toggle span:nth-child(1) { top: calc(50% - 4px); }
.menu-toggle span:nth-child(2) { top: calc(50% + 3px); }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--on-dark);
  padding: calc(var(--header-h) + 2rem + env(safe-area-inset-top, 0px)) var(--gutter) 7rem;
  display: flex; flex-direction: column; gap: 2rem; overflow-y: auto;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .7s var(--ease-out), visibility 0s .7s;
}
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-out); }
.mobile-menu ul { display: grid; gap: .2rem; }
.mobile-menu a.m-link {
  font-family: var(--f-display); font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.2; text-decoration: none;
  display: block; opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.menu-open .mobile-menu a.m-link { opacity: 1; transform: none; }
.mobile-menu__contact { display: grid; gap: .4rem; color: var(--on-dark-muted); font-size: .95rem; }
.mobile-menu__contact strong { color: var(--on-dark); font-weight: 600; }
.menu-open .site-header { color: var(--on-dark); background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .site-header::before { opacity: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; height: 100svh; min-height: 640px; max-height: 1100px;
  color: var(--white); overflow: hidden; background: var(--ink);
}
.hero__media { position: absolute; inset: -6% 0 0 0; will-change: transform; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%;
}
.hero__media video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__media video.is-playing { opacity: 1; }
.hero__media img { animation: heroIn 2.4s var(--ease-out) both; }
@keyframes heroIn { from { transform: scale(1.08); filter: blur(6px); } to { transform: none; filter: none; } }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 25, 31, .86) 0%, rgba(6, 25, 31, .55) 38%, rgba(6, 25, 31, .08) 70%),
    linear-gradient(0deg, rgba(6, 25, 31, .75) 0%, transparent 38%);
}
.hero__content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(6.5rem, 12vh, 9rem);
  will-change: transform, opacity;
}
.hero h1 { display: grid; gap: 1.4rem; }
.hero__eyebrow {
  font-family: var(--f-sans); font-size: .78rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .9rem;
}
.hero__eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: var(--sand); }
.display {
  font-family: var(--f-display); font-size: var(--t-hero); line-height: .98; letter-spacing: -.025em;
  font-weight: 330; font-variation-settings: "opsz" 72; max-width: 11.5em;
}
.display em { color: var(--teal-light); }
.hero__sub { margin-top: 1.6rem; font-size: var(--t-lead); color: rgba(255,255,255,.84); max-width: 30em; }
.hero__actions { margin-top: 2.4rem; }
.hero__meta {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 1.8rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.hero__live { display: inline-flex; align-items: center; gap: .8rem; }
.scroll-cue { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; }
.scroll-cue__line { position: relative; width: 1px; height: 2.8rem; background: rgba(255,255,255,.25); overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--white);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* Cartões laterais do Hero (entram pela lateral durante o scroll) */
.hero__aside {
  position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(6.5rem, 12vh, 9rem);
  display: grid; gap: .6rem; width: min(330px, 30vw);
}
.hero-note {
  padding: 1rem 1.15rem; color: var(--white);
  background: rgba(10, 38, 46, .42); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: grid; gap: .15rem; font-size: .9rem; text-decoration: none;
  transition: background-color .3s, transform .5s var(--ease-out);
  opacity: 0; transform: translateX(40px);
  animation: noteIn 1s var(--ease-out) forwards;
}
.hero-note:nth-child(2) { animation-delay: .15s; }
.hero-note:hover { background: rgba(10, 38, 46, .62); }
.hero-note small { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-light); font-weight: 600; }
.hero-note strong { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -.01em; }
@keyframes noteIn { to { opacity: 1; transform: none; } }
.js .hero-note { animation-delay: 1.4s; }
.js .hero-note:nth-child(2) { animation-delay: 1.55s; }

/* Entrada do texto do Hero */
.js .hero [data-hero-in] { opacity: 0; transform: translateY(28px); animation: rise 1.1s var(--ease-out) forwards; }
.js .hero [data-hero-in="2"] { animation-delay: .15s; }
.js .hero [data-hero-in="3"] { animation-delay: .35s; }
.js .hero [data-hero-in="4"] { animation-delay: .55s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* A seção seguinte sobrepõe o Hero */
.after-hero { position: relative; z-index: 5; margin-top: -1px; background: var(--paper); }

/* --------------------------------------------------------------------------
   Barra de confiança
   -------------------------------------------------------------------------- */
.trust { background: var(--ink); color: var(--on-dark); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item {
  padding: clamp(2rem, 3.4vw, 3.2rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--line-dark); display: grid; gap: .4rem; align-content: start;
}
.trust__item:first-child { border-left: 0; padding-left: 0; }
.trust__num {
  font-family: var(--f-display); font-weight: 300; font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--white);
}
.trust__num sup { font-size: .45em; vertical-align: top; position: relative; top: .35em; margin-left: .05em; color: var(--teal-light); }
.trust__label { font-size: .92rem; color: var(--on-dark-muted); max-width: 16em; }

/* --------------------------------------------------------------------------
   Seções genéricas
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section); position: relative; }
.section--white { background: var(--white); }
.section--mist { background: var(--mist); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--petrol { background: var(--petrol); color: var(--on-dark); }
.section-head { display: grid; gap: 1.6rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.section-head--split { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 2rem 4rem; }
.section-head--split .lead { justify-self: end; }

[id] { scroll-margin-top: 72px; }
#topo { scroll-margin-top: 0; }

/* Revelações no scroll (estado de repouso visível sem JS) */
.js [data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js [data-reveal="blur"] { filter: blur(10px); transform: translateY(14px) scale(.985); }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Texto revelado por linha/palavra */
.js [data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .1em 0; margin: 0 -.06em -.1em 0; }
.js [data-words] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
.js [data-words].is-in .w > span { transform: none; }

/* --------------------------------------------------------------------------
   O Hospital
   -------------------------------------------------------------------------- */
.about { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: start; }
.about__text { grid-column: 1 / span 6; display: grid; gap: 2rem; position: sticky; top: 7rem; }
.about__media { grid-column: 8 / span 5; }
.reveal-img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--mist); }
.reveal-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.6s var(--ease-out); }
.js .reveal-img { clip-path: inset(18% 12% 18% 12%); transition: clip-path 1.6s var(--ease-out); }
.js .reveal-img.is-in { clip-path: inset(0 0 0 0); }
.reveal-img.is-in img, .no-js .reveal-img img { transform: scale(1); }
.caption {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem;
  font-size: .78rem; color: var(--muted); letter-spacing: .02em;
}
.on-dark .caption, .section--dark .caption { color: var(--on-dark-muted); }

.pillars { border-top: 1px solid var(--line); }
.pillars li {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  padding-block: 1.05rem; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-size: clamp(1.25rem, 1.7vw, 1.55rem); letter-spacing: -.01em;
  transition: padding-left .5s var(--ease-out), color .3s;
}
.pillars li:hover { padding-left: .6rem; color: var(--petrol-2); }
.pillars li span { font-family: var(--f-sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); font-weight: 600; text-align: right; }

.quote-inline { border-left: 1px solid var(--sand); padding-left: 1.4rem; font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.45; color: var(--petrol); }

/* --------------------------------------------------------------------------
   Missão, Visão, Valores — composição editorial
   -------------------------------------------------------------------------- */
.mvv { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem 2rem; }
.mvv__block { display: grid; gap: 1.4rem; align-content: start; }
.mvv__block--mission { grid-column: 1 / span 8; }
.mvv__block--vision { grid-column: 6 / span 7; padding-top: 1rem; }
.mvv__block--values { grid-column: 1 / -1; padding-top: 2rem; }
.mvv__kicker { display: flex; align-items: center; gap: 1rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mvv__kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mvv__statement {
  font-family: var(--f-display); font-weight: 330; font-size: clamp(2rem, 4vw, 3.9rem); line-height: 1.08; letter-spacing: -.02em;
}
.mvv__statement--sm { font-size: clamp(1.6rem, 2.8vw, 2.6rem); color: var(--petrol); }
.mvv__statement em { font-style: italic; color: var(--teal); }
.values {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  column-gap: clamp(1.5rem, 4vw, 4rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: 1.6rem 1.2rem;
}
.values li {
  flex: none;
  font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -.02em;
  color: rgba(10, 38, 46, .22); transition: color .8s var(--ease);
}
.values li.is-lit, .no-js .values li { color: var(--ink); }
.values li small { display: block; margin-bottom: .9rem; font-family: var(--f-sans); font-size: .7rem; letter-spacing: .18em; color: var(--teal); font-weight: 600; }

/* --------------------------------------------------------------------------
   Atendimento humanizado — imagem + texto em diagonal
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: center; }
.split__media { grid-column: 1 / span 6; position: relative; }
.split__text { grid-column: 8 / span 5; display: grid; gap: 1.8rem; }
.split--rev .split__media { grid-column: 7 / span 6; order: 2; }
.split--rev .split__text { grid-column: 1 / span 5; order: 1; }
.frame { position: relative; overflow: hidden; background: var(--mist); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.frame:hover img { transform: scale(1.03); }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--169 { aspect-ratio: 16 / 9; }
.frame--32 { aspect-ratio: 3 / 2; }
.float-card {
  position: absolute; right: -2rem; bottom: 2.5rem; width: min(290px, 70%);
  background: var(--white); padding: 1.3rem 1.4rem; display: grid; gap: .4rem;
  box-shadow: 0 30px 60px -30px rgba(10, 38, 46, .35);
}
.float-card small { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.float-card p { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.3; }

/* --------------------------------------------------------------------------
   Serviços — painéis expansivos
   -------------------------------------------------------------------------- */
.services { display: flex; gap: 6px; height: clamp(520px, 70vh, 700px); }
.svc {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--ink); color: var(--white);
  text-decoration: none; cursor: pointer;
  transition: flex-grow .9s var(--ease-out), opacity .6s var(--ease);
}
.svc img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12); filter: saturate(.55) brightness(.62);
  transition: transform 1.4s var(--ease-out), filter .9s var(--ease);
}
.svc::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6, 25, 31, .92) 0%, rgba(6, 25, 31, .25) 55%, rgba(6, 25, 31, .35) 100%);
}
.svc__tab {
  position: absolute; z-index: 2; left: 50%; bottom: 1.6rem; transform-origin: left bottom;
  transform: translateX(.6rem) rotate(-90deg); white-space: nowrap;
  font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.01em;
  transition: opacity .4s var(--ease);
}
.svc__idx { position: absolute; z-index: 2; top: 1.6rem; left: 2rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--teal-light); white-space: nowrap; opacity: 0; transition: opacity .4s var(--ease); }
.svc.is-active .svc__idx { opacity: 1; transition-delay: .3s; }
.svc__body {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2rem; display: grid; gap: .9rem;
  opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .8s var(--ease-out);
  min-width: 360px;
}
.svc__body h3 { font-family: var(--f-display); font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; }
.svc__body p { color: rgba(255,255,255,.8); max-width: 26em; font-size: .98rem; }
.svc__body .link-arrow { color: var(--teal-light); font-size: .9rem; justify-self: start; }
.svc.is-active { flex-grow: 5.5; }
.svc.is-active img { transform: scale(1); filter: saturate(.95) brightness(.82); }
.svc.is-active .svc__tab { opacity: 0; }
.svc.is-active .svc__body { opacity: 1; transform: none; transition-delay: .25s; }
.services:hover .svc:not(.is-active) { opacity: .82; }

/* --------------------------------------------------------------------------
   Storytelling fixo
   -------------------------------------------------------------------------- */
.story { position: relative; height: 560vh; background: var(--ink); color: var(--white); }
.story__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.story__frame { position: absolute; inset: 0; opacity: 0; }
.story__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.story__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,25,31,.8) 0%, rgba(6,25,31,.25) 60%, rgba(6,25,31,.15)); }
.story__frame.is-active { opacity: 1; }
.story__captions { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(5rem, 16vh, 10rem); }
.story__cap {
  position: absolute; left: 0; bottom: 0; max-width: 14em;
  font-family: var(--f-display); font-weight: 330; font-size: clamp(2.2rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -.025em;
  opacity: 0; transform: translateY(-24px); transition: opacity .35s var(--ease), transform .6s var(--ease);
}
.story__cap small { display: block; font-family: var(--f-sans); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal-light); font-weight: 600; margin-bottom: 1.2rem; }
.story__cap.is-active { opacity: 1; transform: none; transition: opacity .8s var(--ease) .3s, transform 1s var(--ease-out) .3s; }
.story__cap:not(.is-active) { transform: translateY(-24px); }
.story__final {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center;
  background: var(--ink); opacity: 0; padding: var(--gutter);
}
.story__final p {
  font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5.6vw, 5.8rem); line-height: 1.02; letter-spacing: -.025em;
  max-width: 13em;
}
.story__final em { font-style: italic; color: var(--teal-light); }
.story__rail {
  position: absolute; z-index: 5; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; gap: 1rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.story__rail li { display: flex; align-items: center; gap: .8rem; justify-content: flex-end; color: rgba(255,255,255,.4); transition: color .5s; }
.story__rail li::after { content: ""; width: 1.4rem; height: 1px; background: currentColor; transition: width .6s var(--ease-out); }
.story__rail li.is-active { color: var(--white); }
.story__rail li.is-active::after { width: 3rem; background: var(--teal-light); }
.story__progress { position: absolute; z-index: 5; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(255,255,255,.12); }
.story__progress span { display: block; height: 100%; width: 100%; background: var(--teal-light); transform-origin: left; transform: scaleX(0); }

/* --------------------------------------------------------------------------
   Diagnóstico por imagem
   -------------------------------------------------------------------------- */
.tech__stage { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.tech__scaler { position: relative; overflow: hidden; aspect-ratio: 16 / 8; background: #061A20; transform-origin: center top; will-change: transform; }
.tech__scaler img { width: 100%; height: 100%; object-fit: cover; }
.tech__scaler::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,25,31,.65), transparent 50%); }
.tech__tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tag {
  position: absolute; display: inline-flex; align-items: center; gap: .7rem;
  padding: .65rem .95rem; background: rgba(6, 25, 31, .55); color: var(--white);
  border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .85rem; font-weight: 500; white-space: nowrap;
}
.tag::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--teal-light); box-shadow: 0 0 0 4px rgba(143, 208, 196, .2); }
.js .tag { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease-out); }
.js .tag.is-in { opacity: 1; transform: none; }
.tech__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); align-items: start; }
.tech__list { grid-column: 1 / span 6; border-top: 1px solid var(--line-dark); }
.tech__list li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line-dark); }
.tech__list h3 { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -.01em; }
.tech__list p { grid-column: 1 / -1; color: var(--on-dark-muted); font-size: .96rem; }
.tech__side { grid-column: 8 / span 5; }

/* --------------------------------------------------------------------------
   Laboratório
   -------------------------------------------------------------------------- */
.lab { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: stretch; }
.lab__media { grid-column: 1 / span 7; position: relative; min-height: 520px; overflow: hidden; background: var(--mist); }
.lab__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lab__panel {
  grid-column: 8 / span 5; position: relative; overflow: hidden; background: var(--petrol); color: var(--on-dark);
  padding: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
}
.lab__panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.lab__panel > * { position: relative; }
.lab__stat { font-family: var(--f-display); font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -.03em; font-weight: 300; }
.lab__stat small { display: block; font-family: var(--f-sans); font-size: .95rem; letter-spacing: 0; color: var(--on-dark-muted); margin-top: .8rem; font-weight: 400; }
.pull { font-family: var(--f-display); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: var(--on-dark); border-top: 1px solid var(--line-dark); padding-top: 1.4rem; }
.pull cite { display: block; margin-top: .6rem; font-style: normal; font-family: var(--f-sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-light); }

/* --------------------------------------------------------------------------
   Atendimento 24h
   -------------------------------------------------------------------------- */
.h24 { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); }
.h24__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: center; }
.h24__text { grid-column: 1 / span 6; display: grid; gap: 2rem; }
.h24__visual { grid-column: 7 / span 6; position: relative; display: grid; place-items: center; }
.big24 {
  font-family: var(--f-display); font-weight: 300; line-height: .8; letter-spacing: -.06em;
  font-size: clamp(9rem, 24vw, 22rem); position: relative;
  background: linear-gradient(100deg, rgba(234,241,239,.16) 0%, rgba(234,241,239,.16) 40%, #fff 50%, rgba(234,241,239,.16) 60%, rgba(234,241,239,.16) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sweep 5.5s var(--ease) infinite;
}
.big24 span { font-size: .42em; letter-spacing: -.02em; vertical-align: top; margin-left: .06em; }
@keyframes sweep { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
.dial { position: absolute; inset: 50% auto auto 50%; width: min(560px, 90%); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial .tick { stroke: rgba(234,241,239,.22); stroke-width: 1; }
.dial .tick--major { stroke: rgba(234,241,239,.5); }
.dial .hand { stroke: var(--teal-light); stroke-width: 1.5; transition: transform 1s var(--ease-out); transform-origin: 50% 50%; }
.dial .hand-dot { fill: var(--teal-light); }
.dial text { fill: rgba(234,241,239,.45); font: 600 9px var(--f-sans); letter-spacing: .1em; }
.ecg { position: absolute; left: 0; right: 0; bottom: 2%; height: 80px; opacity: .35; pointer-events: none; }
.ecg path { fill: none; stroke: var(--teal-light); stroke-width: 1.2; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: ecg 6s linear infinite; }
@keyframes ecg { to { stroke-dashoffset: 0; } }
.now {
  display: inline-flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem; border: 1px solid var(--line-dark);
  font-size: .92rem; color: var(--on-dark); justify-self: start;
}
.now time { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em; }
.h24__facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); margin-top: clamp(3.5rem, 6vw, 5rem); }
.h24__facts div { padding: 1.5rem 1.5rem 0 0; display: grid; gap: .3rem; }
.h24__facts strong { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; color: var(--white); }
.h24__facts span { color: var(--on-dark-muted); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Internação — imagem ampla com painel
   -------------------------------------------------------------------------- */
.care { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--white); overflow: hidden; background: var(--ink); }
.care__bg { position: absolute; inset: -8% 0; will-change: transform; }
.care__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.care::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(6,25,31,.93) 0%, rgba(6,25,31,.6) 38%, rgba(6,25,31,.08) 72%); }
.care__content { position: relative; z-index: 2; padding-block: clamp(4rem, 10vw, 8rem); display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: end; }
.care__title { grid-column: 1 / span 7; display: grid; gap: 1.4rem; }
.care__text { grid-column: 9 / span 4; display: grid; gap: 1.6rem; color: rgba(255,255,255,.84); }

/* --------------------------------------------------------------------------
   Especialidades — lista interativa com imagem que segue o cursor
   -------------------------------------------------------------------------- */
.spec { position: relative; transition: background-color .8s var(--ease); }
.spec.is-hovering { background: var(--petrol); color: var(--on-dark); }
.spec.is-hovering .label { color: var(--teal-light); }
.spec.is-hovering .lead { color: var(--on-dark-muted); }
.spec__list { border-top: 1px solid var(--line); transition: border-color .8s; }
.spec.is-hovering .spec__list, .spec.is-hovering .spec__item { border-color: var(--line-dark); }
.spec__item {
  position: relative; display: grid; grid-template-columns: 1fr minmax(0, 24rem) 2rem; gap: 1.5rem; align-items: center;
  padding-block: clamp(1.2rem, 2.2vw, 2rem); border-bottom: 1px solid var(--line); text-decoration: none;
  transition: opacity .5s var(--ease), padding-left .6s var(--ease-out);
}
.spec__item .n { font-size: .72rem; letter-spacing: .16em; font-weight: 600; color: var(--teal); }
.spec.is-hovering .spec__item .n { color: var(--teal-light); }
.spec__item h3 { font-family: var(--f-display); font-weight: 330; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -.025em; }
.spec__item p { font-size: .95rem; color: inherit; opacity: .72; }
.spec__item svg { width: 1.4rem; height: 1.4rem; transition: transform .5s var(--ease-out); }
.spec__list:hover .spec__item { opacity: .38; }
.spec__list:hover .spec__item:hover { opacity: 1; padding-left: 1rem; }
.spec__item:hover svg { transform: rotate(-45deg); }
.spec__thumb { display: none; }

/* --------------------------------------------------------------------------
   Equipe
   -------------------------------------------------------------------------- */
.team__hero { position: relative; }
.team__quote { font-family: var(--f-display); font-weight: 330; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.15; letter-spacing: -.015em; max-width: 20em; }
.team__quote strong { font-weight: 400; color: var(--petrol-2); }
.team__row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); align-items: end; }
.team__row .frame { grid-column: 1 / span 8; }
.team__row aside { grid-column: 9 / span 4; display: grid; gap: 1.5rem; }
.note-ai { font-size: .78rem; color: var(--muted); display: flex; gap: .5rem; align-items: baseline; }
.note-ai::before { content: "*"; color: var(--sand); }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1.5rem; }
.person { display: grid; gap: .9rem; }
.person__photo { aspect-ratio: 4 / 5; background: var(--mist); position: relative; overflow: hidden; display: grid; place-items: center; }
.person__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person__photo svg { width: 38%; color: rgba(10,38,46,.18); }
.person__name { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.15; }
.person__role { font-size: .88rem; color: var(--muted); }
.person--placeholder .person__name, .person--placeholder .person__role { color: rgba(10,38,46,.4); }

/* --------------------------------------------------------------------------
   Experiência do tutor
   -------------------------------------------------------------------------- */
.tutor { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: center; }
.tutor__media { grid-column: 1 / span 5; }
.tutor__text { grid-column: 7 / span 6; display: grid; gap: 2rem; }
.words { display: flex; flex-wrap: wrap; gap: .2rem 0; font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); letter-spacing: -.015em; line-height: 1.3; }
.words li { display: inline-flex; align-items: center; }
.words li + li::before { content: ""; width: .35em; height: .35em; border-radius: 50%; background: var(--sand); margin-inline: .55em; opacity: .9; }
.words li:nth-child(odd) { font-style: italic; color: var(--petrol-2); }

/* --------------------------------------------------------------------------
   Depoimentos
   -------------------------------------------------------------------------- */
.testi { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: start; }
.testi__head { grid-column: 1 / span 4; display: grid; gap: 1.5rem; position: sticky; top: 7rem; }
.testi__stage { grid-column: 6 / span 7; position: relative; }
.testi__track { display: grid; }   /* todos os slides na mesma célula: a altura acompanha o maior depoimento */
.testi__slide {
  grid-area: 1 / 1; margin: 0; display: grid; align-content: start; gap: 2rem;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .9s var(--ease), transform 1s var(--ease-out), visibility 0s .9s;
}
.testi__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .9s var(--ease), transform 1s var(--ease-out); }
.no-js .testi__track { gap: 3rem; }
.no-js .testi__slide { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.testi__mark { font-family: var(--f-display); font-size: 6rem; line-height: .5; color: var(--sand); height: 2.2rem; }
.testi__quote { margin: 0; font-family: var(--f-display); font-weight: 330; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.2; letter-spacing: -.015em; }
.testi__who { display: flex; align-items: center; gap: 1rem; font-weight: 600; }
.testi__who span { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--mist); display: grid; place-items: center; font-family: var(--f-display); font-weight: 500; color: var(--petrol); }
.testi__who small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
.testi__controls { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.testi__btn { width: 3rem; height: 3rem; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; cursor: pointer; border-radius: 2px; transition: border-color .3s, background-color .3s, color .3s; }
.testi__btn:hover { border-color: var(--petrol); background: var(--petrol); color: var(--white); }
.testi__btn svg { width: 1.1rem; height: 1.1rem; }
.testi__count { font-variant-numeric: tabular-nums; font-size: .85rem; letter-spacing: .12em; color: var(--muted); }
.testi__bar { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.testi__bar span { position: absolute; inset: 0; background: var(--petrol); transform-origin: left; transform: scaleX(0); }

/* --------------------------------------------------------------------------
   Localização
   -------------------------------------------------------------------------- */
.loc { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: stretch; }
.loc__info { grid-column: 1 / span 5; display: grid; gap: 2rem; align-content: start; }
.loc__map { grid-column: 7 / span 6; position: relative; min-height: 480px; background: var(--mist); overflow: hidden; }
.loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
.map-facade { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--petrol); }
.map-facade svg.bgmap { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-facade .pin { position: relative; display: grid; gap: 1rem; justify-items: center; }
.map-facade .pin i { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 10px rgba(14,61,74,.14), 0 0 0 24px rgba(14,61,74,.07); }
.contact-list { display: grid; border-top: 1px solid var(--line); }
.contact-list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.contact-list dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.contact-list dd { margin: 0; font-size: 1.05rem; }
.contact-list a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.contact-list a:hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.final { position: relative; min-height: 92svh; display: grid; align-items: center; color: var(--white); overflow: hidden; background: var(--ink); }
.final__bg { position: absolute; inset: -8% 0; will-change: transform; }
.final__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,25,31,.92) 0%, rgba(6,25,31,.6) 45%, rgba(6,25,31,.05) 80%); }
.final__content { position: relative; z-index: 2; display: grid; gap: 2rem; padding-block: var(--section); }
.final__title { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.5rem, 5.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.025em; max-width: 12em; }
.final__title em { color: var(--teal-light); }
.final__sub { font-size: var(--t-lead); color: rgba(255,255,255,.82); }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-dark-muted); padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: 2rem; font-size: .95rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem 2rem; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line-dark); }
.footer__brand { display: grid; gap: 1.4rem; align-content: start; color: var(--on-dark); }
.footer__slogan { font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--white); }
.footer__slogan em { color: var(--teal-light); }
.footer h4 { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--on-dark); margin-bottom: 1.2rem; }
.footer li + li { margin-top: .55rem; }
.footer a { text-decoration: none; transition: color .3s; }
.footer a:hover { color: var(--white); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.8rem; font-size: .8rem; }
.footer__big { font-family: var(--f-display); font-weight: 300; letter-spacing: -.04em; line-height: .95; font-size: 9.2vw; color: rgba(234,241,239,.07); padding-top: 2rem; white-space: nowrap; }
.footer__big span { display: inline-block; }

/* --------------------------------------------------------------------------
   WhatsApp flutuante + barra mobile
   -------------------------------------------------------------------------- */
.fab-whats {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 80; width: 3.8rem; height: 3.8rem; border-radius: 50%;
  background: #1F8F5F; color: #fff; display: grid; place-items: center;
  box-shadow: 0 16px 32px -12px rgba(10, 38, 46, .55);
  transition: transform .5s var(--ease-out), opacity .5s;
}
.fab-whats svg { width: 1.7rem; height: 1.7rem; }
.fab-whats::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #1F8F5F; animation: pulse 3.2s var(--ease) infinite; }
.fab-whats:hover { transform: scale(1.06); }
.fab-whats__tip {
  position: absolute; right: calc(100% + .8rem); top: 50%; transform: translate(8px, -50%); white-space: nowrap;
  background: var(--white); color: var(--ink); padding: .5rem .8rem; font-size: .82rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out); box-shadow: 0 10px 30px -12px rgba(10,38,46,.4);
}
.fab-whats:hover .fab-whats__tip { opacity: 1; transform: translate(0, -50%); }

.mbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 38, 46, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  gap: .5rem; grid-template-columns: 1.25fr 1fr 1fr; color: var(--white);
  border-top: 1px solid var(--line-dark);
}
.mbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem;
  text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .03em; border-radius: 2px; white-space: nowrap;
}
.mbar__24 { background: var(--white); color: var(--ink); }
.mbar__w { background: #1F8F5F; }
.mbar__t { border: 1px solid var(--line-dark); }
.mbar svg { width: 1.15rem; height: 1.15rem; }
.mbar .pulse { background: var(--teal); }
.mbar .pulse::after { border-color: var(--teal); }

/* --------------------------------------------------------------------------
   Páginas internas
   -------------------------------------------------------------------------- */
.page-hero { position: relative; min-height: 72svh; display: grid; align-items: end; color: var(--white); background: var(--ink); overflow: hidden; }
.page-hero__bg { position: absolute; inset: -6% 0 0; will-change: transform; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(6,25,31,.9) 0%, rgba(6,25,31,.35) 55%, rgba(6,25,31,.45) 100%); }
.page-hero__content { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 4rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); display: grid; gap: 1.4rem; }
.page-hero h1 { font-family: var(--f-display); font-weight: 330; font-size: clamp(2.7rem, 6vw, 6rem); line-height: 1; letter-spacing: -.025em; max-width: 13em; }
.page-hero h1 em { color: var(--teal-light); }
.page-hero p { font-size: var(--t-lead); color: rgba(255,255,255,.82); max-width: 34em; }
.crumbs { display: flex; gap: .6rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 600; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: #fff; }

.svc-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: center; padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line); }
.svc-row:first-child { border-top: 0; padding-top: 0; }
.svc-row .frame { grid-column: 1 / span 6; }
.svc-row__text { grid-column: 8 / span 5; display: grid; gap: 1.4rem; }
.svc-row:nth-child(even) .frame { grid-column: 7 / span 6; order: 2; }
.svc-row:nth-child(even) .svc-row__text { grid-column: 1 / span 5; order: 1; }
.svc-row__n { font-size: .72rem; letter-spacing: .18em; font-weight: 600; color: var(--teal); }
.checks { display: grid; gap: .55rem; }
.checks li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; color: var(--muted); }
.checks li::before { content: ""; width: .5rem; height: .5rem; margin-top: .55em; border: 1px solid var(--teal); transform: rotate(45deg); }

.cta-band { background: var(--petrol); color: var(--on-dark); }
.cta-band .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); }
.cta-band h2 { font-family: var(--f-display); font-weight: 330; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; }
.cta-band .btn-row { justify-content: flex-end; }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.timeline div { padding: 2rem 2rem 0 0; display: grid; gap: .7rem; }
.timeline strong { font-family: var(--f-display); font-weight: 330; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: var(--petrol); }

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.gallery .frame:nth-child(1) { grid-column: span 8; aspect-ratio: 16/10; }
.gallery .frame:nth-child(2) { grid-column: span 4; aspect-ratio: auto; }
.gallery .frame:nth-child(3) { grid-column: span 4; aspect-ratio: 4/5; }
.gallery .frame:nth-child(4) { grid-column: span 8; aspect-ratio: auto; }
.gallery figcaption { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; background: rgba(6,25,31,.6); color: #fff; padding: .45rem .75rem; font-size: .8rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.testi-wall { columns: 2; column-gap: 2rem; }
.testi-card { break-inside: avoid; padding: 2.4rem 0; border-top: 1px solid var(--line); display: grid; gap: 1.5rem; }
.testi-card blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.3; letter-spacing: -.01em; }

.hours { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); }
.hours div { padding: 1rem .5rem; text-align: center; border-left: 1px solid var(--line); display: grid; gap: .2rem; }
.hours div:first-child { border-left: 0; }
.hours small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.hours strong { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-toggle { display: inline-block; margin-left: 0; }
  .header-cta { margin-left: auto; }
  .hero__aside { display: none; }
  .svc__body { min-width: 300px; padding: 1.5rem; }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .section-head--split { grid-template-columns: 1fr; }
  .section-head--split .lead { justify-self: start; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item { padding-left: 1.2rem; border-top: 1px solid var(--line-dark); }
  .trust__item:nth-child(-n+2) { border-top: 0; }
  .trust__item:nth-child(odd) { border-left: 0; padding-left: 0; }

  .about, .mvv, .split, .tech__grid, .lab, .h24__grid, .care__content, .team__row, .tutor, .testi, .loc, .svc-row, .gallery { grid-template-columns: 1fr; }
  .about > *, .mvv > *, .split > *, .tech__grid > *, .lab > *, .h24__grid > *, .care__content > *, .team__row > *, .tutor > *, .testi > *, .loc > *, .svc-row > *, .gallery > * { grid-column: 1 / -1 !important; order: initial !important; }
  .about__text, .testi__head { position: static; }
  .mvv__block--vision { padding-top: 0; }
  .float-card { right: 1rem; bottom: 1rem; }
  .lab__media { min-height: 340px; }
  .h24__visual { min-height: 320px; order: -1 !important; }
  .h24__facts { grid-template-columns: 1fr; }
  .h24__facts div { padding: 1.1rem 0; border-bottom: 1px solid var(--line-dark); }
  .loc__map { min-height: 360px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; }
  .testi-wall { columns: 1; }
  .cta-band .wrap { grid-template-columns: 1fr; }
  .cta-band .btn-row { justify-content: flex-start; }
  .hours { grid-template-columns: repeat(4, 1fr); }
  .hours div:nth-child(5) { border-left: 0; }
  .hours div:nth-child(n+5) { border-top: 1px solid var(--line); }

  /* Serviços viram carrossel horizontal */
  .services {
    height: auto; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .services::-webkit-scrollbar { display: none; }
  .svc { flex: 0 0 82%; height: 460px; scroll-snap-align: start; }
  .svc img { transform: none; filter: saturate(.9) brightness(.78); }
  .svc__tab { display: none; }
  .svc__idx { opacity: 1; left: 1.5rem; }
  .svc__body { opacity: 1; transform: none; min-width: 0; padding: 1.5rem; }
  .services:hover .svc:not(.is-active) { opacity: 1; }

  /* Especialidades: miniatura em linha, sem cursor */
  .spec__item { grid-template-columns: 1fr 1.6rem; gap: .4rem 1rem; }
  .spec__item .n { display: none; }
  .spec__item p { grid-column: 1 / -1; grid-row: 2; }
  .spec__list:hover .spec__item { opacity: 1; }

  .story { height: 420vh; }
  .story__rail { display: none; }
  .tech__scaler { aspect-ratio: 4 / 3; }
  .tag { font-size: .75rem; padding: .45rem .7rem; }
}

@media (max-width: 760px) {
  .site-header .badge-24, .header-cta .btn--whats { display: none; }
  .brand__name { font-size: 1.3rem; }
  .fab-whats { display: none; }
  .mbar { display: grid; }
  body { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); }
  .hero { min-height: 600px; }
  .hero__veil { background: linear-gradient(0deg, rgba(6,25,31,.94) 0%, rgba(6,25,31,.55) 55%, rgba(6,25,31,.25) 100%); }
  .hero__media img, .hero__media video { object-position: 56% 40%; }
  .hero__content { padding-bottom: 6rem; }
  .hero__meta .scroll-cue { display: none; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .display { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .footer__top { grid-template-columns: 1fr; }
  .team-grid { gap: 1.8rem 1rem; }
  .contact-list > div { grid-template-columns: 1fr; gap: .2rem; }
  .words { font-size: 1.45rem; }
  .values { justify-content: flex-start; row-gap: .9rem; column-gap: 1.6rem; }
    .dial { width: 100%; }
}

/* Storytelling estático (movimento reduzido) */
.story--static { height: auto; }
.story--static .story__pin { position: relative; height: auto; display: grid; }
.story--static .story__frame { position: relative; inset: auto; opacity: 1; height: 70svh; }
.story--static .story__captions { display: none; }
.story--static .story__rail, .story--static .story__progress { display: none; }
.story--static .story__final { position: relative; opacity: 1; min-height: 60svh; }

/* Movimento reduzido: sem parallax, sem pinning, sem loops decorativos */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal], .js [data-words] .w > span, .js .reveal-img, .js .tag { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .story { height: auto; }
  .story__pin { position: relative; height: auto; }
}