/* index.html — home. Editorial layout shared with /proyectos and
   /academias. Only theme tokens are used, so the page works in both the
   light (default) and dark themes. */

.hm-wrap, .hm-split, .hm-hero__inner, .hm-facts__inner { max-width: var(--container-max); margin-inline: auto; }
.hm-sec { padding: var(--section-y) var(--gutter); }
.hm-sec--alt { background: var(--surface-card); border-top: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); }
.hm-sec h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; }
.hm-sec h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-tight); line-height: 1.25; }
.k-eyebrow { display: block; margin-bottom: 12px; }
.hm-head { display: flex; flex-direction: column; gap: 14px; max-width: 660px; margin-bottom: 44px; }
.hm-head .k-eyebrow { margin-bottom: 0; }
.hm-head > p:last-child:not(.k-eyebrow) { color: var(--text-muted); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.hm-head--center { margin-inline: auto; text-align: center; align-items: center; }
.hm-muted { color: var(--text-muted); line-height: var(--lh-relaxed); }
.hm-n { font-family: var(--font-mono); font-size: 12px; color: var(--k-live); }
.hm-link { display: inline-block; width: fit-content; font-size: var(--fs-body-sm); color: var(--text-primary); border-bottom: 1px solid var(--border-strong); }
.hm-link:hover { border-color: var(--text-muted); }

/* ── HERO ─────────────────────────────────────────────────────────── */
.hm-hero { padding: 96px var(--gutter) 56px; overflow: hidden; }
.hm-hero__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 40px; align-items: center; }
.hm-hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hm-kicker { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--k-live); }
.hm-hero h1 { font-size: clamp(40px, 5.6vw, 70px); line-height: 1.02; color: var(--text-primary); }
.hm-hero__sub { max-width: 58ch; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-muted); }
.hm-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hm-hero__mascot { position: relative; display: flex; justify-content: center; }
.hm-hero__mascot::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 88%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgb(var(--live-rgb) / .12), rgb(var(--live-rgb) / 0) 68%);
}
.hm-hero__mascot img { position: relative; width: min(100%, 360px); height: auto; filter: drop-shadow(0 26px 34px var(--shadow-soft)); }

/* Three product screens, the centre one in front */
.hm-screens { position: relative; max-width: var(--container-max); margin: 64px auto 0; height: clamp(260px, 44vw, 560px); }
.hm-shot { background: var(--frame-bg); border: 1px solid var(--border-hairline); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-shot); }
.hm-shot__bar { display: flex; gap: 6px; align-items: center; height: 28px; padding: 0 14px; background: var(--frame-bar); border-bottom: 1px solid var(--frame-line); }
.hm-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--frame-dot); }
.hm-shot img { display: block; width: 100%; height: auto; }
.hm-screens .hm-shot { position: absolute; }
.hm-shot--main { left: 50%; top: 0; width: 72%; transform: translateX(-50%); z-index: 2; }
.hm-shot--side { top: 12%; width: 50%; z-index: 1; opacity: .9; }
.hm-shot--left { left: 0; }
.hm-shot--right { right: 0; }
.hm-screens__cap { max-width: var(--container-max); margin: 18px auto 0; text-align: center; font-size: var(--fs-caption); color: var(--text-faint); }
@media (max-width: 860px) {
  .hm-hero { padding-top: 88px; }
  .hm-hero__inner { grid-template-columns: 1fr; gap: 12px; }
  .hm-hero__mascot { order: -1; justify-content: flex-start; }
  .hm-hero__mascot::before { display: none; }
  .hm-hero__mascot img { width: 128px; }
  .hm-screens { height: auto; margin-top: 44px; }
  .hm-screens .hm-shot { position: static; transform: none; width: 100%; }
  .hm-shot--side { display: none; }
}
@media (max-width: 480px) {
  .hm-shot { border-radius: 10px; }
  .hm-shot__bar { height: 22px; padding: 0 10px; }
  .hm-shot__bar i { width: 6px; height: 6px; }
}

