/* /Components/Account/AccountLayout.razor.rz.scp.css */
.agm-account-shell[b-47udz1w3v3] {
    /* dvh: con 100vh la tarjeta queda cortada en móvil cuando el navegador
       muestra su barra. */
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: var(--bg-base);
}

.agm-account-card[b-47udz1w3v3] {
    width: 100%;
    max-width: 440px;
}

.agm-account-brand[b-47udz1w3v3] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* El selector de tema va absoluto para que el logo quede centrado con la tarjeta
   y no desplazado por el ancho del botón. */
.agm-account-theme[b-47udz1w3v3] {
    position: absolute;
    right: 0;
    top: 0;
}

/* El ThemeToggleButton está pensado para la barra oscura, así que sus tokens --sb-* son
   ilegibles sobre el fondo claro de esta pantalla. Aquí se repinta con los generales. */
.agm-account-theme[b-47udz1w3v3]  .agm-theme-btn {
    border-color: var(--border);
    color: var(--text-muted);
}

.agm-account-theme[b-47udz1w3v3]  .agm-theme-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: var(--surface-alt);
}

.agm-account-volver[b-47udz1w3v3] {
    color: var(--text-muted);
    font-size: .85rem;
    text-decoration: none;
}

.agm-account-volver:hover[b-47udz1w3v3] {
    color: var(--gold);
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* ===========================================================
   LandingLayout — Barra superior y estructura del sitio público
   =========================================================== */
.agm-landing-root[b-ye1bbo7mfp] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-base);
    color: var(--text);
}

