/* ==========================================================================
   Gym Polamax — Component-level styles
   Dark theme · Brand blue accent (#0056A7 / #1863DC) · Premium gym site
   ========================================================================== */

:root {
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* Smooth in-page anchor scrolling (Actividades, Tarifas, Contacto…).
   Respects reduced-motion. Sections get a touch of top breathing room
   so their eyebrow/headline isn't pinned against the viewport edge. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id] { scroll-margin-top: clamp(1rem, 3vw, 2rem); }

/* ----------------------------- Container -------------------------------- */
.container-app {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: 80rem;
}
.container-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: 64rem;
}

/* ----------------------------- Section ---------------------------------- */
/* Section vertical rhythm — tightened so adjacent sections don't feel
   like they're floating apart. Desktop max ~88px (was 112px), mobile
   ~48px (was 64px). Adjacent sections still add their padding, so the
   visual gap between content blocks remains generous but never empty. */
.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  position: relative;
}
.section-tight {
  padding-block: clamp(2.5rem, 5.5vw, 4.25rem);
}
.section-divider {
  border-top: 1px solid var(--color-border);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background-color: var(--color-accent);
}

/* ----------------------------- Headings --------------------------------- */
/* Fraunces — variable serif, sentence case (serifs read poorly in caps).
   Use the optical-size axis (auto) so it renders crisply at small AND big. */
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.02;
  color: var(--color-text);
  font-optical-sizing: auto;
}

/* ----------------------------- Buttons ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--radius-md);
  padding: 0.875rem 1.4rem;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 220ms var(--ease-out-soft),
    background-color 220ms var(--ease-out-soft),
    border-color 220ms var(--ease-out-soft),
    color 220ms var(--ease-out-soft),
    box-shadow 220ms var(--ease-out-soft);
  will-change: transform;
  cursor: pointer;
  text-decoration: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--color-brand);
  color: #FFFFFF;
  border: 1px solid var(--color-brand);
  box-shadow: 0 8px 20px rgba(0, 86, 167, 0.32);
}
.btn-primary:hover {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover {
  background-color: var(--color-surface-2);
  border-color: var(--color-accent);
  color: var(--color-text);
  transform: translateY(-1px);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  padding: 0.625rem 0.9rem;
}
.btn-ghost:hover {
  color: var(--color-text);
  background-color: var(--color-surface-2);
}

.btn-lg { padding: 1rem 1.6rem; font-size: 1rem; }

/* ----------------------------- Cards ------------------------------------ */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    transform 320ms var(--ease-out-soft),
    border-color 320ms var(--ease-out-soft),
    box-shadow 320ms var(--ease-out-soft);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-elevated);
}

/* ---------- Activity card with real photo ---------- */
/* ---------- Activities — image-dominant editorial cards ----------
   Replaces the old white-card + colored-button pattern (which read as
   2000s product-tile) with photo-led dark cards that match the rest of
   the site. The photo IS the card; activity name sits over a gradient
   fade at the bottom in display serif; a small glass (+) indicator on
   the right toggles the description panel. Uses native <details>.
   ---------------------------------------------------------------- */
.activities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 640px) {
  .activities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .activities-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

.card-activity {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform 380ms var(--ease-out-soft),
    border-color 320ms var(--ease-out-soft),
    box-shadow 380ms var(--ease-out-soft);
}
.card-activity:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--act-color, var(--color-accent)) 45%, var(--color-border) 55%);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.55);
}

/* ---- Cover: image is the card ---- */
.card-cover {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.card-cover::-webkit-details-marker { display: none; }
.card-cover::marker { content: ""; }

.card-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;       /* keep the GYM POLAMAX logo visible */
  transition: transform 600ms var(--ease-out-soft);
}
.card-activity:hover .card-cover img { transform: scale(1.05); }
.card-activity[open] .card-cover img { transform: scale(1.02); }

/* Bottom gradient fade so the activity name reads cleanly over any photo */
.card-shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 12, 0.35) 50%, rgba(8, 8, 12, 0.92) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Small uppercase overline in the top-left corner — sets the editorial tone
   and adds info density without competing with the title */
.card-overline {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Bottom bar: name + glass (+) toggle */
.card-cover-bottom {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  font-optical-sizing: auto;
}
.card-toggle {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 280ms var(--ease-out-soft),
    border-color 280ms var(--ease-out-soft),
    transform 340ms var(--ease-out-soft);
}
.card-toggle svg { width: 54%; height: 54%; }
.card-activity:hover .card-toggle {
  background-color: var(--act-color, var(--color-accent));
  border-color: var(--act-color, var(--color-accent));
}
.card-activity[open] .card-toggle {
  background-color: var(--act-color, var(--color-accent));
  border-color: var(--act-color, var(--color-accent));
  transform: rotate(45deg);
}

/* ---- Description panel (shown when open) ---- */
.card-desc {
  padding: 1.35rem 1.5rem 1.5rem;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.card-desc p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.93rem;
  line-height: 1.6;
}
.card-desc .card-cta {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.card-desc .card-cta a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--act-color, var(--color-accent));
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out-soft);
}
.card-desc .card-cta a:hover {
  color: var(--act-color, var(--color-accent));
}

/* Per-activity color token — drives the (+) hover/open background, the
   border tint on hover, and the link underline color. Same palette as
   the schedule pills so visual identity stays consistent across the site. */
.card-activity[data-activity="cross"]   { --act-color: var(--color-act-cross); }
.card-activity[data-activity="ciclo"]   { --act-color: var(--color-act-ciclo); }
.card-activity[data-activity="aero"]    { --act-color: var(--color-act-aero); }
.card-activity[data-activity="trx"]     { --act-color: var(--color-act-trx); }
.card-activity[data-activity="pilates"] { --act-color: var(--color-act-pilates); }
.card-activity[data-activity="core"]    { --act-color: var(--color-act-core); }
.card-activity[data-activity="judo"]    { --act-color: var(--color-act-judo); }
.card-activity[data-activity="zumba"]   { --act-color: var(--color-act-zumba); }
.card-activity[data-activity="gap"]     { --act-color: var(--color-act-gap); }


/* ---------- Pricing card · editorial row -----------------------------------
   Each plan is a full-width "page": a masthead on top (tier name baseline-
   aligned with a large display-serif price + a ghost CTA pill on the right),
   and an inset body below with up to four content blocks — Incluye, Cuotas,
   Familiar, plus a small Acceso-día stat tile pinned to the side.
   All cards carry equal weight (no popular/featured treatment); hierarchy
   comes from typography and spacing, not color or borders. ---------------- */

.pricing-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cp-card {
  /* Two layers: (1) a vertical brand-tint gradient that washes only the
     top third of the card with a faint blue cast — gives the whole card
     a "lit from above" feel that ties to the brand-blue top accent.
     (2) the base surface color underneath. Body region's own dark inset
     overlay sits on top of both, so the body still reads darker. */
  background:
    linear-gradient(180deg,
      rgba(24, 99, 220, 0.085) 0%,
      rgba(24, 99, 220, 0.025) 18%,
      transparent 38%,
      transparent 100%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  transition: border-color 320ms var(--ease-out-soft), box-shadow 320ms var(--ease-out-soft);
  /* Deep-link landing spot when arriving from a home tier card
     (/precios#plan-oro …). The header is absolute (scrolls away), so only a
     little breathing room above is needed. */
  scroll-margin-top: clamp(1.5rem, 6vw, 4rem);
}
/* Thin brand-blue accent bar across the top of every card. Doubles as
   visual anchor for the masthead — critical on mobile where the head and
   body stack vertically and the inset background-shade alone isn't enough
   contrast to separate them. */
.cp-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-brand) 0%,
    rgba(24, 99, 220, 0.55) 35%,
    transparent 85%
  );
  z-index: 1;
  pointer-events: none;
}
.cp-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}
/* The plan the visitor opened from the home tier cards. A subtle brand ring
   so it's obvious which plan they arrived to see. Transition is inherited
   from .cp-card (border-color + box-shadow), so it eases in smoothly. */
.cp-card:target {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand), 0 26px 60px -30px rgba(24, 99, 220, 0.6);
}

/* ----- Masthead ----- */
.cp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: end;
  padding: clamp(1.75rem, 3.8vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.75rem);
  /* Two stacked radials build editorial depth in the masthead:
     - dominant brand-blue glow at the top-left (anchors the "header"),
     - faint counterweight at the top-right so the eye doesn't drift off
       the masthead toward the price unbalanced. */
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(24, 99, 220, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(24, 99, 220, 0.06), transparent 70%);
}
@media (min-width: 720px) {
  .cp-head {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
}

.cp-identity { min-width: 0; }
/* Eyebrow row — gray tag, plus a brand-blue "Domiciliado" chip when the
   user is viewing the Mes domiciliado tab. Flex with wrap so the chip
   moves to a second line if there's not enough room at narrow widths. */
.cp-tag-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.cp-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.cp-dom-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem 0.26rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B7D2FF;
  background-color: rgba(24, 99, 220, 0.14);
  border: 1px solid rgba(24, 99, 220, 0.4);
  border-radius: 999px;
  white-space: nowrap;
}
.cp-dom-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4F92FF;
  box-shadow: 0 0 6px rgba(79, 146, 255, 0.5);
}
.cp-name {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--color-text);
  font-optical-sizing: auto;
  margin: 0;
}

/* Session pill selector — sits inside the masthead identity column, below
   the tier name. Matches the main pricing-toggle visual language but
   compact (it lives inside a card). The active pill flips to brand blue. */
.cp-session-tabs {
  display: inline-flex;
  margin-top: 1rem;
  padding: 3px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  flex-wrap: wrap;
  gap: 2px;
}
.cp-session-tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms var(--ease-out-soft), background-color 200ms var(--ease-out-soft);
}
.cp-session-tab:hover { color: var(--color-text); }
.cp-session-tab.is-active {
  background-color: var(--color-brand);
  color: #FFFFFF;
}
.cp-session-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

.cp-headline {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
@media (min-width: 720px) {
  .cp-headline { align-items: flex-end; }
}
.cp-price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}
.cp-price-amount {
  font-family: var(--font-display);
  font-size: clamp(2.85rem, 6.4vw, 4.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.026em;
  color: var(--color-text);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums tabular-nums;
}
.cp-price-unit {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* Refined ghost pill — hairline border, brand blue on hover. No loud
   filled-button to compete with the headline price. */
.cp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft), background-color 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft);
}
.cp-cta:hover {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  color: #FFFFFF;
}
.cp-cta:active { transform: translateY(1px); }
.cp-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.cp-cta svg { transition: transform 220ms var(--ease-out-soft); }
.cp-cta:hover svg { transform: translateX(2px); }

