/* ============================================================
   AUTOESCUELA AL VOLANTE — Web prototype styles
   Syncrony Web Method: centralized CSS, kebab-case, tokens in :root.
   Palette and logo are provisional (see docs/contexto/BRIEF_PRIMER_BUILD.md).
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-body);
  background: var(--color-surface-page);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
input, select, textarea { font: inherit; color: inherit; }

/* ---------- Tokens ---------- */
:root {
  /* Brand — provisional, pending the official vector (see docs/contexto) */
  --color-brand-blue: #2648A2;
  --color-brand-blue-dark: #1B3675;
  --color-near-black: #131212;

  /* Surfaces */
  --color-surface-page: #FFFFFF;
  --color-surface-alt: #F4F6FB;
  --color-surface-card: #FFFFFF;
  --color-surface-notice: #EAF0FB;
  --color-surface-dark: var(--color-near-black);
  --color-line-soft: #E1E5EE;

  /* Text */
  --color-text-heading: var(--color-near-black);
  --color-text-body: #383B40;
  --color-text-muted: #6B6F76;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* Accent */
  --color-accent: var(--color-brand-blue);
  --color-accent-text: #FFFFFF;

  /* Form validation */
  --color-error: #B42318;
  --color-surface-error: #FCEBEA;

  /* Overlays */
  --color-overlay-dark: rgba(10, 12, 20, 0.66);
  --color-overlay-dark-strong: rgba(8, 9, 15, 0.78);

  /* Typography */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-nav: var(--font-body);
  --text-nav: 0.8rem;
  --tracking-nav: 0.08em;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.4rem;

  --leading-tight: 1.15;
  --leading-base: 1.6;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1240px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);
  --nav-height-initial: 96px;
  --nav-height-scrolled: 88px;
  --nav-height: var(--nav-height-scrolled);
  /* .ticker-track's own rendered height at desktop (18px padding-block +
     60px logo height, both sides) — used to shrink the desktop hero so the
     ticker fits in the initial viewport without scrolling. Desktop-only
     value: mobile hero height doesn't depend on this variable. */
  --ticker-visible-height: 96px;

  /* Surface detail */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(19, 18, 18, 0.06), 0 4px 14px rgba(19, 18, 18, 0.06);
  --shadow-elevated: 0 24px 56px rgba(19, 18, 18, 0.18);
  --border-width: 1px;
  --transition-base: 0.2s ease;
  --transition-slow: 0.4s ease;
}

/* ---------- Accessibility base ---------- */
.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;
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 2000;
  background: var(--color-near-black);
  color: var(--color-text-on-dark);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: top var(--transition-base);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); color: var(--color-text-heading); }
h3 { font-size: var(--text-xl); color: var(--color-text-heading); }
.eyebrow {
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---------- Layout ---------- */
.section-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.section {
  padding-block: var(--space-16);
}
.section--alt { background: var(--color-surface-alt); }
.section-heading { max-width: 62ch; margin-top: var(--space-4); }
.section-copy { color: var(--color-text-muted); margin-top: var(--space-3); max-width: 58ch; }
@media (max-width: 639px) {
  .section { padding-block: var(--space-12); }
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
}
.btn-primary:not(:disabled):not([aria-disabled="true"]):hover,
.btn-primary:not(:disabled):not([aria-disabled="true"]):focus-visible {
  background: var(--color-brand-blue-dark);
  border-color: var(--color-brand-blue-dark);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(38, 72, 162, 0.26);
}
/* The CDI light sweep, recolored for Al Volante and shared by every route. */
.btn-primary:not(:disabled):not([aria-disabled="true"]):hover::before,
.btn-primary:not(:disabled):not([aria-disabled="true"]):focus-visible::before {
  opacity: 1;
  transform: translateX(430%) skewX(-18deg);
  transition: transform 0.58s ease, opacity 0.16s ease;
}
.btn-secondary {
  background: transparent;
  color: var(--color-text-heading);
  border-color: var(--color-text-heading);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--color-text-heading);
  color: var(--color-surface-page);
  text-decoration: none;
}
/* On dark sections (final CTA) the outline flips to white. */
.final-cta-actions .btn-secondary {
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}
.final-cta-actions .btn-secondary:hover, .final-cta-actions .btn-secondary:focus-visible {
  background: var(--color-text-on-dark);
  color: var(--color-near-black);
}
.btn-block { width: 100%; }
button[disabled].btn-primary, button[disabled].btn-secondary {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Status badges ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-heading);
  white-space: normal;
  line-height: 1.35;
}
.status-badge--active { background: var(--color-accent); color: var(--color-accent-text); }
.status-badge--pending { background: var(--color-surface-notice); color: var(--color-brand-blue-dark); }
.status-badge--muted { background: rgba(19, 18, 18, 0.06); color: var(--color-text-muted); }

/* ============================================================
   NAV — one hamburger control at every size/state, opening the same
   full-panel menu. Two visual states: transparent/initial (home hero
   only) and solid (scrolled, OR any subpage via [data-nav-variant="solid"]
   matched directly in CSS — correct from first paint, no JS dependency).
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: background-color var(--transition-slow), box-shadow var(--transition-slow);
}
.site-nav--scrolled,
.site-nav[data-nav-variant="solid"] {
  background: var(--color-surface-page);
  box-shadow: 0 2px 20px rgba(19, 18, 18, 0.12);
}
.nav-container {
  position: relative;
  max-width: 1400px;
  margin-inline: auto;
  /* Constant at every scroll state (not just responsive breakpoints) — this
     is what keeps #nav-logo-slot's rect stable so js/main.js's measurement
     never fights the nav's own background/box-shadow transition. */
  padding: var(--space-2) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Reserves the docked logo's footprint in the flex row — invisible, never
   painted. The one real logo is #brand-logo below, position:fixed. */
.nav-logo-slot {
  visibility: hidden;
  flex-shrink: 0;
  height: 60px;
  width: auto;
  aspect-ratio: 2513 / 2157;
}

.nav-right { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }

.nav-links-desktop { display: none; }
.nav-link {
  font-family: var(--font-nav);
  font-size: var(--text-nav);
  font-weight: 700;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-text-heading);
  white-space: nowrap;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--color-accent); text-decoration: none; }

/* The single migrating hero/nav logo — always position:fixed, moved every
   scroll frame by js/main.js via translate3d()+scale() between
   #hero-logo-slot and #nav-logo-slot's measured rects. Its own untransformed
   size equals the hero-slot size (below) so scale(1) === "hero size". */
.brand-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  display: block;
  overflow: visible;
  width: min(25.5vw, 96px);
  opacity: 0;
  transform-origin: top left;
  will-change: transform;
}
.brand-logo.is-positioned { opacity: 1; }
.brand-logo-img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 180ms ease;
}
@media (max-width: 1023px) {
  /* The same migrating logo becomes a clean white mark while it sits over
     the dark mobile hero. JS removes this state at the exact threshold that
     turns the navigation white, restoring the original blue/black artwork. */
  .brand-logo.brand-logo--on-dark .brand-logo-img { filter: brightness(0) invert(1); }
}
@media (max-width: 639px) {
  /* Internal pages keep the same 76px nav footprint while giving the
     permanently docked logo enough air to remain fully inside the bar. */
  .site-nav[data-nav-variant="solid"] .nav-container { padding-block: 12px; }
  .site-nav[data-nav-variant="solid"] .nav-logo-slot { height: 52px; }
}
@media (min-width: 1024px) {
  .brand-logo { width: min(7.59375vw, 95.25px); }
}

/* Hamburger toggle — every size, both states; opens the anchored #nav-dropdown */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: var(--space-2);
}
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text-on-dark);
  transition: background-color var(--transition-base);
}
.site-nav--scrolled .nav-toggle-icon,
.site-nav--scrolled .nav-toggle-icon::before,
.site-nav--scrolled .nav-toggle-icon::after,
.site-nav[data-nav-variant="solid"] .nav-toggle-icon,
.site-nav[data-nav-variant="solid"] .nav-toggle-icon::before,
.site-nav[data-nav-variant="solid"] .nav-toggle-icon::after { background: var(--color-text-heading); }
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before { position: absolute; top: -7px; left: 0; }
.nav-toggle-icon::after { position: absolute; top: 7px; left: 0; }

