/* ==========================================================================
   Asiste — access screens (login, sign-up, forgot / reset password), 2026.
   One stylesheet for the four views (resources/views/panel/acceso/marco.blade.php
   and the views that extend it). Consumes public/css/rd-tokens.css.
   Layout: a quiet form sheet + a violet stage with the agent on duty
   (public/js/acceso-pulso.js). Sign-up flips it: the stage becomes the hiring
   rail with the agent's live résumé, the steps and the price summary.
   Motion: one entrance (stage headline lines + staggered sheet), step slides
   in the sign-up, button loading state. Everything off with reduced motion.
   ========================================================================== */

html.ac { background: #5B3DF5; --ac-vh: calc(100dvh / var(--as-zoom, 1)); }
html.ac body {
    margin: 0; min-height: var(--ac-vh, 100dvh); font-family: var(--rd-font); font-size: 16px; line-height: 1.5;
    color: var(--rd-text); background: var(--rd-surface); -webkit-font-smoothing: antialiased;
}
html.ac body *, html.ac body *::before, html.ac body *::after { box-sizing: border-box; }
:where(html.ac body) :where(h1, h2, h3, p, ul, ol, figure, fieldset, legend) { margin: 0; padding: 0; }
:where(html.ac body) fieldset { border: 0; min-inline-size: 0; }
:where(html.ac body) :where(ul, ol) { list-style: none; }
:where(html.ac body) a { color: inherit; }
html.ac body .skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: #fff; color: var(--rd-noche); font-weight: 700; text-decoration: none; }
html.ac body .skip:focus { top: 12px; }
html.ac body .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.ac body :is(a, button, summary, input[type="checkbox"], input[type="radio"]):focus-visible { outline: 3px solid var(--rd-ring); outline-offset: 2px; }
html.ac body .ac-control :is(input, select):focus, html.ac body .ac-control :is(input, select):focus-visible { outline: none; box-shadow: none; }

/* ---------- Frame ---------- */
.ac-marco { display: grid; grid-template-columns: minmax(440px, .9fr) minmax(0, 1.1fr); min-height: var(--ac-vh, 100dvh); }
.ac--registro .ac-marco { grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr); }
.ac--registro .ac-escenario { order: -1; }
/* Sign-up: the WhatsApp button rests on the rail instead of covering «Continuar». */
.ac--registro .wa-float { left: 24px; right: auto; }

