:root {
  --ac-fondo: #0a0a0a;
  --ac-texto: #f4f4f4;
  --ac-suave: rgba(255, 255, 255, .58);
  --ac-tenue: rgba(255, 255, 255, .34);
  --ac-hoja: #111111;
  --ac-campo: #161616;
  --ac-campo-foco: #191919;
  --ac-linea: rgba(255, 255, 255, .07);
  --ac-borde: rgba(255, 255, 255, .1);
  --ac-borde-fuerte: rgba(255, 255, 255, .2);
  --ac-anillo: rgba(255, 255, 255, .07);
  --ac-seleccion: rgba(255, 255, 255, .22);
  --ac-luz: rgba(255, 255, 255, .12);          
  --ac-filo: rgba(255, 255, 255, .16);         
  --ac-sombra: rgba(0, 0, 0, .85);
  --ac-boton: #f4f4f4;
  --ac-boton-tinta: #0a0a0a;
  --ac-ok: #3ccf6e;
  --ac-error: #ff5a4f;
  --ac-panel-a: #141414;                       
  --ac-panel-b: #0c0c0c;                       
  --ac-pin: 244, 244, 244;                     
  --ac-pin-error: 255, 90, 79;
  --ac-pin-luz: lighter;
  --ac-pin-linea: .43;                         
  --ac-pin-velo: .56;                          
  --ac-curva: cubic-bezier(.22, 1, .36, 1);
  --ac-rebote: cubic-bezier(.34, 1.56, .64, 1);
  --ac-radio: 26px;
}
:root[data-tema="claro"] {
  --ac-fondo: #eeeeee;
  --ac-texto: #0a0a0a;
  --ac-suave: rgba(0, 0, 0, .56);
  --ac-tenue: rgba(0, 0, 0, .36);
  --ac-hoja: #ffffff;
  --ac-campo: #f4f4f4;
  --ac-campo-foco: #ffffff;
  --ac-linea: rgba(0, 0, 0, .07);
  --ac-borde: rgba(0, 0, 0, .1);
  --ac-borde-fuerte: rgba(0, 0, 0, .24);
  --ac-anillo: rgba(0, 0, 0, .06);
  --ac-seleccion: rgba(0, 0, 0, .14);
  --ac-luz: rgba(255, 255, 255, .9);
  --ac-filo: rgba(0, 0, 0, .1);
  --ac-sombra: rgba(0, 0, 0, .16);
  --ac-boton: #0a0a0a;
  --ac-boton-tinta: #f4f4f4;
  --ac-ok: #18a34a;
  --ac-error: #e5484d;
  
  --ac-panel-a: #ffffff;
  --ac-panel-b: #f6f6f6;
  --ac-pin: 14, 14, 14;
  --ac-pin-error: 229, 72, 77;
  --ac-pin-luz: source-over;
}

* { box-sizing: border-box; }


button, input { font: inherit; color: inherit; }
svg { display: block; }


.ac-escena { height: 100%; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
.ac-panel {
  position: relative; margin: 16px 0 16px 16px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 32% 43%, var(--ac-panel-a), var(--ac-panel-b) 72%);
  box-shadow: inset 0 0 0 1px var(--ac-linea), inset 0 1px 0 var(--ac-luz);
}
.ac-pines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.ac-panel svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ac-marca { position: absolute; left: 34px; top: 30px; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; border-radius: 8px; }
.ac-marca svg { width: 26px; height: 26px; stroke-width: 1.9; }
.ac-cifrada {
  position: absolute; right: 26px; top: 28px; margin: 0; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px;
  border-radius: 99px; border: 1px solid var(--ac-linea); background: color-mix(in srgb, var(--ac-panel-b) 70%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .8rem; color: var(--ac-suave);
}
.ac-cifrada svg { width: 15px; height: 15px; stroke-width: 1.8; }

.ac-arco { transform-origin: 15.5px 10.5px; transition: transform .5s var(--ac-rebote); }
.ac-escena:has(.is-despide, [data-vista="listo"].is-activa) .ac-arco { transform: translateY(-2px) rotate(28deg); transition-delay: .7s; }
.ac-lema { position: absolute; left: 40px; right: 40px; bottom: 38px; }
.ac-lema h1 { margin: 0; font-size: clamp(2.2rem, 3.5vw, 3.15rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; }
.ac-lema p { max-width: 360px; margin: 14px 0 0; font-size: .98rem; line-height: 1.5; color: var(--ac-suave); }


.ac-lado { position: relative; display: grid; place-items: center; padding: 24px; overflow-y: auto; }

.ac-tarjeta { position: relative; width: min(468px, 100%); }
.ac-vistas { position: relative; display: grid; }
.ac-tarjeta svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

.ac-fondo { position: absolute; inset: 0; filter: drop-shadow(0 0 .6px var(--ac-filo)) drop-shadow(0 40px 46px var(--ac-sombra)); pointer-events: none; }
.ac-hoja { position: absolute; inset: 0; background: var(--ac-hoja); border-radius: var(--ac-radio); }

.ac-hoja, .ac-vistas { transition: clip-path .75s var(--ac-muelle, var(--ac-curva)); will-change: clip-path; }
.ac-brillo {
  position: absolute; left: 30px; right: 30px; top: 0; height: 1px; transition: transform .75s var(--ac-muelle, var(--ac-curva));
  background: linear-gradient(90deg, transparent, var(--ac-luz) 30%, var(--ac-luz) 70%, transparent);
}
.is-salta .ac-hoja, .is-salta .ac-vistas, .is-salta .ac-brillo { transition: none; }

.ac-vista { grid-area: 1 / 1; align-self: center; position: relative; padding: 46px 46px 38px; visibility: hidden; }
.ac-vista.is-activa, .ac-vista.is-sale { visibility: visible; }
.ac-vista.is-sale { pointer-events: none; }

.ac-cabeza { margin-bottom: 32px; }
.ac-cabeza h2, .ac-final h2 { margin: 0; font-size: 2.5rem; font-weight: 600; line-height: 1.02; letter-spacing: -.048em; outline: none; }
.ac-cabeza p { margin: 12px 0 0; font-size: 1.03rem; line-height: 1.5; color: var(--ac-suave); }
.ac-volver {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: -6px 0 18px -10px; padding: 0 12px 0 8px; border: 0; border-radius: 99px;
  background: none; color: var(--ac-suave); font-size: .88rem; font-weight: 500; cursor: pointer; transition: color .2s, background-color .2s;
}
.ac-volver svg { width: 17px; height: 17px; stroke-width: 1.8; transition: transform .35s var(--ac-curva); }
.ac-volver:hover { color: var(--ac-texto); background: var(--ac-anillo); }
.ac-volver:hover svg { transform: translateX(-3px); }


.ac-campo { margin-bottom: 20px; }
.ac-rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: .9rem; font-weight: 500; }
.ac-rotulo label { flex: none; }
.ac-msj {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ac-error); font-size: .8rem; font-weight: 500;
  opacity: 0; transform: translateY(5px); visibility: hidden; transition: opacity .2s, transform .35s var(--ac-curva), visibility 0s .35s;
}
.is-error .ac-msj { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .5s var(--ac-rebote), visibility 0s; }
.ac-entrada {
  display: block; width: 100%; height: 56px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--ac-borde);
  background: var(--ac-campo); color: var(--ac-texto); font-size: 1.04rem; letter-spacing: -.005em; outline: none;
  transition: border-color .25s, box-shadow .3s var(--ac-curva), background-color .25s;
}
.ac-entrada::placeholder { color: var(--ac-tenue); }
.ac-entrada:hover { border-color: var(--ac-borde-fuerte); }
.ac-entrada:focus { border-color: var(--ac-suave); background: var(--ac-campo-foco); box-shadow: 0 0 0 4px var(--ac-anillo); }
.is-error .ac-entrada { border-color: color-mix(in srgb, var(--ac-error) 75%, transparent); }
.is-error .ac-entrada:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac-error) 16%, transparent); }
.ac-entrada[readonly] { color: var(--ac-suave); }
.ac-campo.is-sacude .ac-entrada, .ac-campo.is-sacude .ac-caja { animation: ac-niega .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes ac-niega { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }


.ac-caja { position: relative; }
.ac-caja .ac-entrada { padding-right: 96px; }
.ac-ver {
  position: absolute; right: 8px; top: 8px; height: 40px; display: grid; overflow: hidden; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--ac-suave); font-size: .84rem; font-weight: 500; cursor: pointer; transition: color .2s, background-color .2s;
}
.ac-ver span { grid-area: 1 / 1; align-self: center; transition: transform .45s var(--ac-curva), opacity .3s; }
.ac-ver span + span { transform: translateY(110%); opacity: 0; }
.ac-ver[aria-pressed="true"] span:first-child { transform: translateY(-110%); opacity: 0; }
.ac-ver[aria-pressed="true"] span + span { transform: none; opacity: 1; }
.ac-ver:hover { color: var(--ac-texto); background: var(--ac-anillo); }


