/* Biomech Time — estilos del sitio
   Tokens del Design System "Biomech Time" (tema oscuro). */

:root {
  --ground: #0c1013;
  --surface: #151b1f;
  --raised: #1a2228;
  --hairline: #2a3640;
  --ink: #fbfbfb;
  --muted: #9aa6ad;
  --lime: #94c33f;
  --on-lime: #0c1013;
  --teal: #2da0c2;
  --teal-light: #3fb5c5;
  --focus: #94c33f;

  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --space-20: 80px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --font: "Poppins", system-ui, sans-serif;
  --header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
a { color: var(--teal-light); }
input, textarea, select, button { font: inherit; }
input, textarea, select { font-size: 16px; }
a, button, [role="button"], summary { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--lime); color: var(--on-lime); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section--alt { background: var(--surface); }
.section--rule { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 32px 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 40px; }
.measure { max-width: 720px; }
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.split--center { align-items: center; }
.split--hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.split--pl { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.card.device { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }

/* ---------- Type ---------- */
.h1 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.h1--page { font-size: clamp(38px, 4.6vw, 56px); line-height: 1.1; }
.h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.h4 { font-size: 18px; line-height: 1.35; font-weight: 600; }
.lead { color: var(--muted); font-size: 18px; max-width: 600px; }
.body-lg { color: var(--muted); font-size: 17px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 13px; line-height: 1.5; }
.lime { color: var(--lime); }
.kicker { color: var(--lime); font-weight: 600; font-size: 15px; }
.mark {
  background: var(--lime); color: var(--on-lime);
  border-radius: var(--radius-sm); padding: 0 8px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.list { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.tbd { color: var(--muted); font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--lime); color: var(--on-lime); }
.btn--ghost { border-color: var(--hairline); color: var(--ink); font-weight: 600; background: transparent; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-more { color: var(--lime); font-weight: 600; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #a3d14c; }
  .btn--ghost:hover { border-color: var(--teal-light); }
  .link-more:hover { text-decoration: underline; text-underline-offset: 4px; }
  .card--link:hover { border-color: var(--teal-light); }
  .nav a:hover { color: var(--lime); }
  .rows-link a:hover strong, .pubs a:hover strong { color: var(--teal-light); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 16, 19, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { color: var(--teal-light); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; display: inline-flex; align-items: center; }
.brand img { height: 44px; width: auto; }
.nav { display: flex; gap: 28px; align-items: center; font-size: 15px; font-weight: 500; }
.nav a { color: var(--ink); text-decoration: none; transition: color 160ms ease; }
.nav a[aria-current="page"] { color: var(--lime); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn {
  display: none; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); align-items: center; justify-content: center; cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.menu-btn:active { transform: scale(0.95); }
.menu-btn .bar-top, .menu-btn .bar-bot { transition: transform 200ms var(--ease-out); transform-origin: center; transform-box: fill-box; }
.site-header.is-open .menu-btn .bar-top { transform: translateY(3.5px) rotate(45deg); }
.site-header.is-open .menu-btn .bar-bot { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Cards & panels ---------- */
.card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: var(--radius-md);
  background: var(--raised); border: 1px solid var(--hairline);
  color: var(--ink); text-decoration: none;
}
.card--surface { background: var(--surface); }
.card--accent { border-color: var(--lime); }
.card--link { transition: border-color 160ms ease; }
.card--lg { padding: 36px; gap: 20px; }
.card .link-more { margin-top: auto; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.panel { background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); font-weight: 600; font-size: 15px; }
.badge { flex: none; font-size: 12px; font-weight: 600; color: var(--on-lime); background: var(--teal-light); border-radius: var(--radius-sm); padding: 2px 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 4px 12px; border-radius: var(--radius-sm); background: var(--raised); border: 1px solid var(--hairline); font-size: 13px; font-weight: 600; }
.photo { width: 100%; height: auto; border-radius: var(--radius-md); object-fit: cover; background: var(--raised); }
.monogram { aspect-ratio: 1 / 1; border-radius: var(--radius-md); background: var(--raised); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--teal-light); font-weight: 700; font-size: 40px; letter-spacing: 0.02em; }
.skel { display: block; height: 10px; border-radius: 4px; background: #dfe5e8; margin-top: 8px; }
.pl-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; }
.pl-brand img { width: 40px; height: 40px; }
.price-note { font-size: 13px; color: var(--muted); }
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px;
  background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  color: var(--muted); font-size: 14px;
}
.top-rule { padding-top: 24px; border-top: 2px solid var(--teal-light); display: flex; flex-direction: column; gap: 10px; }
.top-rule--muted { border-top-color: var(--hairline); }
.icon { flex: none; color: var(--teal-light); }

/* ---------- Rows (lists with hairlines) ---------- */
.rows { list-style: none; padding: 0; display: flex; flex-direction: column; }
.rows > li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.rows > li:last-child { border-bottom: 1px solid var(--hairline); }
.rows .row-meta { color: var(--muted); font-size: 14px; text-align: right; }
.rows-link { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 32px; }
.rows-link li { border-top: 1px solid var(--hairline); }
.rows-link a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; color: var(--ink); text-decoration: none; }
.rows-link strong { display: block; font-weight: 600; transition: color 160ms ease; }
.rows-link .go { color: var(--lime); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ---------- Home ---------- */
.hero { padding: 80px 0 72px; }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.trust-names { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; font-weight: 600; }
.trust-names span { display: inline-flex; align-items: center; gap: 10px; }
img.inst-logo { height: 32px; width: auto; max-width: none; flex: none; }
img.inst-logo--lg { height: 56px; margin-bottom: 12px; display: block; align-self: flex-start; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--hairline); }
.steps li { padding: 24px 24px 0 0; display: flex; flex-direction: column; gap: 8px; }
.steps .num { color: var(--lime); font-weight: 700; font-size: 15px; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-num { font-size: 44px; font-weight: 800; line-height: 1.1; }
.team-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: center; padding-bottom: 40px; border-bottom: 1px solid var(--hairline); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; }
.person { display: flex; flex-direction: column; gap: 8px; }
.pubs { list-style: none; padding: 0; display: flex; flex-direction: column; }
.pubs li { border-top: 1px solid var(--hairline); }
.pubs li:last-child { border-bottom: 1px solid var(--hairline); }
.pubs a, .pubs .pub { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 24px; padding: 24px 0; color: var(--ink); text-decoration: none; }
.pubs .year { color: var(--teal-light); font-weight: 700; font-size: 18px; }
.pubs strong { display: block; font-weight: 600; font-size: 18px; line-height: 1.4; transition: color 160ms ease; }
.quote { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--radius-md); background: var(--raised); }
.quote footer { color: var(--muted); font-size: 14px; }
.cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 40px; border-radius: var(--radius-md); background: var(--raised); border: 1px solid var(--hairline); }
.place { padding: 20px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.map { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius-md); filter: grayscale(0.4) invert(0.9) hue-rotate(180deg); }

/* ---------- Charts ---------- */
.chart text { font-family: var(--font); }
.curve { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw-curve 1800ms var(--ease-in-out) 300ms forwards; }
@keyframes draw-curve { to { stroke-dashoffset: 0; } }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pop { transform-box: fill-box; transform-origin: center; }
.bar-fill { transform-origin: left center; }
.js .reveal .draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms var(--ease-in-out) 250ms; }
.js .reveal.in .draw { stroke-dashoffset: 0; }
.js .reveal .pop { opacity: 0; transform: scale(0.6); transition: opacity 300ms ease-out 1100ms, transform 400ms var(--ease-out) 1100ms; }
.js .reveal.in .pop { opacity: 1; transform: none; }
.js .reveal .bar-fill { transform: scaleX(0.05); transition: transform 1100ms var(--ease-out) 200ms; }
.js .reveal.in .bar-fill { transform: none; }
.js .reveal .tile { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease-out, transform 500ms var(--ease-out); }
.js .reveal.in .tile { opacity: 1; transform: none; }
.js .reveal.in .tile:nth-child(2) { transition-delay: 80ms; } .js .reveal.in .tile:nth-child(3) { transition-delay: 160ms; } .js .reveal.in .tile:nth-child(4) { transition-delay: 240ms; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes grow-x { from { transform: scaleX(0.08); } to { transform: scaleX(1); } }

/* ---------- Evaluaciones ---------- */
.subnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; overscroll-behavior-x: contain; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px;
  transition: border-color 160ms ease, transform 160ms var(--ease-out);
}
.subnav a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { border-color: var(--teal-light); } }
.checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: center; }
.checks .off { color: var(--muted); }
.calc { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 600; font-size: 15px; }
.field input {
  min-height: 48px; padding: 0 14px; border-radius: var(--radius-md);
  border: 1px solid var(--hairline); background: var(--ground); color: var(--ink);
}
.calc-out { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); transition: opacity 200ms ease-out, transform 200ms var(--ease-out); }
@starting-style { .calc-out { opacity: 0; transform: translateY(6px); } }
.calc-out[hidden] { display: none; }
.calc-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.calc-row span { color: var(--muted); font-size: 15px; }
.calc-row strong { text-align: right; font-weight: 600; }
.calc-note { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--ground); border: 1px solid var(--teal-light); font-size: 14px; }
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; }
.bar-pair { display: flex; flex-direction: column; gap: 4px; }
.bar-fill { height: 10px; border-radius: 3px; }
.bar-l { background: var(--teal-light); }
.bar-r { background: var(--ink); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 16px; border-radius: var(--radius-md); background: var(--ground); }
.tile--accent { border: 1px solid var(--lime); }
.tile-num { font-size: 30px; font-weight: 700; line-height: 1.2; }
.tile-num small { font-size: 16px; color: var(--muted); font-weight: 500; }
.tile-label { margin-top: 4px; color: var(--muted); font-size: 13px; }
.report { padding: 28px; border-radius: var(--radius-md); background: #fbfbfb; color: var(--ground); display: flex; flex-direction: column; gap: 16px; }
.report .r-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #dfe5e8; }
.report .r-brand { font-weight: 700; color: #14728b; }
.report .r-label { font-size: 13px; color: #4a555c; }
.faq { border-top: 1px solid var(--hairline); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { transition: transform 200ms var(--ease-out); color: var(--muted); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); }

/* ---------- PulseLoad ---------- */
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--radius-pill); background: var(--raised); border: 1px solid var(--hairline); align-self: flex-start; }
.seg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--radius-pill); background: var(--lime); transition: transform 240ms var(--ease-out); }
.seg[data-active="pac"] .seg-ind { transform: translateX(100%); }
.seg button {
  position: relative; z-index: 1; min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer;
  transition: color 240ms ease; user-select: none; -webkit-user-select: none;
}
.seg button[aria-pressed="true"] { color: var(--on-lime); }
.swap { transition: opacity 220ms ease-out, transform 220ms var(--ease-out); }
@starting-style { .swap { opacity: 0; transform: translateY(8px); } }
[data-aud-panel][hidden] { display: none !important; }
.phone { margin: 0 auto; max-width: 360px; border-radius: 28px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.todo { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--ground); font-size: 14px; }
.todo .dot { flex: none; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.todo .dot--done { background: var(--lime); }
.todo .dot--open { border: 2px solid var(--hairline); }
.rpe { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.rpe span { height: 28px; border-radius: 4px; background: var(--hairline); }
.rpe .on { background: var(--lime); color: var(--on-lime); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.feature { display: flex; flex-direction: column; gap: 10px; }
.price { margin-top: 8px; font-size: 32px; font-weight: 700; line-height: 1.1; }
.price small { font-size: 15px; color: var(--muted); font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding: 48px 0 56px; color: var(--muted); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid h2 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { color: var(--muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-grid a:hover { color: var(--ink); } }
.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header .nav-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ground); border-bottom: 1px solid var(--hairline);
    padding: 8px 24px 24px;
    display: flex; flex-direction: column;
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .site-header.is-open .nav-panel {
    opacity: 1; transform: none; pointer-events: auto; visibility: visible;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
  }
  .nav-panel a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; }
  .nav-panel a[aria-current="page"] { color: var(--lime); }
}
@media (min-width: 1081px) { .nav-panel { display: none; } }
@media (max-width: 960px) {
  .split, .split--hero, .split--pl, .cols-2, .team-lead, .card.device { grid-template-columns: minmax(0, 1fr); }
  .cols-3, .cols-4, .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .steps--4 { grid-template-columns: minmax(0, 1fr); }
  .card.device { gap: 12px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-lead .photo { max-width: 100% !important; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 56px; }
  .cols-3, .cols-4, .features, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .card, .card--lg { padding: 24px; }
  .cta-band { padding: 28px 24px; }
  .header-actions .btn { padding: 0 16px; }
  .rows-link { grid-template-columns: minmax(0, 1fr); }
  .pubs a, .pubs .pub { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .seg button { padding: 0 14px; font-size: 14px; }
  .chart text { font-size: 22px; }
  .chart .phase-labels { display: none; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .curve, .draw { animation: none; stroke-dashoffset: 0; }
  .js .reveal .pop, .js .reveal .bar-fill, .js .reveal .tile { transition: none; opacity: 1; transform: none; }
  .js .reveal .draw { transition: none; stroke-dashoffset: 0; }
  .btn, .seg-ind, .swap, .calc-out, .faq .chev, .menu-btn, .menu-btn .bar-top, .menu-btn .bar-bot, .subnav a { transition: none; }
  .site-header .nav-panel { transition: none !important; }
}

/* =====================================================================
   v2 — Movimiento, imágenes y portada (oct 2026)
   ===================================================================== */
:root { --glow-lime: rgba(148, 195, 63, 0.18); --glow-teal: rgba(63, 181, 197, 0.16); }

/* ---------- Header sobre la portada (solo Home) ---------- */
.site-header { transition: background-color 240ms ease, border-color 240ms ease; }
.page-home .site-header { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-home .site-header.is-solid, .page-home .site-header.is-open {
  background: rgba(12, 16, 19, 0.88); border-bottom-color: var(--hairline);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
}

/* ---------- Portada con video ---------- */
.hero-video { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 48px) 0 72px; }
.hero-video__media { position: absolute; inset: 0; z-index: -2; }
.hero-video__media video, .hero-video__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-video::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 85% 20%, var(--glow-teal), transparent 70%),
    linear-gradient(180deg, rgba(12,16,19,0.55) 0%, rgba(12,16,19,0.35) 35%, rgba(12,16,19,0.88) 78%, var(--ground) 100%),
    linear-gradient(90deg, rgba(12,16,19,0.85) 0%, rgba(12,16,19,0.2) 70%); }
.hero-video .wrap { width: 100%; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: var(--radius-pill); background: rgba(21, 27, 31, 0.7); border: 1px solid var(--hairline); font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-eyebrow .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--lime); box-shadow: 0 0 0 0 rgba(148,195,63,0.6); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(148,195,63,0.55); } 70% { box-shadow: 0 0 0 10px rgba(148,195,63,0); } 100% { box-shadow: 0 0 0 0 rgba(148,195,63,0); } }
.display { font-size: clamp(44px, 7.4vw, 104px); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; max-width: 13ch; }
.display .accent { color: var(--lime); }
.hero-video .lead { color: #c9d1d5; font-size: clamp(17px, 1.5vw, 20px); max-width: 560px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 28px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); }
.hero-chips div { display: flex; flex-direction: column; }
.hero-chips strong { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.hero-chips span { color: var(--muted); font-size: 13px; }
.scroll-cue { position: absolute; right: 24px; bottom: 32px; width: 28px; height: 46px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.35); display: flex; justify-content: center; padding-top: 8px; }
.scroll-cue::after { content: ""; width: 4px; height: 8px; border-radius: 4px; background: var(--ink); animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Entrada de la portada (una vez, al cargar) */
.js .hero-in > * { opacity: 0; transform: translateY(20px); animation: hero-in 900ms var(--ease-out) forwards; }
.js .hero-in > *:nth-child(2) { animation-delay: 90ms; }
.js .hero-in > *:nth-child(3) { animation-delay: 180ms; }
.js .hero-in > *:nth-child(4) { animation-delay: 270ms; }
.js .hero-in > *:nth-child(5) { animation-delay: 360ms; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

/* ---------- Banner de página con foto ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: 120px 0 56px; min-height: 460px; display: flex; align-items: flex-end; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.js .page-hero__bg img { animation: settle 1600ms var(--ease-out) forwards; }
@keyframes settle { to { transform: scale(1); } }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,16,19,0.25) 0%, rgba(12,16,19,0.55) 55%, var(--ground) 100%), linear-gradient(90deg, rgba(12,16,19,0.75) 0%, rgba(12,16,19,0.05) 75%); }
.page-hero .wrap { width: 100%; }
.page-hero .lead { color: #c9d1d5; }
.crumb { color: var(--lime); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Revelado al hacer scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-img > img { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms), 0ms; }
.js .reveal-img.in > img { clip-path: inset(0 0 0 0); }

/* ---------- Kicker numerado estilo laboratorio ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow b { color: var(--lime); font-weight: 700; }
.eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--hairline); }

/* ---------- Cinta de logos ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 72px; animation: marquee 32s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: 72px; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 36px)); } }
.logo-item { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; font-weight: 600; font-size: 16px; color: #c9d1d5; }
.logo-item img { height: 44px; width: auto; max-width: none; flex: none; }
.trust-band { padding: 40px 0; border-bottom: 1px solid var(--hairline); }
.trust-band .label { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px; }

/* ---------- Tarjetas con imagen ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--raised); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x10 { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1 / 1; }
.media--tall { aspect-ratio: 4 / 5; }
.media figcaption, .media .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; font-size: 14px; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(12,16,19,0.9)); }
.svc-card { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: var(--raised); border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; transition: border-color 200ms ease, transform 300ms var(--ease-out); }
.svc-card .media { border-radius: 0; aspect-ratio: 16 / 10; }
.svc-card__body { display: flex; flex-direction: column; gap: 12px; padding: 28px; flex: 1; }
.svc-card .num { color: var(--lime); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.svc-card .go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--lime); font-weight: 600; }
.svc-card .go svg { transition: transform 200ms var(--ease-out); }
.card--link, .person, .pubs a { transition: border-color 200ms ease, transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svc-card:hover { border-color: var(--teal-light); transform: translateY(-4px); }
  .svc-card:hover .media img, .media:hover img { transform: scale(1.05); }
  .svc-card:hover .go svg { transform: translateX(4px); }
  .card--link:hover { transform: translateY(-4px); }
}

/* ---------- Mosaico de fotos ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 16px; }
.bento > * { height: 100%; }
.bento .b1 { grid-column: span 7; grid-row: span 4; }
.bento .b2 { grid-column: span 5; grid-row: span 2; }
.bento .b3 { grid-column: span 5; grid-row: span 2; }
.bento .b4 { grid-column: span 4; grid-row: span 3; }
.bento .b5 { grid-column: span 4; grid-row: span 3; }
.bento .b6 { grid-column: span 4; grid-row: span 3; }

/* ---------- Banda grande con foto ---------- */
.feature-band { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; padding: clamp(32px, 6vw, 72px); min-height: 420px; display: flex; align-items: flex-end; }
.feature-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.feature-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,16,19,0.92) 0%, rgba(12,16,19,0.55) 55%, rgba(12,16,19,0.2) 100%); }

/* ---------- Cifras animadas ---------- */
.stats-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-band > div { padding: 40px 32px; border-left: 1px solid var(--hairline); }
.stats-band > div:first-child { border-left: 0; padding-left: 0; }
.stats-band .stat-num { font-size: clamp(48px, 6vw, 80px); letter-spacing: -0.03em; background: linear-gradient(180deg, var(--ink), #b9c4c9); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }

/* ---------- Glow sutil en secciones ---------- */
.glow { position: relative; isolation: isolate; }
.glow::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 10% 0%, var(--glow-lime), transparent 70%), radial-gradient(40% 50% at 100% 100%, var(--glow-teal), transparent 70%); }

/* ---------- Pasos con línea de progreso ---------- */
.steps { position: relative; }
.js .steps::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform 1600ms var(--ease-in-out) 200ms; }
.js .steps.in::after { transform: scaleX(1); }

