/* =========================================================
   Jos.IA · Páginas web
   Solo lo propio de esta página. La base vive en _shared/css/josia.css
   ========================================================= */

/* ---------- Tipografía autoalojada (Geist variable + Caveat, subconjunto latino) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../../_shared/fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  src: url("../../_shared/fonts/caveat-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Respaldo con las métricas de Geist: al cambiar de fuente el texto no salta */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 102%;
  ascent-override: 98.5%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}
:root { --font-sans: "Geist", "Geist Fallback", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; }

/* ---------- Hero ---------- */
.hero__stage { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 52%;
  /* el degradado de los bordes y el oscurecido vienen horneados en el webp (sin filtro ni máscara en tiempo de ejecución) */
}
.hero__img { position: relative; z-index: 1; }
.hero__note {
  position: absolute;
  z-index: 3;
  left: 1%;
  top: 7%;
  display: grid;
  justify-items: start;
  width: min(7.4em, 38%);
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  line-height: 0.98;
  color: #f4f6f9;
  transform: rotate(-5deg);
  transform-origin: left top;
  pointer-events: none;
}
.hero__arrow { width: 40px; height: auto; margin: 6px 0 0 46%; opacity: 0.92; transform: rotate(-4deg); }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .hero__stage { margin-left: 0; }
}
@media (max-width: 959px) {
  .hero__stage { margin-top: 4px; display: flex; flex-direction: column; }
  /* En pantallas estrechas la nota va sobre la imagen, sin tapar la laptop */
  .hero__note { order: -1; position: relative; top: auto; right: auto; width: auto; margin: 0 var(--gutter) -18px auto; justify-items: end; text-align: right; transform: rotate(-3deg); }
  .hero__arrow { display: none; }
}

/* ---------- Ejemplos ---------- */
.pager { display: none; gap: 10px; }
.pager__btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.pager__btn .icon { width: 18px; height: 18px; stroke-width: 1.8; }
@media (hover: hover) { .pager__btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } }
.pager__btn:active { transform: scale(0.94); }

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.work { display: grid; gap: 14px; min-width: 0; color: inherit; }
.work:nth-child(-n+2) { grid-column: span 2; }
.work__shot {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background-color: var(--ink);
  background-image: var(--lq, none);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% calc(100% - 22px);
  box-shadow: 0 24px 40px -28px rgba(10, 12, 16, 0.55), 0 0 0 1px rgba(10, 12, 16, 0.12);
  transition: translate var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), scale var(--t-fast) var(--ease);
}
/* La inclinación 3D solo existe mientras el motor la usa (hover o visible en táctil): en reposo no hay capas extra */
.work.is-live .work__shot {
  transform: perspective(900px) rotateX(calc(var(--ny, 0) * var(--tm, 2.6deg) * -1)) rotateY(calc(var(--nx, 0) * var(--tm, 2.6deg)));
  will-change: transform;
}
.frame { display: flex; gap: 6px; align-items: center; height: 22px; padding-inline: 12px; background: #151a22; }
.frame i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.work__shot img { position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease-out), opacity 0.7s var(--ease); }
.js .work__shot img:not(.is-ready) { opacity: 0; }
.work__cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 2px; }
.work__cap strong { display: block; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.work__cap small { display: block; font-size: 0.9375rem; color: var(--text-2); }
.work:nth-child(n+3) .work__cap strong { font-size: 1rem; }
.work:nth-child(n+3) .work__cap small { font-size: 0.875rem; }
@media (hover: hover) {
  .work:hover .row__go { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .work:hover .row__go .icon { transform: translateX(2px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work:hover .work__shot { translate: 0 -4px; box-shadow: 0 34px 46px -28px rgba(10, 12, 16, 0.6), 0 0 0 1px rgba(10, 12, 16, 0.14); }
  /* La captura "navega": un desplazamiento lento y un acercamiento mínimo, como si alguien recorriera la página */
  .work:hover .work__shot img { transform: scale(1.09) translate3d(0, -3.5%, 0); transition: transform 7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.7s var(--ease); }
}
@media (max-width: 1000px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work:nth-child(-n+2) { grid-column: auto; }
}
/* Móvil: carrusel horizontal con desplazamiento por tarjeta */
@media (max-width: 700px) {
  .pager { display: flex; }
  .gallery {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery > .work { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- Resultados ---------- */
.results .quote blockquote p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; font-weight: 450; }

/* =========================================================
   RITMO VERTICAL
   La base suma el relleno inferior de una sección y el superior de la siguiente
   (hasta 256 px). Aquí cada sección solo lleva relleno superior.
   ========================================================= */
:root { --sec: clamp(40px, 5.4vw, 80px); }
.band, .band--flush-top { padding-block: var(--sec) 0; }
#contacto { padding-bottom: calc(var(--sec) * 0.7); }

/* Resplandor que sigue al puntero en los paneles oscuros (solo ratón).
   Es un círculo con degradado que se desplaza con transform y opacity: no repinta el panel. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .panel[data-spot]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.075), transparent);
    transform: translate3d(var(--mx, 50%), var(--my, 0px), 0);
    opacity: var(--spot, 0);
    transition: opacity 0.5s var(--ease);
    will-change: transform, opacity;
  }
}

/* =========================================================
   SOLUCIONES: selector + vista previa
   ========================================================= */
.solutions { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: clamp(28px, 3.6vw, 52px); }
.solutions__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 40px; }
.solutions__head > div { display: grid; gap: clamp(12px, 1.4vw, 18px); justify-items: start; }
.solutions__head .title { max-width: 14em; }
@media (max-width: 760px) { .solutions__head { grid-template-columns: minmax(0, 1fr); } }

.showcase { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-areas: "tabs stage"; gap: clamp(24px, 4.4vw, 72px); align-items: center; }
.tabs { grid-area: tabs; display: grid; align-content: start; }
.showcase__stage { grid-area: stage; min-width: 0; }
@media (max-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "tabs"; gap: 22px; }
}

.tab {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2.1em 44px minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--text-2);
  font: inherit;
  text-align: left;
  transition: color var(--t-base) var(--ease);
}
.tab:last-child { border-bottom: 1px solid var(--line); }
.tab::before {
  content: "";
  position: absolute;
  inset: 0 -14px;
  z-index: -1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out);
}
.tab__n { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--text-3); transition: color var(--t-base) var(--ease); }
.tab__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out); }
.tab__icon .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.tab strong { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.tab small { display: block; margin-top: 2px; font-size: 0.9375rem; line-height: 1.45; color: var(--text-3); transition: color var(--t-base) var(--ease); }
.tab__go { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; opacity: 0.45; transition: opacity var(--t-base) var(--ease), background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.tab__go .icon { width: 16px; height: 16px; stroke-width: 1.8; transition: transform var(--t-slow) var(--ease-out); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::before { opacity: 1; transform: none; }
.tab[aria-selected="true"] .tab__n { color: var(--text); }
.tab[aria-selected="true"] small { color: var(--text-2); }
.tab[aria-selected="true"] .tab__icon { background: var(--white); border-color: var(--white); color: var(--ink); }
.tab[aria-selected="true"] .tab__go { opacity: 1; background: var(--white); border-color: var(--white); color: var(--ink); }
.tab:focus-visible { outline-offset: 2px; border-radius: 14px; }
@media (hover: hover) {
  .tab:not([aria-selected="true"]):hover { color: var(--text); }
  .tab:not([aria-selected="true"]):hover::before { opacity: 0.55; transform: none; }
  .tab:not([aria-selected="true"]):hover .tab__go { opacity: 0.9; }
  .tab:hover .tab__go .icon { transform: translateX(2px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .tab:hover .tab__icon { transform: translateY(-2px); } }
@media (max-width: 560px) {
  .tab { grid-template-columns: 44px minmax(0, 1fr) 36px; }
  .tab__n { display: none; }
}

/* Ventana de vista previa */
.pv { border: 1px solid var(--d-line); border-radius: var(--r-card); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); overflow: hidden; }
.pv__bar { display: flex; align-items: center; gap: 6px; height: 40px; padding-inline: 14px; border-bottom: 1px solid var(--d-line); }
.pv__bar > i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.pv__url { flex: 1; max-width: 240px; height: 24px; display: flex; align-items: center; margin-left: 12px; padding-inline: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 0.75rem; color: var(--d-text-3); }
.pv__body { display: grid; min-height: clamp(310px, 29vw, 390px); }
@media (max-width: 960px) { .pv__body { min-height: 0; } }
.pv__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
  padding: clamp(16px, 2vw, 24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.55s var(--ease-out), visibility 0s linear 0.3s;
}
.pv__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pv__panel.is-out { transform: translateY(-10px); }
.pv__note { padding-top: 14px; border-top: 1px solid var(--d-line); font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); max-width: 36em; text-wrap: pretty; }

/* Piezas del boceto */
.wf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; min-width: 0; }
.wf-i { opacity: 0; transform: translateY(10px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.is-active .wf-i {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-out) calc(var(--i, 0) * 60ms + 120ms), transform 0.6s var(--ease-out) calc(var(--i, 0) * 60ms + 120ms);
}
.wf-l { display: block; height: 7px; width: var(--w, 100%); border-radius: 4px; background: rgba(255, 255, 255, 0.2); }
.wf-l--h { height: 13px; border-radius: 6px; background: rgba(255, 255, 255, 0.88); }
.wf-l--s { height: 5px; background: rgba(255, 255, 255, 0.14); }
.wf-b { display: block; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.wf-btn { display: inline-flex; align-items: center; justify-self: start; height: 28px; padding-inline: 14px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.wf-chip { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding-inline: 11px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; font-size: 0.75rem; color: var(--d-text-2); white-space: nowrap; }
.wf-chip.is-on { background: var(--white); border-color: var(--white); color: var(--ink); font-weight: 600; }
.wf-row { display: flex; align-items: center; gap: 12px; }
.wf-logo { width: 22px; height: 22px; flex: none; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.85); }
.wf-nav { display: flex; gap: 10px; margin-left: auto; min-width: 0; overflow: hidden; }
.wf-nav i { width: 34px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.wf-row .wf-nav + .wf-cart { margin-left: 4px; }

.wf-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; align-items: stretch; }
.wf-copy { display: grid; gap: 9px; align-content: center; }
.wf-img { min-height: 112px; background: radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.34) 0 9px, transparent 10px), linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)); }
.wf-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wf-trio .wf-b { display: grid; gap: 8px; padding: 12px; }
.wf-dot { width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }

.wf-cart { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; color: var(--white); }
.wf-cart .icon { width: 17px; height: 17px; }
.wf-count { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--white); color: var(--ink); font-size: 0.6875rem; font-weight: 700; }
.wf-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wf-prod { display: grid; gap: 8px; }
.wf-ph { aspect-ratio: 1.2; background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)); }
.wf-price { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; }
.wf-add { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); font-style: normal; font-size: 1rem; line-height: 1; }
.is-hot .wf-add { background: var(--white); color: var(--ink); }

.wf-book { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; align-items: start; }
.wf-cal__t { display: block; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--white); }
.wf-cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 0.75rem; text-align: center; color: var(--d-text-2); font-variant-numeric: tabular-nums; }
.wf-cal__g i { font-style: normal; font-size: 0.6875rem; color: var(--d-text-3); }
.wf-cal__g span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; }
.wf-cal__g .is-off { opacity: 0.32; }
.wf-cal__g .is-on { background: var(--white); color: var(--ink); font-weight: 700; }
.wf-side { display: grid; gap: 12px; align-content: start; }
.wf-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.wf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-list { display: grid; gap: 8px; }
.wf-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.wf-th { width: 40px; height: 40px; border-radius: 9px; }
.wf-txt { display: grid; gap: 6px; }
.wf-tag { padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; }

.wf-corp { display: grid; gap: 9px; }
.wf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wf-stat { display: grid; gap: 2px; min-width: 0; padding: 12px; }
.wf-stat b { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; color: var(--white); }
.wf-stat span { font-size: 0.75rem; color: var(--d-text-2); }
.wf-logos { display: flex; align-items: center; gap: 14px; }
.wf-logos i { width: 46px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }

.wf-land { display: grid; justify-items: center; gap: 11px; padding-top: 4px; text-align: center; }
.wf-field { display: flex; gap: 8px; width: min(100%, 380px); }
.wf-input { flex: 1; min-width: 0; display: flex; align-items: center; height: 34px; padding-inline: 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; font-size: 0.75rem; color: var(--d-text-3); }
.wf-field .wf-btn { height: 34px; }
.wf-pulse { position: relative; }
.wf-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 0.75rem; color: var(--d-text-2); }
.wf-checks li { display: flex; align-items: center; gap: 6px; }
.wf-checks .icon { width: 14px; height: 14px; stroke-width: 2.4; }

/* Movimiento con causa: al elegir un tipo, el boceto se arma pieza a pieza y lo clave reacciona */
@keyframes wf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }
@keyframes wf-press { 50% { transform: scale(0.78); } }
@keyframes ring-out { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
@media (prefers-reduced-motion: no-preference) {
  .is-active .wf-count { animation: wf-pop 0.5s var(--ease-out) 1.2s 1 both; }
  .is-active .is-hot .wf-add { animation: wf-press 0.4s var(--ease) 1s 1 both; }
  .is-active .wf-cal__g .is-on { animation: wf-pop 0.55s var(--ease-out) 0.9s 1 both; }
  .is-active .wf-pulse::after { animation: ring-out 1.4s var(--ease-out) 1.1s 3; }
}

/* =========================================================
   RESULTADOS: cifras con su propia gráfica
   ========================================================= */
.results--rich { align-items: start; }
.results__quote { display: grid; gap: clamp(14px, 1.6vw, 22px); align-content: start; min-width: 0; }
.stars { display: flex; gap: 5px; color: var(--white); }
.stars .icon { width: 20px; height: 20px; fill: currentColor; stroke: none; transition: opacity 0.4s var(--ease-out) calc(var(--k, 0) * 90ms + 0.25s), transform 0.6s var(--ease-out) calc(var(--k, 0) * 90ms + 0.25s); }
.stars .icon:nth-child(2) { --k: 1; } .stars .icon:nth-child(3) { --k: 2; } .stars .icon:nth-child(4) { --k: 3; } .stars .icon:nth-child(5) { --k: 4; }
.js .stars:not(.is-visible) .icon { opacity: 0.12; transform: scale(0.6) rotate(-20deg); }

.stats--viz { margin-top: clamp(8px, 2vw, 20px); }
.stats--viz .stat { --seq: calc(var(--d, 0ms) + 0.65s); }
.stats--viz .stat { gap: 4px; padding-top: clamp(22px, 2.4vw, 32px); }
.stat__viz { position: relative; height: 72px; margin-bottom: 14px; color: var(--white); }

.stat__viz--line { max-width: 300px; }
.stat__viz--line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sp-line { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.7s var(--ease-out) var(--seq, 0.3s); }
.sp-area { transition: opacity 1.1s var(--ease) calc(var(--seq, 0.3s) + 0.8s); }
.sp-dot { position: absolute; right: -4px; top: calc(4 / 64 * 100%); translate: 0 -50%; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); transition: opacity 0.4s var(--ease) calc(var(--seq, 0.3s) + 1.5s), scale 0.5s var(--ease-out) calc(var(--seq, 0.3s) + 1.5s); }
.js .stat:not(.is-visible) .sp-line { stroke-dashoffset: 1; }
.js .stat:not(.is-visible) .sp-area { opacity: 0; }
.js .stat:not(.is-visible) .sp-dot { opacity: 0; scale: 0.2; }

.stat__viz--bars { display: flex; gap: 12px; width: 124px; }
.bar { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 7px; flex: 1; min-width: 0; }
.bar i { align-self: end; height: var(--h); border-radius: 6px 6px 2px 2px; background: rgba(255, 255, 255, 0.2); transform-origin: bottom; transition: transform 1s var(--ease-out) var(--seq, 0.3s); }
.bar--on i { background: var(--white); transition-delay: calc(var(--seq, 0.3s) + 0.3s); }
.bar em { font-style: normal; font-size: 0.75rem; line-height: 1; color: var(--text-3); text-align: center; }
.js .stat:not(.is-visible) .bar i { transform: scaleY(0); }

.stat__viz--ring { width: 72px; }
.stat__viz--ring > svg { display: block; width: 72px; height: 72px; transform: rotate(-90deg); }
.rg-track, .rg-fill { fill: none; stroke-width: 5; }
.rg-track { stroke: rgba(255, 255, 255, 0.14); }
.rg-fill { stroke: var(--white); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 2; transition: stroke-dashoffset 1.6s var(--ease-out) var(--seq, 0.3s); }
.stat__viz--ring em { position: absolute; inset: 0; display: grid; place-items: center; }
.stat__viz--ring em .icon { width: 24px; height: 24px; stroke-width: 2; transition: opacity 0.4s var(--ease) calc(var(--seq, 0.3s) + 1.3s), scale 0.5s var(--ease-out) calc(var(--seq, 0.3s) + 1.3s); }
.js .stat:not(.is-visible) .rg-fill { stroke-dashoffset: 100; }
.js .stat:not(.is-visible) .stat__viz--ring em .icon { opacity: 0; scale: 0.4; }

@media (prefers-reduced-motion: no-preference) { .stat.is-visible .sp-dot::after { animation: ring-out 1.4s var(--ease-out) calc(var(--seq, 0.3s) + 1.8s) 3; } }

@media (max-width: 560px) {
  .stats--viz .stat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num viz" "lbl viz"; align-items: center; column-gap: 16px; padding: 18px 0; }
  .stats--viz .stat > strong { grid-area: num; align-self: end; }
  .stats--viz .stat > span { grid-area: lbl; align-self: start; }
  .stat__viz { grid-area: viz; width: 120px; height: 56px; margin: 0; }
  .stat__viz--line { max-width: none; }
  .stat__viz--bars { width: 120px; }
  .stat__viz--ring { width: 56px; }
  .stat__viz--ring > svg { width: 56px; height: 56px; }
}

/* =========================================================
   PROCESO: recorrido con ilustraciones y línea de progreso
   ========================================================= */
