/* RC Studio · estilos
   Lenguaje de producto inspirado en Apple: negro profundo, tipografía del sistema muy grande, mucho aire
   y escenas que se revelan al hacer scroll. Sin dependencias ni fuentes externas.
   Las animaciones solo se activan con la clase .js (la pone escenas.js); sin JavaScript todo se ve estático. */

:root {
  --negro: #000;
  --tile: #141415;
  --linea: rgba(255, 255, 255, .1);
  --texto: #f5f5f7;
  --texto-2: #a1a1a6;
  --texto-3: #86868b;
  --apagado: #3a3a3d;
  --azul: #2997ff;
  --boton: #0071e3;
  --boton-hover: #0077ed;
  --claro: #f5f5f7;
  --tinta: #1d1d1f;
  --tinta-2: #6e6e73;
  --azul-claro: #0066cc;
  --grad: linear-gradient(90deg, #ffb340 0%, #ff6b3d 28%, #ff2d78 62%, #a85cff 100%);
  --grad-oscuro: linear-gradient(90deg, #c2410c 0%, #d61f69 55%, #7c3aed 100%);
  --radio: 28px;
  --margen: 22px;
  --ancho: 980px;
  --ancho-max: 1180px;
  --nav: 52px;
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --curva: cubic-bezier(.2, .65, .2, 1);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 12px); }
body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font: 400 17px/1.47 var(--fuente);
  letter-spacing: -.016em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
sup { font-size: .6em; line-height: 0; vertical-align: super; margin-left: .1em; }
sup a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: .6rem 1rem; border-radius: 10px; background: var(--texto); color: var(--negro); font-weight: 600;
}
.saltar:focus { top: 12px; text-decoration: none; }
.icono { width: 1.1em; height: 1.1em; flex: none; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.contenedor-ancho { width: min(100% - 2 * var(--margen), var(--ancho-max)); }
.seccion { padding-block: clamp(5.5rem, 3rem + 9vw, 10rem); }

/* ---------- tipografía ---------- */
.ceja {
  margin: 0 0 .6rem;
  width: fit-content;
  font: 600 clamp(1.125rem, 1rem + .5vw, 1.3125rem)/1.2 var(--fuente-titulos);
  letter-spacing: .002em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.titulo {
  margin: 0;
  font: 700 clamp(2.5rem, 1.55rem + 4vw, 4.5rem)/1.06 var(--fuente-titulos);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.intro {
  margin: 1.6rem 0 0;
  max-width: 34em;
  font: 600 clamp(1.1875rem, 1.05rem + .55vw, 1.5rem)/1.33 var(--fuente-titulos);
  letter-spacing: -.012em;
  color: var(--texto-2);
}
.intro strong { color: var(--texto); font-weight: 600; }
.degradado { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .7rem 1.4rem;
  border-radius: 980px; background: var(--boton); color: #fff;
  font: 400 17px/1.2 var(--fuente); letter-spacing: -.016em;
  transition: background-color .2s ease, transform .2s ease;
}
.boton:hover { background: var(--boton-hover); text-decoration: none; }
.boton:active { transform: scale(.98); }
.boton-chico { min-height: 32px; padding: .35rem .95rem; font-size: 14px; }
.boton-grande { min-height: 56px; padding: 1rem 1.9rem; font-size: 19px; }
.enlace-flecha { display: inline-flex; align-items: center; font-size: 17px; }
.enlace-flecha::after { content: "\00a0›"; font-size: 1.15em; line-height: 1; transition: transform .2s ease; }
.enlace-flecha:hover::after { transform: translateX(3px); }

/* ---------- navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav);
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease;
}
.nav.con-fondo {
  background: rgba(0, 0, 0, .74);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--linea);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav.con-fondo { background: rgba(0, 0, 0, .94); }
}
.nav-in { display: flex; align-items: center; gap: 1.75rem; height: 100%; width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.marca { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; color: var(--texto); font: 600 1.25rem/1 var(--fuente-titulos); letter-spacing: -.02em; }
.marca:hover { text-decoration: none; }
.marca-logo { width: 28px; height: 28px; border-radius: 7px; }
.nav-secciones { display: none; }
.nav-secciones ul { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.nav-secciones a { color: var(--texto-2); font-size: 13px; letter-spacing: -.01em; transition: color .2s; }
.nav-secciones a:hover { color: var(--texto); text-decoration: none; }
@media (min-width: 734px) { .nav-secciones { display: block; } }
.centinela { position: absolute; top: 0; height: 1px; width: 1px; }

/* ---------- equipos (laptop y teléfono hechos con CSS) ---------- */
.laptop { position: relative; container-type: inline-size; }
.laptop-tapa {
  position: relative; padding: 2.3cqw 2.3cqw 3cqw;
  background: #0c0c0d;
  border: 1px solid #2c2c2e; border-bottom: 0;
  border-radius: 3.2cqw 3.2cqw 0 0;
  box-shadow: inset 0 0 0 .4cqw #050505;
}
.laptop-tapa::before {
  content: ""; position: absolute; top: .95cqw; left: 50%;
  width: .7cqw; height: .7cqw; border-radius: 50%; background: #1d2730; transform: translateX(-50%);
}
.vidrio { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .7cqw; background: #111; }
.vidrio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vidrio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .07), transparent 38%); pointer-events: none; }
.laptop-base {
  position: relative; width: 116%; margin-left: -8%; height: 3.4cqw;
  background: linear-gradient(180deg, #4a4a4d 0%, #2a2a2c 30%, #161617 72%, #0b0b0c 100%);
  border-radius: 0 0 9cqw 9cqw / 0 0 3cqw 3cqw;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .85);
}
.laptop-base::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 38%;
  background: #121213; border-radius: 0 0 1.2cqw 1.2cqw; transform: translateX(-50%);
}