/* Anchored dropdown — a direct child of #site-nav (position:fixed; left:0;
   right:0; no horizontal padding of its own), so `right:0` here lands on
   the true viewport edge, not nav-container's padded inner edge. Rounded
   only on the left so the right side visibly touches the screen edge.
   `top` is set inline, in px, by js/main.js (positionDropdown) — it tracks
   #nav-toggle's own getBoundingClientRect().bottom, not #site-nav's, since
   the nav bar's reserved logo height makes those two very different; the
   0 fallback below only matters before JS has run. Fits its content: no
   space-between, no vh-derived min-height, no full-height flex
   distribution, no fixed width — max-content sizing, compact padding, ends
   after the last link. Not a full-screen overlay: no backdrop, no scroll
   lock, no focus trap. */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1100;
  width: max-content;
  max-width: calc(100vw - 16px);
  height: auto;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--color-surface-page);
  color: var(--color-text-heading);
  border: var(--border-width) solid var(--color-line-soft);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: var(--shadow-elevated);
  padding: 4px;
}
.nav-dropdown.is-open { display: block; }
.nav-dropdown-links { display: flex; flex-direction: column; }
.nav-dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-heading);
  flex: none;
}
.nav-dropdown-link:hover, .nav-dropdown-link:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-accent);
  text-decoration: none;
}
.nav-dropdown-link--cta { color: var(--color-accent); }

@media (min-width: 1024px) {
  .nav-links-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.3s ease, opacity 0.3s ease;
  }
  .site-nav--scrolled .nav-links-desktop,
  .site-nav[data-nav-variant="solid"] .nav-links-desktop {
    max-width: 40rem;
    opacity: 1;
  }
  .nav-logo-slot { height: 80px; }
}

/* ============================================================
   HERO — white split-screen desktop / media band + white copy on mobile.
   Single markup source; the mobile-vs-desktop difference is CSS only.
   ============================================================ */
.hero {
  position: relative;
  background: var(--color-surface-page);
  color: var(--color-text-heading);
  overflow: hidden;
}

.hero-media {
  position: relative;
  height: min(52vh, 420px);
  min-height: 260px;
  /* Sits behind the whole scrolling collage track at every scroll position
     (not just .hero-media-set, which is only as tall as its own content) —
     this is what keeps blue continuously visible through every gap and
     every contain-fitted image's letterboxing, never black, never a bare
     card surface. */
  background: var(--color-brand-blue);
}
.hero-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* decorative only — must never intercept the swipe/hover */
  background: linear-gradient(180deg, rgba(10,12,20,0) 60%, rgba(10,12,20,0.25) 100%);
}
.hero-media-loop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-media-track {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.hero-media-loop:hover .hero-media-track,
.hero-media-loop:focus-within .hero-media-track {
  animation-play-state: paused;
}
@keyframes hero-media-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.hero-media-set { display: flex; flex-direction: column; width: 100%; flex-shrink: 0; }
/* The four .hero-collage-row wrappers exist for desktop's composed layout
   only — display:contents removes the wrapper from the box model below
   1024px, promoting its 2 images to be direct flex children of
   .hero-media-set, so mobile's swipe-panel mechanism (below) sees the same
   flat list of 8 individual images it always has, unaware the rows exist. */
.hero-collage-row { display: contents; }
/* Base: mobile default (full-width swipeable panel — overridden per
   breakpoint below). Desktop's row-based sizing lives entirely in the
   min-width:1024px block, since it's art direction, not something that
   degrades gracefully by itself. */
.hero-collage-item {
  display: block;
  width: 100%;
  /* Without this, the <img width height> HTML attributes leave an implicit
     height set (a low-priority presentational hint, but still a definite
     value) that the aspect-ratio below can't override — only an auto
     height lets aspect-ratio compute it from width. Without height:auto
     here, every image rendered at its raw intrinsic pixel height instead
     (one asset is 4288px tall), blowing out the whole collage. */
  height: auto;
  object-fit: cover;
}
.hero-collage-item--contain { object-fit: contain; }

.hero-container { position: relative; z-index: 1; width: 100%; }

/* Geometry reference for the migrating #brand-logo's hero-state rect — see
   components/shared/nav.html. Invisible; sized/positioned identically to
   .brand-logo's own (untransformed) box so scale(1) truly means "here".
   Mobile: the hero is media-band-then-white-copy stacked, so the corner is
   offset below the media band, not the very top of .hero. Desktop: media is
   a right-hand column, so the true top-left corner is already white. */
.hero-logo-slot {
  position: absolute;
  z-index: 2;
  top: calc(min(52vh, 420px) + 20px);
  left: 20px;
  width: min(25.5vw, 96px);
  aspect-ratio: 2513 / 2157;
}

.hero-copy {
  text-align: center;
  /* Clears the corner-pinned logo + a deliberate gap, not a crowd. */
  padding-top: 170px;
  padding-bottom: var(--space-12);
}
.hero-title { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; width: max-content; max-width: 100%; margin-inline: auto; }
.hero-title-line {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2rem);
  color: var(--color-text-heading);
}
.hero-title-wordmark {
  display: block;
  aspect-ratio: 2451 / 851;
  /* The asset (scripts/derive_brand_assets.py) is a tight crop — just the
     lettering and its two underline strokes, ~6px safety margin, no design
     padding baked in — so this box's own height:auto plus this aspect-ratio
     already matches the artwork almost exactly: nothing left for
     object-fit to "contain", no fixed/cropping height anywhere in this
     chain. The lower stroke makes this canvas taller relative to its width
     than before; width is intentionally unchanged from the prior asset so
     the lettering itself renders at the same size, with the extra height
     simply extending the box downward. */
  width: min(66%, 233px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  min-width: 0;
}
/* Desktop-only H1 variant (plain text, no wordmark image) — hidden below
   1024px, where .hero-title-line + .hero-title-wordmark render instead. The
   two variants are never visible together, so the H1's accessible name
   always resolves to whichever one CSS shows at the current breakpoint. */
.hero-title-desktop { display: none; }
/* Desktop-only wordmark image, restored below the H1 as a separate element
   (alt="" + aria-hidden="true" in the HTML — never part of the H1's
   accessible name). Same tight-cropped asset scripts/derive_brand_assets.py
   produces; not modified here. */
.hero-wordmark-desktop { display: none; }
.hero-promise {
  margin-top: var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text-body);
  max-width: 34rem;
  margin-inline: auto;
}
.hero-practice-areas { margin-top: var(--space-6); }
/* Compact plain-text lists; no capsules, equal-width cells or interaction. */
.hero-practice-areas-heading {
  font-family: Aptos, Calibri, system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2);
}
.hero-practice-areas-rows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin: 0;
  padding: 2px 0;
  max-width: 100%;
  overflow: visible;
  text-align: left;
}
.hero-practice-areas-row {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  justify-content: flex-start;
  gap: 2px 10px;
}
.hero-practice-area {
  flex: 0 0 auto;
  font-family: Aptos, Calibri, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.15vw, 14px);
  line-height: 1.5;
  color: var(--color-brand-blue-dark);
  white-space: nowrap;
}
.hero-action-row {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-cta-group .btn-primary { white-space: nowrap; }

/* Temporary September promotion. The complete widget is isolated inside
   .promo-countdown so it can be removed from the Hero with one HTML block. */
.promo-countdown {
  position: relative;
  width: min(100%, 430px);
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(38, 72, 162, 0.32);
  border-radius: 18px;
  background: #FFFFFF;
  color: var(--color-text-heading);
  text-align: left;
  text-shadow: none;
  box-shadow: 0 14px 34px rgba(25, 51, 116, 0.12);
}
.promo-countdown::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--color-brand-blue-dark), var(--color-brand-blue), #111111);
}
.promo-countdown-kicker {
  margin: 0 0 5px;
  color: var(--color-brand-blue-dark);
  font-family: Aptos, Calibri, system-ui, sans-serif;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.promo-countdown-title {
  margin: 0 0 10px;
  font-family: Aptos, Calibri, system-ui, sans-serif;
  font-size: 0.83rem;
  line-height: 1.3;
}
.promo-countdown-title strong { color: var(--color-brand-blue-dark); font-weight: 800; }
.promo-countdown-clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.promo-countdown-unit {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 7px 3px 6px;
  border: 1px solid rgba(38, 72, 162, 0.14);
  border-radius: 10px;
  background: var(--color-surface-notice);
  color: var(--color-brand-blue-dark);
}
.promo-countdown-unit strong {
  font-family: Aptos, Calibri, system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.promo-countdown-unit small {
  margin-top: 4px;
  overflow: hidden;
  font-family: Aptos, Calibri, system-ui, sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.promo-countdown-status { margin: 0; }
.promo-countdown.is-expired .promo-countdown-clock { opacity: 0.48; }
.promo-countdown.is-expired .promo-countdown-status {
  margin-top: 9px;
  color: var(--color-brand-blue-dark);
  font-family: Aptos, Calibri, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  /* Mobile art direction: the optimized collage becomes a full-height,
     vertically ascending background. Only transform is animated; the
     contrast layer is static and the copy stays in its own paint layer. */
  .hero {
    min-height: 100svh;
    background: var(--color-brand-blue);
    color: #FFFFFF;
  }
  .hero-media { position: absolute; inset: 0; height: auto; min-height: 0; }
  .hero-media-overlay {
    background: linear-gradient(180deg, rgba(8, 9, 15, 0.74) 0%, rgba(8, 9, 15, 0.62) 42%, rgba(8, 9, 15, 0.84) 100%);
  }
  .hero-media-loop { overflow: hidden; }
  .hero-media-track {
    flex-direction: column;
    width: min(86%, 360px);
    height: auto;
    margin-inline: auto;
    animation: none;
  }
  html.reveal-enabled .hero-media-track { animation: hero-media-scroll 88s linear infinite; }
  html.reveal-enabled .hero-media-track.is-motion-paused { animation-play-state: paused; }
  .hero-media-set {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 8px;
    margin-bottom: 8px;
  }
  .hero-media-set:nth-of-type(2) { display: flex; }
  .hero-collage-row { display: flex; gap: 8px; }
  .hero-collage-item {
    display: block;
    min-width: 0;
    width: auto;
    height: auto;
    border-radius: 4px;
    margin: 0;
  }
  .hero-collage-item--third { flex: 1 1 0; aspect-ratio: 3 / 4; }
  .hero-collage-item--two-third { flex: 2 1 0; }
  .hero-collage-item--half { flex: 1 1 0; aspect-ratio: 3 / 2; }
  .hero-collage-item--portrait-half { flex: 1 1 0; aspect-ratio: 4 / 5; }
  .hero-container {
    z-index: 2;
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .hero-logo-slot { z-index: 3; top: 20px; left: 20px; }
  .hero-copy {
    width: 100%;
    padding-top: clamp(132px, 21svh, 164px);
    padding-bottom: clamp(44px, 8svh, 72px);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
  }
  .hero-title-line,
  .hero-promise,
  .hero-practice-areas-heading,
  .hero-practice-area { color: #FFFFFF; }
  .hero-title-wordmark { width: min(72%, 250px); filter: brightness(0) invert(1); }
  .hero-promise { margin-top: var(--space-4); color: rgba(255, 255, 255, 0.94); }
  .hero-practice-areas { margin-top: var(--space-4); }
  .hero-practice-areas-heading { color: rgba(255, 255, 255, 0.78); }
  .hero-practice-areas-rows { text-align: center; }
  .hero-practice-areas-row { justify-content: center; }
  .hero-practice-area { color: rgba(255, 255, 255, 0.94); }
  .hero-action-row { margin-top: var(--space-6); }
  .promo-countdown {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(7, 20, 54, 0.88);
    color: #FFFFFF;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
  }
  .promo-countdown-kicker,
  .promo-countdown-title strong,
  .promo-countdown.is-expired .promo-countdown-status { color: #FFFFFF; }
  .promo-countdown-unit {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
  }
  .hero-cta-group .btn-primary {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--color-brand-blue-dark);
    text-shadow: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  }
  .hero-cta-group .btn-primary:hover,
  .hero-cta-group .btn-primary:focus-visible {
    background: var(--color-surface-notice);
    border-color: var(--color-surface-notice);
    color: var(--color-brand-blue-dark);
  }
}

@media (min-width: 1024px) {
  /* Shortened by the ticker's own rendered height, so the ticker fits in
     the initial viewport with nothing to scroll for — see
     --ticker-visible-height. .hero-media is inset:0 against .hero, so it
     inherits the same reduced height automatically. */
  .hero { min-height: calc(100svh - var(--ticker-visible-height)); padding-inline: 0; }
  .hero-media { position: absolute; inset: 0; height: auto; min-height: 0; left: 52%; right: 0; }
  html.reveal-enabled .hero-media-track { animation: hero-media-scroll 78s linear infinite; }
  /* .hero-media stays the complete blue panel (full 48%-of-viewport width) —
     only the track narrows and centers within it, so blue shows as two
     symmetrical margins on either side of the collage rather than the
     mosaic spanning the whole panel edge to edge. */
  .hero-media-track { width: min(60%, 400px); margin-inline: auto; }
  /* Seven composed rows, not a grid: each .hero-collage-row is its own flex
     row, gap:12px between rows AND set as margin-bottom (see below) so the
     seam between the two looped sets is the same 12px as every internal
     row gap. flex-shrink:0 still matters — .hero-media-set is itself a
     flex item of .hero-media-track (which stacks the two sets for the
     loop), so it must not shrink. */
  .hero-media-set {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Makes both looped copies of this set exactly the same total height
       (content + trailing gap), which is what makes translateY(-50%) land
       exactly on the seam — a plain gap on .hero-media-track instead would
       split that 12px unevenly between "half the track" and "the actual
       seam", causing a small jump every loop. */
    margin-bottom: 12px;
    flex-shrink: 0;
  }
  .hero-collage-row { display: flex; gap: 12px; }
  /* The narrower cell in a third/two-third pair gets a fixed aspect-ratio,
     which is what actually sets the row's height; the two-third sibling has
     no aspect-ratio of its own, so flexbox's default align-items:stretch
     grows it to match — no JS, no measured heights, exact by construction. */
  .hero-collage-item--third { flex: 1 1 0; aspect-ratio: 3 / 4; }
  .hero-collage-item--two-third { flex: 2 1 0; }
  .hero-collage-item--half { flex: 1 1 0; aspect-ratio: 3 / 2; }
  .hero-collage-item--portrait-half { flex: 1 1 0; aspect-ratio: 4 / 5; }
  .hero-container { min-height: calc(100svh - var(--ticker-visible-height)); }
  /* Upper-right of the white 52% column, not the viewport: right is measured
     from .hero's own edge (same containing block .hero-media's left:52%
     uses), so calc(48% + 40px) lands 40px clear of the carousel boundary
     regardless of viewport width. left:auto is required — with width
     already set, an absolutely-positioned box honours right only when left
     is auto. 75% of the prior size (min(10.125vw,127px)) — top/right stay
     put, so the 40px carousel gap is untouched, only the box itself shrinks. */
  .hero-logo-slot { top: 28px; left: auto; right: calc(48% + 40px); width: min(7.59375vw, 95.25px); }
  /* .hero's min-height already budgets against 100svh minus the logo band
     (--ticker-visible-height) — but a min-height is only a floor, so if
     .hero-copy's own content needs more room than that budget, .hero grows
     past it and pushes the band below the fold. The fix has to be on the
     content side: every vertical gap below is an svh-relative clamp, not a
     fixed value, so they compress together as viewport height shrinks and
     the whole stack keeps fitting the budget at typical desktop heights —
     while still allowing full natural growth (never a hard cap, never
     hidden overflow) at genuinely short heights or larger text zoom. */
  .hero-copy { text-align: left; max-width: 49%; min-width: 0; padding-top: clamp(16px, 5svh, 48px); padding-bottom: clamp(24px, 6svh, 64px); }
  .hero-title { align-items: flex-start; margin-inline: 0; }
  .hero-title-line, .hero-title-wordmark { display: none; }
  .hero-title-desktop {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-heading);
    font-size: clamp(2.7rem, 3.4vw, 3.6rem);
  }
  .hero-wordmark-desktop {
    display: block;
    margin-top: var(--space-2);
    aspect-ratio: 2451 / 851;
    width: min(64%, 345px); /* previously-approved displayed size */
    max-width: 100%;
    height: auto;
    object-fit: contain;
    min-width: 0;
  }
  .hero-promise { margin-inline: 0; margin-top: clamp(12px, 2.2svh, 24px); }
  .hero-practice-areas { margin-top: clamp(12px, 2.2svh, 24px); }
  .hero-action-row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(12px, 1.5vw, 20px);
    margin-top: clamp(16px, 3svh, 32px);
  }
  .hero-cta-group { flex: 0 0 auto; justify-content: flex-start; }
  .promo-countdown { flex: 1 1 315px; max-width: 350px; min-width: 0; padding: 12px; }

  /* Desktop sizing for the seven composed rows — width comes from the flex
     classes above; object-position per image is set inline in the HTML
     (it's a one-off per photo, not worth a nth-child rule per row). Subtle
     rounding and zero decoration, per this round's brief. */
  .hero-collage-item {
    display: block;
    min-width: 0; /* flex-basis:0 items still default to min-width:auto otherwise, which fights the third/two-third ratio with the image's own intrinsic width */
    border-radius: 6px;
    transform: none;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  /* The seven-row composition above is already static-per-frame (only the
     track's translateY animates it) and already legible on its own, so
     reduced motion only needs to stop that animation and drop the
     duplicate set — no separate layout override required. Letting
     .hero-media/.hero-media-loop size to content (instead of a fixed
     inset:0 viewport window) shows the whole static composition at once. */
  .hero-media { position: static; }
  .hero-media-loop { overflow: visible; position: static; }
  .hero-media-track { display: block; width: 100%; transform: none !important; }
  .hero-media-set:nth-of-type(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .hero-media-track { animation: none !important; transform: none !important; }
  .hero-media-set:nth-of-type(2) { display: none; }
}

/* ============================================================
   TICKER — moving logo band: white surface, spacing only between logos
   ============================================================ */
.ticker-section {
  background: var(--color-surface-page);
  overflow: hidden;
  /* Mobile target: 48px logo + 16px top/bottom padding = 80px band. */
  --ticker-logo-height: 48px;
  --ticker-logo-gap: 48px;
}
.ticker-track {
  display: flex;
  width: max-content;
  padding-block: 16px;
  animation: ticker-scroll 40s linear infinite;
}
.ticker-section:hover .ticker-track,
.ticker-section:focus-within .ticker-track {
  animation-play-state: paused;
}
.ticker-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--ticker-logo-gap);
  /* Half a gap at each edge keeps the repeated-set seam evenly spaced. */
  padding-inline: calc(var(--ticker-logo-gap) / 2);
}
/* Each logo gets a fixed-height container and width:auto — never a shared
   fixed width — so every logo scales by its own real aspect ratio with
   zero cropping or distortion; object-fit:contain is a no-op safety net
   for the same reason. This is why the one portrait logo (logo-2, ratio
   0.8) naturally renders narrower than the wide ones instead of being
   stretched or squeezed to match them. */
.ticker-logo-item { display: flex; align-items: center; height: var(--ticker-logo-height); }
.ticker-logo { display: block; height: 100%; width: auto; object-fit: contain; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (min-width: 1024px) {
  .ticker-section {
    /* Desktop target: 60px logo + 18px top/bottom padding = 96px band —
       matches --ticker-visible-height, which shortens the hero by the
       same amount so the whole band fits the initial viewport. */
    --ticker-logo-height: 60px;
    --ticker-logo-gap: 72px;
  }
  .ticker-track { padding-block: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: 100%; }
  .ticker-set:nth-of-type(2) { display: none; }
  .ticker-set { flex-wrap: wrap; }
}

/* ============================================================
   ENROLLMENT (Matrícula y trámites online)
   ============================================================ */
.enrollment-steps {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
.enrollment-step {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 28px;
  background: var(--color-surface-card);
  border: 1px solid rgba(38, 72, 162, 0.35);
  border-top: 3px solid var(--color-brand-blue);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 22px rgba(38, 72, 162, 0.06);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}
.enrollment-step:hover, .enrollment-step:focus-visible {
  transform: translateY(-5px);
  border-color: var(--color-brand-blue);
  background: #F9FAFE;
  box-shadow: 0 18px 36px rgba(38, 72, 162, 0.13);
  text-decoration: none;
}
.enrollment-step-number {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--color-brand-blue);
  font-family: var(--font-body);
  font-size: 2.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.07em;
  font-weight: 700;
}
.enrollment-step-label {
  min-height: 46px;
  padding-right: 54px;
  color: var(--color-brand-blue-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.enrollment-step h3 { font-size: 1.55rem; text-wrap: balance; }
.enrollment-step p { color: var(--color-text-body); font-size: var(--text-sm); line-height: 1.7; }
.enrollment-step-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}
.enrollment-step-body > p { min-width: 0; }
.enrollment-step-image {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  justify-self: end;
  object-fit: contain;
  border-radius: 12px;
  /* Keep the whole supplied phone and hand, including every screen step. */
  box-shadow: 0 4px 16px rgba(19, 18, 18, 0.08);
}
.enrollment-step-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-soft);
  color: var(--color-brand-blue);
  font-size: var(--text-xs);
  font-weight: 700;
}
.enrollment-step-link > span { transition: transform var(--transition-base); }
.enrollment-step:hover .enrollment-step-link > span,
.enrollment-step:focus-visible .enrollment-step-link > span { transform: translateX(4px); }
.enrollment-promise { display: block; margin-top: var(--space-2); color: var(--color-brand-blue-dark); font-weight: 600; }
.enrollment-cta { margin-top: var(--space-12); display: flex; }
@media (min-width: 1200px) {
  .enrollment-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 480px) and (max-width: 1199px) {
  .enrollment-step-body { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); }
}
@media (max-width: 479px) {
  .enrollment-step-body { grid-template-columns: minmax(0, 1fr); }
  .enrollment-step-image { width: min(100%, 220px); justify-self: center; }
}

/* ============================================================
   PERMITS mosaic (adapted from the CDI "Sectores" concept)
   ============================================================ */
.permit-grid {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: stretch;
}
.permit-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(38, 72, 162, 0.28);
  background: var(--color-surface-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.permit-card:hover, a.permit-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(38, 72, 162, 0.14);
  border-color: var(--color-accent);
  text-decoration: none;
}
.permit-card--featured {
  background: var(--color-brand-blue);
  color: var(--color-text-on-dark);
  border-color: var(--color-brand-blue);
}
.permit-card--recycling {
  background: var(--color-near-black);
  color: var(--color-text-on-dark);
  border-color: var(--color-near-black);
}
.permit-card--recycling:hover,
.permit-card--recycling:focus-visible {
  border-color: var(--color-brand-blue);
  box-shadow: 0 16px 32px rgba(19, 18, 18, 0.22);
}
.permit-card--primary { align-self: stretch; }
.permit-featured-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(88px, 9vw, 124px);
  align-items: start;
  gap: clamp(12px, 2vw, 24px);
  min-height: clamp(132px, 12vw, 166px);
}
.permit-featured-heading { min-width: 0; }
.permit-featured-heading h3 { margin: 0; }
.permit-card-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.permit-card-image--learner { object-fit: contain; background: #FFFFFF; }
.permit-card-image--recycling { object-position: center; }
.permit-card .status-badge { align-self: flex-start; max-width: 100%; font-size: 0.6875rem; padding: 5px 9px; }
.permit-icon { color: var(--color-accent); }
.permit-icon svg { width: 34px; height: 34px; }
.permit-card h3 { font-size: 1.375rem; text-wrap: balance; overflow-wrap: break-word; }
.permit-card--featured h3,
.permit-card--recycling h3 { font-size: var(--text-2xl); color: #FFFFFF; }
.permit-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.permit-card--featured p,
.permit-card--recycling p { color: rgba(255, 255, 255, 0.92); }
.permit-detail { font-size: var(--text-xs); color: #FFFFFF; padding-block: var(--space-3); border-block: 1px solid rgba(255, 255, 255, 0.25); }
.permit-link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.permit-card--featured .permit-link,
.permit-card--recycling .permit-link { color: var(--color-text-on-dark); }
.permit-upcoming-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  min-width: 0;
}
.permit-card--compact {
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-4);
}
.permit-card--compact .permit-icon svg { width: 28px; height: 28px; }
.permit-card--compact h3 { margin-top: var(--space-1); }

@media (max-width: 399px) {
  .permit-featured-header { grid-template-columns: minmax(0, 1fr) 72px; }
}
@media (min-width: 1024px) {
  .permit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .permit-card { padding: clamp(20px, 2vw, 28px); }
  .permit-card--compact { padding: clamp(16px, 1.6vw, 22px); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .permit-grid { grid-template-columns: repeat(2, 1fr); }
  .permit-upcoming-stack { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
}

/* Three comparable plans with a compact services column. */
.permits-intro { max-width: 760px; }
.permit-offers {
  margin-top: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 0.88fr);
  align-items: stretch;
  gap: clamp(16px, 1.5vw, 24px);
}
.permit-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 1.5vw, 24px);
}
.permit-plan {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 1.65vw, 28px);
  border: 1px solid rgba(38, 72, 162, 0.28);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: 0 10px 26px rgba(38, 72, 162, 0.08);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.permit-plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--color-brand-blue);
}
.permit-plan:hover,
.permit-plan:focus-within {
  transform: translateY(-5px);
  border-color: var(--color-brand-blue);
  box-shadow: 0 18px 36px rgba(38, 72, 162, 0.14);
}
.permit-plan--complete {
  border-color: var(--color-brand-blue);
  background: var(--color-brand-blue);
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(38, 72, 162, 0.2);
}
.permit-plan--complete::before { background: #FFFFFF; }
.permit-plan--complete:hover,
.permit-plan--complete:focus-within { border-color: var(--color-near-black); }
.permit-plan-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}
.permit-plan-heading > div:first-child { min-height: 3.5rem; }
.permit-plan-kicker,
.permit-service-label {
  margin: 0 0 7px;
  color: var(--color-brand-blue);
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}
.permit-plan--complete .permit-plan-kicker { color: rgba(255, 255, 255, 0.76); }
.permit-plan h3 {
  margin: 0;
  color: var(--color-text-heading);
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  line-height: 1.08;
  text-wrap: balance;
}
.permit-plan--complete h3 { color: #FFFFFF; }
.permit-plan-price { min-width: 0; text-align: left; }
.permit-plan-price strong {
  display: block;
  color: var(--color-brand-blue);
  font-size: clamp(2.35rem, 2.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.permit-plan-price span {
  display: block;
  margin-top: 7px;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}
.permit-plan--complete .permit-plan-price strong,
.permit-plan--complete .permit-plan-price span { color: #FFFFFF; }
.permit-plan-summary {
  max-width: 52ch;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.permit-plan--complete .permit-plan-summary { color: rgba(255, 255, 255, 0.86); }
.permit-plan-list {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.permit-plan-list li {
  position: relative;
  padding-left: 18px;
  color: var(--color-text-body);
  font-size: 0.9rem;
  line-height: 1.4;
}
.permit-plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.47em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand-blue);
}
.permit-plan--complete .permit-plan-list li { color: #FFFFFF; }
.permit-plan--complete .permit-plan-list li::before { background: #FFFFFF; }
.permit-plan-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(38, 72, 162, 0.2);
}
.permit-plan-payment p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(38, 72, 162, 0.07);
}
.permit-plan-payment span,
.permit-plan-payment strong { display: block; }
.permit-plan-payment span {
  color: var(--color-text-muted);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.permit-plan-payment strong {
  margin-top: 0;
  text-align: right;
  max-width: 112px;
  color: var(--color-text-heading);
  font-size: 0.96rem;
  line-height: 1.3;
}
.permit-plan-payment strong small {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
}
.permit-plan-payment-title {
  margin: 0 0 2px;
  color: var(--color-brand-blue);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.4;
}
.permit-plan--complete .permit-plan-payment { border-top-color: rgba(255, 255, 255, 0.26); }
.permit-plan--complete .permit-plan-payment p { background: rgba(255, 255, 255, 0.11); }
.permit-plan--complete .permit-plan-payment span { color: rgba(255, 255, 255, 0.7); }
.permit-plan--complete .permit-plan-payment strong { color: #FFFFFF; }
.permit-plan-note {
  min-height: 2.7em;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.permit-plan--complete .permit-plan-note { color: rgba(255, 255, 255, 0.72); }
.permit-plan-action {
  align-self: stretch;
  margin-top: 2px;
  padding: 14px 12px;
  font-size: 0.74rem;
  text-align: center;
}
.permit-plan--complete .permit-plan-action {
  border-color: var(--color-near-black);
  background: var(--color-near-black);
}
.permit-services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-self: start;
  align-content: start;
  gap: clamp(16px, 1.5vw, 24px);
}
.permit-service {
  min-width: 0;
  padding: clamp(19px, 2vw, 25px);
  border: 1px solid rgba(38, 72, 162, 0.22);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.permit-service:hover,
.permit-service:focus-within {
  transform: translateY(-3px);
  border-color: var(--color-brand-blue);
  box-shadow: 0 12px 26px rgba(38, 72, 162, 0.11);
}
.permit-plan--theory { background: linear-gradient(145deg, #EAF0FF, #FFFFFF 68%); }
.permit-service--recycling {
  border-color: var(--color-near-black);
  background: var(--color-near-black);
  color: #FFFFFF;
}
.permit-service--recycling .permit-service-label { color: rgba(255, 255, 255, 0.62); }
.permit-service h3 {
  margin: 0;
  color: var(--color-text-heading);
  font-size: clamp(1.15rem, 1.35vw, 1.4rem);
  line-height: 1.15;
}
.permit-service--recycling h3 { color: #FFFFFF; }
.permit-service > p:not(.permit-service-label) {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.permit-service--recycling > p:not(.permit-service-label) { color: rgba(255, 255, 255, 0.78); }
.permit-service-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 17px;
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.permit-service-link span { transition: transform var(--transition-base); }
.permit-service-link:hover span,
.permit-service-link:focus-visible span { transform: translateX(4px); }
.permit-tariff-preview,
.permit-tariffs { display: grid; gap: 8px; margin-top: 15px; }
.permit-tariff-preview > div,
.permit-tariffs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 0.86rem;
}
.permit-tariff-preview dd,
.permit-tariffs dd { white-space: nowrap; font-weight: 800; }
.permit-tariff-details { margin-top: 14px; }
.permit-tariff-details summary {
  cursor: pointer;
  color: var(--color-brand-blue);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.permit-tariff-details[open] summary { margin-bottom: 4px; }
.permit-tariff-details p {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}
@media (min-width: 760px) {
  /* Shared tracks align headings, descriptions, payments and actions across plans. */
  .permit-plan {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
  }
  .permit-plan-payment { margin-top: 0; }
  .permit-plan-note { align-self: start; }
  .permit-plan-action { align-self: end; }
}
@media (max-width: 1199px) {
  .permit-offers { grid-template-columns: minmax(0, 1fr); }
  .permit-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permit-services { grid-template-rows: auto; }
}
@media (max-width: 759px) {
  .permit-plans { grid-template-columns: minmax(0, 1fr); }
  .permit-plan-heading > div:first-child,
  .permit-plan-summary { min-height: 0; }
  .permit-plan-heading { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; gap: 16px; }
  .permit-plan-price { text-align: right; max-width: 140px; }
  .permit-plan-note { min-height: 0; }
  .permit-services { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .permit-plan-heading { grid-template-columns: minmax(0, 1fr); }
  .permit-plan-price { text-align: left; max-width: none; }
}

/* ============================================================
   TEAM — three people and the manifesto share one blue band
   ============================================================ */
.team-section { padding-block: clamp(24px, 3vw, 36px) var(--space-12); background: var(--color-brand-blue); color: #FFFFFF; }
.team-heading,
.team-manifesto-heading { color: #FFFFFF; font-family: var(--font-nav); font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.1em; }
.team-showcase { display: grid; gap: var(--space-12); }
.team-roster,
.team-manifesto { min-width: 0; }
.team-grid { margin-top: var(--space-6); }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.team-member { min-width: 0; text-align: center; }
.team-photo-slot {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-3);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.8);
}
.team-photo-slot:has(img) { position: relative; padding: 0; border: 0; background: transparent; }
.team-photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.team-name { margin-top: var(--space-4); font-family: var(--font-heading); font-size: var(--text-xl); color: #FFFFFF; }
.team-role { margin-top: var(--space-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.team-name + .team-role { margin-top: var(--space-2); }
.team-description { margin-top: var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.team-manifesto {
  display: flex;
  flex-direction: column;
}
.team-manifesto-copy {
  margin-top: var(--space-6);
  max-height: clamp(300px, 25vw, 350px);
  overflow-y: auto;
  padding: clamp(20px, 2.6vw, 32px);
  border-block: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(10, 25, 66, 0.12);
  scrollbar-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.12);
  scrollbar-width: thin;
}
.team-manifesto-copy:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.team-manifesto-copy p { color: rgba(255, 255, 255, 0.92); font-size: var(--text-base); line-height: 1.72; }
.team-manifesto-copy p + p { margin-top: var(--space-5); }
@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .team-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: start; gap: clamp(36px, 5vw, 72px); }
}
@media (max-width: 639px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-member:last-child { grid-column: 1 / -1; width: calc((100% - 20px) / 2); justify-self: center; }
  .team-manifesto-heading { font-size: var(--text-base); }
  .team-manifesto-copy { max-height: 320px; padding-inline: var(--space-4); }
}

/* ============================================================
   TRUST — trajectory + approved Google reviews
   ============================================================ */
.trust-content { max-width: 62ch; }
.trust-subline {
  margin-top: var(--space-3);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--color-accent);
}
.trust-copy { margin-top: var(--space-4); color: var(--color-text-muted); }
.review-carousel { margin-top: var(--space-10); }
.review-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 340px);
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  padding: 4px 2px 12px;
}
.review-carousel-track::-webkit-scrollbar { display: none; }
.review-carousel-track:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.review-card {
  min-width: 0;
  height: 100%;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(38, 72, 162, 0.24);
  border-top: 4px solid var(--color-brand-blue);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.review-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-brand-blue);
  box-shadow: 0 14px 30px rgba(38, 72, 162, 0.13);
}
.review-card-header {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}
.review-card-media {
  width: 112px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-notice);
}
.review-card-image { width: 100%; height: 100%; object-fit: cover; }
.review-card-image--ana { object-position: center 34%; }
.review-card-image--alejandra { object-position: center 42%; }
.review-card-image--rosario { object-position: center 38%; }
.review-card-identity { min-width: 0; }
.review-card-rating { color: #E9A900; font-size: 1rem; line-height: 1; letter-spacing: 0.13em; }
.review-card-copy { margin: 0; }
.review-card-copy p { color: var(--color-text-body); font-size: 1rem; line-height: 1.58; }
.review-card-author { margin-top: 10px; }
.review-card-name { font-size: var(--text-base); font-weight: 750; color: var(--color-text-heading); }
.review-card-source { margin-top: 2px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand-blue); }
.review-carousel-controls {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.review-carousel-controls[hidden] { display: none; }
.review-carousel-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-brand-blue);
  border-radius: 50%;
  background: var(--color-surface-card);
  color: var(--color-brand-blue);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base), opacity var(--transition-base);
}
.review-carousel-button:hover,
.review-carousel-button:focus-visible { background: var(--color-brand-blue); color: #FFFFFF; }
.review-carousel-button:disabled { opacity: 0.3; cursor: default; }
.review-carousel-button:disabled:hover { background: var(--color-surface-card); color: var(--color-brand-blue); }
.review-actions { margin-top: var(--space-6); display: flex; justify-content: center; }
@media (min-width: 720px) {
  .review-carousel-track { grid-auto-columns: calc((100% - var(--space-4)) / 2); }
}
@media (min-width: 1100px) {
  .review-carousel-track { grid-auto-columns: calc((100% - (2 * var(--space-4))) / 3); }
  .review-carousel-track:not(:has(.review-card:nth-child(3))) { justify-content: center; }
}
@media (max-width: 719px) {
  .review-carousel-controls { display: none; }
}
@media (max-width: 380px) {
  .review-card-header { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); }
  .review-card-media { width: 96px; }
}

/* ============================================================
   CONTACT teaser (home)
   ============================================================ */
.contact-teaser-grid {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
.contact-field {
  min-width: 0;
  padding: 28px;
  background: var(--color-surface-card);
  border: 1px solid rgba(38, 72, 162, 0.28);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: 0 4px 18px rgba(38, 72, 162, 0.04);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.contact-field:hover, .contact-field:focus-within { border-color: var(--color-brand-blue); box-shadow: 0 12px 28px rgba(38, 72, 162, 0.1); }
a.contact-field:hover, a.contact-field:focus-visible { transform: translateY(-4px); text-decoration: none; }
.contact-field-label {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brand-blue);
}
.contact-field-value { font-size: var(--text-xl); font-weight: 600; line-height: 1.45; color: var(--color-text-heading); }
.contact-field-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.contact-field-action { margin-top: auto; color: var(--color-brand-blue); font-size: var(--text-xs); font-weight: 700; }
.contact-hours { display: flex; flex-direction: column; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.contact-teaser-layout { display: grid; gap: var(--space-12); }
.contact-teaser-intro { min-width: 0; }
.contact-teaser-intro .section-heading { max-width: 17ch; }
.contact-teaser-cta { margin-top: var(--space-8); }
.contact-teaser-list { min-width: 0; border-top: 2px solid var(--color-brand-blue); }
.contact-teaser-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(38, 72, 162, 0.3);
}
.contact-teaser-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.contact-teaser-value { width: max-content; max-width: 100%; font-size: clamp(1.125rem, 2.2vw, 1.55rem); font-weight: 650; line-height: 1.35; color: var(--color-text-heading); }
a.contact-teaser-value { transition: color var(--transition-base), transform var(--transition-base); }
a.contact-teaser-value:hover,
a.contact-teaser-value:focus-visible { color: var(--color-brand-blue); text-decoration: none; transform: translateX(3px); }
.contact-teaser-value small { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.contact-teaser-hours { display: flex; flex-wrap: wrap; gap: 4px var(--space-6); font-variant-numeric: tabular-nums; }
.contact-teaser-hours small { flex-basis: 100%; margin-top: 4px; }
@media (min-width: 800px) {
  .contact-teaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-teaser-layout { grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr); gap: clamp(56px, 9vw, 128px); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before { display: none; }
  .btn-primary:not(:disabled):not([aria-disabled="true"]):hover,
  .btn-primary:not(:disabled):not([aria-disabled="true"]):focus-visible,
  .enrollment-step:hover, .enrollment-step:focus-visible,
  .enrollment-step:hover .enrollment-step-link > span,
  .enrollment-step:focus-visible .enrollment-step-link > span,
  .permit-card:hover, a.permit-card:focus-visible,
  .permit-plan:hover, .permit-plan:focus-within,
  .permit-service:hover, .permit-service:focus-within,
  .permit-service-link:hover span, .permit-service-link:focus-visible span,
  a.contact-field:hover, a.contact-field:focus-visible { transform: none; }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta-section {
  position: relative;
  overflow: hidden;
  background: var(--color-brand-blue);
  color: var(--color-text-on-dark);
  padding-block: clamp(36px, 4.5vw, 56px);
}
.final-cta-layout { display: block; }
.final-cta-content { text-align: center; }
.final-cta-section h2 { color: var(--color-text-on-dark); }
.final-cta-section .eyebrow { color: rgba(255, 255, 255, 0.76); }
.final-cta-section .section-copy {
  color: var(--color-text-on-dark-muted);
  margin-inline: auto;
  text-align: center;
}
.final-cta-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
.final-cta-section .btn-primary { background: var(--color-near-black); border-color: var(--color-near-black); color: #FFFFFF; }
.final-cta-section .btn-primary:hover,
.final-cta-section .btn-primary:focus-visible { background: #000000; border-color: #000000; box-shadow: 0 10px 24px rgba(19, 18, 18, 0.3); }
.final-cta-actions .btn-secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.8); }
.final-cta-actions .btn-secondary:hover,
.final-cta-actions .btn-secondary:focus-visible { background: #FFFFFF; color: var(--color-brand-blue-dark); }
/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #0B0C10; color: #FFFFFF; border-top: 0; }
.footer-container { max-width: var(--container-max); margin-inline: auto; padding: clamp(44px, 6vw, 72px) var(--container-padding) var(--space-8); }
.footer-lead { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; padding-bottom: var(--space-8); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.footer-brand { display: inline-flex; width: max-content; max-width: 100%; margin: 0; }
.footer-logo { width: clamp(96px, 10vw, 145px); height: auto; filter: brightness(0) invert(1); opacity: 0.96; }
.footer-kicker { font-size: var(--text-xs); font-weight: 750; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.62); }
.footer-cols { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding-top: var(--space-8); }
.footer-col { min-width: 0; }
.footer-col-title { font-family: var(--font-nav); font-size: var(--text-xs); font-weight: 750; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); margin-bottom: var(--space-4); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { color: rgba(255, 255, 255, 0.9); transition: color var(--transition-base), transform var(--transition-base); }
.footer-links a:hover, .footer-links a:focus-visible { color: #9CB3F2; text-decoration: none; transform: translateX(3px); }
.footer-note { margin-top: var(--space-4); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.58); }
.footer-social-icons { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: var(--border-width) solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.64);
}
.footer-social-icon svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.46);
}
@media (min-width: 640px) {
  .footer-cols { grid-template-columns: 1.4fr 1fr 1.2fr 0.7fr; }
}

/* ============================================================
   Shared sub-page header ("page-hero") + prototype notice
   ============================================================ */
.page-hero {
  padding-block: calc(var(--nav-height-initial) + var(--space-12)) var(--space-12);
  background: var(--color-surface-alt);
  border-bottom: var(--border-width) solid var(--color-line-soft);
}
.page-hero-title { margin-top: var(--space-3); font-size: clamp(2rem, 5vw, var(--text-4xl)); }
.page-hero-lead { margin-top: var(--space-4); max-width: 60ch; color: var(--color-text-muted); }
.prototype-notice {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-notice);
  border: var(--border-width) solid var(--color-brand-blue);
  border-radius: var(--radius-md);
  max-width: 62ch;
}
.prototype-notice-icon { flex-shrink: 0; color: var(--color-brand-blue-dark); }
.prototype-notice p { font-size: var(--text-sm); color: var(--color-brand-blue-dark); }
.prototype-notice strong { text-transform: uppercase; letter-spacing: 0.04em; }

/* ============================================================
   /matricula/ — visual shell
   ============================================================ */
.stepper {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.stepper-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-line-soft);
  background: var(--color-surface-card);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.stepper-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--color-line-soft);
  font-weight: 700;
  flex-shrink: 0;
  transition: border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}
.stepper-step-label { min-width: 0; font-weight: 700; color: var(--color-text-muted); transition: color var(--transition-base); }
.stepper-step.is-active { border-color: var(--color-accent); background: var(--color-surface-notice); }
.stepper-step.is-active .stepper-step-index { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }
.stepper-step.is-active .stepper-step-label { color: var(--color-text-heading); }
@media (min-width: 640px) {
  .stepper { grid-template-columns: repeat(3, 1fr); }
}

.inert-form {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background: var(--color-surface-card);
  border: var(--border-width) solid var(--color-line-soft);
  border-radius: var(--radius-lg);
  max-width: 40rem;
}
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); }
.form-field input, .form-field select {
  width: 100%;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-line-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-page);
}
.form-field input:focus-visible, .form-field select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.form-actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.form-actions-note { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-field--full { grid-column: 1 / -1; }
}

/* Full enrollment form (AV-WEB-01): grouped fieldsets, choices, hints,
   inline errors, error summary and the step-2 notice panel. */
.form-intro { font-size: var(--text-sm); color: var(--color-text-muted); }
.form-required { color: var(--color-brand-blue); }
.form-group { margin: var(--space-8) 0 0; padding: 0; border: 0; min-width: 0; min-inline-size: 0; }
.form-group-title {
  padding: 0 0 var(--space-3);
  margin-bottom: var(--space-4);
  width: 100%;
  border-bottom: var(--border-width) solid var(--color-line-soft);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-heading);
}
.form-grid + .form-grid { margin-top: var(--space-4); }
.form-grid--compact { grid-template-columns: repeat(2, 1fr); }
.form-field-label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-heading); }
.form-field input[type="file"] { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.form-field input[readonly] { background: var(--color-surface-alt); color: var(--color-text-muted); }
.form-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.form-choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.form-choices--stack { flex-direction: column; }
.form-choice { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-body); cursor: pointer; }
.form-field .form-choice input { width: 1.125rem; height: 1.125rem; margin: 0.125rem 0 0; padding: 0; flex-shrink: 0; accent-color: var(--color-accent); }
.form-choice a { color: var(--color-brand-blue); text-decoration: underline; }
.form-choice--card {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-line-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-page);
  font-weight: 700;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.form-choice--card:has(input:checked) { border-color: var(--color-accent); background: var(--color-surface-notice); }