/* ----- Inset body ----- */
.cp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  /* Slight inset shade so the supporting data reads as a second floor
     rather than an extension of the masthead. */
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid var(--color-border);
}
/* Multi-column meta grid kicks in at the laptop breakpoint. The cp-extras
   wrapper (Familiar + Acceso día) counts as a single column so the body
   always reads as a balanced row regardless of which optional sections a
   tier has. Floor at 190px keeps three columns at 768. */
@media (min-width: 720px) {
  .cp-body {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    column-gap: clamp(1.75rem, 3vw, 2.75rem);
  }
}

.cp-extras {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* ----- Section blocks (Incluye / Cuotas / Familiar) ----- */
.cp-section { min-width: 0; }
.cp-section-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 0.85rem;
  padding-bottom: 0.55rem;
  /* Brand-tinted hairline that fades to the standard border color.
     Reads as an editorial pull-quote rule; adds a third brand-blue
     touchpoint inside the body region without being decorative. */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
    rgba(24, 99, 220, 0.55) 0%,
    rgba(24, 99, 220, 0.2) 30%,
    var(--color-border) 70%
  ) 1;
  letter-spacing: 0.005em;
}

/* Includes list — slimmer than the old version, no chunky filled bullets. */
.cp-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.cp-includes li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding-left: 0;
}
.cp-includes li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background-color: var(--color-brand);
}

/* Key-value rows for Cuotas / Familiar */
.cp-rows {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
}
.cp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  align-items: baseline;
}
.cp-row-key {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.cp-row-hint {
  font-size: 0.74rem;
  color: var(--color-text-subtle);
  line-height: 1.4;
  font-style: italic;
}
.cp-row-val {
  margin: 0;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* Acceso día — a stat tile rather than a section. Uses the display serif
   for the value so it reads like a piece of editorial pull-quote. Fills
   the column width so it doesn't sit stranded next to empty space when
   it's the only thing in the extras column. */
.cp-access {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(24, 99, 220, 0.08), transparent 70%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  align-self: start;
  width: 100%;
}
.cp-access-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.cp-access-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ============================================================
   Pricing preview tiers (homepage)
   Three tiers — CrossFit, Oro (featured), Pilates. Strong type-driven
   hierarchy: featured tier lifts up with a gradient border + radial
   glow underneath + sharper inverted CTA, others sit at base level
   with a ghost CTA. The big numeric price uses Geist sans (tabular)
   so digits align cleanly and read as data, not editorial copy.
   Stacks 1-col below 1024px so the price typography has room.
   ============================================================ */
.tier-grid {
  display: grid;
  /* `minmax(0, 1fr)` (instead of just `1fr`) lets the column shrink below
     its min-content so cards stay inside the container at narrow viewports
     instead of pushing the page wider via `white-space: nowrap` children. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 1200px) {
  .tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    /* Give the lifted featured card room above without clipping */
    padding-top: 1rem;
    margin-top: -1rem;
    align-items: stretch;
  }
}

.tier {
  position: relative;
  min-width: 0;                 /* required for grid track minmax(0, 1fr) */
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  transition:
    border-color 320ms var(--ease-out-soft),
    transform 320ms var(--ease-out-soft),
    box-shadow 320ms var(--ease-out-soft);
}
.tier:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* ---- Head: kicker + name + lead ---- */
.tier-head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.tier-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.tier-name {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--color-text);
  line-height: 1.05;
}
.tier-lead {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 24rem;
}

/* ---- Price: sans, tabular, big ---- */
.tier-price {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.5rem;
  white-space: nowrap;
}
.tier-prefix {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  align-self: flex-end;
  padding-bottom: 0.55rem;
  margin-right: 0.1rem;
}
.tier-amount {
  font-family: var(--font-sans);
  font-size: clamp(2.85rem, 5.4vw, 3.85rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}
.tier-currency {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0;
}
.tier-unit {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-muted);
  align-self: center;
  padding-bottom: 0.1rem;
}

/* ---- Feature list ---- */
.tier-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
  margin: 0;
  list-style: none;
}
.tier-features li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.tier-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background-color: rgba(24, 99, 220, 0.14);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 8.5l2.5 2.5L12 5.5' stroke='%231863DC' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- CTA per tier + footnote ---- */
.tier-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    background-color 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    color 240ms var(--ease-out-soft),
    transform 240ms var(--ease-out-soft);
}
.tier-cta svg { transition: transform 220ms var(--ease-out-soft); }
.tier-cta:hover svg { transform: translateX(3px); }
.tier-cta--ghost {
  background-color: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}
.tier-cta--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.tier-cta--filled {
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(24, 99, 220, 0.35);
}
.tier-cta--filled:hover {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(24, 99, 220, 0.45);
}
.tier-fineprint {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  text-align: center;
  margin-top: -0.4rem;
}

/* ---- Featured tier (Oro): lifted + accented ---- */
.tier--featured {
  background:
    radial-gradient(ellipse at 50% -40%, rgba(24, 99, 220, 0.22), transparent 65%),
    linear-gradient(180deg, #11151D 0%, #0E0E10 100%);
  border-color: rgba(24, 99, 220, 0.55);
  box-shadow:
    0 18px 42px rgba(0, 86, 167, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* Clip the corner ribbon to the rounded card outline so it follows the
     card edge instead of overflowing outside. */
  overflow: hidden;
}
.tier--featured:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow:
    0 22px 48px rgba(0, 86, 167, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (min-width: 1200px) {
  .tier--featured { transform: translateY(-14px); }
  .tier--featured:hover { transform: translateY(-18px); }
}
.tier--featured .tier-amount,
.tier--featured .tier-name {
  color: #FFFFFF;
}
.tier--featured .tier-amount {
  font-size: clamp(3.1rem, 6vw, 4.25rem);
}
.tier--featured .tier-features li::before {
  background-color: rgba(24, 99, 220, 0.28);
}
/* Corner ribbon — diagonal banner that wraps the top-right corner of the
   featured card. The strip extends past the card edges and is clipped by
   the card's rounded outline (overflow: hidden on .tier--featured below).
   Geometry: width 200, half-width 100, right -56 → strip center sits 44px
   left of the right edge. For the text to land on the corner's 45°
   diagonal axis, the vertical offset must match: top + height/2 = 44.
   With ~22px strip height that means top: 33px. */
.tier-badge--corner {
  position: absolute;
  top: 33px;
  right: -56px;
  width: 200px;
  padding: 0.42rem 0;
  text-align: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-brand) 100%);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: rotate(45deg);
  transform-origin: center;
  box-shadow: 0 4px 14px rgba(0, 86, 167, 0.5);
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}

/* ---- Footer link below the grid ---- */
.tier-footer-link {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.tier-footer-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
  color: var(--color-text);
  font-weight: 600;
  border-bottom: 1.5px solid var(--color-accent);
  padding-bottom: 0.1rem;
  transition: color 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft);
}
.tier-footer-link a:hover {
  color: var(--color-accent);
}
.tier-footer-link a svg {
  transition: transform 220ms var(--ease-out-soft);
}
.tier-footer-link a:hover svg {
  transform: translateX(2px);
}

/* Narrow viewports: tighten the tier card so its content actually fits
   inside the constrained grid track. Price font, prefix, CTA padding all
   shrink so "DESDE 49,90 € / mes" and "Ver toda la información →" stop
   forcing the card wider than the container at 320–420px. */
@media (max-width: 420px) {
  .tier { padding: 1.85rem 1.25rem 1.4rem; }
  .tier-amount { font-size: 2.4rem; }
  .tier--featured .tier-amount { font-size: 2.65rem; }
  .tier-prefix { font-size: 0.7rem; padding-bottom: 0.45rem; }
  .tier-unit { font-size: 0.85rem; }
  .tier-cta { padding: 0.78rem 0.9rem; font-size: 0.85rem; gap: 0.35rem; }
  .tier-fineprint { font-size: 0.66rem; letter-spacing: 0.04em; }
}

/* ----------------------------- Navbar ----------------------------------- */
/* Matches live gympolamax.com layout — TWO ROWS:
     Row 1 — utility bar:  hours (left)   + phone (right)
     Row 2 — main nav:     big logo (left) + simple links (right)
   Hamburger replaces inline links below 768px. */
/* Header sits over the hero (absolute, NOT sticky/fixed), so it scrolls
   away with the page — same as the live site (et_pb_section--absolute).
   Desktop ≥ 1024px → fully transparent.
   Tablet / mobile < 1024px → dark backdrop with blue radial blur design. */
.nav-root {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
  border-bottom: 0;
  /* Breathing room at the very top so the menu doesn't touch the screen edge. */
  padding-top: clamp(0.5rem, 1.2vw, 1rem);
  /* Subtle top-of-page gradient so utility bar text stays readable on bright parts of the photo */
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.20) 60%, rgba(0, 0, 0, 0) 100%);
}

/* Row 1 — utility bar (transparent on desktop, sits over hero).
   Subtle divider between the utility bar and the main nav row. */