/* ---------- The sheet (form side) ---------- */
.ac-hoja { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 3vw, 36px) clamp(24px, 5vw, 72px) 24px; background: var(--rd-surface); }
.ac-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.ac-marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--rd-font-display); font-weight: 760; font-stretch: 100%; font-size: 22px; letter-spacing: -.02em; text-decoration: none; color: var(--rd-text); }
.ac-marca img { width: 34px; height: auto; }
.ac-top-enlace { font-size: 14px; color: var(--rd-muted); }
.ac-top-enlace a { color: var(--rd-primary-text); font-weight: 600; text-decoration: none; }
.ac-top-enlace a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ac-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--rd-muted); font-size: 14px; font-weight: 550; text-decoration: none; }
.ac-volver:hover { color: var(--rd-text); }
.ac-volver svg { width: 16px; height: 16px; }
.ac-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 420px; margin: 0 auto; padding: 40px 0; }
.ac--registro .ac-cuerpo { max-width: 640px; justify-content: flex-start; padding-top: 28px; }
.ac-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding-top: 18px; color: var(--rd-muted); font-size: 13px; }
.ac-pie nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ac-pie a, .ac-pie button { color: var(--rd-muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ac-pie a:hover, .ac-pie button:hover { color: var(--rd-text); }

.ac-titulo { font-family: var(--rd-font-display); font-weight: 780; font-stretch: 100%; font-size: clamp(34px, 3vw + 8px, 48px); line-height: .94; letter-spacing: -.03em; text-wrap: balance; }
.ac-lead { margin-top: 12px; color: var(--rd-muted); font-size: 16px; max-width: 42ch; }
.ac-encabezado { margin-bottom: 28px; }

/* ---------- Messages ---------- */
.ac-alerta { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding: 13px 14px; border-radius: var(--rd-r); font-size: 14.5px; line-height: 1.45; }
.ac-alerta svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.ac-alerta--error { background: var(--rd-danger-soft); color: var(--rd-danger-text); box-shadow: inset 3px 0 0 var(--rd-coral); }
.ac-alerta--ok { background: var(--rd-ok-soft); color: var(--rd-text); box-shadow: inset 3px 0 0 var(--rd-turquesa); }
.ac-alerta--ok svg { color: var(--rd-ok-text); }
.ac-alerta a { color: inherit; font-weight: 700; }
.ac-alerta ul { display: grid; gap: 2px; }

/* ---------- Fields ---------- */
.ac-campo { margin-bottom: 16px; }
.ac-campo > label, .ac-etiqueta { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--rd-text); }
.ac-campo > label .opcional { font-weight: 400; color: var(--rd-muted); }
.ac-control { position: relative; display: flex; align-items: center; min-height: 54px; border: 1.5px solid var(--rd-line-strong); border-radius: var(--rd-r); background: var(--rd-surface); transition: border-color var(--rd-t-fast) var(--rd-ease-out), box-shadow var(--rd-t-fast) var(--rd-ease-out); }
@media (hover: hover) and (pointer: fine) { .ac-control:hover { border-color: var(--rd-muted); } }
.ac-control:focus-within { border-color: var(--rd-primary); box-shadow: 0 0 0 4px var(--rd-ring); }
.ac-control > svg.ac-ico { width: 19px; height: 19px; margin-left: 15px; flex: none; color: var(--rd-muted); transition: color var(--rd-t-fast); }
.ac-control:focus-within > svg.ac-ico { color: var(--rd-primary-text); }
.ac-control input, .ac-control select {
    flex: 1; min-width: 0; height: 51px; padding: 0 15px; border: 0; outline: 0; background: transparent;
    color: var(--rd-text); font: inherit; font-size: 16px;
}
.ac-control input::placeholder { color: var(--rd-muted); opacity: .7; }
.ac-control input[readonly] { color: var(--rd-muted); cursor: not-allowed; }
.ac-control select { appearance: none; padding-right: 44px; cursor: pointer; }
.ac-control--select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--rd-muted); border-bottom: 2px solid var(--rd-muted); transform: rotate(45deg); pointer-events: none; }
.ac-control input:focus-visible, .ac-control select:focus-visible { outline: none; }
.ac-prefijo { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-left: 10px; padding: 0 10px; border-radius: 9px; background: var(--rd-surface-3); color: var(--rd-text-2); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.ac-ojo { flex: none; width: 46px; height: 46px; margin-right: 3px; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; color: var(--rd-muted); cursor: pointer; transition: background-color var(--rd-t-fast), color var(--rd-t-fast); }
.ac-ojo:hover { background: var(--rd-surface-3); color: var(--rd-text); }
.ac-ojo svg { width: 19px; height: 19px; }
.ac-campo.is-bad .ac-control, .ac-control.is-bad { border-color: var(--rd-coral); box-shadow: 0 0 0 4px var(--rd-danger-soft); }
.ac-campo.is-ok .ac-control, .ac-control.is-ok { border-color: var(--rd-turquesa); }
.ac-ayuda { margin-top: 7px; color: var(--rd-muted); font-size: 13px; }
/* Inline messages (server @error and live checks from auth.js share the look). */
.au-hint, .ac-error { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; font-weight: 600; }
.au-hint { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height .25s var(--rd-ease-out), opacity .2s, margin .25s; }
.au-hint.show { max-height: 48px; opacity: 1; margin-top: 7px; }
.au-hint.bad, .ac-error { color: var(--rd-danger-text); }
.au-hint.ok { color: var(--rd-ok-text); }
.au-hint.warn { color: var(--rd-warn-text); }
.au-meter { height: 6px; margin-top: 10px; border-radius: 99px; background: var(--rd-surface-3); overflow: hidden; }
.au-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--rd-coral); transition: width .35s var(--rd-ease-out), background-color .3s; }
.au-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; font-size: 13px; }
.au-checks li { display: flex; align-items: center; gap: 7px; color: var(--rd-muted); transition: color .2s; }
.au-checks li::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1.5px solid var(--rd-line-strong); transition: background-color .2s, border-color .2s; }
.au-checks li.ok { color: var(--rd-ok-text); font-weight: 600; }
.au-checks li.ok::before { border-color: var(--rd-turquesa); background: var(--rd-turquesa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/9px no-repeat; }
.ac-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ac-linea-opc { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 2px 0 22px; font-size: 14.5px; }
.ac-linea-opc .ac-check { font-size: 14px; }
.ac-check { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 28px; cursor: pointer; color: var(--rd-text-2); font-size: 14.5px; line-height: 1.45; }
.ac-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--rd-primary); cursor: pointer; }
html.ac body .ac-check a { color: var(--rd-primary-text); font-weight: 600; }
html.ac body .ac-enlace { color: var(--rd-primary-text); font-weight: 600; text-decoration: none; }
html.ac body .ac-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Switch (trabaja a domicilio) */
.ac-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--rd-r); border: 1.5px solid var(--rd-line); cursor: pointer; margin-bottom: 16px; }
.ac-switch span { font-size: 14.5px; color: var(--rd-text-2); }
.ac-switch span b { display: block; color: var(--rd-text); font-weight: 600; }
.ac-switch input { appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 99px; background: var(--rd-line-strong); cursor: pointer; transition: background-color var(--rd-t-fast) var(--rd-ease-out); }
.ac-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--rd-t) var(--rd-ease-out); }
.ac-switch input:checked { background: var(--rd-turquesa); }
.ac-switch input:checked::after { transform: translateX(18px); }

