@font-face {
  font-family: "Afya Sans";
  src: url("/assets/fonts/AfyaSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Afya Sans";
  src: url("/assets/fonts/AfyaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Afya Sans";
  src: url("/assets/fonts/AfyaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --magenta: #ce0058;
  --berry-10: #19174f;
  --berry-20: #23215f;
  --berry-30: #2e2b78;
  --berry-50: #433fa6;
  --berry-70: #5d5abf;
  --berry-100: #8d8bd5;
  --berry-120: #afaedb;
  --berry-140: #d3d2ea;
  --berry-150: #e5e5f1;
  --berry-160: #f5f5fa;
  --white: #ffffff;
  --text: var(--berry-10);
  --text-body: #333333;
  --text-muted: rgba(25, 23, 79, 0.72);
  --line: rgba(25, 23, 79, 0.12);
  --line-strong: rgba(25, 23, 79, 0.22);
  --shadow-sm: 0 10px 30px rgba(25, 23, 79, 0.08);
  --shadow-md: 0 20px 54px rgba(25, 23, 79, 0.12);
  /* 10/09 (call de 08/09) — o raio redondo e reservado para CTA. Elemento que
     nao clica usa --radius-chip, para nao gerar expectativa de clique. */
  --radius-cta: 999px;
  --radius-chip: 8px;
  --content: 1320px;
  --header-height: 84px;
  --gutter: clamp(20px, 4vw, 48px);
  /* Ritmo vertical alinhado ao iClinic (referencia do cliente): ~79px desktop, 48px mobile */
  --section-space: clamp(56px, 5.5vw, 80px);
  --ease: 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--text-body);
  background: var(--white);
  font-family: "Afya Sans", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid #7d7acd;
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 16px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--berry-10);
  transform: translateY(-150%);
  transition: transform var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.content-container {
  width: min(100% - (2 * var(--gutter)), var(--content));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--text);
  letter-spacing: -0.035em;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.04;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.08;
}

h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.18;
}

.section-heading {
  max-width: 940px;
  margin-bottom: clamp(44px, 5vw, 68px);
}

.section-heading .section-eyebrow,
.section-eyebrow {
  margin-bottom: 12px;
  color: var(--magenta);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: clamp(18px, 1.6vw, 22px);
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: 1px solid transparent;
  /* Radius pill conforme espec de CTA do manual da marca (radius 25pt) */
  border-radius: var(--radius-cta);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--white);
  background: var(--magenta);
  box-shadow: 0 10px 24px rgba(206, 0, 88, 0.18);
}

.button-primary:hover {
  background: linear-gradient(rgba(25, 23, 79, 0.16), rgba(25, 23, 79, 0.16)) var(--magenta);
  box-shadow: 0 14px 30px rgba(206, 0, 88, 0.24);
}

/* 11/09 (call de 08/09) — hierarquia de CTA: um botao preenchido por dobra. O
   secundario vem em contorno, sem preenchimento; o terciario vira .text-link.
   Todos os CTAs de contorno do site caem em superficie clara (os .page-hero sao
   claros desde o redesenho de 26/08), entao ha uma variante so. */
.button-outline {
  color: var(--magenta);
  background: transparent;
  border-color: currentColor;
}

.button-outline:hover,
.button-outline:focus-visible {
  color: var(--white);
  background: var(--magenta);
  border-color: var(--magenta);
}

.button-block {
  width: 100%;
}

.icon-button {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  color: var(--berry-10);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), transform var(--ease);
}

.icon-button:hover {
  color: var(--magenta);
  border-color: rgba(206, 0, 88, 0.35);
  transform: translateY(-2px);
}

.icon-button svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 10px 32px rgba(25, 23, 79, 0.07);
}

/* Mesma largura e gutter da grade de conteudo, para o logo alinhar com as secoes */
.header-shell {
  display: grid;
  width: min(100% - (2 * var(--gutter)), var(--content));
  height: 100%;
  margin-inline: auto;
  grid-template-columns: minmax(170px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  width: clamp(158px, 12vw, 186px);
  align-items: center;
}

.brand img {
  width: 100%;
  height: auto;
}

.header-menu {
  display: contents;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 2.4vw, 40px);
}

.main-nav a,
.header-login {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  color: var(--berry-10);
  font-size: 15px;
  font-weight: 700;
}

.main-nav a::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--magenta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.header-login:hover {
  color: var(--magenta);
}

.button-header {
  min-height: 46px;
  padding: 11px 24px;
}

.menu-toggle {
  display: none;
}

main {
  padding-top: var(--header-height);
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  min-height: clamp(620px, calc(100svh - var(--header-height)), 760px);
  overflow: hidden;
  align-items: stretch;
  background: var(--berry-10);
}

.hero-photo,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo {
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  z-index: 1;
  background: linear-gradient(90deg, #19174f 0%, rgba(25, 23, 79, 0.99) 28%, rgba(25, 23, 79, 0.92) 40%, rgba(25, 23, 79, 0.58) 55%, rgba(25, 23, 79, 0.12) 74%, rgba(25, 23, 79, 0) 88%);
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
}

.hero-copy {
  width: min(56%, 680px);
  padding-block: clamp(72px, 9vw, 124px);
}

.hero h1 {
  max-width: 660px;
  color: var(--white);
}

.hero-copy > p {
  max-width: 610px;
  margin-bottom: 36px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
}

/* CTA secundario como link em texto, conforme o copy do briefing */
.hero-link {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--ease), gap var(--ease);
}

.hero-link:hover {
  text-decoration-color: var(--white);
  gap: 12px;
}

.hero-link svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Proof */
.proof {
  position: relative;
  z-index: 4;
  padding-block: 38px;
  background: linear-gradient(180deg, var(--berry-150) 0%, var(--berry-160) 100%);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.proof-item {
  display: grid;
  min-height: 82px;
  padding: 4px clamp(24px, 3vw, 44px);
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "icon highlight"
    "icon label";
  align-content: center;
  gap: 4px 18px;
  border-right: 1px solid var(--line);
}

/* 10/09 (call de 08/09) — o padding lateral e igual nas tres celulas. Antes o
   primeiro item zerava o padding-left e o ultimo o padding-right, entao cada
   coluna comecava a uma distancia diferente do seu divisor. */
.proof-item:last-child {
  border-right: 0;
}

.proof-item svg {
  grid-area: icon;
  align-self: center;
  width: 48px;
  height: 48px;
  color: var(--magenta);
}

.proof-item p {
  margin: 0;
  color: var(--berry-20);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.35;
}

.proof-item .proof-highlight {
  grid-area: highlight;
  align-self: end;
  color: var(--berry-10);
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* 10/09 (call de 08/09) — o asterisco e a nota "app vs. web" sairam: o problema
   real e que nem toda feature funciona offline, inclusive no app. O rotulo passa
   a levar direto para a tabela de features, onde a informacao por recurso vive. */
.proof-link {
  color: var(--berry-10);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--ease);
}

.proof-link:hover,
.proof-link:focus-visible {
  color: var(--magenta);
}

/* Plans */
.plans {
  background: linear-gradient(180deg, var(--berry-160) 0%, var(--white) 100%);
}

.plans-grid {
  display: grid;
  max-width: 980px;
  margin-inline: auto;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 28px;
}

.plan-card {
  display: flex;
  padding: clamp(28px, 3.4vw, 46px);
  flex-direction: column;
  color: var(--text-body);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.plan-card-premium {
  position: relative;
  background: linear-gradient(180deg, var(--white) 0%, var(--berry-160) 100%);
  border-color: rgba(206, 0, 88, 0.44);
  box-shadow: var(--shadow-md);
}

.plan-card-premium::before {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 6px;
  content: "";
  /* Degrade oficial da marca: 60% Magenta Afya -> 40% Berry 10 */
  background: linear-gradient(90deg, var(--magenta), 60%, var(--berry-10));
}

.plan-card h3 {
  margin-bottom: 8px;
  font-size: 34px;
  font-weight: 700;
}

.plan-top > p:not(.price, .price-note) {
  min-height: 56px;
  margin-bottom: 22px;
  color: var(--text-muted);
}

.price {
  display: flex;
  min-height: 88px;
  margin-bottom: 0;
  align-items: baseline;
  gap: 8px;
  color: var(--berry-10);
  line-height: 1;
}

.price span {
  font-size: 22px;
}

.price strong {
  font-size: clamp(64px, 6vw, 84px);
  font-weight: 400;
  letter-spacing: -0.06em;
}

.price-premium strong {
  font-size: clamp(52px, 5vw, 70px);
}

.price-note {
  margin-bottom: 24px;
  color: var(--magenta);
  font-size: 17px;
}

.feature-intro {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--berry-20);
  font-size: 16px;
  font-weight: 700;
}

.feature-list {
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
  border-top: 1px solid var(--line);
}

.feature-intro + .feature-list {
  border-top: 0;
}

.feature-list li {
  position: relative;
  padding: 13px 0 13px 34px;
  border-bottom: 1px solid var(--line);
  color: var(--berry-20);
  font-size: 16px;
}

.feature-list li::before {
  position: absolute;
  top: 15px;
  left: 2px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  content: "✓";
  color: var(--magenta);
  border: 1px solid rgba(206, 0, 88, 0.72);
  font-size: 13px;
  font-weight: 700;
}

.plan-card .button {
  margin-top: auto;
}

/* Explorador imersivo (bloco 4 do wireframe): faixa Berry com dois niveis de navegacao —
   recursos a esquerda trocam a tela; hotspots sobre a tela dao zoom em cada etapa.
   Conteudo (recursos e etapas) em script.js. */
.explorer {
  background: linear-gradient(165deg, var(--berry-10) 0%, var(--berry-20) 100%);
}

/* Cabecalho em largura livre para a headline caber em duas linhas (quebra controlada no HTML) */
.explorer-heading {
  max-width: none;
  margin-bottom: clamp(36px, 4vw, 48px);
}

.explorer-heading h2 {
  color: var(--white);
}

.explorer-heading p {
  max-width: 72ch;
  color: rgba(255, 255, 255, 0.78);
}

.explorer-panel {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  align-items: start;
  gap: clamp(32px, 4vw, 56px);
}

.explorer-side-label {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.explorer-rail div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.explorer-rail button {
  padding: 12px 14px;
  border: 0;
  border-left: 3px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
}

.explorer-rail button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.explorer-rail button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.14);
  border-left-color: var(--magenta);
}

.explorer-rail button small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
}

.explorer-phone {
  display: grid;
  justify-items: center;
}

/* A janela de recorte nao escala junto com o zoom: o efeito e olhar para dentro da tela */
.explorer-clip {
  width: min(100%, 390px);
  overflow: hidden;
  border-radius: 30px;
}

.explorer-wrap {
  position: relative;
  width: 100%;
  transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.explorer-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 300ms;
}

.explorer-shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}

.explorer-wrap.is-zoomed .explorer-shade {
  opacity: 1;
}

.explorer-dot {
  position: absolute;
  z-index: 2;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--magenta);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 16px rgba(13, 12, 34, 0.4);
  transition: opacity 350ms;
}

.explorer-dot::after {
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  content: "";
  animation: explorer-pulse 2.4s ease-out infinite;
}

@keyframes explorer-pulse {
  0% { transform: scale(0.82); opacity: 0.9; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

.explorer-wrap.is-zoomed .explorer-dot {
  opacity: 0;
  pointer-events: none;
}

.explorer-wrap.is-zoomed .explorer-dot.is-active {
  opacity: 1;
  pointer-events: auto;
}

.explorer-dot.is-active::after {
  animation: none;
  opacity: 0;
}

.explorer-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.explorer-steps button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-cta);
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), transform var(--ease);
}

.explorer-steps button:hover {
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateX(2px);
}

.explorer-steps button .step-n {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11.5px;
}

.explorer-steps button[aria-pressed="true"] {
  background: var(--white);
  border-color: var(--white);
  color: var(--berry-10);
}

.explorer-steps button[aria-pressed="true"] .step-n {
  background: var(--magenta);
  color: var(--white);
}

.explorer-card {
  min-height: 128px;
  padding: 18px 22px;
  margin-top: 20px;
  border-left: 3px solid var(--magenta);
  background: rgba(255, 255, 255, 0.06);
}

.explorer-card h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 17.5px;
  letter-spacing: -0.01em;
}

.explorer-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  line-height: 1.5;
}

.explorer-controls {
  display: flex;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.explorer-reset {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-cta);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}

.explorer-reset:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* Faixa de chips de jornada (mesmo papel da barra de numeros do hero) */
.journey-band {
  background: var(--white);
  padding-block: 26px;
}

.journey-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.journey-chips-label {
  margin-right: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.journey-band a {
  padding: 8px 18px;
  color: var(--berry-10);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-cta);
  font-size: 14px;
  font-weight: 700;
  transition: color var(--ease), border-color var(--ease);
}

.journey-band a:hover,
.journey-band a:focus-visible {
  color: var(--magenta);
  border-color: rgba(206, 0, 88, 0.35);
}

/* Audiences */
.audiences {
  background: var(--white);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.audience-card {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-height) + 28px);
  background: var(--berry-20);
  box-shadow: var(--shadow-sm);
}

.audience-card::before {
  position: absolute;
  z-index: 1;
  inset: 30% 0 0;
  content: "";
  background: linear-gradient(180deg, rgba(25, 23, 79, 0) 0%, rgba(25, 23, 79, 0.72) 52%, rgba(25, 23, 79, 0.96) 100%);
}

.audience-card::after {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: linear-gradient(180deg, var(--magenta), rgba(206, 0, 88, 0));
}

.audience-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.audience-card:hover img {
  transform: scale(1.025);
}

.audience-card > div {
  position: absolute;
  z-index: 3;
  right: 26px;
  bottom: 28px;
  left: 26px;
  color: var(--white);
}

.audience-card h3 {
  margin-bottom: 8px;
  color: var(--white);
  font-size: 28px;
}

.audience-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.45;
}

