/**
 * Crescita Studio — Core Components
 * Built on tokens.css. Loaded on top of GeneratePress Premium.
 *
 * Architectural, editorial, restrained. No SaaS gradients, no bounce.
 * (Brand Kit §8, §13; Anti-Slop Guidelines.)
 *
 * **The one exception, founder direction 2026-09-06: the call to action.**
 * CTAs are fully rounded and carry a travelling gloss with a lit hover — see
 * the Buttons block below and the `--cta-*` tokens. It is scoped to the
 * action itself. Surfaces, cards and inputs keep the architectural shape
 * language; this is not licence to round or light anything else.
 */

/* ── Focus ───────────────────────────────────────────────────── */

/* One focus indicator for the whole site (WCAG 2.2 SC 2.4.7, 2.4.11).
   Components must not signal focus by colour change alone: on the secondary
   button a Midnight→Ocean shift is nearly invisible, and colour alone also
   fails SC 1.4.1. The ring is offset so it is never clipped by the element's
   own border, and Ocean against both Sand and Midnight clears the 3:1
   non-text contrast floor (SC 1.4.11).

   :focus-visible, not :focus — a mouse click on a button should not leave a
   ring behind. */
:focus-visible {
  outline: 2px solid var(--crescita-ocean);
  outline-offset: 2px;
}

/* On Midnight surfaces Ocean is too close to the background to read. */
.crescita-section--dark :focus-visible,
.crescita-footer :focus-visible,
.crescita-consent :focus-visible,
.crescita-head :focus-visible {
  outline-color: var(--crescita-sand);
}

/* ── Base typography ─────────────────────────────────────────── */

body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-body);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-heading);
  font-weight: var(--weight-heading);
}

/* The display weight lives here now, not per page. home.css and diagnosi.css
   each locally overrode h1 to 700/-0.02em for their heroes; every other page
   inherited --weight-heading (500) and -0.01em, so Contatti, Privacy, Termini
   and the booking page were all setting their headline in a visibly lighter
   face than the two pages anyone compares them against. Founder direction
   2026-09-08: one H1 sitewide. The two page files keep their identical
   overrides harmlessly; this is what the rest of the site now gets. */
h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--leading-h1);
  letter-spacing: -0.02em;
}
h2 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: -0.005em; }
h3 { font-size: var(--text-h3); line-height: var(--leading-heading); }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--crescita-midnight); }

/* ── Eyebrow / overline (Brand Kit §6) ───────────────────────── */

.crescita-eyebrow {
  display: block;
  font-family: var(--font-secondary);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.crescita-section--dark .crescita-eyebrow {
  color: var(--color-text-on-dark-secondary);
}

/* ── Buttons (Brand Kit §13) ─────────────────────────────────── */

/*
 * **One CTA, everywhere — founder direction, 2026-09-06.**
 *
 * Until now four button families drifted apart: this one at 2px with a flat
 * Ocean hover, the homepage and Diagnosi ones at 10px with a gloss sweep, and
 * the report's own at 12px with neither. They are now one control: fully
 * rounded, a travelling gloss on the primary, and a hover that reads as lit.
 *
 * **Why the old hover read as dimmed.** Midnight → Ocean is technically
 * lighter (relative luminance 0.007 → 0.036) but both are near-black, so the
 * only perceptible change was the button settling into its own shadow. The lit
 * state changes the ground to `--crescita-ocean-bright` (6.5:1 against Sand
 * text, measured), adds a rim and an outward bloom, and lifts the control off
 * the page. Brightness is carried by a lighter ground, never by opacity.
 */
.crescita-btn,
.crescita-btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--text-button);
  font-weight: 500;
  line-height: 1;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-cta);
  background-color: var(--crescita-midnight);
  color: var(--crescita-sand);
  border: 1px solid var(--crescita-midnight);
  box-shadow: var(--cta-rest);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  cursor: pointer;
}

.crescita-btn-primary:hover,
.crescita-btn-primary:focus-visible {
  background-color: var(--crescita-ocean-bright);
  border-color: var(--crescita-ocean-bright);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--cta-lit);
}
.crescita-btn-primary:active { transform: scale(0.985); }