.form-choice--card:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.form-field-error { font-size: var(--text-xs); font-weight: 700; color: var(--color-error); }
.form-field.is-invalid input:not([type="radio"]):not([type="checkbox"]),
.form-field.is-invalid select { border-color: var(--color-error); }
.form-error-summary {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border: var(--border-width) solid var(--color-error);
  border-inline-start-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface-error);
}
.form-error-summary:focus-visible { outline: 2px solid var(--color-error); outline-offset: 2px; }
.form-error-summary-title { font-weight: 700; color: var(--color-error); }
.form-error-summary-list { margin-top: var(--space-2); padding-left: 1.2rem; list-style: disc; font-size: var(--text-sm); }
.form-error-summary-list li + li { margin-top: var(--space-1); }
.form-error-summary-list a { color: var(--color-error); text-decoration: underline; }
.form-step-panel {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-brand-blue);
  border-radius: var(--radius-md);
  background: var(--color-surface-notice);
  color: var(--color-brand-blue-dark);
}
.form-step-panel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.form-step-panel-title { font-weight: 700; }
.form-step-panel p + p { margin-top: var(--space-2); font-size: var(--text-sm); }
@media (min-width: 640px) {
  .form-grid--compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 359px) {
  .inert-form { padding: var(--space-6) var(--space-4); }
}

