/* SAMA Devs · sitio v2
   Escenas cinemáticas sobre un campo de partículas. Identidad del manual de marca:
   isotipo de dos barras, azul #2563EB · índigo #4F46E5 · violeta #8B5CF6, neutros
   #0F172A / #111827 / #F8FAFC / #E5E7EB, Manrope + Inter. Modo claro y oscuro. */

/* ===== Tokens: claro (por defecto) ===== */
:root {
  color-scheme: light;
  --bg: #F8FAFC;
  --bg-rgb: 248, 250, 252;
  --superficie: #FFFFFF;
  --superficie-v: rgba(255, 255, 255, .96);
  --superficie-2: #F1F5F9;
  --borde: #E5E7EB;
  --borde-2: #CBD5E1;
  --texto: #0F172A;
  --texto-2: #334155;
  --tenue: #64748B;
  --acento: #4338CA;
  --grad: linear-gradient(120deg, #0A8CFF 0%, #4F46E5 52%, #8B5CF6 100%);
  --grad-tx: linear-gradient(100deg, #1D63F0 0%, #4F46E5 50%, #7C3AED 100%);
  --grad-solido: linear-gradient(120deg, #2563EB 0%, #4F46E5 55%, #7C3AED 100%);
  --boton: #4F46E5;
  --boton-hover: #4338CA;
  --boton-tx: #FFFFFF;
  --chip: rgba(79, 70, 229, .08);
  --chip-borde: rgba(79, 70, 229, .3);
  --ok: #047857;
  --aviso: #B45309;
  --error: #B91C1C;
  --sombra: 0 30px 70px -44px rgba(15, 23, 42, .45);
  --cabecera: rgba(248, 250, 252, .94);
  --vineta: radial-gradient(130% 95% at 50% 42%, rgba(248, 250, 252, 0) 62%, rgba(226, 232, 240, .5) 100%);
  --luna: inline;
  --sol: none;

  --display: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --margen: max(16px, 6vw);
  --barra: 64px;
  --t-xxl: clamp(2.6rem, .8rem + 5.6vw, 6.4rem);
  --t-xl: clamp(2.2rem, .8rem + 4.4vw, 5.4rem);
  --t-l: clamp(1.8rem, .9rem + 2.8vw, 3.8rem);
  --t-m: clamp(1.3rem, 1rem + 1vw, 1.95rem);
  --t-cl: clamp(1.02rem, .95rem + .35vw, 1.2rem);
}

/* ===== Tokens: oscuro (sistema o elección explícita) ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0F1E;
    --bg-rgb: 10, 15, 30;
    --superficie: #111827;
    --superficie-v: rgba(17, 24, 39, .94);
    --superficie-2: #0F172A;
    --borde: #1E293B;
    --borde-2: #334155;
    --texto: #F8FAFC;
    --texto-2: #CBD5E1;
    --tenue: #94A3B8;
    --acento: #A5B4FC;
    --grad-tx: linear-gradient(100deg, #3FA2FF 0%, #818CF8 50%, #B794FF 100%);
    --boton: #4F46E5;
    --boton-hover: #6366F1;
    --boton-tx: #FFFFFF;
    --chip: rgba(129, 140, 248, .12);
    --chip-borde: rgba(129, 140, 248, .42);
    --ok: #34D399;
    --aviso: #FBBF24;
    --error: #F87171;
    --sombra: 0 30px 80px -40px rgba(0, 0, 0, .75);
    --cabecera: rgba(10, 15, 30, .92);
    --vineta: radial-gradient(130% 95% at 50% 42%, rgba(10, 15, 30, 0) 58%, rgba(3, 6, 14, .62) 100%);
    --luna: none;
    --sol: inline;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0F1E;
  --bg-rgb: 10, 15, 30;
  --superficie: #111827;
  --superficie-v: rgba(17, 24, 39, .94);
  --superficie-2: #0F172A;
  --borde: #1E293B;
  --borde-2: #334155;
  --texto: #F8FAFC;
  --texto-2: #CBD5E1;
  --tenue: #94A3B8;
  --acento: #A5B4FC;
  --grad-tx: linear-gradient(100deg, #3FA2FF 0%, #818CF8 50%, #B794FF 100%);
  --boton: #4F46E5;
  --boton-hover: #6366F1;
  --boton-tx: #FFFFFF;
  --chip: rgba(129, 140, 248, .12);
  --chip-borde: rgba(129, 140, 248, .42);
  --ok: #34D399;
  --aviso: #FBBF24;
  --error: #F87171;
  --sombra: 0 30px 80px -40px rgba(0, 0, 0, .75);
  --cabecera: rgba(10, 15, 30, .92);
  --vineta: radial-gradient(130% 95% at 50% 42%, rgba(10, 15, 30, 0) 58%, rgba(3, 6, 14, .62) 100%);
  --luna: none;
  --sol: inline;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--texto); scroll-padding-top: var(--barra); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Tipografía ===== */
.titular-xxl { font-family: var(--display); font-size: var(--t-xxl); font-weight: 800; letter-spacing: -.045em; line-height: .95; text-wrap: balance; }
.titular-xl { font-family: var(--display); font-size: var(--t-xl); font-weight: 800; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.titular-l { font-family: var(--display); font-size: var(--t-l); font-weight: 800; letter-spacing: -.035em; line-height: 1.03; text-wrap: balance; }
.antetitulo { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.texto { font-size: var(--t-cl); color: var(--texto-2); max-width: 36rem; text-wrap: pretty; }
.rotulo { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--tenue); }
.acento, .acento .palabra { background: var(--grad-tx); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* máscaras de los titulares cinéticos (las crea el JS) */
.mascara { display: inline-block; overflow: clip; vertical-align: top; padding: .16em .04em .14em; margin: -.16em -.04em -.14em; }
.palabra { display: inline-block; }

/* ===== Botones y enlaces ===== */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid transparent; background: var(--boton); color: var(--boton-tx); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; box-shadow: 0 12px 30px -16px rgba(79, 70, 229, .9); transition: background-color .2s, transform .2s, border-color .2s; }
.boton:hover { background: var(--boton-hover); transform: translateY(-1px); }
.boton-chico { min-height: 40px; padding: 0 1.05rem; font-size: .92rem; }
.boton-borde { background: transparent; color: var(--texto); border-color: var(--borde-2); box-shadow: none; }
.boton-borde:hover { background: var(--chip); border-color: var(--acento); }
.enlace-fino { color: var(--texto); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--chip-borde); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.enlace-fino:hover { color: var(--acento); border-bottom-color: var(--acento); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

/* ===== Capas fijas: campo de partículas y viñeta ===== */
#campo { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; pointer-events: none; }
.vineta { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--vineta); }
html:not(.motion) #campo { opacity: .6; }
main, .pie { position: relative; z-index: 1; }
.campo-etiquetas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.campo-etiquetas span { position: absolute; left: 0; top: 0; opacity: 0; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); white-space: nowrap; will-change: transform, opacity; }
.campo-etiquetas span.activa { color: var(--texto); }

/* ===== Cabecera ===== */
.saltar { position: fixed; left: 16px; top: -80px; z-index: 40; padding: .6rem 1rem; border-radius: 8px; background: var(--texto); color: var(--bg); font-weight: 700; }
.saltar:focus { top: 12px; }
.cabecera { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 30; height: var(--barra); padding-inline: var(--margen); display: flex; align-items: center; gap: 1.4rem; background: var(--cabecera); border-bottom: 1px solid var(--borde); }
.marca-enlace { display: inline-flex; align-items: center; gap: .65rem; color: var(--texto); text-decoration: none; }
.isotipo { display: block; flex: none; width: 17px; height: 36px; overflow: visible; }
.marca-texto { display: grid; gap: .3rem; }
.marca-texto b { font-family: var(--display); font-size: 1.2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.marca-texto small { font-size: .54rem; font-weight: 600; line-height: 1; letter-spacing: .34em; text-transform: uppercase; color: var(--texto-2); }
.cabecera nav { display: flex; gap: 1.7rem; margin-left: auto; }
.cabecera nav a { color: var(--texto-2); font-size: .95rem; font-weight: 500; text-decoration: none; transition: color .2s; }
.cabecera nav a:hover { color: var(--texto); }
.tema { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--borde-2); background: transparent; color: var(--texto); cursor: pointer; transition: background-color .2s, border-color .2s; }
.tema:hover { background: var(--chip); border-color: var(--acento); }
.tema svg { width: 18px; height: 18px; }
.icono-luna { display: var(--luna); }
.icono-sol { display: var(--sol); }
@media (max-width: 759px) {
  .cabecera { gap: .75rem; }
  .cabecera nav { display: none; }
  .tema { margin-left: auto; }
}

/* ===== Escenas: flujo normal por defecto; fijadas solo con .motion ===== */
.escena { position: relative; }
.pin { position: relative; padding: calc(var(--barra) + 8svh) var(--margen) 10svh; overflow: clip; }
html.motion .escena.fija { height: var(--alto); }
html.motion .escena.fija > .pin { position: sticky; top: 0; height: 100svh; }
.hero { --alto: 180svh; }
.forma { --alto: 470svh; }
.servicios { --alto: 320svh; }
.proceso { --alto: 430svh; }

/* ===== 1. Portada ===== */
.hero .pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: max(36px, 9svh); }
.hero-texto { position: relative; isolation: isolate; display: grid; gap: 1.4rem; max-width: min(50rem, 58vw); }
.hero-texto::before { content: ""; position: absolute; inset: -26% -30% -22% -22%; z-index: -1; background: radial-gradient(closest-side, rgba(var(--bg-rgb), .85), rgba(var(--bg-rgb), .5) 62%, rgba(var(--bg-rgb), 0)); pointer-events: none; }
.hero h1 .l { display: block; }
.hero-sub { max-width: 34rem; font-size: var(--t-cl); color: var(--texto-2); text-wrap: pretty; }
.indicador { position: absolute; right: var(--margen); bottom: max(28px, 6svh); display: flex; align-items: center; gap: .7rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.indicador-linea { width: 1px; height: 46px; background: linear-gradient(var(--acento), rgba(var(--bg-rgb), 0)); transform-origin: top; }
html.motion .indicador-linea { animation: gotear 2.6s cubic-bezier(.6, 0, .2, 1) infinite; }
html.motion .hero h1 .palabra { animation: subir .95s cubic-bezier(.2, .75, .1, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
html.motion .hero .antetitulo, html.motion .hero-sub, html.motion .hero .acciones { animation: aparecer .9s cubic-bezier(.2, .75, .1, 1) both; }
html.motion .hero .antetitulo { animation-delay: .05s; }
html.motion .hero-sub { animation-delay: .6s; }
html.motion .hero .acciones { animation-delay: .75s; }
@keyframes gotear { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes subir { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (max-width: 759px) {
  .hero-texto { max-width: none; gap: 1.1rem; }
  .hero h1 .l { display: inline; }
  .indicador { display: none; }
}

/* ===== 2. Ideas · Código · Datos ===== */
.pasos { display: grid; gap: 12svh; max-width: 36rem; }
.paso { display: grid; gap: 1.05rem; align-content: start; }
.paso-final .titular-xl { max-width: 12ch; }
.forma-pista { display: none; }
html.motion .forma .pin::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg-rgb), .72) 34%, rgba(var(--bg-rgb), 0) 50%); }
html.motion .pasos { position: absolute; left: var(--margen); top: var(--barra); bottom: 0; width: min(34rem, 40vw); max-width: none; gap: 0; align-items: center; }
html.motion .paso { grid-area: 1 / 1; }
html.motion .forma-pista { position: absolute; left: var(--margen); bottom: 6svh; display: flex; gap: 1.2rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.forma-pista li { display: flex; align-items: center; gap: .55rem; transition: color .3s; }
.forma-pista li::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--borde-2); }
.forma-pista li.activa { color: var(--texto); }
.forma-pista li.activa::before { background: var(--grad); }
@media (max-width: 759px) {
  html.motion .forma .pin::before { background: linear-gradient(0deg, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .84) 46%, rgba(var(--bg-rgb), 0) 58%); }
  html.motion .pasos { left: 16px; right: 16px; width: auto; top: auto; bottom: 62px; align-items: end; }
  html.motion .forma .titular-l { font-size: 1.95rem; }
  html.motion .forma .titular-xl { font-size: 2.35rem; }
  html.motion .forma .texto { font-size: .98rem; }
  html.motion .forma-pista { left: 16px; bottom: 26px; }
}

/* ===== 3. Servicios ===== */
.pista { display: grid; gap: 20px; }
.pista-intro { display: grid; gap: 1rem; max-width: 30rem; align-content: center; }
.panel { display: grid; gap: 1.6rem; padding: clamp(1.25rem, 2.4vw, 2.5rem); border-radius: 24px; border: 1px solid var(--borde); background: var(--superficie-v); box-shadow: var(--sombra); }
.panel-texto { display: grid; gap: .9rem; align-content: center; }
.panel h3 { font-family: var(--display); font-size: var(--t-m); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.panel-texto > p:not(.rotulo) { max-width: 30rem; color: var(--texto-2); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .32rem .72rem; border-radius: 999px; border: 1px solid var(--chip-borde); background: var(--chip); color: var(--texto); font-size: .82rem; font-weight: 500; }
.ad { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.ad dt { margin-bottom: .2rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--tenue); }
.ad dd { font-size: .95rem; line-height: 1.35; }
.ad .antes dd { color: var(--tenue); text-decoration: line-through; text-decoration-color: var(--borde-2); }
.ad .ahora dd { color: var(--acento); font-weight: 600; }
.panel-visual { display: grid; place-items: center; min-width: 0; }
.ejemplo { flex: none; padding: .12rem .5rem; border-radius: 999px; border: 1px dashed var(--borde-2); font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }

/* maqueta: ventana de aplicación */
.ventana { width: min(28rem, 100%); overflow: hidden; border-radius: 16px; border: 1px solid var(--borde-2); background: var(--superficie); box-shadow: var(--sombra); }
.ventana-barra { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-bottom: 1px solid var(--borde); background: var(--superficie-2); }
.puntos { display: flex; gap: 5px; }
.puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--borde-2); }
.ventana-titulo { flex: 1; min-width: 0; font-family: var(--mono); font-size: .72rem; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ventana-cuerpo { display: grid; grid-template-columns: 3rem minmax(0, 1fr); }
.ventana-lado { display: grid; align-content: start; gap: .6rem; padding: .95rem .7rem; border-right: 1px solid var(--borde); }
.ventana-lado i { height: 6px; border-radius: 3px; background: var(--borde-2); }
.ventana-lado i:first-child { background: var(--grad); }
.tabla { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tabla th { padding: .7rem .8rem .45rem; font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--tenue); }
.tabla td { padding: .55rem .8rem; border-top: 1px solid var(--borde); color: var(--texto); }
.tabla th:nth-child(2), .tabla td:nth-child(2) { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado.ok { color: var(--ok); }
.estado.aviso { color: var(--aviso); }
.estado.agotado { color: var(--error); }

/* maqueta: chat con IA */
.chat { width: min(22rem, 100%); display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px; border-radius: 28px; border: 1px solid var(--borde-2); background: var(--superficie); box-shadow: var(--sombra); }
.chat-cab { display: flex; align-items: center; gap: .6rem; padding: .3rem .3rem .7rem; border-bottom: 1px solid var(--borde); }
.avatar { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #0F172A; border: 1px solid var(--borde-2); }
.avatar svg { width: 9px; height: 19px; overflow: visible; }
.chat-cab b { display: block; font-size: .9rem; line-height: 1.2; }
.chat-cab div span { font-size: .7rem; color: var(--tenue); }
.chat-cab .ejemplo { margin-left: auto; }
.burbuja { max-width: 88%; padding: .6rem .8rem; border-radius: 16px; font-size: .86rem; line-height: 1.45; }
.burbuja-yo { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--boton); color: #FFFFFF; }
.burbuja-ia { align-self: flex-start; border-bottom-left-radius: 5px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); }
.ref { padding: .04em .3em; border-radius: 5px; border: 1px solid var(--chip-borde); background: var(--chip); font-family: var(--mono); font-size: .78em; font-weight: 600; color: var(--acento); white-space: nowrap; }
.burbuja-fuentes { display: block; margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--borde); font-family: var(--mono); font-size: .68rem; color: var(--tenue); }

/* maqueta: flujo automatizado */
.flujo { width: min(24rem, 100%); display: grid; gap: 12px; }
.flujo-paso { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--borde-2); background: var(--superficie); }
.flujo-paso:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem + 14px); bottom: -13px; width: 2px; height: 12px; background: var(--grad); }
.flujo-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--chip); color: var(--acento); font-family: var(--mono); font-size: .75rem; font-weight: 600; }
.flujo-paso b { display: block; font-size: .92rem; line-height: 1.25; }
.flujo-paso .det { display: block; font-family: var(--mono); font-size: .7rem; color: var(--tenue); }
.flujo-hora { font-family: var(--mono); font-size: .7rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.flujo-ok { font-family: var(--mono); font-size: .7rem; color: var(--ok); white-space: nowrap; }
.flujo-paso.aviso { border-color: var(--acento); background: var(--chip); }
.pulso { width: 11px; height: 11px; border-radius: 50%; background: var(--boton); box-shadow: 0 0 0 4px var(--chip-borde); }
html.motion .pulso { animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, .55); } 100% { box-shadow: 0 0 0 14px rgba(79, 70, 229, 0); } }