.crescita-btn-secondary {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--text-button);
  font-weight: 500;
  line-height: 1;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-cta);
  background-color: transparent;
  color: var(--crescita-midnight);
  border: 1px solid rgba(15, 23, 34, 0.28);
  transition: color var(--transition-base),
              border-color var(--transition-base),
              background-color var(--transition-base),
              box-shadow var(--transition-base);
  cursor: pointer;
}

/* The secondary lights too, or it would look disabled beside a lit primary. */
.crescita-btn-secondary:hover,
.crescita-btn-secondary:focus-visible {
  color: var(--crescita-ocean-bright);
  border-color: var(--crescita-ocean-bright);
  background-color: rgba(46, 90, 143, 0.07);
  box-shadow: 0 0 0 3px rgba(46, 90, 143, 0.12);
}

/* On dark surfaces */
.crescita-section--dark .crescita-btn-primary {
  background-color: var(--crescita-sand);
  border-color: var(--crescita-sand);
  color: var(--crescita-midnight);
}
.crescita-section--dark .crescita-btn-primary:hover,
.crescita-section--dark .crescita-btn-primary:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: var(--crescita-midnight);
  box-shadow: var(--cta-lit-on-dark);
}
.crescita-section--dark .crescita-btn-secondary {
  color: var(--color-text-on-dark);
  border-color: var(--color-border-dark);
}
.crescita-section--dark .crescita-btn-secondary:hover,
.crescita-section--dark .crescita-btn-secondary:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/*
 * The travelling gloss, shared by every primary on the site.
 *
 * It runs continuously at rest and accelerates on hover, so the control reads
 * as live before it is touched and as lit once it is. `content: none` under
 * reduced motion removes the element rather than freezing it: a stalled streak
 * across a button looks like a rendering fault.
 */
.crescita-btn-primary::after,
.crescita-home-btn-primary::after,
.crescita-diagnosi-btn-primary::after {
  background: var(--cta-sweep);
}
.crescita-btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  transform: skewX(-18deg);
  animation: crescita-cta-gloss 6s linear infinite;
  pointer-events: none;
}
.crescita-btn-primary:hover::after,
.crescita-home-btn-primary:hover::after,
.crescita-diagnosi-btn-primary:hover::after,
.crescita-home-sticky-cta .crescita-home-btn:hover::after,
.crescita-diagnosi-sticky-cta .crescita-diagnosi-btn:hover::after {
  background: var(--cta-sweep-bright);
  animation-duration: 1.4s;
  animation-play-state: running;
}
@keyframes crescita-cta-gloss {
  from { left: -60%; }
  to   { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .crescita-btn-primary::after { content: none; }
}
/* ── Sections ────────────────────────────────────────────────── */

.crescita-section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.crescita-section--dark {
  background-color: var(--crescita-midnight);
  color: var(--color-text-on-dark);
}
.crescita-section--dark h1,
.crescita-section--dark h2,
.crescita-section--dark h3 {
  color: var(--color-text-on-dark);
}
.crescita-section--dark p { color: var(--color-text-on-dark-secondary); }

.crescita-section--stone { background-color: var(--crescita-stone); }

/* ── Horizontal rules — strong horizontal divisions (§7–8) ──── */

.crescita-rule {
  border: 0;
  border-top: var(--border-hairline);
  margin: 0;
}

.crescita-section--dark .crescita-rule {
  border-top-color: var(--color-border-dark);
}

/* ── Cards — restrained, thin borders (§8) ───────────────────── */

.crescita-card {
  background-color: var(--crescita-sand);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.crescita-card--stone { background-color: var(--crescita-stone); border-color: transparent; }

.crescita-card--dark {
  background-color: var(--crescita-midnight);
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-on-dark);
}

/* ── Section header ──────────────────────────────────────────── */
/* Headline and supporting line stack vertically. Crescita sections carry
   one message; no headline-left / explainer-right split. */

.crescita-section__header {
  max-width: var(--width-text);
  margin-bottom: var(--space-xl);
}

.crescita-section__header > :last-child { margin-bottom: 0; }

.crescita-lede {
  font-size: var(--text-lede);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  max-width: 62ch;
}

.crescita-section--dark .crescita-lede { color: var(--color-text-on-dark-secondary); }

/* ── Action row ──────────────────────────────────────────────── */

.crescita-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Button labels stay on one line. */
.crescita-actions .crescita-btn-primary,
.crescita-actions .crescita-btn-secondary { white-space: nowrap; }

/* ── Hero ────────────────────────────────────────────────────── */

.crescita-hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-section);
  border-bottom: var(--border-hairline);
}