/* ---------- Instituciones con logo ---------- */
.inst-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.inst-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; border-radius: var(--radius-md); background: var(--raised); border: 1px solid var(--hairline); }
.inst-card img { height: 64px; width: auto; max-width: none; }

@media (max-width: 960px) {
  .bento { grid-auto-rows: 90px; }
  .bento .b1 { grid-column: span 12; grid-row: span 4; }
  .bento .b2, .bento .b3 { grid-column: span 6; grid-row: span 2; }
  .bento .b4, .bento .b5, .bento .b6 { grid-column: span 6; grid-row: span 3; }
  .bento .b6 { grid-column: span 12; }
  .stats-band { grid-template-columns: minmax(0, 1fr); }
  .stats-band > div { border-left: 0; border-top: 1px solid var(--hairline); padding: 28px 0; }
  .stats-band > div:first-child { border-top: 0; }
  .inst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero-video { padding-bottom: 48px; }
  .hero-chips { gap: 20px 28px; }
  .hero-chips strong { font-size: 24px; }
  .scroll-cue { display: none; }
  .page-hero { padding: 96px 0 40px; min-height: 380px; }
  .bento { grid-auto-rows: 70px; gap: 10px; }
  .marquee__track, .marquee__group { gap: 48px; }
  .logo-item img { height: 36px; }
  .inst-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: opacity 200ms ease; }
  .js .reveal-img > img { clip-path: none; transition: none; }
  .js .hero-in > * { animation: none; opacity: 1; transform: none; }
  .js .page-hero__bg img { animation: none; transform: none; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .hero-eyebrow .pulse, .scroll-cue::after { animation: none; }
  .js .steps::after { transition: none; }
  .media img, .svc-card { transition: none; }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .team-grid .h4 { font-size: 16px; }
  .team-lead .photo { max-width: 280px !important; }
}
.card.device.has-media { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); align-items: center; }
.card.device.has-media .media { aspect-ratio: 4 / 3; }
@media (max-width: 960px) { .card.device.has-media { grid-template-columns: minmax(0, 1fr); } .card.device.has-media .media { aspect-ratio: 16 / 10; } }