/* Credibility */
.credibility {
  position: relative;
  /* Faixa Berry no formato da secao de IA do iClinic (referencia do cliente).
     Glow radial no lugar das ondas da campanha; escala em gradiente ate Berry 70,
     conforme a regra do manual. */
  background:
    radial-gradient(1000px 620px at 76% 28%, rgba(93, 90, 191, 0.55), rgba(93, 90, 191, 0) 62%),
    linear-gradient(160deg, var(--berry-50) 0%, var(--berry-20) 100%);
}

.credibility-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
}

.credibility-dash {
  width: 48px;
  height: 4px;
  margin-bottom: 22px;
  background: var(--magenta);
  border-radius: 2px;
}

.credibility-copy h2 {
  color: var(--white);
  font-size: clamp(38px, 4.4vw, 62px);
}

.credibility-copy > p {
  max-width: 650px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(18px, 1.7vw, 22px);
}

/* Especificidade acima de ".credibility-copy > p", que define tamanho e margem do paragrafo padrao */
.credibility-copy > .credibility-context {
  margin: 26px 0 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.source-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 32px;
  gap: 10px;
  list-style: none;
}

.source-list li {
  padding: 8px 18px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-chip);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.credibility-facts {
  display: grid;
  align-content: center;
  gap: 30px;
}

.credibility-fact .fact-label {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.credibility-fact .fact-value {
  margin: 0 0 4px;
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
}

.credibility-fact .fact-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15.5px;
}

.credibility-editors {
  display: flex;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  gap: 14px;
}

.editors-avatars {
  display: flex;
}

.editors-avatar {
  display: block;
  width: 52px;
  height: 52px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.editors-avatar + .editors-avatar {
  margin-left: -10px;
}

.editors-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* As fotos originais sao circulos sobre fundo claro; a escala empurra a borda clara para fora do recorte */
  transform: scale(1.14);
}

.credibility-editors > p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}

/* Testimonials */
.testimonials {
  background: var(--white);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.testimonial-card {
  display: flex;
  padding: clamp(26px, 2.6vw, 34px);
  margin: 0;
  flex-direction: column;
  gap: 24px;
  background: linear-gradient(180deg, var(--white) 0%, var(--berry-160) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.testimonial-card blockquote {
  margin: 0;
  flex-grow: 1;
  color: var(--berry-20);
  font-size: 17px;
  line-height: 1.6;
}

.testimonial-card blockquote p {
  margin: 0;
}

.testimonial-card figcaption {
  display: flex;
  padding-top: 20px;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.testimonial-card figcaption img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--berry-140);
}

.testimonial-card figcaption strong {
  display: block;
  color: var(--berry-10);
  font-size: 16px;
}

.testimonial-card figcaption span {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.35;
}

/* Benefits */
.benefits {
  background: var(--white);
}

.benefits-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(42px, 6vw, 90px);
}

.premium-label {
  display: inline-flex;
  padding: 6px 10px;
  margin-bottom: 20px;
  color: var(--magenta);
  background: rgba(206, 0, 88, 0.06);
  border: 1px solid rgba(206, 0, 88, 0.1);
  font-size: 14px;
  font-weight: 700;
}

.benefits-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, 3.4vw, 48px);
}

.benefits-copy h3 {
  margin-bottom: 14px;
  color: var(--magenta);
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
}

.benefits-copy > p:not(.premium-label) {
  max-width: 560px;
  margin-bottom: 28px;
  color: var(--text-muted);
}

.benefits-rail-wrap {
  min-width: 0;
}

.benefits-controls {
  display: flex;
  margin-bottom: 16px;
  justify-content: flex-end;
  gap: 10px;
}

.benefits-viewport {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  gap: 16px;
  scrollbar-width: none;
}

.benefits-viewport::-webkit-scrollbar {
  display: none;
}

.benefit-card {
  display: flex;
  min-width: clamp(230px, 28vw, 290px);
  min-height: 220px;
  padding: 30px;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.benefit-card h3 {
  display: flex;
  min-height: 66px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 21px;
}

.benefit-card h3 img {
  width: auto;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
}

.benefit-card p {
  margin: auto 0;
  color: var(--berry-20);
  font-size: 18px;
  text-align: center;
}

.benefit-card strong {
  color: var(--magenta);
}

/* Final CTA and footer */
.final-cta {
  padding-block: clamp(48px, 5vw, 72px);
  background: var(--white);
}

.final-cta-inner {
  padding: clamp(46px, 6vw, 78px) var(--gutter);
  text-align: center;
  background: var(--berry-160);
  border: 1px solid var(--berry-140);
}

.final-cta h2 {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(34px, 3.7vw, 52px);
}

.site-footer {
  color: var(--text-body);
  background: var(--white);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  padding-top: 60px;
  padding-bottom: 48px;
  grid-template-columns: minmax(250px, 1.55fr) repeat(4, minmax(130px, 1fr));
  align-items: start;
  gap: clamp(28px, 4vw, 58px);
}

.footer-brand > img {
  width: min(220px, 100%);
  height: auto;
}

.footer-brand > p {
  max-width: 300px;
  margin: 22px 0;
  color: var(--text-muted);
  font-size: 15px;
}

.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-links img {
  width: 126px;
  height: auto;
}

.social-links {
  display: flex;
  margin-top: 20px;
  gap: 10px;
}

.social-links a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--berry-30);
  border: 1px solid var(--line);
  transition: color var(--ease), border-color var(--ease), transform var(--ease);
}

.social-links a:hover {
  color: var(--magenta);
  border-color: rgba(206, 0, 88, 0.3);
  transform: translateY(-2px);
}

.social-links svg {
  width: 20px;
  height: 20px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-column h2 {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

.footer-column a {
  color: var(--text-muted);
  font-size: 15px;
  transition: color var(--ease), transform var(--ease);
}

.footer-column a:hover {
  color: var(--magenta);
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 14px;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom strong {
  color: var(--magenta);
  font-weight: 700;
}

/* Páginas internas */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(60px, 7vw, 100px);
  background: linear-gradient(127deg, var(--berry-20) 0%, var(--berry-10) 62%);
}

.page-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--berry-120);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 860px;
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.06;
}

.page-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
}

.page-hero .hero-actions {
  margin-top: 32px;
}

.page-stats {
  padding-block: 40px;
  background: linear-gradient(180deg, var(--berry-150) 0%, var(--white) 100%);
}

.page-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.page-stat {
  padding-left: 20px;
  border-left: 3px solid var(--magenta);
}

.page-stat strong {
  display: block;
  color: var(--berry-10);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-stat span {
  color: var(--text-muted);
  font-size: 15px;
}

.team-intro {
  max-width: 760px;
  color: var(--text-muted);
  font-size: clamp(17px, 1.5vw, 20px);
}

.team-group {
  margin-top: clamp(44px, 5vw, 64px);
}

.team-group h3 {
  margin-bottom: 8px;
  font-size: clamp(22px, 2vw, 27px);
}

.team-group > p {
  max-width: 760px;
  margin-bottom: 26px;
  color: var(--text-muted);
  font-size: 15.5px;
}

.team-grid {
  display: grid;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  list-style: none;
}

.team-card {
  display: flex;
  padding: 16px 18px;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.team-card img {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--berry-140);
}

.team-card h4 {
  margin: 0 0 2px;
  color: var(--berry-10);
  font-size: 16px;
  letter-spacing: -0.01em;
}

.team-card p {
  margin: 0;
  color: var(--text-body);
  font-size: 13.5px;
}

.team-card small {
  color: var(--text-muted);
  font-size: 12.5px;
}

.team-names {
  display: grid;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 32px;
  list-style: none;
}

.team-names li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.team-names strong {
  display: block;
  color: var(--berry-10);
  font-size: 15px;
}

.team-names span {
  color: var(--text-muted);
  font-size: 13.5px;
}

.timeline {
  max-width: 860px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.timeline li {
  position: relative;
  padding: 0 0 36px 76px;
}

.timeline li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  content: attr(data-step);
  color: var(--white);
  background: var(--berry-10);
  border-radius: 50%;
  font-size: 19px;
  font-weight: 700;
}

.timeline li:not(:last-child)::after {
  position: absolute;
  top: 52px;
  bottom: 4px;
  left: 24px;
  width: 1px;
  content: "";
  background: var(--line-strong);
}

.timeline h3 {
  margin-bottom: 8px;
  font-size: 20px;
}

.timeline p {
  max-width: 68ch;
  margin: 0 0 8px;
}

.timeline .timeline-roles {
  color: var(--text-muted);
  font-size: 13.5px;
}

.faq-list {
  max-width: 880px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  padding: 22px 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--berry-10);
  cursor: pointer;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex: 0 0 auto;
  content: "+";
  color: var(--magenta);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-width: 72ch;
  padding-bottom: 24px;
}

.faq-answer p {
  margin: 0 0 10px;
}

.faq-cta {
  display: flex;
  max-width: 880px;
  padding: 26px 0 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.faq-cta p {
  margin: 0;
  color: var(--text-muted);
}

.benefits-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.benefits-grid-full .benefit-card {
  min-width: 0;
  min-height: 250px;
}

.benefit-card .benefit-desc {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: left;
}

.benefits-grid-full .benefit-card p:last-child {
  margin-top: auto;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.category-card {
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--magenta);
  box-shadow: var(--shadow-sm);
}

.category-card h3 {
  margin-bottom: 12px;
  font-size: 19px;
}

.category-card ul {
  display: grid;
  padding-left: 18px;
  margin: 0;
  gap: 6px;
  color: var(--text-muted);
  font-size: 15px;
}

.audience-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.audience-cta {
  display: flex;
  padding: 30px 28px;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.audience-cta h3 {
  margin-bottom: 10px;
  font-size: 21px;
}

.audience-cta p {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 15px;
}

.audience-cta .button {
  margin-top: auto;
  align-self: flex-start;
}

.value-list {
  display: grid;
  max-width: 760px;
  padding: 0;
  margin: 0;
  gap: 12px;
  list-style: none;
}

.value-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-body);
  font-size: 16px;
}

.value-list li::before {
  position: absolute;
  top: 11px;
  left: 2px;
  width: 12px;
  height: 2px;
  content: "";
  background: var(--magenta);
}

/* Timeline com anos no marcador (Quem somos) */
.timeline-years li::before {
  font-size: 14.5px;
  letter-spacing: -0.02em;
}

/* Texto corrido das paginas legais e institucionais */
.prose {
  max-width: 860px;
}

.prose h2 {
  margin: 44px 0 16px;
  font-size: clamp(24px, 2.4vw, 30px);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 28px 0 12px;
  font-size: 20px;
}

.prose ul,
.prose ol {
  padding-left: 24px;
  margin: 0 0 16px;
}

.prose li {
  margin-bottom: 8px;
}

.table-scroll {
  overflow-x: auto;
  margin: 20px 0;
}

.prose table {
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}

.prose th,
.prose td {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--berry-10);
  background: var(--berry-160);
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  gap: 16px;
}

@media (max-width: 900px) {
  .audience-cta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .page-stats-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .timeline li {
    padding-left: 62px;
  }

  .timeline li::before {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }

  .timeline li:not(:last-child)::after {
    left: 21px;
  }
}

/* Motion */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 680ms ease, transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js .reveal[data-delay="1"] {
  transition-delay: 90ms;
}

.js .reveal[data-delay="2"] {
  transition-delay: 180ms;
}