/* ── LOGOS ────────────────────────────────────────────────────────── */
.trusted-sec { padding: 28px var(--gutter) 20px; text-align: center; border-top: 1px solid var(--border-faint); }
.trusted-lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; }
.trusted-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 13%, black 87%, transparent);
  mask-image: linear-gradient(to right, transparent, black 13%, black 87%, transparent);
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trusted-track { display: flex; width: max-content; align-items: center; animation: ticker 34s linear infinite; }
.trusted-marquee:hover .trusted-track { animation-play-state: paused; }
.trusted-logo { display: flex; align-items: center; justify-content: center; height: 68px; padding: 0 2.4rem; opacity: .55; filter: grayscale(1) brightness(0); transition: opacity var(--dur); }
[data-theme="dark"] .trusted-logo { filter: grayscale(1) brightness(0) invert(1); opacity: .62; }
.trusted-logo:hover { opacity: .95; }
.tl-img { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
@media (max-width: 680px) {
  .trusted-logo { padding: 0 1.6rem; }
  .trusted-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
  .trusted-marquee::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .trusted-track { animation: none; } }

/* ── DATOS ────────────────────────────────────────────────────────── */
.hm-facts { padding: 0 var(--gutter); }
.hm-facts__inner { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-hairline); }
.hm-facts__inner > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 26px 24px 24px 0; }
.hm-facts__inner > div + div { padding-left: 24px; border-left: 1px solid var(--border-hairline); }
.hm-facts dd { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: var(--ls-display); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hm-facts dt { font-size: var(--fs-body-sm); color: var(--text-muted); }
@media (max-width: 760px) {
  .hm-facts__inner { grid-template-columns: 1fr 1fr; }
  .hm-facts__inner > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hm-facts__inner > div:nth-child(n+3) { border-top: 1px solid var(--border-hairline); }
}

/* ── SPLIT (título a la izquierda) ───────────────────────────────── */
.hm-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.hm-split--top { align-items: start; }
.hm-split__sticky { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; }
.hm-split__sticky .k-eyebrow { margin-bottom: 0; }
.hm-prose { display: flex; flex-direction: column; gap: 18px; font-size: 18px; line-height: var(--lh-relaxed); color: var(--text-secondary); }
.hm-prose__em { color: var(--text-primary); padding-left: 18px; border-left: 2px solid var(--k-live); }
@media (max-width: 860px) {
  .hm-split { grid-template-columns: 1fr; gap: 28px; }
  .hm-split__sticky { position: static; }
}

/* ── TRES EJES ────────────────────────────────────────────────────── */
.hm-axes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-strong); }
.hm-axes li { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 8px 0; }
.hm-axes li + li { padding-left: 28px; border-left: 1px solid var(--border-hairline); }
.hm-axes p { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.hm-axes .hm-tags { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-top: auto; padding-top: 6px; }
@media (max-width: 860px) {
  .hm-axes { grid-template-columns: 1fr; }
  .hm-axes li, .hm-axes li + li { padding: 22px 0; border-left: 0; }
  .hm-axes li + li { border-top: 1px solid var(--border-hairline); }
}

/* ── INDUSTRIAS ───────────────────────────────────────────────────── */
.hm-inds { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.hm-ind { display: flex; flex-direction: column; gap: 22px; color: inherit; }
.hm-ind .hm-shot { transition: transform var(--dur) var(--ease-out); }
.hm-ind:hover .hm-shot { transform: translateY(-3px); }
.hm-ind__text { display: flex; flex-direction: column; gap: 10px; }
.hm-ind__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--k-live); }
.hm-ind__text > p:not(.hm-ind__k) { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.hm-ind:hover .hm-link { border-color: var(--text-muted); }
.hm-more { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border-hairline); color: var(--text-muted); font-size: var(--fs-body-sm); }
.hm-more a { color: var(--text-primary); border-bottom: 1px solid var(--border-strong); margin-left: 6px; }
@media (max-width: 760px) { .hm-inds { grid-template-columns: 1fr; gap: 44px; } }