.ac-requisitos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .87rem; color: var(--ac-suave); }
.ac-requisitos li { display: flex; align-items: center; gap: 7px; transition: color .3s; }
.ac-requisitos svg { width: 16px; height: 16px; flex: none; }
.ac-requisitos circle { stroke: var(--ac-tenue); stroke-width: 1.3; transform-origin: 8px 8px; transition: fill .3s, stroke .3s, transform .45s var(--ac-rebote); }
.ac-requisitos path { stroke: var(--ac-hoja); stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s cubic-bezier(.65, 0, .35, 1); }
.ac-requisitos .is-ok { color: var(--ac-texto); }
.ac-requisitos .is-ok circle { fill: var(--ac-ok); stroke: var(--ac-ok); transform: scale(1.06); }
.ac-requisitos .is-ok path { stroke-dashoffset: 0; transition-delay: .08s; }

.ac-opciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 28px; }
.ac-recordar { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: .94rem; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ac-recordar input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--ac-tenue);
  background: transparent; cursor: pointer; transition: background-color .2s, border-color .2s, transform .3s var(--ac-rebote);
}
.ac-recordar input:checked { background: var(--ac-texto); border-color: var(--ac-texto); }
.ac-recordar input:active { transform: scale(.88); }
.ac-recordar svg { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; stroke: var(--ac-hoja) !important; stroke-width: 2.2; }
.ac-recordar path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s cubic-bezier(.65, 0, .35, 1); }
.ac-recordar input:checked + svg path { stroke-dashoffset: 0; transition-delay: .05s; }

.ac-enlace {
  padding: 2px 0; border: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; color: var(--ac-suave);
  font-size: .94rem; font-weight: 500; cursor: pointer; transition: color .2s, background-size .4s var(--ac-curva);
}
.ac-enlace:hover { color: var(--ac-texto); background-size: 100% 1px; }
.ac-enlace.is-fuerte { color: var(--ac-texto); }
.ac-enlace:disabled { cursor: default; color: var(--ac-tenue); background-size: 0 1px; font-variant-numeric: tabular-nums; }


.ac-boton {
  position: relative; display: grid; place-items: center; width: 100%; height: 58px; overflow: hidden; border: 0; border-radius: 15px;
  background: var(--ac-boton); color: var(--ac-boton-tinta); font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 26px -14px rgba(0, 0, 0, .9);
  transition: transform .3s var(--ac-curva), filter .2s;
}
.ac-boton:hover { filter: brightness(.94); }
.ac-boton:active { transform: scale(.985); }
.ac-boton-txt { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px; transition: transform .5s var(--ac-curva), opacity .25s; }
.ac-boton-txt svg { width: 18px; height: 18px; stroke-width: 2; transition: transform .4s var(--ac-curva); }
.ac-boton:hover .ac-boton-txt svg { transform: translateX(3px); }
.ac-gira { grid-area: 1 / 1; width: 22px; height: 22px; opacity: 0; transform: translateY(120%); transition: transform .5s var(--ac-curva), opacity .25s; }
.ac-gira circle { stroke-width: 2.4; stroke-dasharray: 40 100; transform-origin: 12px 12px; }
.is-cargando .ac-boton { cursor: progress; }
.is-cargando .ac-boton-txt { transform: translateY(-120%); opacity: 0; }
.is-cargando .ac-gira { opacity: 1; transform: none; }
.is-cargando .ac-gira circle { animation: ac-gira .8s linear infinite; }
@keyframes ac-gira { to { transform: rotate(360deg); } }

