/* ═══════════════════════════════════════════════════════
   MediRecord — animaciones y detalles visuales de la página
   Todo se apaga solo si la persona tiene activado «reducir movimiento».
═══════════════════════════════════════════════════════ */
:root{--ease:cubic-bezier(.2,.8,.2,1);--glow:rgba(37,99,235,.35)}
section[id],.hero{scroll-margin-top:68px}
::selection{background:var(--primary);color:#fff}

/* ── Barra de avance al bajar ── */
.progreso{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#60a5fa,var(--primary),#6366f1);pointer-events:none}

/* ── Barra superior ── */
.top{transition:box-shadow .3s ease,background .3s ease}
.top.scrolled{box-shadow:0 8px 28px rgba(15,23,42,.1);background:rgba(255,255,255,.88)}
.top .wrap{transition:height .3s var(--ease)}
.top.scrolled .wrap{height:60px}
.logo-mark{transition:transform .5s var(--ease)}
.logo:hover .logo-mark{transform:rotate(-12deg) scale(1.1)}
.nav a:not(.btn){position:relative;padding:4px 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--primary);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover::after,.nav a.activo::after{transform:scaleX(1)}
.nav a.activo{color:var(--primary)}
.burger span{transition:transform .3s var(--ease),opacity .2s}
.burger:hover span:nth-child(1){transform:translateX(3px)}
.burger:hover span:nth-child(3){transform:translateX(-3px)}

/* ── Botones ── */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),background .2s ease,box-shadow .25s ease,color .2s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}
.btn:hover::after{transform:translateX(120%);transition:transform .7s var(--ease)}
.btn-primary{box-shadow:0 6px 18px rgba(37,99,235,.28)}
.btn-primary:hover{box-shadow:0 12px 28px rgba(37,99,235,.42)}
.btn:active{transform:translateY(0) scale(.98)}
.hero-cta .btn-primary{animation:pulso 2.8s ease-in-out 1.6s infinite}
@keyframes pulso{0%,100%{box-shadow:0 6px 18px rgba(37,99,235,.28)}50%{box-shadow:0 6px 18px rgba(37,99,235,.28),0 0 0 9px rgba(37,99,235,.14)}}