/* ── PASOS ────────────────────────────────────────────────────────── */
.hm-steps { list-style: none; border-top: 1px solid var(--border-strong); }
.hm-steps li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border-hairline); }
.hm-steps li > span { font-family: var(--font-mono); font-size: 12.5px; color: var(--k-live); padding-top: 3px; }
.hm-steps h3 { margin-bottom: 6px; }
.hm-steps p { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
@media (max-width: 480px) { .hm-steps li { grid-template-columns: 1fr; gap: 6px; } }

/* ── POR QUÉ ──────────────────────────────────────────────────────── */
.hm-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.hm-why > div { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--text-primary); }
.hm-why p { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.hm-why .hm-link { margin-top: 4px; }
@media (max-width: 860px) { .hm-why { grid-template-columns: 1fr; gap: 28px; } }

/* ── PRECIOS ──────────────────────────────────────────────────────── */
.hm-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.hm-price {
  display: flex; flex-direction: column; gap: 10px; padding: 28px;
  background: var(--surface-page); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
}
.hm-price--main { border-color: var(--text-primary); box-shadow: var(--shadow-md); }
.hm-price__phase { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.hm-price__phase span { font-size: 10.5px; color: var(--k-live); background: var(--k-live-dim); padding: 3px 8px; border-radius: var(--radius-pill); letter-spacing: .04em; }
.hm-price__amt { font-size: 30px; letter-spacing: var(--ls-display); color: var(--text-primary); margin-top: 4px; }
.hm-price__desc { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.hm-price ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 22px; padding-top: 16px; border-top: 1px solid var(--border-hairline); }
.hm-price li { position: relative; padding-left: 18px; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.hm-price li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 5px; border-left: 1.5px solid var(--k-live); border-bottom: 1.5px solid var(--k-live); transform: rotate(-45deg); }
.hm-price .k-btn { margin-top: auto; width: 100%; }
@media (max-width: 900px) { .hm-prices { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ── CONTACTO ─────────────────────────────────────────────────────── */
.hm-contact { text-align: center; }
.hm-contact__mascot { width: 128px; height: auto; margin: 0 auto 4px; filter: drop-shadow(0 14px 20px var(--shadow-soft)); }
.hm-contact .calendly-frame { margin-bottom: 28px; }

/* ── A/B DEL HERO ─────────────────────────────────────────────────── */
/* data-hero is set in <head> before paint. Without JS it stays unset and
   the page shows variant A. */
.hm-b-only { display: none !important; }
[data-hero="b"] .hm-b-only { display: revert !important; }
[data-hero="b"] .hm-screens.hm-b-only { display: block !important; }
[data-hero="b"] .hm-hero__mascot.hm-b-only { display: flex !important; }
[data-hero="b"] .hm-a-only { display: none !important; }
:root:not([data-hero="b"]) .hm-hero__inner { grid-template-columns: minmax(0, 1fr); max-width: var(--container-max); }
:root:not([data-hero="b"]) .hm-hero__copy { max-width: 860px; }

/* ── ANTES → DESPUÉS ──────────────────────────────────────────────── */
/* The "after" screen is the resting state (no JS, reduced motion, or
   after it plays once). With motion allowed, <head> adds .ba-motion,
   which starts on "before"; scripts/site.js adds .is-play when the
   figure is in view and .is-done when the wipe ends. */
.hm-ba { max-width: var(--container-max); margin: 56px auto 0; }
.hm-ba__view {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--border-hairline); border-radius: 14px; background: var(--frame-bg); box-shadow: var(--shadow-shot);
}
.hm-ba__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-ba__after { clip-path: inset(0 0 0 0); }
.hm-ba__line {
  position: absolute; top: 0; bottom: 0; left: 100%; width: 3px; margin-left: -1.5px; opacity: 0;
  background: var(--k-live); box-shadow: 0 0 0 1px rgb(var(--live-rgb) / .25), 0 0 24px rgb(var(--live-rgb) / .55);
}
.hm-ba__tag {
  position: absolute; bottom: 14px; left: 14px; padding: 5px 11px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-wide); text-transform: uppercase;
  background: rgba(14, 17, 24, .78); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .4s var(--ease-out);
}
.hm-ba__tag--before { opacity: 0; }
.hm-ba__tag--after { background: var(--k-live); }
.hm-ba__cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; font-size: var(--fs-caption); color: var(--text-faint); }
.hm-ba__cap b { font-weight: var(--fw-medium); color: var(--text-muted); }
.hm-ba__replay {
  flex-shrink: 0; background: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
  padding: 6px 14px; font: inherit; color: var(--text-secondary); cursor: pointer; display: none;
}
.hm-ba__replay:hover { border-color: var(--border-strong); color: var(--text-primary); }

.ba-motion .hm-ba__replay { display: inline-block; }
.ba-motion .hm-ba:not(.is-play):not(.is-done) .hm-ba__after { clip-path: inset(0 100% 0 0); }
.ba-motion .hm-ba:not(.is-done) .hm-ba__tag--before { opacity: 1; }
.ba-motion .hm-ba:not(.is-done) .hm-ba__tag--after { opacity: 0; }
.ba-motion .hm-ba.is-play .hm-ba__after { animation: hm-ba-wipe 2s var(--ease-in-out) .9s both; }
.ba-motion .hm-ba.is-play .hm-ba__line { animation: hm-ba-line 2s var(--ease-in-out) .9s both; }
.ba-motion .hm-ba.is-play .hm-ba__tag--before { animation: hm-ba-fade 2s linear .9s both; }
@keyframes hm-ba-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hm-ba-line { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes hm-ba-fade { 0%, 20% { opacity: 1; } 35%, 100% { opacity: 0; } }

@media (max-width: 560px) {
  .hm-ba { margin-top: 36px; }
  .hm-ba__view { border-radius: 10px; }
  .hm-ba__tag { bottom: 8px; left: 8px; padding: 3px 8px; font-size: 9.5px; }
  .hm-ba__cap { flex-direction: column; align-items: flex-start; gap: 10px; }
}