/* ==========================================================================
   Acceso de clientes (cliente_login.php)
   Pagina independiente: no usa el header ni el footer de la tienda.
   Rediseño 2026-10-10 (pedido del cliente: "que se vea mas profesional"): formato clasico de tienda en linea,
   claro y limpio. Encabezado blanco con el logo, una sola tarjeta centrada con pestañas Ingresar / Crear
   cuenta, y debajo pago seguro, entrega y soporte. Botones en el azul de la tienda (#2563eb).
   ========================================================================== */

:root {
    color-scheme: light;
    --au-bg: #f4f6f9;
    --au-surface: #ffffff;
    --au-soft: #f8fafc;
    --au-ink: #101828;
    --au-text: #344054;
    --au-muted: #667085;
    --au-faint: #667085;
    --au-border: #d0d5dd;
    --au-border-soft: #e4e7ec;
    --au-primary: #2563eb;
    --au-primary-hover: #1d4ed8;
    --au-link: #1d4ed8;
    --au-success: #067647;
    --au-error: #d92d20;
    --au-warning: #b54708;
    --au-radius: 10px;
    --au-display: "Poppins", "Manrope", system-ui, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

.au-body {
    margin: 0;
    background: var(--au-bg);
    color: var(--au-text);
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.au-body a {
    color: var(--au-link);
    font-weight: 700;
    text-decoration: none;
}

.au-body a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.au-body :focus-visible {
    outline: 2px solid var(--au-primary);
    outline-offset: 2px;
}

.au h1,
.au h2,
.au p {
    margin: 0;
}

/* ---------- Estructura ---------- */
.au {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- Encabezado ---------- */
.au-topbar {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid var(--au-border-soft);
    background: var(--au-surface);
}

.au-topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1120px;
    height: 68px;
    margin: 0 auto;
    padding: 0 24px;
}

.au-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--au-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.au-body .au-logo,
.au-body .au-logo:hover {
    color: var(--au-ink);
    text-decoration: none;
}

/* Logo redondo (MetStrim): se ve solo el circulo */
.au-logo img {
    border-radius: 50%;
    object-fit: contain;
}

.au-body .au-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--au-text);
    font-size: .88rem;
    font-weight: 600;
}

.au-body .au-back:hover {
    color: var(--au-ink);
    text-decoration: none;
}

/* Boton de idioma "ES": en este encabezado claro va blanco con borde (sigue siendo solido y legible) */
.au-body .lang-btn {
    border-color: var(--au-border);
    background: #ffffff;
    color: var(--au-ink);
}

.au-body .lang-btn .lang-label {
    color: var(--au-ink);
}

.au-body .lang-btn .fa-globe {
    color: var(--au-primary);
}

.au-body .lang-btn .lang-caret {
    color: var(--au-muted);
}

.au-body .lang-btn:hover,
.au-body .lang-btn[aria-expanded="true"] {
    border-color: var(--au-primary);
    background: #eff4ff;
}

/* ---------- Columna central ---------- */
.au-main {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 48px 20px 24px;
}

/* Franja de color de la tienda detras de la tarjeta, con un movimiento lento del degradado */
.au-main::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 280px;
    background: linear-gradient(115deg, #1d4ed8, #2563eb 30%, #7c3aed 60%, #0ea5e9 85%, #1d4ed8);
    background-size: 240% 100%;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
    animation: au-band 18s ease-in-out infinite alternate;
}

@keyframes au-band {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

.au-card {
    position: relative;
    width: 100%;
    max-width: 452px;
    padding: 0 40px 34px;
    border: 1px solid var(--au-border-soft);
    border-radius: 16px;
    background: var(--au-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 24px 48px -16px rgba(16, 24, 40, .25);
    animation: au-rise .5s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes au-rise {
    from { opacity: 0; transform: translateY(14px); }
}

/* Pestañas Ingresar / Crear cuenta: subrayadas, a todo el ancho de la tarjeta */
.au-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 -40px 30px;
    border-bottom: 1px solid var(--au-border-soft);
}

.au[data-mode="forgot"] .au-tabs {
    display: none;
}

.au[data-mode="forgot"] .au-card,
.au[data-mode="sent"] .au-card,
.au[data-mode="reset"] .au-card,
.au[data-mode="reset_invalid"] .au-card {
    padding-top: 34px;
}

.au-body .au-tabs a {
    position: relative;
    display: grid;
    min-height: 58px;
    place-items: center;
    color: var(--au-muted);
    font-size: .98rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .15s ease;
}

.au-body .au-tabs a:hover {
    color: var(--au-ink);
}

.au-body .au-tabs a[aria-selected="true"] {
    color: var(--au-primary);
}

/* Linea azul que se desliza de una pestaña a la otra */
.au-tabs {
    position: relative;
}

.au-tabs-ink {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50%;
    height: 3px;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.au-tabs-ink::before {
    content: "";
    position: absolute;
    inset: 0 28px;
    border-radius: 3px 3px 0 0;
    background: var(--au-primary);
}

.au-tabs:has([data-auth-tab="register"][aria-selected="true"]) .au-tabs-ink {
    transform: translateX(100%);
}

.au-panel {
    display: grid;
    gap: 22px;
    animation: au-in .35s ease both;
}

.au-panel[hidden] {
    display: none;
}

/* Al cambiar de pestaña el formulario aparece suave */
@keyframes au-in {
    from { opacity: 0; transform: translateY(6px); }
}

.au-head {
    text-align: center;
}

.au-head h1 {
    color: var(--au-ink);
    font-family: var(--au-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}

/* ---------- Interaccion (2026-10-10: "mas dinamico e interactivo") ---------- */

/* Iconos de plataformas flotando en la franja de color; con el mouse se desplazan un poco (--mx/--my) */
.au-float {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 280px;
    overflow: hidden;
    pointer-events: none;
}

.au-float span {
    position: absolute;
    top: var(--y);
    left: var(--x);
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-size: 1.45rem;
    backdrop-filter: blur(4px);
    translate: calc(var(--mx, 0) * var(--d) * -46px) calc(var(--my, 0) * var(--d) * -30px);
    transition: translate .4s ease-out;
    animation: au-float var(--t) ease-in-out infinite alternate;
}

.au-float span:nth-child(even) {
    animation-direction: alternate-reverse;
}

@keyframes au-float {
    from { transform: translateY(-8px) rotate(-6deg); }
    to { transform: translateY(10px) rotate(6deg); }
}

/* Barra de avance bajo las pestañas: se llena con los datos y se pone verde al terminar */
/* La barra hace de linea inferior de las pestañas */
.au-card .au-tabs {
    border-bottom: 0;
}

.au-progress {
    height: 2px;
    margin: -30px -40px 28px;
    overflow: hidden;
    background: var(--au-border-soft);
}

.au-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    transition: width .35s cubic-bezier(.2, .8, .2, 1), background .3s ease;
}

.au-progress.is-done i {
    background: #12b76a;
}

.au[data-mode="forgot"] .au-progress {
    display: none;
}

@media (max-width: 640px) {
    .au-progress {
        margin: -22px -20px 22px;
    }

    /* En celular la tarjeta cubre la franja: los iconos no se verian */
    .au-float {
        display: none;
    }
}

/* Check verde en los campos que ya estan bien escritos (los de contraseña ya tienen el ojo) */
.au-field.is-valid .au-control:not(:has(.au-eye))::after {
    content: "\f00c";
    position: absolute;
    right: 14px;
    color: #12b76a;
    font-family: "Font Awesome 6 Free";
    font-size: .9rem;
    font-weight: 900;
    pointer-events: none;
    animation: au-pop .3s cubic-bezier(.2, .8, .2, 1.4);
}

.au-field.is-valid .au-control:not(:has(.au-eye)) input {
    padding-right: 40px;
}

@keyframes au-pop {
    from { opacity: 0; transform: scale(.4); }
}

/* Boton listo para enviar: un brillo que recorre el boton */
.au-submit {
    position: relative;
    overflow: hidden;
}

.au-submit.is-ready::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    animation: au-shine .9s ease .1s;
    pointer-events: none;
}

@keyframes au-shine {
    to { left: 120%; }
}

/* Onda al tocar botones y pestañas */
.au-body .au-tabs a {
    overflow: hidden;
}

.au-ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .18;
    transform: scale(0);
    pointer-events: none;
    animation: au-ripple .55s ease-out forwards;
}

.au-submit .au-ripple {
    background: #ffffff;
    opacity: .35;
}

@keyframes au-ripple {
    to { opacity: 0; transform: scale(2.4); }
}

/* Textos amigables: mano que saluda, producto que va cambiando y el aviso de "todo listo" */
.au-wave {
    display: inline-block;
    color: #f59e0b;
    font-size: .8em;
    transform-origin: 70% 80%;
    animation: au-wave 1.8s ease-in-out .4s 2;
}

@keyframes au-wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(16deg); }
    20%, 40% { transform: rotate(-8deg); }
}

