/* ============================================================
   operator_landing.css - B2B landing «Para tu centro» (/para-tu-centro/).
   Loaded only by web_public/operator_landing.html, after public.css.
   Complements tokens.css (--tg-*); page tokens use --op-*, classes .op-*.
   Breakpoints: >= 980px full layout, >= 600px mock sidebars and the
   overlapping activity card, < 600px everything stacked.
   ============================================================ */

:root {
  --op-navy-soft: #1c3d68;
  --op-on-navy: #eaf0f7;
  --op-on-navy-muted: #9fb2c9;
  --op-line-strong: #c4cdd6;
  --op-divider: #eef1f4;
  --op-selected-bg: #fff8ef;
  --op-accent-ink: #0a1d36; /* text on orange: 7:1 */

  --op-ok-bg: #e7f4ec;      --op-ok-fg: #1e7a46;      --op-ok-bd: #bcdeca;
  --op-warn-bg: #fbf3e3;    --op-warn-fg: #b7791f;    --op-warn-bd: #ead6a8;
  --op-danger-bg: #fbebe9;  --op-danger-fg: #b42318;  --op-danger-bd: #edbdb8;
  --op-info-bg: #eaf0fc;    --op-info-fg: #2563eb;    --op-info-bd: #bcd0f2;
  --op-neutral-bg: #eef1f4; --op-neutral-fg: #657386; --op-neutral-bd: #d3dbe5;

  --op-radius-sm: 8px;
  --op-radius: 12px;
  --op-radius-lg: 16px;
  --op-radius-xl: 20px;
  --op-radius-pill: 999px;

  --op-shadow-card: 0 1px 3px rgba(15, 41, 75, .06);
  --op-shadow-raised: 0 6px 22px rgba(11, 31, 56, .08);
  --op-shadow-mock: 0 24px 60px rgba(11, 31, 56, .12);
  --op-shadow-hero: 0 30px 80px rgba(4, 12, 26, .45);
  --op-shadow-float: 0 24px 60px rgba(4, 12, 26, .35);

  --op-container: 1180px;
  --op-gutter: clamp(20px, 4vw, 40px);
  --op-section-y: clamp(72px, 9vw, 120px);
  --op-font: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Anchors jump straight to their section, which starts right under the sticky
   topbar (74 px, 66 px in the drawer layout). The page runs to about nineteen
   phone screens, and smooth scrolling across it flashed the whole page past. */
html:has(body.operator-landing) { scroll-padding-top: 74px; }
@media (max-width: 900px) {
  html:has(body.operator-landing) { scroll-padding-top: 66px; }
}

/* ---------- Shared shell, page variant ---------- */
/* The metric-matched fallback keeps the shell and hero still while Montserrat loads. */
body.operator-landing { background: var(--tg-white); font-family: var(--op-font); }

body.operator-landing .brand { flex: 0 0 auto; }

.op-brand-tag {
  border-left: 1px solid rgba(255, 255, 255, .18);
  color: var(--tg-orange);
  font: 700 11px/1.2 var(--op-font);
  letter-spacing: .14em;
  padding-left: clamp(12px, 2vw, 20px);
  text-transform: uppercase;
  white-space: nowrap;
}

body.operator-landing .topbar-inner { gap: clamp(14px, 2vw, 22px); }
body.operator-landing .topbar nav { margin-left: auto; }
body.operator-landing .topbar nav a.nav-link { white-space: nowrap; }


@media (min-width: 901px) and (max-width: 1099px) {
  body.operator-landing .op-brand-tag { display: none; }
  body.operator-landing.public-landing .topbar nav { gap: 16px; }
  body.operator-landing.public-landing .topbar nav a.nav-link { font-size: 13px; }
  body.operator-landing.public-landing .topbar nav a.nav-auth,
  body.operator-landing.public-landing .topbar nav a.nav-cta { padding: 0 14px; }
}

/* The header call to action keeps the footprint of «CONTRATA ONLINE» on the
   rest of the public site, whatever its label. */
@media (min-width: 901px) {
  body.operator-landing.public-landing .topbar nav a.nav-cta { min-width: 186px; }
}

@media (max-width: 599px) {
  .op-brand-tag { display: none; }
}

/* ---------- Page base ---------- */
.op-page {
  color: var(--tg-ink);
  font-family: var(--op-font);
  -webkit-font-smoothing: antialiased;
}

/* Zero-specificity resets over base.css element rules, so .op-* classes win. */
.op-page :where(h1, h2, h3, h4, p, figure, ol, ul, dl, dd) { margin: 0; }
.op-page :where(ol, ul) { list-style: none; padding: 0; }
.op-page :where(img) { display: block; max-width: 100%; }
.op-page :where(button) { font-family: var(--op-font); min-height: 0; }
.op-page :where(table) { border-collapse: collapse; width: 100%; }
.op-page :where(th, td) { border: 0; padding: 0; vertical-align: middle; }
.op-page :where(label) { margin: 0; }
/* Hover is shown by colour, never by underline; must outrank base.css a:hover. */
.op-page a:hover { text-decoration: none; }
.op-page [hidden] { display: none !important; }

.op-container { margin-inline: auto; max-width: var(--op-container); padding-inline: var(--op-gutter); }
.op-section { background: var(--tg-white); padding-block: var(--op-section-y); }
.op-section--alt { background: var(--tg-surface); border-block: 1px solid var(--op-divider); }
.op-section--navy { background: var(--tg-navy); color: var(--tg-white); }
.op-section--deep { background: var(--tg-navy-deep); color: var(--tg-white); }

.op-grid {
  display: grid;
  gap: var(--op-gap, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--op-min, 400px)), 1fr));
}

.op-num { font-variant-numeric: tabular-nums; }