.steps--journey { --gap: clamp(20px, 3vw, 44px); gap: 0 var(--gap); }
.steps--journey .step {
  grid-template-areas: "stage" "rail" "title" "text";
  grid-template-rows: auto auto auto 1fr;
  gap: 0;
  padding: 0;
  border-top: 0;
}
.step__stage {
  grid-area: stage;
  position: relative;
  display: grid;
  aspect-ratio: 5 / 4;
  padding: clamp(12px, 1.2vw, 16px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: 0 26px 44px -34px rgba(10, 12, 16, 0.5);
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease-out);
}
.step__rail { grid-area: rail; display: flex; align-items: center; gap: 10px; margin: 22px 0 18px; }
.step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.6s var(--ease-out);
}
.step.is-on .step__node { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: 0 0 0 6px rgba(10, 12, 16, 0.07); }
.step__line { position: relative; flex: 1; height: 2px; margin-right: calc(-1 * var(--gap) + 8px); background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px); }
.step__line::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out) 0.3s; }
.step:last-child .step__line { display: none; }
.steps--journey .step__line::after, .steps--journey .step.is-on .step__line::after { transform: scaleX(var(--fill, 0)); transition: transform 0.2s linear; }
.steps--journey .step h3 { grid-area: title; font-size: 1.1875rem; }
.steps--journey .step > p { grid-area: text; margin-top: 6px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .step:hover .step__stage { transform: translateY(-4px); }
}

/* Ilustraciones: monocromo y reutilizan los mismos tokens */
.ill { display: grid; align-content: center; gap: 8px; width: 100%; min-width: 0; }
.ill-i { transition: opacity 0.5s var(--ease-out) calc(var(--i, 0) * 90ms + 0.25s), transform 0.6s var(--ease-out) calc(var(--i, 0) * 90ms + 0.25s); }
.js .step:not(.is-on) .ill-i { opacity: 0; transform: translateY(8px) scale(0.97); }

.ill--chat { gap: 7px; }
.ill .bub { width: fit-content; max-width: 86%; margin: 0; padding: 8px 12px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--mist); font-size: 0.75rem; line-height: 1.35; color: var(--ink); }
.ill .bub--r { justify-self: end; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--ink); color: var(--white); }
.ill .typing { display: flex; gap: 4px; width: fit-content; max-width: none; margin: 0; padding: 10px 12px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--mist); }
.typing b { width: 5px; height: 5px; border-radius: 50%; background: #7a8190; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .step.is-on .typing b { animation: typing 1.1s var(--ease) 1.1s 4; }
  .step.is-on .typing b:nth-child(2) { animation-delay: 1.25s; }
  .step.is-on .typing b:nth-child(3) { animation-delay: 1.4s; }
}

.ill--design { position: relative; align-content: center; gap: 10px; }
.dz-bar { display: flex; align-items: center; gap: 8px; }
.dz-logo { width: 18px; height: 18px; border-radius: 6px; background: var(--ink); }
.dz-l { width: 28px; height: 5px; border-radius: 3px; background: var(--line); }
.dz-logo + .dz-l { margin-left: auto; }
.dz-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 10px; }
.dz-copy { display: grid; gap: 6px; align-content: center; }
.dz-h { display: block; height: 11px; width: var(--w); border-radius: 5px; background: var(--ink); }
.dz-t { display: block; height: 6px; width: var(--w); border-radius: 3px; background: var(--line); }
.dz-btn { position: relative; display: inline-flex; align-items: center; justify-self: start; height: 22px; padding-inline: 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 0.6875rem; font-weight: 600; }
.dz-img { display: block; min-height: 72px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(160deg, #dfe2e8, #f1f2f5); }
.dz-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dz-row i { display: block; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #f1f2f5; }
.dz-cursor { position: absolute; left: calc(100% + 56px); top: 58px; width: 20px; height: 20px; pointer-events: none; color: var(--ink); filter: drop-shadow(0 2px 3px rgba(10, 12, 16, 0.35)); transition: left 1s var(--ease-out) 1.6s, top 1s var(--ease-out) 1.6s, opacity 0.4s var(--ease) 1.4s; }
.dz-cursor .icon { width: 20px; height: 20px; fill: var(--white); stroke-width: 1.6; }
.step.is-on .dz-cursor { left: 58%; top: 52%; }
.js .step:not(.is-on) .dz-cursor { opacity: 0; }
@keyframes dz-press { 50% { transform: scale(0.9); } }
@media (prefers-reduced-motion: no-preference) { .step.is-on .dz-btn { animation: dz-press 0.4s var(--ease) 2.7s 1; } }

.ill--dev { gap: 10px; }
.dv-code { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--ink); }
.dv-code i { display: block; height: 5px; width: var(--w); border-radius: 3px; background: rgba(255, 255, 255, 0.6); }
.dv-code i:nth-child(2) { background: rgba(255, 255, 255, 0.32); }
.dv-row { display: grid; grid-template-columns: 4.7rem minmax(0, 1fr) 18px; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.dv-bar { display: block; height: 6px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.dv-bar b { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; transition: transform 1s var(--ease-out) calc(var(--i, 0) * 260ms + 0.5s); }
.dv-row em { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--white); transition: transform 0.4s var(--ease-out) calc(var(--i, 0) * 260ms + 1.4s); }
.dv-row em .icon { width: 11px; height: 11px; stroke-width: 3; }
.js .step:not(.is-on) .dv-bar b { transform: scaleX(0); }
.js .step:not(.is-on) .dv-row em { transform: scale(0); }

.ill--live { position: relative; align-content: start; gap: 0; align-self: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lv-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding-inline: 9px; border-bottom: 1px solid var(--line); }
.lv-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.lv-url { display: flex; align-items: center; flex: 1; height: 16px; margin-left: 8px; padding-inline: 9px; border-radius: 999px; background: var(--mist); font-size: 0.6875rem; color: var(--text-3); }
.lv-body { display: grid; gap: 7px; padding: 12px; }
.lv-h { display: block; width: 62%; height: 11px; border-radius: 5px; background: var(--ink); }
.lv-t { display: block; width: 88%; height: 6px; border-radius: 3px; background: var(--line); }
.lv-t + .lv-t { width: 66%; }
.lv-img { display: block; height: 52px; border-radius: 9px; background: linear-gradient(160deg, #dfe2e8, #f1f2f5); }
.ill .lv-toast { position: absolute; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 8px; max-width: none; margin: 0; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--ink); box-shadow: 0 14px 24px -12px rgba(10, 12, 16, 0.6); font-size: 0.75rem; font-weight: 600; color: var(--white); white-space: nowrap; translate: -50% 0; transition: opacity 0.5s var(--ease-out) 1s, transform 0.7s var(--ease-out) 1s; }
.lv-ok { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--white); color: var(--ink); }
.lv-ok .icon { width: 11px; height: 11px; stroke-width: 3; }
.js .step:not(.is-on) .lv-toast { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: no-preference) { .step.is-on .lv-ok::after { animation: ring-out 1s var(--ease-out) 1.7s 2; } }

/* Tableta y móvil: línea de tiempo vertical */
@media (max-width: 900px) {
  .steps--journey .step__line::after, .steps--journey .step.is-on .step__line::after { transform: scaleY(var(--fill, 0)); }
  .steps--journey { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps--journey .step { grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "rail stage" "rail title" "rail text"; column-gap: 18px; padding-bottom: 34px; }
  .step:last-child { padding-bottom: 0; }
  .step__rail { flex-direction: column; align-items: center; gap: 0; margin: 0; }
  .step__line { width: 2px; height: auto; flex: 1; margin: 6px 0 -34px; background: repeating-linear-gradient(180deg, var(--line) 0 5px, transparent 5px 10px); }
  .step__line::after { transform: scaleY(0); transform-origin: top; }
  .step.is-on .step__line::after { transform: scaleY(1); }
  .step__stage { aspect-ratio: 16 / 10; max-width: 440px; }
  .steps--journey .step h3 { margin-top: 18px; }
}
@media (max-width: 560px) { .step__stage { aspect-ratio: 16 / 11; } }
@media (min-width: 561px) and (max-width: 900px) {
  .steps--journey .step {
    grid-template-columns: 38px minmax(0, min(360px, 46%)) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "rail stage ." "rail stage title" "rail stage text" "rail stage .";
    column-gap: 28px;
  }
  .step__stage { aspect-ratio: 16 / 10; max-width: none; }
  .steps--journey .step h3 { margin-top: 0; align-self: end; }
  .steps--journey .step > p { align-self: start; }
}

/* Sin JavaScript: el recorrido se muestra ya completo */
html:not(.js) .step__node { background: var(--ink); border-color: var(--ink); color: var(--white); }
html:not(.js) .step__line::after { transform: none; }

/* Movimiento reducido: todo aparece ya en su estado final, sin transiciones largas */
@media (prefers-reduced-motion: reduce) {
  .wf-i, .ill-i, .pv__panel, .tab::before, .step__line::after, .step__node, .dv-bar b, .dv-row em, .ill .lv-toast, .dz-cursor,
  .sp-line, .sp-area, .sp-dot, .sp-tip, .bar i, .rg-fill, .stars .icon, .stat__viz--ring em .icon,
  .tabs__pill, .work__shot, .work__shot img, .step__line::after, .step__stage, .steps--journey .step h3, .steps--journey .step > p { transition: none !important; }
  .pv__panel { transform: none !important; }
}

/* Resultados compacto: menos altura, la información sigue completa */
.results--rich { padding-block: clamp(26px, 3.2vw, 48px); row-gap: clamp(18px, 2.2vw, 28px); }
.results--rich .stats--viz { margin-top: 0; }
.results--rich .stats--viz .stat { padding-top: 20px; }
.results--rich > .fine { margin-top: -6px; }
@media (min-width: 901px) {
  .results--rich .stats--viz .stat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num viz" "lbl viz"; align-items: center; column-gap: 16px; padding-bottom: 2px; }
  .results--rich .stats--viz .stat > strong { grid-area: num; align-self: end; }
  .results--rich .stats--viz .stat > span { grid-area: lbl; align-self: start; }
  .results--rich .stat__viz { grid-area: viz; width: 132px; height: 56px; margin: 0; }
  .results--rich .stat__viz--line { max-width: none; }
  .results--rich .stat__viz--bars { width: 112px; }
  .results--rich .stat__viz--ring { width: 56px; }
  .results--rich .stat__viz--ring > svg { width: 56px; height: 56px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .results--rich .stat__viz { height: 56px; margin-bottom: 10px; }
}

/* =========================================================
   HERO NEGRO Y RENDIMIENTO
   Como Tarjetas: hero negro a todo el ancho, resto de la página claro con paneles oscuros "flotando".
   Regla de rendimiento: en el scroll no hay filtros, máscaras, mezclas ni desenfoques; las animaciones
   solo mueven transform y opacity.
   ========================================================= */
.hero--dark { background: #000; padding-bottom: 0; }
.hero--dark .hero__bg {
  background:
    radial-gradient(44% 72% at 76% 36%, rgba(118, 124, 138, 0.2), transparent 72%),
    radial-gradient(28% 46% at 95% 8%, rgba(255, 255, 255, 0.07), transparent 70%),
    url("../../_shared/img/waves.svg") 60% 70% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.hero--dark .hero__grid { padding-block: clamp(8px, 2vw, 32px) 0; }
.hero--dark .strip { margin-top: clamp(20px, 3vw, 44px); }
/* Luz suave detrás de la laptop: degradado normal, sin mix-blend-mode */
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 12% 8% 6% 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), transparent 72%);
  pointer-events: none;
}
/* El titular del hero entra solo con opacity y transform (sin filter: blur) */
.js .hero .display[data-reveal], .js .hero .display[data-reveal].is-visible { filter: none; }
/* Cabecera sin backdrop-filter: un fondo casi opaco evita recalcular el desenfoque en cada scroll */
.site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(247, 248, 250, 0.995); }
.site-header[data-tone="dark"].on-dark.is-scrolled { background: rgba(5, 7, 10, 0.99); }
/* Tarjetas de precio: la elevación es solo transform; la sombra ya no se anima */
.plan { transition: transform var(--t-slow) var(--ease-out), border-color var(--t-base) var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan:hover, .plan--featured:hover { box-shadow: none; }
}
/* Anillos de pulso: transform + opacity sobre un pseudo-elemento */
.wf-pulse, .lv-ok { position: relative; }
.wf-pulse::after, .sp-dot::after, .lv-ok::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   PREMIUM · materiales, contraste y movimiento
   Principios: solo transform y opacity en movimiento; el estado por defecto es el final;
   un gesto de lujo por zona; en táctil el "hover" se sustituye por scroll, giroscopio o un barrido al entrar.
   ========================================================= */

/* ---------- Tokens, contraste y jerarquía tipográfica ---------- */
:root {
  --text-3: #4b5361;      /* texto secundario con más aire de contraste en tamaños pequeños */
  --focus-2: #ffffff;
}
.is-dark { --focus-2: #05070a; }
/* Anillo de foco de doble capa: legible sobre claro y sobre oscuro */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-2); }

.hero--dark .display { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1.02; letter-spacing: -0.042em; }
.title { font-size: clamp(2rem, 1.2rem + 2.2vw, 2.85rem); }

/* Lienzo: un degradado casi imperceptible por tramos y un grano fino (capa fija: no se repinta al hacer scroll) */
body { background: linear-gradient(180deg, var(--paper) 0%, #f3f5f8 34%, var(--paper) 58%, #f2f4f7 100%); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background: url("../assets/img/grano.webp") 0 0 / 160px 160px;
}
/* Curvas de nivel de la marca, apenas visibles, detrás de los títulos claros */
#ejemplos, #precios { position: relative; isolation: isolate; }
#ejemplos::before, #precios::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: min(520px, 62vw);
  background: url("../assets/img/waves-ink.webp") 70% 0 / cover no-repeat;
  pointer-events: none;
}
/* El hero negro se funde con el lienzo claro: el degradado ocupa el relleno que ya existía (no añade altura) */
#soluciones { position: relative; }
#soluciones::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--sec);
  pointer-events: none;
  background: linear-gradient(to bottom, #000 0%, #07080a 7%, #16181b 17%, #3a3c40 30%, #787a7e 43%, #bcbdc0 55%, #e9eaec 65%, var(--paper) 74%);
}

/* ---------- Cabecera: marca que se compacta, progreso de lectura e indicador que se desliza ---------- */
.brand { padding-block: 4px; transform-origin: left center; transition: transform 0.5s var(--ease-out); }  /* el relleno mantiene un área táctil de 44 px aun compactada */
.site-header.is-scrolled .brand { transform: scale(0.9); }
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--text);
  opacity: 0;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.site-header.is-scrolled .scroll-progress { opacity: 0.55; }
/* Chrome y Edge: el progreso lo anima el compositor con el scroll del documento (cero JavaScript por fotograma) */
@supports (animation-timeline: scroll()) {
  .scroll-progress.is-native { transform: scaleX(0); animation: read-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes read-progress { to { transform: scaleX(1); } }
@media (min-width: 1081px) {
  .nav__list { position: relative; }
  .nav__ind {
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 1px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--text);
    opacity: 0;
    pointer-events: none;
    transform-origin: left;
    transform: translate3d(var(--x, 0px), 0, 0) scaleX(var(--w, 0));
    transition: transform 0.6s var(--ease-out), opacity 0.3s var(--ease);
  }
  .nav__list.has-ind .nav__ind { opacity: 1; }
  .nav__list.has-ind a[aria-current]::after { transform: scaleX(0); }
  .nav__list.has-ind a:not(.btn):not(.is-active) { color: var(--text-2); }
  .nav__list.has-ind a.is-active { color: var(--text); }
}
@media (max-width: 1080px) { .nav__ind { display: none; } }

/* ---------- Botones: brillo que cruza el primario y atracción magnética ---------- */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    translate 0.5s var(--ease-out);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(105deg, transparent 38%, var(--shine, rgba(255, 255, 255, 0.34)) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}
.is-dark .btn--primary::after, .plan--featured .btn--primary::after { --shine: rgba(10, 12, 16, 0.13); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after { transform: translateX(130%); transition: transform 0.9s var(--ease-out); }
}

/* ---------- Hero: objeto con peso (inclinación, reflejo en pantalla, luz en el suelo) ---------- */
.hero__device { position: relative; transform-origin: 50% 58%; }
.hero__device.is-live {
  transform: perspective(1200px) rotateX(calc(var(--ny, 0) * var(--tm, 3deg) * -1)) rotateY(calc(var(--nx, 0) * var(--tm, 3deg)));
  will-change: transform;
}
.hero__floor {
  position: absolute;
  z-index: 0;
  left: 10%;
  right: 14%;
  top: 83%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045) 62%, transparent);
  pointer-events: none;
}
/* Todo el brillo vive dentro de la pantalla de la laptop (recorte con la perspectiva real de la foto) */
.hero__screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(29.3% 22.5%, 73.2% 20.5%, 71.7% 64.5%, 25.7% 67.4%);
}
.hero__screen::before {
  content: "";
  position: absolute;
  left: 22%;
  top: 10%;
  width: 58%;
  height: 66%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08) 60%, transparent);
  translate: calc(var(--nx, 0) * 38%) calc(var(--ny, 0) * 38%);
  opacity: var(--go, 0);
}
.hero__screen::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 6%;
  width: 24%;
  height: 74%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.16) 36%, rgba(255, 255, 255, 0.46) 50%, rgba(255, 255, 255, 0.16) 64%, transparent);
  opacity: 0;
  transform: translate3d(-60%, 0, 0) skewX(-14deg);
}

/* Entrada orquestada: titular palabra a palabra -> lede -> botones -> laptop -> nota -> beneficios (menos de 1,5 s) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .display.is-split[data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .js .hero .display .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.05em 0.14em; margin: 0 -0.05em -0.14em; }
  .js .hero .display .wi { display: inline-block; transform: translate3d(0, 112%, 0); transition: transform 0.95s var(--ease-out) calc(var(--k, 0) * 48ms + 60ms); }
  .js .hero.is-intro .display .wi { transform: none; }
  .js .hero__copy .lede[data-reveal] { --d: 540ms !important; }
  .js .hero__copy .actions[data-reveal] { --d: 680ms !important; }
  .js .hero .strip__item:nth-child(1) { --d: 900ms !important; }
  .js .hero .strip__item:nth-child(2) { --d: 980ms !important; }
  .js .hero .strip__item:nth-child(3) { --d: 1060ms !important; }
  .js .hero .strip__item:nth-child(4) { --d: 1140ms !important; }
  .js .hero .strip__item:nth-child(5) { --d: 1220ms !important; }

  .js .hero.has-intro .hero__img { transform: scale(1.06); }
  .js .hero.has-intro.is-intro .hero__img { transform: none; transition: transform 1.9s var(--ease-out) 0.2s; }
  .js .hero.has-intro.is-intro .hero__screen::after { animation: sweep-screen 1.7s cubic-bezier(0.45, 0.05, 0.25, 1) 1.5s 1 both; }

  /* La nota se "escribe" y la flecha se dibuja */
  .js .hero.has-intro .hero__note span { clip-path: inset(-10% 100% -10% 0); }
  .js .hero.has-intro.is-intro .hero__note span { clip-path: inset(-10% -2% -10% 0); transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1) 1s; }
  .js .hero.has-intro .hero__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .hero.has-intro.is-intro .hero__arrow path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease-out) 2.1s; }
  .js .hero.has-intro.is-intro .hero__arrow path + path { transition-delay: 2.8s; }
}