.nav-utility {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Tablet & mobile: dark glass with brand-blue radial bloom for a premium app-bar feel */
@media (max-width: 1023px) {
  .nav-root {
    background-color: rgba(8, 8, 12, 0.78);
    background-image:
      radial-gradient(ellipse at 18% 0%,  rgba(0, 86, 167, 0.55), transparent 55%),
      radial-gradient(ellipse at 90% 100%, rgba(24, 99, 220, 0.35), transparent 60%);
    backdrop-filter: saturate(150%) blur(18px);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  .nav-utility { border-bottom-color: rgba(255, 255, 255, 0.08); }
}
.nav-utility-shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: 80rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  flex-wrap: wrap;
}
.nav-hours {
  margin: 0;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.nav-hours strong {
  color: #FFFFFF;
  font-weight: 600;
}
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color 180ms var(--ease-out-soft);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.nav-phone:hover { color: #BFD3F4; }
.nav-phone svg { color: #BFD3F4; }

@media (max-width: 640px) {
  .nav-utility-shell { justify-content: center; gap: 0.5rem 1rem; }
  .nav-hours { text-align: center; flex: 1 1 100%; }
}

/* Row 2 — main nav */
.nav-main {}
.nav-main-shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: 80rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
}
.nav-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.2rem;
  text-decoration: none;
  flex: 0 0 auto;
  min-width: 0;
  text-align: center;
}
.nav-brand img {
  height: 38px;
  width: auto;
}
@media (min-width: 1024px) {
  .nav-brand img { height: 56px; }
}

/* Co-brand subtitle: sits below the logo at every viewport, painted with
   a white → brand-blue gradient using background-clip:text. */
.brand-sub {
  font-family: "Fraunces", "Times New Roman", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  background-image: linear-gradient(90deg, #ffffff 0%, var(--color-brand, #0056A7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
@media (min-width: 768px) {
  .brand-sub { font-size: 0.72rem; }
}
@media (min-width: 1024px) {
  .brand-sub { font-size: 0.82rem; }
}

.nav-links {
  display: none; /* hidden by default — shown on tablet+ */
  align-items: center;
  gap: 0.25rem;
}
.nav-link {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color 200ms var(--ease-out-soft);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.nav-link:hover { color: #BFD3F4; }
.nav-link.is-active { color: #BFD3F4; }
/* When nav has scrolled past hero, drop the photo-overlay text-shadow */
.nav-root.is-scrolled .nav-link,
.nav-root.is-scrolled .nav-hours,
.nav-root.is-scrolled .nav-phone { text-shadow: none; }

.nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft);
}
.nav-burger:hover {
  background-color: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Tablet+ (≥ 768px): inline links, no burger */
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
}

/* Mobile menu — hidden by default; only shown when .is-open AND under 768px */
.mobile-menu {
  display: none;
  border-top: 1px solid var(--color-border);
}
.mobile-menu.is-open { display: block; }
@media (min-width: 768px) {
  .mobile-menu,
  .mobile-menu.is-open { display: none !important; }
}
.mobile-menu-link {
  display: block;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  color: var(--color-text);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.mobile-menu-link:hover { background-color: var(--color-surface-2); }

/* ----- Mobile drawer info block: hours + phone CTA ----- */
.mobile-menu-info {
  margin-top: 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.mobile-menu-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1rem;
  padding: 0 0.25rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.mobile-menu-hours span { font-weight: 500; }
.mobile-menu-hours strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
.mobile-menu-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  background-color: var(--color-brand);
  color: #FFFFFF;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 200ms var(--ease-out-soft);
}
.mobile-menu-phone:hover { background-color: var(--color-brand-hover); }

/* ----- Hide the top utility bar on phones — info lives in the drawer ----- */
@media (max-width: 767px) {
  .nav-utility { display: none; }
}

/* ----------------------------- Hero (full-bleed photo) ------------------ */
/* Matches live gympolamax.com:
   the man-with-dumbbells photo fills the section. Eyebrow, headline,
   subtitle and CTA are centered on top. The photo gets a slow Ken-Burns
   zoom + JS-driven parallax. The bottom of the section fades to pure
   #000 so it blends seamlessly into the next section (no border line). */
.hero-root {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #000;
  /* Force the hero to take the full visible viewport on every device.
     Three units, progressively enhanced:
       - vh : large viewport (always supported)
       - dvh: dynamic viewport — adjusts when mobile URL bar collapses
     `height` (not just min-height) guarantees exact viewport coverage. */
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  /* Floor for very short landscape phones so the headline isn't crushed */
  min-height: max(560px, 100dvh);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pull next section up by 1px so any sub-pixel gap disappears */
  margin-bottom: -1px;
}

/* The photo. Parallax is applied via JS by translating Y on scroll. */
.hero-bg {
  position: absolute;
  inset: -10% 0 -10% 0;     /* extra room top + bottom for parallax travel */
  width: 100%;
  height: 120%;
  object-fit: cover;
  /* Pull the photo's focus to the right so the man's torso sits off-center
     and the headline gets cleaner space in the middle/left of the frame. */
  object-position: 32% center;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.04);
  animation: heroDrift 26s var(--ease-in-out-soft) infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(0, var(--hero-parallax, 0px), 0) scale(1.04); }
  to   { transform: translate3d(0, var(--hero-parallax, 0px), 0) scale(1.12); }
}

/* Animated aurora layer — full-bleed WebGL shader.
   Sits ABOVE the dark vignette (so the color streaks stay vivid) and
   BELOW the text content. Uses additive blending (plus-lighter) so the
   color streaks show evenly across the whole section regardless of how
   dark or bright the photo is underneath. Dark shader pixels (most of
   the canvas) contribute ~0 so the photo stays intact. */
.hero-aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: block;
  mix-blend-mode: plus-lighter;
  opacity: 1;
  /* Fade the aurora at the top (under the navbar) and bottom (where the
     next section begins) so streaks dissolve smoothly instead of being
     hard-cut at the section edges. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 78%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora { opacity: 0.7; }
}

/* Vignette + cinematic dark gradient.
   Stronger left-side darkening so the headline reads cleanly over the photo,
   plus a soft fade-to-black at the bottom so the section flows seamlessly. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* horizontal: dark on left where text sits, lighter on right */
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      rgba(0, 0, 0, 0.25) 75%,
      rgba(0, 0, 0, 0.40) 100%
    ),
    /* vertical: top + bottom darkening for nav + section blend */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.10) 28%,
      rgba(0, 0, 0, 0.20) 55%,
      rgba(0, 0, 0, 0.85) 90%,
      #000000 100%
    );
}
/* Brand-blue glow on top edge (subtle) */
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(24, 99, 220, 0.22), transparent 55%);
  pointer-events: none;
}
/* Film grain — fine animated noise for cinematic feel */
.hero-overlay::after {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: grainShift 1.2s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-2%, 3%); }
  80%  { transform: translate(3%, -1%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; transform: none; }
  .hero-overlay::after { animation: none; }
}

/* Photo + overlay treatment for narrow/portrait viewports.
   Includes ALL phones AND tablet portrait up to iPad Pro 12.9 (1024x1366).
   Landscape photo cropped via `cover` looks awful on portrait viewports,
   so we `contain` it — full composition visible, centered, smaller. */
@media (max-width: 1023px), (max-width: 1366px) and (orientation: portrait) {
  .hero-bg {
    /* Full-bleed on portrait viewports: the landscape photo (1.5:1) fills
       the portrait hero box without letterbox edges. Crops left/right
       symmetrically so the man stays centered horizontally. */
    object-fit: cover;
    object-position: center center;
    background-color: #000;
    inset: 0;
    height: 100%;
    transform: none;
    animation: none;
  }
  .hero-overlay {
    background:
      /* gentle horizontal darken to lift the headline off the photo */
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.40) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.40) 100%
      ),
      /* vertical: darken top (under nav) and bottom (where buttons sit
         + section blend) — keeps middle photo readable */
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.20) 28%,
        rgba(0, 0, 0, 0.20) 62%,
        rgba(0, 0, 0, 0.85) 92%,
        #000 100%
      );
  }
}

/* Phones (≤767px): content-height hero, top-aligned so the badge sits
   right under the nav with no centering vacuum. */
@media (max-width: 767px) {
  .hero-root {
    height: auto;
    min-height: auto;
    justify-content: flex-start;
    /* Light breathing room between the nav and the eyebrow/headline.
       Lighter than before because the photo is now full-bleed, so the
       headline sits on top of a real backdrop, not a tall dark band. */
    padding-top: clamp(1.25rem, 6vw, 2.5rem);
  }
}

/* Tablet portrait (768 – 1366px portrait, incl. iPad Pro 11 & 12.9):
   top-align content so the eyebrow + headline sit right under the nav
   (like mobile), with the photo filling the substantial space below.
   Centering at 88dvh left a big empty band above the eyebrow on these
   tall portrait viewports — flex-start removes that, and a slightly
   reduced min-height keeps the composition compact and photo-led. */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
  .hero-root {
    height: auto;
    min-height: 78dvh;
    justify-content: flex-start;
  }
  /* Trim the inner top padding a touch so the eyebrow sits close to the
     nav without crowding it — proportional to the tablet viewport. */
  .hero-inner {
    padding-block: clamp(5rem, 7.5vw, 7rem) clamp(3.5rem, 8vw, 6rem);
  }
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  /* Top padding clears the nav (~70-80px on mobile, ~100px on desktop)
     plus a small breathing room. Bottom padding is shorter — section
     blends into the next via the bottom overlay fade. */
  padding-block: clamp(5.5rem, 11vw, 8rem) clamp(3rem, 7vw, 5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Single gap rhythm — every gap scales identically across viewports.
     Children must not set their own margin-top, otherwise spacing drifts. */
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8FB7E8;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(143, 183, 232, 0.3);
  border-radius: 999px;
  background-color: rgba(8, 16, 32, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Hero headline — DM Serif Display (only for this title).
   Sentence case "Ponte en forma". Single line on tablet+, wraps on mobile. */
.hero-headline {
  font-family: "DM Serif Display", "Times New Roman", Georgia, serif;
  font-weight: 400;             /* DM Serif Display only ships at weight 400 */
  font-size: clamp(2.5rem, 9vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;                    /* spacing handled by .hero-inner gap */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 8px 32px rgba(0, 0, 0, 0.65);
  overflow-wrap: break-word;
  hyphens: none;
}
@media (min-width: 900px) {
  .hero-headline { white-space: nowrap; }
}

/* Editorial separator between headline and subtitle */
.hero-rule {
  width: 56px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 2px;
  margin: 0 auto;               /* spacing handled by .hero-inner gap */
  box-shadow: 0 0 18px rgba(24, 99, 220, 0.55);
}

.hero-sub {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  font-weight: 400;
  line-height: 1.55;
  max-width: 40rem;
  margin: 0;                    /* spacing handled by .hero-inner gap */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;                    /* spacing handled by .hero-inner gap */
}

/* Hero CTA size — modern pill, sentence case, refined weight */
.btn-xl {
  padding: 1.05rem 2.6rem;
  min-width: clamp(12rem, 22vw, 16rem);
  justify-content: center;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
  border-radius: 999px;
  gap: 0.7rem;
}

@media (max-width: 480px) {
  .btn-xl { min-width: min(20rem, 100%); width: 100%; }
}

/* Primary hero CTA — premium gradient pill with inset top highlight.
   Replaces the earlier shimmer/pulse treatment with a calmer, modern look. */
.btn-shine {
  position: relative;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand) 88%, #FFFFFF 12%) 0%,
    var(--color-brand) 100%
  );
  border-color: color-mix(in srgb, var(--color-brand) 78%, #FFFFFF 22%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 14px 32px -12px rgba(0, 86, 167, 0.55),
    0 4px 12px -4px rgba(0, 86, 167, 0.40);
  transition:
    transform 320ms var(--ease-out-soft),
    box-shadow 320ms var(--ease-out-soft),
    background-image 320ms var(--ease-out-soft),
    border-color 320ms var(--ease-out-soft);
}
.btn-shine:hover {
  transform: translateY(-2px);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand-hover) 88%, #FFFFFF 12%) 0%,
    var(--color-brand-hover) 100%
  );
  border-color: color-mix(in srgb, var(--color-brand-hover) 72%, #FFFFFF 28%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 22px 46px -14px rgba(0, 86, 167, 0.65),
    0 6px 16px -4px rgba(24, 99, 220, 0.45);
}
.btn-shine:active { transform: translateY(0); }

.btn-arrow {
  flex-shrink: 0;
  transition: transform 320ms var(--ease-out-soft);
}
.btn-shine:hover .btn-arrow { transform: translateX(4px); }

/* Secondary hero CTA — glassmorphism pill that sits over the photo */
.hero-actions .btn-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 24px -10px rgba(0, 0, 0, 0.55);
  transition:
    transform 320ms var(--ease-out-soft),
    background-color 320ms var(--ease-out-soft),
    border-color 320ms var(--ease-out-soft),
    box-shadow 320ms var(--ease-out-soft);
}
.hero-actions .btn-secondary:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 32px -10px rgba(0, 0, 0, 0.55);
}
.hero-actions .btn-secondary:active { transform: translateY(0); }
.hero-actions .btn-secondary:hover .btn-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn-shine,
  .hero-actions .btn-secondary,
  .btn-arrow { transition: none; }
  .btn-shine:hover,
  .hero-actions .btn-secondary:hover { transform: none; }
}