/* ── Barra superior ── */
.agm-landing-navbar[b-ye1bbo7mfp] {
    background: var(--sidebar);
    border-bottom: 1px solid var(--sb-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.agm-landing-navbar-inner[b-ye1bbo7mfp] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem clamp(1rem, 3vw, 2rem);
    min-height: 58px;
    gap: 1rem;
}

.agm-landing-brand[b-ye1bbo7mfp] {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
}

.agm-landing-logo[b-ye1bbo7mfp] {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 5px;
    border: 1px solid var(--sb-border);
    flex-shrink: 0;
}

.agm-landing-brand-name[b-ye1bbo7mfp] {
    color: var(--sb-text);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
}

.agm-landing-brand-name:hover[b-ye1bbo7mfp] {
    color: var(--sb-accent);
}

.agm-landing-nav-links[b-ye1bbo7mfp] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.agm-landing-nav-link[b-ye1bbo7mfp] {
    color: var(--sb-text-muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    padding: .35rem .65rem;
    border-radius: 8px;
    transition: color .15s, background .15s;
    white-space: nowrap;
}

.agm-landing-nav-link:hover[b-ye1bbo7mfp] {
    color: var(--sb-text);
    background: var(--sb-bg-hover);
}

.agm-landing-sesion[b-ye1bbo7mfp] {
    color: var(--sb-text-muted);
    font-size: .82rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* En pantallas chicas el correo se come el ancho del botón de salir. */
    .agm-landing-sesion[b-ye1bbo7mfp] {
        display: none;
    }
}

/* ── Cuerpo ── */
.agm-landing-main[b-ye1bbo7mfp] {
    flex: 1;
    min-width: 0;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .agm-landing-navbar-inner[b-ye1bbo7mfp] {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* Solo el teléfono. Al envolver, las acciones se quedaban en su propio renglón con
   cada botón del ancho de su texto: "Registrarse" salía bastante más grande que
   "Iniciar sesión" y el sobrante se acumulaba como un hueco entre ellos, así que el
   renglón se leía descuadrado. Repartido en partes iguales, los dos ocupan lo mismo
   y el renglón queda parejo de borde a borde.

   De 576px en adelante no aplica nada de esto: ahí los botones siguen midiendo lo
   que mide su texto, que es como se ven hoy en tablet y escritorio.

   El botón de tema queda fuera del reparto a propósito: es cuadrado, tiene sus
   44px táctiles y estirarlo lo deformaría. Su flex-shrink: 0 ya lo protege. */
@media (max-width: 575.98px) {
    .agm-landing-nav-links[b-ye1bbo7mfp] {
        width: 100%;
    }

    .agm-landing-nav-links .btn[b-ye1bbo7mfp],
    .agm-landing-nav-links .agm-landing-nav-link[b-ye1bbo7mfp] {
        flex: 1 1 0;
        text-align: center;

        /* El .ms-2 del botón de registrarse: sumaba medio rem al gap del contenedor
           y desalineaba el reparto. Lleva !important porque el de Bootstrap también. */
        margin-left: 0 !important;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ARMAZÓN DE LA APLICACIÓN — mobile first
   Tres escalones: teléfono (barra superior), tablet y escritorio (riel
   lateral). El orden importa: se escribe para el teléfono y se ensancha
   hacia arriba, porque casi todo el uso real es en celular o tablet.
   ═══════════════════════════════════════════════════════════ */

.page[b-wd1nxtqc7n] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;   /* dvh y no vh: en móvil la barra del navegador se
                             mete y con 100vh la página queda cortada. */
}

main[b-wd1nxtqc7n] {
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* El color del sidebar sale de los tokens --sb-* en app.css. La plantilla traía aquí un
   background-image con degradado que ganaba por especificidad a las variables de tema. */

/* ── El contenedor de lectura ──
   Antes era `.content px-4` sin ancho máximo: en un monitor ancho las pantallas
   se estiraban de borde a borde y una fila de tabla medía 1600px, que es
   ilegible —el ojo pierde el renglón al volver—. Ahora el contenido se centra
   y respira, con márgenes que crecen con la pantalla. */
.content[b-wd1nxtqc7n] {
    width: 100%;
    max-width: var(--ancho-contenido);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-top: var(--space-5);
    padding-bottom: var(--space-12);
    flex: 1;
}

/* ── Tablet ── */
@media (min-width: 768px) {
    .page[b-wd1nxtqc7n] {
        flex-direction: row;
    }

    .sidebar[b-wd1nxtqc7n] {
        width: 72px;
        flex: 0 0 72px;
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
        align-self: flex-start;
        z-index: 30;
    }

    .content[b-wd1nxtqc7n] {
        padding-inline: var(--space-6);
        padding-top: var(--space-6);
    }
}

/* ── Escritorio ── */
@media (min-width: 1024px) {
    .content[b-wd1nxtqc7n] {
        padding-inline: var(--space-8);
        padding-top: var(--space-8);
    }
}

/* ── Teléfono: el riel se vuelve una barra superior ──
   Pegajosa a propósito: el menú tiene que estar siempre a un toque, sin
   obligar a volver hasta arriba de una lista larga. */
@media (max-width: 767.98px) {
    .sidebar[b-wd1nxtqc7n] {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 1030;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.agm-sb-root[b-t70fa79sjf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.agm-sb-brand-button[b-t70fa79sjf] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--sb-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.agm-sb-brand-button:hover[b-t70fa79sjf],
.agm-sb-brand-button:focus-visible[b-t70fa79sjf] {
    background: var(--sb-bg-hover);
    outline: none;
}

.agm-sb-brand-button:focus-visible[b-t70fa79sjf] {
    box-shadow: inset 0 0 0 2px var(--sb-accent);
}

/* ── Móvil: hamburguesa y menú plegado ──
   El plegado lo gobierna la clase .agm-nav-abierta que pone el componente, no un selector de
   hermano sobre :checked: el <input type="checkbox"> de la plantilla no se reiniciaba al navegar
   y el menú se quedaba abierto encima de la pantalla nueva. */
/* 44x44 reales: es el objetivo táctil mínimo y este botón es la única forma de
   navegar en teléfono. Antes medía 3.5rem x 2.5rem (56x40). */
.navbar-toggler[b-t70fa79sjf] {
    appearance: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    position: absolute;
    top: .5rem;
    right: .75rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--radius);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 250, 240, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e") no-repeat center/1.5rem transparent;
    transition: background-color var(--dur-rapida) ease;
    z-index: 10;
}

.navbar-toggler:hover[b-t70fa79sjf] {
    background-color: var(--sb-bg-hover);
}

.navbar-toggler[aria-expanded="true"][b-t70fa79sjf] {
    background-color: var(--sb-bg-hover);
    border-color: var(--sb-accent);
}

.navbar-toggler:focus-visible[b-t70fa79sjf] {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
}

/* El plegado y su max-height van acotados a móvil a propósito. Sueltos, el max-height se aplicaría
   también en escritorio si alguien deja el menú abierto y ensancha la ventana — el riel de
   escritorio mide 100dvh y no debe heredar una altura pensada para una barra superior. */
@media (max-width: 767.98px) {
    .nav-scrollable[b-t70fa79sjf] {
        display: none;
    }

    .nav-scrollable.agm-nav-abierta[b-t70fa79sjf] {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 3.8rem);
        overflow-y: auto;
        padding-bottom: var(--space-2);
        /* Se despliega, no aparece de golpe: el movimiento explica de dónde
           sale el menú. */
        animation: agm-menu-baja-b-t70fa79sjf var(--dur-media) var(--ease-salida);
    }

    @keyframes agm-menu-baja-b-t70fa79sjf {
        from { opacity: 0; transform: translateY(-.5rem); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .nav-scrollable.agm-nav-abierta[b-t70fa79sjf] { animation: none; }
    }
}

/* ── Escritorio: el menú siempre visible, sin hamburguesa ── */
@media (min-width: 768px) {
    .navbar-toggler[b-t70fa79sjf] {
        display: none;
    }

    .nav-scrollable[b-t70fa79sjf] {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-39a4has9ne],
.components-reconnect-repeated-attempt-visible[b-39a4has9ne],
.components-reconnect-failed-visible[b-39a4has9ne],
.components-pause-visible[b-39a4has9ne],
.components-resume-failed-visible[b-39a4has9ne],
.components-rejoining-animation[b-39a4has9ne] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-39a4has9ne],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-39a4has9ne],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-39a4has9ne],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-39a4has9ne],
#components-reconnect-modal.components-reconnect-retrying[b-39a4has9ne],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-39a4has9ne],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-39a4has9ne],
#components-reconnect-modal.components-reconnect-failed[b-39a4has9ne],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-39a4has9ne] {
    display: block;
}


#components-reconnect-modal[b-39a4has9ne] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-39a4has9ne 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-39a4has9ne 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-39a4has9ne 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-39a4has9ne]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-39a4has9ne 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-39a4has9ne {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-39a4has9ne {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-39a4has9ne {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-39a4has9ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-39a4has9ne] {
    margin: 0;
    text-align: center;
}

/* El botón y la animación traían el azul del andamiaje de Blazor (#6b9ed2,
   #0087ff), que no tiene nada que ver con esta aplicación. La tanda 6 tradujo
   el texto de este modal al español pero nadie le cambió el color, así que lo
   único que la clienta ve cuando se le cae la conexión era azul en una
   aplicación dorada. */
#components-reconnect-modal button[b-39a4has9ne] {
    border: 0;
    background-color: var(--gold);
    color: var(--on-accent);
    padding: .625rem 1.5rem;
    min-height: 44px;
    border-radius: var(--radius);
    font-family: var(--font-cuerpo);
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-39a4has9ne] {
        background-color: var(--gold-hover);
    }

    #components-reconnect-modal button:active[b-39a4has9ne] {
        background-color: var(--gold);
    }

    #components-reconnect-modal button:focus-visible[b-39a4has9ne] {
        outline: 2px solid var(--gold-focus);
        outline-offset: 2px;
    }