/* ---------- Tarjetas con foto de fondo ---------- */
.card--photo { position: relative; overflow: hidden; isolation: isolate; min-height: 380px; padding-top: 130px; justify-content: flex-start; }
.card--photo .card-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; filter: blur(1.5px) saturate(0.95); transform: scale(1.08); transition: opacity 400ms ease, transform 700ms var(--ease-out), filter 400ms ease; }
.card--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,27,31,0.15) 0%, rgba(21,27,31,0.7) 38%, rgba(21,27,31,0.94) 62%, rgba(21,27,31,0.98) 100%); }
.card--photo .link-more { margin-top: auto; padding-top: 8px; }
@media (hover: hover) and (pointer: fine) {
  .card--photo:hover .card-bg { opacity: 1; filter: blur(0) saturate(1); transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .card--photo .card-bg { transition: none; } }
@media (max-width: 640px) { .card--photo { min-height: 300px; padding-top: 110px; } }

/* ---------- Calendario de carreras ---------- */
.field select {
  min-height: 48px; padding: 0 40px 0 14px; border-radius: var(--radius-md);
  border: 1px solid var(--hairline); background: var(--ground); color: var(--ink); font-size: 16px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa6ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field select:focus-visible, .field input:focus-visible { border-color: var(--lime); }
.calc-status { display: inline-flex; align-self: flex-start; margin: 16px 0 4px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; background: var(--raised); border: 1px solid var(--hairline); }
.calc-status[data-estado="ventana"] { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.calc-status[data-estado="pronto"] { border-color: var(--teal-light); color: var(--teal-light); }
.calc-status[data-estado="tarde"], .calc-status[data-estado="pasada"] { border-color: #f0a25c; color: #f0a25c; }
.calc-avisos { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.calc-avisos ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.calc-avisos a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--ground); border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color 160ms ease; }
.calc-avisos a span.muted { font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .calc-avisos a:hover { border-color: var(--teal-light); } }

/* =====================================================================
   Página /carrera/ — herramienta de ventana de evaluación
   ===================================================================== */
.carrera-hero { padding-top: 72px; }
.carrera-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.carrera-photos .media { aspect-ratio: 9 / 10; }
.carrera-photos .media:last-child { margin-top: 56px; }
.carrera-skels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.carrera-skels .media { aspect-ratio: 3 / 4; }

.rt { --rt-surface: var(--raised); --rt-bg: var(--ground); --rt-line: var(--hairline);
  --rt-accent: var(--lime); --rt-on-accent: var(--on-lime); --rt-accent-soft: rgba(148, 195, 63, 0.16);
  --rt-warn: #f0a25c; --rt-warn-soft: rgba(240, 162, 92, 0.16); --rt-hot: #ff7a1a;
  display: flex; flex-direction: column; gap: 24px; max-width: 820px; }
.rt .calc { gap: 16px; }
.rt .hint { margin: 0; font-size: 13px; color: var(--muted); }
.rt .field input[type="text"] { min-height: 48px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--ground); color: var(--ink); }
.rt .out { display: grid; gap: 20px; min-width: 0; }
.rt .notice { margin: 0; padding: 16px; border: 1px dashed var(--rt-line); border-radius: var(--radius-md); color: var(--muted); }

.rt .bib { position: relative; background: var(--rt-surface); border: 2px solid var(--ink); border-radius: var(--radius-md); padding: 36px 22px 22px; display: grid; gap: 10px; min-width: 0; }
.rt .bib::before, .rt .bib::after { content: ""; position: absolute; top: 12px; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; }
.rt .bib::before { left: 14px; }
.rt .bib::after { right: 14px; }
.rt .bib__kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rt .bib__race { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.rt .bib__big { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-weight: 800; font-size: clamp(34px, 8vw, 56px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rt .bib__big .sep { color: var(--muted); }
.rt .dt { white-space: nowrap; }
.rt .dt i { font-style: normal; font-size: 0.32em; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); margin-left: 0.35em; vertical-align: 0.15em; }
.rt .pill { margin: 0; justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); }
.rt .pill--pronto { background: var(--rt-accent-soft); color: var(--rt-accent); }
.rt .pill--ventana { background: var(--rt-accent); color: var(--rt-on-accent); }
.rt .pill--tarde { background: var(--rt-warn-soft); color: var(--rt-warn); }
.rt .bib__lead { margin: 0; color: #c9d1d5; }

.rt .cta { background: var(--rt-accent-soft); border: 1px solid rgba(148, 195, 63, 0.4); border-radius: var(--radius-md); padding: 22px; display: grid; gap: 12px; justify-items: start; }
.rt .cta .h3 { font-size: 20px; }
.rt .cta p { margin: 0; }
.rt .ic { width: 20px; height: 20px; margin-right: 8px; flex: none; }
.rt .btn--wa, .rt .btn--solid { background: var(--lime); color: var(--on-lime); }
.rt .out a.btn:not(.btn--wa):not(.btn--solid), .rt .out button.btn:not(.btn--solid) { border-color: var(--hairline); color: var(--ink); background: transparent; min-height: 44px; padding: 0 20px; font-size: 14px; }

.rt .out .card { background: var(--rt-surface); border: 1px solid var(--rt-line); border-radius: var(--radius-md); padding: 22px; display: grid; gap: 14px; min-width: 0; }
.rt .h2s { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rt .tl { display: grid; gap: 6px; }
.rt .tl__wk { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.rt .tl__wk b { font-size: clamp(40px, 9vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rt .tl__plot { position: relative; margin-top: 4px; }
.rt .tl__svg { display: block; width: 100%; height: 180px; overflow: visible; }
.rt .tl__svg * { vector-effect: non-scaling-stroke; }
.rt .tl__svg .a-base { fill: var(--rt-bg); }
.rt .tl__svg .a-late { fill: var(--rt-warn-soft); }
.rt .tl__svg .a-work { fill: var(--rt-accent-soft); }
.rt .tl__svg .a-win { fill: var(--rt-accent); fill-opacity: 0.9; }
.rt .tl__svg .grid { stroke: var(--rt-line); stroke-width: 1; stroke-dasharray: 3 4; }
.rt .tl__svg .axis { stroke: var(--muted); stroke-width: 1; }
.rt .tl__svg .curve { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.rt .tl__svg .race { stroke: var(--ink); stroke-width: 2; }
.rt .dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--rt-surface); transform: translate(-50%, -50%); }
.rt .dot--race { background: var(--rt-hot); }
.rt .tl__tag { position: absolute; right: 12px; top: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.rt .tl__ctrl { position: relative; height: 8px; background: var(--rt-bg); border: 1px solid var(--rt-line); border-radius: 2px; overflow: hidden; }
.rt .seg { position: absolute; top: 0; bottom: 0; display: block; }
.rt .seg--ctrl { background: var(--rt-warn); }
.rt .tl__axis { position: relative; height: 18px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rt .tl__axis span { position: absolute; top: 2px; transform: translateX(-50%); }
.rt .tl__axtitle { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
.rt .tl__ends { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.rt .tl__ends b { display: block; color: var(--ink); font-weight: 600; }
.rt .tl__ends span:last-child { text-align: right; }
.rt .legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--ink); }
.rt .legend li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; min-width: 0; }
.rt .legend b { display: block; font-weight: 600; }
.rt .legend span { color: var(--muted); }
.rt .sw { width: 14px; height: 14px; border-radius: 3px; margin-top: 4px; border: 1px solid var(--rt-line); }
.rt .sw--win { background: var(--rt-accent); border-color: var(--rt-accent); }
.rt .sw--work { background: var(--rt-accent-soft); border-color: var(--rt-accent); }
.rt .sw--ctrl { background: var(--rt-warn); border-color: var(--rt-warn); }
.rt .sw--late { background: var(--rt-warn-soft); border-color: var(--rt-warn); }
.rt .alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rt .alerts li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 14px; border-top: 1px solid var(--rt-line); }
.rt .alerts li:first-child { padding-top: 0; border-top: 0; }
.rt .tile { display: grid; justify-items: center; border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 8px 0 6px; line-height: 1; background: transparent; }
.rt .tile b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rt .tile span { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.rt .tile small { margin-top: 3px; font-size: 10px; font-weight: 600; color: var(--muted); }
.rt .alerts h3 { margin: 0; font-size: 16px; font-weight: 700; }
.rt .alerts p { margin: 3px 0 10px; font-size: 14px; color: var(--muted); }
.rt .note { margin: 0; font-size: 13px; color: var(--muted); }
.rt .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rt .fallback { width: 100%; min-height: 150px; font: 400 14px/1.4 var(--font); color: var(--ink); background: var(--ground); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 10px; }

.graph { display: block; width: 100%; margin: 0; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--raised); cursor: zoom-in; }
.graph img { display: block; width: 100%; height: auto; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .graph:hover img { transform: scale(1.02); } }
.lb { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(5, 10, 14, 0.97); color: var(--ink); padding: max(12px, env(safe-area-inset-top, 0px)) 16px env(safe-area-inset-bottom, 0px); }
.lb[hidden] { display: none; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; font-size: 14px; color: var(--muted); }
.lb__scroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.lb__scroll img { display: block; width: max(1500px, 100%); max-width: none; height: auto; }

.contacts { list-style: none; margin: 0; padding: 0; display: grid; }
.contacts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hairline); }
.contacts li:last-child { border-bottom: 1px solid var(--hairline); }
.contacts .k { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.contacts .v { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; color: var(--ink); }
.contacts a.v { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }

@media (max-width: 960px) {
  .carrera-photos { max-width: 520px; }
}
@media (max-width: 640px) {
  .carrera-photos .media:last-child { margin-top: 32px; }
  .rt .bib { padding: 34px 16px 18px; }
  .rt .out .card, .rt .cta { padding: 16px; }
}
.rt [hidden], .field[hidden] { display: none !important; }

/* ---------- Imágenes de las marcas en Evaluaciones ---------- */
.brand-strip { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.brand-grid .media figcaption { display: flex; flex-direction: column; gap: 2px; }
.brand-grid .media figcaption span { font-size: 11px; font-weight: 500; color: #b9c4c9; }
.media--contain { background: #eef0f2; }
.media--contain img { object-fit: contain; padding: 8px 8px 44px; }
@media (max-width: 640px) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .brand-grid .media figcaption { padding: 28px 10px 10px; font-size: 12px; } }

/* ---------- Km por semana en la herramienta /carrera/ ---------- */
.rt .tl__win { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; pointer-events: none; font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rt-accent); }
.rt .tl__kmlab { position: relative; height: 58px; margin-top: 2px; }
.rt .tl__kml { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; }
.rt .tl__kml i { display: block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rt .tl__kml--ventana i { color: var(--rt-accent); }
.rt .tl__kml--pico i { color: var(--teal-light); }
.rt .tl__kml b { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.rt .tl__kml small { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rt .seg--kmv { background: var(--rt-accent); }
.rt .seg--kmp { background: var(--teal-light); }
.rt .sw--hoy { background: var(--ink); border-color: var(--ink); border-radius: 50%; }
.rt .sw--kmv { background: var(--rt-accent); border-color: var(--rt-accent); }
.rt .sw--kmp { background: var(--teal-light); border-color: var(--teal-light); }

.rt .km { gap: 14px; }
.rt .km__cat { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.rt .km__cols { display: grid; gap: 12px; }
@media (min-width: 560px) { .rt .km__cols { grid-template-columns: 1fr 1fr; } }
.rt .km__col { border: 1px solid var(--rt-line); border-radius: var(--radius-md); padding: 14px; display: grid; gap: 4px; align-content: start; background: var(--rt-bg); min-width: 0; }
.rt .km__k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rt-accent); line-height: 1.2; }
.rt .km__when { margin: 0; font-size: 13px; color: var(--muted); }
.rt .km__v { margin: 6px 0 0; font-size: clamp(36px, 10vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rt .km__v small { margin-left: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rt .km__n { margin: 0; font-size: 14px; color: var(--muted); }
.rt .km__f { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--rt-line); font-size: 16px; font-weight: 600; line-height: 1.3; }
.rt .km__f span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rt .km__aviso { margin: 0; padding: 12px 14px; border-left: 4px solid var(--rt-warn); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--rt-warn-soft); font-size: 14px; line-height: 1.5; }
.rt .km__how { display: grid; gap: 8px; }
.rt .km__how ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.rt .km details { border: 1px solid var(--rt-line); border-radius: var(--radius-md); padding: 12px 16px; font-size: 14px; }
.rt .km summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.rt .km details p { margin: 10px 0 0; color: var(--muted); }
.rt .refs { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.rt .refs a { color: var(--teal-light); overflow-wrap: anywhere; }

/* Gráfico "De hoy a la carrera" dentro de la calculadora simple de /evaluaciones/ */
.calc-out .rt { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.rt .tl-embed { display: grid; gap: 12px; min-width: 0; }

/* =====================================================================
   v3 — Efectos de imagen (oct 2026)
   .fx      → fotos y pantallas (.media): anillo lima→teal, resplandor, destello al aparecer,
              levantar + zoom y leve inclinación 3D con el cursor (solo mouse).
   .shot    → capturas de la app dentro de un marco (celular o navegador), con halo que flota
              y borde animado. Uso: <figure class="shot shot--phone"><div class="shot__frame"><img …></div></figure>
   Todo se apaga con "reducir movimiento"; en celular quedan el anillo y el destello.
   ===================================================================== */
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --fx-ring: linear-gradient(135deg, rgba(148,195,63,.95), rgba(63,181,197,.95) 55%, rgba(148,195,63,.4)); }

.fx {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --glow: 0;
  position: relative; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(148,195,63,.22), 0 14px 38px -16px rgba(0,0,0,.7), 0 12px 44px -24px rgba(148,195,63,.5);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 460ms var(--ease-out), translate 460ms var(--ease-out), box-shadow 460ms var(--ease-out);
}
.fx::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 2; pointer-events: none;
  background: var(--fx-ring); opacity: .6; transition: opacity 320ms ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fx::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,calc(.2 * var(--glow))), transparent 62%),
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%) 140% 0 / 300% 100% no-repeat;
}
.fx.is-live { transition: transform 90ms linear, translate 300ms var(--ease-out), box-shadow 460ms var(--ease-out); }
@keyframes fx-sheen { from { background-position: 0 0, 140% 0; } to { background-position: 0 0, -40% 0; } }
.js .reveal-img.in.fx::after { animation: fx-sheen 1500ms 650ms var(--ease-in-out) 1 both; }

/* Retratos del equipo */
.fx-photo { box-shadow: 0 0 0 1px rgba(148,195,63,.3), 0 14px 38px -16px rgba(0,0,0,.7), 0 12px 44px -24px rgba(148,195,63,.5); transition: translate 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .fx:hover, .fx.is-live {
    translate: 0 -6px; z-index: 5;
    box-shadow: 0 0 0 1px rgba(148,195,63,.6), 0 28px 60px -20px rgba(0,0,0,.85), 0 18px 70px -18px rgba(148,195,63,.6), 0 0 100px -34px rgba(63,181,197,.6);
  }
  .fx:hover::before { opacity: 1; }
  .fx-photo:hover { translate: 0 -5px; box-shadow: 0 0 0 1px rgba(148,195,63,.6), 0 26px 56px -20px rgba(0,0,0,.85), 0 16px 60px -18px rgba(148,195,63,.55); }
}

/* ----- Capturas de la app en marco ----- */
.shot { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --glow: 0; position: relative; isolation: isolate; margin: 0 auto; width: 100%; max-width: var(--shot-w, 360px); }
.shot--browser { --shot-w: 100%; }
.shot::before {  /* halo que flota detrás */
  content: ""; position: absolute; z-index: -1; inset: -14% -18%;
  background: radial-gradient(closest-side at 35% 40%, rgba(148,195,63,.42), transparent 70%), radial-gradient(closest-side at 70% 65%, rgba(63,181,197,.38), transparent 72%);
  filter: blur(26px); animation: fx-float 7s ease-in-out infinite;
}
@keyframes fx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.shot__frame {
  position: relative; padding: 9px; border-radius: 34px; background: #05080a;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 460ms var(--ease-out);
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
}
.shot__frame::before {  /* borde animado */
  content: ""; position: absolute; inset: -2px; border-radius: 36px; z-index: -1;
  background: conic-gradient(from var(--fx-a), #94c33f, #3fb5c5, rgba(63,181,197,0) 42%, #94c33f 70%, #94c33f);
  animation: fx-spin 7s linear infinite;
}
@keyframes fx-spin { to { --fx-a: 360deg; } }
.shot__frame::after {  /* brillo del cursor + destello */
  content: ""; position: absolute; inset: 9px; border-radius: 26px; z-index: 3; pointer-events: none;
  background:
    radial-gradient(380px circle at var(--mx) var(--my), rgba(255,255,255,calc(.2 * var(--glow))), transparent 62%),
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.3) 50%, transparent 62%) 140% 0 / 300% 100% no-repeat;
  animation: fx-sheen-b 5.5s 1.2s var(--ease-in-out) infinite;
}
@keyframes fx-sheen-b { 0%, 70% { background-position: 0 0, 140% 0; } 100% { background-position: 0 0, -40% 0; } }
.shot__frame img { display: block; width: 100%; height: auto; border-radius: 26px; background: var(--raised); }
.shot.is-live .shot__frame { transition: transform 90ms linear; }
.shot figcaption { margin-top: 18px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }
.shot figcaption small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted, #9aa6ad); font-size: 13px; }

/* Navegador */
.shot--browser .shot__frame { border-radius: 16px; padding: 30px 8px 8px; }
.shot--browser .shot__frame::before { border-radius: 18px; }
.shot--browser .shot__frame::after { inset: 30px 8px 8px; border-radius: 9px; }
.shot--browser .shot__frame img { border-radius: 9px; }
.shot--browser .shot__bar { position: absolute; top: 10px; left: 14px; display: flex; gap: 6px; }
.shot--browser .shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3640; }
.shot--browser .shot__bar i:first-child { background: #94c33f; }

@media (hover: hover) and (pointer: fine) {
  .shot:hover .shot__frame { box-shadow: 0 40px 90px -28px rgba(0,0,0,.95), 0 0 80px -22px rgba(148,195,63,.55), 0 0 0 1px rgba(255,255,255,.1); }
}
@media (prefers-reduced-motion: reduce) {
  .fx, .fx.is-live, .fx-photo, .shot__frame { transform: none; transition: none; }
  .fx:hover, .fx.is-live, .fx-photo:hover { translate: none; }
  .js .reveal-img.in.fx::after, .shot::before, .shot__frame::before, .shot__frame::after { animation: none; }
  .fx::after { background: none; }
}
@media (max-width: 640px) { .shot::before { inset: -8% -10%; filter: blur(20px); } }

/* PulseLoad — listas con capturas (oct 2026) */
.checks--pl { gap: 10px; }
.checks--pl li { align-items: flex-start; color: var(--muted); }
.checks--pl li > span:first-child { flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--lime); font-size: 0; }
.shot figcaption { line-height: 1.35; }

/* Evita scroll lateral por el halo de las capturas */
html, body { overflow-x: clip; }

/* ----- Capturas largas: paneo vertical (oct 2026) -----
   .shot__view recorta la captura a la altura de la pantalla; main.js le pone .is-pan
   cuando la imagen es más alta y calcula --pan (px a recorrer) y --pan-dur.
   Mouse: al pasar el mouse la pantalla se recorre hasta abajo. Táctil: se recorre sola
   cuando está a la vista. "Reducir movimiento": se puede desplazar con el dedo/rueda. */
.shot__view { position: relative; overflow: hidden; border-radius: 26px; }
.shot--browser .shot__view { border-radius: 9px; }
.shot__view img { will-change: transform; }
.shot__view.is-pan { height: var(--view-h); }
.shot__view.is-pan img { transform: translateY(0); transition: transform 1100ms var(--ease-in-out, ease-in-out); }
.shot__view.is-pan::after {  /* degradé + aviso abajo */
  content: "Pasá el mouse para recorrer ↓"; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 44px 12px 14px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #0c1013;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92) 62%); pointer-events: none;
  transition: opacity 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .shot:hover .shot__view.is-pan img { transform: translateY(calc(-1 * var(--pan))); transition-duration: var(--pan-dur, 5s); }
  .shot:hover .shot__view.is-pan::after { opacity: 0; }
}
@media (hover: none), (pointer: coarse) {
  .shot__view.is-pan::after { content: "Recorriendo la pantalla"; }
  .shot__view.is-pan.is-auto img { animation: shot-pan calc(var(--pan-dur, 5s) * 2 + 3s) ease-in-out infinite; }
  .shot__view.is-pan.is-auto::after { opacity: 0; }
}
@keyframes shot-pan { 0%, 12% { transform: translateY(0); } 50%, 62% { transform: translateY(calc(-1 * var(--pan))); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .shot__view.is-pan { overflow-y: auto; overscroll-behavior: contain; }
  .shot__view.is-pan img, .shot:hover .shot__view.is-pan img { transform: none !important; animation: none !important; transition: none; }
  .shot__view.is-pan::after { content: "Deslizá para ver más ↓"; position: sticky; display: block; margin-top: -60px; }
}

/* ----- Servicios en octógonos (oct 2026) ----- */
.octo-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.octo { --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: var(--ink); text-decoration: none; }
.octo__glow { display: block; width: 100%; max-width: 190px; transition: transform 380ms var(--ease-out), filter 380ms ease; }
.octo__shape { position: relative; display: block; width: 100%; aspect-ratio: 1; clip-path: var(--oct);
  background: linear-gradient(135deg, #3fb5c5, #2896e6 55%, #1a3a78); padding: 2px; }
.octo__shape img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: var(--oct); background: #0a183a; transition: transform 600ms var(--ease-out), filter 400ms ease; }
.octo__name { margin-top: 8px; font-weight: 700; font-size: 17px; }
.octo__desc { color: var(--muted); font-size: 14px; line-height: 1.4; max-width: 190px; }
@media (hover: hover) and (pointer: fine) {
  .octo:hover .octo__glow { transform: translateY(-6px); filter: drop-shadow(0 0 18px rgba(40,150,230,.6)); }
  .octo:hover .octo__shape { background: linear-gradient(135deg, #8fe3ff, #3fa9ff 55%, #2a5bb8); }
  .octo:hover .octo__shape img { filter: brightness(1.2) saturate(1.1); }
  .octo:hover .octo__name { color: #7fc6ff; }
}
.octo:focus-visible { outline: none; }
.octo:focus-visible .octo__glow { filter: drop-shadow(0 0 0 2px #7fc6ff) drop-shadow(0 0 16px rgba(40,150,230,.7)); }
@media (max-width: 1040px) { .octo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .octo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .octo__desc { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .octo__glow, .octo__shape img { transition: none; } .octo:hover .octo__glow, .octo:hover .octo__shape img { transform: none; } }

/* Rehabilitación — explicación de cada servicio */
.svc-txt { display: flex; flex-direction: column; gap: 10px; }
.svc-lbl { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); margin: 0; }
.svc-txt p { margin: 0; }
.svc-obj { color: var(--ink); border-left: 3px solid var(--lime); padding-left: 12px; }
.svc-obj strong { color: var(--lime); }
.card--lg .svc-media { margin: -12px -12px 4px; }
@media (max-width: 600px) { .card--lg .svc-media { margin: -8px -8px 4px; } }

/* PulseLoad — capturas en "Qué hace PulseLoad" */
.feat-shot { margin: 0 0 6px; aspect-ratio: 16 / 9; background: #f7f9fa; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(148,195,63,.18); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.feat-shot img { width: 100%; height: 100%; display: block; transition: transform 600ms var(--ease-out); }
.feat-shot--contain img { object-fit: contain; padding: 10px; }
.feat-shot--cover img { object-fit: cover; object-position: center top; }
@media (hover: hover) and (pointer: fine) { .feature:hover .feat-shot img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .feat-shot img { transition: none; } }

/* Capacitaciones — tarjetas ampliadas */
.cap-card { gap: 16px; }
.card--lg .cap-media { margin: -12px -12px 4px; }
.cap-card .kicker { margin: 0; }
.cap-card .rows .row-meta { max-width: 62%; }
.cap-more { border-top: 1px solid var(--hairline); padding-top: 12px; }
.cap-more summary { cursor: pointer; color: var(--lime); font-weight: 600; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 8px; }
.cap-more summary::-webkit-details-marker { display: none; }
.cap-more summary::after { content: "+"; font-size: 18px; line-height: 1; transition: transform 200ms ease; }
.cap-more[open] summary::after { transform: rotate(45deg); }
.cap-more__body { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.cap-lbl { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); margin: 8px 0 0; }
.cap-list { margin: 0; padding-left: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.cap-more__body p { margin: 0; }
.cap-cursos .card--lg { padding: 28px; }
.cap-cursos .card--lg .cap-media { margin: -8px -8px 4px; }
.cap-cursos .h3 { font-size: 20px !important; }
@media (max-width: 600px) { .cap-card .rows > li { flex-direction: column; gap: 4px; } .cap-card .rows .row-meta { max-width: none; text-align: left; } }
.cap-cursos { align-items: start; }
.cap-cursos .card--lg { height: auto; }

.cap-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cap-opt { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.cap-opt p { margin: 0; }
.cap-opt__t { font-weight: 700; color: var(--ink); }
.cap-opt .btn { margin-top: auto; align-self: flex-start; font-size: 14px; }
@media (max-width: 600px) { .cap-opts { grid-template-columns: minmax(0, 1fr); } }
.cap-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.cap-badge img { width: 34px !important; height: auto !important; object-fit: contain; transform: none !important; }


/* ---------- Menú con desplegable de Evaluaciones ---------- */
.nav { gap: 22px; }
.nav-dd { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.nav-dd__btn, .nav-acc__btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink); cursor: pointer; }
.nav-dd__btn { width: 24px; height: 32px; padding: 0; }
.nav-dd__btn svg, .nav-acc__btn svg { transition: transform 180ms var(--ease-out); }
.nav-dd__menu { position: absolute; top: 100%; left: -16px; min-width: 220px; margin-top: 10px; padding: 8px; display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 160ms ease, transform 160ms var(--ease-out), visibility 160ms; z-index: 60; }
.nav-dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-dd__menu a { padding: 10px 12px; border-radius: var(--radius-sm); }
.nav-dd.is-open .nav-dd__menu { opacity: 1; visibility: visible; transform: none; }
.nav-dd.is-open .nav-dd__btn svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .nav-dd:hover .nav-dd__menu { opacity: 1; visibility: visible; transform: none; }
  .nav-dd:hover .nav-dd__btn svg { transform: rotate(180deg); }
  .nav-dd__menu a:hover { background: var(--surface); }
}
.nav-acc__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hairline); }
.nav-panel .nav-acc__head a { flex: 1; border-bottom: 0; }
.nav-acc__btn { width: 48px; height: 52px; }
.nav-acc__menu { display: none; padding: 4px 0 8px 16px; border-bottom: 1px solid var(--hairline); }
.nav-panel .nav-acc__menu a { min-height: 44px; border-bottom: 0; font-weight: 500; font-size: 16px; }
.nav-acc.is-open .nav-acc__menu { display: block; }
.nav-acc.is-open .nav-acc__btn svg { transform: rotate(180deg); }
.subnav a[aria-current="page"] { border-color: var(--lime); color: var(--lime); }
.footer-legal { margin-top: 32px; color: var(--muted); font-size: 13px; }
.crumb a { color: inherit; text-decoration: none; }

/* ---------- Páginas de evaluación ---------- */
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .choice-grid { grid-template-columns: minmax(0, 1fr); } }
.choice-goal { color: var(--lime); font-size: 14px; font-weight: 600; }
.type-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.type-links a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); transition: border-color 160ms ease; }
.type-links a strong { font-weight: 600; }
.type-links a span { color: var(--muted); font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .type-links a:hover { border-color: var(--teal-light); } }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .info-grid { grid-template-columns: minmax(0, 1fr); } }
.info-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- Equipo en Nosotros: foto chica, más lugar para el texto ---------- */
.team-list { display: flex; flex-direction: column; }
.member { display: grid; grid-template-columns: 160px minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "photo head role" "photo body role"; gap: 8px 32px; align-items: start; padding: 32px 0; border-top: 1px solid var(--hairline); }
.member:last-child { border-bottom: 1px solid var(--hairline); }
.member__photo { grid-area: photo; width: 160px; height: 160px; object-fit: cover; object-position: center 20%; border-radius: var(--radius-md); }
.member__head { grid-area: head; }
.member__body { grid-area: body; display: flex; flex-direction: column; gap: 10px; }
.member__role { grid-area: role; display: flex; flex-direction: column; gap: 8px; }
.member__lbl { color: var(--lime); font-size: 14px; font-weight: 600; }
@media (max-width: 860px) {
  .member { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "photo head" "body body" "role role"; gap: 14px 16px; align-items: center; padding: 24px 0; }
  .member__photo { width: 88px; height: 88px; }
}
@media (min-width: 861px) { .member { grid-template-rows: auto 1fr; } }
.member__dl { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.member__dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.member__dl dt { color: var(--ink); font-size: 14px; font-weight: 600; }
.member__dl dd { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 480px) { .member__dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }