/* ===========================================================================
   CIMIENTO · web pública, diseño claro — hoja de estilos única
   Loseta: rubor · Inter · degradado morado→naranja · tarjeta negra · sobrio
   Orden: fichas → base → tipografía → palabras → botones → barra → portada →
   escenarios → anuncio → planes → revelado → adaptación → sin movimiento → impresión
   =========================================================================== */
@import url('fuentes.css?v=20260916111724');

/* --- 1. Fichas --------------------------------------------------------- */
:root{
  --rubor:      rgb(254,241,238);
  --rubor-2:    rgb(252,225,224);
  --morado:     rgb(122,50,227);
  --morado-h:   rgb(115,34,237);
  --morado-600: #9333ea;
  --naranja:    rgb(253,135,61);
  --rosa:       rgb(236,72,153);
  --negro:      #000;
  --negro-2:    rgb(24,24,24);
  --blanco:     #fff;
  --n-80: rgba(0,0,0,.8); --n-75: rgba(0,0,0,.75); --n-50: rgba(0,0,0,.5); --n-30: rgba(0,0,0,.3);
  --n-25: rgba(0,0,0,.25); --n-20: rgba(0,0,0,.2); --n-18: rgba(0,0,0,.18); --n-10: rgba(0,0,0,.1);
  --n-06: rgba(0,0,0,.06); --n-05: rgba(0,0,0,.05);
  --b-90: rgba(255,255,255,.9); --b-80: rgba(255,255,255,.8); --b-60: rgba(255,255,255,.6);
  --b-50: rgba(255,255,255,.5); --b-10: rgba(255,255,255,.1);

  --texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --grad-texto: linear-gradient(100deg, var(--morado-h) 0%, var(--naranja) 100%);
  --grad-boton: linear-gradient(135deg, rgba(122,50,227,1) 0%, rgba(236,72,153,.9) 50%, rgba(253,135,61,1) 100%);
  --grad-165:   linear-gradient(165deg, rgba(122,50,227,1) 0%, rgba(253,135,61,1) 100%);
  --grad-135:   linear-gradient(135deg, var(--morado) 0%, var(--naranja) 100%);

  --suave:  cubic-bezier(.25,.46,.45,.94);
  --rapida: cubic-bezier(.44,0,.56,1);
  --muelle: cubic-bezier(.34,1.3,.64,1);
  --ancho: 1440px;
  --lado: 20px;
}

/* --- 2. Base ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--rubor); color:var(--negro); font-family:var(--texto); font-weight:500;
  font-size:16px; line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
h1,h2,h3{ font-weight:500; }
::selection{ background:var(--morado); color:#fff; }
:focus-visible{ outline:2px solid var(--morado); outline-offset:3px; border-radius:6px; }
.saltar{ position:absolute; left:-9999px; top:0; background:#000; color:#fff; padding:.8rem 1.2rem; z-index:200; }
.saltar:focus{ left:1rem; top:1rem; }
.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--lado); }
.ancho-fijo{ transform-origin:top center; }   /* la «sección escalada»: JS le pone zoom */