.au-rotate {
    display: inline-block;
    color: var(--au-primary);
    font-weight: 800;
    transition: opacity .25s ease, transform .25s ease;
}

.au-rotate.is-out {
    opacity: 0;
    transform: translateY(-6px);
}

[data-register-sub].is-ready {
    color: var(--au-success);
    font-weight: 700;
}

.au-body .au-legal a i {
    color: #12b76a;
}

.au-head p {
    text-wrap: balance;
    margin-top: 6px;
    color: var(--au-muted);
    font-size: .95rem;
}

.au-head .au-eyebrow {
    margin: 0 0 8px;
    color: var(--au-primary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- Avisos ---------- */
.au-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border: 1px solid #fecdca;
    border-radius: var(--au-radius);
    background: #fef3f2;
    color: #b42318;
    font-size: .88rem;
    font-weight: 600;
    animation: au-shake .4s ease;
}

.au-alert > i {
    margin-top: 3px;
}

.au-alert span {
    flex: 1;
}

.au-alert.is-success {
    border-color: #abefc6;
    background: #ecfdf3;
    color: var(--au-success);
    animation: none;
}

/* Se llega al login desde una compra */
.au-alert.is-info {
    border-color: #c7d7fe;
    background: #eff4ff;
    color: #1e40af;
    animation: none;
}

.au-alert button {
    padding: 0 2px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}

.au-alert button:hover {
    opacity: 1;
}

/* ---------- Formularios ---------- */
.au-form {
    display: grid;
    gap: 18px;
}

.au-form.is-shaking {
    animation: au-shake .4s ease;
}

@keyframes au-shake {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
}

.au-field {
    display: grid;
    gap: 6px;
}

.au-field label {
    color: var(--au-ink);
    font-size: .875rem;
    font-weight: 700;
}

.au-optional {
    margin-left: 4px;
    color: var(--au-faint);
    font-size: .8rem;
    font-weight: 500;
}

.au-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.au-label-row a {
    font-size: .85rem;
}

.au-control {
    position: relative;
    display: flex;
    align-items: center;
}

.au-control input,
.au-control select {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    color: var(--au-ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}

.au-control input::placeholder {
    color: #98a2b3;
}

.au-control input:hover,
.au-control select:hover {
    border-color: #98a2b3;
}

.au-control input:focus,
.au-control select:focus {
    border-color: var(--au-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}

/* Icono a la izquierda del campo */
.au-control.has-icon input {
    padding-left: 42px;
}

.au-ico {
    position: absolute;
    left: 15px;
    z-index: 1;
    color: #98a2b3;
    font-size: .95rem;
    pointer-events: none;
    transition: color .15s ease;
}

.au-control:focus-within .au-ico {
    color: var(--au-primary);
}

.au-control:has(.au-eye) input {
    padding-right: 48px;
}

.au-control-action input {
    padding-right: 96px;
}

.au-eye {
    position: absolute;
    right: 6px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--au-muted);
    cursor: pointer;
}

.au-eye:hover {
    background: var(--au-soft);
    color: var(--au-ink);
}

.au-inline-btn {
    position: absolute;
    right: 6px;
    display: grid;
    min-width: 80px;
    height: 36px;
    place-items: center;
    padding: 0 12px;
    border: 1px solid var(--au-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--au-text);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
}

.au-inline-btn:hover {
    background: var(--au-soft);
}

.au-inline-btn:disabled {
    cursor: wait;
}

.au-control-phone {
    gap: 8px;
}

.au-control-phone select {
    flex: 0 0 168px;
    width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.au-hint,
.au-caps {
    color: var(--au-muted);
    font-size: .84rem;
}

.au-hint:empty {
    display: none;
}

.au-caps {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--au-warning);
    font-weight: 600;
}

.au-caps[hidden] {
    display: none;
}

/* Estados de validacion */
.au-field.is-invalid .au-control input {
    border-color: #f97066;
}

.au-field.is-invalid .au-control input:focus {
    box-shadow: 0 0 0 4px rgba(240, 68, 56, .14);
}

.au-field.is-valid .au-control input {
    border-color: #75e0a7;
}

.au-field.is-invalid .au-hint {
    color: var(--au-error);
}

.au-field.is-valid .au-hint {
    color: var(--au-success);
}

.au-field.is-loading .au-hint {
    color: var(--au-primary);
}

/* Fuerza de la contrasena */
.au-strength {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.au-strength-bar {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.au-strength-bar i {
    height: 4px;
    border-radius: 4px;
    background: var(--au-border-soft);
    transition: background-color .2s ease;
}

.au-strength span {
    min-width: 72px;
    color: var(--au-muted);
    font-size: .8rem;
    font-weight: 600;
    text-align: right;
}

.au-strength[data-level="1"] i:nth-child(-n + 1) { background: #f04438; }
.au-strength[data-level="2"] i:nth-child(-n + 2) { background: #f79009; }
.au-strength[data-level="3"] i:nth-child(-n + 3) { background: #2563eb; }
.au-strength[data-level="4"] i { background: #12b76a; }

.au-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.au-rules li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--au-muted);
    font-size: .8rem;
}

.au-rules li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--au-border);
    transition: background-color .15s ease;
}

.au-rules li.is-met {
    color: var(--au-success);
}

.au-rules li.is-met::before {
    background: #12b76a;
}

/* ---------- Botones ---------- */
.au-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    margin-top: 4px;
    border: 1px solid var(--au-primary);
    border-radius: var(--au-radius);
    background: var(--au-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    color: #ffffff;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.au-submit:hover {
    border-color: var(--au-primary-hover);
    background: var(--au-primary-hover);
    box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .55);
    transform: translateY(-1px);
}

.au-submit:active {
    transform: translateY(0);
}

.au-submit {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}

.au-submit i {
    font-size: .85rem;
    transition: transform .2s ease;
}

.au-submit:hover i {
    transform: translateX(4px);
}

.au-submit.is-loading i {
    display: none;
}

.au-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .25);
}

.au-submit.is-loading {
    cursor: wait;
    opacity: .85;
}

.au-submit.is-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: au-spin .7s linear infinite;
}