/* maqueta: tablero de datos */
.tablero { width: min(28rem, 100%); display: grid; gap: .8rem; padding: 1rem 1.1rem 1.1rem; border-radius: 18px; border: 1px solid var(--borde-2); background: var(--superficie); box-shadow: var(--sombra); }
.tablero-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.kpi { display: grid; gap: .15rem; padding: .6rem .75rem; border-radius: 12px; border: 1px solid var(--borde); }
.kpi span { font-size: .72rem; color: var(--tenue); }
.kpi b { font-family: var(--display); font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.grafico { display: block; width: 100%; height: auto; }
.grafico .rejilla line, .arte-linea .rejilla line { stroke: var(--borde); stroke-width: 1; }
.grafico .barras rect { fill: url(#g-barras); }
.grafico .barras .barra-fin { fill: var(--boton); }
.grafico text { font-family: var(--mono); font-size: 9px; fill: var(--tenue); text-anchor: middle; }

@media (min-width: 760px) {
  .panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
  html.motion .servicios.fija > .pin { display: flex; align-items: center; padding: var(--barra) 0 0; }
  html.motion .pista { display: flex; align-items: center; gap: clamp(2rem, 4vw, 4.5rem); width: max-content; padding-inline: var(--margen); }
  html.motion .pista-intro { flex: none; width: min(27rem, 30vw); }
  html.motion .panel { flex: none; width: min(64rem, 72vw); height: min(36rem, 74svh); }
}
@media (max-width: 759px) {
  html.motion .escena.fija.servicios { height: auto; }
  html.motion .escena.fija.servicios > .pin { position: relative; height: auto; }
  .ventana-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ventana-lado { display: none; }
  .ad { grid-template-columns: 1fr 1fr; }
}

/* ===== 4. Proceso ===== */
.proceso-cabeza { display: grid; gap: 1rem; max-width: 40rem; }
.fases-bloque { max-width: 40rem; margin-top: 2.5rem; }
.fases-pista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 1rem; }
.fases-pista i { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: var(--borde); }
.fases-pista b { display: block; height: 100%; background: var(--grad); transform-origin: left center; transform: scaleX(var(--k, 1)); }
html:not(.motion) .fases-pista { display: none; }
.fases { display: grid; gap: 1.6rem; }
.fase { display: grid; gap: .5rem; align-content: start; }
.fase-n { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.fase-t { font-family: var(--display); font-size: var(--t-m); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.fase > p:not(.fase-res) { max-width: 32rem; color: var(--texto-2); font-size: 1.02rem; }
.fase-res { font-size: .95rem; font-weight: 600; }
.fase-res span { display: block; margin-bottom: .1rem; font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--tenue); }
html.motion .proceso .pin::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg-rgb), .7) 36%, rgba(var(--bg-rgb), 0) 52%); }
html.motion .proceso-cabeza { position: absolute; left: var(--margen); top: calc(var(--barra) + 6svh); width: min(34rem, 44vw); }
html.motion .fases-bloque { position: absolute; left: var(--margen); bottom: 8svh; width: min(32rem, 42vw); margin: 0; }
html.motion .fase { grid-area: 1 / 1; }
html.motion .fases { gap: 0; }
@media (max-width: 759px) {
  html.motion .proceso .pin::before { background: linear-gradient(180deg, rgba(var(--bg-rgb), .92) 0%, rgba(var(--bg-rgb), .6) 34%, rgba(var(--bg-rgb), 0) 42%, rgba(var(--bg-rgb), 0) 62%, rgba(var(--bg-rgb), .9) 72%); }
  html.motion .proceso-cabeza { left: 16px; right: 16px; width: auto; top: calc(var(--barra) + 3svh); }
  html.motion .proceso-cabeza .texto { display: none; }
  html.motion .proceso .titular-l { font-size: 1.95rem; }
  html.motion .fases-bloque { left: 16px; right: 16px; width: auto; bottom: 4svh; }
  html.motion .fase-t { font-size: 1.35rem; }
  html.motion .fase > p:not(.fase-res) { font-size: .95rem; }
}