.ac-pie { margin: 24px 0 0; text-align: center; font-size: .95rem; color: var(--ac-suave); }
.ac-tarjeta :focus-visible { outline: 2px solid var(--ac-texto); outline-offset: 2px; }
.ac-tarjeta .ac-entrada:focus-visible, .ac-tarjeta h2:focus-visible { outline: none; }
.ac-entrada::selection { background: var(--ac-seleccion); color: var(--ac-texto); }
.ac-marca:focus-visible { outline: 2px solid var(--ac-texto); outline-offset: 4px; }



.ac-vista.is-sale > * { animation: ac-sale .2s calc(var(--k) * 13ms) cubic-bezier(.4, 0, .9, .55) forwards; }
@keyframes ac-sale { to { opacity: 0; transform: translateX(calc(var(--ac-dir, 1) * -30px)); } }
.ac-vista.is-entra > * { animation: ac-entra .8s calc(.17s + var(--k) * 40ms) var(--ac-curva) both; }
@keyframes ac-entra { from { opacity: 0; transform: translateX(calc(var(--ac-dir, 1) * 46px)); } }
.ac-vista.is-sale > .is-viaja { animation: none; opacity: 0; }
.ac-vista.is-entra > .is-viaja { animation: none; }


.ac-tarjeta.is-sacude { animation: ac-sacude .55s cubic-bezier(.36, .07, .19, .97); }
@keyframes ac-sacude { 15% { transform: translateX(-12px); } 32% { transform: translateX(10px); } 50% { transform: translateX(-7px); } 68% { transform: translateX(4px); } 84% { transform: translateX(-2px); } }