/* Scroll indicator — small "Descubre ↓" near bottom of hero */
.hero-scroll {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft);
}
.hero-scroll svg {
  animation: heroScrollNudge 1.8s var(--ease-in-out-soft) infinite;
}
.hero-scroll:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}
@keyframes heroScrollNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll svg { animation: none; }
}

/* ----------------------------- About / Bienvenid@ ----------------------- */
/* Mobile/tablet stack: eyebrow → photo → text.
   Desktop 2-column: photo on the right (spanning two rows), eyebrow + text
   stacked on the left. Grid template areas keep DOM order intact for
   mobile while letting desktop place the photo to the right. */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "eyebrow"
    "photo"
    "text";
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.about-eyebrow { grid-area: eyebrow; }
.about-photo   { grid-area: photo; }
.about-text    { grid-area: text; max-width: 38rem; }

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "eyebrow photo"
      "text    photo";
    column-gap: 4rem;
    row-gap: 1rem;
    align-items: center;
  }
}

/* About photo — the figure visually JUMPS OUT of the panel box.
   Structure:
     .about-photo           — layout box (overflow VISIBLE)
       .about-photo-panel   — the colored/textured rectangle (overflow HIDDEN, contains bg)
       .about-photo-figure  — the woman PNG, taller than the panel, anchored at the bottom,
                              extends ABOVE the panel's top — the "breakout" effect.
       .about-photo-chip    — small floating credibility chip nearby. */
/* Isabel's figure is 120% wide and centered, so on mobile (where the panel
   already fills most of the width) it bleeds a few px past the viewport and
   nudges the page into horizontal scroll. Clip ONLY the X axis at the section
   edge — overflow-y stays visible, so the vertical breakout above the panel is
   untouched. Same philosophy as .banner-section { overflow: hidden }. */
#sobre {
  overflow-x: clip;
}

.about-photo {
  position: relative;
  aspect-ratio: 1/1.05;
  /* Critical: must be visible so the figure can escape */
  overflow: visible;
  /* Reserve extra top room so the section padding accommodates the breakout */
  padding-top: 5rem;
}

.about-photo-panel {
  position: absolute;
  inset: 5rem 0 0 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 50% 30%, rgba(24, 99, 220, 0.22) 0%, transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(0, 86, 167, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #0F172A 0%, #050507 100%);
}

/* Animated brand-blue aura that drifts behind the woman, sells the breakout */
.about-photo-panel::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(24, 99, 220, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(0, 86, 167, 0.35) 0%, transparent 50%);
  filter: blur(28px);
  opacity: 0.85;
  animation: aboutAuraDrift 9s var(--ease-in-out-soft) infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes aboutAuraDrift {
  0%   { transform: translate(-3%,  2%) scale(1.00); opacity: 0.65; }
  50%  { transform: translate( 4%, -3%) scale(1.08); opacity: 0.95; }
  100% { transform: translate(-2%,  4%) scale(1.04); opacity: 0.75; }
}

/* Animated scan line over the panel — sells the "tech" feel */
.about-photo-panel .scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(64, 130, 255, 0.7), transparent);
  filter: blur(1px);
  opacity: 0.7;
  animation: aboutScan 4.5s linear infinite;
  pointer-events: none;
}
@keyframes aboutScan {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(700px); opacity: 0; }
}
.about-photo-grid {
  /* Subtle tech grid texture inside the panel only */
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 65%);
  pointer-events: none;
}
.about-photo-mark {
  position: absolute;
  inset: auto 0 -0.1em 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: -0.04em;
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
}

/* The figure — anchored at panel bottom, breaks out above the panel.
   Three layered motions:
     1. ENTRANCE: scales 0.95 → 1, fades 0 → 1 when section enters view
     2. CONTINUOUS FLOAT: rises and falls ±18px every 5s (clearly visible)
     3. SCROLL PARALLAX: --about-figure-ty CSS var driven by JS scroll progress
   The infinite float animation reads --about-figure-ty so the parallax + float
   compose without fighting each other. */
.about-photo-figure {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 120%;
  height: auto;
  max-width: none;
  z-index: 2;
  --about-figure-ty: 0px;
  transform: translate(-50%, var(--about-figure-ty));
  filter:
    drop-shadow(0 22px 36px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.40))
    drop-shadow(0 0 24px rgba(24, 99, 220, 0.20));
  pointer-events: none;
  animation: aboutFigureFloat 5s var(--ease-in-out-soft) infinite alternate;
  transform-origin: 50% 100%;
}
@keyframes aboutFigureFloat {
  from { transform: translate(-50%, calc(var(--about-figure-ty) +  6px)) rotate(-0.4deg); }
  to   { transform: translate(-50%, calc(var(--about-figure-ty) - 18px)) rotate( 0.4deg); }
}

/* Entrance — JS adds .is-in once the section reaches the viewport */
.about-photo-figure {
  opacity: 1;
}
.about-photo:not(.is-in) .about-photo-figure {
  opacity: 0;
  animation-play-state: paused;
}
.about-photo.is-in .about-photo-figure {
  animation: aboutEnter 1100ms var(--ease-out-soft) forwards,
             aboutFigureFloat 5s var(--ease-in-out-soft) 1100ms infinite alternate;
}
@keyframes aboutEnter {
  0%   { opacity: 0; transform: translate(-50%, calc(var(--about-figure-ty) + 80px)) scale(0.94); }
  100% { opacity: 1; transform: translate(-50%, var(--about-figure-ty))                scale(1); }
}

/* Hover the panel area scales the grid texture for depth */
.about-photo-grid { transition: transform 400ms var(--ease-out-soft); }
.about-photo:hover .about-photo-grid { transform: scale(1.04); }

/* Floating chip — premium credibility detail with visible motion.
   - Entrance: slides in from the LEFT + fades + scales when section enters view
   - Continuous: subtle Y bob (±5px), brand-blue ring expands+fades around the dot
   - Hover: lifts and the ring intensifies */
.about-photo-chip {
  position: absolute;
  z-index: 3;
  left: -1rem;
  bottom: 18%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.95rem 1.1rem;
  background-color: rgba(8, 16, 32, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-elevated);
  min-width: 12rem;
  animation: aboutChipBob 4.5s var(--ease-in-out-soft) infinite alternate;
  transition: transform 280ms var(--ease-out-soft), border-color 280ms var(--ease-out-soft);
}
@keyframes aboutChipBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

/* Entrance for the chip */
.about-photo:not(.is-in) .about-photo-chip {
  opacity: 0;
  transform: translateX(-30px) scale(0.92);
  animation-play-state: paused;
}
.about-photo.is-in .about-photo-chip {
  animation:
    aboutChipEnter 900ms var(--ease-out-soft) 700ms forwards,
    aboutChipBob 4.5s var(--ease-in-out-soft) 1600ms infinite alternate;
  opacity: 0;
}
@keyframes aboutChipEnter {
  0%   { opacity: 0; transform: translateX(-30px) scale(0.92); }
  100% { opacity: 1; transform: translateX(0)     scale(1); }
}

.about-photo-chip:hover {
  transform: translateY(-5px);
  border-color: rgba(24, 99, 220, 0.55);
}

/* The dot — VISIBLE pulsing brand-blue beacon with expanding ring */
.about-photo-chip .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-accent);
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
}
.about-photo-chip .dot::before,
.about-photo-chip .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  animation: aboutChipPing 1.8s var(--ease-out-soft) infinite;
}
.about-photo-chip .dot::after {
  animation-delay: 0.9s;
}
@keyframes aboutChipPing {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(3.2); opacity: 0;    }
}

.about-photo-chip strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.005em;
}
.about-photo-chip span:not(.dot) {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .about-photo-figure { animation: none; }
  .about-photo-chip .dot { animation: none; }
}

@media (max-width: 899px) {
  /* Explicit width: without it, margin-inline:auto + absolute children
     collapse the box to 48×48 and the figure disappears. */
  .about-photo {
    width: 100%;
    max-width: 28rem;
    aspect-ratio: 1/1;
    margin-inline: auto;
    padding-top: 3rem;
  }
  .about-photo-panel { inset: 3rem 0 0 0; }
  .about-photo-chip { left: 0; bottom: 12%; }
}

/* Stats row — three figures with a consistent line-icon, a display number,
   and a single-line label. Same icon size, same stroke weight, same accent
   color across all three so the row reads as one editorial unit (not three
   separate widgets). Hairline vertical dividers between columns. */