@media (min-width: 768px) {
  /* Capped so hero content sits high in the viewport, not floating mid-page. */
  .crescita-hero { padding-top: var(--space-2xl); }
}

/* Measure tuned so the headline sets on two lines at the H1 scale. */
.crescita-hero__title {
  margin: 0 0 var(--space-md);
  max-width: 20ch;
}

/* ── The headline sweep ──────────────────────────────────────────
   A highlight that travels across the glyphs once every 6s. It ran only on
   the homepage and Diagnosi, written out twice; founder direction 2026-09-08
   is one headline treatment sitewide, so the gradient is a token
   (--h1-sweep) and the keyframes are authored once here.

   Those two pages keep their own rules because their JS SEQUENCES this
   against the CTA gloss — hero H1 for 6s, then the buttons for 6s, never
   both at once. Pages reached here have no sequencer and one CTA at most, so
   the sweep simply runs.

   Two fallbacks are load-bearing rather than polite. The effect works by
   making the text itself transparent and showing the gradient through it, so
   anywhere the background does not paint, the headline is INVISIBLE, not
   merely unstyled — reduced motion and print therefore both restore a flat
   Midnight fill rather than only stopping the animation. */
.crescita-hero__title {
  background-image: var(--h1-sweep);
  background-size: 200% 100%;
  background-position: 143% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: crescita-h1-gloss-sweep 6s linear infinite;
}

@keyframes crescita-h1-gloss-sweep {
  from { background-position: 143% 0; }
  to   { background-position: -57% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crescita-hero__title {
    animation: none;
    background-image: none;
    color: var(--crescita-midnight);
    -webkit-text-fill-color: var(--crescita-midnight);
  }
}

.crescita-hero__lede {
  margin: 0 0 var(--space-lg);
  max-width: 52ch;
}

/* ── Media slot ──────────────────────────────────────────────── */
/* Reserves layout space so photography drops in without shifting the page
   (CLS). Aspect ratio matches the Brand Kit §9 architectural crop. */

/* Landscape while the hero is stacked, portrait once it sits in the split
   column at 1024px. A 4:5 crop at full stacked width would be enormous. */
.crescita-media {
  aspect-ratio: 3 / 2;
  background-color: var(--crescita-stone);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .crescita-media { aspect-ratio: 4 / 5; }
}

.crescita-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Process list ────────────────────────────────────────────── */
/* Sequenced rows divided by a single hairline above each. The step name is
   the label; no "Fase 1 / Fase 2" numbering scaffold. Order is carried by
   the ordered list and by reading direction. */

.crescita-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crescita-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-top: var(--border-hairline);
}

@media (min-width: 768px) {
  .crescita-step {
    grid-template-columns: 1fr 1.6fr;
    gap: var(--space-xl);
    align-items: baseline;
  }
}

.crescita-step__title {
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  margin: 0;
}

.crescita-step__body {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 54ch;
}

/* ── Measure grid ────────────────────────────────────────────── */
/* The assessment surfaces. Grouped by whitespace, not boxed in cards. */

.crescita-measures {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .crescita-measures { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .crescita-measures {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-2xl);
  }
}

.crescita-measure__title {
  font-size: var(--text-body);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: var(--border-hairline);
}

.crescita-measure__body {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 44ch;
}

/* ── Progression spine ───────────────────────────────────────── */
/* The Crescita journey: Diagnosi, Essenziale, Avanzata, Continuous Growth.
   One continuous hairline runs across all stages so it reads as a single
   path rather than four competing options. Deliberately not a pricing
   table: no cards, no borders around stages, no badges, no highlighted
   "recommended" column. */

.crescita-progression {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline);
}

@media (min-width: 640px) {
  .crescita-progression { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); }
}

@media (min-width: 1024px) {
  .crescita-progression { grid-template-columns: repeat(4, 1fr); column-gap: var(--space-lg); }
}

.crescita-progression__stage { padding-top: var(--space-md); }