.op-eyebrow {
  color: var(--tg-orange-ink);
  font: 700 12.5px/1.3 var(--op-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.op-hero .op-eyebrow, .op-section--navy .op-eyebrow, .op-section--deep .op-eyebrow { color: var(--tg-orange); }

.op-h1 {
  color: var(--tg-white);
  font: 800 clamp(32px, 4.2vw, 54px)/1.04 var(--op-font);
  letter-spacing: -.025em;
  text-wrap: balance;
}
/* The orange words always close the headline on a line of their own. */
.op-h1 em { color: var(--tg-orange); display: block; font-style: normal; }

.op-h2 {
  color: var(--tg-navy);
  font: 800 clamp(30px, 3.4vw, 44px)/1.1 var(--op-font);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.op-section--navy .op-h2, .op-section--deep .op-h2 { color: var(--tg-white); }
.op-h2--demo { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.06; }

.op-h3 {
  color: var(--tg-navy);
  font: 800 clamp(26px, 2.6vw, 32px)/1.1 var(--op-font);
  letter-spacing: -.02em;
}

.op-lead {
  color: var(--tg-muted);
  font: 400 clamp(16px, 1.3vw, 18px)/1.6 var(--op-font);
  text-wrap: pretty;
}
.op-section--navy .op-lead, .op-section--deep .op-lead { color: var(--op-on-navy); }
.op-lead--hero { color: var(--op-on-navy); font-size: clamp(17px, 1.5vw, 19px); max-width: 540px; }

.op-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }
.op-head--center { align-items: center; margin-inline: auto; max-width: 780px; text-align: center; }
.op-head--center .op-lead { max-width: 600px; }
.op-head--split { align-items: flex-end; flex-flow: row wrap; justify-content: space-between; gap: 20px 48px; }
.op-head--split > div { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.op-head--split .op-lead { max-width: 440px; }

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

/* ---------- Buttons and links ---------- */
/* One button, with the measures of the public site's CTA (public.css
   .tg-btn-cta): 52 px tall, 15 px semibold, 6 px corners. From tablets up a
   call to action on its own also has one width, which fits the longest label.
   The exceptions follow their container: the hero pair shares a row, a card's
   button takes the card's width and a form's button the form's. */
.op-btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font: 600 15px/1 var(--op-font);
  gap: 9px;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.op-btn--block { width: 100%; }
@media (min-width: 600px) {
  .op-btn { min-width: 300px; }
  .op-hero .op-actions .op-btn { flex: 1 1 0; max-width: 270px; min-width: 0; }
}
/* Same orange CTA as the rest of the public site: white on orange, inverted on hover. */
.op-btn--accent { background: var(--tg-orange); border-color: var(--tg-orange); color: var(--tg-white); }
.op-btn--accent:hover { background: var(--tg-white); border-color: var(--tg-orange); color: var(--tg-orange); }
.op-btn--navy { background: var(--tg-navy); border-color: var(--tg-navy); color: var(--tg-white); }
.op-btn--navy:hover { background: var(--tg-navy-deep); border-color: var(--tg-navy-deep); color: var(--tg-white); }
.op-btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .35); color: var(--tg-white); }
.op-btn--ghost-light:hover { background: rgba(255, 255, 255, .06); border-color: var(--tg-white); color: var(--tg-white); }
.op-btn--ghost { background: var(--tg-white); border-color: var(--op-line-strong); color: var(--tg-navy); }
.op-btn--ghost:hover { border-color: var(--tg-navy); color: var(--tg-navy); }
.op-btn--whatsapp { background: #1e7a46; border-color: #1e7a46; color: var(--tg-white); }
.op-btn--whatsapp:hover { background: #17613a; border-color: #17613a; color: var(--tg-white); }
.op-btn .op-icon { flex: 0 0 auto; }
/* Phones: every button spans its container, 48 px tall like the site's. */
@media (max-width: 599px) {
  .op-btn { min-height: 48px; padding-inline: 20px; width: 100%; }
}

.op-link { color: var(--tg-navy); font: 700 14px/1.4 var(--op-font); text-decoration: none; }
.op-link:hover { color: var(--tg-orange-ink); }
.op-link--light { color: var(--tg-white); }
.op-link--light:hover { color: var(--tg-orange); }

.op-page a:focus-visible, .op-page button:focus-visible, .op-page summary:focus-visible,
.op-page input:focus-visible { outline: 2px solid var(--op-navy-soft); outline-offset: 2px; }
.op-hero a:focus-visible, .op-section--navy a:focus-visible, .op-section--deep a:focus-visible,
.op-section--navy button:focus-visible, .op-card--navy a:focus-visible, .op-card--navy button:focus-visible { outline-color: var(--tg-orange); }

.op-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.op-actions--note { align-items: center; gap: 12px 18px; }
.op-actions__note { color: var(--op-on-navy); font: 600 13.5px/1.4 var(--op-font); }
.op-actions__note--dark { color: var(--tg-muted); }

/* ---------- Tags, badges, example label ---------- */
.op-tag {
  border-radius: var(--op-radius-pill);
  display: inline-flex;
  font: 800 11px/1 var(--op-font);
  letter-spacing: .08em;
  padding: 6px 10px;
  text-transform: uppercase;
}
.op-tag--navy { background: var(--tg-navy); color: var(--tg-white); }
.op-tag--orange { background: var(--tg-orange); color: var(--op-accent-ink); }
.op-tag--deep { background: var(--tg-navy-deep); color: var(--tg-orange); }

.op-badge {
  align-items: center;
  border: 1px solid;
  border-radius: var(--op-radius-pill);
  display: inline-flex;
  font: 650 11.5px/1 var(--op-font);
  gap: 5px;
  padding: 4px 8px;
  white-space: nowrap;
}
.op-badge::before { background: currentColor; border-radius: 50%; content: ""; height: 6px; width: 6px; }
.op-badge--ok { background: var(--op-ok-bg); border-color: var(--op-ok-bd); color: var(--op-ok-fg); }
.op-badge--warn { background: var(--op-warn-bg); border-color: var(--op-warn-bd); color: var(--op-warn-fg); }
.op-badge--danger { background: var(--op-danger-bg); border-color: var(--op-danger-bd); color: var(--op-danger-fg); }
.op-badge--info { background: var(--op-info-bg); border-color: var(--op-info-bd); color: var(--op-info-fg); }
.op-badge--neutral { background: var(--op-neutral-bg); border-color: var(--op-neutral-bd); color: var(--op-neutral-fg); }

.op-example-tag {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: var(--op-radius-pill);
  color: var(--tg-muted);
  font: 700 10px/1 var(--op-font);
  letter-spacing: .08em;
  padding: 4px 8px;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */
.op-hero { background: var(--tg-navy); color: var(--tg-white); overflow: hidden; position: relative; }
.op-hero::before { background: var(--tg-hero-glow); content: ""; inset: 0; pointer-events: none; position: absolute; }
.op-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(48px, 6vw, 80px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  padding-bottom: clamp(64px, 8vw, 112px);
  padding-top: clamp(48px, 7vw, 96px);
  position: relative;
}
/* The copy column takes a little more room, so the headline sets in three lines. */
@media (min-width: 1040px) {
  .op-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.op-hero__copy { display: flex; flex-direction: column; gap: 28px; }
.op-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.op-hero__facts li { align-items: center; color: var(--op-on-navy); display: inline-flex; font: 600 14px/1.3 var(--op-font); gap: 8px; }
.op-hero__facts .op-icon { color: var(--tg-orange); }

.op-hero__visual { position: relative; }
.op-hero__photo { position: relative; }
.op-hero__photo img {
  aspect-ratio: 4 / 4.3;
  border-radius: 22px;
  box-shadow: var(--op-shadow-hero);
  height: auto;
  object-fit: cover;
  width: 100%;
}
.op-hero__chip {
  background: var(--tg-navy);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--op-radius-pill);
  color: var(--tg-white);
  font: 600 12px/1 var(--op-font);
  padding: 9px 13px;
  position: absolute;
  right: 14px;
  top: 14px;
}

.op-activity {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow-float);
  color: var(--tg-ink);
  margin: -88px 12px 0;
  overflow: hidden;
  position: relative;
}
.op-activity__head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; padding: 16px 18px 12px; }
.op-activity__title { color: var(--tg-navy); font: 700 14px/1.3 var(--op-font); }
.op-activity__sub { color: var(--tg-muted); font: 500 11.5px/1.4 var(--op-font); }
.op-live {
  align-items: center;
  background: var(--op-ok-bg);
  border: 1px solid var(--op-ok-bd);
  border-radius: var(--op-radius-pill);
  color: var(--op-ok-fg);
  display: inline-flex;
  font: 700 10.5px/1 var(--op-font);
  gap: 6px;
  letter-spacing: .06em;
  padding: 5px 9px;
  text-transform: uppercase;
}
.op-live-dot { background: var(--op-ok-fg); border-radius: 50%; height: 7px; width: 7px; }

.op-activity__rows { border-top: 1px solid var(--op-divider); }
.op-activity__row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 10px 18px;
  transition: opacity 300ms ease, background-color 300ms ease;
}
.op-activity__row + .op-activity__row { border-top: 1px solid var(--op-divider); }
.op-activity__icon {
  align-items: center;
  border: 1px solid var(--op-ok-bd);
  border-radius: 50%;
  background: var(--op-ok-bg);
  color: var(--op-ok-fg);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.op-activity__icon .op-pulse, .op-activity__icon .op-activity__dot { display: none; }
.op-activity__text { display: flex; flex-direction: column; min-width: 0; }
.op-activity__name { color: var(--tg-navy); font: 700 13.5px/1.3 var(--op-font); }
.op-activity__meta { color: var(--tg-muted); font: 500 11.5px/1.4 var(--op-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-activity__time { color: var(--tg-navy); font: 600 11.5px/1 var(--op-font); font-variant-numeric: tabular-nums; }

.op-activity__row.is-current { background: var(--op-selected-bg); }
.op-activity__row.is-current .op-activity__icon { background: var(--tg-white); border-color: var(--tg-orange); }
.op-activity__row.is-current .op-activity__check { display: none; }
.op-activity__row.is-current .op-pulse { display: block; }

.op-activity__row.is-pending { opacity: .45; }
.op-activity__row.is-pending .op-activity__icon { background: var(--tg-surface); border-color: var(--tg-line); }
.op-activity__row.is-pending .op-activity__check { display: none; }
.op-activity__row.is-pending .op-activity__dot { background: var(--op-line-strong); border-radius: 50%; display: block; height: 6px; width: 6px; }
.op-activity__row.is-pending .op-activity__time { visibility: hidden; }

.op-pulse { background: var(--tg-orange); border-radius: 50%; height: 9px; position: relative; width: 9px; }
.op-pulse::after { animation: op-pulse 1.4s ease-out infinite; background: rgba(229, 149, 54, .6); border-radius: 50%; content: ""; inset: 0; position: absolute; }

.op-activity__foot {
  align-items: center;
  background: var(--tg-surface);
  border-top: 1px solid var(--op-divider);
  color: #1c3d68;
  display: flex;
  font: 600 12px/1.3 var(--op-font);
  gap: 8px;
  padding: 11px 18px;
}
.op-activity__foot .op-example-tag { margin-left: auto; }

@media (min-width: 600px) {
  .op-hero__visual { padding: 0 0 clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px); }
  .op-activity { bottom: 0; left: 0; margin: 0; position: absolute; width: min(100%, 370px); }
}

/* ---------- Platform journey ---------- */
.op-journey {
  align-items: start;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
.op-journey__steps { display: flex; flex-direction: column; gap: 6px; }
.op-journey__tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--op-radius);
  color: var(--tg-navy);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 20px 15px 24px;
  position: relative;
  text-align: left;
  transition: background-color 160ms ease, border-color 160ms ease;
  width: 100%;
}
.op-journey__tab:hover { background: var(--tg-surface); border-color: var(--op-divider); }
.op-journey__kicker { align-items: baseline; display: flex; gap: 10px; }
.op-journey__num { color: var(--tg-muted); font: 800 12px/1 var(--op-font); font-variant-numeric: tabular-nums; }
.op-journey__label { color: var(--tg-muted); display: none; font: 700 12px/1 var(--op-font); letter-spacing: .08em; text-transform: uppercase; }
.op-journey__heading { color: var(--tg-navy); font: 700 16px/1.3 var(--op-font); }
.op-journey__body { color: var(--tg-muted); display: none; font: 400 15px/1.55 var(--op-font); }
.op-journey__progress { background: var(--op-divider); border-radius: 3px; display: none; height: 3px; margin-top: 8px; overflow: hidden; }
/* transform-only fill: composited, no layout work during the 6 s autoplay */
.op-journey__progress span { background: var(--tg-orange); display: block; height: 100%; transform: scaleX(0); transform-origin: left center; width: 100%; }

.op-journey__step.is-active .op-journey__tab,
.op-journey:not(.is-enhanced) .op-journey__tab {
  background: var(--tg-white);
  border-color: var(--tg-line);
  box-shadow: var(--op-shadow-raised);
  cursor: default;
  padding: 18px 20px 16px 24px;
}
.op-journey__step.is-active .op-journey__tab::before {
  background: var(--tg-orange);
  border-radius: 3px;
  bottom: 14px;
  content: "";
  left: 0;
  position: absolute;
  top: 14px;
  width: 3px;
}
.op-journey__step.is-active .op-journey__num,
.op-journey:not(.is-enhanced) .op-journey__num { color: var(--tg-orange-ink); }
.op-journey__step.is-active .op-journey__label,
.op-journey:not(.is-enhanced) .op-journey__label { display: inline; }
.op-journey__step.is-active .op-journey__heading,
.op-journey:not(.is-enhanced) .op-journey__heading { font-size: 19px; font-weight: 800; }
.op-journey__step.is-active .op-journey__body,
.op-journey:not(.is-enhanced) .op-journey__body { display: block; }
.op-journey.is-enhanced .op-journey__step.is-active .op-journey__progress { display: block; }
.op-journey.is-autoplay .op-journey__step.is-active .op-journey__progress span.is-running { transform: scaleX(1); transition: transform 6000ms linear; }
.op-journey.is-enhanced:not(.is-autoplay) .op-journey__step.is-active .op-journey__progress span { transform: scaleX(1); }

/* Stacked layout (class set by the script): every step shows its text in the
   same box, so autoplay repaints the highlight without moving any content. */
.op-journey.is-stacked .op-journey__tab { padding: 18px 20px 16px 24px; }
.op-journey.is-stacked .op-journey__label { display: inline; }
.op-journey.is-stacked .op-journey__heading { font-size: 19px; font-weight: 800; }
.op-journey.is-stacked .op-journey__body { display: block; }
.op-journey.is-stacked .op-journey__progress { display: block; visibility: hidden; }
.op-journey.is-stacked .op-journey__step.is-active .op-journey__progress { visibility: visible; }

.op-window {
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow-mock);
  overflow: hidden;
  position: sticky;
  top: 100px;
}
/* The script gives every panel the height of the tallest one; each body
   stretches to it, so a shorter illustration never leaves a strip of the
   window's own background under its photo or its coloured surface. */
.op-window__panel { display: flex; flex-direction: column; }
.op-window__panel:focus-visible { outline: 2px solid var(--op-navy-soft); outline-offset: -2px; }
.op-window__bar { align-items: center; background: var(--tg-surface); border-bottom: 1px solid var(--op-divider); display: flex; gap: 14px; padding: 12px 16px; }
.op-window__dots { display: inline-flex; gap: 6px; }
.op-window__dots span { background: var(--tg-line); border-radius: 50%; height: 10px; width: 10px; }
.op-window__url {
  align-items: center;
  background: var(--tg-white);
  border: 1px solid var(--tg-line);
  border-radius: var(--op-radius-pill);
  color: var(--tg-muted);
  display: inline-flex;
  flex: 1 1 auto;
  font: 500 12px/1 var(--op-font);
  gap: 7px;
  max-width: 340px;
  overflow: hidden;
  padding: 7px 12px;
  white-space: nowrap;
}
.op-window__url .op-icon { color: var(--op-ok-fg); }
.op-window__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; min-height: 450px; padding: 22px; position: relative; }
.op-window__bar .op-example-tag { flex: 0 0 auto; margin-left: auto; }