.au-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--au-muted);
    font-size: .84rem;
}

.au-divider::before,
.au-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--au-border-soft);
}

.au-google {
    display: flex;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--au-radius);
}

/* Marcador mientras carga el boton de Google, para que el formulario no se mueva. */
.au:not(.has-google) .au-google:empty {
    border: 1px solid var(--au-border-soft);
    background: linear-gradient(90deg, var(--au-soft), #eef1f5, var(--au-soft));
    background-size: 200% 100%;
    animation: au-skeleton 1.2s ease-in-out infinite;
}

@keyframes au-skeleton {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.au-google-error {
    margin: 0;
    color: var(--au-muted);
    font-size: .875rem;
    text-align: center;
}

.au-body .au-guest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    justify-self: center;
    color: var(--au-text);
    font-size: .9rem;
}

.au-body .au-guest:hover {
    color: var(--au-ink);
    text-decoration: none;
}

.au-body .au-guest i {
    font-size: .75rem;
    transition: transform .15s ease;
}

.au-body .au-guest:hover i {
    transform: translateX(3px);
}

.au-terms {
    color: var(--au-muted);
    font-size: .8rem;
    text-align: center;
}

/* Aviso legal debajo del boton de Google (acepta Terminos y Privacidad al crear la cuenta) */
.au-google-legal {
    margin: -4px 0 0;
    font-size: .76rem;
    line-height: 1.45;
}

.au-google-legal a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Recuperar contrasena ---------- */
.au-feature-icon {
    justify-self: center;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 12px;
    background: #eff4ff;
    color: var(--au-primary);
    font-size: 1.15rem;
}

.au-feature-icon.is-warning {
    background: #fffaeb;
    color: var(--au-warning);
}

.au-head strong {
    color: var(--au-ink);
    font-weight: 700;
    word-break: break-word;
}

.au-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--au-radius);
    background: var(--au-soft);
    color: var(--au-muted);
    font-size: .875rem;
}

.au-note i {
    margin-top: 3px;
}

.au-body a.au-link-button {
    color: #ffffff;
    text-decoration: none;
}

.au-resend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--au-muted);
    font-size: .875rem;
}

.au-resend button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--au-link);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.au-resend button:disabled {
    color: var(--au-faint);
    cursor: default;
}

/* ---------- Carga ---------- */
.au-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    border-radius: inherit;
    background: rgba(255, 255, 255, .95);
    color: var(--au-ink);
    font-size: .95rem;
    text-align: center;
}

.au-overlay[hidden] {
    display: none;
}

.au-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--au-border-soft);
    border-top-color: var(--au-primary);
    border-radius: 50%;
    animation: au-spin .7s linear infinite;
}

.au-spinner.is-small {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

@keyframes au-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Confianza (debajo de la tarjeta) ---------- */
.au-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 680px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.au-trust li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--au-muted);
    font-size: .78rem;
    line-height: 1.35;
}