.js .reveal[data-delay="3"] {
  transition-delay: 270ms;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1120px) {
  .header-shell {
    grid-template-columns: minmax(160px, 0.8fr) auto minmax(225px, 0.8fr);
  }

  .main-nav {
    gap: 20px;
  }

  .button-header {
    padding-inline: 16px;
  }

  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .audience-card {
    min-height: 520px;
  }

  .footer-grid {
    grid-template-columns: minmax(250px, 1.4fr) repeat(2, 1fr);
  }

  .footer-brand {
    grid-row: span 2;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 72px;
  }

  .header-shell {
    display: flex;
    width: calc(100% - 40px);
    justify-content: space-between;
  }

  .brand {
    width: 150px;
  }

  .menu-toggle {
    position: relative;
    z-index: 3;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    padding: 0;
    color: var(--berry-10);
    background: var(--berry-160);
    border: 1px solid var(--line);
    cursor: pointer;
  }

  .menu-toggle-lines {
    position: relative;
    width: 22px;
    height: 16px;
  }

  .menu-toggle-lines i {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform var(--ease), top var(--ease);
  }

  .menu-toggle-lines i:first-child {
    top: 3px;
  }

  .menu-toggle-lines i:last-child {
    top: 11px;
  }

  .menu-open .menu-toggle-lines i:first-child {
    top: 7px;
    transform: rotate(45deg);
  }

  .menu-open .menu-toggle-lines i:last-child {
    top: 7px;
    transform: rotate(-45deg);
  }

  .header-menu {
    position: fixed;
    z-index: 2;
    inset: var(--header-height) 0 0;
    display: flex;
    visibility: hidden;
    padding: 24px 20px 20px;
    flex-direction: column;
    justify-content: space-between;
    background: var(--white);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  }

  .menu-open .header-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .main-nav {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .main-nav a {
    min-height: 58px;
    padding: 14px 6px;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
  }

  .main-nav a::after {
    display: none;
  }

  .header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .header-login {
    justify-content: center;
    border: 1px solid var(--line-strong);
  }

  .hero-copy {
    width: 66%;
  }

  .credibility-layout,
  .benefits-layout {
    grid-template-columns: 1fr;
  }

  /* Em telas estreitas a quebra controlada da headline atrapalha o fluxo natural */
  .explorer-heading br {
    display: none;
  }

  /* Explorador em coluna: recursos viram trilho horizontal rolavel acima da tela.
     minmax(0, 1fr) impede o trilho rolavel de estourar a largura da coluna. */
  .explorer-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .explorer-rail div {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .explorer-rail button {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .explorer-rail button[aria-pressed="true"] {
    border-bottom-color: var(--magenta);
  }

  .explorer-rail button small {
    display: none;
  }

  .explorer-steps {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .credibility-facts {
    max-width: 720px;
  }

  .benefits-copy {
    max-width: 720px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  .section {
    padding-block: clamp(48px, 12vw, 56px);
  }

  h1 {
    font-size: clamp(42px, 12vw, 58px);
  }

  h2 {
    font-size: clamp(34px, 9vw, 44px);
  }

  .hero {
    min-height: 740px;
  }

  .hero-photo {
    object-position: 68% center;
  }

  /* Texto na base e escurecimento invertido: o rosto do médico fica no topo da foto
     e precisa permanecer visível; o contraste do texto vem da faixa escura inferior. */
  .hero-overlay {
    background: linear-gradient(0deg, #19174f 0%, rgba(25, 23, 79, 0.95) 30%, rgba(25, 23, 79, 0.55) 58%, rgba(25, 23, 79, 0.14) 82%, rgba(25, 23, 79, 0) 100%);
  }

  .hero-inner {
    align-items: flex-end;
  }

  .hero-copy {
    width: 100%;
    padding-top: 300px;
    padding-bottom: 56px;
  }

  .hero-copy > p {
    max-width: 520px;
    font-size: 20px;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-item,
  .proof-item:first-child,
  .proof-item:last-child {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .proof-item:last-child {
    border-bottom: 0;
  }

  .plans-grid,
  .audience-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card:last-child {
    grid-column: auto;
  }

  .plan-card {
    padding: 30px 24px;
  }

  .price strong {
    font-size: 68px;
  }

  .price-premium strong {
    font-size: 58px;
  }

  .explorer-clip {
    width: min(78vw, 340px);
  }

  .explorer-steps button {
    padding: 8px 13px;
    font-size: 13px;
  }

  .audience-card {
    min-height: 520px;
  }

  .credibility-copy h2 {
    font-size: clamp(36px, 10vw, 48px);
  }

  .credibility-editors {
    flex-wrap: wrap;
  }

  .benefit-card {
    min-width: min(82vw, 290px);
  }

  .final-cta-inner {
    padding-inline: 24px;
  }

  .footer-grid {
    padding-top: 44px;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-brand {
    grid-row: auto;
  }

  .footer-column {
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }

  .footer-bottom {
    padding-block: 24px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 460px) {
  .hero-actions,
  .header-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-actions .hero-link {
    justify-content: center;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .explorer-dot::after {
    animation: none;
  }
}

/* Aviso de conteudo provisorio (dados pendentes de confirmacao do cliente) */
.provisional-note {
  max-width: 720px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--berry-140);
  background: var(--berry-160);
  color: var(--text-muted);
  font-size: 14.5px;
}

/* Tabela comparativa Free x Premium (pagina de planos) */
.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15.5px;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: middle;
}

.compare-table thead th {
  color: var(--berry-10);
  background: var(--berry-160);
}

.compare-table tbody th {
  font-weight: 400;
  color: var(--text-body);
}

.compare-table td {
  width: 130px;
  text-align: center;
  color: var(--text-muted);
}

.compare-table .check {
  color: var(--magenta);
  font-weight: 700;
}

/* Faixa do plano Corporativo (pagina de planos) */
.corporate-band .corporate-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 36px 40px;
  border: 1px solid var(--line);
  background: var(--berry-160);
}

.corporate-band h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.4vw, 30px);
}

.corporate-band p {
  max-width: 640px;
  margin: 0;
  color: var(--text-muted);
}

.corporate-band .button {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .corporate-band .corporate-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
  }
}

/* Busca do hub do bulario */
.hub-search {
  max-width: 560px;
}

.hub-search label {
  display: block;
  margin-bottom: 8px;
  color: var(--berry-10);
  font-size: 15px;
  font-weight: 700;
}

.hub-search input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--white);
  color: var(--text-body);
  font: inherit;
  font-size: 16px;
}

.hub-search input:focus-visible {
  outline: 2px solid var(--berry-50);
  outline-offset: 1px;
  border-color: var(--berry-50);
}

.hub-search [role="status"] {
  min-height: 22px;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 14.5px;
}

/* Navegacao alfabetica do bulario */
.az-nav {
  margin-top: 26px;
}

.az-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.az-nav a {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  color: var(--berry-10);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.az-nav a:hover,
.az-nav a:focus-visible {
  border-color: var(--magenta);
  color: var(--magenta);
  background: var(--white);
}

/* Indice A-Z do bulario */
.drug-group {
  margin-top: 40px;
}

.drug-group h3 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--berry-10);
  font-size: 24px;
}

.drug-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 240px 4;
  column-gap: 40px;
}

.drug-list li {
  margin-bottom: 10px;
  break-inside: avoid;
}

.drug-list a {
  color: var(--text-body);
  font-size: 15.5px;
  text-decoration: none;
}

.drug-list a:hover,
.drug-list a:focus-visible {
  color: var(--magenta);
  text-decoration: underline;
}

.drug-empty {
  margin-top: 32px;
  color: var(--text-muted);
}

/* Pagina de erro 404 */
.error-hero {
  padding-bottom: var(--section-space);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Nota de versao dos documentos legais */
.doc-version {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 14.5px;
}

/* Formulario OneTrust do pedido do titular */
.titular-form {
  margin: 28px 0;
  border: 1px solid var(--line);
  background: var(--white);
}

.titular-form iframe {
  display: block;
  width: 100%;
  height: 1200px;
  border: 0;
}

/* Pagina de medicamento (template T3) */
.drug-topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.drug-topic {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--white);
}

.drug-topic .topic-label {
  display: block;
  margin-bottom: 12px;
  color: var(--berry-70);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drug-topic h3 {
  margin: 0 0 8px;
  font-size: 19px;
  color: var(--berry-10);
}

.drug-topic p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

@media (max-width: 720px) {
  .drug-topics {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Reforma pos-feedback do cliente (24-26/08/2026), promovida da area /preview/
   em 26/08/2026. Rodadas R1-R7 e glow-ups; historico em REVISAO-PREVIEW.md.
   As regras abaixo sobrescrevem de proposito algumas das secoes acima (cascata).
   ========================================================================== */

/* R1 — o corte inferior dos mockups (assets fatiados) se dissolve no fundo Berry */
.explorer-clip {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 98%);
}

/* R2/R5 — cards de planos (hierarquia Free × Premium, tecnicas da pagina de
   precos do Canva adaptadas a marca): card recomendado escuro e maior, badge
   sobre a borda, destaque de uso da IA por plano e ancora de preco. */
.plan-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--magenta);
  color: var(--white);
  border-radius: var(--radius-chip);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(206, 0, 88, 0.35);
}

/* Premium invertido para o Berry escuro do manual — mesma familia das faixas
   do explorador e da credibilidade; o Free permanece branco */
.plan-card-premium {
  background: linear-gradient(180deg, var(--berry-20) 0%, var(--berry-10) 100%);
  border-color: rgba(206, 0, 88, 0.55);
}

.plan-card-premium h3,
.plan-card-premium .price,
.plan-card-premium .price span,
.plan-card-premium .feature-intro {
  color: var(--white);
}

.plan-card-premium .plan-top > p:not(.price, .price-note) {
  color: rgba(255, 255, 255, 0.82);
}

.plan-card-premium .price-note {
  color: rgba(255, 255, 255, 0.72);
}

.plan-card-premium .feature-intro {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.plan-card-premium .feature-list li {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

.plan-card-premium .feature-list li::before {
  background: var(--magenta);
  border-color: transparent;
  color: var(--white);
}

/* Cards do mesmo tamanho (pedido de 25/08): o destaque do Premium fica por
   conta do fundo escuro, do badge e da sombra — sem diferenca de altura */
@media (min-width: 901px) {
  .plan-card-premium {
    z-index: 1;
    box-shadow: 0 28px 64px rgba(25, 23, 79, 0.28);
  }
}

/* Ancora de preco sob o valor anual */
.plan-price-hint {
  margin: -16px 0 22px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
}

/* Destaque do uso da IA por plano (equivalente ao bloco "limite de uso da IA"
   da pagina do Canva): o diferencial nº 1 comparavel de relance */
.plan-ia {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--berry-160);
  border-left: 3px solid var(--berry-140);
  color: var(--berry-10);
  font-size: 15px;
}

.plan-ia .plan-ia-spark {
  color: var(--magenta);
  font-style: normal;
  font-size: 16px;
}

.plan-card-premium .plan-ia {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--magenta);
  color: var(--white);
}

/* Ajuste fino 25/08: o titulo "Planos para cada momento da sua rotina" deve
   caber em uma linha no desktop — solta o max-width de 940px do cabecalho e
   modera o teto do h2 (56 -> 50px) so nesta secao */
.plans .section-heading {
  max-width: none;
}

.plans .section-heading h2 {
  font-size: clamp(36px, 3.6vw, 50px);
}

/* R5.1 — toggle mensal/anual (padrao Canva); "Economize 40%" deriva dos precos
   exibidos (12 x 49,90 = 598,80 vs 359,90/ano) */
.plans-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 38px;
}

.plans-toggle-group {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--berry-150);
  border-radius: var(--radius-cta);
}

.plans-toggle-group button {
  padding: 9px 24px;
  border: 0;
  border-radius: var(--radius-cta);
  background: transparent;
  color: var(--berry-20);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}

.plans-toggle-group button.is-active {
  background: var(--white);
  color: var(--berry-10);
  box-shadow: 0 4px 14px rgba(25, 23, 79, 0.14);
}

.plans-toggle-save {
  padding: 6px 14px;
  background: rgba(206, 0, 88, 0.1);
  border-radius: var(--radius-chip);
  color: var(--magenta);
  font-size: 12.5px;
  font-weight: 700;
}

/* O atributo hidden precisa vencer o display:flex de .price */
[data-price-anual][hidden],
[data-price-mensal][hidden] {
  display: none !important;
}

/* R5.1 — icones clinicos por recurso nas listas dos cards (outline, na linha
   da iconografia Elsie); substituem o quadradinho de check generico */
.feature-list-icons li {
  padding-left: 36px;
}

.feature-list-icons li::before {
  content: none;
}

.feature-list-icons li svg {
  position: absolute;
  top: 12px;
  left: 0;
  width: 22px;
  height: 22px;
  color: var(--magenta);
}

.plan-card-premium .feature-list-icons li svg {
  color: var(--white);
}

/* ============ R7 — "Rodada de brilho" (25/08): picos de intensidade sem
   violar as restricoes do cliente (sem ondas/diagonais, brancos planos).
   Referencias: WeMeds (numeros display), LP live (palavra-acento, retratos
   com anel), OpenEvidence (autoridade no topo). ============ */

/* 7.1 — palavra-acento magenta (usar SO em secoes de fundo claro; no Berry
   escuro o magenta nao tem contraste) */
.hl {
  color: var(--magenta);
}

/* 7.2 — CTA final: caixa escura (a pagina fecha com autoridade) */
.final-cta-inner {
  background: linear-gradient(165deg, var(--berry-10) 0%, var(--berry-30) 100%);
  border-color: transparent;
}

.final-cta h2 {
  color: var(--white);
}

.final-cta-apps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.final-cta-apps img {
  display: block;
  width: auto;
  height: 52px;
}

/* 7.3 — faixa de prova com mais respiro (a la WeMeds). Os numeros display e o
   glifo "sem sinal" sairam em 01/09, quando as tres colunas viraram uma formula so. */
.proof {
  padding-block: 44px;
}

.proof-item .proof-label {
  grid-area: label;
  align-self: start;
  margin: 0;
  color: var(--text-muted);
  font-size: 15.5px;
}

/* 7.4 — depoimentos: fundo tint, aspas display e retrato com anel magenta */
.testimonials {
  background: var(--berry-160);
}

.testimonial-card {
  background: var(--white);
}

.testimonial-card blockquote::before {
  content: "\201C";
  display: block;
  margin-bottom: 2px;
  color: var(--magenta);
  font-size: 58px;
  font-weight: 700;
  line-height: 0.7;
}

.testimonial-card figcaption img {
  width: 64px;
  height: 64px;
  border: 3px solid var(--magenta);
}

/* 7.5 — micro-interacoes: cards com elevacao no hover (reduced-motion fica parado) */
@media (prefers-reduced-motion: no-preference) {
  .plan-card,
  .testimonial-card,
  .benefit-card {
    transition: transform var(--ease), box-shadow var(--ease);
  }

  .plan-card:hover,
  .testimonial-card:hover,
  .benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }

  .journey-moment-card img {
    transition: transform 500ms ease;
  }

  .journey-moment-card:hover img,
  .journey-moment-card:focus-visible img {
    transform: scale(1.05);
  }
}

/* 7.6 — chips de jornada viram cards com foto (assets journey/ existentes) */
.journey-band {
  padding-block: 44px;
}

.journey-cards-label {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.journey-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Especificidade acima de ".journey-band a" (styles.css), que estiliza os
   antigos chips-pill (radius 999, padding, borda, hover magenta) */
.journey-band .journey-moment-card {
  position: relative;
  display: block;
  height: 260px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  font-size: 17px;
}

.journey-band .journey-moment-card:hover,
.journey-band .journey-moment-card:focus-visible {
  border-color: transparent;
}

/* 18% desce a janela de corte: da respiro sobre as cabecas e pula os cantos
   arredondados "assados" nos assets da v1 (topo das fotos) */
.journey-band .journey-moment-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.journey-band .journey-moment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(25, 23, 79, 0) 45%, rgba(25, 23, 79, 0.85) 100%);
}

.journey-band .journey-moment-card span {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 16px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
}

.journey-band .journey-moment-card span svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .journey-cards {
    grid-template-columns: 1fr;
  }

  .journey-moment-card {
    height: 180px;
  }
}

/* 7.7 — beneficios com cor: desconto como protagonista (logo permanece em
   fundo branco para nao arriscar logos com fundo chapado) */
.benefit-card {
  border-left: 3px solid var(--magenta);
}