.about-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 2.75rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}
.about-stats .stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding-inline: clamp(0.75rem, 2.4vw, 1.6rem);
  position: relative;
}
.about-stats .stat:first-child { padding-left: 0; }
.about-stats .stat:last-child  { padding-right: 0; }
.about-stats .stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  bottom: 0.15rem;
  right: 0;
  width: 1px;
  background-color: var(--color-border);
}
.stat-icon {
  display: block;
  width: clamp(1.4rem, 2.2vw, 1.65rem);
  height: clamp(1.4rem, 2.2vw, 1.65rem);
  color: var(--color-accent);
  flex-shrink: 0;
}
.about-stats .num {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 0.95;
  color: var(--color-text);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums tabular-nums;
}
.about-stats .num-min {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.42em;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0;
  margin-left: 0.08em;
  position: relative;
  top: -0.85em;
}
.about-stats .label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-subtle);
  line-height: 1.25;
}

@media (max-width: 480px) {
  .about-stats .stat { padding-inline: 0.45rem; gap: 0.55rem; }
  .stat-icon { width: 1.2rem; height: 1.2rem; }
  .about-stats .label {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    line-height: 1.3;
  }
}

/* ----------------------------- Activities Banner ------------------------ */
/* Editorial banner — large heading + colored feature dots + CTA.
   Layered background: gradient base + animated aurora glow + subtle grid. */
.banner-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 86, 167, 0.20), transparent 55%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(24, 99, 220, 0.14), transparent 55%),
    linear-gradient(180deg, #08080C 0%, #0E0E14 100%);
}

.banner-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.banner-aurora {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 50% 40% at 30% 40%, rgba(24, 99, 220, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 75% 60%, rgba(0, 86, 167, 0.24) 0%, transparent 55%);
  filter: blur(46px);
  opacity: 0.85;
  animation: bannerAuroraDrift 14s var(--ease-in-out-soft) infinite alternate;
  mix-blend-mode: screen;
  will-change: transform;
}
@keyframes bannerAuroraDrift {
  0%   { transform: translate3d(-2%,  1%, 0) scale(1.00); }
  100% { transform: translate3d( 3%, -2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .banner-aurora { animation: none; }
}

.banner-gridlines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 75%);
  opacity: 0.9;
}

.banner-shell {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.55rem, 1.2vw, 0.9rem);
}

.banner-eyebrow {
  /* uses .eyebrow base — slight extra emphasis for this section */
}

.banner-heading {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  max-width: 50rem;
  margin: 0;
}

.banner-sub {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 42rem;
  margin: 0;
}

.banner-features {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.banner-features li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.banner-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}
.banner-dot--gold {
  background-color: var(--color-act-cross);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-act-cross) 55%, transparent);
}
.banner-dot--blue {
  background-color: var(--color-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.banner-dot--emerald {
  background-color: var(--color-act-pilates);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-act-pilates) 55%, transparent);
}


/* ----------------------------- Schedule --------------------------------- */
.tab-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.tab-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms var(--ease-out-soft), background-color 200ms var(--ease-out-soft);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.is-active {
  background-color: var(--color-brand);
  color: #FFFFFF;
  box-shadow: 0 6px 18px -8px rgba(0, 86, 167, 0.65);
}

/* Mobile: segmented-control feel — full-width tabs stacked or split evenly. */
@media (max-width: 640px) {
  .tab-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-lg);
    padding: 0.35rem;
    gap: 0.3rem;
  }
  .tab-btn {
    width: 100%;
    text-align: center;
    border-radius: calc(var(--radius-lg) - 0.25rem);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }
}

.schedule-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}
.schedule-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.schedule-table thead th {
  position: sticky;
  top: 0;
  background-color: var(--color-surface-2);
  color: var(--color-text);
  font-weight: 700;
  text-align: left;
  padding: 1rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
}
.schedule-table tbody td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text-muted);
}
.schedule-table tbody tr:last-child td { border-bottom: 0; }
.schedule-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.02);
}
.schedule-table .time-col {
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Activity pill — used in both desktop (.schedule-table) and mobile
   (.schedule-day-list) views. Colour variants below tint per activity. */
.activity-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
}
/* color-mix gives a 12% transparent fill and a 30% transparent border. */
.activity-pill.is-ciclo   { color: var(--color-act-ciclo);   background-color: color-mix(in oklab, var(--color-act-ciclo) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-ciclo) 30%, transparent); }
.activity-pill.is-aero    { color: var(--color-act-aero);    background-color: color-mix(in oklab, var(--color-act-aero) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-aero) 30%, transparent); }
.activity-pill.is-zumba   { color: var(--color-act-zumba);   background-color: color-mix(in oklab, var(--color-act-zumba) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-zumba) 30%, transparent); }
.activity-pill.is-trx     { color: var(--color-act-trx);     background-color: color-mix(in oklab, var(--color-act-trx) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-trx) 30%, transparent); }
.activity-pill.is-pilates { color: var(--color-act-pilates); background-color: color-mix(in oklab, var(--color-act-pilates) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-pilates) 30%, transparent); }
.activity-pill.is-core    { color: var(--color-act-core);    background-color: color-mix(in oklab, var(--color-act-core) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-core) 30%, transparent); }
.activity-pill.is-judo    { color: var(--color-act-judo);    background-color: color-mix(in oklab, var(--color-act-judo) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-judo) 30%, transparent); }
.activity-pill.is-gap     { color: var(--color-act-gap);     background-color: color-mix(in oklab, var(--color-act-gap) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-gap) 30%, transparent); }
.activity-pill.is-cross   { color: var(--color-act-cross);   background-color: color-mix(in oklab, var(--color-act-cross) 12%, transparent); border-color: color-mix(in oklab, var(--color-act-cross) 30%, transparent); }

.schedule-pane[data-state="hidden"] { display: none; }

/* ----- Mobile schedule: vertical day cards (no horizontal scroll) ----- */
.schedule-mobile { display: none; }
@media (max-width: 768px) {
  .schedule-desktop { display: none; }
  .schedule-mobile { display: block; }
  /* Belt-and-braces: even if the table is briefly visible, never let it pan */
  .schedule-table-wrap { overflow-x: hidden; }
}

.schedule-day-grid {
  display: grid;
  gap: 1rem;
}
.schedule-day-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.6);
}
.schedule-day-header {
  padding: 0.85rem 1.1rem;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text);
  background-image:
    linear-gradient(90deg, rgba(0, 86, 167, 0.35) 0%, rgba(24, 99, 220, 0.18) 60%, transparent 100%),
    linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface-3, var(--color-surface-2)) 100%);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.schedule-day-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-accent) 100%);
}
.schedule-day-list {
  margin: 0;
  padding: 0.25rem 1.1rem;
  list-style: none;
}
.schedule-day-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.schedule-day-list li:last-child { border-bottom: 0; }
.schedule-day-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.92rem;
  white-space: nowrap;
}
/* -------- Room toggle (Pilates: Sala 1 / Sala 2) -------- */
.room-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  width: 100%;
}
.room-tab {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 60%),
    var(--color-surface);
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 220ms var(--ease-out-soft), background 220ms var(--ease-out-soft),
              transform 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft),
              box-shadow 220ms var(--ease-out-soft);
  overflow: hidden;
  isolation: isolate;
}
.room-tab:hover {
  color: var(--color-text);
  border-color: color-mix(in oklab, var(--color-brand) 35%, var(--color-border));
  transform: translateY(-1px);
}
.room-tab .room-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  transition: background-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft);
}
.room-tab.is-active {
  color: #FFFFFF;
  border-color: transparent;
  background:
    radial-gradient(ellipse 80% 130% at 0% 50%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%);
  box-shadow:
    0 14px 32px -14px rgba(0, 86, 167, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-1px);
}
.room-tab.is-active .room-tab-num {
  background-color: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
.room-tab.is-active::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  mix-blend-mode: overlay;
  animation: roomTabShine 4.5s var(--ease-in-out-soft) infinite;
  z-index: -1;
}
@keyframes roomTabShine {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .room-tab.is-active::after { animation: none; }
}

.schedule-room-pane[data-state="hidden"] { display: none; }

@media (min-width: 640px) {
  .room-tabs {
    grid-template-columns: 1fr 1fr;
    max-width: 28rem;
    gap: 1rem;
  }
  .room-tab { padding: 1.1rem 1.4rem; font-size: 1.05rem; }
  .room-tab .room-tab-num { width: 1.85rem; height: 1.85rem; font-size: 0.92rem; }
}

/* ----- Standalone-page top padding (replaces inline style) ----- */
.page-pad { padding-top: clamp(7rem, 11vw, 9rem); }

/* ----------------------------- Legal pages ------------------------------ */
.legal-shell { max-width: 56rem; margin-inline: auto; }
.legal-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.legal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0.4rem 0 0.6rem;
}
.legal-updated { color: var(--color-text-subtle); font-size: 0.85rem; }

.legal-prose { color: var(--color-text-muted); line-height: 1.7; font-size: 1rem; }
.legal-prose h2 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  letter-spacing: -0.01em;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
}
.legal-prose h3 {
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}
.legal-prose p { margin: 0 0 0.95rem; }
.legal-prose strong { color: var(--color-text); }
.legal-prose ul, .legal-prose ol {
  margin: 0 0 0.95rem 1.25rem;
  padding: 0;
}
.legal-prose li { margin-bottom: 0.35rem; }
.legal-prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--color-text); }
.legal-prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.9em;
  color: var(--color-text);
}
.legal-prose hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* Visible placeholder so the owner notices fields still to fill in. */
.legal-todo {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border: 1px dashed color-mix(in oklab, var(--color-warn) 65%, transparent);
  background-color: color-mix(in oklab, var(--color-warn) 12%, transparent);
  color: var(--color-warn);
  border-radius: 0.35rem;
  font-size: 0.86em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.legal-callout {
  border: 1px solid color-mix(in oklab, var(--color-accent) 35%, var(--color-border));
  background-color: color-mix(in oklab, var(--color-accent) 6%, var(--color-surface));
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  margin: 1.25rem 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.55;
}
.legal-callout strong { color: var(--color-text); }

.legal-cookies-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
}
.legal-cookies-table thead th {
  background-color: var(--color-surface-2);
  color: var(--color-text);
  text-align: left;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.legal-cookies-table tbody td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  vertical-align: top;
  line-height: 1.5;
}
.legal-cookies-table tbody tr:last-child td { border-bottom: 0; }
.legal-cookies-table tbody td:first-child { color: var(--color-text); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .legal-cookies-table { font-size: 0.85rem; }
  .legal-cookies-table tbody td:first-child { white-space: normal; }
}