.ac-final { display: grid; justify-items: center; text-align: center; padding-top: 44px; padding-bottom: 40px; }
.ac-final h2 { margin-top: 22px; }
.ac-texto { max-width: 330px; margin: 12px 0 0; font-size: 1.03rem; line-height: 1.5; color: var(--ac-suave); }
.ac-texto b { font-weight: 500; color: var(--ac-texto); word-break: break-all; }
.ac-final .ac-boton { margin-top: 28px; }
.ac-final .ac-pie { margin-top: 18px; }
.ac-ok { width: 100px; height: 100px; }
.ac-ok circle { fill: color-mix(in srgb, var(--ac-ok) 10%, transparent); stroke: var(--ac-ok); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ac-ok path { stroke: var(--ac-ok); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-activa .ac-ok { animation: ac-asoma .8s .12s var(--ac-rebote) both; }
.is-activa .ac-ok circle { animation: ac-traza .6s .16s var(--ac-curva) forwards; }
.is-activa .ac-ok path { animation: ac-traza .42s .55s var(--ac-curva) forwards; }
@keyframes ac-traza { to { stroke-dashoffset: 0; } }
@keyframes ac-asoma { from { transform: scale(.55); opacity: 0; } }
.ac-progreso { width: 200px; height: 3px; margin-top: 28px; border-radius: 3px; background: var(--ac-linea); overflow: hidden; }
.ac-progreso i { display: block; height: 100%; border-radius: inherit; background: var(--ac-texto); transform: scaleX(0); transform-origin: 0 50%; }
.is-activa .ac-progreso i { animation: ac-llena 1.35s .45s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes ac-llena { to { transform: none; } }
.ac-tarjeta { transition: opacity .6s var(--ac-curva), transform .7s var(--ac-curva), filter .6s var(--ac-curva); }
.ac-tarjeta.is-despide { opacity: 0; transform: translateY(-22px) scale(.96); filter: blur(6px); pointer-events: none; }
.ac-tarjeta.is-llega { animation: ac-vuelve .9s var(--ac-curva) both; }
.ac-tarjeta.is-llega .ac-vista.is-activa > * { animation: ac-sube .8s calc(.12s + var(--k) * 45ms) var(--ac-curva) both; }
@keyframes ac-vuelve { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes ac-sube { from { opacity: 0; transform: translateY(14px); } }


.ac-insignia {
  position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; color: var(--ac-texto);
  background: var(--ac-campo); box-shadow: inset 0 0 0 1px var(--ac-borde), inset 0 1px 0 var(--ac-luz);
}
.ac-sobre, .ac-tic { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; }
.ac-sobre { stroke-width: 1.7; }
.ac-tic path { stroke: var(--ac-ok); stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; }

.ac-estela {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 1.5px; margin: 6px 0 0 -22px; border-radius: 2px;
  background: currentColor; opacity: 0; rotate: -45deg; transform-origin: 100% 50%;
}
.ac-estela + .ac-estela { margin: 15px 0 0 -11px; }
.is-entra .ac-sobre, .is-otra .ac-sobre { animation: ac-despega 1s .35s cubic-bezier(.5, 0, .2, 1) both; }
.is-entra .ac-estela, .is-otra .ac-estela { animation: ac-raya .55s .64s ease-out both; }
.is-entra .ac-estela + .ac-estela, .is-otra .ac-estela + .ac-estela { animation-delay: .7s; }
.is-entra .ac-tic path, .is-otra .ac-tic path { animation: ac-traza .45s 1.05s var(--ac-curva) both; }
.ac-vista[data-vista="enviado"]:not(.is-entra):not(.is-otra) .ac-sobre { opacity: 0; }
.ac-vista[data-vista="enviado"]:not(.is-entra):not(.is-otra) .ac-tic path { stroke-dashoffset: 0; }
@keyframes ac-despega {
  0% { transform: none; }
  22% { transform: translateY(4px) scale(.9, .86); }
  38% { transform: translate(-3px, 2px) rotate(6deg); }
  100% { transform: translate(78px, -78px) rotate(-16deg) scale(.86); }
}
@keyframes ac-raya { 0% { opacity: 0; scale: .1 1; translate: 0 0; } 35% { opacity: .55; scale: 1 1; } 100% { opacity: 0; scale: .3 1; translate: 30px -30px; } }


.ac-pista { position: absolute; left: 24px; right: 24px; bottom: 20px; margin: 0; text-align: center; font-size: .8rem; color: var(--ac-tenue); }
.ac-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


@media (max-width: 760px) {

  .ac-escena { height: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ac-panel { height: 170px; margin: 12px 12px 0; border-radius: 22px; --ac-pin-linea: .58; --ac-pin-velo: .86; }
  .ac-marca { left: 20px; top: 18px; font-size: 1rem; }
  .ac-cifrada { right: 16px; top: 16px; height: 28px; font-size: .74rem; }
  .ac-lema { display: none; }
  .ac-lado { display: flex; flex-direction: column; align-items: center; padding: 12px 12px 22px; overflow: visible; }
  .ac-vista { align-self: start; padding: 28px 22px 26px; }
  
  .ac-vista:not(.is-activa):not(.is-sale) { position: absolute; left: 0; right: 0; top: 0; }
  .ac-final { padding-top: 34px; padding-bottom: 30px; }
  .ac-cabeza { margin-bottom: 22px; }
  .ac-cabeza h2, .ac-final h2 { font-size: 1.65rem; }
  .ac-pista { position: static; margin-top: 16px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-hoja, .ac-vistas, .ac-brillo { transition-duration: .01s; }
  .ac-vista.is-sale > *, .ac-vista.is-entra > *, .ac-tarjeta.is-llega, .ac-tarjeta.is-llega .ac-vista.is-activa > * { animation: ac-funde .2s both; }
  .ac-vista.is-sale > * { animation-direction: reverse; }
  .ac-tarjeta.is-sacude, .ac-campo.is-sacude .ac-entrada, .ac-campo.is-sacude .ac-caja { animation: none; }
  .ac-tarjeta, .ac-tarjeta.is-despide { transform: none; filter: none; transition: opacity .3s; }
  .is-activa .ac-ok, .is-activa .ac-ok circle, .is-activa .ac-ok path { animation-duration: .01s; animation-delay: 0s; }
  .is-entra .ac-sobre, .is-otra .ac-sobre { animation: ac-funde .3s reverse both; }
  .is-entra .ac-estela, .is-otra .ac-estela { animation: none; }
  .is-entra .ac-tic path, .is-otra .ac-tic path { animation-duration: .01s; animation-delay: .2s; }
  .is-activa .ac-progreso i { animation-duration: .5s; }
  .ac-msj, .is-error .ac-msj, .ac-ver span, .ac-boton-txt, .ac-gira, .ac-arco { transition-duration: .12s; transition-timing-function: ease; }
}
@keyframes ac-funde { from { opacity: 0; } }