.benefit-card p strong {
  display: block;
  color: var(--magenta);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* R6 — secao de jornadas em para-quem/ (portada da v1, que reconstruiu a
   estrutura do live: abas por momento + objetivos + ferramentas). Adaptacoes a
   linguagem v2: cantos retos nos blocos estruturais, var(--ease) e --text-body. */
.journey {
  background: var(--berry-160);
}

.journey .icon {
  display: inline-block;
  flex: none;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.journey-tabs {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--berry-140);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  grid-template-columns: repeat(4, 1fr);
}

.journey-tabs button {
  position: relative;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  border: 0;
  border-right: 1px solid var(--berry-150);
  color: var(--berry-10);
  background: var(--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
}

.journey-tabs button:last-child {
  border-right: 0;
}

.journey-tabs button::after {
  position: absolute;
  right: 24%;
  bottom: 0;
  left: 24%;
  height: 3px;
  content: "";
  background: var(--magenta);
  transform: scaleX(0);
  transition: transform var(--ease);
}

.journey-tabs button[aria-selected="true"] {
  color: var(--magenta);
  background: var(--berry-160);
}

.journey-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.journey-tabs button .icon {
  color: var(--berry-100);
  transition: color var(--ease);
}

.journey-tabs button[aria-selected="true"] .icon {
  color: var(--magenta);
}

.journey-panels {
  margin-top: 30px;
}

/* Com JS, os paineis ocupam a mesma celula de grid: a altura do bloco e a do
   painel mais alto e nao muda ao trocar de aba. Sem JS, empilham normalmente. */
.js .journey-panels {
  display: grid;
}

.js .journey-panel {
  grid-area: 1 / 1;
  transition: opacity 320ms ease;
}

.js .journey-panel:not(.is-active) {
  visibility: hidden;
  opacity: 0;
}

.journey-intro {
  max-width: 900px;
  margin-bottom: 20px;
  color: var(--berry-10);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.45;
}

.journey-card {
  position: relative;
  display: grid;
  min-height: 420px;
  overflow: hidden;
  border-left: 4px solid var(--magenta);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  grid-template-columns: 1.1fr 0.9fr;
}

.journey-panel-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3vw, 44px);
}

.journey-kicker {
  margin-bottom: 16px;
  color: var(--berry-100);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.objective + .objective {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--berry-150);
}

.objective-head {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;
  border: 0;
  gap: 14px;
  color: var(--berry-10);
  background: transparent;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.objective-chevron {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--berry-140);
  border-radius: 50%;
  transition: transform var(--ease);
}

.objective-chevron::after {
  position: absolute;
  top: 7px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
  content: "";
  transform: rotate(45deg);
}

.objective.is-open .objective-chevron {
  transform: rotate(180deg);
}

.objective-body {
  padding-top: 14px;
}

.js .objective:not(.is-open) .objective-body {
  display: none;
}

.tools-label {
  margin-bottom: 10px;
  color: var(--text-body);
  font-size: 0.82rem;
  font-weight: 700;
}

.tool-switcher {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.tool-card {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--berry-150);
  border-left: 3px solid var(--magenta);
  background: var(--berry-160);
}

.js .tool-card:not(.is-open) {
  flex: 0 0 122px;
}

.js .tool-card:not(.is-open) .tool-card-head {
  height: 100%;
  align-items: flex-start;
  flex-direction: column-reverse;
  justify-content: space-between;
  font-size: 0.82rem;
}

.js .tool-card:not(.is-open) .tool-card-plus {
  align-self: flex-end;
}

.tool-card-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 0;
  gap: 12px;
  color: var(--berry-10);
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.tool-card-plus {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.tool-card-plus::before,
.tool-card-plus::after {
  position: absolute;
  content: "";
  background: var(--magenta);
  transition: transform var(--ease);
}

.tool-card-plus::before {
  top: 6px;
  right: 0;
  left: 0;
  height: 2px;
}

.tool-card-plus::after {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
}

.tool-card.is-open .tool-card-plus::after {
  transform: scaleY(0);
}

.tool-card-body {
  display: grid;
  align-items: center;
  padding: 0 16px 14px;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 16px;
}

.tool-card-body p {
  margin: 0;
  color: var(--text-body);
  font-size: 0.88rem;
}

/* Capturas nativas de 418x210: exibir no maximo a metade para nao serrilhar */
.tool-card-body img {
  width: 100%;
  max-width: 209px;
  border: 1px solid var(--berry-140);
  background: var(--white);
}

.js .tool-card:not(.is-open) .tool-card-body {
  display: none;
}

.journey-media {
  position: relative;
  display: flex;
  min-height: 100%;
  overflow: hidden;
  flex-direction: column;
}

/* 10/09 (call de 08/09) — nas internas a coluna da jornada mostra o produto, nao
   a pessoa: a foto que estava aqui repetia o hero da propria persona. Mesmo
   enquadramento de celular do explorador da home, adaptado ao fundo claro. */
.journey-product {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: clamp(24px, 3vw, 40px) 20px;
  background: var(--berry-160);
}

.journey-product-frame {
  width: min(70%, 300px);
  padding: 8px;
  border-radius: 32px;
  background: #17111a;
  box-shadow: var(--shadow-md);
}

.journey-product-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
  background: var(--white);
}

/* 15/09 (call de 08/09, item D2) — as capturas do produto na versao navegador chegaram e o
   slot troca o celular pelo notebook, que e o que o documento escrito do cliente pede para
   equilibrar os dois pontos de contato. A moldura nao e nova: sao as mesmas classes
   `.ia-laptop*` da secao de credibilidade da home, para existir um unico desenho de
   notebook no site. Aqui mudam tres coisas. */
.journey-product-desktop .ia-laptop {
  /* a coluna da jornada e ~45% do card (grid 1.1fr / 0.9fr), bem mais estreita que os
     740px que o notebook ocupa na home */
  width: min(100%, 440px);
}

.journey-product-desktop .ia-laptop-base {
  /* a base transborda a moldura de proposito; o recuo acompanha a largura menor, na mesma
     proporcao da home (24/740 = 14/440), senao o `overflow: hidden` da coluna corta */
  margin: 0 -14px;
}

.journey-product-desktop .ia-laptop-screen {
  /* a proporcao segue o recorte real da captura (1600x942, ja sem a barra do navegador),
     e nao os 1600x966 do video da home; assim a tela preenche sem tarja nem corte */
  aspect-ratio: 1600 / 942;
}

.ia-laptop-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--white);
}

@media (max-width: 900px) {
  .journey-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    scroll-snap-type: x mandatory;
  }

  .journey-tabs button {
    min-height: 68px;
    scroll-snap-align: start;
  }

  .journey-card {
    grid-template-columns: 1fr;
  }

  .journey-panel-copy {
    padding: 24px 20px 30px;
  }

  .journey-intro {
    font-size: 1rem;
  }

  .tool-switcher {
    flex-direction: column;
  }

  .js .tool-card:not(.is-open) {
    flex: none;
  }

  .js .tool-card:not(.is-open) .tool-card-head {
    height: auto;
    align-items: center;
    flex-direction: row;
  }

  .js .tool-card:not(.is-open) .tool-card-plus {
    align-self: center;
  }

  .tool-card-body {
    grid-template-columns: 1fr;
  }
}

.plan-more {
  margin: -18px 0 30px;
  padding-left: 34px;
  color: var(--text-muted);
  font-size: 15px;
}

/* Ajuste fino 25/08: o link do comparativo virou botao outline do padrao da
   marca — so o alinhamento vive aqui */
.plans-compare-link {
  margin: 38px 0 0;
  text-align: center;
}

/* Ajuste fino 25/08: transicao suave hero -> faixa de numeros. Degrade
   vertical reto (sem onda/diagonal, conforme preferencia do cliente)
   dissolvendo a cena na cor do topo da faixa (berry-150). */
.hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 230px;
  background: linear-gradient(
    180deg,
    rgba(229, 229, 241, 0) 0%,
    rgba(229, 229, 241, 0.18) 35%,
    rgba(229, 229, 241, 0.55) 68%,
    var(--berry-150) 100%
  );
  pointer-events: none;
}

/* Ajuste fino 25/08: "Você decide. / Nossa IA fundamenta" em exatamente duas
   linhas — quebra controlada no HTML e teto do h2 reduzido (62 -> 48px) para
   a segunda linha caber inteira na coluna */
.credibility-copy h2 {
  font-size: clamp(36px, 3.4vw, 48px);
}

/* R3 — lockup em destaque acima do título do hero (feedback Fold 1);
   variante dark (Afya magenta + WHITEBOOK branco), mínimo digital de 250px */

/* R3 — demo animada do WB Assist na seção de credibilidade (feedback Fold 4).
   Moldura de celular 100% CSS (técnica do mockup iClinic, re-skin Afya);
   conversa reaproveita o caso de apendicite aprovado do explorador. */
.ia-demo {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.ia-phone {
  position: relative;
  width: min(100%, 290px);
  padding: 10px;
  background: linear-gradient(180deg, #23252b, #101216);
  border-radius: 42px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.35);
}

.ia-phone::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 2;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #05060a;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.3);
}

.ia-screen {
  display: flex;
  height: 560px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f3fb 55%, #f3e9f5 100%);
}

.ia-app-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px 12px;
  color: var(--berry-10);
  font-size: 15px;
  font-weight: 700;
}

.ia-app-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: rgba(206, 0, 88, 0.12);
  color: var(--magenta);
  font-size: 14px;
  font-style: normal;
}

.ia-chat {
  position: relative; /* ancora o offsetTop das mensagens para a rolagem do script.js */
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 8px 14px;
  overflow: hidden;
}

.ia-msg,
.ia-typing,
.ia-evidence {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 450ms ease, transform 450ms ease;
}

.ia-msg.is-shown,
.ia-typing.is-shown,
.ia-evidence.is-shown {
  opacity: 1;
  transform: none;
}

.ia-msg {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  color: #333333;
  font-size: 13.5px;
  line-height: 1.45;
}

.ia-msg strong {
  color: var(--berry-10);
}

.ia-msg-user {
  align-self: flex-end;
  background: #e9e7ef;
  border-bottom-right-radius: 4px;
}

.ia-msg-assist {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid rgba(25, 23, 79, 0.08);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 14px rgba(25, 23, 79, 0.05);
}

.ia-typing {
  display: flex;
  align-self: flex-start;
  gap: 4px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid rgba(25, 23, 79, 0.08);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}

.ia-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9b6cd;
  animation: ia-bounce 1s infinite;
}

.ia-typing i:nth-child(2) { animation-delay: 150ms; }
.ia-typing i:nth-child(3) { animation-delay: 300ms; }

@keyframes ia-bounce {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(-4px); }
}

.ia-evidence {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-chip);
  background: rgba(206, 0, 88, 0.1);
  color: var(--magenta);
  font-size: 12px;
  font-weight: 700;
}

.ia-evidence svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.ia-input {
  margin: 0 14px 16px;
  padding: 12px 16px;
  border: 1px solid rgba(25, 23, 79, 0.1);
  border-radius: var(--radius-chip);
  background: #ffffff;
  color: rgba(25, 23, 79, 0.45);
  font-size: 13px;
}

/* R3.1 — moldura de notebook (técnica do mockup interativo do iClinic, re-skin Afya).
   O notebook aparece de 641px para cima; o celular assume no mobile (≤640px),
   onde uma tela 16:10 ficaria pequena demais para a conversa. */
.ia-laptop {
  width: min(100%, 740px);
}

.ia-laptop-frame {
  position: relative;
  padding: 14px 14px 18px;
  background: linear-gradient(180deg, #23252b, #101216);
  border-radius: 14px 14px 5px 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.35);
}

.ia-laptop-camera {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #05060a;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.3);
}

.ia-laptop-screen {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1600 / 966;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f3fb 55%, #f3e9f5 100%);
}

.ia-laptop-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f7f3fb;
}

.ia-laptop-base {
  position: relative;
  height: 14px;
  margin: 0 -24px;
  background: linear-gradient(180deg, #d7dbe0, #aab0b8);
  border-radius: 0 0 10px 10px;
}

.ia-laptop-notch {
  position: absolute;
  top: 0;
  left: 50%;
  width: 86px;
  height: 6px;
  transform: translateX(-50%);
  background: #aab0b8;
  border-radius: 0 0 8px 8px;
}

.ia-laptop-shadow {
  height: 22px;
  margin-top: 6px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
}

/* Barra da "janela" no topo da tela do notebook */
.ia-window-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid rgba(25, 23, 79, 0.06);
  color: var(--berry-10);
  font-size: 14px;
  font-weight: 700;
}

.ia-window-dots {
  position: absolute;
  top: 50%;
  left: 16px;
  display: flex;
  gap: 5px;
  transform: translateY(-50%);
}

.ia-window-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(25, 23, 79, 0.16);
}

/* Conversa centralizada em coluna, como um web app */
.ia-laptop .ia-chat {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 16px;
}

.ia-laptop .ia-msg {
  max-width: 80%;
}

.ia-laptop .ia-input {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 10px;
}

/* Alternância notebook × celular */
.ia-phone { display: none; }

@media (max-width: 640px) {
  .ia-phone { display: block; }
  .ia-laptop { display: none; }
}

/* Encaixe da demo na grade da credibilidade:
   ≥1160px: duas colunas (copy | notebook) com fatos em faixa horizontal abaixo;
   901–1159px: coluna única com fatos em faixa horizontal;
   ≤900px: coluna única do site (copy, demo, fatos empilhados). */
@media (min-width: 901px) {
  .credibility-facts {
    grid-column: 1 / -1;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 28px;
    margin-top: clamp(10px, 2vw, 26px);
  }

  .credibility-editors {
    grid-column: 1 / -1;
  }
}

@media (min-width: 901px) and (max-width: 1159px) {
  .credibility-layout {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1160px) {
  .credibility-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(600px, 1.2fr);
    gap: clamp(40px, 4.5vw, 80px);
  }
}
.compare-group {
  margin-top: 38px;
}

.compare-group > h3 {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
  color: var(--berry-10);
}

.compare-group > p {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 15.5px;
}

.compare-table td {
  width: 190px;
  font-size: 15px;
}

.compare-table td strong {
  color: var(--berry-10);
}

.compare-table td .check {
  margin-right: 6px;
}