.telefono { container-type: inline-size; }
.telefono-marco {
  padding: 3.4cqw; border-radius: 16cqw;
  background: #1b1b1d;
  box-shadow: inset 0 0 0 .55cqw #4a4a4d, inset 0 0 0 1.6cqw #080808, 0 8cqw 16cqw -6cqw rgba(0, 0, 0, .9);
}
.pantalla { position: relative; aspect-ratio: 390 / 888; overflow: hidden; border-radius: 12.6cqw; background: #262628; }
/* barra de estado de 44 px sobre 390 de ancho (10.5cqw del teléfono) y la isla dinámica */
.pantalla::before { content: ""; position: absolute; inset: 0 0 auto; height: 10.5cqw; background: inherit; z-index: 1; }
.pantalla::after {
  content: ""; position: absolute; top: 2.9cqw; left: 50%; z-index: 2;
  width: 30%; height: 6.4cqw; border-radius: 99px; background: #000; transform: translateX(-50%);
}
.pantalla-clara { background: #fff; }
.pantalla img { position: absolute; top: 10.5cqw; left: 0; width: 100%; height: auto; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(2.25rem, 1rem + 5vw, 5rem) 0 clamp(3.5rem, 2rem + 5vw, 7rem); text-align: center; overflow: clip; }
.hero-luz {
  position: absolute; left: 0; right: 0; bottom: -6%; height: 66%; pointer-events: none;
  background:
    radial-gradient(42% 52% at 50% 64%, rgba(255, 107, 61, .30), transparent 70%),
    radial-gradient(36% 46% at 30% 74%, rgba(168, 92, 255, .30), transparent 72%),
    radial-gradient(36% 46% at 72% 72%, rgba(255, 45, 120, .26), transparent 72%);
  filter: blur(24px);
}
.hero-texto { position: relative; width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.hero-marca {
  margin: 0; display: inline-block;
  font: 600 clamp(1.375rem, 1.15rem + 1vw, 1.875rem)/1.1 var(--fuente-titulos); letter-spacing: -.015em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-titulo {
  margin: .55rem auto 0; max-width: 13.5ch;
  font: 700 clamp(2.75rem, 1.35rem + 5.8vw, 6rem)/1.02 var(--fuente-titulos);
  letter-spacing: -.034em; text-wrap: balance;
}
.hero-sub {
  margin: 1.35rem auto 0; max-width: 31em;
  font: 600 clamp(1.1875rem, 1.05rem + .55vw, 1.5rem)/1.33 var(--fuente-titulos);
  letter-spacing: -.012em; color: var(--texto-2); text-wrap: balance;
}
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.hero-precio { margin: 1.4rem 0 0; font-size: 14px; color: var(--texto-3); }
.hero-equipo { position: relative; width: min(100% - 2 * var(--margen), 1040px); margin: clamp(3rem, 2rem + 4vw, 5rem) auto 0; transform-origin: 50% 20%; }
.hero-equipo-in { position: relative; padding-right: 10%; }
.telefono-hero { position: absolute; right: 0; bottom: -3%; width: 22%; }
@media (max-width: 733px) { .telefono-hero { width: 25%; } }

/* entrada al cargar */
@keyframes subir { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes subir-equipo { from { opacity: 0; transform: translate3d(0, 70px, 0) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes entra-tel { from { opacity: 0; transform: translate3d(36px, 50px, 0) rotate(5deg); } to { opacity: 1; transform: none; } }
.hero-texto > * { animation: subir 1s var(--curva) both; }
.hero-texto > :nth-child(2) { animation-delay: .08s; }
.hero-texto > :nth-child(3) { animation-delay: .2s; }
.hero-texto > :nth-child(4) { animation-delay: .3s; }
.hero-texto > :nth-child(5) { animation-delay: .38s; }
.hero-equipo-in { animation: subir-equipo 1.4s var(--curva) .3s both; }
.telefono-hero { animation: entra-tel 1.2s var(--curva) .85s both; }

/* scroll: el texto se va y el equipo crece */
.js .hero-texto { opacity: calc(1 - var(--p, 0) * 1.5); transform: translate3d(0, calc(var(--p, 0) * -70px), 0); }
.js .hero-equipo { transform: translate3d(0, calc(var(--p, 0) * -30px), 0) scale(calc(1 + var(--p, 0) * .07)); }

/* ---------- escenas fijas al hacer scroll ---------- */
.pegajoso { position: relative; }
.js .frase-escena { height: 230vh; height: 230svh; }
.js .frase-escena .pegajoso { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: var(--nav); }
.frase-escena { padding-block: 5rem; }
.js .frase-escena { padding-block: 0; }
.frase {
  margin: 0 auto; width: min(100% - 2 * var(--margen), var(--ancho));
  font: 700 clamp(2rem, 1.15rem + 3.6vw, 4.25rem)/1.12 var(--fuente-titulos);
  letter-spacing: -.03em;
}
.frase-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* gris apagado con contraste 3.9:1 (texto grande): se nota el encendido y se puede leer desde el principio */
.js .frase .p { color: #6e6e73; transition: color .35s ease; }
.js .frase .p.on { color: var(--texto); }
.js .frase .frase-grad .p.on { color: transparent; }

/* ---------- bento ---------- */
.bento {
  display: grid; gap: 14px; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "dis" "cel" "wa" "goo" "dom" "pri";
}
@media (min-width: 734px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "dis dis" "cel wa" "cel goo" "dom pri"; }
}
@media (min-width: 1068px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "dis dis cel" "wa goo cel" "dom dom pri"; }
}
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
  border-radius: var(--radio); background: var(--tile);
}
.tile h3 { margin: 0; font: 700 clamp(1.5rem, 1.25rem + 1vw, 2.125rem)/1.1 var(--fuente-titulos); letter-spacing: -.026em; text-wrap: balance; }
.tile p { margin: 0; color: var(--texto-2); max-width: 30em; }
.tile-dis { grid-area: dis; }
.tile-cel { grid-area: cel; padding-bottom: 0; }
.tile-wa { grid-area: wa; }
.tile-goo { grid-area: goo; }
.tile-dom { grid-area: dom; }
.tile-pri { grid-area: pri; }

.paletas { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: auto; padding-top: 1.5rem; }
.paleta { display: grid; gap: .65rem; }
.puntos { display: flex; }
.punto { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 3px var(--tile); }
.punto + .punto { margin-left: -12px; }
.paleta-nombre { font-size: 13px; color: var(--texto-3); }
.q1 { background: #2f5bff; } .q2 { background: #e8177d; } .q3 { background: #e9b300; } .q4 { background: #17181d; box-shadow: 0 0 0 3px var(--tile), inset 0 0 0 1px #3a3a3d; }
.g1 { background: #d32630; } .g2 { background: #2b2b2e; box-shadow: 0 0 0 3px var(--tile), inset 0 0 0 1px #48484a; } .g3 { background: #f2f2f2; }
.t1 { background: conic-gradient(from 200deg, #ffb340, #ff6b3d, #ff2d78, #a85cff, #ffb340); }
.t2, .t3 { background: var(--tile); box-shadow: 0 0 0 3px var(--tile), inset 0 0 0 2px #48484a; }
.t3 { position: relative; }
.t3::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-3); font-size: 22px; }

.telefono-tile { width: min(64%, 250px); margin: auto auto 0; padding-top: 1.75rem; }
.tile-cel .telefono-marco { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.tile-cel .pantalla { aspect-ratio: 390 / 640; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 734px) { .tile-cel { min-height: 560px; } }

.chat { display: grid; gap: .5rem; margin-top: auto; padding-top: 1rem; font-size: 15px; line-height: 1.35; letter-spacing: -.01em; }
.burbuja { margin: 0; max-width: 86%; padding: .55rem .75rem .4rem; border-radius: 14px; }
.burbuja-cliente { justify-self: end; background: #005c4b; color: #e9edef; border-bottom-right-radius: 4px; }
.burbuja-negocio { justify-self: start; background: #202c33; color: #e9edef; border-bottom-left-radius: 4px; }
.hora { display: block; margin-top: .15rem; text-align: right; font-size: 11px; color: rgba(233, 237, 239, .66); }
.palomitas { color: #53bdeb; letter-spacing: -.2em; }

.buscador {
  display: flex; align-items: center; gap: .65rem; margin-top: auto;
  padding: .85rem 1.1rem; border-radius: 99px; background: #fff; color: #202124;
  font-size: 16px; letter-spacing: 0; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}
.buscador .icono { color: #5f6368; }
.cursor { width: 1.5px; height: 1.15em; background: #1a73e8; margin-left: -.35rem; }
.js .cursor { animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.url {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content; max-width: 100%; margin-top: auto;
  padding: .8rem 1.25rem; border-radius: 14px; background: #232325; border: 1px solid #333336;
  color: var(--texto-2); font-size: clamp(15px, 1.4vw + 9px, 21px); letter-spacing: -.01em;
}
.url b { color: var(--texto); font-weight: 600; }
.url .icono { color: #34c759; }
.escudo { width: 56px; height: 56px; margin-bottom: .5rem; }

/* ---------- casos ---------- */
.casos { display: grid; gap: clamp(5rem, 3rem + 6vw, 9rem); margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.caso-cabeza { margin-bottom: 2rem; }
.caso-etiqueta { margin: 0; color: var(--texto-3); font-size: 15px; font-weight: 600; }
.caso-nombre { margin: .3rem 0 0; font: 700 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1.08 var(--fuente-titulos); letter-spacing: -.028em; }
.caso-medios { display: none; }
.caso-pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 3rem; }
.paso-figura { margin: 0 0 1.25rem; overflow: hidden; border-radius: 16px; border: 1px solid var(--linea); background: #111; }
.paso-figura img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.paso h4 { margin: 0 0 .5rem; font: 700 clamp(1.5rem, 1.25rem + .9vw, 2rem)/1.15 var(--fuente-titulos); letter-spacing: -.024em; }
.paso p { margin: 0; color: var(--texto-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); max-width: 30em; }
.caso-datos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.caso-datos li { padding: .5rem .95rem; border-radius: 99px; background: var(--tile); color: var(--texto-2); font-size: 14px; }
.caso-datos a { color: var(--azul); }
.caso-datos a::after { content: "\00a0›"; }

@media (min-width: 1068px) {
  .caso-cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(3rem, 1rem + 4vw, 5.5rem); align-items: start; }
  .caso-medios { display: block; position: sticky; top: calc(var(--nav) + 9vh); padding-right: 9%; }
  .telefono-caso { position: absolute; right: 0; bottom: -6%; width: 25%; }
  .paso-figura { display: none; }
  .caso-pasos { gap: 0; }
  .paso { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; }
  .caso-texto { padding-top: 4vh; }
  .js .paso h4 { color: #6e6e73; transition: color .5s ease; }
  .js .paso p { color: var(--texto-3); transition: color .5s ease; }
  .js .paso.activo h4 { color: var(--texto); }
  .js .paso.activo p { color: #d2d2d7; }
  .vidrio img[data-pantalla] { opacity: 0; transition: opacity .6s ease; }
  .vidrio img[data-pantalla].activa { opacity: 1; }
}

/* ---------- celular ---------- */
.cel-escena { padding-block: clamp(4rem, 2rem + 6vw, 8rem); }
.js .cel-escena { height: 320vh; height: 320svh; padding-block: 0; }
.js .cel-pegajoso { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: var(--nav); display: flex; align-items: center; overflow: hidden; }
.cel-grid { display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.cel-texto .titulo { font-size: clamp(1.75rem, 1rem + 3.2vw, 4rem); }
.cel-puntos { margin: 1.25rem auto 0; padding: 0; list-style: none; display: grid; gap: .9rem; max-width: 26em; color: var(--texto-2); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.cel-puntos strong { color: var(--texto); font-weight: 600; }
.telefono-grande { width: min(72vw, 300px); }
.js .telefono-grande { width: calc(min(52vh, 660px) * .4566); width: calc(min(52svh, 660px) * .4566); }
.cel-equipo { position: relative; }
.cel-equipo::before {
  content: ""; position: absolute; inset: 10% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(47, 91, 255, .32), transparent 70%); filter: blur(20px);
}
.telefono-grande .pantalla img { will-change: transform; }
@media (max-width: 1067px) {
  .js .cel-texto .ceja { margin-inline: auto; }
  .js .cel-grid { gap: 1rem; }
  .js .cel-puntos { display: grid; margin-top: .9rem; }
  .js .cel-puntos li { grid-area: 1 / 1; opacity: 0; transition: opacity .45s ease; }
  .js .cel-puntos li.activo { opacity: 1; }
}
@media (max-width: 1067px) and (max-height: 700px) {
  .js .cel-texto .ceja { display: none; }
  .js .cel-texto .titulo { font-size: 1.5rem; }
}
@media (min-width: 1068px) {
  .cel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 4rem; justify-items: start; align-items: center; text-align: left; }
  .cel-puntos { margin: 2.5rem 0 0; gap: 1.6rem; font-size: 1.1875rem; }
  .cel-puntos li { position: relative; padding-left: 1.4rem; }
  .cel-puntos li::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px; background: var(--apagado); transition: background-color .4s ease; }
  .js .cel-puntos li, .js .cel-puntos li strong { color: var(--texto-3); transition: color .45s ease; }
  .js .cel-puntos li.activo { color: #d2d2d7; }
  .js .cel-puntos li.activo strong { color: var(--texto); }
  .js .cel-puntos li.activo::before { background: var(--grad); }
  .cel-equipo { justify-self: center; }
  .js .telefono-grande { width: calc(min(74vh, 700px) * .4566); width: calc(min(74svh, 700px) * .4566); }
}

/* ---------- números ---------- */
.numeros { display: grid; gap: 2.75rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 734px) { .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.cifra {
  margin: 0; width: fit-content;
  font: 700 clamp(4.75rem, 3rem + 6.5vw, 8.5rem)/.95 var(--fuente-titulos); letter-spacing: -.045em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cifra-chica { font-size: .42em; letter-spacing: -.02em; }
.cifra-texto { margin: .9rem 0 0; color: var(--texto-2); max-width: 17em; }

/* ---------- proceso ---------- */
.pasos-lista { position: relative; display: grid; gap: 2.75rem; margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; padding: 0 0 0 2.4rem; list-style: none; }
.pasos-lista::before, .pasos-lista::after { content: ""; position: absolute; left: 6px; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; }
.pasos-lista::before { background: var(--apagado); }
.pasos-lista::after { background: linear-gradient(180deg, #ffb340, #ff2d78 55%, #a85cff); transform-origin: top; }
.js .pasos-lista::after { transform: scaleY(var(--p, 0)); }
.paso-p { position: relative; }
.paso-p::before {
  content: ""; position: absolute; left: calc(-2.4rem + 1px); top: .25rem; width: 12px; height: 12px; border-radius: 50%;
  background: #ff6b3d; box-shadow: 0 0 0 5px var(--negro); transition: background-color .4s ease;
}
.js .paso-p::before { background: var(--apagado); }
.js .paso-p.hecho::before { background: #ff6b3d; }
.paso-num { display: block; margin-bottom: .55rem; color: var(--texto-3); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.paso-p h3 { margin: 0 0 .45rem; font: 700 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.15 var(--fuente-titulos); letter-spacing: -.022em; }
.paso-p p { margin: 0; color: var(--texto-2); max-width: 26em; }
@media (min-width: 1068px) {
  .pasos-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem; padding: 3rem 0 0; }
  .pasos-lista::before, .pasos-lista::after { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 2px; }
  .pasos-lista::after { background: var(--grad); transform-origin: left; }
  .js .pasos-lista::after { transform: scaleX(var(--p, 0)); }
  .paso-p::before { left: 0; top: -3rem; }
}

/* ---------- secciones claras ---------- */
.claro, .blanco { color: var(--tinta); color-scheme: light; }
.claro { background: var(--claro); }
.blanco { background: #fff; }
.claro .ceja, .blanco .ceja { background-image: var(--grad-oscuro); }
.claro .intro, .blanco .intro { color: var(--tinta-2); }
.claro .intro strong, .blanco .intro strong { color: var(--tinta); }
.claro a, .blanco a { color: var(--azul-claro); }
.claro .boton, .blanco .boton { color: #fff; }

.precios { display: grid; gap: 14px; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1068px) { .precios { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.plan { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-radius: var(--radio); background: #fff; }
.plan h3 { margin: 0; font: 700 clamp(1.375rem, 1.2rem + .7vw, 1.75rem)/1.15 var(--fuente-titulos); letter-spacing: -.022em; }
.plan-precio { margin: 1.1rem 0 .35rem; font: 700 clamp(3.25rem, 2.5rem + 3vw, 5rem)/1 var(--fuente-titulos); letter-spacing: -.04em; }
.moneda { margin-left: .2em; font-size: .3em; font-weight: 600; letter-spacing: -.01em; color: var(--tinta-2); white-space: nowrap; }
.plan-nota, .plan-texto { margin: 0; color: var(--tinta-2); }
.plan-nota { font-size: 15px; }
.incluye { display: grid; gap: .75rem 1.75rem; width: 100%; margin: 1.9rem 0 2.2rem; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 734px) { .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.incluye li { position: relative; padding-left: 1.85rem; }
.incluye li::before { content: ""; position: absolute; left: 0; top: .22em; width: 19px; height: 19px; border-radius: 50%; background: #e3f5e8; }
.incluye li::after { content: ""; position: absolute; left: 7px; top: calc(.22em + 4px); width: 5px; height: 9px; border: solid #1a7f37; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan .boton { margin-top: auto; }
.plan-extra { justify-content: flex-start; }
.plan-extra .plan-texto { margin-top: .75rem; max-width: 22em; }
.letra-chica { margin: 1.5rem 0 0; font-size: 12px; color: var(--tinta-2); }

.preguntas { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid #d2d2d7; }
.preguntas details { border-bottom: 1px solid #d2d2d7; }
.preguntas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.45rem 0; cursor: pointer; list-style: none;
  font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--fuente-titulos); letter-spacing: -.016em;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-right: 4px;
  border: solid var(--tinta-2); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--curva);
}
.preguntas details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.preguntas summary:focus-visible { outline-offset: 2px; }
.preguntas details p { margin: 0 0 1.6rem; max-width: 40em; color: var(--tinta-2); }

/* ---------- cierre y pie ---------- */
.cierre { position: relative; overflow: clip; padding-block: clamp(6rem, 4rem + 10vw, 12rem); text-align: center; }
.cierre-luz {
  position: absolute; inset: 20% -10% -30%; pointer-events: none;
  background:
    radial-gradient(34% 40% at 50% 60%, rgba(255, 107, 61, .22), transparent 70%),
    radial-gradient(30% 36% at 30% 70%, rgba(168, 92, 255, .22), transparent 72%),
    radial-gradient(30% 36% at 70% 70%, rgba(255, 45, 120, .2), transparent 72%);
  filter: blur(24px);
}
.cierre .contenedor { position: relative; }
.cierre-titulo { font-size: clamp(2.75rem, 1.35rem + 5.8vw, 6rem); line-height: 1.02; letter-spacing: -.034em; }
.cierre .intro { margin-inline: auto; text-wrap: balance; }
.cierre-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.contacto-datos { margin: 1.75rem 0 0; color: var(--texto-3); font-size: 14px; }

.pie { padding: 2.5rem 0 3rem; border-top: 1px solid var(--linea); background: #0b0b0c; color: var(--texto-3); font-size: 12px; line-height: 1.5; letter-spacing: -.005em; }
.notas { display: grid; gap: .55rem; margin: 0 0 1.5rem; padding-left: 1.1rem; }
.notas li::marker { color: var(--texto-3); }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.pie-fila p { margin: 0; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.pie-enlaces a { color: var(--texto-2); }

/* ---------- páginas internas ---------- */
.legal { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(5rem, 3rem + 6vw, 8rem); }
.contenedor-texto { width: min(100% - 2 * var(--margen), 720px); }
.migas { margin-bottom: 1.5rem; color: var(--texto-3); font-size: 14px; }
.migas a { color: var(--texto-2); }
.legal .titulo { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); }
.legal-fecha { margin: .9rem 0 2rem; color: var(--texto-3); font-size: 14px; }
.legal h2 { margin: 2.5rem 0 .75rem; font: 700 1.5rem/1.2 var(--fuente-titulos); letter-spacing: -.02em; }
.legal p, .legal li { color: var(--texto-2); }
.legal strong { color: var(--texto); font-weight: 600; }
/* enlaces dentro de un párrafo: subrayados para no depender solo del color */
.legal p a, .legal li a, .migas a, .contacto-datos a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .5rem; }
.no-existe { min-height: 70vh; display: grid; align-items: center; padding-block: 5rem; }

/* ---------- aparecer al entrar ---------- */
.js [data-aparece] { opacity: 0; transform: translate3d(0, 42px, 0); transition: opacity 1s var(--curva), transform 1s var(--curva); }
.js [data-aparece].visible { opacity: 1; transform: none; }
.js .r1 { transition-delay: .09s; }
.js .r2 { transition-delay: .18s; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
.quieto .hero-texto, .quieto .hero-equipo { opacity: 1; transform: none; }
.quieto [data-aparece] { opacity: 1; transform: none; }
.quieto .frase-escena, .quieto .cel-escena { height: auto; padding-block: clamp(4rem, 2rem + 6vw, 8rem); }
.quieto .frase-escena .pegajoso, .quieto .cel-pegajoso { position: relative; height: auto; padding-top: 0; }
.quieto .frase .p { color: var(--texto); }
.quieto .frase .frase-grad .p { color: transparent; }
.quieto .cel-puntos li { grid-area: auto; opacity: 1; }
.quieto .pasos-lista::after { transform: none; }
.quieto .paso-p::before { background: #ff6b3d; }
.quieto .telefono-grande { width: min(72vw, 300px); }