/* Tráfego para Consultórios: Index-inspired hero, local reversible experiment.
   Opus, 17 Oct 2026. Loaded after opus-20261016/tpc-light.css. Every selector starts with
   .hero.hero--index, so the header, the cards and every following section keep their
   accepted R3 rendering; removing the class or this link restores the R3 hero styling.

   Index language translated to the light brand: a band carrying a heavy compact Manrope 800
   statement and one outlined pill, over the services cards' lime light, which crosses the
   hero once and settles (field section below). Light only: paper, white, petroleum and lime;
   no periwinkle, no dark surface, no shadow, no lines; only the background colour moves. */

.hero.hero--index {
  --ix-rule: rgb(15 48 56 / 24%);
  --ix-rail: rgb(15 48 56 / 17%);
  /* Band starts one inset below the header capsule (mobile: top 10 + height 64). */
  --ix-top: calc(74px + var(--inset));
  --ix-band: clamp(44px, min(8vw, 11vh), 120px);
  --ix-pad-x: 0px;
  --ix-gap-copy: 20px;
  --ix-gap-action: 28px;
  padding: var(--ix-top) 0 var(--inset);
  background-color: var(--paper);
}

/* ---- Field: the services cards' lime light, crossing the hero once (R2) ----
   Target: the colour of the approved Atração / Atendimento / Retenção hover, i.e.
   .service-nav .service-art in opus-20261016/tpc-light.css, radial-gradient(85% 75% at
   84% 6%) of lime at 30%, 12% at 42% and 0 at 78%, on white. Here it is scaled to the hero
   and moves on its own instead of on hover. No pointer tracking, no lines, no objects; only
   these colour layers move, never the statement or the CTA. All inside the aria-hidden field,
   behind the shell:
     the field  white canvas with a faint petroleum shade in the upper left; the whole field
                fades to the hero's paper over the bottom band, so the hero still meets the
                margins beside the next sheet without a seam;
     ::before   the card spotlight itself, resting top right as on the card;
     ::after    a smaller, softer echo of it, resting lower left.
   One finite pass (experiment/index-field.js): the spotlight flows along the top to the upper
   left while the echo crosses the lower half to the right; both come back, overshoot a little
   and settle. The rest pose is the first and last keyframe and the whole field without script
   or with reduced motion. Text and CTA colours are chosen against plain paper; the strongest
   lime here is the card's own 30%, which keeps every text colour well above AA. */