/* ── Hero ── */
.hero{position:relative;overflow:hidden}
.hero-fondo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-fondo i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.hero-fondo i:nth-child(1){width:420px;height:420px;left:-120px;top:-100px;background:#93c5fd;animation:deriva 16s ease-in-out infinite}
.hero-fondo i:nth-child(2){width:360px;height:360px;right:-80px;top:40px;background:#c7d2fe;animation:deriva 20s ease-in-out -6s infinite reverse}
.hero-fondo i:nth-child(3){width:300px;height:300px;left:38%;bottom:-140px;background:#a5f3fc;opacity:.4;animation:deriva 18s ease-in-out -3s infinite}
@keyframes deriva{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(50px,30px) scale(1.08)}66%{transform:translate(-30px,50px) scale(.95)}}
.hero-fondo::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(37,99,235,.14) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.resalta{position:relative;white-space:normal;background:linear-gradient(100deg,var(--primary) 10%,#6366f1 60%,#0ea5e9 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilla 6s ease-in-out infinite}
@keyframes brilla{0%,100%{background-position:0 0}50%{background-position:100% 0}}

.hero-in>*{opacity:0;transform:translateY(26px);animation:sube .8s var(--ease) forwards;animation-delay:calc(var(--d,0)*110ms + 120ms)}
@keyframes sube{to{opacity:1;transform:none}}

.hero-mock{position:relative;perspective:1100px}
.rec{transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s var(--ease);will-change:transform;animation:rise .9s var(--ease) .25s both,flota 7s ease-in-out 1.2s infinite}
@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -10px}}
.rec:hover{box-shadow:14px 14px 0 var(--ink)}
.avatar{position:relative}
.avatar::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--primary);opacity:0;animation:onda 2.6s ease-out 1.5s infinite}
@keyframes onda{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.rec .tab.on{animation:marca 1s ease .9s both}
@keyframes marca{from{background:var(--primary-100)}to{background:var(--white)}}
.row{opacity:0;transform:translateX(14px);animation:entra-x .6s var(--ease) forwards}
.row:nth-child(1){animation-delay:.9s}.row:nth-child(2){animation-delay:1.05s}.row:nth-child(3){animation-delay:1.2s}.row:nth-child(4){animation-delay:1.35s}
@keyframes entra-x{to{opacity:1;transform:none}}
.slot{opacity:0;transform:translateY(8px);animation:sube .6s var(--ease) forwards;transition:background .2s,padding-left .25s var(--ease)}
.slot:nth-of-type(1){animation-delay:1.5s}.slot:nth-of-type(2){animation-delay:1.65s}.slot:nth-of-type(3){animation-delay:1.8s}
.slot:hover{background:var(--primary-light);padding-left:8px;border-radius:8px}
.chip{animation:pop .6s cubic-bezier(.2,1.6,.4,1) 2.1s both}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.flota{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px rgba(15,23,42,.16);opacity:0;animation:aparece-flota .7s cubic-bezier(.2,1.4,.4,1) forwards,vaiven 6s ease-in-out infinite}
.flota svg{width:18px;height:18px;stroke:var(--primary);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.flota.f1{right:26px;top:-20px;animation-delay:2.2s,2.9s}
.flota.f2{right:-18px;bottom:20%;animation-delay:2.6s,3.3s;animation-direction:normal,reverse}
@keyframes aparece-flota{from{opacity:0;transform:scale(.7) translateY(16px)}to{opacity:1;transform:none}}
@keyframes vaiven{0%,100%{translate:0 0}50%{translate:0 -9px}}

@keyframes rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}

/* ── Aparición al hacer scroll ── */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*90ms);will-change:opacity,transform}
.js .rv.rv-zoom{transform:scale(.92) translateY(18px)}
.js .rv.rv-izq{transform:translateX(-36px)}
.js .rv.rv-der{transform:translateX(36px)}
.js .rv.vis{opacity:1;transform:none}
.sec-head h2{position:relative;padding-bottom:16px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--primary),#818cf8);transform-origin:0 50%;transition:transform .8s var(--ease) .3s}
.js .sec-head h2::after{transform:scaleX(0)}
.pricing .sec-head h2::after{left:50%;margin-left:-32px}
.js .sec-head.vis h2::after{transform:scaleX(1)}

/* ── Para quién ── */
.who-list li{position:relative;transition:padding-left .35s var(--ease),background .3s}
.who-list li::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:4px;background:var(--primary);transform:scaleY(0);transition:transform .35s var(--ease)}
.who-list li:first-child::before{top:0}
.who-list li:hover{padding-left:20px}
.who-list li:hover::before{transform:scaleY(1)}
.who-list li:hover h3{color:var(--primary-dark)}

/* ── Funciones ── */
.f{position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.f::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.13),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.f-big::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(99,102,241,.4),transparent 55%)}
.f:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(15,23,42,.14);border-color:var(--primary-200)}
.f-big:hover{border-color:var(--ink)}
.f:hover::before{opacity:1}
.f .ico{transition:transform .5s cubic-bezier(.2,1.5,.4,1),background .3s}
.f:hover .ico{transform:rotate(-8deg) scale(1.12)}
.f:not(.f-big):hover .ico{background:var(--primary-100)}
.f-big{background-image:radial-gradient(circle at 100% 0%,rgba(99,102,241,.35),transparent 55%)}

/* ── Pasos ── */
.steps li::before{transition:transform .5s cubic-bezier(.2,1.6,.4,1),background .3s}
.js .steps li::before{transform:scale(0)}
.js .steps li.vis::before{transform:scale(1)}
.steps li:hover::before{background:var(--primary);transform:scale(1.1) rotate(-6deg)}
.steps li::after{transform-origin:0 50%;transition:transform 1s var(--ease) .4s}
.js .steps li::after{transform:scaleX(0)}
.js .steps li.vis::after{transform:scaleX(1)}