/* Mock primitives */
.op-mock-title { color: var(--tg-navy); font: 800 18px/1.2 var(--op-font); }
.op-mock-sub, .op-mock-muted { color: var(--tg-muted); font: 500 12px/1.4 var(--op-font); }
.op-mock-sub { margin-top: -10px; }
.op-mock-strong { color: var(--tg-navy); font: 700 13.5px/1.35 var(--op-font); }
.op-mock-caps { color: var(--tg-muted); display: block; font: 700 10px/1.2 var(--op-font); letter-spacing: .1em; text-transform: uppercase; }
.op-mock-card { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: var(--op-radius); padding: 14px 16px; }
.op-mock-btn {
  align-items: center;
  background: var(--tg-orange);
  border-radius: var(--op-radius-sm);
  color: var(--tg-white);
  display: inline-flex;
  font: 700 13px/1 var(--op-font);
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
}
.op-mock-btn--block { min-height: 46px; width: 100%; }
.op-code { color: var(--tg-navy); display: block; font: 800 26px/1.1 var(--op-font); font-variant-numeric: tabular-nums; letter-spacing: .18em; }

/* Step 1: plan. The shared vignette (public.css .tg-vignette) keeps the band's
   own shape but never drops below a minimum height: below that width it shows
   fewer rooms at a constant scale. The band fades out towards the rest of the centre. */