/* --- 3. Iconos --------------------------------------------------------- */
.ico{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico-relleno{ fill:currentColor; stroke:none; width:22px; height:22px; }
/* La marca: la N (bloque con la C vaciada) y el nombre en Bricolage Grotesque 800. */
.n{ display:block; flex:none; border-radius:22.2%; }
.marca{ display:inline-flex; align-items:center; gap:12px; color:#111111; }
.wordmark{ font-family:'Bricolage Grotesque', var(--texto); font-weight:800; font-size:22px; line-height:1; letter-spacing:-.05em; }
.pie-marca{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:56px; color:#111111; }
.pie-marca .n{ width:24px; height:24px; }
.pie-marca .wordmark{ font-size:20px; }

/* --- 4. Palabras: revelado palabra a palabra ---------------------------- */
/* Sin JS no hay spans y el texto se ve. Con JS, cada palabra entra con desenfoque. */
html.animar .palabra{
  display:inline-block; opacity:0; transform:translateY(10px); filter:blur(10px);
  transition:opacity .7s var(--muelle), transform .7s var(--muelle), filter .7s var(--muelle);
  transition-delay:var(--d, 0s);
}
html.animar .visible .palabra, html.animar .visible.palabra{ opacity:1; transform:none; filter:blur(0); }
.degradado{ background:var(--grad-texto); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.degradado .palabra{ color:transparent; -webkit-text-fill-color:transparent; }

/* --- 5. Botones -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px; height:56px; padding:0 24px;
  border-radius:18px; font-size:17px; font-weight:500; letter-spacing:-.02em; white-space:nowrap;
  transition:transform .3s var(--muelle), box-shadow .3s, background .3s, border-color .3s;
}
.btn:active{ transform:scale(.97) !important; }
.btn-grad{ background:var(--grad-boton); color:#fff; position:relative; overflow:hidden; }
.btn-grad::after{ content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 60%); opacity:0; transition:opacity .3s; }
.btn-grad:hover{ transform:scale(1.03); box-shadow:0 8px 32px rgba(122,50,227,.35), 0 4px 16px rgba(253,135,61,.25); }
.btn-grad:hover::after{ opacity:1; }
.btn-grad > *{ position:relative; z-index:1; }
.circulo{ width:28px; height:28px; border:1.5px solid var(--b-80); border-radius:50%; display:grid; place-items:center; flex:none; }
.circulo svg{ width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-linea{ border:1px solid var(--n-25); color:#000; border-radius:20px; padding:0 28px; background:transparent; }
.btn-linea:hover{ background:#fff; border-color:var(--n-10); box-shadow:0 4px 20px rgba(0,0,0,.08); transform:scale(1.03); }
.btn-negro{ background:#000; color:#fff; border-radius:20px; }
.btn-negro:hover{ transform:scale(1.02); box-shadow:0 8px 24px rgba(0,0,0,.18); }
.btn-165{ background:var(--grad-165); color:#fff; border-radius:20px; }
.btn-165:hover{ transform:scale(1.04); box-shadow:0 8px 30px rgba(122,50,227,.3); }

/* Borde giratorio del CTA principal */
.giro{ position:relative; padding:5px; display:inline-block; }
.giro-borde{ position:absolute; inset:0; border-radius:23px; overflow:hidden; }
.giro-borde::before{
  content:''; position:absolute; width:600%; height:600%; top:-250%; left:-250%;
  background:conic-gradient(from 0deg, rgb(122,50,227) 0%, rgb(253,135,61) 25%, rgb(236,72,153) 50%, rgb(122,50,227) 75%, rgb(253,135,61) 100%);
  animation:girar 3s linear infinite;
}
.giro-relleno{ position:absolute; inset:2px; border-radius:21px; background:var(--rubor); }
.giro .btn{ position:relative; }
@keyframes girar{ to{ transform:rotate(360deg); } }

/* --- 6. Barra ---------------------------------------------------------- */
.barra{ display:flex; align-items:center; justify-content:space-between; padding-top:32px; }
.logo{ width:50px; height:50px; box-shadow:15px 25px 45px rgba(0,0,0,.25); color:#000000; }
.nav-escritorio{ display:none; gap:54px; }
.nav-escritorio a{ font-size:16px; line-height:16px; font-weight:500; transition:opacity .2s; }
.nav-escritorio a:hover{ opacity:.7; }
.acciones{ display:flex; gap:12px; }
.cuadrado{
  width:50px; height:50px; border-radius:16px; border:1px solid var(--n-18); display:grid; place-items:center;
  font-size:24px; transition:background .2s;
}
.cuadrado:hover{ background:var(--n-05); }
.solo-escritorio{ display:none; }
.nav-movil{
  position:fixed; inset:0; z-index:50; background:#fff; padding:32px var(--lado);
  display:flex; flex-direction:column; opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .25s var(--suave), transform .25s var(--suave);
}
.nav-movil.abierta{ opacity:1; transform:none; pointer-events:auto; }
.nav-movil-cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.nav-movil a{ display:block; font-size:22px; font-weight:500; padding:12px 0; border-bottom:1px solid var(--n-05); opacity:0; transform:translateX(-10px); transition:opacity .3s var(--suave), transform .3s var(--suave); }
.nav-movil.abierta a{ opacity:1; transform:none; }
.nav-movil.abierta a:nth-child(2){ transition-delay:.05s; } .nav-movil.abierta a:nth-child(3){ transition-delay:.1s; }
.nav-movil.abierta a:nth-child(4){ transition-delay:.15s; } .nav-movil.abierta a:nth-child(5){ transition-delay:.2s; }

/* --- 7. Portada -------------------------------------------------------- */
.portada{ position:relative; min-height:100vh; min-height:100dvh; overflow:hidden; display:flex; flex-direction:column; background:var(--rubor); }
.portada-cuerpo{ display:flex; flex-direction:column; justify-content:space-between; gap:48px; padding-top:64px; padding-bottom:64px; flex:1; }
.copy{ display:flex; flex-direction:column; gap:32px; }
html.animar .entra{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--suave), transform .7s var(--suave); }
html.animar .entra.visible{ opacity:1; transform:none; }
html.animar .entra-x{ opacity:0; transform:translateX(40px); transition:opacity .7s var(--suave) .1s, transform .7s var(--suave) .1s; }
html.animar .entra-x.visible{ opacity:1; transform:none; }
.h1{ font-size:44px; line-height:1.1; letter-spacing:-.05em; font-weight:500; }
.h1 > span{ display:block; }
.entradilla{ font-size:16px; line-height:24px; letter-spacing:-.02em; text-wrap:balance; }
.ctas{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.confianza{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:14px; line-height:14px; letter-spacing:-.02em; }
.confianza li::before{ content:'• '; }
.imagen-portada{ width:100%; aspect-ratio:3/2; border-radius:16px; overflow:hidden; background:var(--rubor-2); }
.imagen-portada img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.mosaico{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; background:var(--rubor-2); }
.mosaico a{ display:block; overflow:hidden; border-radius:6px; }
.mosaico img{ transition:transform .6s var(--suave); }
.mosaico a:hover img{ transform:scale(1.03); }

/* Franja de oferta + cinta de marcas */
.franja{ width:100%; background:rgba(255,255,255,.82); display:flex; flex-direction:column; align-items:center; gap:18px; padding:32px var(--lado); }
.franja p{ font-size:15px; letter-spacing:-.02em; text-align:center; }
.franja a{ font-size:15px; letter-spacing:-.02em; color:var(--morado); transition:opacity .2s; }
.franja a:hover{ opacity:.7; }
.cinta{ width:100%; height:85px; overflow:hidden; display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(270deg, transparent 0%, #000 4.7%, #000 95.3%, transparent 100%);
  mask-image:linear-gradient(270deg, transparent 0%, #000 4.7%, #000 95.3%, transparent 100%); }
.cinta-pista{ display:flex; gap:30px; width:max-content; animation:cinta var(--dur, 30s) linear infinite; }
.cinta-pista span, .cinta-pista a{ height:70px; display:flex; align-items:center; gap:10px; padding:0 26px; font-size:26px; font-weight:600; letter-spacing:-.04em; color:var(--n-30); white-space:nowrap; transition:color .25s; }
.cinta-pista a:hover{ color:#111111; }
.cinta-pista small{ font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--n-30); }
.cinta-rotulo{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--n-30); margin-top:8px; }
.cinta-inversa .cinta-pista{ animation-direction:reverse; }
.cinta-inversa .cinta-pista span{ font-size:22px; font-weight:600; gap:12px; padding:0 22px; }
.cinta-inversa img{ width:28px; height:28px; opacity:.32; flex:none; filter:grayscale(1); object-fit:contain; }
.cinta-inversa img.ancho{ width:42px; height:27px; }
.cinta-inversa img.cuadro{ border-radius:6px; }
@keyframes cinta{ to{ transform:translateX(calc(-1 * var(--ancho, 0px))); } }

/* --- 8. Escenarios ----------------------------------------------------- */
.escenarios{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; background:var(--rubor); padding-block:40px; }
.escenarios .contenedor{ display:flex; flex-direction:column; gap:40px; align-items:center; }
.esc-texto{ width:100%; display:flex; flex-direction:column; gap:20px; }
.rotulo{ font-size:22px; line-height:28px; letter-spacing:-.05em; font-weight:500;
  background:linear-gradient(90deg, var(--morado-600), var(--rosa)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; width:max-content; }
.esc-h2{ min-height:110px; }
.esc-h2 h2{ font-size:44px; line-height:1.05; letter-spacing:-.05em; }
.esc-p{ min-height:120px; }
.esc-p p{ font-size:17px; line-height:1.55; letter-spacing:-.02em; color:var(--n-75); max-width:560px; }
.esc-rasgos{ min-height:232px; display:flex; flex-direction:column; gap:16px; }
.rasgo{ background:#fff; border-radius:18px; height:68px; padding:0 24px; display:flex; align-items:center; gap:16px; box-shadow:0 2px 8px rgba(0,0,0,.04); font-size:16px; color:var(--n-80); }
.rasgo i{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none; background:linear-gradient(135deg, #f3e8ff, #fce7f3); }
.rasgo i svg{ width:18px; height:18px; stroke:var(--morado-600); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
/* Entrada y salida de cada diapositiva */
.esc-h2 h2, .esc-p p, .rasgo{ transition:opacity .55s var(--suave), transform .55s var(--suave); }
.saliendo .esc-h2 h2{ opacity:0; transform:translateY(-20px); }
.saliendo .esc-p p, .saliendo .rasgo{ opacity:0; transform:translateY(-12px); }
.entrando .esc-h2 h2{ opacity:0; transform:translateY(24px); transition:none; }
.entrando .esc-p p{ opacity:0; transform:translateY(14px); transition:none; }
.entrando .rasgo{ opacity:0; transform:translateY(14px); transition:none; }
.paginacion{ display:flex; gap:12px; }
.pagina{ position:relative; width:40px; height:40px; border-radius:50%; border:1px solid var(--n-20); display:grid; place-items:center; font-size:16px; letter-spacing:-.05em; color:var(--n-30); transition:border-color .2s; }
.pagina:hover{ border-color:rgba(0,0,0,.4); }
.pagina svg{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform:rotate(-90deg); display:none; }
.pagina.activa{ border-color:transparent; background:#fff; color:#000; font-weight:600; }
.pagina.activa svg{ display:block; }
.pagina .pista{ fill:none; stroke:var(--n-06); stroke-width:2.5; }
.pagina .avance{ fill:none; stroke:url(#grad-anillo); stroke-width:2.5; stroke-linecap:round; }
.esc-visual{ width:100%; }
.esc-marco{ height:320px; border-radius:16px; overflow:hidden; background:var(--rubor-2); position:relative; }
.esc-marco img{ height:100%; width:auto; max-width:none; position:absolute; left:0; top:0; transition:opacity .7s var(--rapida), transform .7s var(--rapida); }
/* Capturas apaisadas (paneles): se encuadran por la esquina superior izquierda, donde está el contenido. */
.esc-marco img.apaisada{ width:100%; height:100%; object-fit:cover; object-position:left top; }
.esc-marco img.fuera{ opacity:0; transform:translateX(-50px) scale(.97); }
.esc-marco img.entra-der{ opacity:0; transform:translateX(80px) scale(.97); transition:none; }
.esc-marco img.oculta{ display:none; }

/* --- 9. Anuncio de la app ---------------------------------------------- */
.anuncio{ position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden; display:flex; align-items:center; background:#111; }
.anuncio-fondo{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .6s ease-in-out; }
.anuncio-fondo.activo{ opacity:1; }
.anuncio-velo{ position:absolute; inset:0; background:linear-gradient(to right, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.15) 100%); }
.fondo-lms{ background-position:center bottom; }
.fondo-crm{ background-position:right center; }
.anuncio-int{ position:relative; z-index:10; padding:64px 24px; width:100%; max-width:var(--ancho); margin-inline:auto; }
.anuncio-copy{ display:flex; flex-direction:column; gap:40px; max-width:100%; }
.app-icono{ width:80px; height:80px; box-shadow:0 25px 50px -12px rgba(0,0,0,.5); color:#ffffff; }
html.animar .app-icono{ opacity:0; transform:scale(.9) translateY(14px); transition:opacity .6s var(--muelle), transform .6s var(--muelle); }
html.animar .app-icono.visible{ opacity:1; transform:none; }
.anuncio-h2{ color:#fff; font-size:52px; line-height:56px; letter-spacing:-.05em; }
.anuncio-p{ color:var(--b-90); font-size:17px; line-height:24px; letter-spacing:-.03em; max-width:580px; }
.anuncio-h2, .anuncio-p{ transition:opacity .6s var(--suave), transform .6s var(--suave); }
.saliendo .anuncio-h2, .saliendo .anuncio-p{ opacity:0; transform:translateY(-16px); }
.entrando .anuncio-h2, .entrando .anuncio-p{ opacity:0; transform:translateY(20px); transition:none; }
.btn-165 .ico{ width:28px; height:28px; }

/* --- 9b. Cifras ------------------------------------------------------- */
.cifras{ background:#fff; padding:40px 0; border-top:1px solid var(--n-05); }
.cifras-fila{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 24px; }
.cifras-fila li{ display:flex; flex-direction:column; gap:6px; }
.cifras-fila strong{ font-size:44px; font-weight:500; letter-spacing:-.05em; line-height:1; }
.cifras-fila strong small{ font-size:.5em; color:var(--n-50); margin-left:.1em; letter-spacing:-.02em; }
.cifras-fila span{ font-size:14px; line-height:1.45; color:var(--n-50); letter-spacing:-.01em; max-width:26ch; }

/* --- 9c. Alquilar o tener, y los tres pasos --------------------------- */
.comparativa{ background:var(--rubor); padding:72px 0; }
.comp-cab{ text-align:center; max-width:640px; margin:0 auto 36px; }
.comp-cab h2{ font-size:38px; line-height:1.05; letter-spacing:-.05em; margin-bottom:14px; }
.comp-cab .parrafo{ color:var(--n-50); }
.comp-tabla{ display:grid; grid-template-columns:1fr; border:1px solid var(--n-10); border-radius:24px; overflow:hidden; background:#fff; }
.comp-col{ padding:32px 28px; }
.comp-col h3{ font-size:20px; font-weight:600; letter-spacing:-.03em; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.comp-col ul{ display:flex; flex-direction:column; gap:12px; }
.comp-col li{ font-size:16px; letter-spacing:-.01em; padding-left:18px; position:relative; }
.comp-col li::before{ content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:currentColor; }
.comp-otros{ color:var(--n-30); }
.comp-otros h3{ color:var(--n-30); }
.comp-cimiento{ background:linear-gradient(135deg, #fff 0%, rgba(122,50,227,.06) 45%, rgba(253,135,61,.14) 100%); color:#111; }
.comp-cimiento .n{ width:26px; height:26px; color:#000; }
.comp-cimiento .wordmark{ font-size:22px; }
.comp-cimiento .btn{ margin-top:26px; height:56px; font-size:17px; }
.pasos-cab{ text-align:center; margin:72px auto 32px; }
.rotulo-peq{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--morado); margin-bottom:12px; }
.pasos-cab h2{ font-size:34px; line-height:1.1; letter-spacing:-.05em; }
.pasos{ display:grid; grid-template-columns:1fr; gap:16px; counter-reset:paso; }
.pasos li{ background:#fff; border-radius:20px; padding:26px 26px 28px; display:flex; flex-direction:column; gap:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.paso-num{ font-size:13px; font-weight:600; letter-spacing:.12em; color:var(--morado); }
.pasos h3{ font-size:22px; font-weight:600; letter-spacing:-.03em; }
.pasos p{ font-size:15px; line-height:1.55; color:var(--n-75); letter-spacing:-.01em; }

/* --- 10. Planes -------------------------------------------------------- */
.planes{ min-height:100vh; min-height:100dvh; background:#fff; display:flex; align-items:center; padding-block:64px; }
.planes h2{ font-size:46px; line-height:1; letter-spacing:-.05em; text-align:center; }
.conmutador{ display:flex; justify-content:center; align-items:center; gap:20px; margin-top:28px; font-size:15px; }
.conmutador span{ opacity:.4; transition:opacity .2s; }
.conmutador span.activo{ opacity:1; }
.conmutador span:first-child{ width:70px; text-align:right; }
.interruptor{ width:52px; height:32px; border-radius:999px; padding:3px; background:var(--grad-135); position:relative; }
.interruptor i{ display:block; width:26px; height:26px; border-radius:50%; background:#fff; transition:transform .4s var(--muelle); }
.interruptor[aria-checked="true"] i{ transform:translateX(20px); }
.tarjetas{ display:flex; flex-direction:column; gap:20px; margin-top:56px; }
.plan{ flex:1; border-radius:30px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
html.animar .tarjetas.escalonado > *{ opacity:0; transform:translateY(36px); transition:opacity .7s var(--suave), transform .7s var(--suave); }
html.animar .tarjetas.escalonado.visible > *{ opacity:1; transform:none; }
html.animar .tarjetas.escalonado.visible > :nth-child(2){ transition-delay:.1s; }
html.animar .tarjetas.escalonado.visible > :nth-child(3){ transition-delay:.2s; }
.plan-arriba{ background:var(--rubor); padding:56px 28px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:28px; min-height:400px; }
.plan-abajo{ background:var(--rubor-2); padding:36px 28px; flex:1; }
.plan.oscuro .plan-arriba{ background:#000; color:#fff; }
.plan.oscuro .plan-abajo{ background:var(--negro-2); color:#fff; }
.plan h3{ font-size:42px; letter-spacing:-.05em; line-height:1; }
.plan-desc{ font-size:17px; line-height:22px; letter-spacing:-.02em; color:var(--n-80); }
.plan.oscuro .plan-desc{ color:var(--b-80); }
.precio{ display:flex; align-items:baseline; justify-content:center; gap:12px; font-size:36px; letter-spacing:-.05em; min-height:44px; }
.precio s{ color:var(--n-50); }
.plan.oscuro .precio s{ color:var(--b-50); }
.precio small{ font-size:16px; letter-spacing:-.02em; color:var(--n-50); }
.plan.oscuro .precio small{ color:var(--b-50); }
.precio, .subprecio{ transition:opacity .35s var(--suave), transform .35s var(--suave), filter .35s var(--suave); }
.cambiando .precio, .cambiando .subprecio{ opacity:0; transform:translateY(8px); filter:blur(6px); }
.plan .btn{ width:100%; height:62px; border-radius:20px; padding:0 28px; font-size:18px; }
.plan .circulo{ width:30px; height:30px; border-color:var(--b-60); }
.plan .circulo svg{ width:15px; height:15px; }
.subprecio{ font-size:14px; letter-spacing:-.02em; color:var(--n-50); max-width:30ch; }
.plan.oscuro .subprecio{ color:var(--b-50); }
.plan-abajo li{ display:flex; align-items:center; gap:14px; font-size:17px; letter-spacing:-.02em; padding:9px 0; }
.plan-abajo li i{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--n-05); }
.plan.oscuro .plan-abajo li i{ background:var(--b-10); }
.plan-abajo li svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.cinta-plan{ position:absolute; top:24px; right:-32px; transform:rotate(45deg); background:var(--grad-135); color:#fff; font-size:12px; padding:7px 40px; white-space:nowrap; }
.planes-nota{ text-align:center; font-size:14px; color:var(--n-50); margin-top:16px; letter-spacing:-.02em; }
.planes-nota a{ text-decoration:underline; text-underline-offset:3px; }

/* --- 11. Revelado genérico -------------------------------------------- */
html.animar [data-revelar]{ opacity:0; transform:translateY(var(--desde, 8px)); transition:opacity .6s var(--suave), transform .6s var(--suave); transition-delay:var(--retraso, 0s); }
html.animar [data-revelar].visible{ opacity:1; transform:none; }

/* --- 12. Adaptación ---------------------------------------------------- */
@media (min-width:640px){
  .franja p, .franja a{ font-size:16px; }
  .rotulo{ font-size:26px; }
  .esc-h2 h2{ font-size:62px; } .esc-h2{ min-height:136px; } .esc-p{ min-height:100px; }
  .esc-p p{ font-size:19px; }
  .rasgo{ font-size:17px; height:72px; } .esc-rasgos{ min-height:248px; }
  .esc-marco{ height:440px; }
  .anuncio-h2{ font-size:66px; line-height:70px; } .anuncio-p{ font-size:19px; line-height:27px; }
  .cifras-fila{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .cifras-fila strong{ font-size:52px; }
  .comp-cab h2{ font-size:48px; }
  .comp-tabla{ grid-template-columns:1fr 1.15fr; }
  .comp-col{ padding:40px; }
  .pasos{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .pasos-cab h2{ font-size:42px; }
  .app-icono{ width:100px; height:100px; }
  .btn-165{ height:62px; padding:0 28px; font-size:18px; } .btn-165 .ico{ width:30px; height:30px; }
  .planes h2{ font-size:54px; }
  .plan-arriba{ padding:64px 40px 40px; } .plan-abajo{ padding:40px; }
  .plan h3{ font-size:50px; } .plan-desc{ font-size:18px; } .precio{ font-size:38px; }
  .plan .btn{ height:66px; font-size:19px; } .plan-abajo li{ font-size:18px; }
  .btn{ height:60px; padding:0 30px; font-size:18px; } .btn-linea{ padding:0 32px; }
}
@media (min-width:768px){
  :root{ --lado:40px; }
  .logo{ width:60px; height:60px; } .wordmark{ font-size:26px; }
  .barra{ padding-top:32px; }
  .portada-cuerpo{ padding-top:80px; padding-bottom:80px; }
  .h1{ font-size:64px; }
  .entradilla{ font-size:17px; line-height:26px; }
  .franja{ padding:52px 40px 32px; }
  .escenarios{ padding-block:48px; }
  .anuncio-int{ padding:64px 40px; } .anuncio-copy{ max-width:540px; }
  .planes{ padding-block:80px; }
  .tarjetas{ margin-top:72px; }
}
@media (min-width:1024px){
  :root{ --lado:64px; }
  .nav-escritorio{ display:flex; }
  .solo-escritorio{ display:grid; }
  .solo-movil{ display:none !important; }
  .portada-cuerpo{ flex-direction:row; align-items:center; gap:32px; padding-top:100px; padding-bottom:80px; }
  .copy{ max-width:560px; gap:40px; }
  .h1{ font-size:82px; }
  .entradilla{ font-size:18px; line-height:28px; }
  .imagen-portada{ width:788px; flex:none; }
  .escenarios .contenedor{ flex-direction:row; gap:60px; align-items:flex-start; }
  .esc-texto{ width:540px; height:830px; justify-content:space-between; flex:none; }
  .esc-h2 h2{ font-size:78px; } .esc-h2{ min-height:170px; } .esc-p{ min-height:130px; } .esc-p p{ font-size:21px; }
  .rasgo{ font-size:18px; }
  .pagina{ width:44px; height:44px; }
  .esc-visual{ flex:1; height:830px; } .esc-marco{ height:100%; }
  .anuncio-velo{ background:linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.1) 100%); }
  .anuncio-int{ padding:64px; } .anuncio-copy{ max-width:580px; }
  .anuncio-h2{ font-size:78px; line-height:82px; } .anuncio-p{ font-size:22px; line-height:30px; }
  .app-icono{ width:110px; height:110px; }
  .btn-165{ height:66px; font-size:19px; } .btn-165 .ico{ width:32px; height:32px; }
  .planes h2{ font-size:58px; }
  .comparativa{ padding:96px 0; }
  .comp-cab h2{ font-size:56px; }
  .comp-col{ padding:48px; }
  .cifras{ padding:48px 0; }
  .tarjetas{ flex-direction:row; gap:24px; align-items:stretch; }
  .plan-arriba{ padding:64px 48px 40px; } .plan-abajo{ padding:40px 48px; }
  .plan h3{ font-size:56px; }
}

/* --- 13. Sin movimiento ----------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .palabra, [data-revelar], .entra, .entra-x, .app-icono, .escalonado > *{ opacity:1 !important; transform:none !important; filter:none !important; }
  .giro-borde::before{ animation:none; }
  .cinta-pista{ animation:none; }
}

/* --- 14. Impresión ----------------------------------------------------- */
@media print{
  .anuncio, .nav-movil, .cinta, .giro-borde{ display:none !important; }
  .portada, .escenarios, .planes{ min-height:0; }
  .palabra, [data-revelar], .entra, .entra-x, .escalonado > *{ opacity:1 !important; transform:none !important; filter:none !important; }
  .esc-texto{ height:auto; }
}