/* ----------------------------- Cookie banner ----------------------------- */
.cookie-banner {
  position: fixed;
  z-index: 90;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(20, 20, 24, 0.92) 0%, rgba(10, 10, 14, 0.96) 100%);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
          backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 280ms var(--ease-out-soft), transform 280ms var(--ease-out-soft);
}
.cookie-banner.is-shown { opacity: 1; transform: translateY(0); }
.cookie-banner.is-leaving { opacity: 0; transform: translateY(16px); }

@media (min-width: 768px) {
  .cookie-banner {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    max-width: 26rem;
    padding: 1.2rem 1.3rem;
  }
}

.cookie-banner-text {
  margin: 0 0 0.95rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.cookie-banner-text strong { color: var(--color-text); }
.cookie-banner-text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-text a:hover { color: var(--color-text); }

/* AEPD 2024: three actions with equal visual prominence — same size,
   same color weight, equal width on the row. */
.cookie-banner-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.cookie-banner-btn {
  width: 100%;
  padding: 0.65rem 0.95rem;
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 480px) {
  .cookie-banner-actions { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Cookie preferences modal ----- */
.cookie-config {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 220ms var(--ease-out-soft);
}
.cookie-config.is-shown { opacity: 1; }
.cookie-config.is-leaving { opacity: 0; }
.cookie-config-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.cookie-config-panel {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
}
.cookie-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
}
.cookie-config-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
}
.cookie-config-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
}
.cookie-config-close:hover { color: var(--color-text); background-color: var(--color-surface-2); }
.cookie-config-body { padding: 1rem 1.15rem; }
.cookie-config-intro {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.cookie-config-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.cookie-config-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-2);
  border-radius: var(--radius-md, 0.6rem);
  cursor: pointer;
}
.cookie-config-info { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; min-width: 0; }
.cookie-config-name { color: var(--color-text); font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cookie-config-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
  border: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
}
.cookie-config-desc { color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.5; }
.cookie-config-toggle {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--color-brand);
  margin-top: 0.15rem;
}
.cookie-config-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--color-border);
}
@media (min-width: 540px) {
  .cookie-config-footer { grid-template-columns: repeat(3, 1fr); }
}

/* Re-open trigger (footer link) */
.cookie-config-link {
  background: transparent;
  border: 0;
  color: var(--color-text-subtle);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 0.2rem 0;
}
.cookie-config-link:hover { color: var(--color-text); }

/* ----------------------------- Pricing ---------------------------------- */
/* Sticky, centered toggle bar. Full-bleed dark backdrop (negative inline
   margins cancel the container gutter) so price cards never bleed through
   while it stays pinned. Nav is position: absolute so it scrolls away — no
   offset math needed; top: 0 is correct. */
.pricing-controls {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  margin-inline: calc(-1 * var(--container-pad));
  margin-block: 0 1.75rem;
  padding: 0.85rem var(--container-pad);
  background-color: rgba(0, 0, 0, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 14px 28px -22px rgba(0, 0, 0, 0.9);
}

.pricing-toggle {
  display: inline-flex;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px;
}
.pricing-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms var(--ease-out-soft), background-color 200ms var(--ease-out-soft);
}
.pricing-toggle button:hover { color: var(--color-text); }
.pricing-toggle button.is-active {
  background-color: var(--color-brand);
  color: #FFFFFF;
}

/* At 320–420 the two-pill toggle would otherwise outgrow the viewport.
   Tighten padding + font so both buttons fit edge-to-edge. */
@media (max-width: 420px) {
  .pricing-toggle button {
    font-size: 0.82rem;
    padding: 0.55rem 0.95rem;
  }
}

.pricing-pane[data-state="hidden"] { display: none; }

.pricing-extras-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.pricing-extras-grid .extra-row {
  flex: 1 1 220px;
  max-width: 320px;
}
.extra-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.95rem 1.1rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 220ms var(--ease-out-soft);
}
.extra-row:hover { border-color: var(--color-border-strong); }
.extra-row .extra-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-subtle);
}
.extra-row .extra-value {
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.extra-row .extra-hint {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  font-style: italic;
}

.summer-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 0% 50%, rgba(24, 99, 220, 0.22), transparent 65%),
    var(--color-surface);
  border: 1px solid rgba(24, 99, 220, 0.35);
  color: var(--color-text);
  margin-bottom: 1.75rem;
}
.summer-banner .summer-tag {
  display: inline-flex;
  padding: 0.32rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  background-color: var(--color-brand);
  border-radius: 999px;
}
.summer-banner p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ----------------------------- Credibility / Isabel ---------------------- */
.credibility-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  background:
    radial-gradient(circle at 20% 0%, rgba(24, 99, 220, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(0, 86, 167, 0.30) 0%, transparent 55%),
    var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .credibility-card {
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
  }
}

.credibility-portrait {
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  position: relative;
  overflow: hidden;
}
/* Real photo of Isabel. The source image has her face on the right side
   (Olympic rings to her left), so we anchor object-position to the right
   so her face is never cropped out at narrow card widths. */
.credibility-portrait .if-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
/* Bottom gradient so the role + name caption stays readable on top of
   the photo without needing a heavy bar behind it. */
.credibility-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.72) 92%);
  pointer-events: none;
  z-index: 1;
}
.credibility-portrait .if-meta {
  position: absolute;
  bottom: 1.3rem;
  left: 1.3rem;
  right: 1.3rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.credibility-portrait .if-meta .role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  font-weight: 700;
}
.credibility-portrait .if-meta .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.018em;
  color: #FFFFFF;
  font-optical-sizing: auto;
}

/* Isabel bio — stack of short paragraphs with consistent breathing room.
   The first paragraph leads with the "triple corona" hook (full name +
   the three titles), the rest are concrete facts (dates + medal counts). */
.isabel-bio {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.isabel-bio p { margin: 0; }

/* Olympic credentials — compact 2×2 badges.
   Refined version of the badge format: smaller padding, sans-serif title
   (not display serif), small brand-blue dot marker on the left, subtle
   tinted background, hairline border. Reads as polished credential pills,
   not heavy dashboard cards. */
.credit-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 520px) {
  .credit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.credit-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background-color: rgba(24, 99, 220, 0.05);
  border: 1px solid rgba(24, 99, 220, 0.18);
  border-radius: var(--radius-md);
  transition:
    border-color 240ms var(--ease-out-soft),
    background-color 240ms var(--ease-out-soft);
}
.credit-item:hover {
  border-color: rgba(24, 99, 220, 0.45);
  background-color: rgba(24, 99, 220, 0.09);
}
.credit-marker {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(24, 99, 220, 0.22);
}
.credit-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.credit-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--color-text);
}
.credit-detail {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--color-text-subtle);
}

/* ----------------------------- CTA -------------------------------------- */
.cta-block {
  background:
    radial-gradient(circle at 80% -20%, rgba(24, 99, 220, 0.30), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(0, 86, 167, 0.30), transparent 55%),
    linear-gradient(180deg, var(--color-surface) 0%, #050507 100%);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 900px) {
  .cta-block { grid-template-columns: 1.4fr 1fr; }
}
.cta-block h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-optical-sizing: auto;
}
.cta-block p {
  color: var(--color-text-muted);
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 36rem;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.cta-info { display: flex; flex-direction: column; gap: 0.75rem; }
.cta-info .row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.cta-info a.row:hover { border-color: var(--color-accent); }
.cta-info .row .ico {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background-color: var(--color-brand-soft);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-info .row .meta { display: flex; flex-direction: column; gap: 2px; }
.cta-info .row .meta strong { color: var(--color-text); font-size: 0.95rem; font-weight: 700; }
.cta-info .row .meta span,
.cta-info .row .meta a { color: var(--color-text-muted); font-size: 0.92rem; text-decoration: none; }
.cta-info .row .meta a:hover { color: var(--color-text); }

/* ----------------------------- Footer ----------------------------------- */
.footer-root {
  border-top: 1px solid var(--color-border);
  padding-block: 3rem 2rem;
  margin-top: 5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  background-color: #000000;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.footer-grid h4 {
  color: var(--color-text);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 1rem;
  font-weight: 700;
}
.footer-grid a {
  color: var(--color-text-muted);
  text-decoration: none;
  display: block;
  padding: 0.3rem 0;
  font-size: 0.92rem;
  transition: color 180ms var(--ease-out-soft);
}
.footer-grid a:hover { color: var(--color-accent); }

/* Keep the footer brand using the flex column layout (centered) — the
   generic .footer-grid a rule above would otherwise force display:block. */
.footer-grid a.nav-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  margin-top: 3rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-subtle);
}
.footer-legal {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
}
.footer-legal a {
  color: var(--color-text-subtle);
  text-decoration: none;
  padding: 0.2rem 0;
  transition: color 180ms var(--ease-out-soft);
}
.footer-legal a:hover { color: var(--color-text); }

/* ----------------------------- Helpers ---------------------------------- */
.divider-soft { height: 1px; background-color: var(--color-border); width: 100%; }
.muted-text { color: var(--color-text-muted); }

/* Reveal-on-scroll has been removed.
   Content is always visible. If subtle entrance animations are desired
   later, do them as additive CSS animations that don't hide content. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Calculadora "Calcula tu cuota" — modal flow
   ============================================================ */

body.calc-open { overflow: hidden; }

.calc {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
}

.calc-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.calc-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  background:
    linear-gradient(180deg,
      rgba(24, 99, 220, 0.09) 0%,
      rgba(24, 99, 220, 0.02) 22%,
      transparent 40%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.calc-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand) 0%, rgba(24,99,220,0.55) 40%, transparent 90%);
  z-index: 1;
  pointer-events: none;
}

.calc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.85rem, 2vw, 1.1rem) clamp(0.85rem, 2vw, 1.25rem) 0.4rem;
  gap: 0.5rem;
  flex-shrink: 0;
}
.calc-iconbtn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out-soft), color 180ms var(--ease-out-soft);
}
.calc-iconbtn:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
}
.calc-iconbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.calc-iconbtn--right { margin-left: auto; }