/* ============================================================
   /acceso-alumnos/ — compact fictional student workspace
   ============================================================ */
.student-app {
  min-height: 100svh;
  padding-top: var(--nav-height-initial);
  background: var(--color-surface-alt);
}
.student-app-shell {
  min-height: calc(100svh - var(--nav-height-initial));
  display: grid;
  grid-template-columns: clamp(200px, 18vw, 240px) minmax(0, 1fr);
  max-width: 1440px;
  margin-inline: auto;
  background: var(--color-surface-page);
  box-shadow: 0 20px 60px rgba(19, 18, 18, 0.08);
}
.student-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  padding: clamp(22px, 2.5vw, 34px);
  background: var(--color-brand-blue-dark);
  color: var(--color-text-on-dark);
}
.student-sidebar-brand { display: block; width: 82px; }
.student-sidebar-brand:hover { text-decoration: none; }
.student-sidebar-brand img { width: 100%; height: auto; filter: brightness(0) invert(1); }
.student-profile {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block: 1px solid rgba(255, 255, 255, 0.18);
}
.student-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-brand-blue-dark);
  font-weight: 800;
}
.student-profile-name { font-size: var(--text-sm); font-weight: 700; line-height: 1.35; }
.student-profile-meta { margin-top: 2px; font-size: 0.75rem; line-height: 1.4; color: rgba(255, 255, 255, 0.68); }
.student-panel-nav { display: flex; flex-direction: column; gap: var(--space-2); }
.student-panel-nav a {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.72);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.student-panel-nav a:hover,
.student-panel-nav a:focus-visible,
.student-panel-nav a.is-active { background: rgba(255, 255, 255, 0.13); color: #FFFFFF; text-decoration: none; }
.student-sidebar-note { margin-top: auto; font-size: 0.75rem; color: rgba(255, 255, 255, 0.58); text-transform: uppercase; letter-spacing: 0.08em; }
.student-dashboard { min-width: 0; padding: clamp(24px, 3.5vw, 52px); }
.student-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.student-dashboard-greeting { margin-top: var(--space-1); font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 700; color: var(--color-text-heading); line-height: 1.15; }
.student-summary-meta { color: var(--color-text-on-dark-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.student-dashboard .student-summary-meta { color: var(--color-text-muted); }
.student-summary-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.student-summary-actions .student-next-step:disabled { background: var(--color-brand-blue); border-color: var(--color-brand-blue); color: #FFFFFF; opacity: 1; }
.student-summary-actions .student-medical:disabled { background: var(--color-near-black); border-color: var(--color-near-black); color: #FFFFFF; opacity: 1; }
.student-summary-actions .btn-primary,
.student-summary-actions .btn-secondary { min-height: 40px; padding: 9px 16px; font-size: 0.75rem; }
.student-prototype-strip {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--color-brand-blue);
  background: var(--color-surface-notice);
  color: var(--color-brand-blue-dark);
}
.student-prototype-strip > span { font-size: 0.65rem; }
.student-prototype-strip p { font-size: var(--text-xs); line-height: 1.45; }
.student-prototype-strip strong { text-transform: uppercase; letter-spacing: 0.04em; }
.student-widget-grid {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.student-widget {
  min-width: 0;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-line-soft);
  border-top: 3px solid var(--color-brand-blue);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
}
.student-widget-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.student-widget-heading > span { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-brand-blue); }
.student-widget-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.student-widget-value { margin-top: var(--space-3); font-family: var(--font-heading); font-size: clamp(1.4rem, 2.5vw, var(--text-2xl)); color: var(--color-text-heading); line-height: 1.2; }
.student-widget-value small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.student-widget-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.student-progress-track { margin-top: var(--space-3); height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-alt); overflow: hidden; }
.student-progress-fill { width: 40%; height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }
.student-notices { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-line-soft); }
.student-notices-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.student-notices-heading h2 { font-family: var(--font-nav); font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.08em; }
.student-notices-heading > span { font-size: var(--text-xs); color: var(--color-text-muted); }
.student-notices ul { margin-top: var(--space-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.student-notice { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-surface-alt); font-size: var(--text-sm); }
.student-notice > span { color: var(--color-brand-blue); font-size: var(--text-xs); font-weight: 800; }
@media (max-width: 899px) {
  .student-app-shell { grid-template-columns: minmax(0, 1fr); }
  .student-sidebar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) var(--container-padding); }
  .student-sidebar-brand { width: 58px; grid-row: 1; }
  .student-profile { grid-row: 1; padding-block: 0; border: 0; }
  .student-panel-nav { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
  .student-panel-nav a { flex: 1 0 max-content; text-align: center; }
  .student-sidebar-note { display: none; }
  .student-dashboard-header { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
}
@media (max-width: 639px) {
  .student-dashboard { padding: var(--space-6) var(--container-padding) var(--space-12); }
  .student-summary-actions { width: 100%; }
  .student-summary-actions .btn-primary,
  .student-summary-actions .btn-secondary { flex: 1 1 100%; }
  .student-widget-grid,
  .student-notices ul { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   /contacto/
   ============================================================ */
.contact-page-hero { padding-block: calc(var(--nav-height-initial) + var(--space-8)) var(--space-8); }
.contact-page-hero-layout { display: grid; gap: var(--space-6); }
.contact-page-hero-heading { min-width: 0; }
.contact-page-hero .page-hero-lead { margin-top: 0; max-width: none; }
.contact-details-section { padding-top: var(--space-4); }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-inline-start: var(--container-padding);
}
.contact-info-list { display: grid; gap: var(--space-4); min-width: 0; max-width: 440px; margin-inline-end: var(--container-padding); }
.contact-field--row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 22px;
  border-inline-start: 3px solid var(--color-brand-blue);
}
.contact-field-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--color-surface-notice);
  color: var(--color-brand-blue);
  transition: color var(--transition-base), background-color var(--transition-base);
}
.contact-field-icon svg { width: 24px; height: 24px; }
.contact-field--row:hover .contact-field-icon,
.contact-field--row:focus-visible .contact-field-icon { background: var(--color-brand-blue); color: #FFFFFF; }
.contact-field-content { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.contact-field--row .contact-field-action { margin-top: 6px; }
.contact-field--row .contact-hours { gap: 8px; }
.contact-hours-row { display: grid; gap: 1px; }
.contact-hours-row small { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.contact-field--row .contact-field-value { font-size: clamp(1.125rem, 2vw, 1.375rem); }
.contact-map-panel {
  position: relative;
  min-width: 0;
  min-height: 360px;
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 1px solid rgba(38, 72, 162, 0.24);
  border-top: 4px solid var(--color-brand-blue);
  border-inline-end: 0;
  border-radius: 24px 0 0 24px;
}
.contact-map-static {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--container-padding);
  text-align: center;
}
.contact-map-static-title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-text-heading); }
.contact-map-static-address { color: var(--color-text-muted); }
.contact-map-static .btn-primary { margin-top: var(--space-3); }
@media (min-width: 900px) {
  .contact-page-hero-layout { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: end; gap: clamp(40px, 7vw, 96px); }
  .contact-page-hero .page-hero-lead { padding-bottom: 3px; }
  .contact-layout {
    grid-template-columns: clamp(340px, 31vw, 440px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
    padding-inline-start: max(var(--container-padding), calc((100% - var(--container-max)) / 2 + var(--container-padding)));
  }
  .contact-info-list { margin-inline-end: 0; }
  .contact-map-panel { min-height: 460px; }
}
@media (max-width: 399px) {
  .contact-field--row { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 18px; }
  .contact-field-icon { width: 36px; height: 36px; border-radius: 10px; }
  .contact-field-icon svg { width: 20px; height: 20px; }
}
.gallery-grid {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
.gallery-item {
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item--car img { object-position: center 42%; }
.gallery-item--signs img { object-position: center; }
.gallery-item--team img { object-position: center 40%; }
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   /legal/ — index cards + long-form prose
   ============================================================ */
.legal-index { margin-top: var(--space-12); display: grid; gap: var(--space-4); max-width: 52rem; }
.legal-index-item {
  display: block;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-line-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.legal-index-item:hover, .legal-index-item:focus-visible { border-color: var(--color-accent); box-shadow: var(--shadow-card); }
.legal-index-item h2 { font-size: var(--text-lg); }
.legal-index-item p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.legal-index-item-action { display: inline-block; margin-top: var(--space-3); font-size: var(--text-xs); font-weight: 700; color: var(--color-brand-blue); }
.legal-meta { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.legal-back { display: inline-block; margin-top: var(--space-4); font-size: var(--text-sm); font-weight: 700; color: var(--color-brand-blue); }
.legal-content { max-width: 72ch; }
.legal-content > h2 { margin-top: var(--space-8); font-size: var(--text-xl); }
.legal-content > h2:first-child { margin-top: 0; }
.legal-content h3 { margin-top: var(--space-6); font-size: var(--text-lg); }
.legal-content p, .legal-content ul, .legal-content ol, .legal-content table { margin-top: var(--space-3); }
.legal-content ul, .legal-content ol { padding-left: 1.4rem; }
.legal-content ul { list-style: disc; }
.legal-content li + li { margin-top: var(--space-1); }
.legal-content a { color: var(--color-brand-blue); text-decoration: underline; }
.legal-content strong { color: var(--color-text-heading); }
.legal-content table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.legal-content th, .legal-content td { padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-line-soft); text-align: left; vertical-align: top; }
.legal-content th { background: var(--color-surface-alt); color: var(--color-text-heading); }
.legal-table-wrap { overflow-x: auto; }
@media (min-width: 640px) {
  .legal-index { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Progressive reveal — content stays visible unless JS confirms support
   ============================================================ */
html.reveal-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.reveal-enabled [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (max-width: 639px) {
  html.reveal-enabled [data-reveal] { transform: translateY(14px); transition-duration: 0.4s; }
}