/* ==========================================================================
   Alex Rodríguez · IA para empresas
   Fondo liso, tipografía de Apple, la luz la ponen las animaciones.
   ========================================================================== */

:root {
  --fondo: #f4f4f1;
  --fondo-2: #ecece8;
  --papel: #ffffff;
  --tinta: #0d0d0f;
  --tinta-2: #4a4a50;
  --tinta-3: #6e6e75;
  --linea: rgba(13, 13, 15, 0.08);
  --linea-2: rgba(13, 13, 15, 0.14);
  --noche: #0b0b0d;
  --noche-2: #141418;
  --noche-linea: rgba(255, 255, 255, 0.09);
  --luz: #2f5bff;          /* azul de señal: la luz de las animaciones */
  --luz-suave: rgba(47, 91, 255, 0.12);
  --ok: #12a058;
  --ok-suave: rgba(18, 160, 88, 0.12);
  --ambar: #e39b12;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --muelle: cubic-bezier(0.32, 0.72, 0, 1);
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --radio: 28px;
  --ancho: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--luz); color: #fff; }
:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; border-radius: 8px; }

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 999px;
  transition: transform .4s var(--muelle);
}
.saltar:focus { transform: translateY(76px); }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { padding: clamp(96px, 13vw, 168px) 0; position: relative; }
.seccion--noche { background: var(--noche); color: #f2f2f4; }
.seccion--papel { background: var(--papel); }

/* ---------- Tipografía ---------- */
.ceja {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinta-2);
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgba(13, 13, 15, 0.045); box-shadow: inset 0 0 0 1px var(--linea);
}
.ceja::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 0 3px var(--luz-suave); }
.seccion--noche .ceja { color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--noche-linea); }

.titular {
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.96; letter-spacing: -0.045em; font-weight: 700;
  margin: 24px 0 0;
}
.titulo {
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.0; letter-spacing: -0.04em; font-weight: 700;
  margin: 20px 0 0; max-width: 16ch;
}
.titulo--ancho { max-width: 22ch; }
.entradilla { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--tinta-2); max-width: 58ch; margin: 24px 0 0; letter-spacing: -0.015em; }
.seccion--noche .entradilla { color: rgba(255,255,255,.62); }
.atenuado { color: var(--tinta-3); }
.seccion--noche .atenuado { color: rgba(255,255,255,.42); }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: 0; }

/* ---------- Botones (botón dentro de botón) ---------- */
.boton {
  --bg: var(--tinta); --fg: #fff;
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--bg); color: var(--fg);
  padding: 8px 8px 8px 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
  transition: transform .5s var(--muelle), background-color .4s var(--muelle), box-shadow .5s var(--muelle);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 30px -12px rgba(13,13,15,.45);
  white-space: nowrap;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: scale(.98); }