.components-rejoining-animation[b-39a4has9ne] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-39a4has9ne] {
        position: absolute;
        border: 3px solid var(--gold);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-39a4has9ne 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-39a4has9ne] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-39a4has9ne {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===========================================================
   Landing Page — EvolutionAGM
   =========================================================== */

/* ── Hero ── */
.agm-landing-hero[b-l99i03zh1d] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem);
    align-items: center;
}

.agm-landing-eyebrow[b-l99i03zh1d] {
    display: inline-block;
    color: var(--gold);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.agm-landing-hero-body h1[b-l99i03zh1d] {
    color: var(--text);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.04em;
    margin: 0 0 .8rem;
}

.agm-landing-lead[b-l99i03zh1d] {
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.55;
    max-width: 580px;
    margin: 0 0 1.5rem;
}

.agm-landing-actions[b-l99i03zh1d] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* ── Logo del hero ── */
.agm-landing-hero-visual[b-l99i03zh1d] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: clamp(300px, 34vw, 430px);
    position: relative;
    isolation: isolate;
}

.agm-hero-logo-shell[b-l99i03zh1d] {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 460px);
    padding: clamp(.75rem, 2.5vw, 1.75rem);
}

.agm-hero-logo[b-l99i03zh1d] {
    width: auto;
    height: clamp(260px, 32vw, 410px);
    max-width: 100%;
    object-fit: contain;
    transform: rotate(-1deg);
}