.au-trust i {
    display: grid;
    flex: 0 0 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #eff4ff;
    color: var(--au-primary);
    font-size: .95rem;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.au-trust li:hover i {
    background: var(--au-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

.au-trust li {
    justify-content: center;
}

.au-trust strong {
    display: block;
    color: var(--au-ink);
    font-size: .84rem;
    font-weight: 700;
}

/* ---------- Pie ---------- */
.au-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    margin-top: auto;
    padding-top: 28px;
    color: var(--au-muted);
    font-size: .8rem;
}

.au-body .au-legal a {
    color: var(--au-text);
    font-weight: 600;
}

.au-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.au-secure i {
    color: #12b76a;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .au-topbar-in {
        height: 60px;
        padding: 0 14px;
    }

    .au-main {
        padding: 18px 12px 18px;
    }

    .au-card {
        padding: 0 20px 24px;
        border-radius: 14px;
    }

    .au-tabs {
        margin: 0 -20px 22px;
    }

    .au-body .au-tabs a {
        min-height: 52px;
    }

    .au[data-mode="forgot"] .au-card,
    .au[data-mode="sent"] .au-card,
    .au[data-mode="reset"] .au-card,
    .au[data-mode="reset_invalid"] .au-card {
        padding-top: 24px;
    }

    .au-head h1 {
        font-size: 1.4rem;
    }

    .au-main::before {
        height: 200px;
    }

    .au-trust {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        max-width: 452px;
        margin-top: 20px;
        padding: 0 6px;
    }

    .au-trust li {
        justify-content: flex-start;
    }

    .au-label-row {
        flex-wrap: wrap;
    }

    .au-label-row a {
        font-size: .8rem;
    }

    .au-control-phone select {
        flex-basis: 132px;
        width: 132px;
    }
}

@media (max-width: 420px) {
    /* Solo el logo y la flecha de volver: el boton ES necesita su espacio */
    .au-logo span,
    .au-back span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .au-body .au-back {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 1px solid var(--au-border);
        border-radius: 10px;
    }
}

/* ==========================================================================
   Pulido de detalles (pedido del cliente 2026-10-11: "mismo diseño, pulir detalles"): letras con mas
   jerarquia, campos grises que se vuelven blancos al escribir, tarjeta y sombras mas finas, franja mas
   suave con textura de puntos y la fila de confianza ordenada con separadores.
   ========================================================================== */

/* Encabezado */
.au-topbar {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.au-topbar-in {
    height: 64px;
}

.au-logo {
    font-size: 1.08rem;
    letter-spacing: -.01em;
}

/* Franja: un poco mas suave, con textura de puntos y borde inclinado mas sutil */
.au-main::before {
    height: 300px;
    background:
        radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(115deg, #1e40af, #2563eb 32%, #6d28d9 64%, #0284c7 88%, #1e40af);
    background-size: 22px 22px, 240% 100%;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

@keyframes au-band {
    from { background-position: 0 0, 0% 50%; }
    to { background-position: 0 0, 100% 50%; }
}

.au-main {
    padding-top: 56px;
}

/* Tarjeta */
.au-card {
    max-width: 460px;
    padding: 0 44px 36px;
    border: 1px solid rgba(16, 24, 40, .06);
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .05),
        0 12px 24px -6px rgba(16, 24, 40, .08),
        0 32px 64px -24px rgba(30, 64, 175, .28);
}

.au-tabs {
    margin: 0 -44px 32px;
}

.au-progress {
    margin: -32px -44px 30px;
}

.au-body .au-tabs a {
    min-height: 60px;
    font-size: .95rem;
    transition: color .15s ease, background-color .15s ease;
}

.au-body .au-tabs a:first-child {
    border-top-left-radius: 20px;
}

.au-body .au-tabs a:nth-child(2) {
    border-top-right-radius: 20px;
}

.au-body .au-tabs a:not([aria-selected="true"]):hover {
    background: #f9fafb;
}

/* Titulos */
.au-panel {
    gap: 20px;
}

.au-head h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.au-head p {
    margin-top: 8px;
    color: #475467;
    font-size: .95rem;
    line-height: 1.55;
}

/* Campos: grises en reposo, blancos al escribir */
.au-form {
    gap: 16px;
}

.au-field {
    gap: 7px;
}

.au-field label {
    color: #344054;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .005em;
}

.au-control input,
.au-control select {
    height: 50px;
    border-color: #e4e7ec;
    border-radius: 12px;
    background-color: #f9fafb;
    box-shadow: none;
    font-size: .98rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.au-control input:hover,
.au-control select:hover {
    border-color: #cbd5e1;
    background-color: #ffffff;
}

.au-control input:focus,
.au-control select:focus {
    border-color: var(--au-primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.au-control input:not(:placeholder-shown) {
    background-color: #ffffff;
}

.au-control.has-icon input {
    padding-left: 44px;
}

.au-ico {
    left: 16px;
    color: #98a2b3;
}

.au-eye {
    right: 7px;
    border-radius: 9px;
}

.au-field.is-valid .au-control input {
    border-color: #a6f4c5;
    background-color: #ffffff;
}

/* Boton principal */
.au-submit {
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(180deg, #3b82f6 -40%, #2563eb 60%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 24, 40, .1);
    font-size: 1rem;
    letter-spacing: .01em;
}

.au-submit:hover {
    background: linear-gradient(180deg, #2563eb -40%, #1d4ed8 60%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 24px -10px rgba(37, 99, 235, .6);
}

.au-divider {
    color: #98a2b3;
    font-size: .8rem;
    font-weight: 600;
}

.au-label-row a {
    font-size: .82rem;
}

.au-body .au-guest {
    color: #475467;
    font-size: .88rem;
}

/* Fila de confianza: una sola fila ordenada con separadores */
.au-trust {
    gap: 0;
    width: auto;
    max-width: none;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    margin-top: 32px;
}

.au-trust span {
    white-space: nowrap;
}

.au-trust li {
    gap: 12px;
    padding: 4px 18px;
}

.au-trust li + li {
    border-left: 1px solid #e4e7ec;
}

.au-trust i {
    flex-basis: 40px;
    height: 40px;
    border: 1px solid #dbe5ff;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.au-trust strong {
    font-size: .85rem;
}

.au-legal {
    gap: 6px 22px;
    padding-top: 26px;
    font-size: .78rem;
}

/* Tablets angostas: la fila de confianza ya no entra; va uno debajo de otro */
@media (max-width: 820px) {
    .au-trust {
        width: 100%;
        max-width: 452px;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 12px;
    }

    .au-trust li {
        justify-content: flex-start;
        padding: 0;
    }

    .au-trust li + li {
        border-left: 0;
    }

    .au-trust span {
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .au-main {
        padding-top: 18px;
    }

    .au-main::before {
        height: 210px;
    }

    .au-card {
        padding: 0 20px 26px;
        border-radius: 18px;
    }

    .au-tabs {
        margin: 0 -20px 24px;
    }

    .au-progress {
        margin: -24px -20px 24px;
    }

    .au-body .au-tabs a {
        min-height: 54px;
    }

    .au-head h1 {
        font-size: 1.5rem;
    }

    .au-trust {
        width: 100%;
        max-width: 452px;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 12px;
        margin-top: 22px;
    }

    .au-trust span {
        white-space: normal;
    }

    .au-trust li {
        padding: 0;
    }

    .au-trust li + li {
        border-left: 0;
    }
}

/* ==========================================================================
   Presentacion de la tienda (pedido del cliente 2026-10-11: "Tienda virtual MetStrim Store, aqui encuentras lo
   que buscas", que diga "wao, es una tienda profesional"). En computadora: presentacion a la izquierda sobre
   la franja de color y el formulario a la derecha. En tablet y celular: la presentacion arriba.
   ========================================================================== */
.au-main {
    display: grid;
    grid-template-columns: minmax(0, 620px) 460px;
    justify-content: center;
    align-items: start;
    column-gap: 64px;
    padding: 64px 32px 24px;
}

.au-main::before {
    height: 620px;
    clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
}

.au-card {
    margin-top: 6px;
}

.au-trust,
.au-legal {
    grid-column: 1 / -1;
    justify-self: center;
}

.au-trust {
    margin-top: 44px;
}

.au-hero {
    min-width: 0;
    padding-top: 18px;
    color: #ffffff;
    animation: au-rise .6s cubic-bezier(.2, .8, .2, 1) both;
}

.au-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.au-hero-kicker i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: au-pulse 2s ease-out infinite;
}

@keyframes au-pulse {
    70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.au .au-hero-title {
    margin-top: 18px;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #c7d2fe 50%, #ffffff 60%, #ffffff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--au-display);
    font-size: clamp(2.7rem, 4.8vw, 4.1rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    animation: au-shimmer 6s ease-in-out infinite;
}

@keyframes au-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -150% 0; }
}

.au .au-hero-lead {
    margin-top: 16px;
    color: rgba(255, 255, 255, .9);
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.5;
}

.au-hero-word {
    display: inline-block;
    margin-left: 2px;
    padding: 2px 12px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .45);
    color: #1e40af;
    font-weight: 800;
    transition: opacity .3s ease, transform .3s ease;
}

.au-hero-word.is-out {
    opacity: 0;
    transform: translateY(-8px);
}

.au-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 0;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.au-hero-stats li {
    display: grid;
    padding: 0 26px;
}

.au-hero-stats li:first-child {
    padding-left: 0;
}

.au-hero-stats li + li {
    border-left: 1px solid rgba(255, 255, 255, .28);
}

.au-hero-stats strong {
    color: #ffffff;
    font-family: var(--au-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.au-hero-stats span {
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    font-weight: 600;
}

/* Tablet: presentacion arriba, centrada; el formulario debajo */
@media (max-width: 1099px) {
    .au-main {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: 44px 20px 24px;
    }

    .au-main::before {
        height: 560px;
    }

    .au-hero {
        width: 100%;
        max-width: 680px;
        padding-top: 0;
        text-align: center;
    }

    .au-hero-stats {
        justify-content: center;
    }

    .au-card {
        margin-top: 30px;
    }
}

/* Celular: presentacion compacta */
@media (max-width: 640px) {
    .au-main {
        padding: 26px 12px 18px;
    }

    .au-main::before {
        height: 470px;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }

    .au .au-hero-title {
        margin-top: 14px;
        font-size: 2.3rem;
    }

    .au .au-hero-lead {
        margin-top: 10px;
        font-size: 1rem;
    }

    /* En celular los contadores se omiten: asi el formulario queda mas arriba */
    .au-hero-stats {
        display: none;
    }

    .au-main::before {
        height: 400px;
    }

    .au-shelf {
        margin-top: 18px;
        padding-bottom: 14px;
    }

    .au-body .au-product {
        flex-basis: 108px;
        gap: 4px;
        padding: 6px 6px 10px;
        border-radius: 13px;
    }

    .au-product span {
        font-size: .72rem;
    }

    .au-product strong {
        font-size: .86rem;
    }

    .au-card {
        margin-top: 10px;
    }
}

/* ==========================================================================
   Logo interactivo en lugar de la vitrina (pedido del cliente 2026-10-11): el logo flota, tiene un anillo de luz
   que gira, las categorias orbitan a su alrededor, se inclina en 3D con el mouse y al tocarlo da un giro.
   La presentacion va centrada.
   ========================================================================== */
.au-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    text-align: center;
}

.au-hero-stats {
    justify-content: center;
}

.au-main::before {
    height: 740px;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
}

.au-logo-stage {
    --size: 210px;
    --r: 146px;
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    width: var(--size);
    height: var(--size);
    margin: 52px 0 58px;
    perspective: 900px;
    animation: au-bob 6s ease-in-out infinite;
}

@keyframes au-bob {
    0%, 100% { translate: 0 -6px; }
    50% { translate: 0 6px; }
}

/* Anillo de luz con los colores de la marca, girando detras del logo */
.au-logo-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #22d3ee, #a855f7, #ec4899, #3b82f6, #22d3ee);
    filter: blur(16px);
    opacity: .9;
    animation: au-turn 6s linear infinite;
}

/* Anillo punteado que gira lento al reves (aparte del anillo de luz, que esta difuminado) */
.au-logo-stage::before {
    content: "";
    position: absolute;
    inset: -32px;
    border: 2px dashed rgba(255, 255, 255, .35);
    border-radius: 50%;
    animation: au-turn 40s linear infinite reverse;
}

@keyframes au-turn {
    to { rotate: 360deg; }
}

.au-logo-orb {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #0b0d14;
    box-shadow: 0 28px 56px -16px rgba(15, 23, 42, .7), 0 0 0 5px rgba(255, 255, 255, .2);
    cursor: pointer;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform .3s ease-out, box-shadow .3s ease;
}

.au-logo-orb:hover {
    box-shadow: 0 34px 64px -16px rgba(15, 23, 42, .75), 0 0 0 6px rgba(255, 255, 255, .32), 0 0 48px rgba(168, 85, 247, .55);
}

.au-logo-orb:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 8px;
}

.au-logo-orb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.au-logo-stage.is-spinning .au-logo-orb img {
    animation: au-logo-spin .9s cubic-bezier(.3, 1.3, .45, 1);
}

@keyframes au-logo-spin {
    from { rotate: 0deg; scale: 1; }
    50% { scale: 1.06; }
    to { rotate: 360deg; scale: 1; }
}

/* Brillo que sigue al mouse sobre el logo */
.au-logo-shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at var(--sx, 32%) var(--sy, 26%), rgba(255, 255, 255, .42), transparent 46%);
    mix-blend-mode: screen;
    opacity: .55;
    pointer-events: none;
    transition: opacity .3s ease;
}

.au-logo-stage.is-tilting .au-logo-shine {
    opacity: 1;
}

/* Onda de luz al tocar el logo */
.au-logo-wave {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    pointer-events: none;
    animation: au-wave-out .9s ease-out forwards;
}

@keyframes au-wave-out {
    from { opacity: 1; scale: 1; }
    to { opacity: 0; scale: 1.9; }
}

/* Categorias en orbita alrededor del logo (siempre derechas) */
.au-orbit {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
    animation: au-turn 26s linear infinite;
}

.au-orbit li {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .55);
    color: var(--au-primary);
    font-size: .95rem;
    transform: rotate(calc(var(--i) * 60deg)) translate(var(--r)) rotate(calc(var(--i) * -60deg));
}

.au-orbit li i {
    animation: au-turn 26s linear infinite reverse;
}

.au-orbit li:nth-child(2) { color: #db2777; }
.au-orbit li:nth-child(3) { color: #7c3aed; }
.au-orbit li:nth-child(4) { color: #0891b2; }
.au-orbit li:nth-child(5) { color: #059669; }
.au-orbit li:nth-child(6) { color: #d97706; }

.au-logo-stage:hover .au-orbit,
.au-logo-stage:hover .au-orbit li i {
    animation-play-state: paused;
}

/* ---------- "Tienda virtual" grande y llamativo (2026-10-12) ---------- */
@property --kick-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.au-hero-kicker {
    position: relative;
    gap: 11px;
    margin-top: 8px;
    padding: 13px 28px 13px 22px;
    border: 2px solid transparent;
    background:
        linear-gradient(135deg, #172554, #1e3a8a) padding-box,
        conic-gradient(from var(--kick-angle), #22d3ee, #a855f7, #ec4899, #facc15, #22d3ee) border-box;
    box-shadow: 0 0 26px rgba(168, 85, 247, .45), 0 12px 30px -12px rgba(15, 23, 42, .7);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .2em;
    cursor: default;
    user-select: none;
    animation: au-kick-spin 4s linear infinite;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1.3), box-shadow .25s ease;
}

@keyframes au-kick-spin {
    to { --kick-angle: 360deg; }
}

.au-hero-kicker:hover {
    box-shadow: 0 0 40px rgba(236, 72, 153, .55), 0 0 18px rgba(34, 211, 238, .5), 0 14px 34px -12px rgba(15, 23, 42, .75);
    transform: scale(1.06);
}

/* Punto verde "en linea" */
.au-hero-kicker .au-live {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
}

/* Icono de tienda (no es el punto verde) */
.au-hero-kicker .au-kicker-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fde68a;
    font-size: 1.05rem;
    animation: none;
}

.au-kicker-text {
    display: inline-flex;
    text-shadow: 0 0 18px rgba(255, 255, 255, .45);
}

/* Las letras entran una por una al abrir la pagina */
.au-kicker-text span {
    display: inline-block;
    animation: au-letter-in .5s cubic-bezier(.2, .8, .2, 1.3) both;
    animation-delay: calc(.35s + var(--i) * 45ms);
}

@keyframes au-letter-in {
    from { opacity: 0; transform: translateY(12px) scale(.6); }
}

/* Despues de la entrada, las letras se quedan quietas (si no, al terminar cada ola se repetia la entrada
   y las letras desaparecian un momento) */
.au-hero-kicker.is-ready .au-kicker-text span {
    animation: none;
}

/* Ola de letras (al pasar el mouse, al tocar y cada pocos segundos) */
.au-hero-kicker.is-wave .au-kicker-text span {
    animation: au-letter-wave .6s ease both;
    animation-delay: calc(var(--i) * 50ms);
}

@keyframes au-letter-wave {
    0%, 100% { color: #ffffff; transform: translateY(0); }
    40% { color: #fde68a; transform: translateY(-8px); }
}

/* ---------- Tarjeta de ingreso y registro mas amigable (2026-10-12) ---------- */

/* Pestañas con icono */
.au-body .au-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.au-tabs a i {
    font-size: .9rem;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1.4);
}

.au-tabs a:hover i,
.au-tabs a[aria-selected="true"] i {
    transform: scale(1.15);
}

/* Avatar: icono al inicio; con el correo o el nombre escrito muestra la inicial en un color propio */
.au-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 50%;
    background: #eff4ff;
    box-shadow: 0 0 0 6px #f5f8ff;
    color: var(--au-primary);
    font-size: 1.25rem;
    transition: background .3s ease, box-shadow .3s ease;
}

.au-avatar b {
    display: none;
    font-family: var(--au-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.au-avatar.is-on {
    background: linear-gradient(135deg, hsl(var(--hue, 220) 80% 58%), hsl(calc(var(--hue, 220) + 50) 80% 52%));
    box-shadow: 0 0 0 6px hsl(var(--hue, 220) 90% 96%), 0 10px 22px -8px hsl(var(--hue, 220) 70% 40% / .6);
    color: #ffffff;
    animation: au-pop .45s cubic-bezier(.2, .8, .2, 1.4);
}

.au-avatar.is-on i {
    display: none;
}

.au-avatar.is-on b {
    display: block;
}

/* "La forma mas rapida: un clic" sobre el boton de Google */
.au-fast {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: .76rem;
    font-weight: 800;
}

.au-fast i {
    animation: au-bolt 2.4s ease-in-out infinite;
}

@keyframes au-bolt {
    0%, 80%, 100% { transform: none; }
    85% { transform: scale(1.35) rotate(-12deg); }
    90% { transform: scale(1.1) rotate(8deg); }
}

/* Beneficios de crear la cuenta */
.au-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: -6px 0 0;
    padding: 0;
    list-style: none;
}

.au-perks li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: .78rem;
    font-weight: 700;
    transition: background-color .2s ease, transform .2s ease;
}

.au-perks li:hover {
    background: #eff4ff;
    transform: translateY(-2px);
}

.au-perks i {
    color: var(--au-primary);
    font-size: .78rem;
}

/* Requisitos de la contraseña como etiquetas que se marcan con check */
.au-rules {
    gap: 6px;
    margin-top: 6px;
}

.au-rules li {
    padding: 4px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    transition: background-color .2s ease, color .2s ease;
}

.au-rules li.is-met {
    background: #ecfdf3;
    color: var(--au-success);
    font-weight: 700;
}

.au-rules li.is-met::before {
    content: "\f00c";
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-family: "Font Awesome 6 Free";
    font-size: .62rem;
    font-weight: 900;
    animation: au-pop .3s cubic-bezier(.2, .8, .2, 1.4);
}

@media (max-width: 640px) {
    .au-avatar {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }

    .au-tabs a i {
        display: none;
    }

    .au-perks {
        gap: 6px;
    }

    .au-perks li {
        padding: 5px 9px;
        font-size: .72rem;
    }
}

/* ---------- Crear cuenta compacto (2026-10-12: "que no se desglose muy abajo") ---------- */
#panel-register {
    gap: 18px;
}

#panel-register .au-form {
    gap: 14px;
}

/* "+ Agregar celular (opcional)" */
.au-add-phone {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: -2px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--au-primary);
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
}

.au-add-phone span {
    color: var(--au-muted);
    font-weight: 500;
}

.au-add-phone i {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: #eff4ff;
    font-size: .65rem;
    transition: transform .2s ease;
}

.au-add-phone:hover i {
    transform: rotate(90deg);
}

.au-phone-opt:not([hidden]) {
    animation: au-in .3s ease both;
}

/* Contraseña y confirmacion lado a lado; la ayuda solo mientras se escribe */
.au-pass-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
}

.au-pass-help {
    display: none;
    grid-column: 1 / -1;
    gap: 4px;
    margin-top: -4px;
}

.au-pass-help.is-on {
    display: grid;
    animation: au-in .25s ease both;
}

.au-pass-help .au-rules {
    margin-top: 2px;
}

@media (max-width: 420px) {
    .au-pass-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Etiquetas flotantes (2026-10-12, el cliente eligio "Etiquetas flotantes") ----------
   El nombre del campo va dentro del campo y, al tocarlo o con algo escrito, sube al borde. El ejemplo
   (tucorreo@gmail.com...) aparece recien al tocar el campo. El celular conserva su etiqueta arriba (tiene el pais). */
.au-field {
    position: relative;
}

.au-field:not(:has(.au-control-phone)) > label,
.au-field .au-label-row > label {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    max-width: calc(100% - 64px);
    margin-left: -5px;
    padding: 0 5px;
    overflow: hidden;
    border-radius: 6px;
    color: #667085;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top .18s ease, left .18s ease, font-size .18s ease, color .18s ease, background-color .18s ease;
}

.au-field:has(.has-icon) > label,
.au-field:has(.has-icon) .au-label-row > label {
    left: 44px;
}

/* Etiqueta arriba: al tocar el campo o si ya tiene algo escrito */
.au-field:has(input:focus) > label,
.au-field:has(input:not(:placeholder-shown)) > label,
.au-field:has(input:focus) .au-label-row > label,
.au-field:has(input:not(:placeholder-shown)) .au-label-row > label {
    top: -10px;
    left: 12px;
    background: #ffffff;
    color: #475467;
    font-size: .74rem;
    font-weight: 700;
}

.au-field:has(input:focus) > label,
.au-field:has(input:focus) .au-label-row > label {
    color: var(--au-primary);
}

.au-field.is-invalid:has(input:focus) > label,
.au-field.is-invalid:has(input:not(:placeholder-shown)) > label {
    color: var(--au-error);
}

/* El ejemplo del campo solo se ve al tocarlo (debajo de la etiqueta que ya subio) */
.au-field .au-control input::placeholder {
    color: transparent;
    transition: color .18s ease;
}

.au-field .au-control input:focus::placeholder {
    color: #98a2b3;
}

.au-field .au-control-phone input::placeholder {
    color: #98a2b3;
}

/* "¿Olvidaste tu contraseña?" pasa debajo del campo, a la derecha */
.au-field .au-label-row {
    order: 1;
    justify-content: flex-end;
    margin-top: -1px;
}

/* ---------- Saludo e icono del momento del dia (2026-10-12) ----------
   Manana: sol que gira; tarde: sol con nube que flota; noche: luna que se mece con estrellas. Aro de luz girando,
   al pasar el mouse crece y al tocarlo da un giro. Con el correo escrito pasa a la inicial del cliente. */
.au-moment {
    --m1: #6366f1;
    --m2: #a855f7;
    position: relative;
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
    isolation: isolate;
    box-shadow: 0 12px 26px -10px var(--m2);
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1.3), box-shadow .3s ease;
}

.au-moment[data-moment="morning"] {
    --m1: #fbbf24;
    --m2: #f97316;
}

.au-moment[data-moment="afternoon"] {
    --m1: #38bdf8;
    --m2: #6366f1;
}

.au-moment[data-moment="night"] {
    --m1: #4338ca;
    --m2: #a855f7;
}

.au-moment:not(.is-on) {
    background: linear-gradient(135deg, var(--m1), var(--m2));
}

/* Aro de luz que gira alrededor */
.au-moment::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--m1), var(--m2), transparent 65%, var(--m1));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: au-turn 3.5s linear infinite;
}

/* Resplandor suave detras */
.au-moment::after {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--m2), transparent);
    opacity: .28;
    transition: opacity .3s ease;
}