.boton__icono {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14);
  transition: transform .6s var(--muelle), background-color .4s var(--muelle);
}
.boton__icono svg { width: 16px; height: 16px; }
.boton:hover .boton__icono { transform: translate(3px, -1px) scale(1.06); background: var(--luz); }
.boton--claro { --bg: rgba(13,13,15,.06); --fg: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.boton--claro .boton__icono { background: rgba(13,13,15,.07); }
.boton--claro:hover .boton__icono { color: #fff; }
.boton--blanco { --bg: #fff; --fg: var(--tinta); }
.boton--blanco .boton__icono { background: rgba(13,13,15,.07); }
.boton--blanco:hover .boton__icono { color: #fff; }
.boton--sin { padding: 14px 24px; }

.enlace {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: gap .5s var(--muelle), color .3s;
}
.enlace:hover { gap: 12px; color: var(--luz); }

/* ---------- Carcasa doble (marco + núcleo) ---------- */
.marco {
  padding: 6px; border-radius: var(--radio);
  background: rgba(13,13,15,.035);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.nucleo {
  height: 100%;
  border-radius: calc(var(--radio) - 6px);
  background: var(--papel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(13,13,15,.04), 0 24px 48px -32px rgba(13,13,15,.18);
  padding: clamp(24px, 3vw, 36px);
}
.seccion--noche .marco { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--noche-linea); }
.seccion--noche .nucleo { background: var(--noche-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.seccion--papel .marco { background: rgba(13,13,15,.03); }
.seccion--papel .nucleo { background: var(--fondo); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }

/* ---------- Navegación en isla ---------- */
.nav {
  position: fixed; top: 16px; left: 50%; z-index: 40;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 18px; border-radius: 999px;
  background: rgba(244,244,241,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 1px var(--linea), 0 12px 32px -20px rgba(13,13,15,.35);
  width: max-content; max-width: calc(100vw - 24px);
  transition: transform .7s var(--muelle), opacity .5s;
}
.nav--oculta { transform: translate(-50%, -140%); }
.nav__marca { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; letter-spacing: -0.02em; margin-right: 10px; }
.nav__marca svg { width: 30px; height: auto; }
.nav__enlaces { display: flex; gap: 2px; }
.nav__enlaces a {
  font-size: 14px; font-weight: 500; color: var(--tinta-2);
  padding: 8px 12px; border-radius: 999px;
  transition: background-color .35s var(--muelle), color .35s;
}
.nav__enlaces a:hover, .nav__enlaces a[aria-current="true"] { background: rgba(13,13,15,.06); color: var(--tinta); }
.nav .boton { padding: 5px 5px 5px 16px; font-size: 14px; gap: 10px; }
.nav .boton__icono { width: 30px; height: 30px; }
.nav__burger { display: none; width: 42px; height: 42px; border-radius: 50%; position: relative; background: rgba(13,13,15,.06); }
.nav__burger span {
  position: absolute; left: 13px; width: 16px; height: 1.6px; border-radius: 2px; background: var(--tinta);
  transition: transform .6s var(--muelle), top .6s var(--muelle);
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 23px; }
.menu-abierto .nav__burger span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-abierto .nav__burger span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(244,244,241,.86);
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 28px 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--muelle), visibility 0s .5s;
}
.menu-abierto .menu { opacity: 1; visibility: visible; transition: opacity .5s var(--muelle); }
.menu a.menu__enlace {
  display: block; font-size: clamp(36px, 10vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.15;
  transform: translateY(40px); opacity: 0;
  transition: transform .8s var(--muelle), opacity .6s var(--muelle);
}
.menu-abierto .menu a.menu__enlace { transform: none; opacity: 1; }
.menu-abierto .menu a.menu__enlace:nth-child(2) { transition-delay: .05s; }
.menu-abierto .menu a.menu__enlace:nth-child(3) { transition-delay: .1s; }
.menu-abierto .menu a.menu__enlace:nth-child(4) { transition-delay: .15s; }
.menu-abierto .menu a.menu__enlace:nth-child(5) { transition-delay: .2s; }
.menu-abierto .menu a.menu__enlace:nth-child(6) { transition-delay: .25s; }
.menu__pie { margin-top: 40px; color: var(--tinta-2); font-size: 15px; }

/* ---------- Portada ---------- */
.portada { padding: clamp(128px, 15vw, 176px) 0 clamp(72px, 9vw, 120px); }
.portada__rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--tinta-2); }
.portada__datos li { display: flex; align-items: center; gap: 8px; }
.portada__datos svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.titular .linea { display: block; overflow: hidden; padding-bottom: .06em; }
.titular .linea > span { display: inline-block; transform: translateY(105%); animation: subir 1.1s var(--salida) forwards; }
.titular .linea:nth-child(2) > span { animation-delay: .08s; }
.titular .linea:nth-child(3) > span { animation-delay: .16s; }
.titular em { font-style: normal; color: var(--luz); }
@keyframes subir { to { transform: none; } }
.aparece-carga { opacity: 0; transform: translateY(18px); animation: aparecer 1s var(--salida) forwards; }
.aparece-carga.d1 { animation-delay: .35s; } .aparece-carga.d2 { animation-delay: .5s; } .aparece-carga.d3 { animation-delay: .65s; } .aparece-carga.d4 { animation-delay: .5s; }
@keyframes aparecer { to { opacity: 1; transform: none; } }

/* ---------- Demo del agente ---------- */
.demo { --radio: 32px; }
.demo .nucleo { background: var(--noche); color: #f1f1f3; padding: 0; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -40px rgba(13,13,15,.55); }
.demo__barra { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--noche-linea); font-size: 13px; color: rgba(255,255,255,.66); }
.demo__puntos { display: flex; gap: 6px; }
.demo__puntos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.demo__estado { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.demo__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(18,160,88,.6); animation: latido 2s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(18,160,88,.55); } 70% { box-shadow: 0 0 0 8px rgba(18,160,88,0); } 100% { box-shadow: 0 0 0 0 rgba(18,160,88,0); } }

.flujo { position: relative; padding: 22px 18px 6px; }
.flujo svg { width: 100%; height: auto; overflow: visible; }
.flujo .nodo rect { fill: #17171c; stroke: rgba(255,255,255,.1); transition: stroke .5s var(--muelle), fill .5s; }
.flujo .nodo text { fill: rgba(255,255,255,.62); font: 500 11px var(--sans); letter-spacing: 0; transition: fill .5s; }
.flujo .nodo .icono { stroke: rgba(255,255,255,.6); fill: none; stroke-width: 1.4; transition: stroke .5s; }
.flujo .nodo.activo rect { stroke: var(--luz); fill: #121a3a; }
.flujo .nodo.activo text { fill: #fff; }
.flujo .nodo.activo .icono { stroke: #fff; }
.flujo .nodo.hecho rect { stroke: rgba(18,160,88,.6); }
.flujo .camino { stroke: rgba(255,255,255,.1); stroke-width: 1.4; fill: none; stroke-dasharray: 3 5; }
.flujo .chispa { fill: var(--luz); filter: url(#brillo); }

.registro { padding: 6px 18px 18px; min-height: 252px; position: relative; }
.paso {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--noche-linea); font-size: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s var(--muelle), transform .7s var(--muelle);
}
.paso:first-child { border-top: 0; }
.paso.visible { opacity: 1; transform: none; }
.paso__icono { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; }
.paso__icono .giro { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid rgba(255,255,255,.18); border-top-color: var(--luz); animation: girar .8s linear infinite; }
.paso__icono svg { width: 16px; height: 16px; color: var(--ok); }
@keyframes girar { to { transform: rotate(360deg); } }
.paso__texto b { font-weight: 600; color: #fff; }
.paso__texto span { display: block; color: rgba(255,255,255,.62); font-size: 13px; margin-top: 2px; }
.paso__t { font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 3px; }

.tabla-mini { margin-top: 8px; width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.7); }
.tabla-mini td { padding: 3px 0; border-top: 1px dashed rgba(255,255,255,.08); }
.tabla-mini td:last-child { text-align: right; color: #9fb4ff; }
.tabla-mini tr { opacity: 0; transition: opacity .4s; }
.tabla-mini tr.visible { opacity: 1; }

.borrador {
  margin-top: 8px; padding: 12px; border-radius: 12px; background: #17171c; box-shadow: inset 0 0 0 1px var(--noche-linea);
  font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.5; min-height: 64px;
}
.borrador .cursor { display: inline-block; width: 7px; height: 14px; background: var(--luz); vertical-align: -2px; margin-left: 1px; animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.aprobar { display: flex; gap: 8px; margin-top: 10px; }
.aprobar button {
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px var(--noche-linea);
  transition: background-color .4s var(--muelle), transform .3s var(--muelle);
}
.aprobar button.si { background: var(--ok); box-shadow: none; }
.aprobar button.pulsa { animation: pulsar 1.6s var(--muelle) infinite; }
.aprobar button.pulsado { transform: scale(.94); }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(18,160,88,.6); } 50% { box-shadow: 0 0 0 7px rgba(18,160,88,0); } }
.demo__pie { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--noche-linea); font-size: 12px; color: rgba(255,255,255,.62); }
.demo__nota { font-size: 13px; color: var(--tinta-3); margin: 14px 4px 0; text-align: center; }

/* ---------- Cinta de herramientas ---------- */
.cinta { padding: 28px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); overflow: hidden; }
.cinta__titulo { text-align: center; font-size: 13px; color: var(--tinta-3); margin: 0 0 18px; }
.cinta__pista { display: flex; gap: 12px; width: max-content; animation: deslizar 48s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__pista span {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea);
  font-size: 15px; font-weight: 500; color: var(--tinta-2);
}
.cinta__pista span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--luz); opacity: .7; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* ---------- Por qué ---------- */
.porque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cifra .nucleo { padding: 28px; }
.cifra__num { font-size: clamp(56px, 7vw, 96px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.cifra__num small { font-size: .45em; letter-spacing: -0.02em; margin-left: 2px; color: var(--tinta-3); }
.cifra p { margin: 14px 0 0; font-size: 15px; color: var(--tinta-2); line-height: 1.45; }
.fuente { font-size: 12.5px; color: var(--tinta-3); margin-top: 16px; }
.barra-uso { height: 6px; border-radius: 6px; background: rgba(13,13,15,.07); margin-top: 18px; overflow: hidden; }
.barra-uso i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--luz); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--salida); }

/* ---------- Productos (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.bento > * { grid-column: span 6; }
.producto .nucleo { display: flex; flex-direction: column; gap: 18px; }
.producto__tipo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; background: rgba(13,13,15,.05); color: var(--tinta-2);
}
.etiqueta--luz { background: var(--luz-suave); color: var(--luz); }
.etiqueta--ok { background: var(--ok-suave); color: #0d7a43; }
.producto h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.035em; line-height: 1.05; margin: 0; }
.producto p { margin: 0; color: var(--tinta-2); }
.lista-detalle { display: grid; gap: 0; margin: 4px 0 0; }
.lista-detalle > div { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linea); font-size: 15px; }
.lista-detalle dt { color: var(--tinta-3); font-size: 13.5px; }
.lista-detalle dd { margin: 0; color: var(--tinta); }

/* ---------- Ejemplos por sector ---------- */
.ejemplos { margin-top: 96px; }
.pestanas { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(13,13,15,.05); box-shadow: inset 0 0 0 1px var(--linea); margin-top: 28px; }
.pestanas button {
  padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 550; color: var(--tinta-2);
  transition: background-color .45s var(--muelle), color .3s, box-shadow .45s var(--muelle);
}
.pestanas button[aria-selected="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(13,13,15,.08), 0 6px 16px -10px rgba(13,13,15,.3); }
.seccion--noche .pestanas { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--noche-linea); }
.seccion--noche .pestanas button { color: rgba(255,255,255,.6); }
.seccion--noche .pestanas button[aria-selected="true"] { background: #fff; color: var(--tinta); }

.tareas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.tarea { transition: opacity .6s var(--muelle), transform .8s var(--muelle); }
.js .tarea { opacity: 0; transform: translateY(16px); }
.js .tarea.visible { opacity: 1; transform: none; }
.tarea .nucleo { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.tarea__ruta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; font-family: var(--mono); color: var(--tinta-3); }
.tarea__ruta i { font-style: normal; color: var(--luz); }
.tarea h3 { margin: 0; font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; font-weight: 650; }
.tarea p { margin: 0; font-size: 15px; color: var(--tinta-2); }
.tarea .etiqueta { align-self: flex-start; margin-top: auto; }

/* ---------- Método ---------- */
.metodo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); }
.metodo__fijo { position: sticky; top: 120px; align-self: start; }
.progreso { margin-top: 40px; display: flex; align-items: baseline; gap: 10px; }
.progreso__num { font-size: 96px; font-weight: 700; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.progreso__de { color: rgba(255,255,255,.4); font-size: 18px; }
.pasos { position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; counter-reset: paso; }
.pasos::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 1.5px; background: var(--noche-linea); }
.pasos__luz { position: absolute; left: 13px; top: 8px; width: 1.5px; height: calc(100% - 16px); background: linear-gradient(var(--luz), #8aa2ff); transform-origin: top; transform: scaleY(0); transition: transform .9s var(--muelle); box-shadow: 0 0 12px var(--luz); }
.pasos li { position: relative; padding: 0 0 56px; opacity: .55; transition: opacity .7s var(--muelle); }
.pasos li:last-child { padding-bottom: 0; }
.pasos li.activo { opacity: 1; }
.pasos li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: -44px; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--noche); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); color: rgba(255,255,255,.6);
  transition: background-color .6s var(--muelle), box-shadow .6s var(--muelle), color .4s;
}
.pasos li.activo::before { background: var(--luz); box-shadow: 0 0 0 6px rgba(47,91,255,.18); color: #fff; }
.pasos h3 { margin: 0; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.03em; line-height: 1.15; }
.pasos h3 small { font-size: 13px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.45); margin-left: 8px; vertical-align: 4px; }
.pasos p { margin: 10px 0 0; color: rgba(255,255,255,.62); }
.pasos .entrega { margin-top: 14px; display: inline-flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,.82); padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--noche-linea); }
.pasos .entrega b { color: #9fb4ff; font-weight: 600; white-space: nowrap; }
.nota-ligera { margin-top: 48px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--noche-linea); color: rgba(255,255,255,.7); font-size: 15px; }

/* ---------- Niveles de autonomía ---------- */
.niveles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 56px; align-items: stretch; }
.selector-nivel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 18px; background: rgba(13,13,15,.05); box-shadow: inset 0 0 0 1px var(--linea); position: relative; }
.selector-nivel button { position: relative; z-index: 1; padding: 14px 6px; border-radius: 14px; font-weight: 650; font-size: 15px; color: var(--tinta-2); transition: color .4s; }
.selector-nivel button span { display: block; font-size: 11.5px; font-weight: 500; color: var(--tinta-3); margin-top: 2px; }
.selector-nivel button[aria-selected="true"] { color: var(--tinta); }
.selector-nivel__fondo { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px - 12px) / 4); border-radius: 14px; background: var(--papel); box-shadow: 0 1px 2px rgba(13,13,15,.08), 0 8px 18px -10px rgba(13,13,15,.3); transition: transform .7s var(--muelle); }
.nivel__titulo { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.035em; margin: 28px 0 0; line-height: 1.1; }
.nivel__texto { color: var(--tinta-2); margin: 12px 0 0; min-height: 3.2em; }
.escena { position: relative; display: flex; flex-direction: column; gap: 10px; }
.carril { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--fondo); }
.carril__quien { font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.carril__quien i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #fff; }
.carril__acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.carril__acciones span { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); color: var(--tinta-3); transition: background-color .5s var(--muelle), color .4s, box-shadow .5s, transform .5s var(--muelle); }
.carril__acciones span.on { background: var(--tinta); color: #fff; box-shadow: none; transform: translateY(-1px); }
.carril__acciones span.on.luz { background: var(--luz); }
.siempre { margin-top: 18px; display: grid; gap: 8px; }
.siempre li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.siempre svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.cita-norma { font-size: 13px; color: var(--tinta-3); margin-top: 18px; }

/* ---------- Seguridad ---------- */
.seguridad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.seguridad > * { grid-column: span 2; }
.seguridad > .ancha { grid-column: span 4; }
.regla .nucleo { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.regla__icono { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--noche-linea); color: #9fb4ff; }
.regla__icono svg { width: 22px; height: 22px; }
.regla h3 { margin: 6px 0 0; font-size: 20px; letter-spacing: -0.02em; }
.regla p { margin: 0; font-size: 15px; color: rgba(255,255,255,.6); }
.triangulo { display: flex; align-items: center; justify-content: center; gap: 0; margin: 10px 0 4px; }
.triangulo svg { width: 100%; max-width: 360px; height: auto; }
.honesto { margin-top: 12px; }
.honesto .nucleo { display: flex; gap: 18px; align-items: flex-start; }
.honesto p { margin: 0; color: rgba(255,255,255,.75); }
.honesto b { color: #fff; }

/* ---------- Tuyo / mío / te vas ---------- */
.reparto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.reparto .nucleo { display: flex; flex-direction: column; gap: 14px; }
.reparto h3 { margin: 0; font-size: 28px; letter-spacing: -0.035em; }
.reparto ul, .reparto ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.reparto li { padding: 11px 0; border-top: 1px solid var(--linea); font-size: 15px; color: var(--tinta-2); display: flex; gap: 10px; }
.reparto li b { color: var(--tinta); font-weight: 600; }
.reparto ol { counter-reset: s; }
.reparto ol li::before { counter-increment: s; content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--tinta); color: #fff; margin-top: 1px; }
.reparto__cliente .nucleo { background: var(--tinta); color: #fff; }
.reparto__cliente li { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.1); }
.reparto__cliente li b { color: #fff; }
.reparto__cliente .etiqueta { background: rgba(255,255,255,.12); color: #fff; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; margin-top: 8px; }
.frase-grande { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.03em; line-height: 1.25; font-weight: 600; margin: 48px 0 0; max-width: 34ch; }
.frase-grande span + span { color: var(--tinta-3); }

/* ---------- Calculadora ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 56px; }
.campo-rango { padding: 18px 0; border-top: 1px solid var(--linea); }
.campo-rango:first-child { border-top: 0; padding-top: 0; }
.campo-rango label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; font-size: 15px; }
.campo-rango output { font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: -0.02em; }
.campo-rango small { display: block; font-weight: 400; color: var(--tinta-3); font-size: 13px; margin-top: 2px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin-top: 8px; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(var(--luz), var(--luz)) 0 / var(--p, 50%) 100% no-repeat, rgba(13,13,15,.08); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(13,13,15,.08); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--luz); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--linea-2), 0 4px 12px -2px rgba(13,13,15,.3); transition: transform .3s var(--muelle); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px var(--linea-2), 0 4px 12px -2px rgba(13,13,15,.3); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc__resultado .nucleo { background: var(--tinta); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.calc__grande { font-size: clamp(56px, 7vw, 96px); font-weight: 700; letter-spacing: -0.055em; line-height: .95; font-variant-numeric: tabular-nums; }
.calc__grande small { font-size: .32em; letter-spacing: -0.01em; color: rgba(255,255,255,.55); font-weight: 600; display: block; margin-top: 10px; }
.calc__fila { display: flex; gap: 32px; flex-wrap: wrap; }
.calc__fila div { font-size: 13px; color: rgba(255,255,255,.5); }
.calc__fila b { display: block; font-size: 26px; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; margin-top: 2px; }
.calc__aviso { font-size: 14px; color: rgba(255,255,255,.6); margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Precios ---------- */
.precios__cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.panel-precios { margin-top: 32px; }
.panel-precios[hidden] { display: none; }
.tarjetas-precio { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.precio .nucleo { display: flex; flex-direction: column; gap: 14px; }
.precio h3 { margin: 0; font-size: 22px; letter-spacing: -0.025em; }
.precio__cifra { font-size: clamp(40px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.precio__cifra small { font-size: 15px; letter-spacing: -0.01em; font-weight: 550; color: var(--tinta-3); margin-left: 4px; }
.precio p { margin: 0; color: var(--tinta-2); font-size: 15px; }
.precio ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.precio li { display: flex; gap: 10px; }
.precio li svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 3px; }
.precio--destacado .nucleo { background: var(--tinta); color: #fff; }
.precio--destacado p, .precio--destacado .precio__cifra small { color: rgba(255,255,255,.6); }
.precio--destacado .etiqueta { background: rgba(255,255,255,.12); color: #fff; }
.reglas-casa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.reglas-casa div { padding: 20px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--linea); font-size: 14.5px; color: var(--tinta-2); }
.reglas-casa b { display: block; color: var(--tinta); font-size: 15.5px; margin-bottom: 4px; }
.lanzamiento { margin-top: 12px; }
.lanzamiento .nucleo { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--luz); color: #fff; }
.lanzamiento__pct { font-size: clamp(56px, 6vw, 80px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; }
.lanzamiento p { margin: 6px 0 0; color: rgba(255,255,255,.82); font-size: 15px; }
.lanzamiento h3 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.plazas { display: flex; gap: 6px; }
.plazas i { width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.plazas i.ocupada { background: rgba(255,255,255,.25); }
.nota-claude { margin-top: 12px; font-size: 14px; color: var(--tinta-2); padding: 18px 22px; border-radius: 22px; background: var(--fondo-2); display: flex; gap: 14px; }
.nota-claude svg { width: 20px; height: 20px; color: var(--luz); flex: none; margin-top: 1px; }

/* ---------- Caso ---------- */
.caso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 56px; }
.caso__pronto .nucleo { position: relative; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--noche); color: #fff; }
.caso__lineas { position: absolute; inset: 0; opacity: .9; }
.caso__lineas canvas { display: block; width: 100%; height: 100%; }
.caso__pronto h3 { position: relative; margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.04em; line-height: 1.05; }
.caso__pronto p { position: relative; margin: 10px 0 0; color: rgba(255,255,255,.6); }
.procesos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.procesos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-top: 1px solid var(--linea); font-size: 16px; }
.procesos li:first-child { border-top: 0; }
.procesos .etiqueta { flex: none; }

/* ---------- Quién ---------- */
.quien { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.retrato .nucleo { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--noche); position: relative; overflow: hidden; padding: 0; }
.retrato svg.logo-grande { width: 58%; color: #fff; position: relative; z-index: 1; }
.retrato canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.retrato__pie { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: flex; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 13px; }
.quien__texto p { color: var(--tinta-2); font-size: 18px; margin: 18px 0 0; max-width: 56ch; }
.quien__texto p b { color: var(--tinta); font-weight: 600; }
.zonas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.zonas span { padding: 8px 14px; border-radius: 999px; font-size: 14px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.zonas span.presencial { background: var(--tinta); color: #fff; box-shadow: none; }

/* ---------- Lo que no hago ---------- */
.nohago { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 48px; list-style: none; padding: 0; }
.nohago li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--linea); }
.nohago li svg { width: 20px; height: 20px; color: #d23c3c; margin-top: 3px; }
.nohago b { display: block; font-size: 18px; letter-spacing: -0.02em; }
.nohago span { display: block; color: var(--tinta-2); font-size: 15px; margin-top: 4px; }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(13,13,15,.05); position: relative; transition: transform .6s var(--muelle), background-color .4s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--tinta); border-radius: 2px; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .6s var(--muelle); }
.faq details[open] summary i { background: var(--tinta); }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #fff; }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .respuesta { overflow: hidden; }
.faq .respuesta p { margin: 0 0 22px; color: var(--tinta-2); max-width: 62ch; }

/* ---------- Contacto (formulario en 4 pasos) ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contacto__lado { position: sticky; top: 120px; }
.contacto__lado ul { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.contacto__lado li { display: flex; gap: 12px; color: rgba(255,255,255,.75); font-size: 15.5px; }
.contacto__lado li svg { width: 20px; height: 20px; color: #9fb4ff; flex: none; margin-top: 2px; }
.form .nucleo { padding: clamp(22px, 3vw, 36px); }
.form__progreso { display: flex; gap: 6px; margin-bottom: 26px; }
.form__progreso i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; position: relative; }
.form__progreso i::after { content: ""; position: absolute; inset: 0; background: var(--luz); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--muelle); }
.form__progreso i.hecho::after { transform: scaleX(1); }
.form__paso { display: none; }
.form__paso.activo { display: block; animation: entra-paso .7s var(--muelle); }
@keyframes entra-paso { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.form__num { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.45); }
.form h3 { margin: 6px 0 4px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.035em; line-height: 1.1; }
.form .ayuda { margin: 0 0 22px; color: rgba(255,255,255,.55); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 15px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--noche-linea); color: rgba(255,255,255,.82);
  transition: background-color .4s var(--muelle), box-shadow .4s, color .3s, transform .4s var(--muelle);
}
.chip input:checked + span { background: #fff; color: var(--tinta); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--luz); outline-offset: 2px; }
.chip:active span { transform: scale(.97); }
.etiqueta-campo { display: block; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.75); margin: 22px 0 8px; }
.entrada {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 0;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--noche-linea); color: #fff; font-size: 16px;
  transition: box-shadow .4s var(--muelle), background-color .4s;
}
.entrada::placeholder { color: rgba(255,255,255,.35); }
.entrada:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--luz), 0 0 0 4px rgba(47,91,255,.2); background: rgba(255,255,255,.08); }
textarea.entrada { min-height: 120px; resize: vertical; line-height: 1.5; }
select.entrada { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
select.entrada option { color: #000; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dia { position: relative; }
.dia input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dia span { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--noche-linea); font-size: 12px; color: rgba(255,255,255,.55); transition: background-color .4s var(--muelle), color .3s; }
.dia span b { font-size: 20px; color: #fff; letter-spacing: -0.02em; line-height: 1.2; }
.dia input:checked + span { background: var(--luz); color: rgba(255,255,255,.8); box-shadow: none; }
.dia input:disabled + span { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.dia input:focus-visible + span { outline: 2px solid var(--luz); outline-offset: 2px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.7); cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--luz); flex: none; }
.casilla a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.form__botones { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; }
.form__atras { font-weight: 600; color: rgba(255,255,255,.6); padding: 12px 4px; transition: color .3s; }
.form__atras:hover { color: #fff; }
.form__atras[hidden] { visibility: hidden; display: inline; }
.form__error { color: #ff8a8a; font-size: 14px; margin: 14px 0 0; min-height: 1.4em; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__hecho { text-align: center; padding: 28px 0 8px; }
.form__hecho svg.check { width: 72px; height: 72px; margin: 0 auto; }
.form__hecho svg.check circle { stroke: var(--ok); stroke-width: 2; fill: none; stroke-dasharray: 190; stroke-dashoffset: 190; animation: trazo 1s var(--salida) forwards; }
.form__hecho svg.check path { stroke: var(--ok); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: trazo .6s .5s var(--salida) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.form__hecho p { color: rgba(255,255,255,.65); max-width: 44ch; margin: 12px auto 0; }
.form__hecho .acciones-alt { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.resumen { text-align: left; margin-top: 18px; display: grid; gap: 0; font-size: 14.5px; }
.resumen div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--noche-linea); }
.resumen dt { color: rgba(255,255,255,.45); }
.resumen dd { margin: 0; color: #fff; }

/* ---------- Cierre y pie ---------- */
.cierre { text-align: center; }
.cierre .titulo { margin-left: auto; margin-right: auto; max-width: 18ch; }
.cierre .entradilla { margin-left: auto; margin-right: auto; }
.cierre .portada__acciones { justify-content: center; }
.pie { padding: 56px 0 40px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tinta-2); }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.pie__marca { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--tinta); font-size: 16px; letter-spacing: -0.02em; }
.pie__marca svg { width: 34px; }
.pie h2 { margin: 0 0 12px; font-size: 13px; color: var(--tinta-3); font-weight: 600; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie a:hover { color: var(--luz); }
.pie__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 13px; }

/* ---------- Revelado al hacer scroll ---------- */
.js .revela { opacity: 0; transform: translateY(40px); filter: blur(6px); }
.revela { transition: opacity 1s var(--salida), transform 1.1s var(--salida), filter 1s var(--salida); }
.js .revela.visible { opacity: 1; transform: none; filter: none; }
.revela.r1 { transition-delay: .08s; } .revela.r2 { transition-delay: .16s; } .revela.r3 { transition-delay: .24s; } .revela.r4 { transition-delay: .32s; }

/* ---------- Páginas legales ---------- */
.legal { padding: 140px 0 96px; }
.legal .contenedor { max-width: 760px; }
.legal h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.04em; line-height: 1.05; margin: 20px 0 8px; }
.legal h2 { font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 8px; }
.legal p, .legal li { color: var(--tinta-2); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 12px; }
.legal td, .legal th { text-align: left; padding: 10px 8px; border-top: 1px solid var(--linea); vertical-align: top; }
.legal th { color: var(--tinta-3); font-weight: 600; font-size: 13px; }
.pendiente { background: #fff3cf; color: #7a5600; padding: 1px 6px; border-radius: 6px; font-size: .92em; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__enlaces { display: none; }
  .nav__burger { display: block; }
  .nav .boton { display: none; }
  .portada__rejilla, .porque, .metodo, .quien, .preguntas, .contacto, .niveles, .calc, .caso { grid-template-columns: minmax(0, 1fr); }
  .metodo__fijo, .contacto__lado { position: static; }
  .tareas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjetas-precio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reglas-casa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seguridad > *, .seguridad > .ancha { grid-column: span 3; }
  .reparto { grid-template-columns: minmax(0, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .progreso { display: none; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .nav { top: 10px; }
  .nav__marca span { font-size: 14px; }
  .bento > * { grid-column: span 12; }
  .tareas, .tarjetas-precio, .reglas-casa, .cifras, .nohago { grid-template-columns: minmax(0, 1fr); }
  .seguridad > *, .seguridad > .ancha { grid-column: span 6; }
  .lista-detalle > div { grid-template-columns: 1fr; gap: 2px; }
  .lanzamiento .nucleo { grid-template-columns: 1fr; gap: 14px; }
  .dos { grid-template-columns: 1fr; }
  .dias { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .dia span { padding: 8px 2px; font-size: 11px; }
  .dia span b { font-size: 17px; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .selector-nivel button span { display: none; }
  .carril { grid-template-columns: 1fr; gap: 8px; }
  .resumen div { grid-template-columns: 1fr; gap: 2px; }
  .pasos { padding-left: 40px; }
  .portada__acciones .boton { width: 100%; justify-content: space-between; }
  .pestanas { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .pestanas button { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .revela, .tarea, .paso { opacity: 1; transform: none; filter: none; }
  .titular .linea > span { transform: none; }
  .cinta__pista { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* Registro de la demo: lo nuevo entra por abajo y lo viejo se va por arriba */
.registro { height: 300px; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px); mask-image: linear-gradient(to bottom, transparent 0, #000 56px); }
.registro .paso { flex: none; }
@media (max-width: 767px) { .registro { height: 360px; } .flujo .nodo text { font-size: 10px; } }

[hidden]:not(.form__atras) { display: none !important; }
/* La chispa viaja por una línea bajo los nodos */
.flujo svg { overflow: visible; }

/* Zonas táctiles de 44 px (pie, marca, correo) */
.pie ul { gap: 0; }
.pie ul a, .pie ul li[data-c], .pie__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.nav__marca { min-height: 44px; }
.pie__marca { min-height: 44px; }
.contacto__lado li { align-items: center; }
.toque { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   v2: varias páginas + portada visual
   ========================================================================== */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
::view-transition-old(root) { animation: 260ms var(--muelle) both salir-pag; }
::view-transition-new(root) { animation: 420ms var(--salida) both entrar-pag; }
@keyframes salir-pag { to { opacity: 0; transform: translateY(-8px); } }
@keyframes entrar-pag { from { opacity: 0; transform: translateY(12px); } }
.nav__enlaces a[aria-current="page"] { background: rgba(13,13,15,.07); color: var(--tinta); }
.menu a.menu__enlace[aria-current="page"] { color: var(--luz); }
.seccion--primera { padding-top: clamp(140px, 16vw, 200px); }
.etiqueta-demo { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--tinta-3); margin-top: 14px; }
.etiqueta-demo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); }
.centrado { text-align: center; } .centrado .titulo, .centrado .entradilla { margin-left: auto; margin-right: auto; }

/* ---------- Un día en tu empresa (scroll que cuenta una historia) ---------- */
.undia { padding: clamp(96px, 12vw, 150px) 0 0; background: var(--noche); color: #f2f2f4; }
.undia .ceja { color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--noche-linea); }
.undia .entradilla { color: rgba(255,255,255,.6); }
.dia__rejilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); margin-top: 24px; }
.dia__pasos { padding: 18vh 0 30vh; }
.dia__paso { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transform: translateY(16px); transition: opacity .7s var(--muelle), transform .9s var(--muelle); }
.dia__paso.activo { opacity: 1; transform: none; }
.dia__hora { font-family: var(--mono); font-size: 14px; color: #9fb4ff; letter-spacing: .02em; }
.dia__paso h3 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.04em; line-height: 1.02; margin: 10px 0 0; }
.dia__paso p { color: rgba(255,255,255,.62); font-size: 18px; margin: 14px 0 0; max-width: 34ch; }
.dia__escena { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.dia__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.reloj { font-size: clamp(56px, 7vw, 96px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.reloj span { color: rgba(255,255,255,.35); }
.jornada { flex: 1; max-width: 280px; }
.jornada__barra { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.jornada__barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--luz), #9fb4ff); transform-origin: left; transform: scaleX(.05); transition: transform 1.1s var(--muelle); box-shadow: 0 0 12px var(--luz); }
.jornada__marcas { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.35); margin-top: 8px; }
.pantalla { position: relative; border-radius: 22px; background: #121216; box-shadow: inset 0 0 0 1px var(--noche-linea), 0 40px 80px -30px rgba(0,0,0,.6); overflow: hidden; aspect-ratio: 16 / 11; }
.pantalla__barra { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--noche-linea); font-size: 12px; color: rgba(255,255,255,.5); }
.pantalla__barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.pantalla__barra b { margin-left: 8px; font-weight: 500; }
.vista { position: absolute; inset: 38px 0 0; padding: clamp(14px, 2vw, 24px); opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .6s var(--muelle), transform .8s var(--muelle); pointer-events: none; display: flex; flex-direction: column; gap: 12px; }
.vista.activa { opacity: 1; transform: none; }
.vista .entra { opacity: 0; transform: translateY(10px); }
.vista.activa .entra { animation: entra-v .7s var(--salida) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes entra-v { to { opacity: 1; transform: none; } }
.mail-cab { font-size: 13px; color: rgba(255,255,255,.55); display: flex; justify-content: space-between; gap: 10px; }
.mail-cab b { color: #fff; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--noche-linea); }
.kpi b { display: block; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: rgba(255,255,255,.55); }
.kpi.alerta b { color: #ffb84d; } .kpi.ok b { color: #4fd18b; }
.fila-v { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); font-size: 13.5px; color: rgba(255,255,255,.8); }
.fila-v small { color: rgba(255,255,255,.45); font-family: var(--mono); font-size: 11.5px; }
.pill { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); white-space: nowrap; }
.pill.roja { background: rgba(255,90,90,.15); color: #ff8a8a; } .pill.ambar { background: rgba(255,184,77,.14); color: #ffc46b; } .pill.verde { background: rgba(79,209,139,.14); color: #6ee0a2; } .pill.azul { background: rgba(47,91,255,.2); color: #a9bcff; }
.punto-v { width: 8px; height: 8px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 10px var(--luz); }
.flujo-pdf { display: grid; grid-template-columns: .8fr auto 1.2fr; gap: 14px; align-items: center; flex: 1; }
.mini-pdf { background: #f7f7f4; color: #222; border-radius: 10px; padding: 14px; font-size: 11px; line-height: 1.5; position: relative; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.mini-pdf b { display: block; font-size: 12px; margin-bottom: 6px; }
.mini-pdf .l { display: block; height: 6px; border-radius: 3px; background: #ddd; margin: 6px 0; }
.mini-pdf .marca { background: rgba(47,91,255,.18); outline: 1.5px solid var(--luz); border-radius: 3px; padding: 0 2px; }
.vista.activa .mini-pdf::after { content: ""; position: absolute; left: 0; right: 0; height: 40px; top: -40px; background: linear-gradient(180deg, transparent, rgba(47,91,255,.35), transparent); animation: barrido 1.6s .3s var(--muelle) 2; }
@keyframes barrido { to { top: 100%; } }
.flecha-v { color: #9fb4ff; font-size: 22px; }
.erp { border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--noche-linea); font-family: var(--mono); font-size: 11.5px; overflow: hidden; }
.erp__cab { padding: 8px 12px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); font-family: var(--sans); font-size: 12px; display: flex; justify-content: space-between; }
.erp__fila { display: grid; grid-template-columns: 1.6fr .6fr .8fr; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--noche-linea); color: rgba(255,255,255,.8); }
.erp__fila span:last-child { text-align: right; color: #a9bcff; }
.vista.activa .erp__fila.nueva { animation: fila-luz 1.6s var(--salida) both; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes fila-luz { 0% { opacity: 0; transform: translateX(-12px); background: rgba(47,91,255,.35); } 40% { opacity: 1; transform: none; } 100% { background: transparent; } }
.chat { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: flex-end; }
.burbuja { max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.burbuja.ellos { background: rgba(255,255,255,.08); align-self: flex-start; border-bottom-left-radius: 6px; }
.burbuja.yo { align-self: flex-end; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(79,209,139,.6); border-bottom-right-radius: 6px; color: rgba(255,255,255,.9); }
.burbuja.yo small { display: block; font-size: 11px; color: #6ee0a2; margin-bottom: 4px; font-weight: 600; }
.vista.activa .burbuja.yo { animation: entra-v .7s var(--salida) forwards, enviado .5s 3.2s var(--muelle) forwards; }
@keyframes enviado { to { background: #1f6f47; box-shadow: none; } }
.escribiendo { align-self: flex-end; display: flex; gap: 4px; padding: 10px 14px; border-radius: 18px; background: rgba(255,255,255,.06); }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); animation: bote 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes bote { 50% { transform: translateY(-4px); opacity: .5; } }
.vista.activa .escribiendo { animation: entra-v .4s .8s var(--salida) forwards, desaparece .3s 1.9s forwards; opacity: 0; }
@keyframes desaparece { to { opacity: 0; transform: scale(.8); height: 0; padding: 0; margin: -5px 0; } }
.aprobado { align-self: flex-end; font-size: 12px; color: #6ee0a2; }
.barras-v { display: flex; align-items: flex-end; gap: 10px; height: 46%; padding: 8px 4px 0; border-bottom: 1px solid var(--noche-linea); }
.barras-v div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; font-size: 11px; color: rgba(255,255,255,.45); }
.barras-v i { width: 100%; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #7d97ff, var(--luz)); transform-origin: bottom; transform: scaleY(0); height: var(--h); }
.vista.activa .barras-v i { animation: crece 1.1s var(--salida) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes crece { to { transform: scaleY(1); } }
.dia__nota { font-size: 12px; color: rgba(255,255,255,.35); text-align: right; }

/* ---------- Pruébalo: un documento entra en el programa ---------- */
.prueba__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 28px; align-items: stretch; }
.papel { position: relative; background: #fff; border-radius: 18px; padding: clamp(22px, 3vw, 34px); box-shadow: 0 1px 2px rgba(13,13,15,.06), 0 30px 60px -30px rgba(13,13,15,.3); font-size: 14px; line-height: 1.6; overflow: hidden; min-height: 420px; }
.papel__cab { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--linea); padding-bottom: 12px; margin-bottom: 14px; }
.papel__cab b { font-size: 18px; letter-spacing: -0.02em; }
.papel__cab span { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); text-align: right; }
.papel table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.papel td, .papel th { padding: 6px 4px; border-bottom: 1px dashed var(--linea-2); text-align: left; }
.papel th { font-size: 11px; color: var(--tinta-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.campo { border-radius: 4px; transition: background-color .4s var(--muelle), box-shadow .4s var(--muelle); }
.campo.visto { background: rgba(47,91,255,.12); box-shadow: 0 0 0 1.5px var(--luz); }
.papel.leyendo::after { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 60px; background: linear-gradient(180deg, transparent, rgba(47,91,255,.22), transparent); animation: barrido 1.3s var(--muelle) forwards; }
.destino .nucleo { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.destino__cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--linea); font-weight: 600; font-size: 15px; }
.destino__fila { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--linea); font-size: 14px; align-items: center; }
.destino__fila dt { color: var(--tinta-3); font-size: 13px; }
.destino__fila dd { margin: 0; min-height: 22px; border-radius: 6px; position: relative; }
.destino__fila dd:empty::before { content: ""; position: absolute; inset: 4px 30% 4px 0; border-radius: 6px; background: rgba(13,13,15,.05); }
.destino__fila dd.lleno { animation: brilla 1.2s var(--salida); font-weight: 550; }
@keyframes brilla { 0% { background: rgba(47,91,255,.25); } 100% { background: transparent; } }
.destino__pie { margin-top: auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--fondo); }
.destino__estado { font-size: 14px; color: var(--tinta-2); display: flex; gap: 8px; align-items: center; }
.destino__estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); }
.destino__estado.listo::before { background: var(--ambar); box-shadow: 0 0 0 4px rgba(227,155,18,.18); }
.destino__estado.hecho::before { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-suave); }
.ficha-vuela { position: fixed; z-index: 30; pointer-events: none; padding: 3px 8px; border-radius: 6px; background: var(--luz); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -6px rgba(47,91,255,.6); }
.boton[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Antes y después ---------- */
.comparador { position: relative; margin-top: 40px; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 8.5; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -36px rgba(13,13,15,.35); --pos: 50%; user-select: none; touch-action: pan-y; }
.capa { position: absolute; inset: 0; padding: clamp(18px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.capa--antes { background: #f1efe9; }
.capa--despues { background: var(--noche); color: #fff; clip-path: inset(0 0 0 var(--pos)); }
.capa__titulo { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); display: flex; justify-content: space-between; }
.capa--despues .capa__titulo { color: rgba(255,255,255,.5); }
.correo-c { display: grid; grid-template-columns: 10px 140px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #fff; font-size: 13.5px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.correo-c i { width: 8px; height: 8px; border-radius: 50%; background: #d23c3c; }
.correo-c b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.correo-c span { color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.correo-c small { color: var(--tinta-3); font-family: var(--mono); font-size: 11px; }
.postit { position: absolute; width: 150px; padding: 14px; background: #ffe58a; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 20px -8px rgba(0,0,0,.25); font-family: "Marker Felt", "Chalkboard SE", var(--sans); }
.grupo-c { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; }
.grupo-c section { border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--noche-linea); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.grupo-c h4 { margin: 0 0 4px; font-size: 13px; display: flex; justify-content: space-between; color: rgba(255,255,255,.75); }
.tarjeta-c { padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.tarjeta-c .pill { align-self: flex-start; }
.asa { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(13,13,15,.1), 0 0 20px rgba(47,91,255,.6); pointer-events: none; }
.asa::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; color: var(--tinta); display: grid; place-items: center; font-size: 18px; font-weight: 600; letter-spacing: 2px; box-shadow: 0 8px 24px -6px rgba(13,13,15,.4); }
.comparador input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 2; }
.comparador input[type="range"]:focus-visible ~ .asa::after { outline: 3px solid var(--luz); outline-offset: 3px; }

/* ---------- Pregúntale a tu empresa ---------- */
.pregunta__rejilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sugerencias { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; align-items: flex-start; }
.sugerencias button { text-align: left; padding: 13px 18px; border-radius: 16px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); font-size: 15.5px; font-weight: 550; transition: transform .5s var(--muelle), box-shadow .4s, background-color .4s; display: flex; gap: 10px; align-items: center; }
.sugerencias button::before { content: "↳"; color: var(--luz); }
.sugerencias button:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px var(--luz-suave), 0 8px 20px -12px rgba(47,91,255,.5); }
.sugerencias button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.sugerencias button:disabled { opacity: .5; }
.conversa .nucleo { background: var(--noche); color: #fff; padding: 0; display: flex; flex-direction: column; height: clamp(420px, 52vw, 540px); overflow: hidden; }
.conversa__cab { padding: 14px 18px; border-bottom: 1px solid var(--noche-linea); font-size: 13px; color: rgba(255,255,255,.6); display: flex; justify-content: space-between; }
.conversa__cuerpo { flex: 1; overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.msg { max-width: 86%; padding: 11px 15px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; animation: entra-v .5s var(--salida) both; }
.msg.yo { align-self: flex-end; background: var(--luz); border-bottom-right-radius: 6px; }
.msg.ia { align-self: flex-start; background: rgba(255,255,255,.07); border-bottom-left-radius: 6px; }
.msg.paso-ia { align-self: flex-start; background: none; padding: 0 4px; font-size: 12.5px; color: rgba(255,255,255,.45); font-family: var(--mono); }
.msg table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.msg td { padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); }
.msg td:last-child { text-align: right; color: rgba(255,255,255,.55); font-family: var(--mono); font-size: 12px; }
.msg ul { margin: 6px 0 0; padding-left: 18px; }
.mini-graf { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 10px; }
.mini-graf div { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.mini-graf i { flex: 1; border-radius: 3px 3px 0 0; transform-origin: bottom; animation: crece .9s var(--salida) both; }
.mini-graf i.a { background: rgba(255,255,255,.25); } .mini-graf i.b { background: var(--luz); }
.leyenda { display: flex; gap: 14px; font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 6px; }
.leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

/* ---------- Tres razones / cómo empezamos ---------- */
.razones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.razon .nucleo { display: flex; flex-direction: column; gap: 12px; transition: transform .6s var(--muelle); }
.razon:hover .nucleo { transform: translateY(-3px); }
.razon__icono { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--luz-suave); color: var(--luz); }
.razon__icono svg { width: 24px; height: 24px; }
.razon h3 { margin: 4px 0 0; font-size: 22px; letter-spacing: -0.025em; }
.razon p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.razon .enlace { margin-top: auto; align-self: flex-start; font-size: 14.5px; }
.pasos-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 48px; position: relative; }
.pasos-mini::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 1.5px; background: var(--linea-2); }
.pasos-mini > div { position: relative; padding-right: 24px; }
.pasos-mini b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font-size: 16px; position: relative; }
.pasos-mini > div:first-child b { background: var(--luz); box-shadow: 0 0 0 8px var(--luz-suave); }
.pasos-mini h3 { margin: 18px 0 0; font-size: 21px; letter-spacing: -0.025em; }
.pasos-mini p { margin: 6px 0 0; color: var(--tinta-2); font-size: 15px; max-width: 30ch; }

@media (max-width: 1080px) {
  .dia__rejilla { grid-template-columns: minmax(0, 1fr); }
  .dia__escena { position: sticky; top: 64px; height: auto; z-index: 1; padding: 10px 0 14px; background: var(--noche); order: -1; }
  .dia__pasos { padding: 4vh 0 20vh; position: relative; z-index: 0; }
  .dia__paso { min-height: 62vh; justify-content: flex-start; padding-top: 6vh; }
  .reloj { font-size: 44px; }
  .pantalla { aspect-ratio: auto; height: 46vh; }
  .prueba__rejilla, .pregunta__rejilla { grid-template-columns: minmax(0, 1fr); }
  .razones { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kpi { padding: 10px; } .kpi b { font-size: 24px; }
  .flujo-pdf { grid-template-columns: 1fr; } .flecha-v { display: none; } .mini-pdf { display: none; }
  .comparador { aspect-ratio: auto; height: 520px; }
  .correo-c { grid-template-columns: 10px 1fr auto; } .correo-c span { display: none; }
  .grupo-c { grid-template-columns: 1fr; } .grupo-c section:nth-child(n+3) { display: none; }
  .postit { display: none; }
  .pasos-mini { grid-template-columns: 1fr; gap: 28px; } .pasos-mini::before { display: none; }
  .destino__fila { grid-template-columns: 110px 1fr; }
  .dia__paso p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vista .entra, .dia__paso { opacity: 1; transform: none; }
  .barras-v i, .mini-graf i { transform: none; }
}
.capa--despues .capa__titulo { justify-content: flex-end; gap: 12px; }
.dia__leyenda { display: none; }
@media (max-width: 1080px) {
  .dia__leyenda { display: block; min-height: 96px; }
  .dia__leyenda h3 { margin: 0; font-size: 24px; letter-spacing: -0.03em; line-height: 1.1; }
  .dia__leyenda p { margin: 6px 0 0; font-size: 15px; color: rgba(255,255,255,.62); }
  .dia__leyenda.cambia { animation: entra-v .6s var(--salida) both; }
  .dia__paso { visibility: hidden; min-height: 70vh; }
  .pantalla { height: 40vh; }
  .dia__nota { display: none; }
}
/* contraste (Lighthouse) */
.jornada__marcas { color: rgba(255,255,255,.58); }
.etiqueta--luz { color: #1d43d6; }
.dia__nota { color: rgba(255,255,255,.55); }
.reloj span { color: rgba(255,255,255,.55); }

/* v2 · revisión de Marketing */
.enlace { border-bottom: 0; padding: 10px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
input[type="range"] { height: 44px; }
.dia__escena { top: 84px; height: calc(100vh - 84px); height: calc(100dvh - 84px); }
@media (max-width: 1080px) { .dia__escena { top: 64px; height: auto; } }
/* Foto real de «Quién soy» (la pone la Mesa con data-i); tapa el logo y el lienzo */
.retrato img[data-i] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.retrato img[data-i]:not([hidden]) ~ .logo-grande { display: none; }

/* ==========================================================================
   Contacto con tres caminos (11-11) · fuente/contacto.html + js/contacto.js
   INICIO del bloque de contacto. No mezclar con otros bloques.
   ========================================================================== */
.form__titulo { margin: 6px 0 4px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.form__titulo:focus { outline: none; }
.form .form__num { margin: 0; color: rgba(255,255,255,.62); }
.form .ayuda { color: rgba(255,255,255,.66); }
.form :focus-visible { outline-color: #9fb4ff; }
.form .atenuado { color: rgba(255,255,255,.6); font-weight: 400; }
.etiqueta-campo--primera { margin-top: 0; }

.caminos { display: grid; gap: 10px; }
.camino {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 16px; align-items: center;
  width: 100%; min-height: 92px; padding: 18px 20px; text-align: left; border-radius: 22px; color: #fff;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--noche-linea);
  transition: background-color .4s var(--muelle), box-shadow .4s var(--muelle), transform .4s var(--muelle);
}
.camino:hover { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.camino:active { transform: scale(.985); }
.camino:focus-visible { outline: 2px solid #9fb4ff; outline-offset: 3px; border-radius: 22px; }
.camino__icono { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(47,91,255,.2); color: #b9c8ff; }
.camino__icono svg { width: 22px; height: 22px; }
.camino__texto strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.camino__texto > span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,.68); }
.camino__flecha { width: 20px; height: 20px; color: rgba(255,255,255,.55); transition: transform .4s var(--muelle), color .3s; }
.camino:hover .camino__flecha { transform: translateX(3px); color: #fff; }

.form .chip span { min-height: 44px; }
.form .chip input:focus-visible + span { outline: 2px solid #9fb4ff; outline-offset: 2px; }
.form__aviso { margin: 0 0 22px; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; background: rgba(47,91,255,.16); color: #dfe6ff; }
.form__aviso--error { background: rgba(255,90,90,.16); color: #ffd0d0; }
.form__aviso--error:focus { outline: none; }
.form__nota { margin: 12px 0 0; font-size: 14.5px; color: rgba(255,255,255,.68); }
.form__enlace { display: inline; min-height: 44px; padding: 10px 0; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-align: left; }

.calendario .dias { min-height: 64px; font-size: 14.5px; color: rgba(255,255,255,.68); }
.calendario .dias[aria-busy="true"] { display: block; padding: 20px 0; }
.dia--col2 { grid-column-start: 2; }
.dia--col3 { grid-column-start: 3; }
.dia--col4 { grid-column-start: 4; }
.dia--col5 { grid-column-start: 5; }
.calendario .dia span { min-height: 58px; justify-content: center; color: rgba(255,255,255,.7); }
.calendario .dia input:checked + span { color: #fff; }
.calendario .dia input:disabled { cursor: not-allowed; }
.calendario .dia input:focus-visible + span { outline: 2px solid #9fb4ff; outline-offset: 2px; }
#horas { min-height: 44px; }

.form .casilla { margin-top: 6px; padding: 9px 0; }
.form .casilla:first-of-type { margin-top: 18px; }
.form .entrada[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff8a8a; }
.campo-error { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: #ffa3a3; }
.campo-error::before { content: "! "; font-weight: 700; }
.form__error:empty { min-height: 0; margin: 0; }
.form .form__error { color: #ffa3a3; }

.form__botones .boton { white-space: normal; text-align: left; min-height: 54px; }
.form__botones .boton[disabled] { opacity: .6; }
.form__atras { min-height: 44px; flex: none; }
.boton--tenue { --bg: rgba(255,255,255,.08); --fg: #fff; box-shadow: inset 0 0 0 1px var(--noche-linea); }
.form__hecho .form__titulo { margin-top: 18px; }
.form__hecho .resumen dt { color: rgba(255,255,255,.62); }
.form__hecho .resumen dd { overflow-wrap: anywhere; }
.form__sinjs { margin-top: 16px; }

@media (max-width: 767px) {
  .camino { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 12px; padding: 16px; }
  .camino__icono { width: 44px; height: 44px; }
  .camino__texto strong { font-size: 18px; }
  .calendario .dia span { min-height: 54px; }
  .form__botones { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
  .form__botones .boton { justify-content: space-between; }
  .form__atras { align-self: flex-start; }
}
/* En pantallas estrechas, las tres opciones van justo debajo del titular; los puntos de la visita, después */
@media (max-width: 1080px) {
  .contacto { row-gap: 0; }
  .contacto__lado { display: contents; }
  .contacto__lado .ceja { justify-self: start; }
  .contacto .form { order: 2; margin-top: 28px; }
  .contacto__lado ul { order: 3; margin-top: 28px; }
}
/* FIN del bloque de contacto */