/* Align name, marker and note across the row even when a stage name wraps to
   two lines. Without this the markers sit at different heights and the row
   stops reading as one sequence. Degrades to the normal flow where subgrid
   is unsupported. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1024px) {
    /* All four stages sit in one band here, so three shared rows align them.
       Vertical rhythm inside a stage comes from the elements' own margins,
       which is why the inherited row-gap is zeroed. */
    .crescita-progression { grid-template-rows: auto auto auto; }

    .crescita-progression__stage {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      row-gap: 0;
    }
  }
}

.crescita-progression__name {
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-2xs);
}

/* Stage names that link keep the heading colour so the row reads as one
   sequence. The underline marks them as links without colour alone. */
.crescita-progression__name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 0.2em;
}

.crescita-progression__name a:hover,
.crescita-progression__name a:focus {
  color: var(--crescita-ocean);
  text-decoration-color: currentColor;
}

/* Satoshi carries numerals and short ordinals (Brand Kit §5-6: secondary
   face for numbers). Holds the price on the journey, the cadence marker on
   the monthly cycle. */
.crescita-progression__meta {
  font-family: var(--font-secondary);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
}

.crescita-progression__note {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 34ch;
}

.crescita-section--dark .crescita-progression { border-top-color: var(--color-border-dark); }
.crescita-section--dark .crescita-progression__meta { color: var(--color-text-on-dark); }
.crescita-section--dark .crescita-progression__note { color: var(--color-text-on-dark-secondary); }

/* ── Commitments ─────────────────────────────────────────────── */
/* Risk reversal and service commitments. Divided by rules rather than
   boxed into cards. */

.crescita-commitments {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crescita-commitment { border-top: var(--border-hairline); padding-top: var(--space-md); }

@media (min-width: 768px) {
  .crescita-commitments { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-xl); }

  /* Vertical division at desktop; the top rule stays as the shared spine. */
  .crescita-commitment + .crescita-commitment {
    border-left: var(--border-hairline);
    padding-left: var(--space-xl);
  }
}

.crescita-commitment__title {
  font-size: var(--text-body);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-2xs);
}

.crescita-commitment__body {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.crescita-section--dark .crescita-commitment { border-top-color: var(--color-border-dark); }
.crescita-section--dark .crescita-commitment + .crescita-commitment { border-left-color: var(--color-border-dark); }
.crescita-section--dark .crescita-commitment__body { color: var(--color-text-on-dark-secondary); }

/* ── Service page meta line ──────────────────────────────────── */
/* Price and terms under a service page headline. */

.crescita-meta {
  font-family: var(--font-secondary);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  margin: 0 0 var(--space-lg);
}

.crescita-meta__terms {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-2xs);
}

/* ── Closing CTA panel ───────────────────────────────────────── */

.crescita-cta {
  max-width: var(--width-text);
}

.crescita-cta__title { margin: 0 0 var(--space-md); }
.crescita-cta__lede { margin: 0 0 var(--space-lg); }

.crescita-cta__note {
  margin: var(--space-md) 0 0;
  font-size: var(--text-small);
  color: var(--color-text-on-dark-secondary);
}

/* ── Utility ─────────────────────────────────────────────────── */

.crescita-text-secondary { color: var(--color-text-secondary); }
.crescita-max-text { max-width: var(--width-text); }

/* Accessibility: visible focus ring, brand-consistent */
:focus-visible {
  outline: 2px solid var(--crescita-ocean);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Reveal on scroll — founder direction, 2026-09-06 ──────────
 *
 * **The default is visible.** The hidden state is applied only under
 * `html.crescita-js`, a class the reveal script sets on itself before first
 * paint. With no JavaScript, a failed script, a reader-mode extension or a
 * print job, every section is simply there — the animation can never be the
 * reason a clinic cannot read its own report.
 *
 * Exponential ease-out from 14px, not a bounce and not a fade from zero
 * opacity: the content should arrive settled, not perform.
 */
.crescita-js .crescita-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.crescita-js .crescita-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .crescita-js .crescita-reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .crescita-js .crescita-reveal { opacity: 1 !important; transform: none !important; }
  /* Not cosmetic: a swept headline is transparent text over a background
     image, and browsers drop background images when printing. Without this
     the H1 prints as a blank gap. */
  .crescita-hero__title,
  .crescita-home-hero h1,
  .crescita-diagnosi-hero h1,
  .crescita-prenota-title {
    animation: none !important;
    background-image: none !important;
    color: var(--crescita-midnight) !important;
    -webkit-text-fill-color: var(--crescita-midnight) !important;
  }
}