.au-moment:hover {
    transform: scale(1.08);
}

.au-moment:hover::after {
    opacity: .55;
}

.au-moment.is-spin {
    animation: au-moment-spin .7s cubic-bezier(.3, 1.3, .45, 1);
}

@keyframes au-moment-spin {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

/* Movimiento del icono segun el momento */
.au-moment-icon {
    font-size: 1.75rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .2));
}

.au-moment[data-moment="morning"] .au-moment-icon {
    animation: au-turn 14s linear infinite;
}

.au-moment[data-moment="afternoon"] .au-moment-icon {
    animation: au-cloud 3.6s ease-in-out infinite;
}

.au-moment[data-moment="night"] .au-moment-icon {
    animation: au-moon 4s ease-in-out infinite;
}

@keyframes au-cloud {
    0%, 100% { translate: -2px 1px; }
    50% { translate: 2px -2px; }
}

@keyframes au-moon {
    0%, 100% { rotate: -14deg; }
    50% { rotate: 6deg; }
}

/* Estrellas que titilan (solo de noche) */
.au-stars {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
}

.au-moment[data-moment="night"]:not(.is-on) .au-stars {
    display: block;
}

.au-moment .au-stars i {
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff;
    animation: au-twinkle 2.4s ease-in-out infinite;
}