/* 25/08 — "também no navegador do computador" (insumo do vídeo da versão desktop):
   sublinha no card Consultório da home e nota sob a foto da aba Consultório */
.journey-band .journey-moment-card .journey-moment-sub {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 42px;
  left: 20px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.journey-device-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 18px 22px;
  background: var(--berry-10);
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* acento em branco: nunca magenta sobre Berry (regra de contraste do projeto) */
.journey-device-note strong {
  color: var(--white);
  font-weight: 700;
}

.journey-device-note svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--white);
}

/* ==========================================================================
   Fase 0 (26/08/2026) — paginas da lista do cliente: jornadas como paginas
   proprias (para-quem/*), Calculadoras e ferramentas, Prescricao; header com
   grupos "Para quem" e "Recursos"; hero interno claro (sem imagem). Registro em
   design/registro-26-08-2026.md.
   ========================================================================== */

/* --- Hero interno claro: tipografico, sem imagem (decisao de 26/08). Substitui
   o retangulo Berry das paginas internas; o acento vem da palavra magenta (.hl) --- */
.page-hero {
  padding-block: clamp(56px, 7vw, 96px);
  background: linear-gradient(180deg, var(--berry-150) 0%, var(--berry-160) 100%);
}

.page-eyebrow {
  color: var(--magenta);
}

.page-hero h1 {
  max-width: 900px;
  color: var(--berry-10);
}

.page-hero p {
  color: var(--text-muted);
}

.page-hero .hl {
  color: var(--magenta);
}

/* A faixa de numeros que segue o hero fica branca (o hero ja e a faixa tint) */
.page-stats {
  padding-block: 44px 8px;
  background: var(--white);
}

/* --- Header: grupos com dropdown (Para quem, Recursos) --- */
.nav-group {
  position: relative;
}

.nav-group-toggle {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--berry-10);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.nav-group-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ease);
}

.nav-group:hover .nav-group-toggle svg,
.nav-group.is-open .nav-group-toggle svg {
  transform: rotate(180deg);
}

.nav-group-toggle::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--magenta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}

.nav-group:hover .nav-group-toggle::after,
.nav-group.is-open .nav-group-toggle::after,
.nav-group-toggle:focus-visible::after,
.nav-group.is-current .nav-group-toggle::after,
.main-nav > a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: -16px;
  z-index: 5;
  min-width: 300px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(25, 23, 79, 0.14);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}

/* Ponte invisivel: o ponteiro atravessa o vao entre o botao e o painel sem fechar */
.nav-dropdown::before {
  position: absolute;
  right: 0;
  left: 0;
  top: -10px;
  height: 10px;
  content: "";
}

.nav-group:hover .nav-dropdown,
.nav-group.is-open .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.main-nav .nav-dropdown a {
  display: flex;
  min-height: 0;
  padding: 10px 12px;
  flex-direction: column;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.3;
}

.main-nav .nav-dropdown a::after {
  display: none;
}

.main-nav .nav-dropdown a:hover,
.main-nav .nav-dropdown a:focus-visible {
  background: var(--berry-160);
}

.main-nav .nav-dropdown a[aria-current="page"] {
  color: var(--magenta);
}

.nav-dropdown a small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

@media (max-width: 900px) {
  .header-menu {
    overflow-y: auto;
  }

  .nav-group {
    border-bottom: 1px solid var(--line);
  }

  .nav-group-toggle {
    width: 100%;
    min-height: 58px;
    padding: 14px 6px;
    justify-content: space-between;
    font-size: 18px;
  }

  .nav-group-toggle::after {
    display: none;
  }

  .nav-group:hover .nav-group-toggle svg {
    transform: none;
  }

  .nav-group.is-open .nav-group-toggle svg {
    transform: rotate(180deg);
  }

  /* No menu movel o grupo vira acordeao: so abre no toque */
  .nav-dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 10px;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav-group:hover .nav-dropdown,
  .nav-group:focus-within .nav-dropdown {
    display: none;
  }

  .nav-group.is-open .nav-dropdown {
    display: block;
  }

  .nav-dropdown::before {
    display: none;
  }

  .main-nav .nav-dropdown a {
    min-height: 44px;
    padding: 10px 6px 10px 22px;
    border-bottom: 0;
    font-size: 16px;
  }
}

/* --- Hub para-quem/: tres momentos --- */
.moments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.moment-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border-top: 4px solid var(--magenta);
  background: var(--white);
  color: inherit;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease);
}

.moment-card:hover,
.moment-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(25, 23, 79, 0.14);
}

.moment-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 18%;
}

.moment-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 28px;
}

.moment-card h2 {
  margin: 0;
  color: var(--berry-10);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.moment-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.5;
}

.moment-card .moment-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--magenta);
  font-weight: 700;
}

.moment-card .moment-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ease);
}

.moment-card:hover .moment-link svg {
  transform: translateX(4px);
}

/* --- Paginas de recurso: cards, grupos, passos e demos estaticas --- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.resource-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  border-left: 3px solid var(--magenta);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease);
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(25, 23, 79, 0.12);
}

.resource-card h3 {
  margin: 0 0 8px;
  color: var(--berry-10);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.resource-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.5;
}

/* Capturas nativas de 418x210: no maximo a metade para nao serrilhar */
.resource-card img {
  width: 100%;
  max-width: 209px;
  height: auto;
  margin-top: auto;
  padding-top: 18px;
}

/* Certificadoras de assinatura em nuvem, dentro do card de Prescricao Digital. */
.signature-providers {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.resource-card .signature-providers p {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.signature-providers ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signature-providers li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--berry-10);
  font-size: 14px;
  font-weight: 600;
}

.resource-card .signature-providers img {
  width: 28px;
  max-width: none;
  height: 28px;
  margin-top: 0;
  padding-top: 0;
  border-radius: 6px;
}

.plan-tag {
  display: inline-block;
  width: max-content;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: var(--berry-160);
  color: var(--berry-10);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-tag-premium {
  background: var(--berry-10);
  color: var(--white);
}

.group-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.group-chip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--white);
  color: var(--berry-10);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  line-height: 1.3;
}

.group-chip svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--magenta);
}

.group-chip small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 400;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: step;
}

.steps-grid.steps-stack {
  grid-template-columns: 1fr;
  gap: 14px;
}

.step-card {
  position: relative;
  padding: 24px 26px;
  background: var(--berry-160);
}

.step-card::before {
  display: block;
  margin-bottom: 8px;
  color: var(--magenta);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
}

.step-card h3 {
  margin: 0 0 6px;
  color: var(--berry-10);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.step-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.5;
}

.demo-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.demo-split .section-heading {
  margin-bottom: 28px;
}

/* Demos estaticas em HTML/CSS (sem tela do app; entram as capturas oficiais
   quando chegarem): resultado de calculadora e receita */
.calc-demo,
.rx-demo {
  max-width: 520px;
  margin-inline: auto;
  padding: 26px 28px 28px;
  border-top: 4px solid var(--magenta);
  background: var(--white);
  box-shadow: 0 28px 64px rgba(25, 23, 79, 0.14);
}

.demo-title {
  margin: 0 0 16px;
  color: var(--magenta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calc-demo dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin: 0 0 18px;
}

.calc-demo dt {
  color: var(--text-muted);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calc-demo dd {
  margin: 2px 0 0;
  color: var(--berry-10);
  font-size: 17px;
  font-weight: 700;
}

.calc-demo-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--berry-160);
}

.calc-demo-result small {
  color: var(--text-muted);
  font-size: 14px;
}

.calc-demo-result strong {
  color: var(--berry-10);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.demo-tag {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 12px;
  background: var(--berry-10);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

.demo-tag svg {
  width: 16px;
  height: 16px;
}

.demo-ref {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.rx-demo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.rx-demo-head strong {
  color: var(--berry-10);
}

.rx-demo-head span {
  color: var(--text-muted);
  font-size: 13.5px;
}

.rx-demo ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rx-demo li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--berry-10);
  font-size: 15px;
  line-height: 1.4;
}

.rx-demo li i {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  background: var(--berry-160);
  color: var(--magenta);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.rx-demo li small {
  display: block;
  color: var(--text-muted);
  font-size: 13.5px;
}

.rx-demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.rx-demo-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--berry-10);
  font-size: 13.5px;
  font-weight: 700;
}

.rx-demo-check svg {
  width: 18px;
  height: 18px;
  color: var(--magenta);
}

.rx-demo-sign {
  display: inline-flex;
  padding: 10px 16px;
  background: var(--magenta);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .moment-card,
  .resource-card,
  .moment-card .moment-link svg,
  .nav-group-toggle svg {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .group-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .moments-grid,
  .resource-grid,
  .steps-grid {
    grid-template-columns: 1fr 1fr;
  }

  .steps-grid.steps-stack {
    grid-template-columns: 1fr;
  }

  .group-grid {
    grid-template-columns: 1fr 1fr;
  }

  .demo-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .moments-grid,
  .resource-grid,
  .steps-grid,
  .group-grid {
    grid-template-columns: 1fr;
  }

  .calc-demo,
  .rx-demo {
    padding: 22px 20px 24px;
  }
}

/* Paragrafo opcional do CTA final (paginas de recurso): claro sobre o Berry */
.final-cta-inner p {
  max-width: 640px;
  margin: -6px auto 22px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
}

/* Paginas de jornada (para-quem/*): a secao fica branca — o hero ja e a faixa tint
   e o card tem sombra propria (integridade entre secoes) */
.journey.section {
  background: var(--white);
}

/* ============================================================================
   Explorador por contexto, faixa editorial de jornada e ajustes visuais
   promovidos da previa em 28/08/2026. Origem: previa/previa.css (rodada de
   26-27/08 com os assets do cliente). A tarja de homologacao e o gate
   .preview-mode foram removidos na promocao; os nomes .preview-* foram
   mantidos para limitar o diff desta troca.
   ============================================================================ */

.journey-moment-card img,
.moment-card img {
  object-position: center;
}

.preview-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Explorador exclusivo da previa: a tela real e o elemento dominante. */
.explorer {
  background: linear-gradient(165deg, var(--berry-10) 0%, var(--berry-20) 100%);
}

.explorer-heading {
  margin-bottom: clamp(28px, 3.5vw, 46px);
}

.preview-explorer {
  display: grid;
  grid-template-columns: minmax(205px, 0.82fr) minmax(310px, 1.16fr) minmax(190px, 0.72fr);
  grid-template-areas:
    "personas screen resources"
    "detail screen resources";
  align-items: stretch;
  gap: 30px clamp(28px, 3vw, 48px);
}

.preview-persona-tabs {
  grid-area: personas;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(238, 218, 244, 0.28);
}

.preview-persona-tabs button {
  display: flex;
  min-height: 108px;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 20px;
  text-align: left;
  border: 1px solid rgba(238, 218, 244, 0.46);
  border-radius: 22px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms ease;
}

.preview-persona-tabs button:hover {
  border-color: rgba(255, 255, 255, 0.82);
  color: #fff;
  transform: translateY(-1px);
}

.preview-persona-tabs button[aria-selected="true"] {
  border-color: #fff;
  background: #fff;
  color: var(--berry-10);
}

.preview-persona-tabs img {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  object-fit: cover;
}

.preview-persona-tabs button[aria-selected="true"] img {
  border-color: var(--berry-140);
}

.preview-resource-nav {
  position: relative;
  grid-area: resources;
  padding-top: 16px;
  border-top: 1px solid rgba(238, 218, 244, 0.28);
}

.preview-resource-tabs {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(238, 218, 244, 0.22);
  border-radius: 18px;
  overflow: hidden;
}

.preview-resource-tabs button {
  position: relative;
  display: grid;
  min-height: 72px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid rgba(238, 218, 244, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease;
}

.preview-resource-tabs button:last-child {
  border-bottom: 0;
}

.preview-resource-tabs button::before {
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--magenta);
  content: "";
  opacity: 0;
}

.preview-resource-tabs button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.preview-resource-tabs button[aria-selected="true"] {
  background: var(--berry-150);
  color: var(--berry-10);
}

.preview-resource-tabs button[aria-selected="true"]::before {
  opacity: 1;
}

.preview-resource-tabs svg {
  width: 26px;
  height: 26px;
  color: currentColor;
}

.preview-product-stage {
  position: relative;
  grid-area: screen;
  display: grid;
  min-width: 0;
  justify-items: center;
  padding: 18px 20px 0;
  margin: 0;
  border-top: 1px solid rgba(238, 218, 244, 0.28);
  overflow: visible;
}

.preview-screen-frame {
  width: min(100%, 390px);
  height: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 36px;
  background: #17111a;
  box-shadow: 0 24px 56px rgba(12, 4, 16, 0.32);
  overflow: hidden;
}

.preview-product-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 27px;
  background: #fff;
  opacity: 1;
  transition: opacity 150ms ease;
}

.preview-product-screen.is-changing {
  opacity: 0.18;
}

.preview-resource-detail {
  position: relative;
  grid-area: detail;
  min-width: 0;
  padding: 48px 8px 20px 28px;
  border-top: 1px solid rgba(238, 218, 244, 0.28);
  border-left: 1px solid rgba(238, 218, 244, 0.28);
}

.preview-resource-detail h3 {
  max-width: 13ch;
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.08;
}

.preview-resource-context {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

.preview-resource-nav-arrows {
  position: absolute;
  right: 8px;
  bottom: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-resource-prev,
.preview-resource-next {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--magenta);
  border-radius: 50%;
  background: transparent;
  color: var(--magenta);
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease, transform 300ms ease;
}

.preview-resource-prev:hover,
.preview-resource-next:hover {
  background: var(--magenta);
  color: #fff;
}

.preview-resource-prev:hover { transform: translateX(-2px); }
.preview-resource-next:hover { transform: translateX(2px); }

.preview-resource-prev svg,
.preview-resource-next svg {
  width: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* 03/09 — Home: personas na coluna da esquerda e o detalhe do recurso logo
   abaixo delas. A /para-quem (.persona-explorer) mantem o detalhe na 3a coluna. */
.preview-explorer:not(.persona-explorer) .preview-resource-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title next"
    "context next";
  align-items: center;
  gap: 6px 16px;
  padding: 20px 4px 0;
  border-left: 0;
}

.preview-explorer:not(.persona-explorer) .preview-resource-detail h3 {
  grid-area: title;
  align-self: end;
  max-width: none;
  margin: 0;
}

.preview-explorer:not(.persona-explorer) .preview-resource-context {
  grid-area: context;
  align-self: start;
}

.preview-explorer:not(.persona-explorer) .preview-resource-nav-arrows {
  grid-area: next;
  position: static;
}

.preview-persona-tabs button:focus-visible,
.preview-resource-tabs button:focus-visible,
.preview-resource-prev:focus-visible,
.preview-resource-next:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* A antiga faixa de jornada vira uma secao editorial completa. Os cards continuam
   apontando para as tres paginas Para quem e usam as fotografias reais da previa. */
.preview-journey {
  padding-block: clamp(76px, 8vw, 116px);
  background: var(--white);
}

.preview-journey-heading {
  max-width: 760px;
  margin: 0 0 clamp(34px, 4vw, 52px);
}

.preview-journey-eyebrow {
  margin: 0 0 12px;
  color: var(--magenta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.preview-journey-heading h2 {
  margin: 0;
  color: var(--berry-10);
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.preview-journey .journey-cards {
  gap: clamp(18px, 2.2vw, 30px);
}

.preview-journey .journey-moment-card {
  height: clamp(330px, 30vw, 430px);
  border-radius: 24px;
  box-shadow: 0 14px 32px rgba(25, 23, 79, 0.13);
  transition: box-shadow 300ms ease, transform 300ms ease;
}

.preview-journey .journey-moment-card:hover,
.preview-journey .journey-moment-card:focus-visible {
  box-shadow: 0 22px 44px rgba(25, 23, 79, 0.2);
  transform: translateY(-4px);
}

.preview-journey .journey-moment-card:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 4px;
}

.preview-journey .journey-moment-card::after {
  background: linear-gradient(180deg, rgba(25, 23, 79, 0.02) 38%, rgba(25, 23, 79, 0.9) 100%);
}

.preview-journey .journey-moment-card span {
  right: 24px;
  bottom: 22px;
  left: 24px;
  font-size: clamp(18px, 1.7vw, 22px);
}

@media (max-width: 980px) {
  .preview-explorer {
    grid-template-columns: minmax(180px, 0.72fr) minmax(300px, 1.28fr);
    grid-template-areas:
      "personas personas"
      "resources screen"
      "detail detail";
  }

  /* Personas voltam a ocupar a faixa cheia em tres colunas */
  .preview-persona-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 14px;
  }

  .preview-persona-tabs button {
    justify-content: center;
    min-height: 82px;
    text-align: center;
  }

  .preview-explorer:not(.persona-explorer) .preview-resource-detail {
    padding: 22px 4px;
  }

  .preview-resource-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title next"
      "context next";
    align-items: center;
    gap: 6px 20px;
    min-height: 108px;
    padding: 22px 4px;
    border-left: 0;
    border-bottom: 1px solid rgba(238, 218, 244, 0.28);
  }

  .preview-resource-detail h3,
  .preview-resource-context {
    margin: 0;
  }

  .preview-resource-detail h3 { grid-area: title; }
  .preview-resource-context { grid-area: context; }

  .preview-resource-detail h3 {
    max-width: none;
  }

  .preview-resource-nav-arrows {
    grid-area: next;
    position: static;
  }
}

@media (max-width: 700px) {
  .explorer-heading br {
    display: block;
  }

  .preview-explorer {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .preview-persona-tabs {
    display: flex;
    gap: 10px;
    margin-inline: calc(50% - 50vw);
    padding: 2px 20px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .preview-persona-tabs::-webkit-scrollbar,
  .preview-resource-tabs::-webkit-scrollbar {
    display: none;
  }

  .preview-persona-tabs button {
    min-width: 0;
    min-height: 68px;
    flex: 0 0 clamp(154px, 40vw, 176px);
    justify-content: flex-start;
    gap: 10px;
    padding-inline: 14px;
    border-radius: 18px;
    scroll-snap-align: start;
    text-align: left;
  }

  .preview-persona-tabs img {
    width: 42px;
    height: 42px;
  }

  .preview-resource-nav {
    padding-top: 14px;
  }

  .preview-resource-tabs {
    flex-direction: row;
    gap: 8px;
    margin-inline: calc(50% - 50vw);
    padding: 0 20px 8px;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .preview-resource-tabs button {
    min-width: 178px;
    min-height: 62px;
    flex: 0 0 auto;
    border: 1px solid rgba(238, 218, 244, 0.24);
    border-radius: 14px;
    scroll-snap-align: start;
  }

  .preview-resource-tabs button::before {
    inset: auto 12px 0;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }

  .preview-product-stage {
    padding: 16px 8px 0;
  }

  .preview-screen-frame {
    width: min(86vw, 350px);
    height: auto;
  }

  .preview-resource-detail,
  .preview-explorer:not(.persona-explorer) .preview-resource-detail {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title next"
      "context next";
    gap: 5px 16px;
    min-height: 116px;
    padding: 18px 2px;
  }

  .preview-resource-detail h3 { grid-area: title; font-size: 21px; }
  .preview-resource-context { grid-area: context; }
  .preview-resource-nav-arrows { grid-area: next; }

  .preview-resource-prev,
  .preview-resource-next { width: 50px; height: 50px; }

  .preview-journey {
    padding-block: 72px;
  }

  .preview-journey-heading {
    margin-bottom: 32px;
  }

  .preview-journey .journey-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .preview-journey .journey-moment-card {
    height: clamp(300px, 92vw, 380px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-persona-tabs button,
  .preview-resource-tabs button,
  .preview-product-screen,
  .preview-resource-prev,
  .preview-resource-next {
    transition: none;
  }
}

@media (max-width: 600px) {

  .hero-photo {
    content: url("/assets/images/hero/hero-plantao-v4-mobile.webp");
    object-position: center;
  }

}

/* ============================================================
   28/08 — Página de planos v2: breadcrumb, comparativo estilo
   Canva, faixa de confiança e bundle de parceiros
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--berry-50);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  text-decoration: underline;
}

.breadcrumb-bottom {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.breadcrumb [aria-current="page"] {
  color: var(--berry-10);
  font-weight: 600;
}

.text-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--magenta);
  font-weight: 600;
  text-decoration: none;
}

.text-link::after {
  content: " →";
}

.text-link:hover,
.text-link:focus-visible {
  text-decoration: underline;
}

/* Comparativo (tabela única, cabeçalho fixo no desktop, grupos e linhas expansíveis) */
.compare-canva {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.compare-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15.5px;
}

.compare-matrix th,
.compare-matrix td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
}

.compare-matrix thead th {
  position: sticky;
  top: var(--header-height);
  z-index: 2;
  padding: 18px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--line-strong);
}

.compare-matrix-plan {
  width: 220px;
  text-align: center !important;
}

.compare-matrix-plan .compare-matrix-name {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--berry-10);
}

.compare-matrix-plan .button {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14.5px;
}

.compare-matrix-plan.is-premium {
  background: var(--berry-160);
  box-shadow: inset 0 0 0 1px var(--berry-140);
}

.compare-matrix-heading th {
  padding: 16px 20px 12px;
  background: var(--berry-160);
  color: var(--berry-10);
  font-size: 16px;
  font-weight: 700;
}

/* 11/09 (doc do cliente de 08/09) — o (i) de offline fica na faixa do grupo, nao
   em cada linha: a informacao que o cliente mandou e por grupo. O balao abre no
   hover, no foco de teclado e no toque (o :focus-within cobre os tres, porque
   tocar no botao o foca) — a tabela e o destino do link "Consulte
   funcionalidades" da home, entao precisa funcionar no celular. */
.offline-info {
  position: relative;
  display: inline-flex;
  margin-left: 8px;
  vertical-align: -3px;
}

.offline-info-btn {
  display: inline-grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 0;
  background: none;
  color: var(--berry-50);
  cursor: help;
  transition: color var(--ease);
}

/* Simbolo da Elsie: e desenho preenchido, entao pinta por `color` e precisa de
   width e height explicitos (o <svg> que referencia nao tem viewBox proprio). */
.offline-info-btn svg {
  width: 17px;
  height: 17px;
}

.offline-info-btn:hover,
.offline-info:focus-within .offline-info-btn {
  color: var(--magenta);
}

/* Ancorado a esquerda, e nao centralizado no icone: as faixas de grupo comecam
   perto da borda da tabela, e um balao centralizado vaza para fora do overflow. */
.offline-info-tip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 9px);
  left: -6px;
  width: max-content;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: var(--radius-chip);
  background: var(--berry-10);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
}

.offline-info-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  border: 6px solid transparent;
  border-top-color: var(--berry-10);
}

.offline-info:hover .offline-info-tip,
.offline-info:focus-within .offline-info-tip {
  opacity: 1;
  visibility: visible;
}

/* Na primeira faixa o balao abriria para fora da tabela; ali ele desce. */
.compare-matrix-group:first-of-type .offline-info-tip {
  top: calc(100% + 9px);
  bottom: auto;
}

.compare-matrix-group:first-of-type .offline-info-tip::after {
  top: auto;
  bottom: 100%;
  left: 12px;
  border-top-color: transparent;
  border-bottom-color: var(--berry-10);
}

/* 10/09 (call de 08/09) — os icones das faixas de grupo sairam. A coroa marca
   conteudo premium e, na faixa, sugeria que o grupo inteiro era premium; os
   demais nao acrescentavam leitura. Fica so o titulo sobre o fundo cinza. */

.compare-matrix-heading th small {
  display: block;
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-muted);
}

.compare-matrix tbody th {
  font-weight: 500;
  color: var(--text-body);
}

.compare-matrix tbody td {
  text-align: center;
  color: var(--text-muted);
}

.compare-matrix tbody td:last-child {
  background: rgba(245, 245, 250, 0.55);
}

.compare-row summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.compare-row summary::-webkit-details-marker {
  display: none;
}

.compare-row summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--berry-70);
  border-bottom: 2px solid var(--berry-70);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease);
}

.compare-row[open] summary::before {
  transform: rotate(-135deg) translateY(-2px);
}

.compare-row p {
  max-width: 560px;
  margin: 8px 0 0 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
}

.compare-row-plain {
  display: inline-block;
  padding-left: 18px;
}

.compare-matrix .tick {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--berry-140);
  color: var(--berry-10);
}

.compare-matrix .tick::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.compare-matrix td:last-child .tick {
  background: var(--magenta);
  color: var(--white);
}

.compare-matrix .dash {
  color: var(--berry-120);
}

.compare-matrix .level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.compare-matrix .level.is-premium {
  color: var(--magenta);
  font-weight: 700;
}

.compare-matrix .level .infinity {
  font-size: 19px;
  line-height: 1;
}

.compare-matrix .level sup a {
  color: inherit;
  text-decoration: none;
}

.compare-matrix td small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .compare-matrix {
    table-layout: fixed;
    font-size: 14px;
  }

  .compare-matrix thead th {
    position: static;
    padding: 14px 8px;
  }

  .compare-matrix-lead {
    width: 52%;
  }

  .compare-matrix-plan {
    width: 24%;
  }

  .compare-matrix-plan .compare-matrix-name {
    margin-bottom: 0;
    font-size: 15px;
  }

  .compare-matrix-plan .button {
    display: none;
  }

  .compare-matrix th,
  .compare-matrix td {
    padding: 12px 10px;
  }

  .compare-matrix tbody th {
    padding-left: 14px;
  }

  .compare-matrix-heading th {
    padding: 12px 14px 10px;
  }

  .compare-matrix-heading th small {
    margin-left: 0;
    white-space: normal;
  }

  .compare-row summary {
    align-items: flex-start;
  }

  .compare-row summary::before {
    margin-top: 6px;
  }

  .compare-row p {
    margin-left: 0;
  }

  .compare-row-plain {
    padding-left: 18px;
  }

  .compare-matrix .level {
    display: block;
    font-size: 13.5px;
    line-height: 1.3;
  }

  .compare-matrix .level .infinity {
    display: block;
    margin-bottom: 2px;
  }

  .compare-matrix td small {
    font-size: 11.5px;
  }
}

/* Faixa "Por que confiar no Whitebook" */
.trust-band {
  color: var(--white);
  background: linear-gradient(135deg, var(--berry-10) 0%, var(--berry-30) 100%);
}

.trust-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.trust-copy h2 {
  margin: 0 0 22px;
  color: var(--white);
  font-size: clamp(28px, 3vw, 40px);
}

.trust-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 16.5px;
  font-weight: 500;
}

.trust-list svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--berry-120);
}

@media (max-width: 860px) {
  .trust-inner {
    grid-template-columns: 1fr;
  }
}

/* Bundle de parceiros */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.partners-grid .benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px;
  border: 1px solid var(--line);
  background: var(--white);
}

.partners-grid .benefit-card h3 {
  margin-bottom: 16px;
}

.partners-grid .benefit-card p {
  margin: 0 0 8px;
  text-align: left;
}

.partners-grid .benefit-card .text-link {
  margin-top: auto;
  padding-top: 8px;
}

.partners-more {
  margin: 28px 0 0;
}

@media (max-width: 860px) {
  .partners-grid {
    grid-template-columns: 1fr;
  }
}

/* Título do bundle de parceiros em uma linha só (pedido de 28/08); abaixo disso,
   quebra balanceada para não sobrar palavra solitária */
.partners-band .section-heading {
  max-width: none;
}

.partners-band .section-heading h2 {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .partners-band .section-heading h2 {
    white-space: normal;
    text-wrap: balance;
  }
}

/* ============================================================
   28/08 — Estudos e Internato (revamp com a copy do cliente)
   ============================================================ */