/* ── Precios ── */
.preset{transition:transform .25s var(--ease),border-color .2s,background .2s,box-shadow .25s}
.preset:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(15,23,42,.1)}
.preset[aria-pressed="true"]{box-shadow:0 0 0 3px var(--primary-100)}
.stepper button{transition:background .15s,color .15s,transform .15s}
.stepper button:active:not(:disabled){transform:scale(.88)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output.cambia,.out-price.cambia span,.out-first.cambia strong{animation:salta .4s var(--ease)}
@keyframes salta{40%{transform:translateY(-6px) scale(1.12);color:var(--primary)}}
.stepper output,.out-price span,.out-first strong{display:inline-block}
.toggle button{transition:background .25s,color .25s}
.calc-in{transition:box-shadow .3s}
.calc-in:hover{box-shadow:0 20px 44px rgba(15,23,42,.08)}
.calc-out{background-image:radial-gradient(circle at 100% 0%,rgba(99,102,241,.35),transparent 60%);overflow:hidden}
.out-rows div{animation:entra-x .4s var(--ease) both;opacity:0}
.out-rows div:nth-child(2){animation-delay:.05s}.out-rows div:nth-child(3){animation-delay:.1s}.out-rows div:nth-child(4){animation-delay:.15s}
.incl li{transition:transform .25s var(--ease)}
.incl li:hover{transform:translateX(5px)}

/* ── Preguntas ── */
details{transition:background .25s,padding .25s var(--ease)}
details:hover{background:linear-gradient(90deg,var(--primary-light),transparent)}
summary{transition:color .2s}
summary:hover{color:var(--primary-dark)}
details[open]{background:linear-gradient(90deg,var(--primary-light),transparent)}
details[open] p{animation:abre .45s var(--ease)}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── Cierre ── */
.cta{position:relative;overflow:hidden;background:linear-gradient(120deg,#2563eb,#4f46e5 55%,#2563eb);background-size:200% 100%;animation:fluye 12s ease-in-out infinite}
@keyframes fluye{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.cta::before{width:340px;height:340px;left:-90px;top:-120px;animation:deriva 14s ease-in-out infinite}
.cta::after{width:260px;height:260px;right:-60px;bottom:-110px;animation:deriva 17s ease-in-out -5s infinite reverse}
.cta .wrap{position:relative;z-index:1}
.cta .btn-light{box-shadow:0 10px 26px rgba(15,23,42,.25);animation:pulso-b 2.8s ease-in-out infinite}
@keyframes pulso-b{0%,100%{box-shadow:0 10px 26px rgba(15,23,42,.25)}50%{box-shadow:0 10px 26px rgba(15,23,42,.25),0 0 0 10px rgba(255,255,255,.18)}}

/* ── Menú lateral ── */
.drawer.open .d-portal,.drawer.open .d-links a,.drawer.open .btn-block{animation:entra-x .5s var(--ease) both;opacity:0}
.drawer.open .d-portal{animation-delay:.1s}
.drawer.open .d-links a:nth-child(1){animation-delay:.18s}.drawer.open .d-links a:nth-child(2){animation-delay:.24s}.drawer.open .d-links a:nth-child(3){animation-delay:.3s}.drawer.open .d-links a:nth-child(4){animation-delay:.36s}
.drawer.open .btn-block{animation-delay:.44s}
.d-links a{transition:padding-left .25s var(--ease),color .2s}
.d-links a:hover{padding-left:14px}
.d-portal{transition:transform .2s var(--ease),background .2s}
.d-portal:hover{transform:translateX(-4px)}
.d-portal .chev{transition:transform .25s var(--ease)}
.d-portal:hover .chev{transform:translateX(5px)}

/* ── Volver arriba ── */
.arriba{position:fixed;right:18px;bottom:18px;z-index:25;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 24px rgba(15,23,42,.3);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .3s,transform .35s var(--ease),background .2s}
.arriba.ver{opacity:1;transform:none;pointer-events:auto}
.arriba:hover{background:var(--primary);transform:translateY(-4px)}
.arriba svg{width:20px;height:20px;stroke:#fff;stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .flota{display:none}
  .hero-fondo i{filter:blur(46px)}
}
@media (hover:none){
  .f:hover,.preset:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.hero-in>*,.row,.slot,.chip,.flota,.out-rows div{opacity:1!important;transform:none!important}
  .js .sec-head h2::after,.js .steps li::before,.js .steps li::after{transform:none!important}
  html{scroll-behavior:auto}
}

/* Evita barra horizontal por elementos que entran desde un lado o por los círculos de fondo */
html,body{overflow-x:clip}