/* ===== 5. Proyectos ===== */
.contenedor { max-width: 76rem; margin-inline: auto; }
.lab { padding: 18svh var(--margen) 14svh; }
.lab-cabeza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.5rem 3rem; align-items: end; }
.lab-cabeza > div { display: grid; gap: 1rem; }
.conceptos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 3rem; }
.concepto { display: grid; overflow: hidden; border-radius: 22px; border: 1px solid var(--borde); background: var(--superficie-v); box-shadow: var(--sombra); }
.concepto-arte { height: 210px; display: flex; align-items: center; justify-content: center; padding: 1.2rem; border-bottom: 1px solid var(--borde); background: radial-gradient(ellipse at 50% 45%, var(--chip), transparent 70%); }
.arte-flujo span { padding: .6rem .85rem; border-radius: 12px; border: 1px solid var(--borde-2); background: var(--superficie); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.arte-flujo span.activo { border-color: transparent; background: var(--grad-solido); color: #FFFFFF; }
.arte-flujo i { flex: none; width: 28px; height: 2px; background: var(--grad); }
.arte-linea svg { width: 100%; height: 100%; }
.arte-linea .punto-fin { fill: var(--superficie); stroke: #8B5CF6; stroke-width: 3; }
.concepto-cuerpo { display: grid; gap: .55rem; padding: 1.4rem 1.5rem 1.6rem; }
.concepto h3 { font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.concepto-cuerpo > p:last-child { color: var(--texto-2); }
.nota { margin-top: 1.2rem; font-size: .88rem; color: var(--tenue); }
@media (max-width: 759px) {
  .lab-cabeza, .conceptos { grid-template-columns: minmax(0, 1fr); }
  .arte-flujo span { padding: .5rem .6rem; font-size: .78rem; }
  .arte-flujo i { width: 14px; }
}

/* ===== 6. Sobre mí ===== */
.sobre { padding: 14svh var(--margen); }
.sobre-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; min-height: 84svh; }
.sobre-texto { position: relative; isolation: isolate; display: grid; gap: 1.1rem; }
.valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; margin-top: .6rem; padding-top: 1.4rem; border-top: 1px solid var(--borde); }
.valores dt { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.valores dt::before { content: ""; flex: none; width: 14px; height: 5px; border-radius: 3px; background: var(--grad); transform: rotate(-56deg); }
.valores dd { margin-top: .2rem; font-size: .95rem; color: var(--texto-2); }
.principios { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.principios li { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--borde-2); font-size: .85rem; font-weight: 500; color: var(--texto-2); }
@media (max-width: 759px) {
  .sobre-grid { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  .sobre-espacio { height: 46svh; }
  .sobre-texto::before { content: ""; position: absolute; inset: -8% -12%; z-index: -1; background: radial-gradient(closest-side, rgba(var(--bg-rgb), .86), rgba(var(--bg-rgb), .55) 70%, rgba(var(--bg-rgb), 0)); pointer-events: none; }
  .valores { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 7. Cierre y contacto ===== */
.cierre { padding: 20svh var(--margen) 14svh; }
.cierre-lema { max-width: 15ch; }
.contacto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem 3rem; margin-top: 14svh; padding: clamp(1.4rem, 3.4vw, 3.2rem); border-radius: 28px; border: 1px solid var(--borde); background: var(--superficie-v); box-shadow: var(--sombra); }
.contacto-texto { display: grid; gap: 1.1rem; align-content: start; }
.contacto-datos { display: grid; align-content: center; }
.contacto-datos > div { display: grid; gap: .3rem; padding-block: .85rem; border-bottom: 1px solid var(--borde); }
.contacto-datos > div:last-child { border-bottom: 0; }
.contacto-datos dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--tenue); }
.contacto-datos dd { font-weight: 500; }
.correo { font-family: var(--mono); font-size: .95rem; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
@media (max-width: 759px) {
  .contacto { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Pie ===== */
.pie { padding: 3.5rem var(--margen) calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--borde); background: rgba(var(--bg-rgb), .92); }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; max-width: 76rem; margin-inline: auto; }
.pie-marca { display: grid; gap: .9rem; align-content: start; }
.pie-marca .marca-enlace { justify-self: start; }
.pie-marca p { max-width: 20rem; font-size: .95rem; color: var(--tenue); }
.pie-tit { margin-bottom: .8rem; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--tenue); }
.pie nav a { display: block; padding: .22rem 0; color: var(--texto-2); font-size: .95rem; text-decoration: none; }
.pie nav a:hover { color: var(--texto); }
.pie-contacto .correo { font-size: .85rem; color: var(--texto); }
.pie-dato { margin-top: .3rem; font-size: .9rem; color: var(--tenue); }
.pie-legal { max-width: 76rem; margin: 3rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--borde); font-family: var(--mono); font-size: .72rem; color: var(--tenue); }
@media (max-width: 759px) {
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}