.persona-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.persona-hero-media {
  position: relative;
  justify-self: end;
  width: min(100%, 400px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}

.persona-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* 03/09 — Hero da persona no formato do hero da home: a foto sangra pela direita
   e se dissolve no fundo claro. O degrade e feito com mascara (e nao com um
   veu colorido por cima) para acompanhar o gradiente do fundo sem emendas:
   a mascara horizontal fica no container e a vertical na imagem, entao as duas
   se combinam sem depender de mask-composite. */
.persona-hero {
  display: flex;
  min-height: clamp(540px, calc(100svh - var(--header-height)), 700px);
  align-items: center;
}

.persona-hero .persona-hero-copy {
  position: relative;
  z-index: 2;
}

.persona-hero .persona-hero-media {
  position: absolute;
  top: 0;
  /* O bloco fica ancorado na borda direita; quem define o que aparece dentro dele e a
     mascara em forma do "A", mais abaixo. Nao ha corte reto na borda porque a silhueta
     da letra ja termina antes dela. */
  right: 0;
  bottom: 0;
  z-index: 1;
  height: auto;
  /* O bloco cobre o espaco a direita da coluna de texto (~46vw na grade 1.15/0.85 do
     `.persona-hero-grid` dentro do `.content-container` de 1320px). Os 44vw ficam um
     pouco abaixo disso de proposito, para sobrar folga do texto em qualquer largura.
     E tambem a referencia de tamanho do "A": a mascara e dimensionada em % dele.

     15/09, segunda passada — o teto caiu de 800 para 660px. O "A" e dimensionado pela
     ALTURA do bloco (`auto 118%`), entao quanto mais largo o bloco, menor a letra em
     relacao a ele e mais a direita cai a diagonal esquerda. Acima de ~1500px isso passava
     a cortar a cabeca da estudante da esquerda. Com 660 a proporcao do bloco para de
     crescer e o enquadramento em 1920 volta a ser o de 1440. Abaixo de 1500px nada muda,
     porque 44vw ainda e menor que o teto. */
  width: clamp(460px, 44vw, 660px);
  /* a altura vem de top/bottom, entao o aspect-ratio da regra base nao se aplica */
  aspect-ratio: auto;
  justify-self: auto;
  border-radius: 0;
  box-shadow: none;
  /* 15/09 — a moldura no "A" da Afya, que e o que o documento escrito do cliente pede:
     "podemos aplicá-las dentro do A da Afya como moldura". Substitui tanto a dissolvida
     de 11/09 quanto as duas rampas que tentamos antes hoje: com um recorte de forma, um
     degrade nas bordas so borraria a silhueta da letra.

     `mix-blend-mode: darken` saiu junto. Ele existia para o fundo quase branco do estudio
     se fundir ao tint da secao; com a foto recortada pela letra nao ha fundo sobrando, e o
     darken so lavaria a imagem contra o tint claro.

     A geometria: o "A" e alinhado a direita e ao rodape do bloco (`100% 100%`) e tem 118%
     da altura dele. Como fica maior que o bloco, transborda pela esquerda e pelo topo — e
     e esse transbordo que poe a parte larga da letra na altura do rosto e deixa o bico
     estreito fora de quadro. Escolhido comparando seis posicoes lado a lado nas tres
     personas; nas outras, o bico cortava o rosto de alguem.

     18/09 — a mascara CSS SAIU. O cliente respondeu ao A11 em 16/09 ("o 'A' onde a foto
     esta recortada esta estranho") e entregou, no lote do dia 18, as tres fotos ja
     compostas dentro da letra, com transparencia (`para-quem_*.png`, 1757x1574). A
     diferenca e de origem: aqui a letra RECORTAVA a foto e decepava a pessoa na diagonal;
     na arte deles a pessoa foi enquadrada dentro da letra no design. Por isso a imagem
     agora entra inteira, sem recorte nem reposicionamento. */
  display: flex;
  align-items: flex-end;
}

.persona-hero .persona-hero-media img {
  /* A arte ja vem recortada no formato do "A" — qualquer `cover` voltaria a cortar. */
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 1100px) {
  .persona-hero {
    min-height: clamp(500px, 62vh, 600px);
  }
}

@media (max-width: 900px) {
  .persona-hero {
    display: block;
    min-height: 0;
  }

  .persona-hero-grid {
    grid-template-columns: 1fr;
  }

  .persona-hero .persona-hero-media {
    position: relative;
    justify-self: start;
    width: min(100%, 320px);
    height: auto;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    mix-blend-mode: normal;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .persona-hero .persona-hero-media img {
    object-position: center top;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Faixa de prova social: icones Elsie no magenta da formula de 01/09 */
.proof-item svg {
  color: var(--magenta);
}

/* 3 · Outcomes */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.outcome-card {
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--magenta);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.outcome-card svg,
.feature-item svg {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  color: var(--berry-50);
}

.outcome-card svg path,
.feature-item svg path {
  fill: currentColor;
}

.outcome-card h3,
.feature-item h3 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  color: var(--berry-10);
}

.outcome-card p,
.feature-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .outcome-grid {
    grid-template-columns: 1fr;
  }
}

/* 4 · Features: explorador fixo em uma persona (abas de contexto ocultas) */
.persona-explorer {
  grid-template-areas: "resources screen detail";
}

.persona-explorer .preview-persona-tabs[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .persona-explorer {
    grid-template-areas:
      "resources screen"
      "detail detail";
  }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}

.feature-item {
  padding: 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.feature-item svg {
  color: var(--berry-120);
}

.feature-item h3 {
  color: var(--white);
}

.feature-item p {
  color: rgba(255, 255, 255, 0.78);
}

.feature-item svg {
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
}

.feature-item h3 {
  font-size: 18px;
}

.feature-item p {
  font-size: 15px;
}

.features-more {
  margin: 32px 0 0;
}

@media (max-width: 1100px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* 5 · Parceria Afya */
.afya-band {
  background: var(--berry-160);
}

.afya-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--berry-140);
  border-left: 4px solid var(--magenta);
  background: var(--white);
}

.afya-copy h2 {
  max-width: 720px;
  margin: 0 0 12px;
  font-size: clamp(26px, 2.6vw, 34px);
}

.afya-copy > p {
  max-width: 640px;
  margin: 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.afya-inner .button {
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .afya-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 6 · Planos para quem estuda (resumo) */
.study-plans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
}

.study-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.study-plan h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--berry-10);
}

.study-plan p {
  flex: 1;
  margin: 0;
  color: var(--text-muted);
  font-size: 16.5px;
  line-height: 1.55;
}

.study-plan .button {
  align-self: flex-start;
}

.study-plan.is-premium {
  border-color: var(--berry-140);
  background: var(--berry-160);
}

.study-plans-link {
  margin: 24px 0 0;
}

@media (max-width: 720px) {
  .study-plans-grid {
    grid-template-columns: 1fr;
  }
}

/* 7 · Depoimento unico (ate os relatos reais chegarem) */
.testimonial-grid-single {
  grid-template-columns: minmax(0, 720px);
}

/* 11/09: dois depoimentos reais em Estudos, no lugar do card unico de exemplo. */
.testimonial-grid-duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .testimonial-grid-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.testimonial-grid-single .testimonial-card figcaption div {
  padding-left: 0;
}

/* ============================================================
   15/09 — Variante interna de /para-quem/plantao/ (plantao-v2)
   O conteudo da pagina real — os dois objetivos e as ferramentas de apoio de cada um —
   dentro da grade do explorador da home: escolha a esquerda, tela no centro, lista a
   direita. Reaproveita `.preview-explorer` inteira; o que muda aqui e so o que a grade
   nao previa, porque no original os cartoes da esquerda sao personas com foto e aqui sao
   frases longas.
   Se a variante for adotada, este bloco entra no lugar do CSS do acordeao.
   ============================================================ */

/* A frase do objetivo e longa (100+ caracteres), entao o cartao cresce, o texto encolhe
   e o alinhamento sobe — centralizado, uma frase de quatro linhas fica solta no cartao. */
.objective-explorer .objective-tabs button {
  min-height: 132px;
  align-items: flex-start;
  padding: 18px 20px;
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 600;
  line-height: 1.34;
}

/* O rotulo entra como primeira linha da grade da coluna, acima dos cartoes */
.objective-explorer .objective-tabs .explorer-side-label {
  margin: 0;
}

/* Notebook no lugar do celular: as telas de ferramenta sao capturas da versao navegador,
   nao do aplicativo. A largura fica modesta de proposito — os arquivos estao a 418x210 e
   ampliar mais serrilharia (item 2 do bloco D do plano de 08/09). */
.objective-explorer .objective-stage .ia-laptop {
  width: min(100%, 470px);
  align-self: center;
}

.objective-explorer .objective-stage .ia-laptop-base {
  margin: 0 -15px;
}

.objective-explorer .objective-stage .ia-laptop-screen {
  aspect-ratio: 418 / 210;
  background: var(--white);
}

/* Aqui o painel de detalhe recebe a descricao da ferramenta, nao um rotulo de contexto:
   precisa de medida de leitura e nao pode ficar preso aos 13ch do titulo original. */
.preview-explorer.objective-explorer .preview-resource-detail h3 {
  max-width: none;
  font-size: clamp(18px, 1.6vw, 22px);
}

.preview-explorer.objective-explorer .preview-resource-detail .preview-resource-context {
  max-width: 46ch;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .objective-explorer .objective-tabs button {
    min-height: 0;
  }
}

/* O botao da lista e `display: grid`, e regra de classe vence o `display: none` que o
   navegador da ao atributo [hidden]. Sem isto, as ferramentas do objetivo nao escolhido
   continuam visiveis. */
.objective-explorer .preview-resource-tabs button[hidden] {
  display: none;
}

/* ============================================================
   15/09 — Variante interna de /calculadoras-e-ferramentas/ (calculadoras-e-ferramentas-v2)
   As seis ferramentas da pagina real no layout do explorador, mas sobre FUNDO CLARO.

   A grade `.preview-explorer` nasceu sobre o berry escuro da home: bordas em branco
   translucido, texto branco, item selecionado branco sobre escuro. Aqui o fundo continua
   o da pagina, entao este bloco refaz todas essas cores — e so elas. A geometria da grade
   (tres colunas, medidas, espacamentos) vem inteira de la, sem duplicacao.
   ============================================================ */

/* Nao ha dois niveis de escolha nesta pagina: as seis ferramentas sao uma lista plana.
   A coluna que em /plantao-v2/ guardava os objetivos recebe aqui o detalhe da ferramenta. */
.tools-explorer {
  grid-template-areas: "detail screen resources";
  align-items: start;
}

/* --- as reguas que separam as colunas --- */
.tools-explorer .preview-resource-nav,
.tools-explorer .preview-product-stage,
.tools-explorer .preview-resource-detail {
  border-color: var(--berry-140);
}

.tools-explorer .preview-resource-detail {
  padding-top: 16px;
  border-left: 0;
  padding-left: 0;
}

/* --- textos --- */
.tools-explorer .explorer-side-label {
  color: var(--text-muted);
}

.preview-explorer.tools-explorer .preview-resource-detail h3 {
  max-width: none;
  margin: 14px 0 10px;
  color: var(--berry-10);
  font-size: clamp(20px, 1.8vw, 26px);
}

.preview-explorer.tools-explorer .preview-resource-detail .preview-resource-context {
  max-width: 42ch;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.55;
}

/* --- a lista de ferramentas --- */
.tools-explorer .preview-resource-tabs button {
  border-bottom-color: var(--berry-140);
  color: var(--berry-10);
}

.tools-explorer .preview-resource-tabs button:hover {
  background: var(--berry-160);
  color: var(--berry-10);
}

.tools-explorer .preview-resource-tabs button[aria-selected="true"] {
  background: var(--berry-160);
  color: var(--berry-10);
}

/* --- a tela no centro --- */
/* Notebook, e nao celular: as telas de assets/images/tools/ sao capturas da versao
   navegador. A largura fica modesta porque os arquivos estao a 418x210 (item 2 do
   bloco D do plano de 08/09). */
.tools-explorer .tools-stage .ia-laptop {
  width: min(100%, 470px);
}

.tools-explorer .tools-stage .ia-laptop-base {
  margin: 0 -15px;
}

.tools-explorer .tools-stage .ia-laptop-screen {
  aspect-ratio: 418 / 210;
  background: var(--white);
}

/* O selo de plano some no Guia de procedimentos, unico sem classificacao na pagina
   original; sem isto o [hidden] perderia para a regra de classe do .plan-tag. */
.tools-explorer .plan-tag[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  .tools-explorer {
    grid-template-areas:
      "screen screen"
      "detail resources";
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.8fr);
  }
}