.au-stars i:nth-child(1) { top: 13px; left: 15px; }
.au-stars i:nth-child(2) { top: 19px; right: 13px; width: 3px; height: 3px; animation-delay: .8s; }
.au-stars i:nth-child(3) { bottom: 15px; right: 19px; width: 3px; height: 3px; animation-delay: 1.6s; }

@keyframes au-twinkle {
    0%, 100% { opacity: .2; scale: .6; }
    50% { opacity: 1; scale: 1.2; }
}

/* Con el correo escrito: la inicial del cliente (el icono y las estrellas se ocultan) */
.au-moment.is-on .au-moment-icon,
.au-moment.is-on .au-stars {
    display: none;
}

/* Saludo con los colores del momento del dia */
.au-greet[data-moment] {
    background: linear-gradient(90deg, var(--g1), var(--g2), var(--g1));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: au-accent 5s linear infinite;
}

.au-greet[data-moment="morning"] {
    --g1: #ea580c;
    --g2: #db2777;
}

.au-greet[data-moment="afternoon"] {
    --g1: #0284c7;
    --g2: #4f46e5;
}

.au-greet[data-moment="night"] {
    --g1: #4338ca;
    --g2: #a21caf;
}

@media (max-width: 640px) {
    .au-moment {
        width: 58px;
        height: 58px;
        margin-bottom: 12px;
        font-size: 1.3rem;
    }
}