.op-plan {
  background: var(--tg-plan-circulation);
  border: 1px solid var(--op-divider);
  border-radius: var(--op-radius);
  overflow: hidden;
}
.op-plan__svg {
  aspect-ratio: var(--tg-vignette-aspect);
  min-height: 214px;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 17%);
  mask-image: linear-gradient(to left, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 17%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.op-plan-legend { color: var(--tg-muted); display: flex; flex-wrap: wrap; font: 500 11.5px/1 var(--op-font); gap: 14px; }
.op-plan-legend span { align-items: center; display: inline-flex; gap: 6px; }
.op-plan-legend span::before { border: 1px solid; border-radius: 3px; content: ""; height: 10px; width: 10px; }
.op-plan-legend .is-free::before { background: var(--tg-plan-available-fill); border-color: var(--tg-plan-available-stroke); }
.op-plan-legend .is-occupied::before { background: var(--tg-plan-occupied-fill); border-color: var(--tg-plan-occupied-stroke); }
.op-plan-legend .is-chosen::before { background: var(--tg-plan-selected-fill); border-color: var(--tg-plan-selected-fill); }
.op-find-card { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: auto; }
.op-find-card > div:first-child { flex: 1 1 160px; }
.op-find-card__price { align-items: flex-end; display: flex; flex-direction: column; }
.op-find-card__amount { color: var(--tg-navy); font: 800 22px/1 var(--op-font); }
.op-find-card__amount small { color: var(--tg-muted); font-size: 12px; font-weight: 600; }
.op-find-card__vat { color: var(--tg-muted); font: 700 9.5px/1.4 var(--op-font); letter-spacing: .06em; text-transform: uppercase; }

/* Step 2: visit */
.op-days, .op-slots { display: grid; gap: 8px; }
.op-days { display: flex; flex-wrap: wrap; }
.op-days span, .op-slots span {
  border: 1px solid var(--tg-line);
  border-radius: var(--op-radius-sm);
  color: var(--tg-navy);
  font: 600 12.5px/1 var(--op-font);
  padding: 10px 12px;
  text-align: center;
}
.op-days .is-selected { background: var(--tg-navy); border-color: var(--tg-navy); color: var(--tg-white); }
.op-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-slots .is-selected { background: var(--tg-orange); border-color: var(--tg-orange); color: var(--op-accent-ink); font-weight: 700; }
.op-slots .is-disabled { background: var(--tg-surface); color: var(--op-line-strong); text-decoration: line-through; }
.op-visit-card {
  align-items: flex-end;
  background: var(--op-ok-bg);
  border: 1px solid var(--op-ok-bd);
  border-radius: var(--op-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: auto;
  padding: 16px;
}
.op-visit-card > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.op-visit-card .op-badge { align-self: flex-start; background: var(--tg-white); }
.op-visit-card__note { color: var(--op-ok-fg); font: 500 12px/1.4 var(--op-font); }
.op-visit-card__code { text-align: right; }
.op-visit-card__code .op-mock-caps { color: var(--op-ok-fg); }

/* Step 3: contract */
.op-doc { border: 1px solid var(--tg-line); border-radius: var(--op-radius); display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.op-doc__head { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; }
.op-doc__lines { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.op-doc__lines span { background: var(--op-divider); border-radius: 4px; display: block; height: 7px; }
.op-doc__lines span:nth-child(2) { width: 92%; }
.op-doc__lines span:nth-child(4) { width: 78%; }
.op-doc__lines span:nth-child(5) { width: 55%; }
.op-doc__sign { align-items: center; border: 1.5px dashed var(--op-line-strong); border-radius: var(--op-radius-sm); display: flex; gap: 12px; justify-content: space-between; padding: 10px 14px; }
.op-doc__signer { display: flex; flex-direction: column; text-align: right; }
.op-status-list { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.op-status-list li { align-items: center; color: var(--tg-navy); display: flex; font: 600 12.5px/1.35 var(--op-font); gap: 10px; }
.op-status-list .op-badge { flex: 0 0 auto; min-width: 92px; }

/* Step 4: payment */
.op-pay-summary { border: 1px solid var(--tg-line); border-radius: var(--op-radius); overflow: hidden; }
.op-pay-summary > div { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 12px 14px; }
.op-pay-summary__total { background: var(--tg-surface); border-top: 1px solid var(--op-divider); }
.op-pay-summary small { color: var(--tg-muted); font: 600 11px/1 var(--op-font); }
.op-pay-fields { display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; }
.op-pay-fields span { border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-sm); color: var(--tg-navy); font: 600 13px/1 var(--op-font); padding: 13px 12px; }
.op-pay-fields span:last-child { color: var(--tg-muted); }

/* Step 5: access */
.op-window__body--accede { overflow: hidden; padding: 0; }
.op-access__photo { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.op-access__card {
  background: var(--tg-white);
  border-radius: var(--op-radius);
  box-shadow: var(--op-shadow-float);
  display: flex;
  flex-direction: column;
  gap: 12px;
  inset: auto 16px 44px;
  padding: 16px;
  position: absolute;
}
.op-access__row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.op-access__after { margin-left: auto; }
.op-access__row--split { align-items: flex-end; justify-content: space-between; }
.op-access__facts { color: var(--tg-navy); display: flex; flex-direction: column; font: 600 12px/1.5 var(--op-font); text-align: right; }

/* Step 6 and TECH: console */
/* Grows to the window body's full height so its surface reaches the frame's bottom edge. */
.op-console { background: var(--tg-surface); display: flex; flex: 1 1 auto; min-height: 100%; }
.op-window__body--controla { padding: 0; }
.op-console__side {
  background: linear-gradient(180deg, var(--tg-navy), var(--tg-navy-deep));
  color: var(--op-on-navy-muted);
  display: none;
  flex: 0 0 136px;
  flex-direction: column;
  gap: 4px;
  padding: 16px 10px;
}
.op-console__brand { color: var(--tg-white); font: 800 13px/1 var(--op-font); margin: 0 6px 12px; }
.op-console__brand span { color: var(--tg-orange); }
.op-console__center { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--op-radius-sm); display: flex; flex-direction: column; font: 600 10px/1.3 var(--op-font); margin-bottom: 8px; padding: 8px; text-transform: uppercase; }
.op-console__center strong { color: var(--tg-white); font-size: 12px; text-transform: none; }
.op-console__group { font: 700 9.5px/1 var(--op-font); letter-spacing: .1em; margin: 10px 6px 4px; text-transform: uppercase; }
.op-console__item { border: 1px solid transparent; border-radius: 6px; color: var(--op-on-navy); font: 600 12px/1 var(--op-font); padding: 8px; }
.op-console__item::before { border: 1.5px solid currentColor; border-radius: 3px; content: ""; display: inline-block; height: 9px; margin-right: 8px; opacity: .7; vertical-align: -1px; width: 9px; }
.op-console__item.is-active { background: rgba(229, 149, 54, .16); border-color: rgba(229, 149, 54, .4); color: var(--tg-white); }
.op-console__item.is-active::before { background: var(--tg-orange); border-color: var(--tg-orange); opacity: 1; }
.op-console__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; position: relative; }
.op-kpis { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-kpi { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: 10px; container-type: inline-size; padding: 10px 12px; }
/* Figures stay on one line and shrink with the card on narrow phones. */
.op-kpi strong { color: var(--tg-navy); display: block; font: 800 20px/1.2 var(--op-font); font-size: clamp(14px, 23cqi, 20px); font-variant-numeric: tabular-nums; margin-top: 4px; white-space: nowrap; }
.op-kpi--ok { border-top: 3px solid var(--op-ok-fg); }
.op-kpi--danger { border-top: 3px solid var(--op-danger-fg); }
.op-kpi--danger strong { color: var(--op-danger-fg); }
.op-attention { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: 10px; overflow: hidden; }
.op-attention__title { color: var(--tg-navy); font: 700 12.5px/1 var(--op-font); padding: 12px 14px; }
.op-attention__row { align-items: center; border-top: 1px solid var(--op-divider); box-shadow: inset 3px 0 0 var(--op-danger-fg); display: flex; gap: 10px; justify-content: space-between; padding: 10px 14px; }
.op-attention__row--warn { box-shadow: inset 3px 0 0 var(--op-warn-fg); }
.op-attention__row > div { display: flex; flex-direction: column; min-width: 0; }
.op-console__done { align-items: center; color: var(--op-ok-fg); display: flex; font: 600 12px/1 var(--op-font); gap: 6px; margin-top: auto; padding-bottom: 24px; }

.op-console--dark {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--op-radius-lg);
  box-shadow: 0 30px 80px rgba(4, 12, 26, .5);
  overflow: hidden;
}
.op-console--dark .op-console__side { flex-basis: 156px; }
.op-console__top { display: flex; flex-direction: column; gap: 4px; }
.op-console__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.op-console__chips span { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: var(--op-radius-pill); color: var(--tg-navy); font: 600 11.5px/1 var(--op-font); padding: 7px 10px; }
.op-console__chips span.is-active { background: var(--tg-navy); border-color: var(--tg-navy); color: var(--tg-white); }
.op-console__chips b { background: rgba(15, 41, 75, .08); border-radius: 6px; font-weight: 700; margin-left: 4px; padding: 2px 5px; }
.op-console__chips .is-active b { background: rgba(255, 255, 255, .18); }
.op-units { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: 10px; overflow: hidden; }
.op-units__row {
  align-items: center;
  border-top: 1px solid var(--op-divider);
  color: var(--tg-navy);
  display: grid;
  font: 500 12px/1.2 var(--op-font);
  gap: 8px;
  grid-template-columns: .8fr .8fr 1.3fr 1.1fr;
  padding: 10px 12px;
}
.op-units__row--head { background: var(--tg-surface); border-top: 0; color: var(--tg-muted); font: 700 10px/1 var(--op-font); letter-spacing: .08em; text-transform: uppercase; }
.op-units__row--alert { box-shadow: inset 3px 0 0 var(--op-danger-fg); }
.op-units__none { color: var(--tg-muted); }
.op-console__tag { position: absolute; right: 12px; top: 14px; }

@media (min-width: 600px) {
  .op-console__side { display: flex; }
}

/* Step 6: the customer portal's Resumen in miniature. Colours, labels and
   layout follow customer_portal/portal.css, scaled to the window. */
.op-window__body--gestiona { padding: 0; }
.op-portal { background: var(--tg-page); display: flex; flex: 1 1 auto; flex-direction: column; min-height: 100%; }
.op-portal__side { background: var(--tg-navy); display: none; flex: 0 0 148px; flex-direction: column; gap: 4px; padding: 14px 10px; }
.op-portal__logo { display: block; height: auto; width: 74px; }
.op-portal__side .op-portal__logo { margin: 0 auto 10px; }
.op-portal__user { align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; color: var(--tg-white); display: flex; font: 700 11.5px/1 var(--op-font); gap: 8px; margin-bottom: 8px; padding: 7px 8px; }
.op-portal__avatar { align-items: center; background: var(--tg-orange); border-radius: 50%; display: inline-flex; flex: 0 0 24px; font-size: 11px; height: 24px; justify-content: center; }
.op-portal__nav { align-items: center; border-radius: 6px; color: rgba(255, 255, 255, .85); display: flex; font: 600 11.5px/1 var(--op-font); gap: 8px; padding: 8px; }
.op-portal__nav.is-active { background: var(--tg-orange); color: var(--tg-white); }
.op-portal__top { align-items: center; background: var(--tg-navy); display: flex; justify-content: space-between; padding: 8px 14px; }
.op-portal__menu { border: 1px solid rgba(255, 255, 255, .35); border-radius: 7px; display: flex; flex-direction: column; gap: 4px; padding: 8px 7px; }
.op-portal__menu span { background: var(--tg-white); border-radius: 1px; height: 2px; width: 16px; }
/* Like a phone screen, the main column never grows the window: what does not fit is cut off. */
.op-portal__main { contain: size; display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; padding: 16px; }
.op-portal__main > * { flex: none; }
.op-portal__hello { color: var(--tg-navy); font: 700 19px/1.2 var(--op-font); }
.op-portal__intro { color: var(--tg-muted); font: 400 12px/1.45 var(--op-font); margin-top: 2px; }
.op-portal__stats { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-portal__stat { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: 8px; min-width: 0; padding: 7px 10px; }
.op-portal__stat small { color: var(--tg-muted); display: block; font: 700 8.5px/1.25 var(--op-font); letter-spacing: .03em; text-transform: uppercase; }
.op-portal__stat strong { color: var(--tg-navy); display: block; font: 800 17px/1.2 var(--op-font); margin-top: 3px; }
.op-portal__label { color: var(--tg-muted); font: 700 9.5px/1 var(--op-font); letter-spacing: .08em; text-transform: uppercase; }
.op-portal__lease { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: 10px; }
.op-portal__lease-head { align-items: center; border-bottom: 1px solid var(--tg-line); display: flex; gap: 10px; justify-content: space-between; padding: 10px 14px; }
.op-portal__lease-head strong { color: var(--tg-navy); display: block; font: 700 13px/1.3 var(--op-font); }
.op-portal__lease-head small { color: var(--tg-muted); display: block; font: 400 10.5px/1.4 var(--op-font); margin-top: 2px; }
.op-portal__pill { background: #e8f5ec; border-radius: 999px; color: #1e7c43; flex: 0 0 auto; font: 700 8.5px/1 var(--op-font); letter-spacing: .05em; padding: 4px 9px; text-transform: uppercase; }
.op-portal__lease-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; }
.op-portal__row { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
.op-portal__row span { color: var(--tg-muted); font: 400 11.5px/1.3 var(--op-font); }
.op-portal__row strong { color: var(--tg-ink); font: 600 11.5px/1.3 var(--op-font); text-align: right; }
.op-portal__actions { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.op-portal__btn { align-items: center; background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: 7px; color: var(--tg-navy); display: flex; font: 650 12px/1 var(--op-font); gap: 6px; justify-content: center; min-height: 30px; padding: 0 10px; white-space: nowrap; }
.op-portal__btn--primary { background: var(--tg-navy); border-color: var(--tg-navy); color: var(--tg-white); }
.op-portal__card { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: 10px; color: var(--tg-muted); display: flex; flex-direction: column; font: 400 11.5px/1.4 var(--op-font); gap: 8px; padding: 10px 14px; }
.op-portal__buttons { display: flex; gap: 8px; }
/* Desktop portal: sidebar navigation, actions in the first column. */
@media (min-width: 600px) {
  .op-portal { flex-direction: row; }
  .op-portal__side { display: flex; }
  .op-portal__top { display: none; }
  .op-portal__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-portal__actions > * { grid-column: 1; }
}

/* ---------- Cards ---------- */
.op-card { background: var(--tg-white); border: 1px solid var(--tg-line); border-radius: var(--op-radius-lg); box-shadow: var(--op-shadow-card); }
.op-card--navy { background: var(--tg-navy); border-color: var(--tg-navy); box-shadow: 0 24px 60px rgba(11, 31, 56, .16); color: var(--tg-white); }
.op-card--glass { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--op-radius); }

/* ---------- Models ---------- */
/* One column until the three cards fit side by side; there each card borrows
   the rows of the grid, so titles, prices, lists and buttons line up across
   the three models whatever the length of their texts. */
.op-models { display: grid; gap: 24px; }
.op-model { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 3vw, 36px); }
.op-model--navy { box-shadow: 0 24px 60px rgba(11, 31, 56, .18); }
.op-model__pill { align-items: center; color: var(--tg-muted); display: flex; font: 600 13px/1 var(--op-font); gap: 10px; }
.op-model--navy .op-model__pill { color: var(--op-on-navy-muted); }
.op-model--navy .op-h3 { color: var(--tg-white); }
.op-model__intro { color: var(--tg-muted); font: 400 15.5px/1.55 var(--op-font); margin-top: 10px; }
.op-model--navy .op-model__intro { color: var(--op-on-navy); }
.op-model__price { border-block: 1px solid var(--op-divider); display: flex; flex-direction: column; gap: 6px; padding: 18px 0; }
.op-model--navy .op-model__price { border-color: rgba(255, 255, 255, .12); }
.op-model__from { color: var(--tg-muted); font: 600 12.5px/1 var(--op-font); }
.op-model--navy .op-model__from { color: var(--op-on-navy-muted); }
.op-model__amount { align-items: baseline; color: var(--tg-muted); display: flex; flex-wrap: wrap; font: 600 14px/1.2 var(--op-font); gap: 8px; }
.op-model__amount strong { color: var(--tg-navy); font: 800 44px/1 var(--op-font); letter-spacing: -.02em; }
.op-model--navy .op-model__amount, .op-model--navy .op-model__extra { color: var(--op-on-navy); }
.op-model--navy .op-model__amount strong { color: var(--tg-white); }
.op-model__extra { color: var(--tg-navy); font: 600 13.5px/1.4 var(--op-font); }
.op-checks { display: flex; flex-direction: column; gap: 12px; }
.op-checks li { align-items: flex-start; color: var(--tg-navy); display: flex; font: 500 15px/1.45 var(--op-font); gap: 10px; }
.op-checks .op-icon { color: var(--tg-orange-ink); flex: 0 0 auto; margin-top: 1px; }
.op-model--navy .op-checks li { color: var(--tg-white); }
.op-model--navy .op-checks .op-icon { color: var(--tg-orange); }
.op-model__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: auto; }
@media (min-width: 1040px) {
  .op-models { gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-model { display: grid; grid-row: span 5; grid-template-rows: subgrid; padding: 30px 26px; row-gap: 22px; }
  .op-model .op-h3 { font-size: clamp(22px, 1.75vw, 25px); }
  .op-model__amount strong { font-size: 40px; }
  .op-model__actions { align-self: start; margin-top: 0; }
  .op-model__actions .op-btn { min-width: 0; padding-inline: 12px; width: 100%; }
}

.op-matrix { margin-top: 24px; overflow: hidden; }
.op-matrix__scroll { overflow-x: auto; }
.op-matrix table { font-family: var(--op-font); }
.op-matrix thead th {
  background: var(--tg-surface);
  border-bottom: 1px solid var(--tg-line);
  color: var(--tg-navy);
  font: 800 12px/1.2 var(--op-font);
  letter-spacing: .08em;
  padding: 14px 20px;
  text-align: center;
  text-transform: uppercase;
}
.op-matrix thead th:first-child { font-size: 15px; letter-spacing: 0; text-align: left; text-transform: none; }
.op-matrix thead .op-matrix__ab { color: var(--tg-orange-ink); }
.op-matrix tbody th, .op-matrix tbody td { border-top: 1px solid var(--op-divider); padding: 13px 20px; }
.op-matrix tbody tr:first-child th, .op-matrix tbody tr:first-child td { border-top: 0; }
.op-matrix tbody th { color: var(--tg-navy); font: 600 14px/1.4 var(--op-font); text-align: left; width: 40%; }
.op-matrix tbody td { text-align: center; }
.op-matrix__check { align-items: center; background: var(--op-ok-bg); border: 1px solid var(--op-ok-bd); border-radius: 50%; color: var(--op-ok-fg); display: inline-flex; height: 24px; justify-content: center; width: 24px; }
.op-matrix__you { color: var(--tg-muted); font: 600 13px/1.3 var(--op-font); }
.op-matrix__us { align-items: center; color: var(--tg-navy); display: inline-flex; font: 700 13px/1.3 var(--op-font); gap: 7px; text-align: left; }
.op-matrix__us::before { background: var(--tg-orange); border-radius: 50%; content: ""; flex: 0 0 6px; height: 6px; width: 6px; }

/* Four columns do not fit a phone: the three models scroll sideways while the
   question column stays in place. */
@media (max-width: 699px) {
  .op-matrix table { min-width: 540px; }
  .op-matrix thead th, .op-matrix tbody th, .op-matrix tbody td { padding: 12px 10px; }
  .op-matrix thead th { font-size: 10.5px; letter-spacing: .04em; }
  .op-matrix thead th:first-child { font-size: 13px; }
  .op-matrix tbody th { font-size: 12.5px; width: 138px; }
  .op-matrix thead th:first-child, .op-matrix tbody th { box-shadow: 1px 0 0 var(--op-divider); left: 0; position: sticky; }
  .op-matrix tbody th { background: var(--tg-white); }
  .op-matrix__us { font-size: 12px; }
}

/* ---------- Split sections (TECH, ABANDERADO, operators, demo) ---------- */
.op-split { align-items: center; display: grid; gap: clamp(40px, 5vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.op-split__copy { display: flex; flex-direction: column; gap: 22px; }
.op-feature-grid { --op-min: 220px; --op-gap: 12px; margin-top: 6px; }
.op-feature { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.op-feature__num { color: var(--tg-orange); font: 800 12px/1 var(--op-font); }
.op-feature__title { color: var(--tg-white); font: 700 16px/1.3 var(--op-font); }
.op-feature p { color: var(--op-on-navy-muted); font: 400 14px/1.55 var(--op-font); }
.op-feature--apart { border-style: dashed; border-color: rgba(255, 255, 255, .26); }
.op-feature--light { border-radius: var(--op-radius); box-shadow: none; }
.op-feature--light .op-feature__num { color: var(--tg-orange-ink); }
.op-feature--light .op-feature__title { color: var(--tg-navy); }
.op-feature--light p { color: var(--tg-muted); }

/* ABANDERADO */
/* The quote card hangs 28px below the photo; keep that room when the grid stacks. */
.op-facade { margin-bottom: 28px; position: relative; }
.op-facade img { aspect-ratio: 4 / 3.4; border-radius: var(--op-radius-xl); height: auto; object-fit: cover; width: 100%; }
.op-facade__quote {
  background: var(--tg-navy);
  border-radius: var(--op-radius-lg);
  bottom: -28px;
  box-shadow: var(--op-shadow-float);
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: 20px;
  max-width: min(88%, 380px);
  padding: 20px 22px;
  position: absolute;
}
.op-facade__quote strong { color: var(--tg-white); font: 800 18px/1.3 var(--op-font); }
.op-facade__quote span { color: var(--op-on-navy-muted); font: 500 12.5px/1.5 var(--op-font); }

.op-range { accent-color: var(--tg-orange); cursor: pointer; margin: 0; min-height: 28px; width: 100%; }
.op-range:disabled { cursor: default; opacity: .75; }

/* Operators */
.op-mottos { --op-min: 220px; --op-gap: 12px; margin-top: 8px; }
.op-motto { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--op-radius); display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.op-motto--accent { background: rgba(229, 149, 54, .08); border-color: rgba(229, 149, 54, .45); }
.op-motto__kicker { color: var(--op-on-navy-muted); font: 700 11px/1 var(--op-font); letter-spacing: .12em; text-transform: uppercase; }
.op-motto--accent .op-motto__kicker { color: var(--tg-orange); }
.op-motto strong { color: var(--tg-white); font: 800 17px/1.3 var(--op-font); }
.op-operators__photo img { aspect-ratio: 4 / 4.2; border-radius: var(--op-radius-xl); height: auto; object-fit: cover; width: 100%; }

/* ---------- Pricing ---------- */
/* Top to bottom: the calculator, the three plans side by side to compare, and
   the commission note. */
.op-calc { display: grid; gap: 24px; }
.op-calc__inputs { display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 3vw, 36px); }
.op-calc__title { color: var(--tg-navy); font: 800 clamp(20px, 2vw, 24px)/1.2 var(--op-font); }
.op-calc__fields { display: grid; gap: 24px; }
.op-calc__fields .op-calc__label { font-size: 15px; font-weight: 700; }
@media (min-width: 760px) {
  .op-calc__fields { align-items: center; gap: 0; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .op-calc__fields > :first-child { padding-right: clamp(24px, 4vw, 48px); }
  .op-calc__fields > :last-child { border-left: 1px solid var(--tg-line); padding-left: clamp(24px, 4vw, 48px); }
}
.op-calc__field { display: flex; flex-direction: column; gap: 10px; }
.op-calc__field--row { align-items: center; flex-direction: row; justify-content: space-between; gap: 16px; }
.op-calc__field--row > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.op-calc__label { color: var(--tg-ink); display: block; font: 650 13px/1.3 var(--op-font); }
.op-calc__label--value { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
/* Exact figure: a typed value beats the slider's steps. */
.op-calc__number {
  -moz-appearance: textfield;
  appearance: textfield;
  background: var(--tg-white);
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--tg-navy);
  font: 800 20px/1 var(--op-font);
  min-height: 40px;
  padding: 0 10px;
  text-align: right;
  width: 4.6em;
}
.op-calc__number::-webkit-inner-spin-button, .op-calc__number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.op-calc__number:hover:not(:disabled) { border-color: var(--tg-navy); }
.op-calc__number:focus-visible { border-color: var(--tg-navy); outline: 2px solid var(--op-navy-soft); outline-offset: 1px; }
.op-calc__number:disabled { background: transparent; border-color: transparent; opacity: 1; }
.op-calc__help { color: var(--tg-muted); font: 500 12.5px/1.45 var(--op-font); }
.op-stepper { align-items: center; border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-sm); display: inline-flex; overflow: hidden; }
.op-stepper button {
  align-items: center;
  background: var(--tg-white);
  border: 0;
  border-radius: 0;
  color: var(--tg-navy);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}
.op-stepper button:hover:not(:disabled) { background: var(--tg-surface); }
.op-page .op-stepper button:focus-visible { outline-offset: -3px; }
.op-stepper button:disabled { color: var(--op-line-strong); cursor: default; }
.op-stepper output { border-inline: 1px solid var(--op-line-strong); color: var(--tg-navy); font: 800 16px/44px var(--op-font); min-width: 48px; text-align: center; }
.op-calc__reset {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--tg-navy);
  font: 700 13px/1.45 var(--op-font);
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.op-calc__reset:hover:not(:disabled) { background: none; color: var(--tg-orange-ink); }
.op-calc__reset:disabled { display: none; }
.op-calc__nojs { color: var(--tg-muted); font: 500 12.5px/1.5 var(--op-font); }

.op-calc__results { display: grid; gap: 24px; }
@media (min-width: 980px) {
  .op-calc__results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.op-result { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 30px); transition: box-shadow 200ms ease; }
.op-result.is-preselected-tech { box-shadow: 0 0 0 2px var(--tg-navy), 0 18px 40px rgba(11, 31, 56, .12); }
.op-result.is-preselected-abanderado { box-shadow: 0 0 0 2px var(--tg-orange), 0 18px 40px rgba(11, 31, 56, .12); }
.op-result__head { align-items: center; color: var(--tg-muted); display: flex; font: 600 12.5px/1.2 var(--op-font); gap: 8px; min-height: 40px; }
.op-result__icon { color: var(--tg-navy); flex: 0 0 auto; margin-left: auto; }
.op-icon__accent { stroke: var(--tg-orange); }
.op-result__total { align-items: baseline; color: var(--tg-muted); display: flex; font: 600 14px/1 var(--op-font); gap: 6px; margin-top: 6px; }
.op-result__total strong { color: var(--tg-navy); font: 800 clamp(34px, 3.2vw, 42px)/1 var(--op-font); letter-spacing: -.02em; }
.op-result__sub { color: var(--tg-navy); font: 600 13px/1.3 var(--op-font); }
.op-result__lines { border-top: 1px solid var(--op-divider); margin-top: 6px; }
.op-result__lines > div { align-items: baseline; border-bottom: 1px solid var(--op-divider); display: flex; gap: 12px; justify-content: space-between; padding: 9px 0; }
.op-result__lines dt { color: var(--tg-muted); font: 500 12.5px/1.4 var(--op-font); }
.op-result__lines dd { color: var(--tg-navy); font: 700 13px/1.4 var(--op-font); white-space: nowrap; }
.op-result__discount dt, .op-result__discount dd { color: var(--op-ok-fg); }
.op-result__commission { background: var(--op-selected-bg); border-radius: var(--op-radius-sm); color: var(--tg-muted); font: 500 12.5px/1.45 var(--op-font); margin-top: 4px; padding: 10px 12px; }
.op-result__commission strong { color: var(--tg-navy); display: block; font: 800 13.5px/1.35 var(--op-font); margin-bottom: 2px; }
.op-result__foot { color: var(--tg-muted); font: 500 12px/1.4 var(--op-font); margin-top: auto; padding-top: 10px; }

.op-switch-row { align-items: center; color: var(--tg-navy); display: flex; font: 700 13px/1.35 var(--op-font); gap: 12px; margin-top: 6px; }
.op-switch-row small { color: var(--tg-muted); display: block; font-weight: 500; }
.op-switch {
  background: var(--op-line-strong);
  border: 0;
  border-radius: var(--op-radius-pill);
  flex: 0 0 38px;
  height: 22px;
  padding: 0;
  position: relative;
  transition: background-color 160ms ease;
  width: 38px;
}
.op-switch span { background: var(--tg-white); border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); height: 18px; left: 2px; position: absolute; top: 2px; transition: transform 160ms ease; width: 18px; }
.op-switch[aria-checked="true"] { background: var(--op-ok-fg); }
.op-switch[aria-checked="true"] span { transform: translateX(16px); }
.op-switch:hover { background: var(--op-line-strong); }
.op-switch[aria-checked="true"]:hover { background: var(--op-ok-fg); }
.op-switch:disabled { cursor: default; opacity: .6; }
/* the switch is 22px tall; a transparent halo keeps a 44px target */
.op-switch::after { content: ""; inset: -11px -3px; position: absolute; }

.op-aligned { display: grid; gap: 16px; padding: clamp(26px, 3.4vw, 40px) clamp(24px, 4vw, 48px); }
.op-aligned__head { display: flex; flex-direction: column; gap: 10px; }
.op-aligned__kicker { color: var(--tg-orange); font: 700 11.5px/1.3 var(--op-font); letter-spacing: .14em; text-transform: uppercase; }
.op-aligned__title { color: var(--tg-white); font: 800 clamp(21px, 2.6vw, 30px)/1.15 var(--op-font); letter-spacing: -.015em; text-wrap: balance; }
.op-aligned__body { color: var(--op-on-navy); font: 400 clamp(14.5px, 1.2vw, 16px)/1.6 var(--op-font); }
@media (min-width: 760px) {
  .op-aligned { align-items: center; gap: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .op-aligned__head { padding-right: clamp(24px, 4vw, 56px); }
  .op-aligned__body { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: clamp(24px, 4vw, 56px); }
}

.op-tiers { margin-top: 24px; overflow: hidden; }
.op-tiers__head { align-items: baseline; border-bottom: 1px solid var(--tg-line); display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding: 16px 20px; }
.op-tiers__title { color: var(--tg-navy); font: 800 15px/1.2 var(--op-font); }
.op-tiers__hint { color: var(--tg-muted); font: 500 12px/1.2 var(--op-font); }
.op-tiers__scroll { overflow-x: auto; }
.op-tiers table { min-width: 520px; }
.op-tiers thead th { background: var(--tg-surface); color: var(--tg-muted); font: 700 10.5px/1.3 var(--op-font); letter-spacing: .08em; padding: 12px 20px; text-align: left; text-transform: uppercase; }
.op-tiers tbody th, .op-tiers tbody td { border-top: 1px solid var(--op-divider); color: var(--tg-navy); font: 600 14px/1.3 var(--op-font); padding: 13px 20px; text-align: left; }
.op-tiers tbody th { font-weight: 800; }
.op-row--current th, .op-row--current td { background: var(--op-selected-bg); }
.op-row--current th { box-shadow: inset 4px 0 0 var(--tg-orange); }

.op-legal { color: var(--tg-muted); font: 500 12.5px/1.6 var(--op-font); margin-top: 20px; max-width: 900px; }

/* ---------- FAQ ---------- */
.op-faq__list { border-top: 1px solid var(--tg-line); margin-inline: auto; max-width: 860px; }
.op-faq__item { border-bottom: 1px solid var(--tg-line); }
.op-faq__item summary {
  align-items: center;
  color: var(--tg-navy);
  cursor: pointer;
  display: flex;
  font: 700 17px/1.4 var(--op-font);
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  padding: 22px 0;
}
.op-faq__item summary::-webkit-details-marker { display: none; }
.op-faq__item summary:hover { color: var(--tg-orange-ink); }
.op-faq__toggle {
  align-items: center;
  border: 1px solid var(--tg-line);
  border-radius: 50%;
  color: var(--tg-orange-ink);
  display: inline-flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
  transition: transform 200ms ease;
  width: 32px;
}
.op-faq__item[open] .op-faq__toggle { transform: rotate(45deg); }
.op-faq__item p { color: var(--tg-muted); font: 400 15.5px/1.65 var(--op-font); max-width: 620px; padding: 0 48px 24px 0; }

/* ---------- Demo ---------- */
.op-split--demo { align-items: start; }
.op-next { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; }
.op-next__title { color: var(--op-on-navy-muted); font: 700 11.5px/1 var(--op-font); letter-spacing: .12em; margin-bottom: 8px; text-transform: uppercase; }
.op-next li { border-bottom: 1px solid rgba(255, 255, 255, .1); display: flex; gap: 16px; padding: 14px 0; }
.op-next li div { display: flex; flex-direction: column; gap: 3px; }
.op-next strong { color: var(--tg-white); font: 700 15.5px/1.35 var(--op-font); }
.op-next li span:not(.op-next__num) { color: var(--op-on-navy-muted); font: 400 14px/1.5 var(--op-font); }
.op-next__num {
  align-items: center;
  border: 1.5px solid var(--tg-orange);
  border-radius: 50%;
  color: var(--tg-orange);
  display: inline-flex;
  flex: 0 0 32px;
  font: 800 13px/1 var(--op-font);
  height: 32px;
  justify-content: center;
  width: 32px;
}
.op-next__num.is-first { background: var(--tg-orange); color: var(--op-accent-ink); }
.op-contact { display: flex; flex-direction: column; gap: 12px; }
.op-contact__row { align-items: center; display: flex; gap: 14px; }
.op-contact__icon {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: var(--tg-orange);
  display: inline-flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.op-contact a { color: var(--tg-white); font: 700 16px/1.3 var(--op-font); }
.op-contact a:hover { color: var(--tg-orange); }
.op-contact__phones { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.op-contact__phones a { display: inline-flex; min-height: 44px; align-items: center; }

.op-form-card {
  background: var(--tg-white);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(4, 12, 26, .4);
  color: var(--tg-ink);
  padding: clamp(22px, 3vw, 32px);
}
.op-form { display: flex; flex-direction: column; gap: 18px; }
.op-form__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.op-field { display: flex; flex-direction: column; gap: 6px; }
.op-field__label { color: var(--tg-ink); display: block; font: 650 12.5px/1.3 var(--op-font); margin: 0; }
.op-field__label span { color: var(--op-danger-fg); }
.op-page .op-input {
  background: var(--tg-white);
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--tg-ink);
  font: 500 15px/1 var(--op-font);
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  width: 100%;
}
.op-page .op-input:focus { border-color: var(--op-navy-soft); box-shadow: 0 0 0 3px rgba(28, 61, 104, .15); outline: none; }
.op-page .op-input[aria-invalid="true"] { border-color: var(--op-danger-fg); }
.op-field__error { color: var(--op-danger-fg); font: 600 12px/1.3 var(--op-font); min-height: 0; }
.op-field__error:empty { display: none; }
.op-choice { border: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; min-width: 0; padding: 0; }
.op-choice legend { margin-bottom: 8px; padding: 0; width: 100%; }
.op-choice label { cursor: pointer; display: inline-flex; margin: 0; position: relative; }
.op-choice input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.op-choice label span {
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--tg-navy);
  font: 700 13px/1 var(--op-font);
  min-height: 44px;
  padding: 15px 14px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.op-choice label:hover span { border-color: var(--tg-navy); }
.op-choice input:checked + span { background: var(--tg-navy); border-color: var(--tg-navy); color: var(--tg-white); }
.op-choice input:focus-visible + span { outline: 2px solid var(--op-navy-soft); outline-offset: 2px; }
.op-form__note { color: var(--tg-muted); font: 500 12px/1.45 var(--op-font); text-align: center; }

.op-send, .op-direct { display: flex; flex-direction: column; gap: 14px; }
.op-send:focus { outline: none; }
.op-send__title, .op-direct__title { color: var(--tg-navy); font: 800 22px/1.2 var(--op-font); }
.op-send p, .op-direct p { color: var(--tg-muted); font: 400 15px/1.55 var(--op-font); }
.op-send__actions { display: flex; flex-direction: column; gap: 10px; }
.op-send__edit {
  align-self: center;
  background: none;
  border: 0;
  color: var(--tg-navy);
  font: 700 13px/1 var(--op-font);
  min-height: 44px;
  padding: 0 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.op-send__edit:hover { background: none; color: var(--tg-orange-ink); }

/* ---------- Motion ---------- */
/* Both loops animate only transform and opacity, which the compositor handles. */
@keyframes op-pulse {
  0% { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3); }
}

@media (prefers-reduced-motion: reduce) {
  .op-page *, .op-page *::before, .op-page *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}