/* ---------- Cintillo de beneficios: el icono dibuja su trazo y la celda se ilumina ---------- */
.hero .strip__item { position: relative; isolation: isolate; }
.hero .strip__item::before {
  content: "";
  position: absolute;
  inset: 10px -6px;
  z-index: -1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
@media (hover: hover) { .hero .strip__item:hover::before { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .strip__item.is-visible .icon { animation: icon-draw 1.1s var(--ease-out) calc(var(--d, 0ms) + 0.3s) backwards; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero .strip__item:hover .icon { animation: icon-draw 0.9s var(--ease-out) backwards; }
}

/* ---------- Paneles oscuros: canto iluminado, volumen y un resplandor con dos núcleos y algo de inercia ---------- */
.panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 50px 80px -58px rgba(10, 12, 16, 0.5);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .panel[data-spot]::after {
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.075), transparent 17%),
      radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent);
    transition: opacity 0.5s var(--ease), transform 0.55s var(--ease-out);
  }
}

/* ---------- Soluciones ---------- */
.tabs { position: relative; }
.tabs__pill {
  position: absolute;
  left: -14px;
  right: -14px;
  top: 0;
  height: var(--h, 68px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translate3d(0, var(--y, 0px), 0);
  pointer-events: none;
}
.tabs.is-placed .tabs__pill { transition: transform 0.65s var(--ease-out), height 0.5s var(--ease-out); }
.tabs.has-pill .tab[aria-selected="true"]::before { opacity: 0; }
.tab[aria-selected="true"] .tab__n { font-weight: 650; }

.pv { position: relative; }
.pv__trace {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 72px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.5);
  offset-path: inset(0 round 18px);
  offset-rotate: auto;
  offset-distance: 0%;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pv.is-trace .pv__trace { animation: trace 1.5s cubic-bezier(0.5, 0, 0.2, 1) 1 both; }
  /* Una pieza clave de cada boceto se enciende en blanco puro: el punto focal */
  .is-active .wf-btn, .is-active .wf-chip.is-on, .is-active .wf-cal__g .is-on, .is-active .is-hot .wf-add, .is-active .wf-stat:nth-child(3) {
    animation: key-glow 1.2s var(--ease-out) 1s backwards;
  }
}
.wf-btn, .wf-chip.is-on, .wf-cal__g .is-on, .is-hot .wf-add { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 8px 24px -8px rgba(255, 255, 255, 0.5); }
.wf-stat:nth-child(3) { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px -10px rgba(255, 255, 255, 0.35); }

/* ---------- Ejemplos: marco con etiqueta, destello y reflejo diagonal ---------- */
.frame__tag {
  display: inline-flex;
  align-items: center;
  height: 15px;
  margin-left: 8px;
  padding-inline: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.64);
  white-space: nowrap;
}
.work__shot::before, .work__shot::after { content: ""; position: absolute; z-index: 2; pointer-events: none; }
.work__shot::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 65%, transparent);
  opacity: 0;
  transform: translate3d(-130%, 0, 0) skewX(-14deg);
}
.work__shot::after {
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 60%, transparent);
  translate: calc(var(--nx, 0) * 52%) calc(var(--ny, 0) * 52%);
  opacity: var(--go, 0);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work:hover .work__shot::before { animation: sweep-card 1.2s var(--ease-out) 1 both; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .work.is-seen .work__shot::before { animation: sweep-card 1.4s var(--ease-out) 0.15s 1 both; }
  .work:active .work__shot { scale: 0.985; }
}
.cursor-tag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 14px 28px -12px rgba(10, 12, 16, 0.55);
  pointer-events: none;
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.2s var(--ease), scale 0.35s var(--ease-out);
}
.cursor-tag.is-on { opacity: 1; scale: 1; }

/* ---------- Resultados: etiqueta del valor sobre el punto final y comillas como elemento gráfico ---------- */
.sp-tip {
  position: absolute;
  right: 6px;
  top: -26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 0.5s var(--ease) calc(var(--seq, 0.3s) + 1.7s), transform 0.6s var(--ease-out) calc(var(--seq, 0.3s) + 1.7s);
}
.js .stat:not(.is-visible) .sp-tip { opacity: 0; transform: translateY(6px); }
.results__quote { position: relative; }
.results .quote blockquote { position: relative; }
.results .quote blockquote::before {
  content: "\201C";
  position: absolute;
  z-index: -1;
  right: -0.02em;
  top: -0.66em;
  font-size: clamp(6.5rem, 9vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
}
/* Retrato en blanco y negro cuando llegue la foto real (build.py: "photo" en el JSON) */
.avatar--photo { overflow: hidden; background: var(--ink); }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }

/* ---------- Proceso: el paso en curso se eleva; los demás bajan de contraste mientras dura el recorrido ---------- */
.step__stage { transition: transform var(--t-slow) var(--ease-out), opacity 0.5s var(--ease), box-shadow 0.6s var(--ease-out); }
.steps--journey .step h3, .steps--journey .step > p { transition: opacity 0.5s var(--ease); }
.steps--journey.is-playing .step.is-on:not(.is-current) :is(.step__stage, h3, p) { opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .steps--journey .step.is-current .step__stage { transform: translate3d(0, -6px, 0); box-shadow: 0 34px 48px -30px rgba(10, 12, 16, 0.62); }
}

/* ---------- Precios: "desde" encima del número, reflejo que sigue al puntero y borde con brillo ---------- */
.plan__price { position: relative; margin-top: 14px; }
.plan__from { position: absolute; left: 0; top: -1.45em; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var(--text-3); }
.plan--featured { overflow: clip; isolation: isolate; }
/* Borde con brillo sin máscara: el pseudoelemento va detrás del contenido; su relleno (padding-box) tapa el interior
   con el mismo negro del plan y deja ver la luz solo en el anillo de 1 px, dentro del borde del plan */
.plan--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(var(--night), var(--night)) padding-box,
    radial-gradient(230px circle at calc(50% + var(--nx, 0) * 50%) calc(50% + var(--ny, 0) * 50%), rgba(255, 255, 255, calc(0.6 * var(--go, 0))), rgba(255, 255, 255, calc(0.1 * var(--go, 0))) 55%, transparent 80%) border-box,
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)) border-box;
}
.plan--featured::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  margin: -75% 0 0 -75%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 55%, transparent);
  translate: calc(var(--nx, 0) * 34%) calc(var(--ny, 0) * 56%);
  opacity: var(--go, 0);
}
/* En táctil no hay puntero: un solo barrido de luz cuando el plan entra en pantalla */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .plan--featured::after {
    left: 0;
    top: 0;
    width: 55%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.1) 60%, transparent);
    translate: none;
    opacity: 0;
    transform: translate3d(-130%, 0, 0) skewX(-14deg);
  }
  .plan--featured.is-seen::after { animation: sweep-card 1.6s var(--ease-out) 0.25s 1 both; }
}

/* ---------- Preguntas frecuentes: la pregunta abierta se ilumina y la respuesta entra con un fundido ---------- */
.faq__item { position: relative; isolation: isolate; }
.faq__item::before {
  content: "";
  position: absolute;
  inset: 0 -16px;
  z-index: -1;
  border-radius: 14px;
  background: rgba(10, 12, 16, 0.035);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.faq__item.is-open::before { opacity: 1; }
.js .faq__panel p { opacity: 0; transform: translateY(-6px); transition: opacity 0.35s var(--ease), transform 0.6s var(--ease-out); }
.js .faq__item.is-open .faq__panel p { opacity: 1; transform: none; transition-delay: 0.12s; }

/* ---------- Contacto: etiqueta activa, línea de luz en el campo, envío con estado y confirmación dibujada ---------- */
.ctl { position: relative; display: block; }
.ctl__line {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.5);
  offset-path: inset(0 round 12px);
  offset-rotate: auto;
  offset-distance: 0%;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ctl:focus-within .ctl__line { animation: trace 1.6s cubic-bezier(0.5, 0, 0.2, 1) 1 both; }
  .field label { transition: color var(--t-base) var(--ease), transform 0.5s var(--ease-out); }
  .form .btn[type="submit"][disabled]::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    opacity: 0.5;
    animation: send-bar 1.1s var(--ease) infinite;
  }
  .form.is-sent .form__ok .icon { animation: icon-draw 0.9s var(--ease-out) 0.15s backwards, ok-in 0.6s var(--ease-out) backwards; }
  .form.is-sent .form__ok strong { animation: ok-in 0.6s var(--ease-out) 0.25s backwards; }
  .form.is-sent .form__ok p { animation: ok-in 0.6s var(--ease-out) 0.35s backwards; }
}
.field label { color: var(--d-text-2); }
.field:focus-within label { color: #fff; transform: translateX(2px); }
.form .btn[type="submit"][disabled] { opacity: 1; }

/* ---------- Pie: marca de agua que se revela al llegar ---------- */
.site-footer { position: relative; isolation: isolate; overflow: clip; }
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(-90px, -3vw, -24px);
  bottom: -30%;
  width: clamp(220px, 30vw, 430px);
  aspect-ratio: 1;
  background: url("../../_shared/img/logo-negro.png") center / contain no-repeat;
  opacity: 0.04;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .site-footer::before { opacity: 0; transform: translateY(48px) rotate(-4deg); transition: opacity 1.4s var(--ease-out), transform 1.6s var(--ease-out); }
  .js .site-footer.is-seen::before { opacity: 0.04; transform: none; }
}

/* ---------- Táctil: áreas cómodas (44 px) sin cambiar el diseño ---------- */
@media (pointer: coarse) {
  .footer__col a, .footer__col span { padding-block: 11px; }
  .footer__col a::after { bottom: 8px; }
  .crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .btn:active { transition-duration: 0.08s; }
}

/* ---------- Fotogramas ---------- */
@keyframes sweep-card {
  0% { opacity: 0; transform: translate3d(-130%, 0, 0) skewX(-14deg); }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(330%, 0, 0) skewX(-14deg); }
}
@keyframes sweep-screen {
  0% { opacity: 0; transform: translate3d(-60%, 0, 0) skewX(-14deg); }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(340%, 0, 0) skewX(-14deg); }
}
@keyframes trace {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  82% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes icon-draw {
  from { stroke-dasharray: 100; stroke-dashoffset: 100; }
  to { stroke-dasharray: 100; stroke-dashoffset: 0; }
}
@keyframes key-glow { from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes ok-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes send-bar { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* El destello que recorre un marco usa offset-path; si el navegador no lo soporta, simplemente no se muestra */
.pv__trace, .ctl__line { display: none; }
@supports (offset-path: inset(0 round 12px)) {
  .pv__trace, .ctl__line { display: block; }
}

/* Movimiento reducido: sin brillos que viajen, sin atracción, sin cursor y sin barra de envío animada */
@media (prefers-reduced-motion: reduce) {
  .cursor-tag, .pv__trace, .ctl__line { display: none !important; }
  .scroll-progress, .nav__ind, .brand { transition: none; }
  .form .btn[type="submit"][disabled] { opacity: 0.55; }
}