/* ---------- Banner del cielo en "Ingresar" (2026-10-13) ----------
   Cielo segun la hora (amanecer, tarde, noche) con sol o luna, nubes, estrellas y estrella fugaz; fecha y hora
   en vivo; el sol, la luna y las nubes siguen al mouse (--px/--py); al tocarlo el sol destella o pasa una estrella. */
.au-sky {
    --px: 0;
    --py: 0;
    --sky: linear-gradient(160deg, #0f172a 0%, #312e81 55%, #6d28d9 100%);
    --sky-glow: rgba(109, 40, 217, .55);
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 122px;
    margin-bottom: 14px;
    padding: 16px 18px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--sky);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 28px -16px var(--sky-glow);
    text-align: left;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.au-sky[data-moment="morning"] {
    --sky: linear-gradient(160deg, #fde68a 0%, #fb923c 48%, #ec4899 100%);
    --sky-glow: rgba(249, 115, 22, .55);
}

.au-sky[data-moment="afternoon"] {
    --sky: linear-gradient(160deg, #7dd3fc 0%, #3b82f6 55%, #1d4ed8 100%);
    --sky-glow: rgba(37, 99, 235, .55);
}

.au-sky:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 20px 34px -16px var(--sky-glow);
    transform: translateY(-2px);
}

/* Sombra suave abajo para que el texto blanco se lea en cualquier cielo */
.au-sky::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(15, 23, 42, .32), transparent 62%);
    pointer-events: none;
}

.au-sky-text {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.au-sky-text small {
    color: rgba(255, 255, 255, .92);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}

.au-sky h1 {
    overflow: hidden;
    color: #ffffff;
    font-size: 1.62rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}

/* Sol (manana y tarde) con rayos que giran */
.au-sky-body {
    position: absolute;
    top: 18px;
    right: 26px;
    z-index: 1;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe6, #fde047 55%, #f59e0b);
    box-shadow: 0 0 0 8px rgba(253, 224, 71, .22), 0 0 44px 12px rgba(253, 224, 71, .55);
    translate: calc(var(--px) * -22px) calc(var(--py) * -12px);
    transition: translate .45s ease-out;
}

.au-sky-body::before {
    content: "";
    position: absolute;
    inset: -24px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 255, 255, .6) 0 5deg, transparent 5deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, transparent 74%);
    mask: radial-gradient(circle, transparent 54%, #000 55%, transparent 74%);
    animation: au-turn 18s linear infinite;
}

.au-sky[data-moment="afternoon"] .au-sky-body {
    top: 14px;
    width: 46px;
    height: 46px;
}

/* Luna creciente (noche) */
.au-sky[data-moment="night"] .au-sky-body {
    background: transparent;
    box-shadow: inset -13px 5px 0 0 #fef3c7;
    filter: drop-shadow(0 0 14px rgba(254, 243, 199, .65));
    rotate: -18deg;
}

.au-sky[data-moment="night"] .au-sky-body::before {
    display: none;
}

/* Al tocar: el sol destella */
.au-sky.is-burst .au-sky-body {
    animation: au-sky-burst .7s ease;
}

.au-sky[data-moment="night"].is-burst .au-sky-body {
    animation: none;
}

@keyframes au-sky-burst {
    40% { scale: 1.25; box-shadow: 0 0 0 14px rgba(253, 224, 71, .3), 0 0 70px 24px rgba(253, 224, 71, .75); }
}

/* Nubes que pasan (manana y tarde) */
.au-sky-cloud {
    position: absolute;
    left: -60px;
    z-index: 2;
    color: #ffffff;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .12));
    pointer-events: none;
    animation: au-cloud-drift linear infinite;
}

.au-sky-cloud.is-one {
    top: 6px;
    font-size: 1.8rem;
    opacity: .92;
    translate: calc(var(--px) * -34px) 0;
    animation-duration: 26s;
}

