/* Ingreso: pantalla dividida (marca + formulario), mismo lenguaje que el login de Nexus Patios y Grúas.
   Los verdes salen de la paleta de Personalización (--b*, ver movit.css). */
.acceso{position:relative;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);background:color-mix(in srgb,var(--b500) 5%,var(--bg));overflow:hidden}
.acceso.simple{grid-template-columns:1fr}

/* ── Lado de la marca ── */
.acceso-marca{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(26px,3.6vw,52px);color:#fff;background:radial-gradient(800px 420px at 92% 6%,rgba(242,183,5,.26),transparent 60%),var(--hondo);overflow:hidden;isolation:isolate}
.acceso-marca::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 40% 45%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse at 40% 45%,#000 0%,transparent 72%)}
.mancha{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-1}
.mancha.m1{width:34vmax;height:34vmax;top:-12vmax;left:-10vmax;background:var(--b500);opacity:.34;animation:deriva1 24s ease-in-out infinite alternate}
.mancha.m2{width:26vmax;height:26vmax;bottom:-12vmax;right:-8vmax;background:var(--sun);opacity:.18;animation:deriva2 30s ease-in-out infinite alternate}
.mancha.m3{width:18vmax;height:18vmax;top:45%;left:40%;background:#fff;opacity:.05;animation:deriva1 20s ease-in-out infinite alternate-reverse}
@keyframes deriva1{to{transform:translate(8vmax,6vmax) scale(1.15)}}
@keyframes deriva2{to{transform:translate(-8vmax,-5vmax) scale(.9)}}

.acceso-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.acceso-logo{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.acceso-logo b{display:block;font-family:"Sora",system-ui,sans-serif;font-size:16px}
.acceso-logo small{display:block;font-size:12px;color:var(--b300);font-weight:600}
.acceso-logo-gota{width:50px;height:50px;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.acceso-conocer{font-size:13px;font-weight:700;color:var(--b100);text-decoration:none;padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.acceso-conocer:hover{background:rgba(255,255,255,.14);color:#fff}

.acceso-centro{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;justify-items:center;text-align:center}
.acceso-movit{display:flex;align-items:flex-end;gap:6px;justify-content:center}
.acceso-gota{position:relative;isolation:isolate;width:112px;height:112px;flex:none;padding:0;border:0;background:none;cursor:pointer;transition:transform .3s var(--ease)}
.acceso-gota::after{content:"";position:absolute;left:24%;right:24%;bottom:2px;height:12px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(6px);z-index:-1}
.acceso-gota:hover{transform:translateY(-3px) rotate(-3deg)}
.acceso-gota .gota-box{width:100%;height:100%}
.acceso-burbuja{position:relative;width:min(300px,26vw);margin-bottom:62px;padding:11px 15px 13px;border-radius:18px 18px 6px 18px;background:rgba(255,255,255,.96);color:#0f2a16;text-align:left;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);opacity:0;transform:translateY(8px) scale(.96);transform-origin:100% 100%;transition:opacity .35s ease,transform .35s var(--ease)}
.acceso-burbuja.ver{opacity:1;transform:none}
.acceso-burbuja::after{content:"";position:absolute;right:-7px;bottom:14px;width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:3px}
.acceso-burbuja .quien{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--b700);margin-bottom:2px}
.acceso-burbuja p{position:relative;z-index:1;margin:0;font-size:14px;line-height:1.45;font-weight:600;min-height:40px}
.acceso-burbuja .cursor{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:mv-caret .8s steps(2) infinite}

.acceso-etiqueta{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.acceso-etiqueta i{width:7px;height:7px;border-radius:50%;background:var(--b300);animation:latido 2s infinite}
.acceso-titulo{font-family:"Sora",system-ui,sans-serif;font-size:clamp(30px,3.2vw,50px);line-height:1.06;font-weight:800;letter-spacing:-.035em;margin:18px 0 14px;color:#fff}
.acceso-titulo em{font-style:normal;background:linear-gradient(90deg,var(--b300),var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent}
.acceso-parrafo{font-size:clamp(15px,1.1vw,17px);line-height:1.6;opacity:.84;max-width:540px;margin:0 auto}
.acceso-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;text-align:left}
.acceso-chip{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:16px;font-size:13px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);animation:flota 7s ease-in-out infinite}
.acceso-chip:nth-child(2){animation-delay:-2.3s}.acceso-chip:nth-child(3){animation-delay:-4.6s}
.acceso-chip small{display:block;font-size:11px;font-weight:500;opacity:.72}
.acceso-chip .ico{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--b500);color:#fff;box-shadow:0 8px 18px -8px var(--b500)}
.acceso-chip .ico .ic{width:17px;height:17px}

/* Pantalla de llamado de muestra */
.acceso-llamado{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px;width:min(480px,92%);padding:12px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);box-shadow:0 40px 80px -36px rgba(0,0,0,.7);text-align:left}
.ll-actual{display:flex;flex-direction:column;justify-content:center;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,var(--b600),var(--b800));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ll-actual.nuevo{animation:llega .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes llega{0%{transform:scale(.92);opacity:.4}60%{transform:scale(1.03)}100%{transform:none;opacity:1}}
.ll-et{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.ll-actual b{font-family:"Sora",system-ui,sans-serif;font-size:38px;line-height:1.05;letter-spacing:-.02em}
.ll-vent{display:flex;align-items:center;gap:6px;margin-top:4px;font-weight:700;font-size:13.5px;color:var(--sun)}
.ll-vent .ic{width:15px;height:15px}
.ll-cola{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ll-cola li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 11px;border-radius:11px;background:rgba(255,255,255,.07);font-size:12.5px}
.ll-cola li:first-child{animation:sube .5s var(--ease) both}
.ll-cola b{font-family:"Sora",system-ui,sans-serif;font-size:14px}
.ll-cola span{opacity:.72}
.acceso-pie{font-size:12.5px;opacity:.75;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.acceso-pie a{color:inherit;font-weight:700}

/* ── Lado del formulario ── */
.acceso-lado{position:relative;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;isolation:isolate}
.acceso-lado::before{content:"";position:absolute;top:-20%;right:-25%;width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--b500) 22%,transparent),transparent 65%);filter:blur(30px);z-index:-1}
.acceso-tarjeta{width:100%;max-width:440px;padding:clamp(28px,3vw,42px);border-radius:28px;background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid color-mix(in srgb,var(--surface) 70%,var(--border));box-shadow:0 30px 80px -24px rgba(15,42,22,.3),0 0 0 1px var(--border);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.acceso-entra>*{animation:sube .65s var(--ease) both}
.acceso-entra>*:nth-child(2){animation-delay:.06s}.acceso-entra>*:nth-child(3){animation-delay:.12s}.acceso-entra>*:nth-child(4){animation-delay:.18s}.acceso-entra>*:nth-child(5){animation-delay:.24s}.acceso-entra>*:nth-child(6){animation-delay:.3s}.acceso-entra>*:nth-child(7){animation-delay:.36s}.acceso-entra>*:nth-child(8){animation-delay:.42s}
@keyframes sube{from{opacity:0;transform:translateY(14px)}}
.acceso-sello{margin:0 auto;display:grid;place-items:center;border-radius:26px;background:linear-gradient(135deg,var(--b100),#fdf3d0);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b600) 18%,transparent)}
html.dark .acceso-sello{background:linear-gradient(135deg,color-mix(in srgb,var(--b900) 55%,#111),#2b220f)}
.acceso-sello-gota{width:84px;height:84px}
.acceso-sello-gota .gota-box{width:70px;height:70px}
.acceso-sello-logo{width:max-content;max-width:100%;padding:10px 16px;background:none;box-shadow:none}
.acceso-sello-logo img{max-width:100%;object-fit:contain}
.acceso-h1{font-family:"Sora",system-ui,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;margin:18px 0 0;text-align:center}
.acceso-sub{font-size:14px;color:var(--muted);margin:4px 0 24px;text-align:center}
.acceso-campo{position:relative;margin-bottom:14px}
.acceso-campo input{width:100%;height:58px;padding:22px 48px 8px 48px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;font-weight:600;outline:none;transition:border-color .2s,box-shadow .2s}
.acceso-campo input:focus{border-color:var(--b600);box-shadow:0 0 0 4px color-mix(in srgb,var(--b500) 22%,transparent)}
.acceso-campo label{position:absolute;left:48px;top:19px;font-size:14px;color:var(--muted);pointer-events:none;transition:all .18s ease}
.acceso-campo input:focus+label,.acceso-campo input:not(:placeholder-shown)+label{top:9px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.acceso-campo>.ic{position:absolute;left:17px;top:20px;color:#94a3a0;transition:color .2s}
.acceso-campo input:focus~.ic{color:var(--accent)}
.acceso-campo.mal input{border-color:var(--danger)}
.acceso-ojo{position:absolute;right:10px;top:11px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#94a3a0;background:transparent;border:0;cursor:pointer}
.acceso-ojo:hover{color:var(--text);background:var(--surface-2)}
.acceso-aviso{font-size:12px;font-weight:700;margin:-6px 0 12px}
.acceso-aviso.mayus{color:var(--warn);display:none}
.acceso-aviso.mayus.ver{display:block}
.acceso-recordar{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);cursor:pointer;margin:2px 0 4px;user-select:none}
.acceso-recordar input{width:17px;height:17px;margin:0;accent-color:var(--b600);cursor:pointer}
.acceso-error{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:14px;background:var(--danger-soft);color:var(--danger);font-size:13.5px;font-weight:600;margin-bottom:16px}
.acceso-ok{padding:11px 13px;border-radius:14px;background:var(--ok-soft);color:var(--ok);font-size:13.5px;font-weight:600;margin-bottom:16px}
.acceso-boton{position:relative;width:100%;height:56px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:16px;color:#fff;font-size:15px;font-weight:800;letter-spacing:.01em;background:var(--grad);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--b700) 80%,transparent);cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .2s}
.acceso-boton:hover{transform:translateY(-1px);box-shadow:0 18px 36px -12px color-mix(in srgb,var(--b700) 90%,transparent)}
.acceso-boton:active{transform:scale(.98)}
.acceso-boton::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-20deg);animation:destello 3.6s ease-in-out infinite}
@keyframes destello{0%,60%{left:-60%}100%{left:130%}}
.acceso-boton .flecha{transition:transform .2s}
.acceso-boton:hover .flecha{transform:translateX(3px)}
.acceso-boton .giro{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:gira .7s linear infinite}
.acceso-boton.cargando .giro{display:block}.acceso-boton.cargando .flecha{display:none}
@keyframes gira{to{transform:rotate(360deg)}}
.acceso-seguro{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:20px;font-size:12px;color:var(--muted);text-align:center}
.acceso-seguro .ic{width:15px;height:15px;color:var(--accent)}
.acceso-tiembla{animation:tiembla .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes tiembla{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.acceso-pie-movil{display:none;margin-top:22px;font-size:12px;color:var(--muted);text-align:center}
.acceso-pie-movil a{color:var(--accent);font-weight:700}
.acceso.simple .acceso-pie-movil{display:block}
.acceso-tema{position:absolute;top:18px;right:18px}

@media(max-width:1023px){.acceso{grid-template-columns:1fr;height:auto;min-height:100dvh}.acceso-marca{display:none}.acceso-pie-movil{display:block}}
@media(max-height:860px){.acceso-llamado{display:none}}
@media(max-height:700px){.acceso-chips{display:none}}
@media(prefers-reduced-motion:reduce){.acceso *,.acceso *::before{animation:none!important;transition:none!important}}