.calc-content {
  padding: 0 clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 2.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Step header */
.calc-head {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.calc-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 0.6rem;
}
.calc-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--color-text);
  font-optical-sizing: auto;
  margin: 0 0 0.5rem;
}
.calc-sub {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

/* Tile grid */
.calc-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 540px) {
  .calc-tiles--2 { grid-template-columns: 1fr 1fr; }
  .calc-tiles--3 { grid-template-columns: repeat(3, 1fr); }
}
.calc-tiles--list { grid-template-columns: 1fr; }

.calc-tile {
  appearance: none;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.1rem, 2.5vw, 1.5rem);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 200ms var(--ease-out-soft), background-color 200ms var(--ease-out-soft), transform 200ms var(--ease-out-soft);
  font-family: inherit;
}
.calc-tile:hover {
  border-color: var(--color-brand);
  background-color: rgba(24, 99, 220, 0.08);
}
.calc-tile:active { transform: translateY(1px); }
.calc-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.calc-tile--center {
  align-items: center;
  text-align: center;
  gap: 0.45rem;
}

.calc-tile-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.calc-tile-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}
.calc-tile-big {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 3.2rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.calc-tile-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.calc-tile-price {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}

/* Disclaimer */
.calc-disclaimer {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
.calc-disclaimer p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.calc-disclaimer p + p { margin-top: 0.7rem; }
.calc-disclaimer-note {
  font-size: 0.88rem;
  color: var(--color-text-subtle);
  font-style: italic;
}
.calc-disclaimer strong { color: var(--color-text); }

.calc-actions {
  display: flex;
  justify-content: center;
}
.calc-btn {
  appearance: none;
  background: var(--color-brand);
  color: #FFFFFF;
  border: 0;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 200ms var(--ease-out-soft);
}
.calc-btn:hover { background-color: var(--color-brand-hover); }
.calc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

/* Result */
.calc-result {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.calc-result-block {
  background-color: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.calc-result-block--total {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(24, 99, 220, 0.12), transparent 70%),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(24, 99, 220, 0.3);
}
.calc-result-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(24,99,220,0.55) 0%, rgba(24,99,220,0.2) 30%, var(--color-border) 70%) 1;
}

.calc-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.calc-row strong {
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc-row--big { font-size: 1.05rem; }
.calc-row--big strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.calc-result-note {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-subtle);
}
.calc-result-savings {
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4F92FF;
}

/* Family per-member cards */
.calc-fam-rows {
  display: grid;
  gap: 0.75rem;
}
.calc-fam-row {
  background-color: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.1rem;
  display: grid;
  gap: 0.5rem;
}
.calc-fam-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.calc-fam-row-role {
  color: var(--color-brand);
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  font-size: 0.72rem;
  font-family: var(--font-display);
}
.calc-fam-row-act {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.calc-fam-row-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin-top: 0.35rem;
}
.calc-fam-row-prices > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.calc-fam-row-prices span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.calc-fam-row-prices strong {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
}

/* Calculator — family-step pills shown above each member's sub-flow.
   Three states per pill: pending (muted), active (brand blue), done
   (carries the chosen-activity label). The pill row makes it obvious
   which person the user is configuring AND visually flips when they
   advance to the next person. */
.calc-family-stepper {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.calc-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem 0.4rem 0.45rem;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  transition: background-color 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft);
}
.calc-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.calc-step-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active person — drawn to the eye via brand-blue tint + glowing dot */
.calc-step.is-active {
  border-color: var(--color-brand);
  background-color: rgba(24, 99, 220, 0.14);
  color: #B7D2FF;
}
.calc-step.is-active .calc-step-num {
  background-color: var(--color-brand);
  color: #FFFFFF;
  box-shadow: 0 0 8px rgba(24, 99, 220, 0.55);
}
.calc-step.is-active .calc-step-label {
  font-style: italic;
}

/* Already-chosen person — subtle but legible, shows what they picked */
.calc-step.is-done {
  background-color: rgba(24, 99, 220, 0.05);
  border-color: rgba(24, 99, 220, 0.25);
  color: var(--color-text);
}
.calc-step.is-done .calc-step-num {
  background-color: rgba(24, 99, 220, 0.4);
  color: #FFFFFF;
}

/* Tile fineprint — small italic note shown under desc when a tile needs
   extra explanation (currently only the Solo Sala tile in family mode
   uses this to clarify it bills at Oro rate). */
.calc-tile-fineprint {
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(125, 175, 255, 0.9);
  margin-top: 0.25rem;
}

/* Step transition — content slides in from the right + fades up on every
   render. Combined with the active-pill pulse below, this makes the
   "you've moved to the next person" change perceptible. ~360ms is long
   enough to register, short enough not to feel sluggish. */
.calc-content.is-entering {
  animation: calcEnter 360ms var(--ease-out-soft) both;
}
@keyframes calcEnter {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Stepper active pill — pulses with a soft brand-blue ring when first
   mounted. Each render rebuilds the stepper so the freshly-applied
   .is-active runs its animation. The user's eye gets pulled to the
   active pill, which is exactly the question "which person am I on?". */
.calc-step.is-active {
  animation: stepActivatePulse 560ms var(--ease-out-soft);
}
@keyframes stepActivatePulse {
  0% {
    transform: scale(0.94);
    box-shadow: 0 0 0 0 rgba(24, 99, 220, 0.55);
  }
  55% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(24, 99, 220, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(24, 99, 220, 0);
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .calc-content.is-entering,
  .calc-step.is-active {
    animation: none;
  }
}

/* Legal disclaimer — small, muted, italic. Shown at the bottom of every
   calculator result and at the bottom of /precios so we have legal cover
   if reception prices differ from what the site displays. */
.calc-legal,
.pricing-legal {
  margin-top: 1.75rem;
  padding: 0.9rem 1.1rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-text-subtle);
  line-height: 1.55;
  text-align: center;
}
.pricing-legal {
  max-width: 48rem;
  margin-inline: auto;
  margin-top: 2.5rem;
}

/* ==========================================================================
   /alta — multi-step membership form (QR-arriving customers)
   Mobile-first; one step per screen; brand-blue accent on active states.
   ========================================================================== */

.alta-body {
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ----- Top bar (minimal nav: brand + reset) ----- */
.alta-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem var(--container-pad);
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
}
.alta-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.15rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  text-align: center;
}
.alta-brand img {
  height: 28px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .alta-brand img { height: 34px; }
}
.alta-reset {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.alta-reset:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

/* ----- Layout shell ----- */
.alta-main {
  flex: 1 1 auto;
  display: flex;
  padding: 1.25rem var(--container-pad) 2.5rem;
}
.alta-shell {
  width: 100%;
  max-width: 36rem;          /* mobile-first form max-width */
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .alta-shell { max-width: 40rem; }
}

/* ----- Progress bar ----- */
.alta-progress {
  position: relative;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.alta-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
  transition: width 260ms ease;
  border-radius: 999px;
}

/* ----- Step container + entry animation ----- */
.alta-step {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.alta-step.is-enter {
  animation: altaStepEnter 360ms cubic-bezier(0.22, 0.62, 0.3, 1) both;
}
@keyframes altaStepEnter {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .alta-step.is-enter { animation: none; }
  .alta-progress-fill { transition: none; }
}

/* ----- Back button (top of every non-welcome step) ----- */
.alta-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  padding: 0.35rem 0;
  cursor: pointer;
  transition: color 160ms ease;
}
.alta-back:hover { color: var(--color-text); }
.alta-back:focus-visible {
  outline: 2px solid var(--color-brand-ring);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ----- Headings inside the form ----- */
.alta-heading {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.alta-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.alta-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.05;
  font-size: clamp(1.7rem, 5.5vw, 2.4rem);
  color: var(--color-text);
}
.alta-title--xl {
  font-size: clamp(2.1rem, 8vw, 3.2rem);
  line-height: 1.02;
}
.alta-co-brand {
  font-family: "Fraunces", "Times New Roman", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: -0.5rem;
  background-image: linear-gradient(90deg, #ffffff 0%, var(--color-brand, #0056A7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.alta-lead {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 32rem;
}

/* ----- Welcome step ----- */
.alta-welcome {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 1rem;
}
.alta-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.alta-bullets li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.alta-bullets li::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-brand);
}
.alta-fine {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* ----- Big primary CTA ----- */
.alta-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 1.05rem 1.4rem;
  background-color: var(--color-brand);
  color: #fff;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 160ms ease, transform 80ms ease;
  margin-top: 0.5rem;
}
.alta-cta:hover { background-color: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.alta-cta:active { transform: translateY(1px); }
.alta-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

/* ----- Choice cards (membership type, payment method) ----- */
.alta-choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.alta-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  padding: 1.1rem 1.2rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 80ms ease;
}
.alta-choice:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-2);
}
.alta-choice:active { transform: translateY(1px); }
.alta-choice.is-active {
  border-color: var(--color-brand);
  background-color: rgba(0, 86, 167, 0.10);
}
.alta-choice:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.alta-choice-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
}
.alta-choice-desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ----- Pill row (n-members) ----- */
.alta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.alta-pill {
  flex: 1 1 calc(33.333% - 0.6rem);
  min-width: 6rem;
  padding: 0.95rem 0.6rem;
  text-align: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.alta-pill:hover { border-color: var(--color-border-strong); background-color: var(--color-surface-2); }
.alta-pill.is-active {
  border-color: var(--color-brand);
  background-color: rgba(0, 86, 167, 0.12);
  color: var(--color-text);
}
.alta-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

/* ----- Info card (summer notice on payment step) ----- */
.alta-info-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem;
  background-color: rgba(0, 86, 167, 0.08);
  border: 1px solid color-mix(in oklab, var(--color-brand) 35%, transparent);
  border-radius: var(--radius-lg);
}
.alta-info-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.alta-info-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ----- Phase 1a placeholder summary card ----- */
.alta-summary {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
}
.alta-summary h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 0.85rem;
}
.alta-summary dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.1rem;
  margin: 0;
}
.alta-summary dt {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.alta-summary dd {
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* ----- Stacked pill row (Pilates sessions, Duration) ----- */
.alta-pills--stacked {
  flex-direction: column;
}
.alta-pills--stacked .alta-pill {
  flex: 1 1 auto;
  padding: 1rem 1.1rem;
  text-align: left;
}
.alta-pill-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  margin-top: 0.15rem;
}

/* ----- Forms (contact, minor extra, bank — Phase 1c) ----- */
.alta-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.alta-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.alta-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.alta-input {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.alta-input:hover {
  border-color: var(--color-border-strong);
}
.alta-input:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  background-color: color-mix(in oklab, var(--color-surface) 96%, var(--color-brand) 4%);
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.alta-input::placeholder { color: var(--color-text-subtle); }
.alta-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.alta-field.has-error .alta-input {
  border-color: #d9534f;
  background-color: rgba(217, 83, 79, 0.05);
}
.alta-helper {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  line-height: 1.45;
}
.alta-error {
  font-size: 0.78rem;
  color: #ff8a86;
  min-height: 1em;
  line-height: 1.4;
}
.alta-form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* Phone with country-code prefix — used wherever a phone is asked
   so foreign customers can pick their own dialling code. The two
   children inherit .alta-input styles so they match the rest of
   the form visually; the flex row glues them side-by-side. */
.phone-intl {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.phone-intl-cc {
  flex: 0 0 auto;
  width: auto;
  min-width: 7rem;
  padding-right: 2rem;
  /* native chevron shows on the right edge */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-subtle) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--color-text-subtle) 50%);
  background-position: right 1rem center, right 0.55rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.phone-intl-num {
  flex: 1 1 auto;
  min-width: 0;
}

/* Textarea inherits .alta-input but resizes vertically only. */
.alta-textarea {
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.45;
  font-family: inherit;
}

.alta-optional {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Horizontal row of fields — collapses to stacked on mobile <420px. */
.alta-row {
  display: flex;
  gap: 0.75rem;
}
@media (max-width: 420px) {
  .alta-row { flex-direction: column; gap: 1rem; }
}
.alta-field--narrow { flex: 0 0 9rem; }
.alta-field--grow   { flex: 1 1 auto; min-width: 0; }

/* ----- Radio pills (role, document type) ----- */
.alta-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.alta-radio {
  flex: 1 1 calc(33.333% - 0.5rem);
  min-width: 5.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.85rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
  text-align: center;
}
.alta-radio:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-2);
}
.alta-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.alta-radio.is-active {
  border-color: var(--color-brand);
  background-color: rgba(0, 86, 167, 0.12);
}
.alta-radio:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

