/* Copia literal del CSS de la portada (index.html, t388 16-oct) para que /app tenga la misma cabecera, letras, colores, botones y pie.
   Si cambia el estilo de la portada, hay que volver a copiarlo: node /work/t388/construir.mjs */
<style>
  @font-face{
    font-family:'Clash Display';
    src:url('/assets/clash-600.woff2') format('woff2');
    font-weight:600; font-display:swap;
  }
  @font-face{
    font-family:'Clash Display';
    src:url('/assets/clash-700.woff2') format('woff2');
    font-weight:700; font-display:swap;
  }

  :root{
    --void:#05070d;
    --deep:#0a1128;
    --deep2:#0f1a38;
    --deep3:#141f42;
    --blue:#0830B4;
    --blue-soft:#7290ff;
    --blue-brand:#061E7A;
    --paper:#eef1f5;
    --card:#e3e7ed;
    --line-l:#d7dce4;
    --ink:#0d1120;
    --muted:#5b6272;
    --white:#f5f7fb;
    --muted-d:#95a0bd;
    --line-d:rgba(255,255,255,.09);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  .splash{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:transparent;
    transition:opacity .6s ease, visibility .6s ease;
  }
  .splash-wrap{position:relative;display:flex;align-items:center;justify-content:center}
  .splash-logo{
    width:min(50vw,262px);
    height:auto;
    opacity:0;
    transform:scale(.72);
    filter:blur(14px);
    animation:splashIn .95s cubic-bezier(.16,1,.3,1) forwards;
    will-change:transform,opacity,filter;
  }
  /* Halo que se abre detras de la M, como el destello de un arranque. */
  .splash-halo{
    position:absolute;
    width:min(74vw,420px);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle, rgba(88,150,255,.34) 0%, rgba(88,150,255,.10) 42%, transparent 68%);
    opacity:0;
    transform:scale(.5);
    animation:splashHalo 1.15s cubic-bezier(.16,1,.3,1) forwards;
    pointer-events:none;
  }
  /* Barrido de luz que cruza la M una sola vez. */
  .splash-wrap::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
    mix-blend-mode:screen;
    opacity:0;
    /* Recortado con la forma de la M: si no, el brillo se ve como un rectangulo
       cruzando la pantalla en vez de como un reflejo sobre el logo. */
    /* La mascara solo usa el canal alfa, asi que no hace falta el PNG en color
       de 477 KB: el navegador lo bajaba entero solo para esto, aunque la M que
       se ve viene del webp. En alfa son 120 KB. Medido el 30-ago. */
    -webkit-mask-image:url('/assets/logo-hero-mask.png');
    mask-image:url('/assets/logo-hero-mask.png');
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    animation:splashBarrido .85s ease-out .34s forwards;
    pointer-events:none;
  }
  /* La M no se desvanece: VUELA a su sitio en la barra de arriba. Es la misma
     imagen moviendose, asi que la persona ve de donde sale el logo del menu.
     Se calcula en JavaScript porque el sitio de destino depende del ancho. */
  .splash.volando{background:transparent;transition:background .55s ease}
  .splash.volando .splash-halo,.splash.volando .splash-wrap::after{opacity:0;transition:opacity .25s}
  .splash-fondo{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%, var(--deep2), var(--void) 75%);
    transition:opacity .55s ease;z-index:-1}
  .splash.volando .splash-fondo{opacity:0}
  .splash-logo.vuela{
    transition:transform .78s cubic-bezier(.62,.02,.2,1), opacity .3s ease .5s;
    will-change:transform,opacity;
  }
  /* El logo de la barra se enciende justo cuando aterriza la M encima. */
  .nav .brand img{transition:opacity .3s ease}
  body.m-volando .nav .brand img{opacity:0}

  .splash.hide{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.06)}
  .splash{transition:opacity .6s ease, visibility .6s ease, transform .6s cubic-bezier(.16,1,.3,1)}
  body.splash-lock{overflow:hidden;height:100vh}
  @keyframes splashIn{
    0%{opacity:0;transform:scale(.72);filter:blur(14px)}
    46%{opacity:1;transform:scale(1.06);filter:blur(0)}
    62%{transform:scale(.985)}
    78%{transform:scale(1.015)}
    100%{opacity:1;transform:scale(1);filter:blur(0)}
  }
  @keyframes splashHalo{
    0%{opacity:0;transform:scale(.5)}
    40%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.25)}
  }
  @keyframes splashBarrido{
    0%{opacity:0;transform:translateX(-115%)}
    22%{opacity:1}
    100%{opacity:0;transform:translateX(115%)}
  }
  @media (prefers-reduced-motion: reduce){
    .splash-logo{animation:none;opacity:1;transform:none;filter:none}
    .splash-halo,.splash-wrap::after{display:none}
    .splash.hide{transform:none}
    .splash-logo.vuela{transition:opacity .3s ease}
    body.m-volando .nav .brand img{opacity:1}
  }
  body{
    font-family:'Manrope',system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Clash Display',sans-serif;font-weight:600;line-height:1.08;letter-spacing:-0.01em}
  a{color:inherit;text-decoration:none}
  img,video{max-width:100%;display:block}
  .wrap{max-width:1120px;margin:0 auto;padding:0 32px}
  section{padding:128px 0;position:relative}
  @media (max-width:720px){ section{padding:76px 0} .wrap{padding:0 22px} }

  .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
  .kicker::before{content:"";width:18px;height:1.5px;background:var(--blue)}
  .dark .kicker::before{background:var(--blue-soft)}
  .dark .kicker{color:var(--blue-soft)}
  .sec-head{max-width:640px;margin-bottom:56px}
  .sec-head h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px}
  .sec-head p{color:var(--muted);font-size:16.5px;max-width:520px}
  .dark .sec-head p{color:var(--muted-d)}

  /* reveal system */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .stagger{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}
  .stagger.in{opacity:1;transform:none}

  /* NAV */
  .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;transition:background .3s,padding .3s,border-color .3s;border-bottom:1px solid transparent;background:transparent}
  /* Arriba del todo la barra cortaba en seco contra la seccion de abajo y se veia
     la linea. El fondo y el cristal pasan a esta capa, que se apaga hacia abajo
     con una mascara para que no quede borde. La capa se va sola al hacer scroll:
     el estado .solid sigue sin backdrop-filter, que es el arreglo de rendimiento
     del 24-ago y no se toca. */
  .nav::after{content:'';position:absolute;left:0;right:0;top:0;bottom:-34px;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg, rgba(8,13,32,.78) 0%, rgba(8,13,32,.60) 52%, rgba(8,13,32,0) 100%);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
    transition:opacity .3s}
  .nav.solid::after{opacity:0}
  section[id]{scroll-margin-top:84px;position:relative}
  section[id].seccion-flash::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 1px rgba(114,144,255,0), inset 0 0 90px rgba(114,144,255,0);animation:seccionFlash 1.5s cubic-bezier(.16,1,.3,1)}
  @keyframes seccionFlash{
    0%{box-shadow:inset 0 0 0 1px rgba(114,144,255,0), inset 0 0 90px rgba(114,144,255,0)}
    18%{box-shadow:inset 0 0 0 1px rgba(114,144,255,.5), inset 0 0 90px rgba(114,144,255,.16)}
    100%{box-shadow:inset 0 0 0 1px rgba(114,144,255,0), inset 0 0 90px rgba(114,144,255,0)}
  }

  /* línea futurista entre secciones */
  section[id]:not(#inicio)::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(560px,68%);height:1px;background:linear-gradient(90deg, transparent, rgba(114,144,255,.55) 45%, rgba(114,144,255,.9) 50%, rgba(114,144,255,.55) 55%, transparent);background-size:220% 100%;animation:shimmerLinea 7s linear infinite;opacity:.55;pointer-events:none;z-index:1}
  @keyframes shimmerLinea{0%{background-position:160% 0}100%{background-position:-60% 0}}

  /* transición suave entre secciones claras y oscuras: sin esto el cambio de fondo es un corte seco */
  section[id].blend-void::before,section[id].blend-paper::before{content:'';position:absolute;top:0;left:0;right:0;height:180px;pointer-events:none;z-index:1}
  section[id].blend-void::before{background:linear-gradient(180deg, var(--void), transparent)}
  section[id].blend-paper::before{background:linear-gradient(180deg, var(--paper), transparent)}
  section[id].blend-void>.wrap,section[id].blend-paper>.wrap{position:relative;z-index:2}
  @media (max-width:720px){ section[id].blend-void::before,section[id].blend-paper::before{height:110px} }

  /* entrada de inicio a "como trabajo": sin linea y con un degradado mas largo y curvo, para que no se vea un borde */
  section#como-trabajo::after{display:none}
  section#como-trabajo.blend-void::before{height:260px;background:linear-gradient(180deg, var(--void) 0%, rgba(5,7,13,.86) 14%, rgba(5,7,13,.62) 30%, rgba(5,7,13,.38) 46%, rgba(5,7,13,.19) 64%, rgba(5,7,13,.06) 82%, transparent 100%)}
  @media (max-width:720px){ section#como-trabajo.blend-void::before{height:170px} }
  .nav.solid{background:rgba(5,7,13,.94);backdrop-filter:none;-webkit-backdrop-filter:none;padding:14px 0;border-color:var(--line-d)}
  .nav-row{display:flex;align-items:center;justify-content:space-between;gap:34px;max-width:1240px;margin:0 auto;padding:0 32px}
  .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-right:8px;padding:6px 0;min-height:44px}
  .brand img{width:26px;height:26px;object-fit:contain}
  .brand span{font-family:'Clash Display',sans-serif;font-weight:700;font-size:15px;letter-spacing:.03em;color:var(--white)}
  .navlinks{display:flex;align-items:center;gap:20px}
  .nav-ig{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.16);color:var(--white);transition:background .2s,border-color .2s,transform .2s;flex-shrink:0}
  .nav-ig svg{width:16px;height:16px}
  .nav-ig:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
  .navlinks a{position:relative;font-size:13.5px;font-weight:500;color:var(--muted-d);transition:color .2s;white-space:nowrap}
  .navlinks a:hover{color:var(--white)}
  .navlinks a.active{color:var(--white)}
  .navlinks a.active::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--blue-soft);border-radius:2px}
  .nav-link-sutil{font-size:12px;opacity:.6;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
  .nav-link-sutil:hover{opacity:1}
  .mobile-panel .nav-link-sutil{font-size:14px;opacity:.65}
  .nav-cta{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg, var(--blue), var(--blue-soft));color:#fff;font-size:12.5px;font-weight:700;padding:9px 17px;border-radius:100px;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 22px -8px rgba(8, 48, 180,.6);margin-left:18px;white-space:nowrap}
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px -8px rgba(8, 48, 180,.75)}
  #langFlash{position:fixed;inset:0;background:radial-gradient(circle at 50% 15%,rgba(91,130,255,.4),rgba(91,130,255,0) 65%);opacity:0;pointer-events:none;z-index:9999;transition:opacity .4s ease}
  #langFlash.show{opacity:1;transition:opacity .12s ease}
  .lang-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:rgba(255,255,255,.08) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M1 1l3.5 3.5L8 1' stroke='%23a8b0bb' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 9px center;border:1px solid rgba(255,255,255,.18);border-radius:100px;color:var(--muted-d);font-size:11px;font-weight:700;letter-spacing:.03em;padding:11px 22px 11px 11px;min-height:44px;margin-left:16px;flex-shrink:0;cursor:pointer;font-family:'Manrope',sans-serif}
  .lang-select:hover,.lang-select:focus{color:#fff}
  .lang-select option{background:#0c1016;color:#fff}
  .mobile-panel .lang-select{margin:0 0 4px;align-self:flex-start;font-size:12.5px;padding:10px 24px 10px 14px}
  .burger{display:none;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;flex-shrink:0;padding:12px;margin:-12px;min-width:44px;min-height:44px}
  .burger-lines{display:flex;flex-direction:column;gap:5px;width:22px;animation:burgerFloat 3.6s ease-in-out infinite}
  .burger-lines span{height:2px;background:var(--white);border-radius:2px;transition:.3s}
  @keyframes burgerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
  @media (prefers-reduced-motion: reduce){
    .burger-lines{animation:none}
  }
  /* Este apretado tenia tope en 1330 px, asi que POR ENCIMA de ese ancho la
     barra volvia a las separaciones grandes y su contenido sumaba 1.335 px
     dentro de los 1.240 que tiene de ancho maximo: el boton de «Solicitar
     valoracion» se salia 5 px por la derecha en una pantalla de 1440, que es la
     de un portatil normal. Medido el 30-ago. Se quita el tope: lo que se pierde
     es un punto de letra en el menu, y lo que se gana es que el boton que mas
     importa se vea entero. La barra sigue alineada con el resto de la pagina,
     que es lo que se notaria si tocara el ancho maximo. */
  /* 25-sep-2026: entra «Reserva tu cita» y son nueve enlaces. Con los huecos de
     antes el boton de «Solicitar valoracion» volvia a salirse por la derecha en
     una pantalla de 1280 (llegaba al pixel 1293). Se aprieta un punto mas. */
  @media (min-width:1151px){
    .navlinks{gap:11px}
    .navlinks a{font-size:12.3px}
    /* Los huecos sumaban mas de lo que cabia dentro del ancho maximo de la fila,
       asi que el boton de "Solicitar valoracion" se salia por la derecha: 1.213
       px de contenido en una caja de 1.176. En una pantalla ancha no se notaba
       porque se desbordaba hacia el margen vacio, pero a 1.280, que es lo que
       mide un portatil de 13 pulgadas, el boton se cortaba por la mitad de la
       ultima letra. Con estos huecos el contenido cabe con sitio de sobra. */
    .nav-row{gap:14px}
    .nav-cta{margin-left:8px}
  }

  /* Entre 1151 y 1279 la barra de ordenador ya esta puesta pero la pantalla
     todavia es estrecha, y ahi seguia sin caber por 65 px. Se aprieta un poco
     mas solo en esa franja. Por debajo de 1151 esto no aplica: ahi manda el
     menu de hamburguesa. */
  @media (min-width:1151px) and (max-width:1339px){
    .nav-row{gap:10px;padding:0 20px}
    .navlinks{gap:8px}
    .navlinks a{font-size:11.5px}
    .nav-cta{margin-left:4px;padding:9px 13px}
  }
  /* En un movil de verdad la barra no cabia y el BOTON DEL MENU se salia por la
     derecha: medido el 30-ago, empezaba en el pixel 393 de una pantalla de 390,
     asi que no se podia pulsar en ningun telefono (de 320 a 430 px). La marca,
     el idioma y el boton tienen los tres prohibido encogerse, y entre relleno y
     separacion se iban 92 px. Apretando esos dos sobran 11 px y entra. No se
     quita nada de la barra. */
  /* En las pantallas mas estrechas que quedan (un iPhone SE mide 320) todavia
     falta sitio: ahi el nombre baja un punto. Es lo unico que se toca, y solo
     por debajo de 360 px. */
  @media (max-width:360px){
    /* Por debajo de 360 no cabe el nombre escrito Y el boton del menu a la vez.
       Se queda el logo, que identifica igual, y el menu se puede pulsar, que es
       lo que permite navegar. Un nombre bonito que impide abrir el menu no sirve
       de nada. */
    .brand span{display:none}
  }
  @media (max-width:520px){
    .nav-row{gap:10px;padding:0 14px}
    .lang-select{margin-left:6px}
    #langToggleDesktop{margin-right:4px}
  }
  @media (max-width:1150px){
    .navlinks{display:none}
    .nav-ig.desktop-only{display:none}
    .nav-cta.desktop-only{display:none}
    .burger{display:flex}
    #langToggleDesktop{margin-left:auto;margin-right:10px;font-size:11px;padding:9px 18px 9px 9px;background-position:right 7px center}
  }
  body.mp-quieto{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  /* Con el cajon abierto la barra de arriba se va. Si se queda, su selector
     de idioma flota por encima del velo (la barra va en la capa 100 y el
     velo en la 98) y se ven DOS selectores a la vez, que es justo lo que
     salia en la captura que lo destapo. El menu ya tiene su propia equis, asi
     que no se pierde la forma de cerrarlo. */
  body.mp-quieto .nav{opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
  .mp-fondo{position:fixed;inset:0;z-index:98;background:rgba(5,7,13,.66);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s}
  .mp-fondo.open{opacity:1;visibility:visible}
  .mobile-panel{position:fixed;top:0;right:0;bottom:0;z-index:101;
    width:min(88vw,362px);display:flex;flex-direction:column;
    background:linear-gradient(180deg,#0c1119 0%,#05070d 62%);
    border-left:1px solid rgba(255,255,255,.1);border-radius:26px 0 0 26px;
    box-shadow:-30px 0 70px -20px rgba(0,0,0,.72);
    transform:translateX(102%);transition:transform .42s cubic-bezier(.16,1,.3,1);
    padding:calc(14px + env(safe-area-inset-top,0px)) 0 calc(14px + env(safe-area-inset-bottom,0px))}
  .mobile-panel.open{transform:translateX(0)}
  .mp-cab{display:flex;align-items:center;justify-content:space-between;
    padding:4px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
  .mp-cab-marca{display:flex;align-items:center;gap:9px}
  .mp-cab-marca img{height:22px;width:auto;display:block}
  .mp-cab-marca span{font-family:'Clash Display',sans-serif;font-weight:700;
    font-size:11px;letter-spacing:.16em;color:#fff}
  .mp-x{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    margin:-8px -8px -8px 0;border:1px solid rgba(255,255,255,.14);border-radius:50%;
    background:rgba(255,255,255,.05);color:#fff;cursor:pointer;flex-shrink:0;
    transition:background .2s,border-color .2s}
  .mp-x:hover,.mp-x:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
  .mp-x svg{width:17px;height:17px}
  .mp-lista{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:14px 14px 4px;display:flex;flex-direction:column;gap:7px}
  .mp-rot{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(255,255,255,.34);padding:12px 6px 4px}
  .mobile-panel a.mp-fila{display:flex;align-items:center;gap:13px;min-height:54px;
    padding:11px 14px;border-radius:15px;background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);color:#fff;
    font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:600;letter-spacing:-.005em;
    transition:background .2s,border-color .2s,transform .2s}
  .mobile-panel a.mp-fila:hover,.mobile-panel a.mp-fila:focus-visible{
    background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.17)}
  .mobile-panel a.mp-fila:active{transform:scale(.985)}
  .mobile-panel a.mp-fila.selected{background:rgba(8,48,180,.3);border-color:var(--blue-soft);color:#fff}
  .mp-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
    border-radius:11px;background:rgba(91,130,255,.15);color:var(--blue-soft);flex-shrink:0}
  .mp-ico svg{width:17px;height:17px}
  .mobile-panel a.mp-fila.sec{min-height:46px;font-size:14px;font-weight:500;
    color:rgba(255,255,255,.76);background:transparent;border-color:rgba(255,255,255,.06)}
  .mobile-panel a.mp-fila.sec .mp-ico{width:29px;height:29px;border-radius:9px;
    background:rgba(255,255,255,.06);color:rgba(255,255,255,.62)}
  .mobile-panel a.mp-fila.sec .mp-ico svg{width:15px;height:15px}
  .mp-pie{flex-shrink:0;padding:12px 14px 2px;border-top:1px solid rgba(255,255,255,.08);
    display:flex;flex-direction:column;gap:10px}
  .mobile-panel .lang-select{margin:0;width:100%;font-size:13px;
    padding:13px 34px 13px 15px;border-radius:14px;background-position:right 15px center}
  .mobile-panel a.nav-cta{margin:0;justify-content:center;width:100%;
    padding:15px 18px;font-size:14px;border-radius:14px}

  /* HERO */
  .hero{min-height:100svh;display:flex;align-items:center;background:var(--void);position:relative;overflow:hidden;padding-top:120px}
  .hero::before{content:"";position:absolute;top:0;left:0;right:0;height:180px;z-index:1;pointer-events:none;background:linear-gradient(180deg, var(--deep) 0%, transparent 100%)}
  .hero-bg{position:absolute;inset:0;z-index:0}
  .hero-bg img,.hero-bg video{width:100%;height:112%;object-fit:cover;object-position:50% 40%;opacity:.55;will-change:transform}
  .hero-bg::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg, rgba(5,7,13,.55) 0%, rgba(5,7,13,.65) 40%, var(--void) 96%),
    linear-gradient(100deg, var(--void) 8%, rgba(5,7,13,.35) 45%, rgba(5,7,13,.1) 70%)}
  .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(114,144,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(114,144,255,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,black,transparent 75%)}
  .hero-content{position:relative;z-index:2;max-width:680px}
  .hero-content .kicker{color:var(--blue-soft)}
  .hero h1{font-size:clamp(38px,6.4vw,68px);color:var(--white);margin-bottom:22px}
  .hero h1 em{font-style:normal;color:var(--blue-soft)}
  .hero .lead{font-size:18px;color:var(--muted-d);max-width:520px;margin-bottom:36px}
  .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:16px 28px;border-radius:100px;font-weight:700;font-size:15px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .25s,filter .25s}
  .btn:active{transform:translateY(0) scale(.96)}
  .btn-primary{background:linear-gradient(135deg, var(--blue), var(--blue-soft));color:#fff;box-shadow:0 10px 30px -10px rgba(8, 48, 180,.65)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(8, 48, 180,.8);filter:brightness(1.08)}
  .btn-primary:active{filter:brightness(1)}
  .btn-ghost{border:1.5px solid var(--line-d);color:var(--white)}
  .btn-ghost:hover{border-color:var(--blue-soft);background:rgba(114,144,255,.08)}
  .scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted-d);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
  .scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--blue-soft),transparent);animation:cueMove 1.8s ease-in-out infinite}
  @keyframes cueMove{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

  .stat-float{position:absolute;z-index:2;background:linear-gradient(150deg, rgba(8, 48, 180,.32), rgba(10,17,40,.85));backdrop-filter:blur(10px);border:1px solid rgba(114,144,255,.45);border-radius:14px;padding:16px 20px;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 34px -10px rgba(8, 48, 180,.55)}
  .stat-float .n{font-family:'Clash Display',sans-serif;font-size:26px;color:var(--white);font-weight:700}
  .stat-float .l{font-size:11.5px;color:var(--blue-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
  .stat-1{right:6%;top:26%;animation:floatY 6s ease-in-out infinite}
  .stat-2{right:12%;top:52%;animation:floatY 7s ease-in-out infinite 1s}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  @media (max-width:960px){ .stat-float{display:none} }

  /* MANIFESTO */
  .manifesto{background:var(--deep);padding:100px 0;text-align:center}
  .manifesto .wrap{max-width:760px}
  .manifesto .bar{width:44px;height:2px;background:var(--blue);margin:0 auto 28px}
  .manifesto p{font-family:'Clash Display',sans-serif;font-weight:600;font-size:clamp(24px,3.6vw,36px);color:var(--white);line-height:1.35}
  .manifesto p span{color:var(--blue-soft)}

  /* dark section base */
  .dark{background:var(--void);color:var(--white)}
  .dark h2,.dark h3{color:var(--white)}
  .dark p{color:var(--muted-d)}

  /* COMO TRABAJO timeline */
  .timeline{position:relative;padding-left:2px}
  .tline{position:absolute;left:23px;top:8px;bottom:8px;width:1.5px;background:linear-gradient(var(--line-l),var(--line-l))}
  .tstep{display:grid;grid-template-columns:48px 1fr;gap:26px;position:relative;padding-bottom:52px}
  .tstep:last-child{padding-bottom:0}
  .tnum{width:48px;height:48px;border-radius:50%;background:#fff;border:1.5px solid var(--line-l);display:flex;align-items:center;justify-content:center;font-family:'Clash Display',sans-serif;font-weight:700;font-size:15px;color:var(--blue);position:relative;z-index:1;flex-shrink:0}
  .tstep.in .tnum{background:var(--blue);color:#fff;border-color:var(--blue)}
  .tstep h3{font-size:20px;margin-bottom:8px}
  .tstep p{color:var(--muted);font-size:15.5px;max-width:520px}
  .timeline-close{margin-top:12px;padding-left:74px;font-weight:700;font-size:16px}

  /* ASESORIA */
  .ases-grid{max-width:1060px;display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:center}
  .sobre-photo.ases-foto{aspect-ratio:2/3}
  @media (max-width:860px){ .ases-grid{grid-template-columns:1fr;gap:30px;max-width:640px} }
  .ases-list{display:flex;flex-direction:column;gap:0}
  .ases-item{padding:26px 0 26px 16px;margin-left:-16px;border-top:1px solid var(--line-d);border-left:2px solid transparent;transition:border-color .25s,background .25s}
  .ases-item:last-child{border-bottom:1px solid var(--line-d)}
  .ases-item:hover{border-left-color:var(--blue-soft);background:rgba(114,144,255,.05)}
  .ases-item .an{font-family:'Clash Display',sans-serif;color:var(--blue-soft);font-size:13px;font-weight:700;letter-spacing:.08em;margin-bottom:8px;display:block}
  .ases-item h3{font-size:19px;margin-bottom:8px}
  .ases-item p{font-size:15px;max-width:480px}
  .ases-item .demo-shot{margin-top:14px;max-width:220px;border-radius:12px;overflow:hidden;border:1px solid var(--line-d);box-shadow:0 14px 30px -18px rgba(0,0,0,.5)}
  .ases-item .demo-shot img{width:100%;display:block}

  /* RESULTADOS */
  .testi-hint{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;margin-bottom:14px;transition:opacity .4s}
  .resultados-grid{position:relative;width:230px;aspect-ratio:9/13;margin:0 auto 40px;touch-action:pan-y}
  @media (min-width:720px){ .resultados-grid{width:260px} }
  .testi-card{position:absolute;inset:0;border-radius:18px;overflow:hidden;aspect-ratio:9/13;background:#000;cursor:pointer;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1);box-shadow:0 24px 50px -20px rgba(0,0,0,.55)}
  .testi-dots{display:flex;gap:0;justify-content:center;margin-bottom:28px}
  .testi-dot{width:7px;height:7px;border-radius:50%;background-color:#b9c1cf;border:none;box-sizing:content-box;padding:19px;background-clip:content-box;cursor:pointer;transition:background .2s,transform .2s}
  .testi-dot.active{background-color:var(--blue);transform:scale(1.15)}
  .testi-card video{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;background:transparent}
  .testi-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    border-radius:inherit;pointer-events:none}
  .testi-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);transition:opacity .3s}
  .testi-card .play .pb{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -6px rgba(0,0,0,.5);transition:transform .25s}
  .testi-card:hover .pb{transform:scale(1.08)}
  .testi-card .play .pb svg{margin-left:3px}
  .testi-card.playing .play{opacity:0;pointer-events:none}
  .testi-card .tag{position:absolute;left:16px;bottom:16px;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:6px 12px;border-radius:100px}
  .testi-card.started .tag{display:none}
  .testi-swipe{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:100px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em;pointer-events:none;transition:opacity .4s;animation:testiSwipeNudge 1.8s ease-in-out infinite}
  .testi-swipe svg{flex-shrink:0}
  .testi-card:not(.front) .testi-swipe,.testi-card.playing .testi-swipe{display:none}
  @keyframes testiSwipeNudge{0%,100%{margin-left:0}50%{margin-left:5px}}
  .testi-ctrl-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);opacity:0;transition:opacity .25s;pointer-events:none}
  .testi-card.started .testi-ctrl-bar{opacity:1;pointer-events:auto}
  .testi-ctrl-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
  .testi-ctrl-btn:active{transform:scale(.92)}
  .testi-ctrl-bar .testi-expand{margin-left:auto}
  .testi-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(4,6,14,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
  .testi-lightbox.open{opacity:1;pointer-events:auto}
  .testi-lightbox video{max-width:min(92vw,440px);max-height:88vh;border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
  .testi-lightbox-close{position:absolute;top:22px;right:22px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;line-height:1}
  .entrega-head{margin:56px 0 22px}
  .entrega-head h3{font-family:'Clash Display',sans-serif;font-weight:600;font-size:19px;color:var(--ink)}
  .entrega-head p{font-size:14.5px;color:var(--muted);margin-top:6px}
  .entrega-deck{position:relative;width:min(300px,74vw);aspect-ratio:900/1274;height:auto;margin:0 auto 18px;touch-action:pan-y;cursor:grab;outline:none;-webkit-tap-highlight-color:transparent}
  .entrega-deck:active{cursor:grabbing}
  .entrega-deck:focus-visible{box-shadow:0 0 0 3px rgba(8, 48, 180,.45);border-radius:20px}
  .entrega-card{position:absolute;inset:0;border-radius:18px;overflow:hidden;box-shadow:0 20px 44px -20px rgba(20,30,60,.35);transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .28s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
  .entrega-card img{width:100%;height:100%;display:block;border-radius:18px;object-fit:contain;object-position:center;background:#fff;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
  /* Una hoja de calculo es apaisada. Metida en la carta vertical del PDF se
     veia diminuta, asi que en Excel la carta cambia de forma. */
  .entrega-deck.hoja-excel{width:min(720px,94vw);aspect-ratio:16/9}
  .entrega-deck.hoja-excel .entrega-card img{background:#fff}
  .entrega-dots{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
  .entrega-dot{width:6px;height:6px;border-radius:50%;background:var(--line-l);cursor:pointer;transition:all .25s}
  .entrega-dot.active{background-color:var(--blue);width:18px;border-radius:3px}
  .entrega-hint{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(8, 48, 180,.6);pointer-events:none;animation:entregaNudge 1.6s ease-in-out infinite, entregaFade 4.5s ease forwards;z-index:9}
  .entrega-hint svg{width:15px;height:15px}
  @keyframes entregaNudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-6px)}}
  @keyframes entregaFade{0%,75%{opacity:1}100%{opacity:0}}
  .pull-quote{background:var(--card);border-radius:16px;padding:44px 40px;position:relative;text-align:center}
  .pull-quote p .qmark-inline{display:inline;margin-top:0;font-family:'Clash Display',sans-serif;font-weight:600;font-size:22px;color:var(--blue);opacity:.6}
  .pull-quote p{font-family:'Clash Display',sans-serif;font-weight:600;font-size:22px;line-height:1.4;color:var(--ink);max-width:640px;margin:0 auto}
  .pull-quote span{display:block;margin-top:16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;color:var(--muted);text-align:center}

  /* GUIAS */
.guias-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.3vw,18px);align-items:stretch}
  .guia-card{position:relative;isolation:isolate;background:linear-gradient(165deg,var(--deep2),var(--deep) 65%);border:1px solid var(--line-d);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;padding:0 0 26px;cursor:pointer;font-family:inherit;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s}
  .guia-card::before{content:'';position:absolute;left:50%;top:6%;width:80%;height:46%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(8, 48, 180,.40),rgba(8, 48, 180,0) 68%);filter:blur(16px);z-index:0;pointer-events:none;animation:guiaHalo 6.5s ease-in-out infinite}
  @keyframes guiaHalo{0%,100%{opacity:.40;transform:translateX(-50%) scale(1)}50%{opacity:.78;transform:translateX(-50%) scale(1.09)}}
  .guia-card::after{content:'';position:absolute;inset:-45% -65%;background:linear-gradient(115deg,transparent 43%,rgba(150,180,255,.15) 50%,transparent 57%);z-index:3;pointer-events:none;animation:guiaSheen 7s linear infinite}
  @keyframes guiaSheen{0%{transform:translateX(-62%)}52%,100%{transform:translateX(62%)}}
  .guia-card:nth-child(2)::after{animation-delay:1.2s}
  .guia-card:nth-child(3)::after{animation-delay:2.4s}
  .guia-card:nth-child(4)::after{animation-delay:3.6s}
  .guia-card:hover{transform:translateY(-8px);border-color:rgba(114,144,255,.55);box-shadow:0 30px 60px -30px rgba(0,0,0,.75),0 18px 50px -26px rgba(8, 48, 180,.6)}
  .guia-cover{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;min-height:clamp(168px,15vw,214px);padding:26px 16px 0}
  .guia-cover img{width:auto;height:clamp(148px,13.4vw,194px);max-width:100%;object-fit:contain;border-radius:0;box-shadow:none;filter:drop-shadow(0 20px 24px rgba(0,0,0,.55)) drop-shadow(0 6px 12px rgba(0,0,0,.35));transition:transform .55s cubic-bezier(.16,1,.3,1),filter .35s}
  .guia-card:hover .guia-cover img{transform:translateY(-6px) scale(1.045) rotate(-1deg);filter:drop-shadow(0 32px 36px rgba(0,0,0,.62)) drop-shadow(0 8px 16px rgba(0,0,0,.4))}
  .guia-body{position:relative;z-index:2;padding:22px 22px 0;text-align:center;
    flex:1;display:flex;flex-direction:column}
  .guia-body h3{font-size:17.5px;color:var(--white);margin-bottom:8px;line-height:1.3;min-height:2.6em;display:flex;align-items:center;justify-content:center}
  .guia-body p{font-size:14px;color:var(--muted-d);margin-bottom:16px;line-height:1.6}
  .guia-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--blue-soft);font-weight:700;font-size:14px;margin-top:auto;padding-top:4px}
  .guia-cta svg{transition:transform .2s}
  .guia-card:hover .guia-cta svg{transform:translateX(3px)}
  .guias-more{margin-top:20px;text-align:center;color:var(--muted-d);font-size:14px}
  @media (prefers-reduced-motion: reduce){
    .guia-card::before,.guia-card::after{animation:none}
  }
  @media (max-width:1080px){
    .guias-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:900px){
    .guia-body{padding:20px 16px 0}
    .guia-body h3{font-size:16.5px}
    .guia-body p{font-size:13.5px}
  }
  @media (max-width:720px){
    .guias-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -22px;padding:4px 22px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .guias-grid::-webkit-scrollbar{display:none}
    .guias-grid .guia-card{flex:0 0 76%;scroll-snap-align:center}
    .guia-cover{min-height:212px;padding:24px 14px 0}
    .guia-cover img{height:196px;max-width:100%}
    .guia-body{padding:20px 20px 0}
    .guia-body h3{font-size:17px}
    .guia-body p{font-size:13.8px}
  }

  /* MODAL GUIAS (reutiliza los estilos .vq de la valoracion) */
  .gq-overlay{position:fixed;inset:0;z-index:999;display:none;align-items:flex-start;justify-content:center;background:rgba(5,7,13,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:40px 16px;overflow-y:auto}
  .gq-overlay.open{display:flex}
  .gq-modal{position:relative;width:100%;max-width:640px;margin:auto;background:var(--void);border-radius:24px;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
  #guiaModalInner.vq{position:static;overflow:visible;background:transparent;padding:44px 28px 36px}
  .gq-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:.2s}
  .gq-close:hover{background:rgba(255,255,255,.16)}
  body.gq-lock{overflow:hidden}
  @media (max-width:520px){ #guiaModalInner.vq{padding:60px 18px 28px} }

  /* PRECIOS */
  .precios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  @media (max-width:1000px){ .precios-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto} }
  .plan{background:#fff;border:1.5px solid rgba(13,17,32,.09);border-radius:20px;padding:36px 22px 32px;position:relative;overflow:visible;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;box-shadow:0 1px 0 rgba(13,17,32,.02),0 22px 44px -32px rgba(13,17,32,.28)}
  .plan::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,transparent,var(--line-l) 30%,var(--line-l) 70%,transparent);-webkit-mask-image:linear-gradient(#000 0 3px,transparent 3px);mask-image:linear-gradient(#000 0 3px,transparent 3px);opacity:.7}
  .plan.rec::before{background:linear-gradient(90deg,var(--blue),var(--blue-soft))}
  .plan.rec{border-color:var(--blue);box-shadow:0 1px 0 1px rgba(8, 48, 180,.12),0 30px 70px -26px rgba(8, 48, 180,.45)}
  .plan:hover{transform:translateY(-4px);border-color:rgba(8, 48, 180,.35);box-shadow:0 32px 60px -30px rgba(13,17,32,.32)}
  .plan.rec:hover{border-color:var(--blue);box-shadow:0 36px 80px -26px rgba(8, 48, 180,.52)}
  .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#1c2e7a,#3b5bf0);color:#fff;font-size:11px;font-weight:700;padding:6px 16px;border-radius:100px;letter-spacing:.05em;text-align:center;box-shadow:0 10px 24px -8px rgba(28,46,122,.55)}
  .plan h3{font-size:22px;margin-bottom:4px;color:var(--blue);letter-spacing:-.015em}
  .plan-tag{color:var(--muted);font-size:13.5px;margin-bottom:22px}
  /* grid-auto-rows:1fr iguala las tres filas solas, sea cual sea el texto. Un
     min-height a ojo se rompe en cuanto una etiqueta parte en otra linea a otro
     ancho: probado, daba 74/78/91. */
  .dur-rows{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:26px;grid-auto-rows:1fr}
  .dur-row{position:relative;min-width:0;border:1.5px solid var(--line-l);border-radius:12px;background:transparent;padding:11px 16px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:8px 12px;align-items:center;text-align:left;cursor:pointer;font-family:inherit;transition:border-color .2s,background .2s,box-shadow .2s,transform .18s cubic-bezier(.16,1,.3,1)}
  .dur-row:hover{border-color:rgba(8, 48, 180,.4);transform:scale(1.025);
    box-shadow:0 10px 26px -14px rgba(8,48,180,.45);z-index:2}
  .dur-row.selected:hover{box-shadow:0 0 0 3px rgba(8,48,180,.10),0 12px 30px -14px rgba(8,48,180,.5)}
  @media (prefers-reduced-motion: reduce){ .dur-row:hover{transform:none} }
  .dur-row.selected{border-color:var(--blue);background:rgba(8, 48, 180,.06);box-shadow:0 0 0 3px rgba(8, 48, 180,.08)}
  .dur-row-label{font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--muted);
     text-transform:uppercase;white-space:nowrap;width:58px;flex-shrink:0}
  .dur-row.selected .dur-row-label{color:var(--ink)}
  .dur-row-price{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:700;color:var(--ink);line-height:1.1;white-space:nowrap;display:inline}
  .dur-row-unit{font-size:11px;font-weight:600;color:var(--muted);display:inline;margin-left:2px}
  .dur-row-pricebox{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:92px;flex:1}
  .dur-row-total{font-size:11px;font-weight:600;color:var(--muted);line-height:1.25;white-space:normal;text-align:left;max-width:100%}
  .dur-row-ahorro{font-size:9.5px;font-weight:700;letter-spacing:.01em;color:#16a34a;background:rgba(22,163,74,.12);padding:1px 7px;border-radius:100px;white-space:nowrap;margin-top:2px}
  .dur-row-tag{font-size:10.5px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--blue);opacity:.9;line-height:1.2;white-space:normal;margin-left:auto;padding-right:24px;text-align:right;max-width:96px;flex-shrink:0}
  .dur-check{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;font-size:9px;display:none;align-items:center;justify-content:center;font-weight:700}
  .dur-row.selected .dur-check{display:flex}
  .pago-toggle-wrap{display:flex;justify-content:center;margin:-8px 0 34px}
  .pago-toggle{display:inline-flex;padding:5px;border-radius:999px;border:1.5px solid var(--line-l);background:rgba(120,130,160,.06);gap:4px}
  .pago-opt{border:none;background:transparent;padding:10px 22px;border-radius:999px;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:background .25s,color .25s;color:var(--muted)}
  .pago-opt>span:first-child{font-size:14px;font-weight:700;white-space:nowrap}
  .pago-opt-ahorro{font-size:11.5px;font-weight:700;letter-spacing:.01em;color:#16a34a;background:rgba(22,163,74,.12);padding:2px 9px;border-radius:100px;white-space:nowrap}
  .pago-opt.selected{background:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgba(8, 48, 180,.5)}
  .pago-opt.selected .pago-opt-ahorro{background:rgba(255,255,255,.22);color:#fff}
  .pago-compara{margin:-14px 0 22px;padding:14px 12px 13px;border:1.5px solid var(--line-l);border-radius:16px;background:rgba(120,130,160,.05)}
  .pc-head{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:10px}
  .pc-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:7px}
  .pc-grid.solo{grid-template-columns:1fr}
  .pc-opt{border:1.5px solid var(--line-l);border-radius:13px;background:#fff;padding:11px 8px 10px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;cursor:pointer;font-family:inherit;text-align:center;transition:border-color .25s,background .25s,box-shadow .25s;min-width:0}
  .pc-opt:hover{border-color:rgba(8, 48, 180,.45)}
  .pc-opt.selected{border-color:var(--blue);background:rgba(8, 48, 180,.07);box-shadow:0 0 0 3px rgba(8, 48, 180,.09)}
  .pc-t{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1.2}
  .pc-opt.selected .pc-t{color:var(--blue)}
  .pc-n{font-family:'Clash Display',sans-serif;font-size:21px;font-weight:700;color:var(--ink);line-height:1.05;white-space:nowrap}
  .pc-s{font-size:11px;color:var(--muted);line-height:1.3;white-space:normal}
  .pc-b{font-size:11.5px;font-weight:700;letter-spacing:.01em;padding:2px 8px;border-radius:100px;
     white-space:normal;text-align:center;line-height:1.25;max-width:100%;margin-top:3px}
  .pc-b-ok{color:#0f6e33;background:#e6f7ec}/* Medido sobre el pixel: el verde de antes se quedaba en 3,3 sobre la tarjeta y peor todavia cuando la chapa cae sobre la tarjeta azul, porque el fondo era translucido y cambiaba segun lo que hubiera detras. Ahora la chapa lleva su propio fondo opaco y se lee igual en las dos: 5,7. */
  .pc-b-mas{color:#92400e;background:rgba(234,179,8,.18)}
  .pc-o{align-self:center;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);opacity:.65}
  @media (max-width:860px){
    .dur-row-price{font-size:16px}
    .dur-row-ahorro{font-size:9px}
    .pago-toggle-wrap{margin:-4px 0 26px}
    .pago-compara{margin:-8px 0 20px;padding:12px 10px}
    .pc-n{font-size:19px}
    .pc-grid{gap:5px}
    .pago-opt{padding:9px 16px}
    .pago-opt>span:first-child{font-size:13px}
  }
  .plan-que,.plan-cuanto{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
     color:var(--muted);margin-bottom:11px}
  .plan-cuanto{margin-top:2px;padding-top:16px;border-top:1px solid var(--line-l)}
  .plan-incl{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
  .plan-incl li{font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
  .plan-incl li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);margin-top:7px;flex-shrink:0}
  .plan .btn{width:100%;justify-content:center}
  .plan .btn-line{border:1.5px solid var(--line-l);color:var(--ink)}
  /* t343 16-oct: "Comprar ahora" (Stripe) principal; "Solicitar valoracion" queda con borde debajo */
  .plan .plan-comprar{margin-bottom:10px;text-align:center;line-height:1.25}
  .plan .plan-comprar + .btn-line{padding-top:13px;padding-bottom:13px;font-size:14.5px}
  .plan .btn-line:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(8, 48, 180,.35)}
  .precios-recibes{max-width:780px;margin:0 auto 30px;padding:22px 24px;border-radius:18px;background:#fff;border:1.5px solid rgba(13,17,32,.09);box-shadow:0 1px 0 rgba(13,17,32,.02),0 18px 38px -30px rgba(13,17,32,.26)}
  .pr-t{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:13px}
  .pr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 22px}
  .pr-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--muted)}
  .pr-list li b{color:var(--ink);font-weight:700}
  .pr-list li::before{content:'';position:absolute;left:3px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
  .pr-ver{display:inline-block;margin-top:15px;font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;border-bottom:1.5px solid rgba(8,48,180,.35);padding-bottom:1px}
  .pr-ver:hover{border-bottom-color:var(--blue)}
  @media (max-width:760px){ .pr-list{grid-template-columns:1fr;gap:10px} .precios-recibes{padding:18px 18px;margin-bottom:24px} .pr-list li{font-size:13.5px} }
  .precios-note{margin-top:28px;font-size:13.5px;color:var(--muted);text-align:center}

  /* SOBRE MI */
  .sobre-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:start}
  @media (max-width:860px){ .sobre-grid{grid-template-columns:1fr;gap:32px} }
  .sobre-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(160deg,var(--deep2),var(--void))}
  .sobre-col{display:flex;flex-direction:column;gap:14px;min-width:0}
  .sobre-col .sobre-photo{width:100%;box-sizing:border-box;flex:0 0 auto}
  .sobre-tira{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .sobre-tira img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;border-radius:14px;display:block}
  .sobre-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:.94}
  .sobre-text p{margin-bottom:16px;color:var(--muted-d);font-size:16px}
  .sh-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px}
  .sh-tab{appearance:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
     color:var(--muted-d);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;
     padding:9px 16px;border-radius:100px;cursor:pointer;transition:all .22s}
  .sh-tab:hover{border-color:rgba(255,255,255,.34);color:var(--white)}
  .sh-tab.on{background:var(--blue);border-color:var(--blue);color:#fff;
     box-shadow:0 8px 24px -10px rgba(8,48,180,.8)}
  .sh-panel{min-height:96px}
  .sh-panel p{margin:0;opacity:1;transition:opacity .25s}
  .sh-panel.cambiando p{opacity:0}
  .sh-cred{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
  .sh-cred span{font-size:12px;color:var(--muted-d);border:1px solid rgba(255,255,255,.12);
     border-radius:9px;padding:6px 11px;background:rgba(255,255,255,.03)}
  .sh-cred span b{color:var(--white);font-weight:600}
  @media (max-width:520px){ .sh-tab{font-size:12.5px;padding:8px 13px} .sh-panel{min-height:132px} }
  .sobre-quote{font-family:'Clash Display',sans-serif;font-weight:600;font-size:24px;color:var(--white);margin:28px 0;line-height:1.35}
  .sobre-stats{display:flex;gap:32px;margin-top:32px;flex-wrap:wrap}
  .sobre-stats div{display:flex;flex-direction:column;gap:2px}
  .sobre-stats .n{font-family:'Clash Display',sans-serif;font-size:26px;color:var(--blue-soft);font-weight:700}
  .sobre-stats .l{font-size:12px;color:var(--muted-d);text-transform:uppercase;letter-spacing:.06em}
  .sobre-ig{display:inline-flex;align-items:center;gap:13px;margin-top:28px;padding:12px 20px 12px 15px;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);color:var(--white);text-decoration:none;transition:background .22s,border-color .22s,transform .22s}
  .sobre-ig:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
  .sobre-ig svg{width:23px;height:23px;flex-shrink:0;color:var(--blue-soft)}
  .sobre-ig .ig-txt{display:flex;flex-direction:column;gap:2px;line-height:1.25}
  .sobre-ig .ig-user{font-size:14.5px;font-weight:600}
  .sobre-ig .ig-sub{font-size:11.5px;color:var(--muted-d)}

  /* FAQ */
  .faq-list{max-width:760px}
  .faq-item{border-bottom:1px solid var(--line-l)}
  .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;background:none;border:none;text-align:left;cursor:pointer;font-size:16.5px;font-weight:600;color:var(--ink);font-family:'Manrope',sans-serif}
  .faq-q .plus{width:22px;height:22px;flex-shrink:0;position:relative}
  .faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--ink);top:50%;left:50%;transform:translate(-50%,-50%)}
  .faq-q .plus::before{width:14px;height:1.5px}
  .faq-q .plus::after{width:1.5px;height:14px;transition:transform .3s}
  .faq-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1)}
  .faq-a p{padding-bottom:22px;color:var(--muted);font-size:15px;max-width:640px}

  /* CTA FINAL */
  .cta-final{background:radial-gradient(120% 140% at 50% 0%,var(--deep2) 0%,var(--void) 60%);text-align:center;padding:140px 0}
  .cta-final h2{font-size:clamp(30px,4.6vw,48px);color:var(--white);max-width:680px;margin:0 auto 18px}
  .cta-final p{color:var(--muted-d);max-width:480px;margin:0 auto 36px;font-size:16.5px}
  .cta-final .btn-row{justify-content:center}
  /* Pie del CTA final: sin compromiso, videollamada y los 15 min. Va con la
     misma tinta apagada que el parrafo pero mas pequeno, para que se lea como
     una condicion y no como otra frase de venta. El margin:0 gana al de
     .cta-final p, que lleva 36px de separacion abajo. */
  .cta-final .ctaf-pie{margin:18px auto 0;font-size:14px;color:var(--muted-d);opacity:.82;letter-spacing:.2px}

  footer{background:var(--void);padding:48px 0;border-top:1px solid var(--line-d)}
  .foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:20px}
  .foot-brand{font-family:'Clash Display',sans-serif;font-weight:700;color:var(--white);font-size:14px;letter-spacing:.03em}
  .foot-links{display:flex;gap:24px;flex-wrap:wrap}
  .foot-links a{font-size:13.5px;color:var(--muted-d);display:inline-flex;align-items:center;min-height:44px;gap:6px;padding:8px 0}
  .foot-links a:hover{color:var(--white)}
  .foot-links svg{width:14px;height:14px;flex:0 0 auto}
  .foot-bottom{font-size:12.5px;color:#7a83a8}
  .app-wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:center}
  @media (max-width:900px){ .app-wrap{grid-template-columns:1fr;gap:40px} }
  .app-visual{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/4;background:linear-gradient(160deg,var(--deep2),var(--void))}
  .app-visual img{width:100%;height:100%;object-fit:contain}
  .app-features{display:flex;flex-direction:column;gap:0}
  .app-feat{display:flex;gap:16px;padding:18px 0 18px 14px;margin-left:-14px;border-top:1px solid var(--line-d);border-left:2px solid transparent;transition:border-color .25s,background .25s}
  .app-feat:hover{border-left-color:var(--blue-soft);background:rgba(114,144,255,.05)}
  .app-feat:first-child{border-top:none}
  .app-feat .fi{width:38px;height:38px;border-radius:10px;background:rgba(114,144,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue-soft)}
  .app-feat h4{font-size:15.5px;color:#fff;margin-bottom:4px}
  .app-feat p{font-size:13.5px;color:var(--muted-d);margin:0}
  .app-note{margin-top:26px;font-size:13px;color:var(--muted-d);display:inline-flex;align-items:center;gap:8px;background:rgba(114,144,255,.1);border:1px solid rgba(114,144,255,.25);padding:9px 16px;border-radius:100px}
  /* Los tres casos caben en una fila desde 900px: el aviso de deslizar solo
     tiene sentido por debajo de ese ancho. */
  .casos-swipe{display:none;color:var(--muted);font-size:13.5px;font-weight:700;margin-top:8px}
  @media (max-width:899px){ .casos-swipe{display:block} }
  .casos-grid{display:flex;gap:20px;margin-bottom:48px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:none}
  .casos-grid::-webkit-scrollbar{display:none}
  .caso-card{background:var(--card);border-radius:16px;padding:26px 24px;flex:0 0 82%;max-width:340px;scroll-snap-align:start}
  @media (min-width:720px){ .caso-card{flex:0 0 380px} }
  .caso-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .caso-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:rgba(8, 48, 180,.1);border:1px solid rgba(8, 48, 180,.25);padding:4px 10px;border-radius:100px}
  .caso-top span{font-weight:700;font-size:13.5px;color:var(--ink)}
  .caso-row{margin-bottom:12px}
  .caso-row:last-child{margin-bottom:0}
  .caso-row b{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:3px}
  .caso-row p{font-size:13.5px;color:var(--muted);margin:0}

  .trabajo-photo{position:relative;width:100vw;margin:56px calc(50% - 50vw) 0;overflow:hidden;aspect-ratio:21/7}
  .trabajo-photo img,.trabajo-photo video{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
  .trabajo-photo::before{content:'';position:absolute;inset:0;background:
    linear-gradient(90deg, var(--paper) 0%, transparent 22%, transparent 78%, var(--paper) 100%),
    linear-gradient(180deg, var(--paper) 0%, transparent 16%, transparent 84%, var(--paper) 100%);pointer-events:none}
  .trabajo-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, transparent 45%, rgba(8,13,32,.7));pointer-events:none}
  .trabajo-photo-tag{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.5);text-align:center;width:90%}
  @media (max-width:720px){ .trabajo-photo{aspect-ratio:4/3} .trabajo-photo img,.trabajo-photo video{object-position:50% 40%} .trabajo-photo::before{background:linear-gradient(180deg, var(--paper) 0%, transparent 18%)} }

  .revision-mockup{position:relative;border-radius:24px;overflow:hidden;padding:44px 20px;background-image:url('/assets/revision-fondo.jpg');background-size:cover;background-position:center 20%;margin-top:40px}
  .revision-mockup::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,7,13,.88), rgba(5,7,13,.94) 60%, var(--void) 100%);z-index:0}
  .revision-panel{position:relative;z-index:1;max-width:860px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08)}
  .revision-topbar{background:linear-gradient(90deg,var(--blue-brand),var(--blue));color:#fff;padding:11px 18px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.04em}
  .revision-topbar b{font-weight:800}
  .revision-cols{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:1px;background:#dde1e8}
  .revision-tabs{display:none}
  @media (max-width:760px){
    .revision-panel{background:linear-gradient(180deg,var(--deep2),var(--void))}
    .revision-cols{grid-template-columns:1fr;background:var(--void)}
    .revision-tabs{display:flex;gap:6px;padding:14px 16px;background:transparent}
    .rv-tab{flex:1;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);color:var(--muted-d);font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:10px 4px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,border-color .2s}
    .rv-tab.active{background:linear-gradient(135deg,var(--blue),var(--blue-soft));color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(8, 48, 180,.45)}
    .revision-cols .revision-col{display:none;background:transparent}
    .revision-cols .revision-col.rv-active{display:block}
    /* Esta regla de movil esta ESCRITA ANTES que la general de abajo, asi que
       con la misma fuerza ganaba la de abajo y el rotulo se quedaba en el gris
       oscuro (3,29 de contraste sobre el fondo negro). Se le sube la fuerza. */
    .revision-cols .revision-col-label{color:var(--muted-d)}
    .revision-cols .revision-note{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--white)}
    .revision-cols .revision-note b{color:var(--blue-soft)}
  }
  .revision-col{background:#fff;padding:16px}
  .revision-col-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
  .revision-col-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue)}
  .revision-thumb{position:relative;aspect-ratio:4/3;border-radius:10px;margin-bottom:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(130% 150% at 28% 18%, #2b3865 0%, #141b38 48%, #080b18 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  .revision-thumb::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.55) 100%)}
  .revision-thumb:last-child{margin-bottom:0}
  .revision-thumb .rt-play{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,.4)}
  .revision-thumb .rt-time{position:absolute;z-index:1;top:8px;right:8px;font-size:11px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);padding:2px 6px;border-radius:4px}
  .revision-thumb .rt-bar{position:absolute;z-index:1;left:8px;right:8px;bottom:8px;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
  .revision-thumb .rt-bar span{display:block;height:100%;border-radius:3px;background:var(--blue)}
  .revision-note{background:#eefaf0;border:1px solid #cdeed4;border-radius:10px;padding:14px;font-size:12.5px;line-height:1.55;color:var(--ink)}
  .revision-note b{color:var(--blue-brand)}
  .revision-note p{margin:0 0 8px}
  .revision-note p:last-child{margin-bottom:0}
  .rv-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:0;background:#dde1e8}
  .rv-video{margin:0;position:relative;background:#0b1020;display:flex;flex-direction:column}
  .rv-video img{width:100%;height:auto;display:block}
  .rv-play{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:54px;height:54px;
    border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);
    display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.45);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .rv-play::after{content:"";margin-left:4px;border-left:15px solid #fff;
    border-top:10px solid transparent;border-bottom:10px solid transparent}
  .rv-video figcaption{padding:12px 16px 14px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72)}
  .rv-lado{background:#fff;padding:18px 18px 20px;display:flex;flex-direction:column;gap:14px}
  /* Tres pasos en fila vertical y no tres pastillas: con el numero delante se ve
     que es un recorrido, y ocupando el ancho entero se ve que se tocan. */
  .rv-bots{display:grid;gap:8px;counter-reset:rvp}
  .rv-b{position:relative;counter-increment:rvp;display:flex;align-items:center;gap:11px;
    width:100%;min-height:54px;padding:10px 42px 10px 13px;border-radius:15px;cursor:pointer;
    font:inherit;font-size:13.5px;font-weight:700;text-align:left;
    border:1.5px solid var(--line-l);background:#fff;color:var(--ink,#0d1120);
    transition:background .25s ease,color .25s ease,border-color .25s ease,
               box-shadow .25s ease,transform .14s ease}
  .rv-b::before{content:counter(rvp,decimal-leading-zero);flex:0 0 auto;
    width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:11.5px;font-weight:800;letter-spacing:.04em;
    background:rgba(8,48,180,.08);color:var(--blue);transition:.25s ease}
  .rv-b::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.42;
    transform:translateY(-50%) rotate(-45deg);transition:.3s ease}
  .rv-b:hover{border-color:var(--blue-soft);transform:translateX(2px)}
  .rv-b.on{background:linear-gradient(135deg,var(--blue),var(--blue-soft));
    border-color:transparent;color:#fff;box-shadow:0 12px 26px -12px rgba(8,48,180,.85)}
  .rv-b.on::before{background:rgba(255,255,255,.22);color:#fff}
  .rv-b.on::after{opacity:1;transform:translateY(-50%) rotate(45deg)}
  .rv-b:active{transform:scale(.985)}
  .rv-txt{margin:2px 0 0;font-size:13.8px;line-height:1.68;color:var(--ink,#0d1120);min-height:104px;
    padding-left:13px;border-left:2px solid rgba(8,48,180,.18)}
  .rv-txt.rv-ent{animation:rvEntra .42s cubic-bezier(.16,1,.3,1)}
  @keyframes rvEntra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  @media (max-width:760px){
    .rv-grid{grid-template-columns:1fr;background:var(--void)}
    .rv-video{background:transparent}
    .rv-lado{background:transparent;padding:16px}
    .rv-b{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--white)}
    .rv-b::before{background:rgba(114,144,255,.18);color:var(--blue-soft)}
    .rv-b.on{background:linear-gradient(135deg,var(--blue),var(--blue-soft));color:#fff;border-color:transparent}
    .rv-txt{color:rgba(255,255,255,.86);border-left-color:rgba(114,144,255,.35)}
  }
  .revision-head{position:relative;z-index:1;text-align:center;max-width:560px;margin:0 auto 30px}

  /* ===== EFECTOS DINAMICOS: A luz que sigue al cursor · B rejilla y auroras · D borde con luz ===== */
  @property --fxa{syntax:'<angle>';initial-value:0deg;inherits:false}

  .fx-cursor{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:60;opacity:0;transition:opacity .5s ease;background:radial-gradient(circle,rgba(90,130,255,.15),rgba(90,130,255,.05) 42%,transparent 68%);filter:blur(10px);will-change:transform}
  .fx-cursor.on{opacity:1}

  .fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;z-index:4;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(120,155,255,.20),transparent 62%)}
  .fx-host:hover>.fx-glow{opacity:1}
  .plan>.fx-glow{background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(8, 48, 180,.13),transparent 60%)}

  section.dark>.wrap{position:relative;z-index:2}
  .fx-grid,.fx-aurora{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  .fx-grid{background-image:radial-gradient(rgba(150,180,255,.15) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 120% 75% at 50% 45%,#000 32%,transparent 78%);mask-image:radial-gradient(ellipse 120% 75% at 50% 45%,#000 32%,transparent 78%);animation:fxGridDrift 34s linear infinite}
  @keyframes fxGridDrift{to{background-position:28px 56px}}
  .fx-aurora::before,.fx-aurora::after{content:'';position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;filter:blur(90px);opacity:.32}
  .fx-aurora::before{left:-16%;top:-24%;background:radial-gradient(circle,rgba(8, 48, 180,.55),transparent 66%);animation:fxAuroraA 26s ease-in-out infinite alternate}
  .fx-aurora::after{right:-18%;bottom:-28%;background:radial-gradient(circle,rgba(114,144,255,.42),transparent 66%);animation:fxAuroraB 32s ease-in-out infinite alternate}
  @keyframes fxAuroraA{to{transform:translate3d(12%,10%,0) scale(1.15)}}
  @keyframes fxAuroraB{to{transform:translate3d(-10%,-8%,0) scale(1.12)}}

  .fx-border{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;padding:1.5px;opacity:0;transition:opacity .4s ease;background:conic-gradient(from var(--fxa),transparent 0deg,transparent 248deg,rgba(160,190,255,.95) 306deg,rgba(8, 48, 180,.9) 332deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  .fx-host:hover>.fx-border{opacity:1;animation:fxSpin 3.2s linear infinite}
  .plan.rec>.fx-border{opacity:.8;animation:fxSpin 6.5s linear infinite}
  @keyframes fxSpin{to{--fxa:360deg}}

  @media (hover:none){ .fx-cursor{display:none} .fx-glow{display:none} }
  @media (prefers-reduced-motion: reduce){
    .fx-cursor{display:none}
    .fx-grid,.fx-aurora::before,.fx-aurora::after,.fx-border{animation:none!important}
  }


/* ===== EFECTOS DINAMICOS: E paralaje de fotos de fondo · C barrido de luz en titulares ===== */
.fx-par{will-change:transform}
.vq-bg img.fx-par{transform:scale(1.10)}
.sobre-photo img.fx-par{transform:scale(1.12)}

.fx-sweep{--sw:#5b7cff;background-image:linear-gradient(100deg,currentColor 0,currentColor 42%,var(--sw) 49%,#ffffff 52%,var(--sw) 55%,currentColor 62%,currentColor 100%);background-size:250% 100%;background-position:0% 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
section.dark .fx-sweep,.cta-final .fx-sweep{--sw:#a8c0ff}
.fx-sweep.swept{animation:fxSweep 1.45s cubic-bezier(.22,.61,.36,1) .08s 1 both}
@keyframes fxSweep{from{background-position:130% 0}to{background-position:0% 0}}



/* 1 · El contexto del cliente, dentro de "Cómo trabajo" */
.ctx{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:32px;align-items:center;margin:40px 0 56px}
.ctx-shot{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-l);background:#fff;box-shadow:0 26px 54px -26px rgba(13,17,32,.42)}
.ctx-shot img{width:100%;height:auto;display:block}
.ctx-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(to bottom,rgba(238,241,245,0),var(--paper));pointer-events:none}
.ctx-txt h3{font-family:'Clash Display',sans-serif;font-weight:600;font-size:23px;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.ctx-txt p{font-size:15px;line-height:1.65;color:var(--muted);margin-top:12px;max-width:46ch}
.ctx-lista{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:9px}
.ctx-lista li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.ctx-lista li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.ctx-toggle{margin-top:18px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--blue);
  background:#fff;border:1px solid var(--line-l);border-radius:999px;padding:9px 16px 9px 18px;
  transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,box-shadow .22s}
.ctx-toggle:hover{border-color:rgba(8,48,180,.38);box-shadow:0 12px 26px -18px rgba(8,48,180,.7);transform:translateY(-1px)}
.ctx-toggle:active{transform:translateY(0) scale(.99)}
.ctx-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .32s cubic-bezier(.16,1,.3,1)}
.ctx-toggle.abierto .ctx-chev{transform:rotate(180deg)}
.ctx-fold{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .48s cubic-bezier(.16,1,.3,1)}
.ctx-fold.abierto{grid-template-rows:1fr}
.ctx-fold-in{overflow:hidden;min-height:0}
.ctx-fold .ctx{margin:26px 0 6px}
@media (prefers-reduced-motion:reduce){.ctx-fold{transition:none}.ctx-chev{transition:none}}

/* 2 · "Esto es lo que recibes": composición editorial, no galería */
.ed{margin:26px 0 30px}
.ed-hero{position:relative;max-width:560px;margin:0 auto;border-radius:20px;overflow:hidden;
         border:1px solid var(--line-l);background:#fff;box-shadow:0 34px 70px -30px rgba(13,17,32,.5)}
.ed-hero img{width:100%;height:auto;display:block}
.ed-hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;
        background:linear-gradient(to bottom,rgba(5,7,13,0),rgba(5,7,13,.82));
        color:#fff;font-size:13.5px;line-height:1.45;letter-spacing:.01em}
.ed-hero figcaption b{display:block;font-size:15px;margin-bottom:3px}
.ed-tira{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.ed-hoja{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line-l);background:#fff;
         box-shadow:0 16px 34px -20px rgba(13,17,32,.4);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ed-hoja img{width:100%;height:auto;display:block;aspect-ratio:900/700;object-fit:cover;object-position:top}
.ed-hoja figcaption{padding:9px 10px 11px;font-size:12px;line-height:1.35;color:var(--muted);
                    text-align:center;letter-spacing:.02em;text-transform:uppercase}
@media (hover:hover){.ed-hoja:hover{transform:translateY(-6px)}}
.ed-pie{margin-top:18px;text-align:center;font-size:13.5px;color:var(--muted)}
  .ed-sw{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 18px}
  .ed-sw-t{font-size:13.5px;color:var(--muted)}
  .ed-sw-b{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line-l);
    background:rgba(8,48,180,.045)}
  .ed-b{min-height:34px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;
    background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;
    transition:background .22s ease,color .22s ease}
  .ed-b.on{background:var(--blue);color:#fff}
  .ed-b:not(.on):hover{color:var(--ink,#0d1120)}

/* 3 · "No te mando un PDF y te apañas" */
.pdf-no{margin:56px 0 8px}
.pdf-no-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:24px}
.pdf-shot{border-radius:18px;overflow:hidden;border:1px solid var(--line-l);background:#fff;
          box-shadow:0 24px 50px -26px rgba(13,17,32,.42)}
.pdf-shot img{width:100%;height:auto;display:block}
.pdf-shot figcaption{padding:11px 14px 13px;font-size:12.5px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line-l)}
.pdf-shot--alto img{max-height:520px;object-fit:cover;object-position:top}
  .app-viva{margin-top:54px}
  .app-grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:30px;align-items:center;margin-top:26px}
  .app-movil{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line-l);
    background:#0b1020;box-shadow:0 30px 70px -30px rgba(8,48,180,.45)}
  .app-movil img{width:100%;height:auto;display:block;max-height:560px;object-fit:cover;object-position:top}
  .app-tira{position:relative}
  .app-tira-v{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;padding:2px}
  .app-tira-v::-webkit-scrollbar{display:none}
  .app-tira-v:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:24px}
  .app-tira .app-movil{flex:0 0 100%;max-width:100%;scroll-snap-align:center;
    display:flex;justify-content:center;background:none;border:0;box-shadow:none;border-radius:0}
  .app-tira .app-movil img{width:auto;height:min(620px,70vh);max-height:none;max-width:100%;
    object-fit:contain;border-radius:20px;border:1px solid var(--line-l);
    box-shadow:0 30px 70px -30px rgba(8,48,180,.45)}
  .app-tira-fl{position:absolute;top:calc(50% - 22px);transform:translateY(-50%);
     width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--line-l);
     background:rgba(255,255,255,.94);color:var(--ink);display:flex;align-items:center;
     justify-content:center;cursor:pointer;z-index:3;
     box-shadow:0 10px 26px -12px rgba(20,30,60,.55);
     transition:opacity .22s,transform .22s,background .22s}
  .app-tira-fl:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
  .app-tira-fl:disabled{opacity:0;pointer-events:none}
  .app-tira-fl.prev{left:-4px}
  .app-tira-fl.next{right:-4px}
  .app-tira-fl svg{width:16px;height:16px}
  .app-tira-fl.next.nudge{animation:entregaNudge 1.9s ease-in-out 3}
  /* t304 (15-oct): en movil las flechas tapaban "HOY TE TOCA"; bajan a la fila de los puntos */
  @media (max-width:900px){ .app-tira-fl{top:calc(min(620px,70vh) + 22px)} }
  .app-desliza{display:flex;align-items:center;justify-content:center;gap:7px;
     margin-top:12px;font-size:12.5px;color:var(--muted);letter-spacing:.01em}
  .app-desliza svg{width:14px;height:14px;opacity:.7}
  .app-tira-v.arrastrando{cursor:grabbing;scroll-snap-type:none}
  .app-tira-v{cursor:grab}
  .app-dots{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:14px}
  .app-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:rgba(8,48,180,.22);transition:width .25s ease,background .25s ease}
  .app-dot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .app-dot.on{width:22px;border-radius:99px;background:var(--blue)}
  .app-cap{margin:10px 0 0;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted)}
  .app-puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
  .app-puntos li{position:relative;padding-left:22px}
  .app-puntos li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
    border-radius:50%;background:var(--blue)}
  .app-puntos b{display:block;font-weight:700;font-size:16.5px;margin-bottom:4px}
  .app-puntos span{display:block;font-size:14.5px;line-height:1.6;color:var(--muted)}
  .app-otro{margin-top:26px;padding:16px 18px;border-radius:16px;border:1px solid var(--line-l);
    background:rgba(8,48,180,.045);font-size:14.5px;line-height:1.6}



/* -- el paso 00: el contexto, ya dentro de la linea de tiempo -- */
.ctx{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:26px;
     align-items:center;margin:18px 0 0}
.tstep-ctx .kicker{display:block;margin-bottom:6px}
.tstep-ctx .ctx-cuerpo>p{max-width:560px}
.ctx-lista{margin-top:0}

/* -- la linea de tiempo se va pintando de azul segun bajas -- */
.tline{overflow:hidden;border-radius:2px}
.tline-fill{position:absolute;left:0;top:0;width:100%;height:var(--tprog,0%);display:block;
     background:linear-gradient(180deg,var(--blue),#5b7cff);transition:height .25s linear}
.tstep{padding-bottom:20px}
.tstep>div:last-child{background:#fff;border:1px solid var(--line-l);border-radius:18px;
     padding:18px 22px 20px;box-shadow:0 18px 44px -34px rgba(13,17,32,.45);
     transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .32s,box-shadow .32s}
.tstep p{max-width:none}
.tstep:hover>div:last-child,.tstep.act>div:last-child{transform:translateX(5px);
     border-color:rgba(8,48,180,.32);box-shadow:0 24px 52px -30px rgba(8,48,180,.55)}
.tstep.act .tnum{transform:scale(1.1);box-shadow:0 0 0 10px rgba(8,48,180,.13)}
.tstep-ctx .ctx{max-width:none}
/* La frase de cierre queda alineada con las tarjetas, no a media pulgada de ellas. */
.timeline-close{position:relative;overflow:hidden;isolation:isolate;
     margin:22px 0 0 76px;padding:18px 26px;border-radius:24px;
     display:flex;align-items:center;gap:16px;
     background:linear-gradient(112deg,#0830B4 0%,#123ccd 48%,#2a55f0 100%);
     color:#fff;font-size:16.5px;font-weight:700;letter-spacing:-.012em;
     box-shadow:0 26px 58px -30px rgba(8,48,180,.8),inset 0 1px 0 rgba(255,255,255,.2)}
/* Rejilla finisima: le da profundidad sin ensuciar. Sobre azul oscuro se lee
   como cristal; sobre blanco no tendria nada que reflejar (eso ya lo probamos). */
.timeline-close::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
     background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
       linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
     background-size:26px 26px;
     -webkit-mask:radial-gradient(120% 130% at 12% 50%,#000 0%,transparent 72%);
     mask:radial-gradient(120% 130% at 12% 50%,#000 0%,transparent 72%)}
.timeline-close::after{content:"";position:absolute;top:-40%;bottom:-40%;width:34%;left:-40%;
     z-index:-1;pointer-events:none;transform:skewX(-16deg);
     background:linear-gradient(100deg,transparent,rgba(255,255,255,.16) 46%,transparent);
     animation:tcBrillo 9s ease-in-out infinite}
@keyframes tcBrillo{0%,14%{left:-40%}64%,100%{left:118%}}
.tc-logo{flex:0 0 auto;width:44px;height:44px;border-radius:14px;
     display:grid;place-items:center;background:rgba(255,255,255,.13);
     border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.tc-logo img{width:25px;height:auto;display:block;opacity:.96}
.tc-txt{line-height:1.35;min-width:0}
@media (prefers-reduced-motion:reduce){.timeline-close::after{animation:none;left:-40%}}
.tnum{transition:background .35s ease,color .35s ease,border-color .35s ease,
     box-shadow .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.tstep.in .tnum{box-shadow:0 0 0 6px rgba(8,48,180,.10)}
.tstep:hover .tnum{transform:scale(1.08);box-shadow:0 0 0 10px rgba(8,48,180,.14)}

/* -- la app, sobre su propio panel blanco y azul -- */
.app-slab{position:relative;overflow:hidden;border-radius:28px;padding:36px 34px 34px;
     background:linear-gradient(170deg,#ffffff 0%,#f7f9ff 46%,#edf2ff 100%);
     border:1px solid #dbe3f5;box-shadow:0 40px 90px -46px rgba(8,48,180,.40)}
.app-slab::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
     background-image:radial-gradient(rgba(8,48,180,.13) 1px,transparent 1px);
     background-size:26px 26px;
     -webkit-mask-image:radial-gradient(ellipse 110% 70% at 50% 40%,#000 18%,transparent 76%);
     mask-image:radial-gradient(ellipse 110% 70% at 50% 40%,#000 18%,transparent 76%);
     animation:fxGridDrift 34s linear infinite}
.app-slab::after{content:"";position:absolute;width:560px;height:560px;right:-170px;top:-210px;
     border-radius:50%;pointer-events:none;z-index:0;filter:blur(92px);opacity:.42;
     background:radial-gradient(circle,rgba(8,48,180,.45),transparent 66%);
     animation:fxAuroraB 30s ease-in-out infinite alternate}
.app-slab>*{position:relative;z-index:1}

.app-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.app-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
     border:1px solid #d3ddf5;background:rgba(255,255,255,.92);color:var(--ink);
     font-size:12.5px;font-weight:600;line-height:1.2;
     transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,box-shadow .22s}
.app-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.app-chip:hover{transform:translateY(-2px);border-color:rgba(8,48,180,.45);
     box-shadow:0 10px 22px -14px rgba(8,48,180,.65)}

.app-grid{gap:38px;align-items:center}
.app-tira::before{content:"";position:absolute;left:50%;top:50%;width:120%;height:76%;
     transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
     background:radial-gradient(circle,rgba(8,48,180,.30),transparent 68%);filter:blur(48px)}
.app-tira>.app-tira-v,.app-tira>.app-dots,.app-tira>.app-cap,.app-tira>.app-desliza{position:relative;z-index:1}
.app-tira-v{cursor:grab}
.app-tira-v.arrastrando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
/* 5-oct-2026, Miguel: "mas dinamico a la hora de deslizar". La de en medio
   manda y las de al lado se van quedando atras, en vez de ir todas planas. */
.app-tira-v{perspective:1200px}
.app-tira .app-movil{transform-origin:50% 55%;will-change:transform,opacity;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease}
.app-tira-v.arrastrando .app-movil{transition:none}
@media (prefers-reduced-motion: reduce){
  .app-tira .app-movil{transition:none;transform:none !important;opacity:1 !important}
}
.app-tira-v img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
/* Y al tocar la pantalla, se ve grande. */
.app-lupa{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
     padding:26px;background:rgba(5,7,13,.86);backdrop-filter:blur(14px);opacity:0;
     transition:opacity .28s ease}
.app-lupa.ver{display:flex}
.app-lupa.abierta{opacity:1}
.app-lupa img{max-width:min(94vw,430px);max-height:92vh;width:auto;height:auto;border-radius:26px;
     box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1);
     transform:scale(.96);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.app-lupa.abierta img{transform:scale(1)}
.app-lupa-x{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
     border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;
     cursor:pointer;display:grid;place-items:center;font:600 20px/1 Outfit,sans-serif;
     transition:background .2s,transform .2s}
.app-lupa-x:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.app-lupa,.app-lupa img{transition:none}}
.app-tira .app-movil img{animation:appFlota 7s ease-in-out infinite}
@keyframes appFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.app-puntos{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-auto-rows:1fr}
.app-puntos li{position:relative;padding:18px 19px;border-radius:18px;
     border:1px solid #dde4f4;background:rgba(255,255,255,.94);
     box-shadow:0 18px 40px -30px rgba(8,48,180,.55);
     display:flex;flex-direction:column;justify-content:center;
     transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s,box-shadow .28s}
.app-puntos li::before{display:none}
.app-puntos li:hover{transform:translateY(-4px);border-color:rgba(8,48,180,.42);
     box-shadow:0 26px 52px -28px rgba(8,48,180,.62)}
.app-puntos b{display:block;font-weight:700;font-size:16.5px;margin-bottom:4px;color:var(--ink)}
.app-puntos span{display:block;font-size:14.5px;line-height:1.6;color:var(--muted)}
.app-puntos .app-pt-n{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;
     border-radius:9px;background:var(--blue);color:#fff;font-family:'Clash Display',sans-serif;
     font-size:11.5px;font-weight:700;margin-bottom:11px;flex:0 0 auto;align-self:flex-start}
.app-otro{background:rgba(255,255,255,.7);border-color:#dde4f4}

.app-slab{border-radius:38px;
     background:linear-gradient(168deg,#ffffff 0%,#ffffff 44%,#f5f8ff 100%)}
/* El reflejo va SOBRE EL MOVIL, no sobre el panel entero. Probado de las dos
   formas: barriendo el panel, un panel blanco no tiene donde reflejar y lo
   unico que hacia era blanquear el texto justo al pasar (se vio, el titular
   quedaba ilegible medio segundo de cada nueve). Sobre la pantalla oscura del
   movil el mismo barrido se lee como lo que es, un reflejo en el cristal. */
.app-slab>.app-brillo{display:none}
.app-tira .app-movil{position:relative;overflow:hidden}
.app-tira .app-movil::after{content:"";position:absolute;top:-30%;bottom:-30%;
     width:36%;left:-45%;pointer-events:none;z-index:2;transform:skewX(-16deg);
     background:linear-gradient(100deg,transparent,rgba(255,255,255,.22) 42%,
       rgba(140,175,255,.16) 58%,transparent);
     animation:appReflejo 8s ease-in-out infinite}
@keyframes appReflejo{0%,12%{left:-45%}62%,100%{left:120%}}
/* Un filo azul que respira en el borde. Es un marco, no un relleno: se recorta
   con dos mascaras para que solo quede el borde de 1px. */
.app-slab>.app-borde{position:absolute;inset:0;border-radius:inherit;z-index:2;
     pointer-events:none;padding:1px;
     background:linear-gradient(140deg,rgba(8,48,180,.55),rgba(8,48,180,0) 38%,
       rgba(8,48,180,0) 62%,rgba(91,124,255,.55));
     -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
     -webkit-mask-composite:xor;
     mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
     mask-composite:exclude;
     animation:appFilo 6.5s ease-in-out infinite alternate}
@keyframes appFilo{0%{opacity:.35}100%{opacity:.95}}

/* El resplandor de detras del movil pasa a ser un aro que gira: un circulo
   radial girando no se ve moverse, uno conico si. */
.app-tira::before{background:conic-gradient(from 0deg,rgba(8,48,180,.34),
     rgba(91,124,255,.05) 28%,rgba(8,48,180,.30) 52%,rgba(91,124,255,.05) 78%,
     rgba(8,48,180,.34));filter:blur(56px);animation:appAro 26s linear infinite}
@keyframes appAro{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Mas redondo, que es lo que pidio. */
.app-movil{border-radius:30px}
.app-tira .app-movil{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.app-tira-v{perspective:1200px}

/* La barra de avance: se ve de un vistazo que hay tres pantallas y en cual
   estas. Los puntitos de 8 px solos no lo contaban. */
.app-barra{position:relative;z-index:1;height:4px;max-width:210px;margin:14px auto 0;
     border-radius:999px;background:#e4eaf9;overflow:hidden}
.app-barra i{position:absolute;left:0;top:0;bottom:0;width:33.333%;border-radius:999px;
     background:linear-gradient(90deg,var(--blue),#5b7cff);
     transition:transform .45s cubic-bezier(.16,1,.3,1)}

/* La frase puente a los documentos, cuando ya no vive dentro del panel. */
.app-otro-puente{margin:22px 0 0;background:#fff;border:1px solid var(--line-l);
     border-left:3px solid var(--blue)}

@media (max-width:900px){
  .app-slab{border-radius:26px}
  .app-tira .app-movil::after{animation-duration:10s}
}

@media (max-width:900px){
  .ctx{grid-template-columns:1fr;gap:20px}
  .app-slab{padding:24px 18px;border-radius:22px}
  .app-grid{gap:22px}
  .app-puntos{grid-auto-rows:auto}
}
@media (max-width:560px){
  .tstep-ctx .ctx-shot{max-width:280px}
  .app-chip{font-size:12px;padding:6px 12px}
  /* En el movil, 48px de bola mas 26 de hueco se comian el ancho de la tarjeta. */
  .tstep{grid-template-columns:40px 1fr;gap:14px;padding-bottom:16px}
  .tnum{width:40px;height:40px;font-size:13px}
  .tline{left:21px}
  .tstep>div:last-child{padding:15px 16px 17px}
  .timeline-close{margin-left:56px;padding:15px 16px;font-size:15.5px;gap:13px;border-radius:20px}
  .tc-logo{width:38px;height:38px;border-radius:12px}
  .tc-logo img{width:21px}
}
@media (prefers-reduced-motion: reduce){
  .app-tira .app-movil img{animation:none}
  .app-slab::before,.app-slab::after{animation:none}
  .app-tira .app-movil::after{display:none}
  .app-slab>.app-borde,.app-tira::before{animation:none}
  .app-barra i{transition:none}
  .tline-fill{transition:none}
}

/* 4 · Corrección técnica: vídeo -> análisis -> corrección */
.flujo{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:22px 0 26px}
.flujo-p{flex:1 1 150px;min-width:0;border-radius:14px;padding:14px 15px;
         border:1px solid var(--line-l);background:#fff}
.flujo-p .n{display:block;font-size:11px;letter-spacing:.14em;color:var(--blue);font-weight:700;margin-bottom:6px}
.flujo-p b{display:block;font-size:15px;color:var(--ink);line-height:1.25}
.flujo-p span.d{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--muted)}
.flujo-fl{align-self:center;flex:0 0 auto;color:var(--blue);opacity:.55;font-size:17px;line-height:1}
section.dark .flujo-p{background:rgba(255,255,255,.045);border-color:var(--line-d)}
section.dark .flujo-p b{color:var(--white)}
section.dark .flujo-p span.d{color:var(--muted-d)}
section.dark .flujo-p .n{color:var(--blue-soft)}
section.dark .flujo-fl{color:var(--blue-soft);opacity:.6}
.hueco{margin-top:8px;border:1px dashed var(--line-l);border-radius:14px;padding:15px 16px;
       font-size:13.5px;line-height:1.55;color:var(--muted);background:rgba(255,255,255,.4)}
section.dark .hueco{border-color:var(--line-d);color:var(--muted-d);background:rgba(255,255,255,.025)}

/* 5 · Seguimiento (sustituye al bloque de la app) */
.seg-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.seg-p{border:1px solid var(--line-d);border-radius:16px;padding:18px 17px;background:rgba(255,255,255,.045);position:relative}
.seg-p .n{font-family:'Clash Display',sans-serif;font-size:13px;color:var(--blue-soft);letter-spacing:.1em}
.seg-p h4{font-size:16.5px;color:var(--white);margin-top:8px;line-height:1.25}
.seg-p p{font-size:13.5px;line-height:1.55;color:var(--muted-d);margin-top:7px}
.seg-cierre{margin-top:22px;font-size:15px;line-height:1.6;color:var(--white);text-align:center}
.seg-cierre b{color:var(--blue-soft)}

/* 5-oct-2026, Miguel: "en version pc no veo lo de las fotos de la app en blanco".
   Medido en un ordenador de 1440: la tira era una columna de 336 px y solo cabia UNA
   pantalla a la vez; las dos claras son la 4a y la 5a, o sea fuera de la vista, y solo
   salian arrastrando. En ordenador se ven las SEIS de una vez y sin tocar nada. En movil
   se queda el carrusel tal cual, que es como el lo pidio. */
.app-pie{display:none}
@media (min-width:901px){
  .app-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .app-tira-v{overflow-x:visible;scroll-snap-type:none;cursor:default;perspective:none;
    gap:12px;align-items:start;padding:2px 0}
  .app-tira .app-movil{flex:1 1 0;max-width:none;transform:none !important;opacity:1 !important;
    display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .app-tira .app-movil:hover{transform:translateY(-7px) !important}
  .app-tira .app-movil img{width:100%;height:auto;max-height:none;object-fit:contain;
    animation:none;cursor:zoom-in}
  .app-tira .app-movil::after{display:none}
  .app-tira-fl,.app-dots,.app-barra,.app-cap,.app-desliza{display:none}
  .app-pie{display:block;margin:9px 0 0;text-align:center;font-size:12px;line-height:1.45;
    color:var(--muted)}
  .app-puntos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media (max-width:900px){
  .ctx{grid-template-columns:1fr;gap:22px}
  .ctx-shot{max-width:340px;margin:0 auto}
  .pdf-no-grid{grid-template-columns:1fr}
  .app-grid{grid-template-columns:1fr;gap:20px}
  .app-movil{max-width:300px;margin:0 auto}
  .ed-tira{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ed-hoja figcaption{font-size:11px;padding:8px 6px 10px}
  .ed-hero figcaption{font-size:12.5px;padding:30px 14px 12px}
  .ed-hero figcaption b{font-size:14px}
  .seg-lista{grid-template-columns:1fr}
  .flujo-fl{display:none}
  .flujo-p{flex:1 1 100%}
  .ctx-txt h3{font-size:20px}
}


/* =====================================================================
   REDISENO 11-oct · TANDA 1: LOS CIMIENTOS RESPONSIVE
   Va al final del bloque de estilos a proposito: asi manda sobre lo de
   arriba sin tener que tocar sesenta reglas una a una, y quitarlo entero
   devuelve la web exactamente a como estaba.

   Lo que arregla, MEDIDO antes de escribirlo (9 anchuras, de 320 a 1920):
   · En 1920 el contenido ocupaba 1120 px, el 58% de la pantalla. De 1366
     a 1920 la pagina era la MISMA, solo con mas hueco a los lados: por eso
     todo parecia diminuto en un monitor grande.
   · Precios y Preguntas se quedaban en 1120 px aunque el resto estirase.
   · 42 textos por debajo de 13 px y 3 por debajo de 10.
   · Entre 768 y 1000 px las tarjetas de precios pasaban a UNA columna de
     420 px como mucho: 348 px de hueco vacio en una tablet de 768.
   No cambia ningun color, ninguna animacion, ningun texto y ninguna foto.
   ===================================================================== */

/* 1 . El contenedor crece con la pantalla en vez de quedarse clavado.
   Los margenes laterales tambien crecen, para que la linea de texto no se
   pegue al borde en un monitor ancho. */
.wrap{width:100%;padding-left:clamp(22px,3.4vw,46px);padding-right:clamp(22px,3.4vw,46px)}
@media (min-width:1280px){ .wrap{max-width:1200px} .nav-row{max-width:1320px} }
@media (min-width:1500px){ .wrap{max-width:1300px} .nav-row{max-width:1420px} }
@media (min-width:1750px){ .wrap{max-width:1380px} .nav-row{max-width:1500px} }

/* 2 . El aire entre secciones, proporcional a la pantalla.
   Antes eran dos valores secos (128 px y 76 px) con un salto en 720. */
section{padding:clamp(74px,7.2vw,134px) 0}

/* 3 . Titulares y texto que escalan con la pantalla en vez de parar en 42 px */
.sec-head{max-width:min(760px,100%)}
.sec-head h2{font-size:clamp(29px,3.05vw,50px)}
.sec-head p{font-size:clamp(16px,1.05vw,18.5px);max-width:min(620px,100%)}

/* 4 . Suelo de legibilidad. Las etiquetas en mayusculas pueden ser pequenas
   (son rotulos, no lectura), pero lo que se LEE no baja de 12,5 px. */
.dur-row-ahorro{font-size:11px}
@media (max-width:860px){ .dur-row-ahorro{font-size:10.5px} }
.dur-row-total,.dur-row-unit,.pc-s{font-size:12.5px}
.dur-row-label{font-size:12.5px}
.caso-row b,.revision-col-label,.flujo-p .n{font-size:12px}
.ed-hoja figcaption{font-size:12.5px}
.app-pie,.app-chip{font-size:12.5px}
.sobre-ig .ig-sub,.sh-cred span,.sobre-stats .l{font-size:12.5px}
.lang-select{font-size:12px}
.plan-que,.plan-cuanto{font-size:11.5px}
.dur-row-tag{font-size:11.5px;max-width:112px}
.plan-badge,.pc-t{font-size:11.5px}
.pr-t{font-size:12.5px}
@media (min-width:1151px){ .navlinks a{font-size:13px} }
@media (min-width:1151px) and (max-width:1339px){ .navlinks a{font-size:12px} .nav-row{gap:12px} .navlinks{gap:9px} }

/* 5 . La tablet deja de ser un movil estirado.
   De 760 a 1000 px las tarjetas de precios ocupaban 420 px centradas en una
   pantalla de 768. Ahora llenan el ancho util. */
@media (min-width:760px) and (max-width:1000px){
  .precios-grid{grid-template-columns:1fr;max-width:620px;gap:18px}
  .pr-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:760px) and (max-width:900px){
  .seg-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-puntos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 6 . En pantalla grande las secciones respiran igual que el texto */
@media (min-width:1500px){ .sec-head{margin-bottom:64px} }


/* =====================================================================
   REDISENO 11-oct · TANDA 2: EL HERO Y EL MENU
   Referencia: sus maquetas 03 y 12. Lo que cambia:
   · Las tarjetas flotantes pasan de 2 a 3 y llevan icono. Y dejan de estar
     cada una en una posicion absoluta suelta (se pisaban entre si en
     pantallas bajas): ahora son una columna que se auto-reparte.
   · Tira de tres ventajas debajo de los botones, que es lo que cierra el
     hero en su maqueta.
   · El video se ve: opacidad .55 -> .72 y el velo se abre por la derecha,
     dejando la izquierda oscura para que el titular siga legible.
   · El menu respira: mas hueco entre enlaces y el boton mas marcado.
   No toca ningun texto que ya hubiera, ni precios, ni animaciones previas.
   ===================================================================== */

/* 1 . El video del fondo, visible */
.hero-bg img,.hero-bg video{opacity:.72}
.hero-bg::after{background:
  linear-gradient(180deg, rgba(5,7,13,.46) 0%, rgba(5,7,13,.26) 34%, rgba(5,7,13,.56) 80%, var(--void) 100%),
  linear-gradient(96deg, var(--void) 1%, rgba(5,7,13,.88) 20%, rgba(5,7,13,.52) 42%, rgba(5,7,13,.16) 64%, rgba(5,7,13,.04) 100%)}
/* En movil el texto va por encima de TODA la foto, asi que el velo vuelve a
   cerrarse: sin esto el titular pierde contraste. */
@media (max-width:900px){
  .hero-bg img,.hero-bg video{opacity:.6}
  .hero-bg::after{background:
    linear-gradient(180deg, rgba(5,7,13,.62) 0%, rgba(5,7,13,.68) 42%, var(--void) 97%),
    linear-gradient(100deg, var(--void) 6%, rgba(5,7,13,.42) 48%, rgba(5,7,13,.22) 100%)}
}

/* 2 . El hero usa la pantalla grande en vez de quedarse pequeno */
.hero{padding-top:clamp(104px,10.5vh,142px)}
.hero-content{max-width:min(730px,100%)}
.hero .lead{font-size:clamp(16.5px,1.12vw,19px);max-width:min(560px,100%)}
@media (min-width:1500px){ .hero-content{max-width:min(790px,100%)} .hero .lead{max-width:600px} }

/* Flechita en el boton principal y triangulo en el otro, como en la maqueta.
   Van por CSS y no dentro del enlace a proposito: el cambio de idioma
   reescribe el interior del enlace y se las llevaria por delante. */
.hero .btn-primary::after,.nav-cta::after{content:'';width:16px;height:16px;flex-shrink:0;
  background:currentColor;-webkit-mask:var(--ic-flecha) center/contain no-repeat;mask:var(--ic-flecha) center/contain no-repeat;
  transition:transform .25s cubic-bezier(.16,1,.3,1)}
.nav-cta::after{width:13px;height:13px}
.hero .btn-primary:hover::after,.nav-cta:hover::after{transform:translateX(3px)}
.hero .btn-ghost::after{content:'';width:15px;height:15px;flex-shrink:0;
  background:currentColor;-webkit-mask:var(--ic-play) center/contain no-repeat;mask:var(--ic-play) center/contain no-repeat;opacity:.85}
:root{
  --ic-flecha:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15'/><path d='M13 6l6 6-6 6'/></svg>");
  --ic-play:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.2'/><path d='M10.2 8.6l5.4 3.4-5.4 3.4z' fill='black' stroke-linejoin='round'/></svg>");
}

/* 3 . Las tres tarjetas, en columna que se auto-reparte */
.hero-cards{position:absolute;z-index:2;right:clamp(14px,3.6vw,74px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:clamp(13px,2.1vh,24px);pointer-events:none}
.stat-float{position:relative;flex-direction:row;align-items:center;gap:13px;
  padding:15px 21px 15px 16px;border-radius:17px;
  background:linear-gradient(145deg, rgba(11,27,92,.80), rgba(8,14,38,.88));
  border:1px solid rgba(114,144,255,.32);
  box-shadow:0 20px 52px -20px rgba(2,6,24,.95), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stat-float .sf-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(150deg, rgba(8,48,180,.62), rgba(114,144,255,.16));
  border:1px solid rgba(114,144,255,.30);color:#a3b9ff}
.stat-float .sf-ico svg{width:19px;height:19px}
.stat-float .sf-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.stat-float .n{font-size:27px;line-height:1.05}
.stat-float .n-corto{font-size:20px;letter-spacing:-.01em}
.stat-float .l{font-size:11px;letter-spacing:.09em;color:#8fa6ee}
.stat-1,.stat-2,.stat-3{right:auto;top:auto}
.stat-1{animation:floatY 6s ease-in-out infinite}
.stat-2{animation:floatY 7s ease-in-out infinite 1s;margin-right:clamp(16px,4.2vw,84px)}
.stat-3{animation:floatY 8s ease-in-out infinite .5s}
@media (max-width:1179px){ .hero-cards{display:none} }
/* Franja de portatil: con las tres tarjetas a la derecha, el titular y las
   tarjetas se quedaban a 3 px de distancia en una pantalla de 1152. El bloque
   de texto se estrecha y las tarjetas encogen un punto para que respiren. */
@media (min-width:1180px) and (max-width:1380px){
  .hero-content{max-width:min(620px,100%)}
  .hero h1{font-size:clamp(34px,3.9vw,50px)}
  .hero .lead{max-width:min(520px,100%)}
  .stat-float{padding:12px 17px 12px 13px}
  .stat-float .sf-ico{width:37px;height:37px}
  .stat-float .sf-ico svg{width:17px;height:17px}
  .stat-float .n{font-size:23px}
  .stat-float .n-corto{font-size:18px}
}
/* Portatil bajo: con tres tarjetas y poca altura se comian los botones */
@media (max-height:700px){ .hero-cards{gap:11px} .stat-float{padding:11px 17px 11px 13px} .stat-float .sf-ico{width:36px;height:36px} .stat-float .n{font-size:23px} }

/* 4 . La tira de tres ventajas que cierra el hero */
.hero-feats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(13px,1.8vw,28px);padding-top:26px;border-top:1px solid rgba(255,255,255,.10);max-width:min(700px,100%)}
.hero-feat{display:flex;align-items:flex-start;gap:11px;position:relative}
.hero-feat+.hero-feat::before{content:'';position:absolute;left:calc(-1 * clamp(7px,.9vw,14px));top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.09)}
.hero-feat .hf-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(114,144,255,.12);border:1px solid rgba(114,144,255,.24);color:#9db4ff}
.hero-feat .hf-i svg{width:17px;height:17px}
.hero-feat .hf-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-feat .hf-t b{font-size:13.5px;font-weight:700;color:var(--white);line-height:1.25}
.hero-feat .hf-t span{font-size:12.5px;color:var(--muted-d);line-height:1.3}
@media (max-width:760px){
  .hero-feats{grid-template-columns:1fr;gap:13px;padding-top:22px;max-width:100%}
  .hero-feat+.hero-feat::before{display:none}
  .hero-feat .hf-i{width:31px;height:31px;border-radius:9px}
  .hero-feat .hf-i svg{width:15px;height:15px}
}
@media (max-width:420px){ .hero-feat .hf-t span{display:none} }
@media (max-width:900px){ .hero{padding-bottom:118px} }

/* 5 . El menu: mas aire entre enlaces y el boton mas marcado */
/* La fila del menu necesita ~1.230 px de contenido con los nueve enlaces.
   Capandola en 1.320 cabia por los pelos y cualquier retoque de letra la
   rompia (paso justo eso en la tanda 1). Se le da sitio de verdad. */
@media (min-width:1340px){
  .nav-row{max-width:min(1560px,100%);gap:18px;padding-left:clamp(24px,2.6vw,46px);padding-right:clamp(24px,2.6vw,46px)}
  .navlinks{gap:16px}
  .nav-cta{margin-left:10px}
}
@media (min-width:1520px){ .nav-row{gap:24px} .navlinks{gap:22px} .nav-cta{margin-left:14px} }
.navlinks a.active::after{bottom:-9px;height:2px;box-shadow:0 0 10px rgba(114,144,255,.7)}
.nav-cta{padding:10px 19px;font-size:12.8px}
@media (min-width:1500px){ .nav-cta{padding:11px 22px;font-size:13.2px} }
.nav.solid{background:rgba(5,7,13,.96)}

/* 6 . Movimiento reducido: quien lo tenga puesto en su movil ve las tarjetas
   quietas. Lo pedia el encargo y antes no estaba cubierto. */
@media (prefers-reduced-motion: reduce){
  .stat-float{animation:none!important}
  .hero .btn-primary::after,.nav-cta::after{transition:none}
}


/* =====================================================================
   REDISENO 11-oct · TANDA 3: LA SECCION DEL SEGUIMIENTO
   Referencia: sus maquetas 05 y 06.
   · Cabecera a dos columnas (titular / parrafo) con una linea en medio.
   · Los seis pasos en UNA fila en pantalla ancha, con icono y con la flecha
     entre tarjeta y tarjeta. Antes eran dos filas de tres y sin iconos.
   · El cierre y el recuadro de ejemplos se juntan en una banda con el cohete.
   Ni un texto cambiado, ni un dato nuevo.
   ===================================================================== */

.sec-head-2col{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,58px);align-items:start;max-width:100%}
.sec-head-2col .sh-der{position:relative;padding-left:clamp(26px,3.4vw,58px)}
.sec-head-2col .sh-der::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(114,144,255,.38) 20%,rgba(114,144,255,.38) 80%,transparent)}
.sec-head-2col h2{margin-bottom:0}
.sec-head-2col p{max-width:100%;margin:0}
@media (max-width:900px){
  .sec-head-2col{grid-template-columns:1fr;gap:14px}
  .sec-head-2col .sh-der{padding-left:0}
  .sec-head-2col .sh-der::before{display:none}
}

/* Los seis pasos: una fila en pantalla ancha, como el circuito que es */
@media (min-width:1240px){ .seg-lista{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.1vw,18px)} }
@media (min-width:940px) and (max-width:1239px){ .seg-lista{grid-template-columns:repeat(3,minmax(0,1fr))} }
.seg-lista{margin-top:clamp(28px,3vw,46px)}
.seg-p{padding:20px 18px 19px;border-radius:18px;background:rgba(255,255,255,.05);
  transition:border-color .25s,background .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.seg-p:hover{border-color:rgba(114,144,255,.45);background:rgba(114,144,255,.07);transform:translateY(-3px)}
.seg-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin:10px 0 14px;
  background:linear-gradient(150deg, rgba(8,48,180,.55), rgba(114,144,255,.14));
  border:1px solid rgba(114,144,255,.28);color:#a3b9ff}
.seg-ico svg{width:21px;height:21px}
.seg-p h4{margin-top:0;font-size:clamp(16.5px,.98vw,19px)}
.seg-p p{font-size:clamp(13.5px,.8vw,15.5px)}
.seg-p .n{font-size:clamp(13px,.75vw,14.5px)}
@media (min-width:1600px){ .seg-p{padding:24px 21px 23px} .seg-ico{width:50px;height:50px} .seg-ico svg{width:23px;height:23px} }
/* La flecha entre tarjeta y tarjeta, solo cuando van en una sola fila */
@media (min-width:1240px){
  .seg-p+.seg-p::before{content:'';position:absolute;left:calc(-1 * clamp(12px,1.1vw,18px) / 2 - 10px);
    top:46px;width:20px;height:20px;border-radius:50%;background:rgba(10,20,52,.95);
    border:1px solid rgba(114,144,255,.34);z-index:2}
  .seg-p+.seg-p::after{content:'';position:absolute;left:calc(-1 * clamp(12px,1.1vw,18px) / 2 - 3px);
    top:51px;width:9px;height:9px;z-index:3;background:#9db4ff;
    -webkit-mask:var(--ic-chev) center/contain no-repeat;mask:var(--ic-chev) center/contain no-repeat}
}
:root{--ic-chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>")}

/* La banda de cierre: cohete, la frase y los ejemplos, todo en una caja */
.seg-banda{display:grid;grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(16px,2vw,34px);margin-top:clamp(26px,2.8vw,44px);
  padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,34px);border-radius:22px;
  background:linear-gradient(140deg, rgba(8,48,180,.20), rgba(255,255,255,.035));
  border:1px solid rgba(114,144,255,.26)}
.seg-banda-ico{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;flex-shrink:0;
  background:linear-gradient(150deg, rgba(8,48,180,.75), rgba(114,144,255,.2));
  border:1px solid rgba(114,144,255,.34);color:#bcccff}
.seg-banda-ico svg{width:28px;height:28px}
.seg-banda .seg-cierre{margin:0;text-align:left;font-size:clamp(15px,1.1vw,18px)}
.seg-banda .hueco{margin:0;border:0;padding:0;background:none;font-size:13.5px}
section.dark .seg-banda .hueco{background:none;border:0}
@media (max-width:1000px){
  .seg-banda{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .seg-banda .hueco{grid-column:1 / -1;padding-top:4px;border-top:1px solid rgba(255,255,255,.09)}
}
@media (max-width:620px){
  .seg-banda{grid-template-columns:1fr;text-align:left}
  .seg-banda-ico{width:52px;height:52px}
}


/* =====================================================================
   REDISENO 11-oct · TANDA 4: LA APP (maqueta 07) y COMO SE TE ENVIA (08)
   · La cabecera baja a la columna izquierda, encima de los moviles, y la
     derecha arranca arriba del todo. Antes la cabecera iba a todo lo ancho
     y en monitor la columna derecha quedaba colgando a media altura.
   · Cada punto con su icono en pastilla y el numero en un circulo azul.
   · El aviso del PDF/Excel entra en la columna derecha como una tarjeta mas.
   · "Como se te envia": cabecera centrada con rayita a los dos lados y cada
     figura convertida en tarjeta con icono y titular.
   El carrusel no se toca: mismos ids, mismos botones, mismos puntos.
   ===================================================================== */

.app-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(24px,2.8vw,50px);align-items:stretch}
.app-izq{display:flex;flex-direction:column;justify-content:center;min-width:0}
.app-izq .sec-head{margin-bottom:clamp(16px,1.9vw,28px);max-width:100%}
.app-izq .sec-head h2{margin-bottom:12px}
.app-izq .sec-head p{max-width:100%}
.app-der{display:flex;flex-direction:column;gap:clamp(10px,1vw,15px);min-width:0}
/* OJO: mas arriba hay un @media (min-width:901px) que pone .app-puntos en TRES
   columnas. Eso valia cuando la lista iba a todo lo ancho; ahora vive en una
   columna estrecha y dejaba una palabra por linea (medido a 1440: 509 px de
   columna repartidos entre tres). Aqui se vuelve a una sola columna. */
.app-der .app-puntos{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(10px,1vw,15px);grid-auto-rows:1fr}

/* Cada punto, como en la maqueta: pastilla con icono, numero en circulo */
.app-puntos li{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:15px;row-gap:6px;align-items:start;align-content:start}
.app-puntos .app-pt-ico{grid-row:1 / span 2;display:grid;place-items:center;width:50px;height:50px;
  border-radius:15px;background:linear-gradient(150deg, rgba(8,48,180,.12), rgba(114,144,255,.08));
  border:1px solid rgba(8,48,180,.16);color:var(--blue);flex-shrink:0}
.app-pt-ico svg{width:23px;height:23px}
.app-puntos .app-pt-cab{grid-column:2;display:flex;align-items:flex-start;gap:10px;flex-wrap:nowrap;
  font-size:inherit;color:inherit}
.app-puntos .app-pt-cab>b{flex:1 1 auto;min-width:0}
.app-puntos .app-pt-cab>.app-pt-n{margin-top:1px}
.app-puntos li>span:not(.app-pt-ico):not(.app-pt-cab){grid-column:2;margin:0}
.app-puntos .app-pt-n{position:static;width:26px;height:26px;border-radius:50%;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;flex-shrink:0}
.app-puntos b{margin:0;font-size:clamp(15.5px,.98vw,17px)}
.app-puntos li>span:not(.app-pt-ico):not(.app-pt-cab){font-size:clamp(13.5px,.85vw,14.5px)}

/* El aviso del PDF/Excel, ya como tarjeta y no como parrafo suelto */
.app-otro-puente{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:center;
  margin:0;padding:17px 19px;border-radius:18px}
.app-otro-puente p{margin:0;font-size:clamp(13.5px,.85vw,14.5px);line-height:1.6}
.app-otro-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;
  background:linear-gradient(150deg, rgba(8,48,180,.12), rgba(114,144,255,.08));
  border:1px solid rgba(8,48,180,.16);color:var(--blue)}
.app-otro-ico svg{width:23px;height:23px}

@media (max-width:1100px){
  .app-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .app-izq .sec-head{text-align:left}
}

/* LA TIRA DE MOVILES, OTRA VEZ LEGIBLE EN ORDENADOR (12-oct-2026).
   Lo canto Miguel: "se ve fatal en el pc lo de la app". Y era verdad, medido a 1400:
   la tira vive desde la tanda 4 en la columna IZQUIERDA, que son unos 500 px, y dentro
   hay DIEZ moviles con flex:1 1 0. Eso son 45 px por movil y los pies salian a una
   palabra por linea. La regla de arriba que los reparte a lo ancho se escribio cuando
   la tira iba a todo ancho y eran SEIS; al pasar a dos columnas nadie la reviso, y como
   los moviles seguian "cabiendo" no petaba nada.
   Aqui vuelve a ser un carrusel: cada movil con su ancho fijo, se desliza, y las
   flechas vuelven a salir. Asi se ven los diez y se leen. En tableta pasa lo mismo
   aunque la columna sea ancha: diez a lo ancho de 1000 px son 100 px cada uno. Por
   debajo de 901 px no se toca nada, que ahi ya era un carrusel. */
@media (min-width:901px){
  .app-izq .app-tira-v{overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;padding:2px 2px 8px;scroll-behavior:smooth}
  .app-izq .app-tira .app-movil{flex:0 0 clamp(150px,13vw,190px);max-width:none;
    scroll-snap-align:center}
  .app-izq .app-tira-fl{display:flex}
  .app-izq .app-pie{font-size:12.5px;line-height:1.5}
}
@media (min-width:901px) and (max-width:1100px){
  /* En tableta caben tres en fila, pero entonces el icono va ENCIMA del
     titular, no al lado: si se deja el grid-column:2 de la version ancha, la
     chapa del numero se monta sobre el icono (visto a 1024). */
  .app-der .app-puntos{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .app-puntos li{grid-template-columns:minmax(0,1fr);row-gap:0}
  .app-pt-ico{grid-row:auto;margin-bottom:11px}
  .app-puntos .app-pt-cab,
  .app-puntos li>span:not(.app-pt-ico):not(.app-pt-cab){grid-column:1}
  /* La chapa del numero, siempre en su propia linea aqui: con el titular al
     lado unas caben y otras no, y las tres tarjetas quedaban desalineadas. */
  .app-puntos .app-pt-cab{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:7px}
}
@media (max-width:900px){
  /* En movil las tarjetas se ajustan a su texto: con filas de alto igual, la
     primera se quedaba con medio palmo de hueco debajo. Y la chapa del numero
     va siempre encima del titular, que si no unas caben al lado y otras no. */
  .app-der .app-puntos{grid-auto-rows:auto}
  .app-puntos .app-pt-cab{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:560px){
  .app-pt-ico,.app-otro-ico{width:42px;height:42px;border-radius:13px}
  .app-pt-ico svg,.app-otro-ico svg{width:20px;height:20px}
}

/* ---------------------------------- COMO SE TE ENVIA (maqueta 08) */
.pdf-no .sec-head{text-align:center;max-width:min(760px,100%);margin-left:auto;margin-right:auto}
.pdf-no .sec-head .kicker{justify-content:center}
.pdf-no .sec-head .kicker::after{content:"";width:18px;height:1.5px;background:var(--blue)}
.pdf-no .sec-head p{margin-left:auto;margin-right:auto}
.pdf-no-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,26px);
  margin-top:clamp(24px,2.6vw,38px);align-items:stretch}
.pdf-shot{display:flex;flex-direction:column;padding:clamp(14px,1.4vw,20px);border-radius:22px}
.pdf-shot img{border-radius:14px;background:#f2f5fb}
.ps-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;margin:18px 0 13px;
  background:linear-gradient(150deg, rgba(8,48,180,.10), rgba(114,144,255,.08));
  border:1px solid rgba(8,48,180,.14);color:var(--blue)}
.ps-ico svg{width:22px;height:22px}
.ps-t{display:block;font-weight:700;font-size:clamp(16px,1.05vw,18.5px);color:var(--ink);margin-bottom:7px}
/* Nada de margin-top:auto aqui: las dos tarjetas tienen fotos de alto distinto
   y el texto de la corta se iba al fondo, dejando un agujero bajo el titular. */
.pdf-shot figcaption{padding:0;border-top:0;margin-top:0}
@media (max-width:760px){
  .pdf-no-grid{grid-template-columns:minmax(0,1fr)}
  .ps-ico{width:42px;height:42px;margin:15px 0 11px}
}


/* =====================================================================
   REDISENO 11-oct · TANDA 5a: LOS TESTIMONIOS
   Referencia: su maqueta 09.
   Medido antes de tocar nada: a 1.440 px la seccion era UNA tarjeta de
   260x376 en medio de la pantalla, con el titular pegado a la izquierda.
   Ahora, de 980 px para arriba, las tres van en fila como en su maqueta.
   Por debajo se queda la baraja con su gesto de deslizar, intacta.
   ===================================================================== */

.sec-head-cen{text-align:center;margin-left:auto;margin-right:auto;max-width:min(820px,100%)}
.sec-head-cen .kicker{justify-content:center}
.sec-head-cen .kicker::before,.sec-head-cen .kicker::after{content:"";width:20px;height:1.5px;
  background:currentColor;opacity:.55;flex-shrink:0}
.sec-head-cen p{margin-left:auto;margin-right:auto}

/* el envoltorio del video: en la baraja rellena la tarjeta, igual que antes */
.testi-media{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.testi-dur{position:absolute;left:12px;top:12px;z-index:4;display:inline-flex;align-items:center;
  gap:6px;padding:5px 11px;border-radius:100px;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;pointer-events:none;transition:opacity .3s}
.testi-dur svg{width:13px;height:13px;flex-shrink:0}
.testi-dur b{font-weight:700}
.testi-card.playing .testi-dur{opacity:0}
/* El boton de play se estaba quedando DEBAJO del video (el video lleva
   z-index:1 y el play no llevaba ninguno), asi que no se veia nunca. Medido
   el 11-oct en la version de antes y en la de ahora: igual en las dos, o sea
   que no lo he roto yo, pero se arregla aqui porque en su maqueta el play es
   lo que dice que la tarjeta se toca. */
.testi-card .play{z-index:2}
.testi-card .testi-swipe{z-index:4}

/* ---- de 980 px para arriba: las tres en fila, su maqueta 09 ---------- */
@media (min-width:980px){
  .resultados-grid{--testi-fila:1;position:static;width:auto;aspect-ratio:auto;
    margin:clamp(26px,2.8vw,42px) 0 0;touch-action:auto;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(18px,1.9vw,30px);align-items:start}
  .resultados-grid .testi-card{position:static!important;transform:none!important;opacity:1!important;
    z-index:auto!important;inset:auto;aspect-ratio:auto;width:auto;
    display:flex;flex-direction:column;border-radius:20px;background:#fff;
    border:1px solid var(--line-l);box-shadow:0 16px 40px -26px rgba(13,17,32,.45);
    transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
  .resultados-grid .testi-card:hover{transform:translateY(-5px)!important;
    box-shadow:0 26px 56px -26px rgba(13,17,32,.55)}
  .resultados-grid .testi-media{position:relative;inset:auto;aspect-ratio:9/13;
    border-radius:19px 19px 0 0;background:#000}
  /* el nombre deja de flotar sobre el video y pasa a su franja de abajo */
  .resultados-grid .testi-card .tag{position:static;display:block;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:15px 17px 17px;border-radius:0;
    color:var(--ink);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none}
  .resultados-grid .testi-card.started .tag{display:block}
  /* en fila no se desliza: fuera la pista y los puntos de la baraja */
  .testi-hint,.testi-dots{display:none}
  .resultados-grid .testi-swipe{display:none}
}
@media (min-width:980px) and (prefers-reduced-motion: reduce){
  .resultados-grid .testi-card:hover{transform:none!important}
}

/* =====================================================================
   13-oct · EL RESUMEN DE CADA TESTIMONIO
   Una o dos frases por persona, SACADAS DE LO QUE DICE EN SU VIDEO
   (transcrito con whisper): nada de estrellas, ni "verificado", ni cifras
   que no se oigan. En fila (980 px o mas) va en la franja blanca de la
   tarjeta, bajo el nombre. En la baraja la tarjeta es solo video, asi que
   la franja blanca va DEBAJO de la baraja y cambia con la de delante.
   ===================================================================== */
.testi-card .testi-res{display:none}
.testi-franja{max-width:340px;margin:-14px auto 4px;padding:15px 17px 16px;border-radius:16px;
  background:#fff;border:1px solid var(--line-l);box-shadow:0 14px 34px -24px rgba(13,17,32,.45);
  min-width:0;overflow-wrap:anywhere}
.testi-franja .tf-item{display:none}
.testi-franja .tf-item.on{display:block}
.testi-franja b{display:block;color:var(--ink);font-size:15px;font-weight:700}
.testi-franja p,.resultados-grid .testi-card .testi-res{margin:6px 0 0;color:#4a5263;font-size:14px;line-height:1.55}
@media (min-width:980px){
  .testi-franja{display:none}
  .resultados-grid .testi-card .tag{padding-bottom:0}
  .resultados-grid .testi-card .testi-res{display:block;padding:0 17px 17px;overflow-wrap:anywhere}
}


/* =====================================================================
   REDISENO 11-oct · TANDA 5b: LAS GUIAS GRATUITAS
   Referencia: sus maquetas 01 y 02.
   Medido antes de tocar: la rejilla iba a CINCO columnas con SEIS guias,
   asi que la sexta se quedaba sola con cuatro huecos al lado, y cada
   tarjeta media 207 px con los titulos partidos en tres lineas.
   Ni un texto suyo cambiado, ni el modal del correo tocado.
   ===================================================================== */

/* tres columnas: dos filas limpias de tres */
@media (min-width:1100px){ .guias-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.7vw,26px)} }
@media (min-width:760px) and (max-width:1099px){ .guias-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* la tira de los tres pasos */
.guias-pasos{list-style:none;margin:clamp(22px,2.4vw,34px) 0 clamp(24px,2.6vw,38px);padding:clamp(16px,1.7vw,24px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);
  border-radius:20px;border:1px solid rgba(114,144,255,.2);
  background:linear-gradient(140deg, rgba(8,48,180,.16), rgba(255,255,255,.03))}
.guias-pasos li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;
  gap:12px;min-width:0;position:relative;padding-right:14px}
.guias-pasos li+li::before{content:'';position:absolute;left:-11px;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(114,144,255,.3),transparent)}
.gp-n{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;flex-shrink:0;
  background:var(--blue);color:#fff;font-size:12.5px;font-weight:800}
.gp-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:rgba(114,144,255,.12);border:1px solid rgba(114,144,255,.22);color:#a3b9ff}
.gp-ico svg{width:19px;height:19px}
.gp-tx{min-width:0}
.gp-tx b{display:block;color:var(--white);font-size:14.5px;font-weight:700;line-height:1.3}
.gp-tx i{display:block;font-style:normal;color:var(--muted-d);font-size:12.5px;margin-top:3px;line-height:1.45}
@media (max-width:900px){
  .guias-pasos{grid-template-columns:minmax(0,1fr);gap:14px}
  .guias-pasos li+li::before{left:0;right:0;top:-7px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(114,144,255,.26),transparent)}
  .guias-pasos li{padding-right:0;padding-top:4px}
}

/* la tarjeta, con el texto a la izquierda y el boton de su maqueta */
.guia-body{text-align:left;padding-left:clamp(18px,1.5vw,22px);padding-right:clamp(18px,1.5vw,22px)}
.guia-body h3{justify-content:flex-start;min-height:0;margin-bottom:9px;
  font-size:clamp(16.5px,1.15vw,19px);display:block}
.guia-body p{margin-bottom:18px}
.guia-cta{display:flex;width:100%;gap:9px;margin-top:auto;padding:12px 16px;border-radius:12px;
  background:var(--blue);color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 10px 24px -14px rgba(8,48,180,.9);
  transition:background .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.guia-card:hover .guia-cta{background:#0a3bd8;box-shadow:0 14px 30px -14px rgba(8,48,180,1)}
.guia-cover{min-height:clamp(176px,14vw,222px)}
.guia-cover img{height:clamp(156px,12.6vw,202px)}
@media (prefers-reduced-motion: reduce){ .guia-cta{transition:none} }


/* =====================================================================
   REDISENO 11-oct · TANDA 6a: LOS PRECIOS
   Referencia: su maqueta 10.
   NI UN PRECIO TOCADO. Ni una duracion, ni lo que incluye cada plan, ni
   el boton, ni el enlace, ni como se elige la duracion. El selector de
   duracion NO se unifica arriba aunque la maqueta lo ponga asi: eso seria
   cambiar la logica de seleccion y el encargo lo prohibe.
   ===================================================================== */

:root{--ic-tic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12.5l5 5 10-11'/></svg>")}

/* la caja de "esto es lo que recibes": de 780 px a todo el ancho */
.precios-recibes{max-width:min(1100px,100%);padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,32px);
  margin-bottom:clamp(26px,2.8vw,40px)}
.pr-list{gap:14px clamp(22px,2.6vw,46px)}
.pr-list li{padding-left:30px}
.pr-list li::before{left:0;top:3px;width:18px;height:18px;border-radius:6px;
  background:var(--blue);-webkit-mask:var(--ic-tic) center/11px 11px no-repeat;
  mask:var(--ic-tic) center/11px 11px no-repeat}

/* el icono de cada plan, al lado del titulo */
.plan-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;margin-bottom:12px;
  background:linear-gradient(150deg, rgba(8,48,180,.12), rgba(114,144,255,.10));
  border:1px solid rgba(8,48,180,.16);color:var(--blue)}
.plan-ico svg{width:20px;height:20px}
.plan.rec .plan-ico{background:linear-gradient(150deg, rgba(8,48,180,.9), rgba(59,91,240,.8));
  border-color:transparent;color:#fff}

/* lo que incluye: tics azules en vez de puntitos */
.plan-incl li{gap:10px}
.plan-incl li::before{width:16px;height:16px;border-radius:5px;margin-top:2px;
  background:var(--blue);-webkit-mask:var(--ic-tic) center/10px 10px no-repeat;
  mask:var(--ic-tic) center/10px 10px no-repeat}

@media (max-width:760px){
  .plan-ico{width:36px;height:36px;border-radius:11px}
  .pr-list li{padding-left:27px}
}


/* =====================================================================
   REDISENO 11-oct · TANDA 6b: LAS PREGUNTAS
   Referencia: su maqueta 11.
   Medido antes de tocar: las 11 preguntas iban en una columna de 760 px
   dentro de un hueco de 1.200, con 440 px de aire muerto a la derecha.
   El acordeon no se toca: mismo JavaScript y misma animacion.
   ===================================================================== */

.faq-2col{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,3.4vw,62px);align-items:start}
.faq-izq{position:sticky;top:clamp(92px,9vh,116px)}
.faq-izq .sec-head{margin-bottom:clamp(20px,2.2vw,30px)}

.faq-duda{padding:clamp(20px,2vw,26px);border-radius:20px;background:#fff;
  border:1px solid var(--line-l);box-shadow:0 18px 40px -32px rgba(13,17,32,.3)}
.fd-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;margin-bottom:14px;
  background:linear-gradient(150deg, rgba(8,48,180,.12), rgba(114,144,255,.10));
  border:1px solid rgba(8,48,180,.16);color:var(--blue)}
.fd-ico svg{width:21px;height:21px}
.faq-duda b{display:block;font-size:17px;color:var(--ink);margin-bottom:7px}
.faq-duda p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:17px}
.faq-duda .btn{width:100%;justify-content:center}

/* cada pregunta, una tarjeta con su numero: los pone el CSS */
.faq-list{max-width:100%;counter-reset:faq}
.faq-item{counter-increment:faq;border-bottom:0;margin-bottom:10px;border-radius:15px;
  background:#fff;border:1px solid var(--line-l);overflow:hidden;
  transition:border-color .25s,box-shadow .25s}
.faq-item:hover{border-color:rgba(8,48,180,.26);box-shadow:0 14px 30px -26px rgba(13,17,32,.34)}
.faq-item.open{border-color:rgba(8,48,180,.34);box-shadow:0 18px 38px -28px rgba(8,48,180,.4)}
.faq-q{padding:17px 18px;gap:14px;font-size:15.5px;align-items:center}
.faq-q::before{content:counter(faq, decimal-leading-zero);flex-shrink:0;
  font-size:12.5px;font-weight:800;color:var(--blue);letter-spacing:.03em;
  min-width:26px;text-align:left}
.faq-q span:not(.plus){flex:1 1 auto}
.faq-a p{padding:0 18px 18px 58px;max-width:100%}
@media (max-width:1000px){
  .faq-2col{grid-template-columns:minmax(0,1fr);gap:24px}
  .faq-izq{position:static}
  .faq-a p{padding-left:18px}
}
@media (max-width:560px){
  .faq-q{padding:15px 15px;font-size:15px;gap:10px}
  .faq-q::before{min-width:22px;font-size:11.5px}
}


/* ---------- TANDA 6c: los detalles finos de su maqueta 11 ---------- */
/* El numero, dentro de su pastilla */
.faq-q::before{display:grid;place-items:center;min-width:34px;height:28px;border-radius:9px;
  background:rgba(8,48,180,.07);border:1px solid rgba(8,48,180,.12);text-align:center;
  transition:background .25s,border-color .25s,color .25s}
.faq-item.open .faq-q::before{background:var(--blue);border-color:var(--blue);color:#fff}
/* La respuesta, en su caja, como en la maqueta */
.faq-a p{margin:0 14px 14px 58px;padding:13px 15px;border-radius:12px;
  background:rgba(8,48,180,.045);border:1px solid rgba(8,48,180,.09)}
.faq-duda .fd-botones{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.faq-duda .btn{width:100%;justify-content:center}
.faq-duda .fd-ig{background:#fff;border:1px solid var(--line-l);color:var(--ink);box-shadow:none}
.faq-duda .fd-ig:hover{border-color:rgba(8,48,180,.35);color:var(--blue)}
@media (min-width:1200px){ .faq-duda .fd-botones{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1000px){ .faq-a p{margin-left:18px} }
@media (max-width:560px){
  .faq-a p{margin-left:15px;margin-right:15px}
  .faq-q::before{min-width:28px;height:25px;border-radius:8px}
}


/* ---------- TANDA 6d: el precio grande de su maqueta 10 ----------
   Solo CSS. El tramo elegido ensena su precio en grande, como en la
   maqueta. Ni una linea de JavaScript ni la logica de seleccion. */
.dur-row.selected .dur-row-price{font-size:30px;letter-spacing:-.01em}
.dur-row.selected .dur-row-unit{font-size:13px}
.dur-row.selected .dur-row-total{font-size:12px;color:var(--ink);opacity:.72}
.dur-row.selected{padding-top:13px;padding-bottom:13px}
.dur-row.selected .dur-row-pricebox{gap:3px}
.pago-compara .pc-n{font-size:22px}
/* La nota de abajo, como la banda de su maqueta */
.precios-note{margin-top:clamp(22px,2.3vw,32px);padding:15px clamp(16px,1.8vw,24px);
  border-radius:16px;background:rgba(8,48,180,.045);border:1px solid rgba(8,48,180,.10);
  max-width:min(1100px,100%);margin-left:auto;margin-right:auto;text-align:center}
@media (max-width:760px){ .dur-row.selected .dur-row-price{font-size:25px} }


/* =====================================================================
   REDISENO 11-oct · TANDA 7: LA ASESORIA
   Referencia: su maqueta 25.
   Antes: seis bloques de texto separados por una raya, sin iconos ni
   numeros, con la foto al lado centrada en vertical.
   Ahora: titular y foto en la columna izquierda, que se queda pegada; los
   seis en tarjetas con icono, numero y una linea de puntos que los une.
   Ni un texto cambiado. Los numeros los pone el CSS.
   ===================================================================== */

.ases-grid{max-width:min(1240px,100%);grid-template-columns:minmax(0,.86fr) minmax(0,1.32fr);
  gap:clamp(28px,3.2vw,58px);align-items:start}
.ases-izq{position:sticky;top:clamp(92px,9vh,116px);display:grid;gap:clamp(18px,2vw,26px)}
.ases-izq .sec-head{margin-bottom:0}
.sobre-photo.ases-foto{aspect-ratio:3/4}

.ases-list{counter-reset:ases;position:relative;gap:clamp(10px,1.1vw,14px)}
/* la linea de puntos que une las seis, como en la maqueta */
.ases-list{--ases-pad:clamp(16px,1.6vw,22px)}
.ases-list::before{content:'';position:absolute;left:calc(var(--ases-pad) + 22px);
  top:40px;bottom:40px;width:1.5px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg, rgba(114,144,255,.5) 0 4px, transparent 4px 10px)}
.ases-item{counter-increment:ases;position:relative;margin-left:0;border:1px solid var(--line-d);
  border-radius:17px;background:rgba(255,255,255,.035);
  padding:clamp(15px,1.5vw,20px) var(--ases-pad);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px clamp(13px,1.3vw,17px);
  transition:border-color .25s,background .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.ases-item:last-child{border-bottom:1px solid var(--line-d)}
.ases-item:hover{border-color:rgba(114,144,255,.42);background:rgba(114,144,255,.065);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){ .ases-item:hover{transform:none} }
.ases-ico{grid-row:1 / span 3;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:linear-gradient(150deg, rgba(8,48,180,.6), rgba(114,144,255,.14));
  border:1px solid rgba(114,144,255,.3);color:#a3b9ff;position:relative;z-index:2}
.ases-ico svg{width:21px;height:21px}
.ases-item .an{display:flex;align-items:center;gap:9px;margin-bottom:4px;font-size:11.5px}
.ases-item .an::before{content:counter(ases, decimal-leading-zero);display:grid;place-items:center;
  min-width:26px;height:21px;border-radius:7px;background:rgba(114,144,255,.14);
  border:1px solid rgba(114,144,255,.26);color:#cdd9ff;font-size:11px;letter-spacing:.02em}
.ases-item h3{font-size:clamp(16.5px,1.15vw,19px);margin-bottom:6px}
.ases-item p{max-width:100%;font-size:14.5px}
@media (max-width:1000px){
  .ases-grid{grid-template-columns:minmax(0,1fr);gap:26px;max-width:720px}
  .ases-izq{position:static}
  .sobre-photo.ases-foto{aspect-ratio:4/5;max-width:440px}
  .sobre-photo.ases-foto img{object-position:center}
}
@media (max-width:560px){
  .ases-list::before{display:none}
  .ases-item{grid-template-columns:minmax(0,1fr)}
  .ases-ico{grid-row:auto;width:40px;height:40px;margin-bottom:9px}
}

@media (prefers-reduced-motion: reduce){
  .fx-par{transform:none!important}
  .fx-sweep{background-image:none;-webkit-text-fill-color:currentColor}
  .fx-sweep.swept{animation:none}
}

/* ---------------------------------- DIAGNOSTICO GRATUITO (11-oct-2026)
   Lo pidio Miguel: "diagnostico gratuito i algo asi ponlo estilo como estas
   montqndo la web". Motivo medido: /diagnostico/ funcionaba y llevaba 0
   respuestas porque desde la home no se llegaba (la palabra salia 0 veces).

   Va con FONDO AZUL suyo, no con el navy de las otras secciones oscuras: queda
   entre `resultados` (claro) y `guias` (oscuro), y si fuera navy habria dos
   oscuras seguidas. Al ser de otra familia de color se lee como su propia cosa
   y de paso es el pico visual de la pagina, que para una seccion de captacion
   es justo lo que interesa. */
#diagnostico{background:linear-gradient(165deg,#0830B4 0%,#061E7A 58%,#04155c 100%);
  color:#fff;position:relative;overflow:hidden}
#diagnostico::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 420px at 78% -10%, rgba(114,144,255,.26), transparent 70%)}
#diagnostico>.wrap{position:relative;z-index:1}
#diagnostico .sec-head h2{color:#fff}
#diagnostico .sec-head p{color:rgba(255,255,255,.82)}
#diagnostico .kicker{color:#bcccff}
#diagnostico .kicker::after{background:#7290ff}

.dg-pasos{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)}
.dg-pasos li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;row-gap:7px;
  align-items:start;padding:18px 18px 19px;border-radius:18px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  transition:transform .25s ease,border-color .25s ease,background .25s ease}
.dg-pasos li:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.26)}
.dg-ico{grid-row:1 / span 2;display:grid;place-items:center;width:46px;height:46px;
  border-radius:14px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  color:#fff}
.dg-ico svg{width:21px;height:21px}
.dg-pasos .dg-n{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;
  background:#fff;color:#0830B4;font-family:'Clash Display',sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.02em}
.dg-pasos b{grid-column:2;display:block;font-weight:700;font-size:clamp(15px,.95vw,16.5px);
  color:#fff;margin:0}
.dg-pasos i{grid-column:2;display:block;font-style:normal;
  font-size:clamp(13.2px,.84vw,14.3px);line-height:1.6;color:rgba(255,255,255,.76)}

.dg-pie{margin:clamp(24px,2.6vw,34px) 0 0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:14px 20px;text-align:center}
.dg-cta{display:inline-flex;align-items:center;gap:10px;padding:15px 27px;border-radius:999px;
  background:#fff;color:#0830B4;font-weight:800;font-size:clamp(14.5px,.95vw,16px);
  text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 10px 30px rgba(4,12,50,.34);transition:transform .22s ease,box-shadow .22s ease}
.dg-cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(4,12,50,.42)}
.dg-cta svg{width:15px;height:11px}
.dg-nota{margin:0;font-size:13.6px;color:rgba(255,255,255,.72)}

@media (max-width:1100px){
  .dg-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  /* En movil una columna, y el icono arriba del todo: con el icono al lado,
     el titulo de dos palabras se partia en dos lineas (medido a 390). */
  .dg-pasos{grid-template-columns:minmax(0,1fr)}
  .dg-pasos li{grid-template-columns:auto minmax(0,1fr)}
  .dg-ico{width:42px;height:42px;border-radius:13px}
  .dg-ico svg{width:19px;height:19px}
  .dg-pie{justify-content:stretch;flex-direction:column}
  .dg-cta{justify-content:center;width:100%}
}

/* ------------------------- "PROXIMAMENTE" DE LA CORRECCION (11-oct-2026)
   Miguel: "pero mejora esteticamente y efecto". El recuadro de rayas grises
   decia, sin querer, "esto esta a medio hacer". Una seccion de venta no puede
   tener un hueco con pinta de obra. Ahora es una tarjeta con su icono y su
   titular: sigue diciendo lo mismo, pero suena a adelanto y no a excusa.
   El `.hueco` de la otra seccion NO se toca: esto es una clase aparte. */
.proximo{margin-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:15px;align-items:center;padding:17px 19px;border-radius:18px;
  background:linear-gradient(140deg, rgba(8,48,180,.07), rgba(114,144,255,.04));
  border:1px solid rgba(8,48,180,.16)}
.proximo-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(8,48,180,.1);border:1px solid rgba(8,48,180,.18);color:var(--blue)}
.proximo-ico svg{width:21px;height:21px}
.proximo-tx{display:grid;gap:4px}
.proximo-tx b{font-size:15px;font-weight:700;color:var(--ink)}
.proximo-tx span{font-size:13.6px;line-height:1.6;color:var(--muted)}
section.dark .proximo{background:linear-gradient(140deg, rgba(8,48,180,.16), rgba(114,144,255,.07));
  border-color:rgba(255,255,255,.14)}
section.dark .proximo-ico{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);color:#bcccff}
section.dark .proximo-tx b{color:#fff}
section.dark .proximo-tx span{color:rgba(255,255,255,.74)}
@media (max-width:560px){
  .proximo{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
}

/* El "efecto" que pedia: el play respira, para que se vea que eso es un video
   y no una foto. `prefers-reduced-motion` lo apaga, que a quien marea el
   movimiento no se le impone. */
@keyframes rvLatido{
  0%,100%{box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(255,255,255,.26)}
  70%{box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 16px rgba(255,255,255,0)}
}
.rv-play{animation:rvLatido 2.6s ease-out infinite}
.rv-video{position:relative}
.rv-video img{transition:transform .6s ease}
.revision-panel:hover .rv-video img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){
  .rv-play{animation:none}
  .revision-panel:hover .rv-video img{transform:none}
}

/* ===== TANDA · DIAGNOSTICO con mas fuerza visual y animacion (12-oct-2026) =====
   Pedido suyo: "mejorame la parte visual y con animacion de diagnostico".
   Solo CSS: ni un texto cambiado, ni un icono metido dentro de un data-i18n
   (el i18n hace innerHTML y se los tragaria al cambiar de idioma). */

/* 1 · El fondo deja de ser un degradado quieto: dos auroras que se mueven muy
       despacio, 26 s, sin que nada salte a la vista. */
#diagnostico::before{content:"";position:absolute;inset:-18%;pointer-events:none;z-index:0;
  background:
    radial-gradient(42% 38% at 18% 22%, rgba(114,144,255,.34), transparent 62%),
    radial-gradient(38% 34% at 82% 78%, rgba(10,64,220,.40), transparent 64%);
  filter:blur(28px);
  animation:dgAurora 26s ease-in-out infinite alternate}
@keyframes dgAurora{
  0%  {transform:translate3d(-2%,-1%,0) scale(1)}
  50% {transform:translate3d(3%,2%,0)   scale(1.08)}
  100%{transform:translate3d(-1%,3%,0)  scale(1.03)}}

/* 2 · Una rejilla finisima encima, para que el azul no sea una mancha plana. */
#diagnostico .wrap::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(76% 62% at 50% 34%, #000 32%, transparent 78%);
  -webkit-mask-image:radial-gradient(76% 62% at 50% 34%, #000 32%, transparent 78%)}
#diagnostico .sec-head,#diagnostico .dg-pasos,#diagnostico .dg-pie{position:relative;z-index:1}

/* 3 · El hilo que une los cuatro pasos, y que se DIBUJA al entrar en pantalla.
       Solo en ordenador: en movil las tarjetas van en columna y estorbaria. */
@media (min-width:1101px){
  .dg-pasos{position:relative}
  .dg-pasos::before{content:"";position:absolute;left:52px;right:52px;top:41px;height:2px;
    background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.14));
    transform:scaleX(0);transform-origin:left center;
    transition:transform 1.5s cubic-bezier(.16,1,.3,1) .25s}
  .dg-pasos.in::before{transform:scaleX(1)}
}

/* 4 · Las cuatro tarjetas entran escalonadas, una detras de otra. */
.dg-pasos li{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1),
             border-color .25s ease, background .25s ease, box-shadow .3s ease}
.dg-pasos.in li{opacity:1;transform:none}
.dg-pasos.in li:nth-child(1){transition-delay:.06s}
.dg-pasos.in li:nth-child(2){transition-delay:.18s}
.dg-pasos.in li:nth-child(3){transition-delay:.30s}
.dg-pasos.in li:nth-child(4){transition-delay:.42s}

/* 5 · La tarjeta, con mas cuerpo: cristal de verdad y un borde que se enciende. */
.dg-pasos li{position:relative;overflow:hidden;
  background:linear-gradient(170deg, rgba(255,255,255,.115), rgba(255,255,255,.052));
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 16px 34px -26px rgba(2,8,38,.9)}
.dg-pasos li::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.17), transparent 62%)}
.dg-pasos li:hover{transform:translateY(-6px);
  border-color:rgba(255,255,255,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 26px 46px -24px rgba(2,8,38,.95)}
.dg-pasos li:hover::after{opacity:1}

/* 6 · El icono respira, y al pasar por encima se enciende de verdad. */
.dg-ico{position:relative;z-index:1;
  background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.1));
  box-shadow:0 0 0 0 rgba(146,174,255,.46);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease}
.dg-pasos.in .dg-ico{animation:dgLatido 4.6s ease-in-out infinite}
.dg-pasos.in li:nth-child(2) .dg-ico{animation-delay:.5s}
.dg-pasos.in li:nth-child(3) .dg-ico{animation-delay:1s}
.dg-pasos.in li:nth-child(4) .dg-ico{animation-delay:1.5s}
@keyframes dgLatido{
  0%,72%,100%{box-shadow:0 0 0 0 rgba(146,174,255,.40)}
  86%        {box-shadow:0 0 0 9px rgba(146,174,255,0)}}
.dg-pasos li:hover .dg-ico{transform:translateY(-2px) scale(1.07);
  background:#fff;color:#0830B4;border-color:#fff}
.dg-ico svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.dg-pasos li:hover .dg-ico svg{transform:scale(1.08)}

/* 7 · El numero, encima del icono y marcando el paso. */
.dg-pasos .dg-n{position:relative;z-index:2;
  box-shadow:0 4px 12px rgba(2,8,38,.45);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.dg-pasos li:hover .dg-n{transform:scale(1.1)}

/* 8 · El boton: un brillo que lo cruza cada pocos segundos, sin ser una feria. */
.dg-cta{position:relative;overflow:hidden;isolation:isolate}
.dg-cta::before{content:"";position:absolute;top:0;bottom:0;left:-62%;width:46%;z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(8,48,180,.16), transparent);
  transform:skewX(-18deg);animation:dgBrillo 5.4s ease-in-out infinite}
@keyframes dgBrillo{0%,62%{left:-62%}88%,100%{left:118%}}
.dg-cta:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(4,12,50,.5)}

/* 9 · Quien tenga el movimiento desactivado no ve NADA de esto. */
@media (prefers-reduced-motion: reduce){
  #diagnostico::before{animation:none}
  .dg-pasos::before{transition:none;transform:scaleX(1)}
  .dg-pasos li{opacity:1;transform:none;transition:none}
  .dg-pasos.in .dg-ico{animation:none}
  .dg-cta::before{animation:none;display:none}
}


/* ===== Correcciones reales (12-oct-2026) ============================
   Sustituye al panel de ejemplo con datos inventados. Son grabaciones
   suyas de verdad, con la identidad de la persona pixelada por el. Los
   videos van SIN SONIDO porque estan acelerados: lo pidio asi. */
.corr{position:relative;border-radius:24px;overflow:hidden;margin-top:40px;
  padding:clamp(18px,3vw,34px) clamp(14px,2.4vw,26px) clamp(20px,3vw,30px);
  background-image:url('/assets/revision-fondo.jpg');background-size:cover;background-position:center 20%}
.corr::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(5,7,13,.90), rgba(5,7,13,.95) 58%, var(--void) 100%)}
.corr > *{position:relative;z-index:1}
.corr .rv-lado{border-radius:14px}
.corr-marco{position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg, rgba(10,17,40,.96), rgba(5,7,13,.98));
  border:1px solid rgba(114,144,255,.22);
  box-shadow:0 38px 86px -34px rgba(2,6,24,.95), inset 0 1px 0 rgba(255,255,255,.06)}
.corr-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  background:linear-gradient(90deg, var(--blue-brand), var(--blue));
  border-bottom:1px solid rgba(255,255,255,.10)}
.corr-barra b{font-weight:800;letter-spacing:.1em}
.corr-barra .corr-mudo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  letter-spacing:.06em;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.corr-barra .corr-mudo svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.corr-visor{position:relative;background:#05070d;aspect-ratio:1280/790}
.corr-visor video{display:block;width:100%;height:100%;object-fit:cover;background:#05070d}
.corr-visor::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -60px 70px -60px rgba(0,0,0,.8)}

/* Las cuatro miniaturas, para cambiar de correccion */
.corr-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.corr-mini{position:relative;padding:0;border:1px solid rgba(114,144,255,.20);border-radius:13px;
  overflow:hidden;background:#0a1128;cursor:pointer;line-height:0;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease}
.corr-mini img{width:100%;height:100%;display:block;aspect-ratio:1280/790;object-fit:cover;
  opacity:.88;transition:opacity .25s ease, transform .45s ease}
.corr-mini::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;
  pointer-events:none;background:linear-gradient(180deg, rgba(5,7,13,0), rgba(5,7,13,.88))}
.corr-mini span{position:absolute;left:9px;right:9px;bottom:7px;z-index:2;font-size:11px;font-weight:700;
  letter-spacing:.03em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.95);line-height:1.2;text-align:left}
/* El play: sin el, una miniatura parece una foto y nadie la toca */
.corr-ply{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(8,16,40,.62);border:1.5px solid rgba(255,255,255,.62);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.9);transition:.25s ease}
.corr-ply::after{content:'';margin-left:3px;border-left:11px solid #fff;
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.corr-mini:hover{transform:translateY(-3px);border-color:rgba(114,144,255,.60)}
.corr-mini:hover img{opacity:1;transform:scale(1.045)}
.corr-mini:hover .corr-ply{background:var(--blue);border-color:#fff;transform:translate(-50%,-50%) scale(1.1)}
.corr-mini:active{transform:translateY(-1px) scale(.985)}
.corr-mini[aria-pressed="true"]{border-color:var(--blue-soft);
  box-shadow:0 0 0 2px rgba(114,144,255,.75), 0 16px 34px -16px rgba(8,48,180,.95)}
.corr-mini[aria-pressed="true"] img{opacity:1}
.corr-mini[aria-pressed="true"] .corr-ply{opacity:0;transform:translate(-50%,-50%) scale(.6)}
/* El punto que late marca cual se esta viendo, y no lleva texto: asi vale igual
   en los seis idiomas de la pagina. */
.corr-mini[aria-pressed="true"]::before{content:'';position:absolute;top:9px;left:9px;z-index:3;
  width:9px;height:9px;border-radius:50%;background:var(--blue-soft);
  animation:corrLate 2s ease-out infinite}
@keyframes corrLate{
  0%{box-shadow:0 0 0 0 rgba(114,144,255,.65)}
  70%{box-shadow:0 0 0 10px rgba(114,144,255,0)}
  100%{box-shadow:0 0 0 0 rgba(114,144,255,0)}}

.corr-pie{margin:14px 0 0;font-size:13.4px;line-height:1.65;color:var(--muted-d);max-width:760px}

/* La videollamada, al lado de los tres botones de siempre */
.corr-abajo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;
  align-items:start;margin-top:26px}
.corr-llamada{border-radius:18px;overflow:hidden;border:1px solid rgba(114,144,255,.20);
  background:linear-gradient(150deg, rgba(10,17,40,.9), rgba(5,7,13,.96));
  box-shadow:0 28px 64px -30px rgba(2,6,24,.9)}
.corr-llamada img{display:block;width:100%;height:auto}
.corr-llamada figcaption{padding:13px 16px 15px;font-size:12.8px;line-height:1.6;color:var(--muted-d);
  border-top:1px solid rgba(255,255,255,.07)}
.corr-llamada figcaption b{display:block;color:var(--white);font-size:14px;margin-bottom:3px}

@media (max-width:860px){
  .corr-abajo{grid-template-columns:1fr}
  .corr-minis{grid-template-columns:repeat(2,1fr)}
  .corr-barra{font-size:10.5px;padding:10px 13px}
  .corr-barra .corr-mudo{padding:3px 8px}
}
@media (prefers-reduced-motion: reduce){
  .corr-mini,.corr-mini img,.corr-ply{transition:none}
  .corr-mini:hover{transform:none}
  .corr-mini:hover img{transform:none}
  .corr-mini[aria-pressed="true"]::before{animation:none}
  .rv-txt.rv-ent{animation:none}
}

/* =====================================================================
   14-oct · LA TIRA DE MOVILES: EL ICONO Y LA ENTRADA DELANTE, Y MOVIMIENTO
   Miguel queria que lo primero sea como se ve la app en su movil (el icono)
   y como se entra; con eso son 12 pantallas. La activa (clase .activo, la
   pone el script) manda: mas grande, flotando y con halo azul; las de al
   lado se quedan atras y atenuadas.
   El halo es un drop-shadow y no un box-shadow: en el movil la figura ocupa
   todo el ancho y la pantalla es solo la imagen, y el drop-shadow sigue su
   forma. Los tres filtros van siempre en la misma lista para que la entrada
   pueda pasar de uno a otro sin saltos.
   ===================================================================== */
.app-tira .app-movil img{animation:none}
.app-tira .app-movil{filter:drop-shadow(0 0 0 rgba(59,110,255,0)) drop-shadow(0 0 0 rgba(8,48,180,0)) opacity(1)}
.app-tira .app-movil.activo{animation:appFlotaM 6s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(59,110,255,.55)) drop-shadow(0 14px 24px rgba(8,48,180,.32)) opacity(1)}
@keyframes appFlotaM{0%,100%{translate:0 0}50%{translate:0 -8px}}
/* Sitio para el flote y el halo sin cambiar lo que ocupa la tira */
.app-tira-v{padding-top:22px;padding-bottom:30px;margin-top:-20px;margin-bottom:-28px}
@media (max-width:900px){
  /* En el movil la pantalla casi toca los bordes de la tira: un halo ancho se
     cortaba en un rectangulo. Aqui va mas recogido y con mas aire arriba y abajo. */
  .app-tira-v{padding-top:36px;padding-bottom:40px;margin-top:-34px;margin-bottom:-38px}
  .app-tira .app-movil.activo{filter:drop-shadow(0 0 6px rgba(59,110,255,.55)) drop-shadow(0 8px 10px rgba(8,48,180,.26)) opacity(1)}
}
@media (min-width:901px){
  .app-izq .app-tira{--mw:clamp(150px,13vw,190px)}
  .app-izq .app-tira-v{padding:24px 2px 30px;margin:-22px 0 -22px}
  /* un hueco a cada lado para que la primera y la ultima puedan ir en medio */
  .app-izq .app-tira-v::before,.app-izq .app-tira-v::after{content:"";flex:0 0 calc(50% - var(--mw) / 2 - 16px)}
  .app-izq .app-tira .app-movil{flex:0 0 var(--mw);transform:scale(.84) !important;opacity:.5 !important;
    transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease,filter .5s ease}
  .app-izq .app-tira .app-movil:not(.activo):hover{opacity:.78 !important}
  .app-izq .app-tira .app-movil.activo{transform:scale(1) !important;opacity:1 !important}
}
/* La entrada escalonada (la enciende el script al llegar al bloque) */
.app-viva.app-espera .app-movil{translate:0 34px;
  filter:drop-shadow(0 0 0 rgba(59,110,255,0)) drop-shadow(0 0 0 rgba(8,48,180,0)) opacity(0)}
.app-viva.app-espera .app-puntos li,.app-viva.app-espera .app-otro-puente{translate:0 26px;opacity:0}
.app-viva.app-entra .app-movil{animation:appEntraM .9s cubic-bezier(.16,1,.3,1) calc(var(--n,0) * 90ms) both}
.app-viva.app-entra .app-movil.activo{animation:appEntraM .9s cubic-bezier(.16,1,.3,1) calc(var(--n,0) * 90ms) both,
  appFlotaM 6s ease-in-out 1s infinite}
.app-viva.app-entra .app-puntos li,.app-viva.app-entra .app-otro-puente{
  animation:appEntraT .8s cubic-bezier(.16,1,.3,1) calc(var(--n,0) * 110ms) both}
@keyframes appEntraM{from{translate:0 34px;
  filter:drop-shadow(0 0 0 rgba(59,110,255,0)) drop-shadow(0 0 0 rgba(8,48,180,0)) opacity(0)}}
@keyframes appEntraT{from{translate:0 26px;opacity:0}}
/* Las tarjetas de la derecha: se levantan y el icono da un bote */
.app-otro-puente{transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s,box-shadow .28s}
@media (hover:hover){
  .app-otro-puente:hover{transform:translateY(-4px);box-shadow:0 26px 52px -28px rgba(8,48,180,.62)}
  .app-puntos li:hover .app-pt-ico,.app-otro-puente:hover .app-otro-ico{animation:appBota .75s cubic-bezier(.28,.84,.42,1)}
}
@keyframes appBota{0%{translate:0 0;scale:1}28%{translate:0 -7px;scale:1.08}52%{translate:0 0;scale:.96}
  72%{translate:0 -2px;scale:1.01}100%{translate:0 0;scale:1}}
@media (prefers-reduced-motion: reduce){
  .app-tira .app-movil.activo,.app-viva .app-movil,.app-viva .app-puntos li,.app-viva .app-otro-puente{animation:none !important}
  .app-izq .app-tira .app-movil,.app-izq .app-tira .app-movil.activo{transform:none !important;transition:none}
  .app-puntos li:hover,.app-otro-puente:hover{transform:none}
  .app-puntos li:hover .app-pt-ico,.app-otro-puente:hover .app-otro-ico{animation:none}
  .app-otro-puente{transition:none}
  .app-tira-fl.next.nudge{animation:none}
}


</style>
/* 16-oct (t355): compra de la app en su sección. Colores y letras de la web. */
#comprar-app{scroll-margin-top:96px}
/* el panel recortaba con overflow:hidden y eso anula el sticky de «Hablar conmigo»; clip recorta igual */
@supports (overflow:clip){.app-slab:has(#comprar-app){overflow:clip}}
.cap{margin-top:34px;padding-top:30px;border-top:1px solid #dde4f4}
.cap-cab{text-align:center;max-width:620px;margin:0 auto 24px}
.cap-cab .kicker{margin-bottom:10px}
.cap-cab h3{font-family:'Clash Display',sans-serif;font-weight:600;font-size:clamp(25px,2.6vw,34px);line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.cap-cab p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.cap-plan,.cap-incl{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 22px 22px;border-radius:22px;
     border:1px solid #dde4f4;background:rgba(255,255,255,.94);box-shadow:0 18px 40px -30px rgba(8,48,180,.55)}
.cap-plan{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.cap-plan.in:hover{transform:translateY(-6px);border-color:rgba(8,48,180,.42);box-shadow:0 30px 60px -30px rgba(8,48,180,.62)}
.cap-plan.top{border:2px solid var(--blue);background:linear-gradient(170deg,#f3f6ff 0%,#fff 70%);box-shadow:0 30px 70px -34px rgba(8,48,180,.7)}
.cap-plan.top::after{content:"";position:absolute;inset:-2px;border-radius:22px;pointer-events:none;
     box-shadow:0 0 0 0 rgba(114,144,255,.45);animation:capLatido 3.2s ease-out infinite}
@keyframes capLatido{0%{box-shadow:0 0 0 0 rgba(114,144,255,.42)}70%,100%{box-shadow:0 0 0 14px rgba(114,144,255,0)}}
.cap-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eef2ff;color:var(--blue);margin-bottom:6px}
.cap-ico svg{width:20px;height:20px}
.cap-plan.top .cap-ico{background:var(--blue);color:#fff}
.cap-badge{position:absolute;top:-13px;right:18px;padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
     color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-soft));box-shadow:0 10px 24px -10px rgba(8,48,180,.75)}
.cap-t{font-family:'Clash Display',sans-serif;font-weight:600;font-size:19px;color:var(--ink)}
.cap-precio{font-family:'Clash Display',sans-serif;font-weight:600;font-size:clamp(34px,3.4vw,42px);line-height:1.05;color:var(--ink);white-space:nowrap}
.cap-plan.top .cap-precio{color:var(--blue)}
.cap-precio small{font-family:'Manrope',system-ui,sans-serif;font-size:15px;font-weight:600;color:var(--muted);margin-left:3px}
.cap-nota{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.cap-nota b{color:var(--blue);font-weight:700}
.cap-vs s{text-decoration-thickness:1.5px}
.cap-sep{flex:1 1 auto;min-height:12px}
.cap-btn{justify-content:center;width:100%;padding:15px 20px}
.cap-btn .cap-fl{width:16px;height:16px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.cap-btn:hover .cap-fl{transform:translate(2px,-2px)}
.cap-incl{background:transparent;border-style:dashed;box-shadow:none}
.cap-incl-t{font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:6px}
.cap-incl ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cap-incl li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink)}
.cap-ok{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.cap-ok svg{width:13px;height:13px}
.cap-incl-nota{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.cap-hablar{position:sticky;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;
     width:fit-content;max-width:100%;margin:22px auto 0;padding:8px 8px 8px 20px;border-radius:999px;
     background:rgba(255,255,255,.92);border:1px solid #dde4f4;box-shadow:0 18px 40px -24px rgba(8,48,180,.55);
     -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cap-hablar-t{font-size:14px;font-weight:600;color:var(--muted)}
.cap-wa{padding:11px 20px;font-size:14.5px;background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
.cap-wa svg{width:18px;height:18px}
.cap-wa:hover{transform:translateY(-2px);background:#f3f6ff}
@media (max-width:900px){
  .cap{margin-top:26px;padding-top:24px}
  .cap-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .cap-plan.top{order:-1}
  .cap-hablar{width:100%;padding:10px;border-radius:20px;text-align:center}
  .cap-hablar-t{width:100%}
  .cap-wa{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .cap-plan.top::after{animation:none}
  .cap-plan,.cap-btn .cap-fl{transition:none}
}