/* ---------- Buttons ---------- */
.ac-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 22px;
    border: 1.5px solid transparent; border-radius: 16px; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--rd-t-fast) var(--rd-ease-out), border-color var(--rd-t-fast) var(--rd-ease-out), color var(--rd-t-fast) var(--rd-ease-out), transform var(--rd-t-press) var(--rd-ease-out), box-shadow var(--rd-t-fast);
}
.ac-btn:active { transform: scale(.98); }
.ac-btn--primario { background: var(--rd-azul); color: #fff; box-shadow: 0 14px 30px -14px rgba(91, 61, 245, .8), inset 0 1px 0 rgba(255, 255, 255, .18); }
@media (hover: hover) and (pointer: fine) { .ac-btn--primario:hover { background: var(--rd-azul-hover); } }
.ac-btn--secundario { background: var(--rd-surface); color: var(--rd-text); border-color: var(--rd-line-strong); }
@media (hover: hover) and (pointer: fine) { .ac-btn--secundario:hover { border-color: var(--rd-muted); background: var(--rd-surface-2); } }
.ac-btn svg { width: 19px; height: 19px; }
/* Loading → the label steps aside for a spinner; the width never changes. */
.ac-btn .ac-btn-txt { transition: opacity var(--rd-t-fast), transform var(--rd-t-fast) var(--rd-ease-out); }
.ac-btn.is-loading { pointer-events: none; }
.ac-btn.is-loading .ac-btn-txt { opacity: 0; transform: translateY(-6px); }
.ac-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: acGira .7s linear infinite; }
.ac-btn--secundario.is-loading::after { border-color: var(--rd-line); border-top-color: var(--rd-text); }
@keyframes acGira { to { transform: rotate(360deg); } }
.ac-separador { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--rd-muted); font-size: 13.5px; }
.ac-separador::before, .ac-separador::after { content: ""; flex: 1; height: 1px; background: var(--rd-line); }
.ac-cambio { margin-top: 26px; text-align: center; color: var(--rd-muted); font-size: 15px; }

/* Google (partials/boton-google keeps its markup; styled here) */
html.ac body .g-auth { margin: 18px 0 0; }
html.ac body .g-btn { min-height: 54px; border-radius: 16px; border: 1.5px solid var(--rd-line-strong); background: var(--rd-surface); color: var(--rd-text); font-family: var(--rd-font); font-size: 16px; transition: border-color var(--rd-t-fast), background-color var(--rd-t-fast), transform var(--rd-t-press) var(--rd-ease-out); }
@media (hover: hover) and (pointer: fine) { html.ac body .g-btn:hover { border-color: var(--rd-muted); background: var(--rd-surface-2); } }
html.ac body .g-btn:active { transform: scale(.98); }
html.ac body .g-divisor { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--rd-muted); font-size: 13.5px; }
html.ac body .g-divisor::before, html.ac body .g-divisor::after { content: ""; flex: 1; height: 1px; background: var(--rd-line); }
html.ac body .g-divisor span { background: none; padding: 0; color: inherit; }
html.ac body .g-aviso { padding: 12px 14px; border-radius: var(--rd-r); background: var(--rd-warn-soft); color: var(--rd-text); font-size: 14px; }
html.ac body .g-conectado { padding: 12px 14px; border-radius: var(--rd-r); background: var(--rd-ok-soft); color: var(--rd-text); font-size: 14px; box-shadow: inset 3px 0 0 var(--rd-turquesa); }
html.ac body .g-otra { margin-top: 10px; font-size: 13.5px; color: var(--rd-muted); }
html.ac body .g-otra a { color: var(--rd-primary-text); font-weight: 600; }

/* ==========================================================================
   The violet stage («Pulso»): the agent on duty (login, recover, reset) and the
   hiring rail with the live résumé (sign-up). Behaviour: public/js/acceso-pulso.js.
   ========================================================================== */