/* ----- Secondary button (copy prev tutor) ----- */
.alta-btn-secondary {
  align-self: flex-start;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.alta-btn-secondary:hover {
  border-color: var(--color-brand);
  color: var(--color-text);
  background-color: rgba(0, 86, 167, 0.08);
}
.alta-btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

/* ----- Review screen ----- */
.alta-review {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.alta-review-section {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.alta-review-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.alta-review-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.5rem 1rem;
  padding-block: 0.45rem;
  border-top: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent);
}
.alta-review-row:first-of-type { border-top: 0; padding-top: 0; }
.alta-review-row-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  align-self: start;
  padding-top: 0.18rem;
}
.alta-review-row-value {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}
.alta-review-row-value strong {
  font-weight: 600;
  color: var(--color-text);
}
.alta-review-row-value span {
  color: var(--color-text-muted);
}
@media (max-width: 420px) {
  .alta-review-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.alta-fineprint {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  line-height: 1.5;
  padding-top: 0.5rem;
}

/* AEPD "información básica" first-layer block — shown right above
   the submit so the user sees it in the same field of view as the
   consent checkbox. */
.alta-privacy {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}
.alta-privacy-title {
  margin: 0 0 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.alta-privacy-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
}
.alta-privacy-table dt {
  color: var(--color-text);
  font-weight: 700;
}
.alta-privacy-table dd {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
}
.alta-privacy-table dd a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.alta-privacy-table dd a:hover { color: var(--color-text); }
@media (min-width: 540px) {
  .alta-privacy-table {
    grid-template-columns: 8rem 1fr;
    gap: 0.4rem 1rem;
  }
  .alta-privacy-table dd { margin: 0; }
}

.alta-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-2);
  border-radius: var(--radius-md, 0.6rem);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text);
}
.alta-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--color-brand);
}
.alta-consent a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.alta-consent a:hover { color: var(--color-text); }

.alta-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Submission error banner — shown if the POST to /api/submissions
   fails so the customer can retry instead of staring at a frozen UI. */
.alta-submit-error {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background-color: rgba(217, 83, 79, 0.10);
  border: 1px solid rgba(217, 83, 79, 0.45);
  color: #ff8a86;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ----- Done screen ----- */
.alta-done {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 1.5rem;
}
.alta-done-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(0, 86, 167, 0.15);
  color: var(--color-brand);
  margin-bottom: 0.25rem;
}
.alta-done-ref {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.95rem 1.15rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  align-self: stretch;
}
.alta-done-ref strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* ==========================================================================
   /staff — internal portal (reception)
   Reuses dark theme tokens + .alta-review-* for the detail panel.
   ========================================================================== */

.staff-body { padding-bottom: 0; }

.staff-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--container-pad);
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.staff-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.staff-link {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition: color 160ms ease, border-color 160ms ease;
}
.staff-link:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

/* Live indicator: dot pulses brand-blue when connected, amber when reconnecting */
.staff-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.staff-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-text-subtle);
  box-shadow: 0 0 0 0 transparent;
}
.staff-live[data-state="live"] .staff-live-dot {
  background-color: #4ade80;
  animation: staffPulse 2.4s ease-in-out infinite;
}
.staff-live[data-state="offline"] .staff-live-dot {
  background-color: #f59e0b;
}
@keyframes staffPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.65); }
  50%      { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .staff-live-dot { animation: none !important; }
}

/* Main shell */
.staff-main {
  padding: 1.5rem var(--container-pad) 3rem;
}
.staff-shell {
  max-width: 56rem;
  margin-inline: auto;
}
.staff-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}
.staff-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  color: var(--color-text);
}
.staff-sub {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* Filter pills */
.staff-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.staff-pill {
  padding: 0.45rem 0.95rem;
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.staff-pill:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.staff-pill.is-active {
  color: var(--color-text);
  border-color: var(--color-brand);
  background-color: rgba(0, 86, 167, 0.18);
}

/* Listing */
.staff-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.staff-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.staff-group-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding-left: 0.15rem;
}
.staff-group-items {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.staff-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.staff-row:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-2);
}
.staff-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.staff-row-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.staff-row-name {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.98rem;
  flex: 1 1 auto;
  min-width: 0;
}
.staff-row-time {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.staff-row-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  gap: 0.5rem;
}
.staff-row-ref {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

/* Source badge */
.staff-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
}
.staff-badge--alta {
  background-color: rgba(0, 86, 167, 0.18);
  color: #8fb6f0;
  border-color: rgba(0, 86, 167, 0.4);
}
.staff-badge--cambio {
  background-color: rgba(180, 130, 0, 0.18);
  color: #f4c66a;
  border-color: rgba(180, 130, 0, 0.4);
}

/* Empty state */
.staff-empty {
  padding: 2.5rem 1.25rem;
  text-align: center;
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.staff-empty p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.staff-empty-sub {
  font-size: 0.82rem !important;
  color: var(--color-text-subtle) !important;
  margin-top: 0.5rem;
}

/* Loading inline */
.staff-loading {
  padding: 1.25rem;
  color: var(--color-text-subtle);
  font-size: 0.88rem;
}

/* Detail overlay */
.staff-detail {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.staff-detail-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.staff-detail-panel {
  position: relative;
  width: 100%;
  max-width: 38rem;
  background-color: var(--color-bg);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: staffDetailIn 280ms cubic-bezier(0.22, 0.62, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .staff-detail-panel { animation: none; }
}
@keyframes staffDetailIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@media (max-width: 640px) {
  .staff-detail-panel { max-width: 100%; }
}

.staff-detail-topbar {
  display: flex;
  align-items: center;
  padding: 0.85rem var(--container-pad);
  border-bottom: 1px solid var(--color-border);
}
.staff-detail-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem var(--container-pad) 2rem;
}
.staff-detail-head {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.staff-detail-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -0.018em;
  color: var(--color-text);
}
.staff-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.staff-detail-ref {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

.staff-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* When detail open, lock background scroll on the listing */
body.staff-detail-open {
  overflow: hidden;
}

/* ----- /staff/formularios — index cards for the 4 hojas sueltas ----- */
.forms-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .forms-grid { grid-template-columns: 1fr 1fr; }
}
.forms-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  padding: 1.15rem 1.25rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 80ms ease;
}
.forms-card:hover {
  border-color: var(--color-brand);
  background-color: var(--color-surface-2);
}
.forms-card:active { transform: translateY(1px); }
.forms-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.forms-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
}
.forms-card-desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ----- Footer ----- */
.alta-footer {
  padding: 1.25rem var(--container-pad) 2rem;
  text-align: center;
}
.alta-footer p {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  max-width: 28rem;
  margin-inline: auto;
  line-height: 1.55;
}

/* =========================================================================
   Language switcher (ES / EN-UK) — i18n
   ========================================================================= */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.6rem);
  background-color: var(--color-surface-2);
}
/* El selector del header sigue al nav: oculto en móvil (el menú móvil
   tiene el suyo), visible en tablet+. */
.nav-main-shell > .lang-switch {
  display: none;
}
@media (min-width: 768px) {
  .nav-main-shell > .lang-switch {
    display: inline-flex;
  }
}
/* Rango tablet (768–1023): el logo + 4 enlaces + selector no caben con
   el espaciado de escritorio. Apretamos gaps, padding y tamaño del
   selector para evitar overflow horizontal. */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-main-shell {
    gap: 0.6rem;
  }
  .nav-links {
    gap: 0.1rem;
  }
  .nav-link {
    padding: 0.5rem 0.55rem;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
  }
  .nav-main-shell > .lang-switch {
    padding: 0.15rem;
    gap: 0.15rem;
  }
  .nav-main-shell > .lang-switch .lang-opt {
    padding: 0.28rem 0.42rem;
    font-size: 0.72rem;
    gap: 0.3rem;
  }
}
.lang-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm, 0.4rem);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background-color: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.lang-opt:hover {
  color: var(--color-text);
}
.lang-opt.is-active {
  color: var(--color-text);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-base, 0 1px 2px rgba(0, 0, 0, 0.25));
}
.lang-opt:focus-visible {
  outline: 2px solid var(--color-brand, currentColor);
  outline-offset: 2px;
}
.lang-flag {
  width: 1.05rem;
  height: auto;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
/* En el menú móvil el selector ocupa todo el ancho de forma cómoda */
.mobile-menu .lang-switch {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}
.mobile-menu .lang-opt {
  flex: 1;
  justify-content: center;
  padding-block: 0.55rem;
  font-size: 0.85rem;
}