.hero.hero--index .hero-field {
  background:
    radial-gradient(46% 70% at 0% 0%, rgb(15 48 56 / 5%) 0%, rgb(15 48 56 / 0%) 100%),
    var(--white);
  -webkit-mask-image: linear-gradient(0deg, rgb(0 0 0 / 0%) 0, #000 var(--ix-band));
  mask-image: linear-gradient(0deg, rgb(0 0 0 / 0%) 0, #000 var(--ix-band));
}

.hero.hero--index .hero-field::before,
.hero.hero--index .hero-field::after {
  content: "";
  position: absolute;
  display: block;
  margin: 0;
  border: 0;
  opacity: 1;
  pointer-events: none;
  transition: none;
  animation: none;
}

/* Spotlight: the card gradient with its box rescaled to the hero (radii 70% of the width and
   120% of the height), centred at 84% 6% as on the card. Each layer box covers every part of
   its light (78% of each radius) that can enter the hero during its travel, so no box edge
   ever shows inside the hero, which clips the rest. */
.hero.hero--index .hero-field::before {
  top: -24%;
  left: 29%;
  width: 110%;
  height: 128%;
  background: radial-gradient(63.64% 93.75% at 50% 23.44%, rgb(213 255 70 / 30%) 0%, rgb(213 255 70 / 12%) 42%, rgb(213 255 70 / 0%) 78%);
  transform: translate(0, 0) scale(1);
  transform-origin: 50% 23.44%;
}

/* Echo: the same gradient smaller (radii 52% x 80%) and softer (22% and 9%), centred at
   10% 74%. */
.hero.hero--index .hero-field::after {
  top: 11.6%;
  left: -30.6%;
  width: 81.2%;
  height: 124.8%;
  background: radial-gradient(64.04% 64.1% at 50% 50%, rgb(213 255 70 / 22%) 0%, rgb(213 255 70 / 9%) 42%, rgb(213 255 70 / 0%) 78%);
  transform: translate(0, 0) scale(1);
  transform-origin: 50% 50%;
}

/* One finite pass, armed by experiment/index-field.js: "run" plays, "hold" pauses the same
   timeline (hero off screen, page hidden); the script removes the attribute when the pass
   ends, which leaves the identical rest pose. 4.8 s is this adaptation's accessibility
   limit. */
.hero.hero--index .hero-field[data-ix-motion]::before {
  animation: ix-field-wash 4.8s linear both;
  will-change: transform;
}

.hero.hero--index .hero-field[data-ix-motion]::after {
  animation: ix-field-echo 4.8s linear both;
  will-change: transform;
}

.hero.hero--index .hero-field[data-ix-motion="hold"]::before,
.hero.hero--index .hero-field[data-ix-motion="hold"]::after {
  animation-play-state: paused;
}

/* Spotlight: from 84% 6% along the top to about 20% 24% (2 s), back a little past rest,
   settle. Translations are in layer-box units (64% of the width = 58.18% of the box). */
@keyframes ix-field-wash {
  0% {
    transform: translate(0, 0) scale(1);
    animation-timing-function: cubic-bezier(.45, 0, .3, 1);
  }

  42% {
    transform: translate(-58.18%, 14.06%) scale(1.06);
    animation-timing-function: cubic-bezier(.4, 0, .35, 1);
  }

  80% {
    transform: translate(2.27%, -.78%) scale(.99);
    animation-timing-function: cubic-bezier(.3, 0, .3, 1);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* Echo: from 10% 74% across the lower half to about 68% 60% (2.2 s), back a little past
   rest, settle. */
@keyframes ix-field-echo {
  0% {
    transform: translate(0, 0) scale(1);
    animation-timing-function: cubic-bezier(.45, 0, .3, 1);
  }

  46% {
    transform: translate(71.43%, -11.22%) scale(1.08);
    animation-timing-function: cubic-bezier(.4, 0, .35, 1);
  }

  82% {
    transform: translate(-2.46%, 1.6%) scale(.99);
    animation-timing-function: cubic-bezier(.3, 0, .3, 1);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--index .hero-field[data-ix-motion]::before,
  .hero.hero--index .hero-field[data-ix-motion]::after {
    animation: none;
    will-change: auto;
  }
}

/* Forced colours drop the decoration; the plain canvas remains. */
@media (forced-colors: active) {
  .hero.hero--index .hero-field::before,
  .hero.hero--index .hero-field::after {
    display: none;
  }
}

/* ---- Band spacing; the construction lines are removed ----
   The two full-bleed dashed rules and the two dashed rails were taken out on request (no
   lines anywhere in the hero). The band keeps its padding, and from 641 px the shell keeps a
   1 px transparent border on each side, so every measure inside stays exactly the same.
   --ix-rule and --ix-rail are now unused. */
.hero.hero--index .hero-shell {
  padding-block: var(--ix-band);
}

.hero.hero--index .hero-shell::before,
.hero.hero--index .hero-shell::after {
  content: none;
}

/* ---- Centred statement ---- */

.hero.hero--index .hero-copy {
  padding-inline: var(--ix-pad-x);
}

.hero.hero--index .hero-copy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

/* Phones: four lines. The narrowest balanced four-line set is about 8.05em wide in
   Manrope 800 at -0.04em ("sua especialidade"); 8.7em of room keeps every four-line
   variant clear while three lines need about 11.05em, so the count never changes. */
.hero.hero--index .hero-copy h1 {
  max-width: 9em;
  margin: 0;
  color: var(--ink);
  font-size: min(2.75rem, calc(var(--hero-c) / 8.7));
  font-weight: 800;
  font-synthesis: none;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-align: center;
  text-wrap: balance;
}

.hero.hero--index .hero-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ix-gap-action);
  width: 100%;
  margin-top: var(--ix-gap-copy);
}

.hero.hero--index .hero-copy p {
  max-width: 100%;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.6;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: pretty;
}

/* ---- The one action: an outlined pill (Index "wireframe of a button") ----
   Rest: clear fill, petroleum outline and label. Pointer hover inks it with the brand
   lime; press darkens to lime-hover; keyboard focus adds a separate petroleum ring.
   The former petroleum disc becomes the plain line arrow. */
.hero.hero--index .hero-copy .cta {
  justify-content: center;
  gap: 12px;
  width: auto;
  max-width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 10px 20px 10px 26px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background-color: transparent;
  color: var(--ink);
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-align: center;
  white-space: normal;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.hero.hero--index .hero-copy .cta::after {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--arrow-ink) center / 18px 18px no-repeat;
  transition: transform var(--t-med) var(--ease);
}

/* Hover only where a pointer can hover, so a tap never leaves the pill stuck in lime. */
@media (hover: hover) {
  .hero.hero--index .hero-copy .cta:hover {
    background-color: var(--lime);
    color: var(--ink);
  }

  .hero.hero--index .hero-copy .cta:hover::after {
    transform: translateX(3px);
  }
}

.hero.hero--index .hero-copy .cta:active {
  background-color: var(--lime-hover);
  color: var(--ink);
  transform: scale(.985);
}

.hero.hero--index .hero-copy .cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ---- Tablet and desktop (641+): three lines between the rails ---- */

@media (min-width: 641px) {
  .hero.hero--index {
    --ix-pad-x: clamp(24px, 4.5vw, 64px);
    --ix-gap-copy: clamp(22px, 2.4vw, 30px);
    --ix-gap-action: clamp(30px, 3vw, 40px);
  }

  /* Former dashed rails: the 1 px stays as transparent space so the copy keeps its measure. */
  .hero.hero--index .hero-shell {
    border-inline: 1px solid transparent;
  }

  /* "Seja encontrado por / pacientes que procuram / sua especialidade". The widest line
     is about 11.05em; the size is derived from the room inside the rails (11.7em), so the
     break holds from 641 up and the statement settles at 70 px (4.375rem) near 1030. */
  .hero.hero--index .hero-copy h1 {
    max-width: 12em;
    font-size: min(4.375rem, calc((var(--hero-c) - 2 * var(--ix-pad-x)) / 11.7));
    line-height: 1.05;
  }

  .hero.hero--index .hero-copy p {
    max-width: 34em;
    text-wrap: balance;
  }
}

/* Desktop header is fixed at top 14 with height 72. */
@media (min-width: 901px) {
  .hero.hero--index {
    --ix-top: calc(86px + var(--inset));
  }
}

@media (prefers-contrast: more) {
  .hero.hero--index {
    --ix-rule: rgb(15 48 56 / 48%);
    --ix-rail: rgb(15 48 56 / 36%);
  }

  .hero.hero--index .hero-copy .cta {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--index .hero-copy .cta:active,
  .hero.hero--index .hero-copy .cta:hover::after {
    transform: none;
  }
}