@media (max-width: 700px) {
  .tools-explorer {
    grid-template-areas:
      "screen"
      "detail"
      "resources";
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A coluna de detalhe herdava a medida da coluna de personas do explorador (205px min),
   estreita demais para um selo de plano mais titulo mais descricao. E o `.plan-tag` usa
   `width: max-content`, entao "FREE · COMPLETO NO PREMIUM" transbordava a coluna em vez
   de quebrar, passando por cima do titulo. */
.tools-explorer {
  grid-template-columns: minmax(230px, 0.95fr) minmax(320px, 1.3fr) minmax(200px, 0.78fr);
}

.tools-explorer .preview-resource-detail .plan-tag {
  width: fit-content;
  max-width: 100%;
}

/* A regra `.preview-explorer:not(.persona-explorer) .preview-resource-detail` transforma
   este painel numa grade de duas colunas — "titulo | setas", "descricao | setas" — para
   acomodar as setas de navegacao que o explorador da home tem. Aqui nao ha setas, e o
   selo de plano, que nao pertence a nenhuma area nomeada, caia sozinho na coluna das
   setas: ficava ao lado do titulo e, por ser largo ("FREE · COMPLETO NO PREMIUM"),
   espremia a coluna do texto a uns 150px.
   Volta a ser fluxo normal. A especificidade precisa empatar com a regra do `:not()`
   (tres classes), por isso `.preview-explorer.tools-explorer` e nao so `.tools-explorer`. */
.preview-explorer.tools-explorer .preview-resource-detail {
  display: block;
  padding: 16px 8px 0 0;
  border-left: 0;
}

/* --- 15/09, segunda passada na variante: celular no lugar do notebook --- */

/* A moldura de celular tambem nasceu sobre fundo escuro: a borda clara sumia no branco. */
.tools-explorer .tools-stage .preview-screen-frame {
  width: min(100%, 320px);
  border-color: rgba(23, 17, 26, 0.18);
  box-shadow: 0 20px 44px rgba(12, 4, 16, 0.16);
}



/* --- correcao do responsivo ---
   As media queries da variante estavam ANTES da regra que define as tres colunas, e media
   query nao soma especificidade: a regra de tres colunas (minimos somando ~750px) vencia
   em qualquer largura e estourava a tela entre 700 e 980px. Por isso elas vem agora no fim
   do arquivo, depois de tudo. */
@media (max-width: 1100px) {
  .tools-explorer {
    grid-template-areas:
      "screen screen"
      "detail resources";
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.72fr);
  }

  .tools-explorer .tools-stage {
    justify-self: center;
  }
}

@media (max-width: 700px) {
  /* abaixo de 700 o .preview-explorer base vira flex em coluna, entao a ordem passa a ser
     a do HTML: detalhe, tela, lista. A tela vai para o meio com `order`. */
  .tools-explorer .preview-resource-detail { order: 1; }
  .tools-explorer .tools-stage { order: 2; }
  .tools-explorer .preview-resource-nav { order: 3; }

  .tools-explorer .tools-stage .preview-screen-frame {
    width: min(100%, 260px);
  }
}


/* Abaixo de 700px a regra base transforma a lista de recursos num carrossel horizontal
   com sangramento (`margin-inline: calc(50% - 50vw)`) e botoes de 178px minimos. Na home
   isso funciona porque o painel e filho direto do container centrado. Aqui o `nav` e um
   item flex e o `min-width: auto` deixa o conteudo estica-lo: com seis ferramentas o bloco
   ia a 758px e a pagina inteira ganhava rolagem lateral — medido por emulacao de
   dispositivo, scrollWidth 778 numa viewport de 390.

   Na variante a lista continua VERTICAL no mobile, que e a leitura natural quando as tres
   colunas viram uma pilha. Sem sangramento, sem largura minima, sem rolagem lateral. */
@media (max-width: 700px) {
  .tools-explorer .preview-resource-nav {
    min-width: 0;
  }

  .tools-explorer .preview-resource-tabs {
    flex-direction: column;
    gap: 0;
    margin-inline: 0;
    padding: 0;
    overflow-x: visible;
  }

  .tools-explorer .preview-resource-tabs button {
    min-width: 0;
    scroll-snap-align: none;
  }
}

/* `align-items: start` existe para a GRADE de tres colunas, para as colunas comecarem
   alinhadas no topo. Abaixo de 700px o painel vira flex em coluna e essa mesma propriedade
   passa a valer no eixo horizontal: os blocos encolhiam ate a largura do conteudo, e a
   moldura do celular — que e `width: min(100%, 260px)` — colapsava a quase nada, porque o
   100% dependia de um pai que dependia dela. Medido: o aparelho saia com 22x22px. */
@media (max-width: 700px) {
  .tools-explorer {
    align-items: stretch;
  }
}

/* --- Variante de /prescricao/ (prescricao-v2): dois estados novos no palco ---
   Reaproveita a classe .tools-explorer inteira; aqui entram so as duas situacoes que a
   pagina de calculadoras nao tinha. */

/* "Modelos de prescricao" nao tem tela no cartao original — ela segue em validacao
   editorial, como a propria nota do rodape diz. Em vez de um aparelho vazio, o centro
   mostra o aviso. */
.tools-stage-pending {
  display: none;
  max-width: 22ch;
  align-self: center;
  margin: 0;
  padding: 28px 24px;
  border: 1px dashed var(--berry-140);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.preview-explorer [data-has-shot="0"] [data-frame-desktop],
.preview-explorer [data-has-shot="0"] [data-frame-phone] {
  display: none;
}

.preview-explorer [data-has-shot="0"] .tools-stage-pending {
  display: block;
}

/* As certificadoras em nuvem descem para o painel de detalhe e so aparecem no recurso a
   que pertencem. O [hidden] precisa de regra explicita porque o bloco tem display proprio. */
.tools-explorer .signature-providers {
  margin-top: 18px;
}

.tools-explorer .signature-providers[hidden] {
  display: none;
}

/* A regra da home apaga `.ia-laptop` abaixo de 640px, porque la o notebook da lugar ao
   telefone em CSS. As variantes reusam a mesma classe, entao herdavam esse sumico: nos
   recursos sem captura de celular o centro ficava simplesmente vazio no mobile — medido,
   o palco vinha com 350x17px. Aqui quem decide o aparelho e a viewport,
   entao a regra da home precisa ser neutralizada; as regras que escondem de verdade tem
   tres classes e continuam vencendo esta. */
.preview-explorer [data-frame-desktop] {
  display: block;
}

/* --- 16/09: afordancia de clique na coluna de objetivos da variante de Plantao ---
   Os dois boxes da esquerda trocam a tela do centro, mas nada dizia isso: eram cartoes
   com aparencia de cartao. Entram uma linha de instrucao com cursor e uma seta em cada
   box. Fica sobre o fundo berry escuro, entao as cores sao as translucidas em branco. */
.objective-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -6px 0 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.4;
}

.objective-hint svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--magenta);
}

/* A seta empurra para a direita e sobe junto com a primeira linha do texto, que pode ter
   quatro linhas. Ela e discreta ate o box ser o escolhido ou receber o ponteiro. */
.objective-tabs button .objective-go {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 2px 0 0 auto;
  opacity: 0.45;
  transition: opacity var(--ease), transform var(--ease);
}

.objective-tabs button:hover .objective-go,
.objective-tabs button:focus-visible .objective-go {
  opacity: 1;
  transform: translateX(2px);
}

.objective-tabs button[aria-selected="true"] .objective-go {
  opacity: 1;
  color: var(--magenta);
}

/* Abaixo de 700px a regra base transforma as duas colunas de escolha em carrosseis
   horizontais com sangramento — e o comportamento do explorador da home, onde as personas
   sao tres cartoes curtos. Aqui os objetivos sao frases de quatro linhas: viravam colunas
   de uma palavra, com o rotulo e a instrucao espremidos ao lado. Nesta variante as duas
   listas empilham, que e a leitura natural quando as tres colunas viram uma pilha. */
@media (max-width: 700px) {
  .objective-explorer .objective-tabs,
  .objective-explorer .preview-resource-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-inline: 0;
    padding: 0;
    overflow-x: visible;
  }

  .objective-explorer .objective-tabs button,
  .objective-explorer .preview-resource-tabs button {
    min-width: 0;
    scroll-snap-align: none;
  }

  /* o rotulo e a instrucao voltam a ser linhas da coluna, nao itens do carrossel */
  .objective-explorer .objective-tabs .explorer-side-label,
  .objective-explorer .objective-hint {
    grid-column: 1 / -1;
  }
}

/* --- Qual aparelho aparece: SEMPRE a viewport ---
   Computador no desktop, celular no mobile, sem excecao. Os dois vivem no HTML e o CSS
   mostra um.

   Antes disso, os recursos sem captura de celular mantinham o notebook tambem no mobile.
   Era coerente com o material, mas escondia justamente o que a pagina existe para mostrar:
   como o componente se comporta em cada aparelho. Agora, quando falta a captura certa, o
   JS alimenta o aparelho com a que existe e marca `data-mobile-adapted="1"` — provisorio,
   ate a captura real chegar. */
.preview-explorer [data-frame-phone] {
  display: none;
}

@media (max-width: 700px) {
  .preview-explorer [data-has-shot="1"] [data-frame-phone] {
    display: block;
  }

  .preview-explorer [data-has-shot="1"] [data-frame-desktop] {
    display: none;
  }
}


/* A captura de navegador e larga (418x210) e a tela do aparelho e alta. Nenhum recorte
   resolve bem: `contain` centralizado vira um selo no meio do vazio, e `cover` amplia 2,3x
   e sobra uma tira vertical ilegivel — os dois foram testados em print. O menos ruim e
   encaixa-la inteira encostada no topo, como conteudo no alto de uma tela, com o resto no
   tom do aplicativo. E provisorio: a legenda abaixo do aparelho diz isso. */
.preview-explorer [data-mobile-adapted="1"] [data-shot-phone] {
  aspect-ratio: 810 / 1674;
  object-fit: contain;
  object-position: center top;
  background: var(--white);
}

.tools-stage-note {
  display: none;
  max-width: 30ch;
  margin: 12px auto 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 700px) {
  .preview-explorer [data-mobile-adapted="1"] .tools-stage-note {
    display: block;
  }
}

/* --- 16/09: afordancia de clique na lista de ferramentas (variantes de fundo claro) ---
   Mesma ideia do /para-quem/plantao-v2/, com duas diferencas: ali a coluna clicavel e a da
   esquerda e o fundo e berry escuro; aqui e a da direita e o fundo e claro, entao as cores
   sao as do texto normal em vez das translucidas em branco. */
.tools-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -6px 0 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.tools-hint svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  color: var(--magenta);
}

/* A linha da lista e uma grade de duas colunas (icone + texto); a seta pede a terceira. */
.tools-explorer .preview-resource-tabs button {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.tools-explorer .preview-resource-tabs button .tools-go {
  width: 17px;
  height: 17px;
  opacity: 0.4;
  transition: opacity var(--ease), transform var(--ease);
}

.tools-explorer .preview-resource-tabs button:hover .tools-go,
.tools-explorer .preview-resource-tabs button:focus-visible .tools-go {
  opacity: 1;
  transform: translateX(2px);
}

.tools-explorer .preview-resource-tabs button[aria-selected="true"] .tools-go {
  opacity: 1;
  color: var(--magenta);
}

/* ============================================================
   16/09 — Variante de /para-quem/consultorio/ (consultorio-v2)
   Mesmo desenho de dois niveis de /para-quem/plantao-v2/ — objetivos escolhem, ferramentas
   do objetivo aparecem —, mas com o fundo claro e a troca de aparelho por viewport das
   variantes mais recentes. Por isso ela usa `.tools-explorer` (que ja traz o tema claro, as
   molduras e o empilhamento no mobile) mais este modificador, que devolve a linha dos
   objetivos que a grade de lista plana nao tem.
   ============================================================ */
.tools-explorer-objetivos {
  grid-template-areas:
    "personas screen resources"
    "detail screen resources";
}

/* Os cartoes de objetivo em fundo claro: o tema base pinta borda e texto em branco
   translucido, para o berry escuro da home. */
.tools-explorer .objective-tabs button {
  border-color: var(--berry-140);
  color: var(--text-body);
}

.tools-explorer .objective-tabs button:hover {
  border-color: var(--berry-100);
  color: var(--berry-10);
}

.tools-explorer .objective-tabs button[aria-selected="true"] {
  border-color: var(--magenta);
  background: var(--white);
  color: var(--berry-10);
  box-shadow: var(--shadow-sm);
}

.tools-explorer .objective-tabs button .tools-go {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 2px 0 0 auto;
  opacity: 0.4;
  transition: opacity var(--ease), transform var(--ease);
}

.tools-explorer .objective-tabs button:hover .tools-go,
.tools-explorer .objective-tabs button:focus-visible .tools-go {
  opacity: 1;
  transform: translateX(2px);
}

.tools-explorer .objective-tabs button[aria-selected="true"] .tools-go {
  opacity: 1;
  color: var(--magenta);
}

/* A ferramenta do objetivo nao escolhido sai da lista; o botao e `display: grid`, e regra
   de classe vence o `display: none` do atributo [hidden]. */
.tools-explorer .preview-resource-tabs button[hidden] {
  display: none;
}

/* --- Adaptacao de captura no sentido inverso ---
   Ate aqui so faltava tela de celular. No Consultorio o WB IA e o caso oposto: existe a de
   celular e nao a de navegador. Entao a tela alta entra no notebook encaixada inteira e
   centrada, com o resto no branco do aplicativo — mesma logica, outro eixo. */
.preview-explorer [data-desktop-adapted="1"] [data-shot-desktop] {
  object-fit: contain;
  background: var(--white);
}

@media (min-width: 701px) {
  .preview-explorer [data-desktop-adapted="1"] .tools-stage-note {
    display: block;
  }
}

/* O plantao-v2 e a unica variante com fundo escuro: ali a legenda de captura adaptada e o
   aparelho precisam das cores claras, e nao das do texto normal. */
.objective-explorer .tools-stage-note {
  color: rgba(255, 255, 255, 0.66);
}

.objective-explorer .objective-stage .preview-screen-frame {
  width: min(100%, 300px);
}

@media (max-width: 700px) {
  .objective-explorer .objective-stage .preview-screen-frame {
    width: min(100%, 260px);
  }
}

/* ============================================================
   17/09 — Tarja de credito da Conversion, no fim de todas as paginas.
   Fica FORA do <footer> da Afya de proposito: e credito de autoria do site, nao parte do
   rodape institucional do cliente — some junto se o cliente pedir, sem mexer no rodape.
   ============================================================ */
.site-credit {
  background: #1649ff;
  padding-block: 16px;
}

.site-credit-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* O SVG ja vem na versao negativa (branco com as ondas recortadas na cor da tarja);
   ver o comentario dentro do arquivo. */
/* O logo agora e um link para conversion.com.br. Sem sublinhado nem a cor de link do
   site, que foi feita para fundo claro; o retorno visual vem da opacidade, e o foco
   ganha contorno branco para ficar visivel sobre o azul. */
.site-credit-link {
  display: block;
  line-height: 0;
  border-radius: 3px;
  transition: opacity var(--ease);
}

.site-credit-link:hover {
  opacity: 0.82;
}

.site-credit-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.site-credit img {
  height: 20px;
  width: auto;
  flex: none;
}

.site-credit p {
  margin: 0;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (max-width: 520px) {
  .site-credit-inner {
    gap: 10px;
  }

  .site-credit img {
    height: 18px;
  }

  .site-credit p {
    font-size: 0.8125rem;
  }
}