/* ── Secciones ── */
.agm-landing-section[b-l99i03zh1d] {
    padding: clamp(2.5rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
    max-width: 1400px;
    margin: 0 auto;
}

.agm-landing-section.agm-landing-alt[b-l99i03zh1d] {
    background: var(--surface-alt);
    max-width: 100%;
}

.agm-landing-section-header[b-l99i03zh1d] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.agm-landing-section-header h2[b-l99i03zh1d] {
    color: var(--text);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.03em;
    margin: .25rem 0 .5rem;
}

.agm-landing-section-header p[b-l99i03zh1d] {
    font-size: 1rem;
    max-width: 520px;
    margin: 0 auto;
}

/* ── Beneficios ── */
.agm-landing-benefits[b-l99i03zh1d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.agm-landing-card[b-l99i03zh1d] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.5rem;
    transition: box-shadow .2s, border-color .2s;
}

.agm-landing-card:hover[b-l99i03zh1d] {
    box-shadow: 0 12px 36px rgba(0,0,0,.08);
    border-color: color-mix(in srgb, var(--gold) 30%, var(--border));
}

.agm-landing-card-icon[b-l99i03zh1d] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.agm-landing-card-icon.gold[b-l99i03zh1d] {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.agm-landing-card-icon.green[b-l99i03zh1d] {
    color: var(--success);
    background: var(--success-bg);
}

.agm-landing-card-icon.warm[b-l99i03zh1d] {
    color: var(--warning);
    background: var(--warning-bg);
}

.agm-landing-card-icon.info[b-l99i03zh1d] {
    color: var(--info);
    background: var(--info-bg);
}

.agm-landing-card h3[b-l99i03zh1d] {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 .35rem;
}

.agm-landing-card p[b-l99i03zh1d] {
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0;
}

/* ── Planes ── */
/* El ancho da para las tres tarjetas en una fila (3 × 280 + 2 × 20 = 880). Con el tope anterior de
   820 px la tercera se iba sola a un segundo renglón, descolgada bajo las otras dos. */
.agm-landing-planes[b-l99i03zh1d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    max-width: 1000px;
    margin: 0 auto;
}

.agm-plan[b-l99i03zh1d] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.agm-plan-destacado[b-l99i03zh1d] {
    border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
}

.agm-plan-etiqueta[b-l99i03zh1d] {
    position: absolute;
    top: -.7rem;
    right: 1.25rem;
    background: var(--gold);
    color: var(--on-accent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border-radius: 999px;
}

.agm-plan-precio[b-l99i03zh1d] {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: .5rem 0 1rem;
    /* Con la nota del auto-entreno la línea va casi al ras del ancho de la tarjeta. Si alguna vez
       deja de caber —un precio de cuatro cifras—, que la nota baje entera en vez de que se parta
       la unidad a media palabra. */
    flex-wrap: wrap;
}

.agm-plan-precio strong[b-l99i03zh1d] {
    color: var(--gold);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.agm-plan-precio span[b-l99i03zh1d] {
    color: var(--text-muted);
    font-size: .85rem;
}

/* La aclaración del bloque de cuatro semanas del auto-entreno, en la misma línea del precio y
   detrás de la unidad. Lleva .agm-plan-precio delante a propósito: `.agm-plan-precio span` le gana
   por especificidad a una clase sola y le impondría su tamaño. nowrap para que no se parta en
   "mín. 4 / semanas" cuando la línea va justa. */
.agm-plan-precio .agm-plan-precio-nota[b-l99i03zh1d] {
    font-size: .75rem;
    white-space: nowrap;
}

.agm-plan-lista[b-l99i03zh1d] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.agm-plan-lista li[b-l99i03zh1d] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.45;
}

.agm-plan-lista li > i[b-l99i03zh1d] {
    color: var(--success);
    font-size: 1rem;
    line-height: 1.35;
    flex-shrink: 0;
}

/* ── Módulos ── */
/* Seis módulos, y el ancho es lo que decide si la rejilla queda pareja. A 1400px cabían cuatro
   por fila, así que la segunda fila eran dos tarjetas arrimadas a la izquierda con medio renglón
   vacío al lado. Con 1000px —el mismo ancho de la sección de planes, que además las alinea
   verticalmente— entran tres y quedan 3 + 3. El auto-fit se queda: al angostarse la ventana baja a
   dos y luego a una, y seis se parte en filas iguales con cualquiera de esos tres números. Si algún
   día se agrega un séptimo módulo, esta cuenta hay que rehacerla. */
.agm-landing-modules[b-l99i03zh1d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.agm-module-item[b-l99i03zh1d] {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.agm-module-item > i[b-l99i03zh1d] {
    color: var(--gold);
    font-size: 1.2rem;
    margin-top: .1rem;
    flex-shrink: 0;
}

.agm-module-item strong[b-l99i03zh1d] {
    display: block;
    color: var(--text);
    font-size: .92rem;
    font-weight: 700;
}

.agm-module-item span[b-l99i03zh1d] {
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.4;
}

/* ── Proceso ── */
.agm-landing-process[b-l99i03zh1d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.agm-process-step[b-l99i03zh1d] {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.agm-process-num[b-l99i03zh1d] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: var(--on-accent);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 auto .85rem;
}

.agm-process-step h4[b-l99i03zh1d] {
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .3rem;
}

.agm-process-step p[b-l99i03zh1d] {
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.45;
    margin: 0;
}

/* ── CTA ── */
.agm-landing-cta[b-l99i03zh1d] {
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2rem);
    text-align: center;
}

.agm-landing-cta-body[b-l99i03zh1d] {
    max-width: 600px;
    margin: 0 auto;
}

.agm-landing-cta h2[b-l99i03zh1d] {
    color: var(--text);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0 0 .5rem;
}

.agm-landing-cta p[b-l99i03zh1d] {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
}

/* ── Footer ── */
.agm-landing-footer[b-l99i03zh1d] {
    border-top: 1px solid var(--border);
    padding: 1.25rem clamp(1rem, 3vw, 2rem);
}

.agm-landing-footer-inner[b-l99i03zh1d] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.agm-landing-footer-brand[b-l99i03zh1d] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.footer-dev-strip[b-l99i03zh1d] {
    background: transparent;
    margin: 1.4rem 0 0;
    padding: .9rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-dev-by[b-l99i03zh1d] {
    font-family: var(--font-titulo);
    font-size: 12px;
    color: var(--text-muted);
}

.footer-dev-logo[b-l99i03zh1d] {
    align-items: center;
    gap: 0;
    text-decoration: none;
    opacity: .8;
    transition: opacity .2s;
}

.footer-dev-logo:hover[b-l99i03zh1d] {
    opacity: 1;
}

/* Solo se muestra la variante que corresponde al tema activo del sitio */
.footer-dev-logo-dark[b-l99i03zh1d] {
    display: none;
}

.footer-dev-logo-light[b-l99i03zh1d] {
    display: none;
}

html[data-theme="dark"] .footer-dev-logo-dark[b-l99i03zh1d] {
    display: flex;
}

html[data-theme="light"] .footer-dev-logo-light[b-l99i03zh1d] {
    display: flex;
}

.footer-dev-master[b-l99i03zh1d] {
    font-family: var(--font-titulo);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.8px;
    line-height: 1;
    user-select: none;
}

.footer-dev-dev[b-l99i03zh1d] {
    font-family: var(--font-cifra);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    user-select: none;
}

.footer-dev-logo-dark .footer-dev-master[b-l99i03zh1d] {
    color: #FFFFFF;
}

.footer-dev-logo-dark .footer-dev-dev[b-l99i03zh1d] {
    color: #FFFFFF;
}

.footer-dev-logo-light .footer-dev-master[b-l99i03zh1d] {
    color: #0C1524;
}

.footer-dev-logo-light .footer-dev-dev[b-l99i03zh1d] {
    color: #1B8EB7;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .agm-landing-hero[b-l99i03zh1d] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .agm-landing-lead[b-l99i03zh1d] {
        max-width: 100%;
    }

    .agm-landing-actions[b-l99i03zh1d] {
        justify-content: center;
    }

    .agm-landing-hero-visual[b-l99i03zh1d] {
        min-height: 260px;
        margin-top: .5rem;
    }

    .agm-hero-logo-shell[b-l99i03zh1d] {
        width: min(86vw, 320px);
        padding: .75rem;
    }

    .agm-hero-logo[b-l99i03zh1d] {
        height: clamp(220px, 68vw, 300px);
    }

    .agm-landing-footer-inner[b-l99i03zh1d] {
        justify-content: center;
        text-align: center;
    }
}
/* /Components/Shared/ThemeToggleButton.razor.rz.scp.css */
/* Qué icono y qué rótulo se ven lo decide esta hoja a partir de data-theme, no C#.

   Antes lo pintaba el componente desde el servidor, que no sabe qué tema tiene esta
   persona: el botón nacía asumiendo oscuro y solo se corregía cuando el circuito
   enganchaba, así que quien usa tema claro veía el icono equivocado un instante. Ya
   no hay circuito que lo corrija —ni hace falta— porque el script anti-destello de
   App.razor deja data-theme puesto antes del primer pintado.

   Es el mismo mecanismo de .agm-logo-dark/.agm-logo-light en app.css, y como aquel
   oculta con display:none y no con visibility: así el rótulo escondido sale también
   del árbol de accesibilidad y el nombre del botón es siempre uno solo, sin necesidad
   de que nadie toque aria-label desde JavaScript.

   Los rótulos llevan además .visually-hidden de Bootstrap, que los posiciona en
   absoluto: por eso no ocupan celda en el `display: grid` de abajo y el icono se
   queda centrado él solo. */
.agm-tema-light[b-p6emtdcxuf] { display: none; }
.agm-tema-dark[b-p6emtdcxuf] { display: inline-block; }

html[data-theme="light"] .agm-tema-dark[b-p6emtdcxuf] { display: none; }
html[data-theme="light"] .agm-tema-light[b-p6emtdcxuf] { display: inline-block; }

html[data-theme="dark"] .agm-tema-dark[b-p6emtdcxuf] { display: inline-block; }
html[data-theme="dark"] .agm-tema-light[b-p6emtdcxuf] { display: none; }

/* Vive sobre la barra superior, que es grafito/negra en ambos temas: por eso usa los
   tokens --sb-* y no los generales. */
/* 44x44 en táctil y 34 con ratón. Medía 34 en todas partes, por debajo del
   objetivo táctil mínimo, y es un botón que se pulsa con el pulgar tanto en la
   barra superior como en las pantallas de cuenta. */
.agm-theme-btn[b-p6emtdcxuf] {
    background: transparent;
    border: 1px solid var(--sb-border);
    color: var(--sb-text-muted);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1rem;
    transition: color var(--dur-rapida), background var(--dur-rapida), border-color var(--dur-rapida);
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .agm-theme-btn[b-p6emtdcxuf] {
        width: 34px;
        height: 34px;
    }
}

.agm-theme-btn:hover[b-p6emtdcxuf] {
    color: var(--sb-accent);
    border-color: var(--sb-accent);
    background: var(--sb-bg-hover);
}

.agm-theme-btn:focus-visible[b-p6emtdcxuf] {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
}