.au-sky-cloud.is-two {
    top: 26px;
    font-size: 1.2rem;
    opacity: .7;
    translate: calc(var(--px) * -18px) 0;
    animation-duration: 36s;
    animation-delay: -14s;
}

.au-sky-cloud {
    transition: translate .5s ease-out;
}

@keyframes au-cloud-drift {
    from { left: -60px; }
    to { left: 105%; }
}

.au-sky[data-moment="night"] .au-sky-cloud {
    display: none;
}

/* Estrellas y estrella fugaz (noche) */
.au-sky-stars,
.au-sky-shoot {
    display: none;
}

.au-sky[data-moment="night"] .au-sky-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    translate: calc(var(--px) * -8px) calc(var(--py) * -4px);
    transition: translate .5s ease-out;
}

.au-sky-stars i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff;
    animation: au-twinkle 2.6s ease-in-out infinite;
}

.au-sky-stars i:nth-child(1) { top: 16px; left: 22%; }
.au-sky-stars i:nth-child(2) { top: 34px; left: 48%; animation-delay: .6s; }
.au-sky-stars i:nth-child(3) { top: 12px; left: 63%; width: 2px; height: 2px; animation-delay: 1.2s; }
.au-sky-stars i:nth-child(4) { top: 58px; left: 70%; width: 2px; height: 2px; animation-delay: 1.8s; }
.au-sky-stars i:nth-child(5) { top: 26px; left: 8%; width: 2px; height: 2px; animation-delay: .9s; }
.au-sky-stars i:nth-child(6) { top: 70px; left: 40%; width: 2px; height: 2px; animation-delay: 2.1s; }

.au-sky[data-moment="night"] .au-sky-shoot {
    position: absolute;
    top: 20px;
    left: 58%;
    z-index: 1;
    display: block;
    width: 80px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ffffff, transparent);
    opacity: 0;
    rotate: -24deg;
    animation: au-sky-shoot 8s ease-in infinite 2s;
}

.au-sky[data-moment="night"].is-burst .au-sky-shoot {
    animation: au-sky-shoot-tap .9s ease-out;
}

@keyframes au-sky-shoot {
    0%, 88% { opacity: 0; translate: 0 0; }
    90% { opacity: 1; }
    100% { opacity: 0; translate: -150px 64px; }
}

@keyframes au-sky-shoot-tap {
    0% { opacity: 0; translate: 0 0; }
    15% { opacity: 1; }
    100% { opacity: 0; translate: -150px 64px; }
}

/* Inicial del cliente (con el correo escrito) */
.au-sky-avatar {
    position: relative;
    z-index: 3;
    display: none;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(var(--hue, 220) 80% 58%), hsl(calc(var(--hue, 220) + 50) 80% 52%));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .75), 0 8px 18px -6px rgba(15, 23, 42, .5);
    color: #ffffff;
    font-family: var(--au-display);
    font-size: 1.2rem;
    font-weight: 700;
}

.au-sky-avatar.is-on {
    display: grid;
    animation: au-pop .45s cubic-bezier(.2, .8, .2, 1.4);
}

@media (max-width: 640px) {
    .au-sky {
        height: 106px;
        padding: 14px 14px;
    }

    .au-sky h1 {
        font-size: 1.32rem;
    }

    .au-sky-body {
        top: 14px;
        right: 18px;
        width: 42px;
        height: 42px;
    }

    .au-sky-avatar {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }
}

/* ---------- Debajo de "Tienda virtual" (2026-10-12): titular, buscador y categorias ---------- */
.au-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.au-main::before {
    height: 780px;
}

/* En computadora la fila de confianza queda bajo la franja de color (sobre el fondo claro) */
@media (min-width: 1100px) {
    .au-trust {
        margin-top: 96px;
    }
}

/* Titular: "Aqui encuentras" en blanco y "lo que buscas" en colores que brillan */
.au .au-hero-title {
    max-width: 600px;
    margin-top: 20px;
    font-size: clamp(2.2rem, 3.7vw, 3.3rem);
    line-height: 1.08;
    text-wrap: balance;
}

.au-hero-accent {
    background: linear-gradient(90deg, #fde68a, #f9a8d4, #67e8f9, #fde68a);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: au-accent 6s linear infinite;
}

@keyframes au-accent {
    to { background-position: 300% 0; }
}

.au-hero-cats {
    margin-top: 22px;
}

@media (max-width: 1099px) {
    .au-main::before {
        height: 820px;
    }
}

@media (max-width: 640px) {
    .au-main::before {
        height: 540px;
    }

    .au .au-hero-title {
        margin-top: 16px;
        font-size: 1.85rem;
    }

}

/* La orbita reparte los iconos segun cuantas categorias haya (--n) */
.au-orbit li {
    transform: rotate(calc(var(--i) * 360deg / var(--n, 6))) translate(var(--r)) rotate(calc(var(--i) * -360deg / var(--n, 6)));
    transition: scale .3s cubic-bezier(.2, .8, .2, 1.4), box-shadow .3s ease;
}

/* Icono de la categoria que se esta mostrando: crece y brilla */
.au-orbit li.is-active {
    scale: 1.3;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 0 28px rgba(255, 255, 255, .8);
}

/* Categorias como botones (en vez de los contadores) */
.au-hero-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 600px;
    margin-top: 28px;
}

.au-body .au-hero-cats a,
.au-hero-cats span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.au-hero-cats i {
    font-size: .85rem;
}

.au-body .au-hero-cats a:hover,
.au-body .au-hero-cats .is-active {
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: 0 10px 22px -10px rgba(15, 23, 42, .55);
    color: #1e40af;
    text-decoration: none;
    transform: translateY(-2px);
}

@media (max-width: 1099px) {
    .au-main::before {
        height: 820px;
    }

    .au-card {
        margin-top: 34px;
    }
}

@media (max-width: 640px) {
    .au-main::before {
        height: 540px;
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    }

    .au-logo-stage {
        --size: 132px;
        --r: 96px;
        margin: 34px 0 52px;
    }

    .au-logo-stage::before {
        inset: -22px;
    }

    .au-orbit li {
        width: 30px;
        height: 30px;
        margin: -15px 0 0 -15px;
        font-size: .72rem;
    }

    .au-hero-kicker {
        gap: 8px;
        margin-top: 4px;
        padding: 9px 18px 9px 15px;
        font-size: .86rem;
        letter-spacing: .16em;
    }

    .au-hero-kicker .au-kicker-icon {
        font-size: .9rem;
    }

    .au-main::before {
        height: 540px;
    }

    /* En celular las categorias van en una sola fila que se desliza con el dedo */
    .au-hero-cats {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: calc(100% + 24px);
        max-width: none;
        margin: 18px -12px 0;
        padding: 4px 12px 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    }

    .au-hero-cats::-webkit-scrollbar {
        display: none;
    }

    .au-body .au-hero-cats a,
    .au-hero-cats span {
        padding: 8px 13px;
        font-size: .8rem;
    }

    .au-card {
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}