.ac-escenario {
    --acp-lima: var(--rd-lima, #C5F04A);
    position: sticky; top: 0; height: var(--ac-vh, 100dvh); overflow: hidden; isolation: isolate; color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; padding: clamp(28px, 4vw, 56px);
    background: radial-gradient(90% 70% at 85% 0%, rgba(197, 240, 74, .22), transparent 60%), radial-gradient(120% 90% at 10% 100%, #3F24D6 0%, transparent 60%), linear-gradient(160deg, #7058FF 0%, #5B3DF5 45%, #4A2FE0 100%);
    container-type: inline-size;
}
/* A quiet dot grid, like the planner paper of the brand. */
.ac-escenario::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); }
.acp-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.acp-orbitas { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.ac--registro .acp-orbitas { top: 18%; left: 85%; }
.acp-orbita { position: absolute; width: var(--r); height: calc(var(--r) * .36); margin: calc(var(--r) * -.18) 0 0 calc(var(--r) / -2); border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .22); }
.acp-orbita.o1 { --r: min(68cqi, 520px); }
.acp-orbita.o2 { --r: min(96cqi, 760px); border-style: solid; border-color: rgba(255, 255, 255, .1); }
.acp-orbita.o3 { --r: min(130cqi, 1040px); border-color: rgba(197, 240, 74, .14); }
.acp-orbita i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--acp-lima); box-shadow: 0 0 0 6px rgba(197, 240, 74, .16), 0 0 24px rgba(197, 240, 74, .6); transform: translate(0, calc(var(--r) * -.18)); }
.acp-orbita.o2 i { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; box-shadow: 0 0 16px rgba(255, 255, 255, .7); }
.acp-orbita.o3 i { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #0F1020; box-shadow: none; }

/* «En turno ahora» */
.acp-turno { position: absolute; left: clamp(28px, 4vw, 56px); top: clamp(24px, 5vh, 48px); display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--acp-lima); color: #0F1020; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px -14px rgba(15, 16, 32, .6); }
.acp-turno i { width: 9px; height: 9px; border-radius: 50%; background: #0F1020; animation: acp-late 1.6s ease-in-out infinite; }
@keyframes acp-late { 50% { transform: scale(1.6); opacity: .45; } }

/* The agent at work: the symbol (with its pulse) and the live feed. */
.acp-centro { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 28px; padding-top: 56px; }
.acp-marca { position: relative; justify-self: center; width: clamp(110px, 16cqi, 168px); aspect-ratio: 1; display: grid; place-items: center; }
.acp-marca svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 30px rgba(15, 16, 32, .35)); animation: acp-flota 4s ease-in-out infinite; }
@keyframes acp-flota { 50% { transform: translateY(-8px); } }
.acp-ping { position: absolute; inset: 8%; border-radius: 50%; border: 2px solid rgba(197, 240, 74, .55); animation: acp-ping 2.8s cubic-bezier(.2, .7, .3, 1) infinite; }
.acp-ping + .acp-ping { animation-delay: 1.4s; }
@keyframes acp-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.acp-enviando .acp-ping { animation-duration: 1s; }
.acp-enviando .acp-marca svg { animation-duration: 1.2s; }
.acp-feed { position: relative; height: 270px; }
.acp-item {
    --pos: 3; position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
    border-radius: 18px; background: #fff; color: #0F1020; box-shadow: 0 24px 48px -24px rgba(15, 16, 32, .65);
    opacity: 0; transform: translateY(-24px) scale(.94); pointer-events: none;
    transition: transform .7s cubic-bezier(.23, 1, .32, 1), opacity .5s ease;
}
.acp-item.ver { opacity: calc(1 - var(--pos) * .28); transform: translateY(calc(var(--pos) * 86px)) scale(calc(1 - var(--pos) * .04)); }
.acp-item.nuevo { box-shadow: 0 0 0 3px var(--acp-lima), 0 24px 48px -24px rgba(15, 16, 32, .65); }
.acp-item-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #5B3DF5; color: #fff; }
.acp-item.nuevo .acp-item-ico { background: var(--acp-lima); color: #0F1020; }
.acp-item-ico svg { width: 19px; height: 19px; }
.acp-item-txt strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.acp-item-txt small { display: block; margin-top: 2px; color: #5C5F73; font-size: 12px; }
.acp-ejemplo { position: absolute; right: 0; bottom: 0; color: rgba(255, 255, 255, .6); font-size: 12px; }
@container (max-width: 560px) {
    .acp-centro { grid-template-columns: 1fr; }
    .acp-marca { display: none; }
}

/* Stage copy */
.ac-esc-txt { position: relative; max-width: 640px; }
.ac-esc-titulo { font-family: var(--rd-font-display); font-weight: 800; font-stretch: 100%; font-size: clamp(38px, min(4.4vw, 8vh), 76px); line-height: .9; letter-spacing: -.045em; }
.ac-esc-titulo .ac-linea { display: block; }
.ac-esc-titulo .ac-linea + .ac-linea { color: var(--acp-lima); }
.ac-esc-nota { margin-top: 16px; color: rgba(255, 255, 255, .85); font-size: 17px; max-width: 46ch; }
.ac-esc-datos { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .8); font-size: 14px; }
.ac-esc-datos li { display: inline-flex; align-items: center; gap: 8px; }
.ac-esc-datos svg { width: 17px; height: 17px; color: var(--acp-lima); }

/* Sign-up rail: brand, the agent's résumé (live), steps and the price summary. */
.ac--registro .ac-escenario { justify-content: flex-start; gap: 22px; padding-top: clamp(24px, 4vh, 44px); }
.ac-rail-marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--rd-font-display); font-weight: 800; font-size: 22px; letter-spacing: -.04em; }
.ac-rail-marca img { width: 32px; height: 32px; }
.ac-rail-titulo { font-family: var(--rd-font-display); font-weight: 800; font-stretch: 100%; font-size: clamp(30px, 2.6vw, 44px); line-height: .92; letter-spacing: -.045em; }
.ac-rail-titulo .ac-linea { display: block; }
.ac-rail-titulo .ac-linea + .ac-linea { color: var(--acp-lima); }
.acp-cv { --p: 0; position: relative; border-radius: 22px; background: #fff; color: #0F1020; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(15, 16, 32, .7); transform: rotate(-1.2deg); transition: transform .5s cubic-bezier(.23, 1, .32, 1); }
.acp-cv-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #F3F1FF; }
.acp-cv-cab img { width: 44px; height: 44px; border-radius: 13px; flex: none; }
.acp-cv-cab > div { min-width: 0; flex: 1; }
.acp-cv-etq { display: block; color: #5C5F73; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.acp-cv-cab strong { display: block; font-family: var(--rd-font-display); font-weight: 800; font-size: 20px; letter-spacing: -.035em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acp-cv-cab strong span { color: #5B3DF5; }
.acp-cv-sello { position: absolute; right: 14px; top: 12px; padding: 6px 12px; border-radius: 10px; border: 2.5px solid #0F1020; background: var(--acp-lima); color: #0F1020; font-family: var(--rd-font-display); font-weight: 800; font-size: 15px; letter-spacing: -.02em; transform: rotate(8deg) scale(1.6); opacity: 0; pointer-events: none; }
.acp-cv.contratado .acp-cv-sello { opacity: 1; transform: rotate(8deg) scale(1); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.acp-cv-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #ECEAF5; }
.acp-cv-datos div { padding: 10px 16px; background: #fff; min-width: 0; }
.acp-cv-datos dt { color: #5C5F73; font-size: 12px; }
.acp-cv-datos dd { margin: 1px 0 0; font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; }
.acp-cv-datos dd.cambia { animation: acp-cambia .9s ease-out; }
@keyframes acp-cambia { from { background: rgba(197, 240, 74, .85); box-shadow: 0 0 0 4px rgba(197, 240, 74, .85); } to { background: transparent; box-shadow: 0 0 0 4px transparent; } }
.acp-cv-barra { height: 6px; background: #ECEAF5; }
.acp-cv-barra span { display: block; height: 100%; background: linear-gradient(90deg, #5B3DF5, var(--acp-lima)); transform: scaleX(max(.04, var(--p))); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.23, 1, .32, 1); }
.ac-pasos { position: relative; display: grid; gap: 2px; }
.ac-pasos::before { content: ""; position: absolute; left: 19px; top: 22px; bottom: 22px; width: 2px; background: rgba(255, 255, 255, .2); }
.ac-pasos .au-step { position: relative; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 14px; min-height: 50px; padding: 3px 0; color: rgba(255, 255, 255, .7); cursor: default; }
.ac-pasos .au-step b { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #4A2FE0; border: 2px solid rgba(255, 255, 255, .3); color: #fff; font-family: var(--rd-font-display); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; transition: background-color var(--rd-t) var(--rd-ease-out), border-color var(--rd-t), color var(--rd-t), box-shadow var(--rd-t); }
.ac-pasos .au-step em { font-style: normal; display: grid; }
.ac-pasos .au-step em strong { font-size: 16px; font-weight: 650; color: inherit; }
.ac-pasos .au-step em small { font-size: 13px; color: rgba(255, 255, 255, .7); }
.ac-pasos .au-step.activo { color: #fff; }
.ac-pasos .au-step.activo b { background: #fff; border-color: #fff; color: #5B3DF5; box-shadow: 0 0 0 6px rgba(255, 255, 255, .2); }
.ac-pasos .au-step.hecho { color: #fff; cursor: pointer; }
/* The check is a centred background image: the number (font-size 0) stays a grid item, so a ::after
   check was pushed into a second row and sat off-centre. */
.ac-pasos .au-step.hecho b { border-color: var(--acp-lima); color: transparent; font-size: 0;
    background: var(--acp-lima) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1020' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ac-pasos .au-line { display: none; }
/* Live summary (partials/resumen-registro). */
.resumen-seleccion { margin-top: auto; padding: 18px 20px; border-radius: 20px; background: rgba(15, 16, 32, .22); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; }
.resumen-seleccion .cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.resumen-seleccion .titulo { font-size: 14px; font-weight: 650; color: #fff; }
.resumen-seleccion .cambiar { display: none; border: 0; background: none; padding: 0; color: var(--acp-lima); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.resumen-seleccion.compacto .cambiar { display: inline; }
.resumen-seleccion ul { display: grid; gap: 4px; margin-bottom: 10px; color: rgba(255, 255, 255, .85); font-size: 14px; }
.resumen-seleccion li { display: flex; justify-content: space-between; gap: 12px; }
.resumen-seleccion .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 650; }
.resumen-seleccion .total #resumen-total { font-family: var(--rd-font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.resumen-seleccion p { margin-top: 8px; color: rgba(255, 255, 255, .72); font-size: 13px; }
.resumen-seleccion.compacto .detalle { display: none; }
@media (max-height: 860px) and (min-width: 861px) { .ac-rail-titulo { display: none; } }

/* ==========================================================================
   Sign-up steps
   ========================================================================== */
.ac-progreso { display: none; }
.ac-paso-num { color: var(--rd-muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.form-step { display: none; }
.form-step.activo { display: block; }
.ac-paso-titulo { font-family: var(--rd-font-display); font-weight: 780; font-stretch: 100%; font-size: clamp(30px, 2.2vw + 10px, 42px); line-height: .96; letter-spacing: -.028em; }
.ac-paso-lead { margin: 10px 0 26px; color: var(--rd-muted); font-size: 16px; max-width: 52ch; }
.ac-grupo { margin-bottom: 26px; }
.ac-grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ac-grupo-cab h3 { font-family: var(--rd-font-display); font-weight: 720; font-stretch: 100%; font-size: 20px; letter-spacing: -.01em; }
.ac-grupo-cab span { color: var(--rd-muted); font-size: 13.5px; }
/* Plans: big tappable cards (radio inputs stay real inputs). */
.ac-planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ac-opcion { position: relative; }
.ac-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ac-opcion label { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 16px 15px; border-radius: 18px; border: 1.5px solid var(--rd-line); background: var(--rd-surface); cursor: pointer; transition: border-color var(--rd-t-fast) var(--rd-ease-out), box-shadow var(--rd-t-fast) var(--rd-ease-out), background-color var(--rd-t-fast); }
.ac-opcion:hover label { border-color: var(--rd-line-strong); }
.ac-opcion input:checked + label { border-color: var(--rd-azul); background: var(--rd-primary-soft); box-shadow: 0 0 0 1px var(--rd-azul); }
.ac-opcion input:focus-visible + label { outline: 3px solid var(--rd-ring); outline-offset: 2px; }
.ac-opcion input:active + label { transform: scale(.99); }
.ac-plan b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--rd-font-display); font-weight: 740; font-stretch: 100%; font-size: 20px; letter-spacing: -.01em; }
.ac-plan .precio { font-size: 15px; font-weight: 650; color: var(--rd-text); font-variant-numeric: tabular-nums; }
.ac-plan .precio small { color: var(--rd-muted); font-weight: 500; }
.ac-plan .desc { color: var(--rd-muted); font-size: 13.5px; line-height: 1.4; }
.ac-plan .marca-elegido { padding: 3px 8px; border-radius: 99px; background: var(--rd-mango); color: #3D2600; font-family: var(--rd-font); font-size: 11.5px; font-weight: 700; letter-spacing: 0; }
.ac-opcion input:checked + label .ac-radio { background: var(--rd-azul); border-color: var(--rd-azul); }
.ac-opcion input:checked + label .ac-radio::after { opacity: 1; }
.ac-radio { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--rd-line-strong); transition: background-color var(--rd-t-fast), border-color var(--rd-t-fast); }
.ac-radio::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); opacity: 0; }
/* Modules & cycle: segmented rows. */
.ac-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ac-seg .ac-opcion label { padding: 12px 14px; border-radius: 14px; gap: 2px; }
.ac-seg .ac-opcion label b { font-size: 15px; font-weight: 650; }
.ac-seg .ac-opcion label span { color: var(--rd-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ac-seg--ciclo { grid-template-columns: 1fr 1fr; }
.ac-seg .ahorro { margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: var(--rd-ok-soft); color: var(--rd-ok-text); font-size: 12px; font-weight: 700; }
.nota-anual { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--rd-surface-2); color: var(--rd-muted); font-size: 13.5px; line-height: 1.45; transition: background-color var(--rd-t), color var(--rd-t); }
.nota-anual.activa { background: var(--rd-ok-soft); color: var(--rd-text); }
/* Category chips (radio inputs). */
.ac-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-chip { position: relative; }
.ac-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ac-chip label { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--rd-line-strong); font-size: 15px; font-weight: 550; cursor: pointer; transition: background-color var(--rd-t-fast), border-color var(--rd-t-fast), color var(--rd-t-fast); }
.ac-chip input:checked + label { background: var(--rd-noche); border-color: var(--rd-noche); color: #fff; }
.ac-chip input:focus-visible + label { outline: 3px solid var(--rd-ring); outline-offset: 2px; }
/* Step actions: stick to the bottom so the next step is always one tap away. */
.step-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; margin-top: 26px; padding: 14px 0 calc(14px + var(--rd-safe-bottom)); background: linear-gradient(180deg, transparent, var(--rd-surface) 30%); }
.step-actions .ac-btn--secundario { width: auto; flex: none; padding: 0 20px; }
.step-actions .ac-btn--primario { flex: 1; }

/* ==========================================================================
   Contact sheet (login · «Hablar con ventas»)
   ========================================================================== */
.modal-overlay { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 16, 32, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-overlay.open { display: flex; }
.contact-card { position: relative; width: 100%; max-width: 420px; padding: 28px; border-radius: var(--rd-r-xl); background: var(--rd-surface); color: var(--rd-text); box-shadow: var(--rd-e3); }
.modal-overlay.open .contact-card { animation: acHojaSube var(--rd-t-panel) var(--rd-ease-drawer) both; }
.contact-card .close-modal { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--rd-surface-3); color: var(--rd-text); font-size: 22px; cursor: pointer; }
.contact-card .modal-label { color: var(--rd-muted); font-size: 13px; font-weight: 600; }
.contact-card h3 { margin: 4px 0 8px; font-family: var(--rd-font-display); font-weight: 760; font-stretch: 100%; font-size: 30px; letter-spacing: -.02em; }
.contact-card .lead { color: var(--rd-muted); margin-bottom: 18px; }
.contact-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rd-line); font-size: 15px; }
.contact-row .label { color: var(--rd-muted); }
.contact-row .value { font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.au-wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin-top: 16px; border-radius: 16px; background: #1FAF56; color: #fff !important; font-weight: 700; text-decoration: none; }
.au-wa svg { width: 20px; height: 20px; }
@keyframes acHojaSube { from { opacity: 0; transform: translateY(18px); } }

/* ==========================================================================
   Entrance choreography (html.js only; auth.js adds .ac-listo once fonts load)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html.js.ac body .ac-anim { opacity: 0; transform: translateY(14px); }
    html.js.ac.ac-listo body .ac-anim { opacity: 1; transform: none; transition: opacity .6s var(--rd-ease-out), transform .7s var(--rd-ease-out); transition-delay: calc(var(--i, 0) * 60ms + 120ms); }
    html.js.ac body .ac-linea { opacity: 0; transform: translateY(42%); }
    html.js.ac.ac-listo body .ac-linea { opacity: 1; transform: none; transition: opacity .8s var(--rd-ease-out), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 120ms + 260ms); }
    /* Step change: forward slides in from the right, back from the left. */
    html.ac body .form-step.entra { animation: acPasoEntra var(--rd-t-panel) var(--rd-ease-out) both; }
    html.ac body .form-step.entra.atras { animation-name: acPasoVuelve; }
    html.ac body .ac-campo.is-bad .ac-control { animation: acSacude .38s var(--rd-ease-out); }
}
@keyframes acPasoEntra { from { opacity: 0; transform: translateX(28px); } }
@keyframes acPasoVuelve { from { opacity: 0; transform: translateX(-28px); } }
@keyframes acSacude { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* No-JS safety: nothing stays hidden. */
html.no-js.ac body :is(.ac-anim, .ac-linea) { opacity: 1 !important; transform: none !important; }

/* Moving between the access screens: the stage stays, the sheet changes. */
@view-transition { navigation: auto; }
html.ac body .ac-escenario { view-transition-name: ac-escenario; }
html.ac body .ac-cuerpo { view-transition-name: ac-hoja; }
::view-transition-old(ac-hoja) { animation: acHojaSale 160ms var(--rd-ease-out) both; }
::view-transition-new(ac-hoja) { animation: acHojaEntra 300ms var(--rd-ease-out) both; }
@keyframes acHojaSale { to { opacity: 0; transform: translateY(-8px); } }
@keyframes acHojaEntra { from { opacity: 0; transform: translateY(12px); } }

/* ==========================================================================
   Dark theme (follows the panel's saved theme or the system)
   ========================================================================== */
html.ac[data-theme="dark"] body { background: var(--rd-surface); }
html.ac[data-theme="dark"] body .ac-hoja { background: var(--rd-surface); }
html[data-theme="dark"] .ac-chip input:checked + label { background: #fff; border-color: #fff; color: var(--rd-noche); }
html[data-theme="dark"] .ac-marca img { filter: brightness(0) invert(1); }
html.ac[data-theme="dark"] body .g-btn svg { background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
html[data-theme="dark"] .step-actions { background: linear-gradient(180deg, transparent, var(--rd-surface) 30%); }

/* ==========================================================================
   Tablet & phone: the stage becomes a short night band above the sheet
   ========================================================================== */
@media (max-width: 1080px) {
    .ac-marco, .ac--registro .ac-marco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ac-esc-titulo { font-size: clamp(44px, 6vw, 72px); }
}
@media (max-width: 860px) {
    .ac-marco, .ac--registro .ac-marco { display: flex; flex-direction: column; }
    .ac-escenario {
        order: -1; position: relative; height: auto; min-height: 0; justify-content: flex-end;
        padding: calc(20px + var(--rd-safe-top)) 20px 44px; min-height: 230px;
    }
    .ac-esc-nota, .ac-esc-datos, .acp-centro, .acp-turno, .acp-cv { display: none; }
    .ac-esc-titulo { font-size: clamp(38px, 11vw, 56px); }
    .ac-hoja { margin-top: -24px; border-radius: 26px 26px 0 0; padding: 22px 20px calc(18px + var(--rd-safe-bottom)); z-index: 1; box-shadow: 0 -18px 40px -24px rgba(15, 16, 32, .45); }
    .ac-hoja .ac-top .ac-marca { display: none; }
    .ac-cuerpo { padding: 12px 0 24px; justify-content: flex-start; }
    .ac-titulo { font-size: 38px; }
    /* Sign-up on phones: compact rail = brand + progress; summary lives above the actions. */
    .ac--registro .ac-escenario { min-height: 0; padding-bottom: 40px; gap: 14px; }
    .ac--registro .ac-pasos, .ac--registro .ac-rail-titulo { display: none; }
    .ac--registro .ac-progreso { display: flex; gap: 6px; margin-top: 4px; }
    .ac-progreso i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
    .ac-progreso i::after { content: ""; position: absolute; inset: 0; background: var(--rd-lima, #C5F04A); transform: scaleX(0); transform-origin: left; transition: transform var(--rd-t-panel) var(--rd-ease-out); }
    .ac-progreso i.on::after { transform: none; }
    .ac-progreso-txt { color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; }
    .resumen-seleccion { margin-top: 6px; padding: 14px 16px; }
    .resumen-seleccion.compacto ul { display: none; }
    .resumen-seleccion.compacto .total { border-top: 0; padding-top: 0; }
    .ac-planes { grid-template-columns: 1fr 1fr; }
    .ac-fila { grid-template-columns: 1fr; }
    .au-checks { grid-template-columns: 1fr; }
    .contact-card { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; border-radius: 26px 26px 0 0; padding-bottom: calc(28px + var(--rd-safe-bottom)); }
    .modal-overlay { padding: 0; align-items: flex-end; }
    /* The floating WhatsApp button would cover fields on phones. */
    html.ac body .wa-float { display: none; }
    /* Sign-up on phones: the rail summary is just the total. */
    .resumen-seleccion ul, .resumen-seleccion .detalle { display: none; }
    .resumen-seleccion .cabecera { margin-bottom: 6px; }
    .resumen-seleccion .total { border-top: 0; padding-top: 0; }
}
@media (max-width: 420px) {
    .ac-planes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html.ac body *, html.ac body *::before, html.ac body *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .acp-item.ver { transition: none; }
}

/* «Pulso» stage: same-height feed cards (even spacing) and a rail whose pieces never get squeezed. */
.acp-item { height: 68px; }
.acp-item-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acp-item.ver { transform: translateY(calc(var(--pos) * 80px)) scale(calc(1 - var(--pos) * .04)); }
.acp-feed { height: 250px; }
.ac--registro .ac-escenario { overflow-y: auto; scrollbar-width: none; }
.ac--registro .ac-escenario > * { flex-shrink: 0; }
@media (min-width: 861px) { .ac--registro .ac-progreso-txt { display: none; } }