/* /Components/Layout/FooterComponent.razor.rz.scp.css */
.site-footer[b-2lfexzf7d4] {
    background-color: var(--surface-footer);
    color: var(--tuio-gray-500, #878787);
    padding: var(--space-2xl) var(--space-lg);
}

/* Centra el contenido y le pone tope de ancho en lugar del padding fijo de 349px */
.footer-inner[b-2lfexzf7d4] {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.footer-columns[b-2lfexzf7d4] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.column[b-2lfexzf7d4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.column--brand[b-2lfexzf7d4] {
    flex: 1 1 300px;
    max-width: 340px;
}

/* Titulos naranjas de columna */
.column-title[b-2lfexzf7d4] {
    color: var(--text-accent);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin: 0;
}

.brand-text[b-2lfexzf7d4] {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    margin: 0;
}

/* Lista de links de Compañía: sin viñetas ni margen del navegador */
.link-list[b-2lfexzf7d4] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-link[b-2lfexzf7d4] {
    color: var(--tuio-purple);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-decoration: none;
}

    .footer-link:hover[b-2lfexzf7d4] {
        text-decoration: underline;
    }

/* Bloques de contacto */
.column--contact[b-2lfexzf7d4] {
    gap: var(--space-lg);
}

.contact-block[b-2lfexzf7d4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label[b-2lfexzf7d4] {
    color: var(--tuio-gray-900, #353535);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    margin: 0;
}

.contact-heading[b-2lfexzf7d4] {
    color: var(--tuio-gray-900, #353535);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    margin: 0;
}

.contact-phone[b-2lfexzf7d4] {
    color: var(--tuio-gray-900, #353535);
    font-size: 20px;
    font-weight: var(--fw-regular);
    text-decoration: none;
}
/* Columna social + logo */
.column--social[b-2lfexzf7d4] {
    align-items: flex-end;
    justify-content: space-between;
}

.social-icons[b-2lfexzf7d4] {
    display: flex;
    gap: var(--space-xs);
}

    .social-icons img[b-2lfexzf7d4] {
        width: 24px;
        height: 24px;
        display: block;
    }

.footer-logo[b-2lfexzf7d4] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.tagline[b-2lfexzf7d4] {
    color: var(--tuio-gray-500, #878787);
    font-size: 18px;
    font-weight: var(--fw-regular);
    margin: 0;
}

.footer-divider[b-2lfexzf7d4] {
    border: none;
    border-top: 1px solid var(--tuio-gray-500, #878787);
    margin: 0;
    width: 100%;
}

.copyright[b-2lfexzf7d4] {
    color: var(--tuio-gray-500, #878787);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-align: center;
    margin: 0;
}

/* En pantallas chicas las columnas se apilan */
@media (max-width: 768px) {
    .footer-columns[b-2lfexzf7d4] {
        flex-direction: column;
    }

    .column--social[b-2lfexzf7d4] {
        align-items: flex-start;
    }

    .footer-logo[b-2lfexzf7d4] {
        align-items: flex-start;
    }
}
/* /Components/Layout/HeaderComponent.razor.rz.scp.css */
/* CSS for HeaderComponent component */

.site-header[b-an8wllkj7t] {
    background-color: var(--surface-page);
    border-bottom: 1px solid var(--border-subtle);
    height: var(--header-height);
    position: sticky; /* el header se queda arriba al hacer scroll */
    top: 0;
    z-index: 100;
}

/* Centra el contenido y le pone tope de ancho, igual que el footer */
.header-inner[b-an8wllkj7t] {
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

/* ---------- Logo ---------- */
.brand[b-an8wllkj7t] {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* el logo no se encoge cuando falta espacio */
    text-decoration: none;
}

    .brand img[b-an8wllkj7t] {
        height: 32px;
        display: block;
    }

/* ---------- Navegación central ---------- */
.nav-links[b-an8wllkj7t] {
    display: flex;
    align-items: center;
    color: #fe572a;
    gap: var(--space-lg);
}

.nav-link[b-an8wllkj7t] {
    color: var(--text-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-decoration: none;
    padding: var(--space-xs) 0;
    position: relative;
    transition: color 0.15s ease;
}

    .nav-link:hover[b-an8wllkj7t]::after {
        width: 100%;
    }

    .nav-link:hover[b-an8wllkj7t] {
        color: var(--text-accent);
    }

    /* Estado activo: NavLink agrega la clase .active solo.
   El subrayado naranja del diseño se dibuja con un borde inferior. */
    .nav-link.active[b-an8wllkj7t] {
        color: var(--text-accent);
        font-weight: var(--fw-bold);
    }
        .nav-link.active[b-an8wllkj7t]::after {
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
        }
    .nav-link[b-an8wllkj7t]::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 0%;
        height: 2px;
        background-color: var(--text-accent);
        transition: all 0.25s ease;
        transform: translateX(-50%);
    }

/* ---------- Botón CTA ---------- */
.cta-button[b-an8wllkj7t] {
    flex-shrink: 0;
    background-color: var(--tuio-orange);
    color: var(--text-on-dark);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: 16px;
    
    transition: background-color 0.15s ease;
    white-space: nowrap; /* el texto del botón no se parte en dos líneas */
}

    .cta-button:hover[b-an8wllkj7t] {
        background-color: var(--tuio-orange-hover);
    }

/* ---------- Interruptor del menu movil ----------
   En desktop van con display:none, no con opacity/visibility: asi el
   checkbox queda fuera del orden de tabulacion y del arbol de
   accesibilidad, no solo fuera de la vista. */
.nav-toggle[b-an8wllkj7t],
.nav-toggle-btn[b-an8wllkj7t],
.nav-scrim[b-an8wllkj7t] {
    display: none;
}

.nav-links[b-an8wllkj7t]  .nav-link {
    color: var(--text-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-decoration: none;
    padding: var(--space-xs) 0;
    position: relative;
    transition: color 0.15s ease;
}

    .nav-links[b-an8wllkj7t]  .nav-link:hover {
        color: var(--text-accent);
    }

        .nav-links[b-an8wllkj7t]  .nav-link:hover::after {
            width: 100%;
        }

    .nav-links[b-an8wllkj7t]  .nav-link.active {
        color: var(--text-accent);
        font-weight: var(--fw-bold);
    }

    .nav-links[b-an8wllkj7t]  .nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 0%;
        height: 2px;
        background-color: var(--text-accent);
        transition: all 0.25s ease;
        transform: translateX(-50%);
    }

    .nav-links[b-an8wllkj7t]  .nav-link.active::after {
        width: 100%;
    }

/* ================= Responsive =================
   El desktop es todo lo de arriba y no se toca: este bloque solo entra
   por debajo de 860px. Va al final del archivo a proposito, porque
   necesita ganarle por orden de fuente a las reglas `::deep` de arriba
   (misma especificidad). */
@media (max-width: 860px) {

    /* La nav sale del flujo, asi que la barra queda con logo + CTA +
       hamburguesa. `margin-right:auto` en el logo los agrupa a la
       derecha; con space-between el CTA quedaria suelto en el centro. */
    .header-inner[b-an8wllkj7t] {
        justify-content: flex-start;
        padding: 0 var(--space-md);
        gap: var(--space-sm);
    }

    .brand[b-an8wllkj7t] {
        margin-right: auto;
    }

    /* Sigue existiendo para recibir foco de teclado; lo que se ve es el
       label. El anillo de foco se pinta sobre la hamburguesa. */
    .nav-toggle[b-an8wllkj7t] {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .nav-toggle-btn[b-an8wllkj7t] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px; /* objetivo tactil minimo recomendado */
        height: 44px;
        padding: 11px 8px;
        box-sizing: border-box;
        flex-shrink: 0;
        cursor: pointer;
    }

        .nav-toggle-btn span[b-an8wllkj7t] {
            display: block;
            width: 100%;
            height: 2px;
            border-radius: 2px;
            background-color: var(--tuio-orange);
            transition: transform 0.25s ease, opacity 0.2s ease;
        }

    /* Abierto: las tres barras se cruzan en X. */
    .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1)[b-an8wllkj7t] {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2)[b-an8wllkj7t] {
        opacity: 0;
    }

    .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3)[b-an8wllkj7t] {
        transform: translateY(-7px) rotate(-45deg);
    }

    .nav-toggle:focus-visible ~ .nav-toggle-btn[b-an8wllkj7t] {
        outline: 2px solid var(--tuio-orange);
        outline-offset: 2px;
        border-radius: 6px;
    }

    /* El panel cuelga del borde inferior del header y va a todo el ancho.
       Se posiciona contra .site-header, que ya es sticky (= posicionado),
       y no contra .header-inner, que esta limitado por container-max. */
    .nav-links[b-an8wllkj7t] {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--space-xs) var(--space-md) var(--space-md);
        background-color: var(--surface-page);
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }

    .nav-toggle:checked ~ .nav-links[b-an8wllkj7t] {
        display: flex;
    }

    /* Atenua la pagina bajo el menu abierto y da el area de "tocar
       fuera para cerrar". Fija al viewport, arrancando justo debajo
       del header (que esta sticky, asi que siempre queda arriba). */
    .nav-toggle:checked ~ .nav-scrim[b-an8wllkj7t] {
        display: block;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(16, 16, 14, 0.35);
    }

    /* `align-items: flex-start` deja cada enlace del ancho de su texto,
       asi el subrayado naranja (que va centrado) sigue calzando con la
       palabra en vez de cruzar toda la fila. El padding sube para que
       cada enlace llegue a ~44px de alto. */
    .nav-links[b-an8wllkj7t]  .nav-link {
        padding: var(--space-sm) 0;
    }
}

/* Telefonos angostos: el CTA y el logo ceden un poco para que la barra
   siga entrando en una sola linea. */
@media (max-width: 420px) {
    .brand img[b-an8wllkj7t] {
        height: 28px;
    }

    .cta-button[b-an8wllkj7t] {
        font-size: var(--fs-small);
        padding: var(--space-xs) var(--space-sm);
    }
}

/* Los tres elementos de la barra son flex-shrink:0 (el logo no se deforma
   y el CTA no parte su texto en dos lineas), asi que en los telefonos mas
   angostos el aire lateral es lo unico que puede ceder. */
@media (max-width: 360px) {
    .header-inner[b-an8wllkj7t] {
        padding: 0 var(--space-sm);
        gap: var(--space-xs);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-pz7e1umgaz] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-pz7e1umgaz] {
    flex: 1;
}

.sidebar[b-pz7e1umgaz] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-pz7e1umgaz] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-pz7e1umgaz]  a, .top-row[b-pz7e1umgaz]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-pz7e1umgaz]  a:hover, .top-row[b-pz7e1umgaz]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-pz7e1umgaz]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-pz7e1umgaz] {
        justify-content: space-between;
    }

    .top-row[b-pz7e1umgaz]  a, .top-row[b-pz7e1umgaz]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-pz7e1umgaz] {
        flex-direction: row;
    }

    .sidebar[b-pz7e1umgaz] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-pz7e1umgaz] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-pz7e1umgaz]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-pz7e1umgaz], article[b-pz7e1umgaz] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-pz7e1umgaz] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-pz7e1umgaz] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-v4p9ytmsll] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-v4p9ytmsll] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-v4p9ytmsll] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-v4p9ytmsll] {
    font-size: 1.1rem;
}

.bi[b-v4p9ytmsll] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-v4p9ytmsll] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-v4p9ytmsll] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-v4p9ytmsll] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-v4p9ytmsll] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-v4p9ytmsll] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-v4p9ytmsll] {
        padding-bottom: 1rem;
    }

    .nav-item[b-v4p9ytmsll]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-v4p9ytmsll]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-v4p9ytmsll]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-v4p9ytmsll] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-v4p9ytmsll] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-v4p9ytmsll] {
        display: none;
    }

    .nav-scrollable[b-v4p9ytmsll] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5nwxd74q8b],
.components-reconnect-repeated-attempt-visible[b-5nwxd74q8b],
.components-reconnect-failed-visible[b-5nwxd74q8b],
.components-pause-visible[b-5nwxd74q8b],
.components-resume-failed-visible[b-5nwxd74q8b],
.components-rejoining-animation[b-5nwxd74q8b] {
    display: none;
}

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


#components-reconnect-modal[b-5nwxd74q8b] {
    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-5nwxd74q8b 0.5s both;
    &[open]

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

}

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-5nwxd74q8b {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-5nwxd74q8b] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-5nwxd74q8b] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-5nwxd74q8b] {
        background-color: #6b9ed2;
    }

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

    .components-rejoining-animation div[b-5nwxd74q8b] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5nwxd74q8b 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-5nwxd74q8b {
    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/Contacto.razor.rz.scp.css */
.contact[b-3gsy982vl8] {
    background-color: var(--tuio-purple);
    padding: var(--space-2xl) var(--space-lg);
    display: flex;
    justify-content: center;
}

.contact-card[b-3gsy982vl8] {
    background-color: var(--tuio-white);
    border-radius: var(--radius-lg);
    max-width: var(--container-max);
    width: 100%;
    padding: var(--space-2xl);
    display: flex;
    gap: 45px;
}

.contact-intro[b-3gsy982vl8] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-intro h1[b-3gsy982vl8] {
    color: var(--text-accent);
    font-size: 40px;
    font-weight: var(--fw-bold);
    margin: 0;
}

.contact-intro hr[b-3gsy982vl8] {
    width: 100%;
    border: none;
    border-top: 1px solid var(--tuio-gray-500, #878787);
    margin: 0;
}

.contact-intro p[b-3gsy982vl8] {
    color: var(--tuio-black);
    font-size: var(--fs-body);
    line-height: 1.5;
    margin: 0;
}

.contact-intro p strong[b-3gsy982vl8] {
    font-weight: var(--fw-bold);
}

/* ---------- Responsive ----------
   Enfoque desktop-first: el bloque de arriba define el desktop y no se toca.
   Todo lo de abajo solo entra por debajo de 1024px. */

/* Tablet / laptop chico: la tarjeta ya no puede sostener 96px de padding. */
@media (max-width: 1024px) {
    .contact[b-3gsy982vl8] {
        padding: var(--space-xl) var(--space-md);
    }

    .contact-card[b-3gsy982vl8] {
        padding: var(--space-xl);
        gap: var(--space-lg);
    }
}

/* Se apila: intro arriba, formulario abajo. */
@media (max-width: 900px) {
    .contact-card[b-3gsy982vl8] {
        flex-direction: column;
    }

    /* Al apilar, el eje principal pasa a ser vertical y `flex: 1 1 0`
       repartiria ALTURA entre intro y formulario. Los devolvemos a su
       tamano de contenido y liberamos el ancho del formulario. */
    .contact-intro[b-3gsy982vl8] {
        flex: 0 0 auto;
    }

    .contact-card[b-3gsy982vl8]  .contact-form-wrap {
        flex: 0 0 auto;
        max-width: none;
    }

    .contact-intro h1[b-3gsy982vl8] {
        font-size: 34px;
    }
}

/* Movil. */
@media (max-width: 600px) {
    .contact[b-3gsy982vl8] {
        padding: var(--space-lg) var(--space-sm);
    }

    .contact-card[b-3gsy982vl8] {
        padding: var(--space-lg) var(--space-md);
        border-radius: var(--radius-md);
        gap: var(--space-md);
    }

    .contact-intro h1[b-3gsy982vl8] {
        font-size: 28px;
    }
}
/* /Components/Pages/Licencia.razor.rz.scp.css */
/* ============================================================
   Licencia.razor.css
   ============================================================ */

.license-hero[b-vi8wxefemn] {
    background-color: var(--tuio-orange);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

    .license-hero h1[b-vi8wxefemn] {
        color: var(--text-on-dark);
        font-size: var(--fs-h1);
        font-weight: var(--fw-bold);
        margin: 0 0 var(--space-lg) 0;
    }

.loading[b-vi8wxefemn] {
    color: var(--text-on-dark);
}

/* ---------- Toggle Mensual / Anual ---------- */
.billing-toggle[b-vi8wxefemn] {
    display: inline-flex;
    background-color: var(--tuio-white);
    border-radius: var(--radius-pill);
    padding: 4px;
    margin-bottom: var(--space-xl);
    gap: 4px;
}

.toggle-option[b-vi8wxefemn] {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .toggle-option.active[b-vi8wxefemn] {
        background-color: var(--tuio-orange);
        color: var(--text-on-dark);
        font-weight: var(--fw-bold);
    }

/* ---------- Grilla ---------- */
.plan-grid[b-vi8wxefemn] {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-lg);
}

/* ---------- Tarjeta ---------- */
.plan-card[b-vi8wxefemn] {
    flex: 1 1 0;
    max-width: 360px;
    background: var(--gradient-plan-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
}

    .plan-card.highlighted[b-vi8wxefemn] {
        transform: scale(1.05);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
        z-index: 1;
    }

    .plan-card h3[b-vi8wxefemn] {
        color: var(--text-primary);
        font-size: var(--fs-h3);
        font-weight: var(--fw-bold);
        margin: 0;
    }

/* ---------- Precio con animación ---------- */
.price[b-vi8wxefemn] {
    color: var(--text-primary);
    font-size: 48px;
    font-weight: var(--fw-bold);
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.currency[b-vi8wxefemn] {
    font-size: 28px;
    font-weight: var(--fw-medium);
}

.amount[b-vi8wxefemn] {
    display: inline-block;
    animation: price-fade-b-vi8wxefemn 0.28s ease;
}

@keyframes price-fade-b-vi8wxefemn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.period[b-vi8wxefemn] {
    color: var(--tuio-gray-600);
    font-size: var(--fs-small);
}

/* ---------- Botón ---------- */
.buy-button[b-vi8wxefemn] {
    width: 100%;
    background-color: var(--tuio-orange);
    color: var(--text-on-dark);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    border: none;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-pill);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .buy-button:hover[b-vi8wxefemn] {
        background-color: var(--tuio-orange-hover);
    }

.plan-desc[b-vi8wxefemn] {
    color: var(--tuio-gray-600);
    font-size: var(--fs-small);
    margin: 0;
}

/* ---------- Características ---------- */
.plan-features[b-vi8wxefemn] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex-grow: 1;
}

    .plan-features li[b-vi8wxefemn] {
        color: var(--text-primary);
        font-size: var(--fs-body);
        padding-left: 20px;
        position: relative;
    }

        .plan-features li[b-vi8wxefemn]::before {
            content: "\2022";
            position: absolute;
            left: 4px;
            color: var(--text-primary);
        }

        .plan-features li.inherited[b-vi8wxefemn] {
            font-weight: var(--fw-bold);
        }

/* ---------- Nota al pie ---------- */
.addon-note[b-vi8wxefemn] {
    color: var(--tuio-gray-600);
    font-size: var(--fs-small);
    margin: 0;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
    width: 100%;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .plan-grid[b-vi8wxefemn] {
        flex-direction: column;
        align-items: center;
    }

    .plan-card[b-vi8wxefemn] {
        width: 100%;
        max-width: 400px;
    }

        .plan-card.highlighted[b-vi8wxefemn] {
            transform: none;
        }
}
/* ============================================================
   Agregar al final de Licencia.razor.css
   ============================================================ */

.hardware-section[b-vi8wxefemn] {
    background-color: var(--surface-page);
    padding: var(--space-2xl) var(--space-lg);
}

.hardware-header[b-vi8wxefemn] {
    text-align: center;
    margin-bottom: var(--space-xl);
}

    .hardware-header h2[b-vi8wxefemn] {
        color: var(--text-primary);
        font-size: var(--fs-h1);
        font-weight: var(--fw-bold);
        margin: 0 0 var(--space-xs) 0;
    }

    .hardware-header p[b-vi8wxefemn] {
        color: var(--text-primary);
        font-size: 20px;
        font-weight: var(--fw-regular);
        margin: 0;
    }

.hardware-grid[b-vi8wxefemn] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

/* Tarjeta con borde naranja punteado */
.hardware-card[b-vi8wxefemn] {
    flex: 1 1 360px;
    max-width: 386px;
    background-color: var(--tuio-white);
    border: 2px dashed var(--tuio-orange);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hardware-image[b-vi8wxefemn] {
    width: 100%;
    aspect-ratio: 386 / 312;
    background-color: var(--tuio-orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hardware-image img[b-vi8wxefemn] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.hardware-body[b-vi8wxefemn] {
    padding: var(--space-md) var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

    .hardware-body h3[b-vi8wxefemn] {
        color: var(--text-accent);
        font-size: 28px;
        font-weight: var(--fw-bold);
        margin: 0;
    }

    .hardware-body hr[b-vi8wxefemn] {
        width: 100%;
        border: none;
        border-top: 1.5px solid var(--tuio-orange);
        margin: 0;
    }

    .hardware-body p[b-vi8wxefemn] {
        color: var(--tuio-gray-600);
        font-size: var(--fs-body);
        font-weight: var(--fw-regular);
        text-align: left;
        margin: 0;
    }

@media (max-width: 800px) {
    .hardware-grid[b-vi8wxefemn] {
        flex-direction: column;
        align-items: center;
    }
}
.license-copy[b-vi8wxefemn] {
    max-width: 1000px;
    margin: var(--space-xl) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

    .license-copy p[b-vi8wxefemn] {
        color: var(--text-on-dark);
        font-size: 20px;
        font-weight: var(--fw-regular);
        line-height: 1.5;
        margin: 0;
    }

.license-copy-lead[b-vi8wxefemn] {
    text-align: center;
    font-weight: var(--fw-bold) !important;
}
/* /Components/Pages/Servicios.razor.rz.scp.css */
/* ---------- Hero ---------- */
.services-hero[b-1frmakt1gm] {
    background-color: var(--surface-page);
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
}

.services-hero-inner[b-1frmakt1gm] {
    max-width: var(--container-max);
    margin: 0 auto;
}

.services-hero h1[b-1frmakt1gm] {
    color: var(--text-accent);
    font-size: 80px;
    font-weight: var(--fw-medium);
    line-height: 1;
    margin: 0 0 var(--space-md) 0;
    max-width: 660px;
}

    .services-hero h1 strong[b-1frmakt1gm] {
        font-weight: 800;
    }

.services-hero p[b-1frmakt1gm] {
    color: var(--tuio-gray-900);
    font-size: 24px;
    margin: 0;
    max-width: 660px;
}

/* ---------- Tabs (índice de features) ---------- */
.services-tabs[b-1frmakt1gm] {
    background-color: var(--surface-page);
    padding: 0 var(--space-lg) var(--space-2xl);
}

.services-tabs-inner[b-1frmakt1gm] {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap; /* las 6 en una sola fila */
}

.service-tab[b-1frmakt1gm] {
    flex: 1 1 0; /* reparten el ancho por igual */
    color: var(--tuio-gray-900);
    font-size: 20px;
    font-weight: var(--fw-regular);
    text-decoration: none;
    text-align: center;
    padding: var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--tuio-gray-400);
    transition: color 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2; /* multilínea prolija cuando el texto es largo */
}

    .service-tab:hover[b-1frmakt1gm] {
        color: var(--text-accent);
        font-weight: var(--fw-bold);
        border-bottom-color: var(--tuio-orange);
    }

/* ---------- Lista de features ---------- */
.services-list[b-1frmakt1gm] {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg) var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Tarjeta peach de cada feature */
.service-row[b-1frmakt1gm] {
    background-color: var(--tuio-peach);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    /* offset para que el ancla no quede tapada por el header sticky */
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

    /* Alterna el orden de imagen y texto */
    .service-row.img-right[b-1frmakt1gm] {
        flex-direction: row-reverse;
    }

.service-visual[b-1frmakt1gm] {
    flex: 0 0 600px;
    max-width: 600px;
}

    .service-visual img[b-1frmakt1gm] {
        width: 100%;
        height: auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
        border-radius: var(--radius-sm);
        display: block;
    }

.service-text[b-1frmakt1gm] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

    .service-text h2[b-1frmakt1gm] {
        color: var(--tuio-black);
        font-size: 40px;
        font-weight: var(--fw-bold);
        margin: 0;
    }

.service-tagline[b-1frmakt1gm] {
    color: var(--tuio-black);
    font-size: 24px;
    margin: 0;
}

.service-bullets[b-1frmakt1gm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

    .service-bullets li[b-1frmakt1gm] {
        color: var(--tuio-black);
        font-size: 24px;
        padding-left: 24px;
        position: relative;
    }

        .service-bullets li[b-1frmakt1gm]::before {
            content: "\2022";
            position: absolute;
            left: 6px;
            color: var(--text-accent);
        }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .services-hero h1[b-1frmakt1gm] {
        font-size: 44px;
    }

    .service-row[b-1frmakt1gm],
    .service-row.img-right[b-1frmakt1gm] {
        flex-direction: column;
    }

    .service-visual[b-1frmakt1gm] {
        flex-basis: auto;
        width: 100%;
    }
    .services-tabs-inner[b-1frmakt1gm] {
        flex-wrap: wrap;
    }

    .service-tab[b-1frmakt1gm] {
        flex: 1 1 40%;
    }
}
/* /Components/Pages/SobreNosotros.razor.rz.scp.css */
/* ---------- Bloque superior: ilustración + intro ---------- */
.about-inner[b-36jew4djz4] {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xl);
}

.about-hero[b-36jew4djz4] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.about-illustration[b-36jew4djz4] {
    width: 100%;
    max-width: 1063px;
    height: auto;
    display: block;
}

.about-intro[b-36jew4djz4] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

    .about-intro h1[b-36jew4djz4] {
        color: var(--text-accent);
        font-size: 40px;
        font-weight: var(--fw-bold);
        margin: 0;
    }

    .about-intro p[b-36jew4djz4] {
        color: var(--tuio-gray-600);
        font-size: 20px;
        line-height: 1.5;
        margin: 0;
    }

        .about-intro p strong[b-36jew4djz4] {
            font-weight: var(--fw-bold);
        }

/* ---------- Banda del fundador ----------
   Clave del sangrado: la banda mide 430px, la foto 640px.
   La foto (anclada abajo) sobresale 210px por arriba = sangra.
   La banda NO recorta (sin overflow) y su altura la fija el
   contenido del texto, NO la foto (que es absolute). */
.founder[b-36jew4djz4] {
    background-color: var(--tuio-coral);
    position: relative;
}

.founder-inner[b-36jew4djz4] {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    position: relative;
    display: flex;
    align-items: center;
}

.founder-text[b-36jew4djz4] {
    /* el texto ocupa a lo sumo el 55% para dejar lugar a la foto */
    flex: 0 1 560px;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.founder-name[b-36jew4djz4] {
    color: #EFEFF6;
    font-size: 20px;
    margin: 0;
}

    .founder-name strong[b-36jew4djz4] {
        font-weight: var(--fw-bold);
    }

.founder-text h2[b-36jew4djz4] {
    color: #EFEFF6;
    font-size: 40px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    margin: 0;
}

    .founder-text h2 strong[b-36jew4djz4] {
        font-weight: 900;
    }

.founder-quote[b-36jew4djz4] {
    color: var(--tuio-peach);
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
}

    .founder-quote strong[b-36jew4djz4] {
        font-weight: var(--fw-bold);
    }

/* La foto: absolute, anclada al fondo de la banda.
   height fija mayor que la banda -> asoma por arriba. */
.founder-photo[b-36jew4djz4] {
    position: absolute;
    right: var(--space-lg);
    bottom: 0;
    z-index: 2;
    /* la foto es más alta que la banda; esta altura la hace sobresalir */
    height: 640px;
    max-height: 115%;
}

    .founder-photo img[b-36jew4djz4] {
        display: block;
        height: 100%;
        width: auto;
        vertical-align: bottom;
    }

/* ---------- Responsive ----------
   Enfoque desktop-first: todo lo de arriba define el desktop y no se toca.
   Los tres saltos de abajo desarman el sangrado de la foto por etapas. */

/* Etapa 1 - el sangrado sigue vivo. La foto mide 427px de ancho a 640px de
   alto y el texto 560px: por debajo de ~1050px de viewport se pisarian. Se
   achica la foto y el texto cede ancho en dos pasos, para que la transicion
   sea gradual y no un salto. */
@media (max-width: 1200px) {
    .founder-text[b-36jew4djz4] {
        flex-basis: 500px;
    }

    .founder-photo[b-36jew4djz4] {
        height: 600px;
    }
}

/* Etapa 2 - segundo paso del mismo ajuste, ya cerca del apilado. */
@media (max-width: 1100px) {
    .founder-text[b-36jew4djz4] {
        flex-basis: 440px;
    }

        .founder-text h2[b-36jew4djz4] {
            font-size: 34px;
        }

    .founder-photo[b-36jew4djz4] {
        right: var(--space-md);
        height: 520px;
    }
}

/* Etapa 3 - ya no hay ancho para dos columnas: se apila y la foto vuelve
   al flujo, apoyada en el borde inferior de la banda (mismo gesto que en
   desktop, sin el sangrado). */
@media (max-width: 900px) {
    .about-inner[b-36jew4djz4] {
        padding: var(--space-xl) var(--space-md);
        gap: var(--space-xl);
    }

    .about-intro h1[b-36jew4djz4],
    .founder-text h2[b-36jew4djz4] {
        font-size: 30px;
    }

    .about-intro p[b-36jew4djz4] {
        font-size: 18px;
    }

    .founder-inner[b-36jew4djz4] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-lg);
        /* sin padding inferior: la foto apoya contra el borde de la banda */
        padding: var(--space-xl) var(--space-md) 0;
    }

    .founder-text[b-36jew4djz4] {
        /* en columna, flex-basis pasa a ser altura: lo devolvemos al contenido */
        flex: 0 0 auto;
    }

    .founder-photo[b-36jew4djz4] {
        position: static;
        height: auto;
        width: min(260px, 65%);
        max-height: none;
    }

        /* en desktop la imagen escalaba por alto; aca escala por ancho */
        .founder-photo img[b-36jew4djz4] {
            width: 100%;
            height: auto;
        }
}

/* Etapa 4 - telefono: se ajusta la escala tipografica y el aire lateral. */
@media (max-width: 600px) {
    .about-inner[b-36jew4djz4] {
        padding: var(--space-lg) var(--space-md);
        gap: var(--space-lg);
    }

    .about-intro h1[b-36jew4djz4],
    .founder-text h2[b-36jew4djz4] {
        font-size: 26px;
    }

    .about-intro p[b-36jew4djz4],
    .founder-name[b-36jew4djz4],
    .founder-quote[b-36jew4djz4] {
        font-size: 17px;
    }

    .founder-inner[b-36jew4djz4] {
        padding: var(--space-lg) var(--space-md) 0;
        gap: var(--space-md);
    }
}
/* /Components/Sections/AgilitySection.razor.rz.scp.css */
/* CSS for AgilitySection component */
.agility[b-b83arbhxe9] {
    background-color: var(--surface-page);
    padding: var(--space-2xl) var(--space-lg);
}

.agility-inner[b-b83arbhxe9] {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

/* ---------- Tarjeta de texto (izquierda) ---------- */
.agility-text[b-b83arbhxe9] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

    .agility-text h2[b-b83arbhxe9] {
        margin: 0;
        display: flex;
        flex-direction: column;
        color: var(--text-accent);
        font-size: 44px;
        font-weight: var(--fw-bold);
        line-height: 1.1;
    }

        /* La segunda línea "para tu negocio." un poco más chica, como en el diseño */
        .agility-text h2 span:last-child[b-b83arbhxe9] {
            font-size: 36px;
        }

    .agility-text hr[b-b83arbhxe9] {
        width: 100%;
        border: none;
        border-top: 2.5px solid var(--tuio-orange);
        margin: 0;
    }

    .agility-text p[b-b83arbhxe9] {
        color: var(--tuio-gray-900);
        font-size: 20px;
        line-height: 1.4;
        margin: 0;
    }

        .agility-text p strong[b-b83arbhxe9] {
            font-weight: var(--fw-bold);
        }

/* ---------- Mockups (derecha) ---------- */
/* ---------- Mockups en cascada (derecha) ----------
   Reemplaza el bloque .agility-visuals y .agility-visuals img
   anterior por este.
   La cascada se logra con position: cada imagen se corre un poco
   respecto de la anterior y se superpone. */
.agility-visuals[b-b83arbhxe9] {
    flex: 1 1 0;
    position: relative;
    /* alto suficiente para contener las 3 capas desfasadas */
    min-height: 470px;
}

    .agility-visuals img[b-b83arbhxe9] {
        position: absolute;
        width: 82%;
        max-width: 560px;
        height: auto;
        border-radius: var(--radius-md);
        outline: 2px solid var(--tuio-orange);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
        background-color: var(--surface-page);
    }

        /* Capa del fondo (la primera del markup): arriba y a la derecha */
        .agility-visuals img:nth-child(1)[b-b83arbhxe9] {
            top: 0;
            right: 0;
            z-index: 1;
        }

        /* Capa del medio: desplazada hacia el centro */
        .agility-visuals img:nth-child(2)[b-b83arbhxe9] {
            top: 55px;
            right: 45px;
            z-index: 2;
        }

        /* Capa del frente (la última del markup): abajo y a la izquierda, encima de todo */
        .agility-visuals img:nth-child(3)[b-b83arbhxe9] {
            top: 110px;
            right: 90px;
            z-index: 3;
        }

/* En pantallas chicas, la cascada se vuelve apilado simple para que no se rompa */
@media (max-width: 900px) {
    .agility-visuals[b-b83arbhxe9] {
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

        .agility-visuals img[b-b83arbhxe9] {
            position: static;
            width: 100%;
        }
}
/* ---------- Responsive: apilar en pantallas chicas ---------- */
@media (max-width: 900px) {
    .agility-inner[b-b83arbhxe9] {
        flex-direction: column;
    }
}
/* /Components/Sections/BenefitsSection.razor.rz.scp.css */
.benefits[b-h7m4l4rvu4] {
    background-color: var(--surface-page);
    padding: var(--space-2xl) var(--space-lg);
}

.benefits-inner[b-h7m4l4rvu4] {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ---------- Encabezado ---------- */
.benefits-head[b-h7m4l4rvu4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.benefits-head h2[b-h7m4l4rvu4] {
    color: var(--tuio-black);
    font-size: 52px;
    font-weight: var(--fw-bold);
    margin: 0;
    text-align: center;
}

.benefits-head hr[b-h7m4l4rvu4] {
    width: 100%;
    max-width: 1530px;
    border: none;
    border-top: 1px solid var(--tuio-orange);
    margin: 0;
}

/* ---------- Fila de tarjetas grandes (2 por fila) ---------- */
.benefits-large[b-h7m4l4rvu4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

/* ---------- Fila de tarjetas chicas (3 por fila) ---------- */
.benefits-small[b-h7m4l4rvu4] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
}

/* ---------- Tarjeta (base) ---------- */
.benefit-card[b-h7m4l4rvu4] {
    background-color: var(--surface-page);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* La imagen es un recuadro peach (placeholder hasta tener la captura) */
.benefit-image[b-h7m4l4rvu4] {
    background-color: var(--tuio-peach);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.benefit-card--large .benefit-image[b-h7m4l4rvu4] {
    aspect-ratio: 830 / 476;
}

.benefit-card--small .benefit-image[b-h7m4l4rvu4] {
    aspect-ratio: 548 / 312;
}

.benefit-image img[b-h7m4l4rvu4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Cuerpo de texto ---------- */
.benefit-body[b-h7m4l4rvu4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.benefit-eyebrow[b-h7m4l4rvu4] {
    color: var(--text-accent);
    font-size: 20px;
    font-weight: var(--fw-bold);
}

.benefit-body h3[b-h7m4l4rvu4] {
    color: var(--text-accent);
    font-weight: var(--fw-bold);
    margin: 0;
}

.benefit-card--large .benefit-body h3[b-h7m4l4rvu4] {
    font-size: 30px;
}

.benefit-card--small .benefit-body h3[b-h7m4l4rvu4] {
    font-size: 28px;
}

.benefit-body hr[b-h7m4l4rvu4] {
    width: 100%;
    border: none;
    border-top: 2px solid var(--tuio-orange);
    margin: var(--space-xs) 0;
}

.benefit-body p[b-h7m4l4rvu4] {
    color: var(--tuio-gray-600);
    font-size: var(--fs-body);
    line-height: 1.5;
    margin: 0;
}

.benefit-card--large .benefit-body p[b-h7m4l4rvu4] {
    font-size: 20px;
}

.benefit-body p strong[b-h7m4l4rvu4] {
    font-weight: var(--fw-bold);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .benefits-large[b-h7m4l4rvu4],
    .benefits-small[b-h7m4l4rvu4] {
        grid-template-columns: 1fr;
    }
    .benefits-head h2[b-h7m4l4rvu4] {
        font-size: 34px;
    }
}
/* /Components/Sections/BrandStrip.razor.rz.scp.css */
.brand-strip[b-wpzjxubvee] {
    background-color: var(--tuio-orange);
    padding: var(--space-lg) var(--space-md);
}

.brand-strip-inner[b-wpzjxubvee] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.brand-strip-logo[b-wpzjxubvee] {
    height: 36px;
    display: block;
}

.brand-strip-tagline[b-wpzjxubvee] {
    color: var(--tuio-white);
    font-size: 18px;
    font-weight: var(--fw-regular);
    margin: 0;
}

    .brand-strip-tagline strong[b-wpzjxubvee] {
        font-weight: var(--fw-bold);
    }
/* /Components/Sections/ClarityBannerComponent.razor.rz.scp.css */
.clarity-banner[b-35jhemifrl] {
    background-color: var(--tuio-purple);
    padding: var(--space-2xl) var(--space-lg);
}

.clarity-inner[b-35jhemifrl] {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

/* ---------- Intro a la izquierda ---------- */
.clarity-intro[b-35jhemifrl] {
    flex: 1 1 0;
    color: var(--text-on-dark);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.clarity-title[b-35jhemifrl] {
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.15;
}

    .clarity-title strong[b-35jhemifrl] {
        font-weight: var(--fw-bold);
    }

.clarity-intro p[b-35jhemifrl] {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

/* ---------- Tarjetas a la derecha ---------- */
.clarity-cards[b-35jhemifrl] {
    flex: 2 1 0;
    display: flex;
    gap: var(--space-lg);
}

.clarity-card[b-35jhemifrl] {
    flex: 1 1 0;
    background-color: var(--tuio-purple-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
}

.clarity-icon[b-35jhemifrl] {
    width: 70px;
    height: 70px;
    display: block;
}

.clarity-card h3[b-35jhemifrl] {
    color: #EFEFF6;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin: 0;
}

.clarity-card p[b-35jhemifrl] {
    color: #D2D1EE;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .clarity-inner[b-35jhemifrl] {
        flex-direction: column;
        align-items: stretch;
    }

    .clarity-cards[b-35jhemifrl] {
        flex-wrap: wrap;
    }

    .clarity-card[b-35jhemifrl] {
        flex: 1 1 200px;
    }
}
/* /Components/Sections/ContactCta.razor.rz.scp.css */
.contact-cta[b-g5o8axdui4] {
    background-color: var(--tuio-orange);
    padding: var(--space-2xl) var(--space-lg);
}

.contact-cta-inner[b-g5o8axdui4] {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    gap: var(--space-2xl);
    align-items: center; /* centra verticalmente texto y tarjeta */
}

/* ---------- Intro (izquierda) ---------- */
.cta-intro[b-g5o8axdui4] {
    flex: 55 1 0; /* 55 partes del ancho */
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) 0;
}
 
    .cta-intro h2[b-g5o8axdui4] {
        color: var(--text-on-dark);
        font-size: 40px;
        font-weight: var(--fw-bold);
        margin: 0;
    }

.cta-lead[b-g5o8axdui4] {
    color: var(--text-on-dark);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    margin: 0;
}

.cta-intro > p[b-g5o8axdui4] {
    color: var(--text-on-dark);
    font-size: var(--fs-body);
    line-height: 1.5;
    margin: 0;
}

.cta-badges[b-g5o8axdui4] {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.cta-badge[b-g5o8axdui4] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
}

    .cta-badge img[b-g5o8axdui4] {
        width: 48px;
        height: 48px;
    }

    .cta-badge h3[b-g5o8axdui4] {
        color: var(--text-on-dark);
        font-size: var(--fs-body);
        font-weight: var(--fw-bold);
        margin: 0;
    }

    .cta-badge p[b-g5o8axdui4] {
        color: var(--text-on-dark);
        font-size: var(--fs-small);
        margin: 0;
    }

/* ---------- Panel del formulario (derecha) ----------
   Ancho fijo como en Figma (no 50%), con padding generoso.
   flex: 0 1 auto para que NO crezca a llenar la mitad. */

/* Bloque .cta-form-panel completo: proporción 45% + tarjeta blanca
   redondeada con padding. Reemplaza el .cta-form-panel actual. */

.cta-form-panel[b-g5o8axdui4] {
    flex: 45 1 0;
    display: flex; /* NUEVO: hace que contenga al form */
    flex-direction: column; /* NUEVO */
    background-color: var(--tuio-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

    .cta-form-panel[b-g5o8axdui4]  .contact-form-wrap {
        max-width: none;
        width: 100%;
        flex: none; /* anula el flex:1 1 0 que lo descoloca */
    }

        /* título morado solo en Home */
        .cta-form-panel[b-g5o8axdui4]  .contact-form-wrap h2 {
            color: var(--tuio-purple);
        }


/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .contact-cta-inner[b-g5o8axdui4] {
        flex-direction: column;
    }

    .cta-form-panel[b-g5o8axdui4] {
        flex: 1 1 auto;
    }

    .cta-form-panel[b-g5o8axdui4] {
        width: 100%;
    }
    .cta-badges[b-g5o8axdui4] {
        flex-wrap: wrap;
    }
}
/* /Components/Sections/ContactForm.razor.rz.scp.css */
.contact-form-wrap[b-ky8efkqvja] {
    flex: 1 1 0;
    max-width: 625px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Este formulario vive en dos contenedores de anchos muy distintos
       (la tarjeta de /contacto y el panel del CTA del home). Lo que decide
       si las filas de dos campos entran no es el viewport sino el ancho
       real del formulario, asi que se mide a si mismo. */
    container: contact-form / inline-size;
}

.contact-form-wrap h2[b-ky8efkqvja] {
    color: var(--tuio-gray-900);
    font-size: 24px;
    font-weight: var(--fw-bold);
    margin: 0;
}

.field[b-ky8efkqvja] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-row[b-ky8efkqvja] {
    display: flex;
    gap: 18px;
}

.field-row .field[b-ky8efkqvja] {
    flex: 1 1 0;
    /* sin esto el ancho minimo de contenido del input impide que la
       columna baje de cierto ancho y la fila desborda en pantallas chicas */
    min-width: 0;
}

.field label[b-ky8efkqvja] {
    color: var(--tuio-black);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

[b-ky8efkqvja] .input,
[b-ky8efkqvja] .textarea {
    border: 1px solid var(--tuio-orange);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--tuio-black);
    background-color: var(--tuio-white);
    width: 100%;
    box-sizing: border-box;
}

[b-ky8efkqvja] .input::placeholder,
[b-ky8efkqvja] .textarea::placeholder {
    color: var(--tuio-gray-500, #878787);
}

[b-ky8efkqvja] .textarea {
    min-height: 102px;
    resize: vertical;
}

[b-ky8efkqvja] .select {
    background-color: var(--surface-input);
    border: none;
    border-radius: 8px;
    padding: 10px 40px 10px 12px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--text-accent);
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FE572A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

[b-ky8efkqvja] .input:focus,
[b-ky8efkqvja] .textarea:focus,
[b-ky8efkqvja] .select:focus {
    outline: 2px solid var(--tuio-orange);
    outline-offset: -1px;
}

[b-ky8efkqvja] .validation-message {
    color: var(--tuio-orange);
    font-size: 13px;
}

.submit-btn[b-ky8efkqvja] {
    align-self: flex-start;
    margin-top: var(--space-md);
    background-color: var(--tuio-orange);
    color: var(--text-on-dark);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    border: none;
    border-radius: 7px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.submit-btn:hover:not(:disabled)[b-ky8efkqvja] {
    background-color: var(--tuio-orange-hover);
}

.submit-btn:disabled[b-ky8efkqvja] {
    opacity: 0.6;
    cursor: default;
}

.contact-success[b-ky8efkqvja] {
    background-color: var(--tuio-peach);
    border-radius: 8px;
    padding: 10px 12px;
}

.contact-success p[b-ky8efkqvja] {
    color: var(--text-accent);
    font-weight: var(--fw-bold);
    margin: 0;
}

/* ---------- Responsive ----------
   El formulario ya es fluido (inputs al 100% con box-sizing). Lo unico que
   deja de entrar en anchos chicos son las filas de dos campos: por debajo
   de 400px de formulario cada campo quedaria en ~190px, asi que se apilan.
   Al medir el contenedor y no la ventana, el corte cae donde de verdad
   hace falta en cada pagina y el desktop de ambas queda intacto. */
@container contact-form (max-width: 400px) {
    .field-row[b-ky8efkqvja] {
        flex-direction: column;
        /* los 18px separaban las dos columnas; en vertical romperian el
           ritmo del resto de campos, que van pegados */
        gap: 0;
    }

    /* en columna, `flex: 1 1 0` repartiria altura entre los dos campos */
    .field-row .field[b-ky8efkqvja] {
        flex: 0 0 auto;
    }

    /* boton a todo el ancho: objetivo tactil comodo.
       Va `width` y no `align-self`, porque el padre real del boton es el
       <form> que genera EditForm, que es un bloque y no un flex. */
    .submit-btn[b-ky8efkqvja] {
        width: 100%;
        padding: 12px;
    }
}

/* Reserva para navegadores sin container queries (iOS < 16): mismo
   comportamiento aproximado con el viewport. */
@supports not (container-type: inline-size) {
    @media (max-width: 600px) {
        .field-row[b-ky8efkqvja] {
            flex-direction: column;
            gap: 0;
        }

        .field-row .field[b-ky8efkqvja] {
            flex: 0 0 auto;
        }

        .submit-btn[b-ky8efkqvja] {
            width: 100%;
            padding: 12px;
        }
    }
}
/* /Components/Sections/FaqSection.razor.rz.scp.css */
.faq[b-h0adyyafzn] {
    background-color: var(--surface-page);
    padding: var(--space-2xl) 0;
    overflow: hidden; /* evita scroll horizontal por el bleed */
}

/* Grid de 2 columnas: la izquierda arranca en el borde del viewport,
   la derecha se alinea con el resto del contenido de la página.
   El truco: una columna flexible a la izquierda + una columna de
   contenido topada a la mitad del container. */
.faq-inner[b-h0adyyafzn] {
    display: grid;
    grid-template-columns: 1fr min(600px, 46%);
    align-items: center;
    gap: var(--space-2xl);
    /* el contenido de la derecha queda centrado respecto al container */
    max-width: var(--container-max);
    margin: 0 auto;
    /* padding derecho normal, IZQUIERDO cero para que la imagen sangre */
    padding-right: var(--space-lg);
}

/* ---------- Imagen (izquierda, pegada al borde) ---------- */
.faq-visual[b-h0adyyafzn] {
    /* se extiende hacia la izquierda más allá del grid, hasta el borde real.
       margin-left negativo que compensa el centrado del container */
    margin-left: calc((var(--container-max) - 100vw) / 2);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

    .faq-visual img[b-h0adyyafzn] {
        width: 100%;
        height: auto;
        max-height: 640px;
        object-fit: contain;
        object-position: left bottom; /* la muñeca anclada abajo-izquierda */
        display: block;
    }

/* ---------- Contenido (derecha) ---------- */
.faq-content[b-h0adyyafzn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.faq-head h2[b-h0adyyafzn] {
    color: var(--text-accent);
    font-size: 48px;
    font-weight: var(--fw-bold);
    margin: 0 0 var(--space-xs) 0;
}

.faq-head p[b-h0adyyafzn] {
    color: var(--tuio-gray-600);
    font-size: 24px;
    margin: 0;
}

/* ---------- Lista de preguntas ---------- */
.faq-list[b-h0adyyafzn] {
    display: flex;
    flex-direction: column;
}

.faq-item[b-h0adyyafzn] {
    border-bottom: 1px solid var(--border-subtle);
}

.faq-question[b-h0adyyafzn] {
    width: 100%;
    background-color: var(--tuio-gray-100);
    border: none;
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    text-align: left;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: var(--fw-bold);
    color: var(--tuio-gray-900);
    transition: background-color 0.15s ease;
}

    .faq-question:hover[b-h0adyyafzn] {
        background-color: var(--tuio-gray-200);
    }

.faq-chevron[b-h0adyyafzn] {
    flex-shrink: 0;
    color: var(--tuio-purple-dark);
    font-size: 24px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.faq-item.open .faq-chevron[b-h0adyyafzn] {
    transform: rotate(180deg);
}

.faq-answer[b-h0adyyafzn] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
    background-color: var(--tuio-white);
}

.faq-item.open .faq-answer[b-h0adyyafzn] {
    grid-template-rows: 1fr;
}

.faq-answer p[b-h0adyyafzn] {
    overflow: hidden;
    margin: 0;
    color: var(--tuio-gray-900);
    font-size: 20px;
    line-height: 1.5;
    padding: 0 var(--space-md);
}

.faq-item.open .faq-answer p[b-h0adyyafzn] {
    padding: var(--space-md);
}

/* ---------- Responsive ----------
   En pantallas chicas la imagen pasa arriba, a ancho completo,
   y el orden visual se mantiene (imagen y luego preguntas). */
@media (max-width: 900px) {
    .faq-inner[b-h0adyyafzn] {
        grid-template-columns: 1fr;
        padding: 0 var(--space-lg);
        gap: var(--space-lg);
    }

    .faq-visual[b-h0adyyafzn] {
        margin-left: 0;
        justify-content: center;
    }

        .faq-visual img[b-h0adyyafzn] {
            max-height: 360px;
            object-position: center;
        }

    .faq-head h2[b-h0adyyafzn] {
        font-size: 34px;
    }
}
/* /Components/Sections/FeatureHighlight.razor.rz.scp.css */
.feature-highlight[b-7pjfw7t801] {
    background-color: var(--surface-page);
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* ---------- Panel morado con el título (izquierda) ---------- */
.fh-intro[b-7pjfw7t801] {
    flex: 0 0 40%;
    background-color: var(--tuio-purple);
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: auto 90%;
    background-image: url('/img/icons/purple-chef.svg');
    text-align: right;
}

.fh-intro h2[b-7pjfw7t801] {
    color: var(--tuio-white);
    font-size: 64px;
    font-weight: var(--fw-medium);
    line-height: 1.05;
    margin: 0;
}

.fh-intro h2 strong[b-7pjfw7t801] {
    font-weight: 800;
}

.fh-cta[b-7pjfw7t801] {
    color: var(--tuio-white);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-decoration: none;
    border-bottom: 3px solid var(--tuio-white);
    padding-bottom: 2px;
    margin-top: var(--space-lg);
}

/* ---------- Grilla de features (derecha) ---------- */
.fh-grid[b-7pjfw7t801] {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    padding: var(--space-xl);
    gap: var(--space-md);
}

.fh-item[b-7pjfw7t801] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.fh-icon[b-7pjfw7t801] {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fh-icon img[b-7pjfw7t801] {
    width: 70px;
    height: 70px;
    display: block;
}

.fh-body[b-7pjfw7t801] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fh-body h3[b-7pjfw7t801] {
    color: var(--tuio-black);
    font-size: 28px;
    font-weight: var(--fw-bold);
    margin: 0;
}

.fh-body p[b-7pjfw7t801] {
    color: var(--tuio-black);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    margin: 0;
}

/* ---------- Botón que se revela en hover ----------
   En reposo: colapsado (altura 0, invisible).
   Al pasar el mouse por .fh-item, se despliega. */
.fh-reveal[b-7pjfw7t801] {
    color: var(--text-accent);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.fh-item:hover[b-7pjfw7t801] {
    background-color: var(--tuio-peach);
}

.fh-item:hover .fh-reveal[b-7pjfw7t801] {
    max-height: 40px;
    opacity: 1;
    transform: translateY(0);
    margin-top: var(--space-xs);
}

.fh-reveal .arrow[b-7pjfw7t801] {
    transition: transform 0.2s ease;
}

.fh-item:hover .fh-reveal .arrow[b-7pjfw7t801] {
    transform: translateX(3px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .feature-highlight[b-7pjfw7t801] {
        flex-direction: column;
    }
    .fh-intro[b-7pjfw7t801] {
        flex-basis: auto;
        align-items: flex-start;
        text-align: left;
    }
    .fh-intro h2[b-7pjfw7t801] {
        font-size: 44px;
    }
    .fh-grid[b-7pjfw7t801] {
        grid-template-columns: 1fr;
    }
    /* En touch no hay hover: mostramos el botón siempre */
    .fh-reveal[b-7pjfw7t801] {
        max-height: 40px;
        opacity: 1;
        transform: none;
        margin-top: var(--space-xs);
    }
}
/* /Components/Sections/HeroSection.razor.rz.scp.css */
.hero[b-otqj337pkh] {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: var(--space-2xl) var(--space-lg);
    overflow: hidden;
    /* Capa 1 (fondo): la foto.
       El linear-gradient encima es la Capa 2 (overlay oscuro) que
       hace legible el texto blanco sobre cualquier zona de la foto. */
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.15) 100%), url('/img/home/Hero.jpg');
    background-size: cover; /* la foto cubre todo el área sin deformarse */
    background-position: center;
}

/* Capa 3: el contenido, por encima de las dos capas de fondo */
.hero-content[b-otqj337pkh] {
    position: relative;
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
}

.hero h1[b-otqj337pkh] {
    color: var(--text-on-dark);
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1.1;
    max-width: 780px;
    margin: 0;
}

    /* Las partes naranjas del título */
    .hero h1 .accent[b-otqj337pkh] {
        color: var(--tuio-orange);
    }

.hero-subtitle[b-otqj337pkh] {
    color: var(--text-on-dark);
    font-size: 22px;
    font-weight: var(--fw-regular);
    line-height: 1.4;
    max-width: 620px;
    margin: 0;
}

    .hero-subtitle strong[b-otqj337pkh] {
        font-weight: var(--fw-bold);
    }

/* Botones */
.hero-actions[b-otqj337pkh] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.cta-button[b-otqj337pkh] {
    background-color: var(--tuio-orange);
    color: var(--text-on-dark);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-decoration: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}

    .cta-button:hover[b-otqj337pkh] {
        background-color: var(--tuio-orange-hover);
    }

/* El secundario es solo texto con subrayado, sin fondo */
.secondary-button[b-otqj337pkh] {
    color: var(--text-on-dark);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-decoration: none;
    padding: var(--space-xs) 0;
    border-bottom: 3px solid var(--text-on-dark);
}

/* Responsive: texto más chico en pantallas angostas */
@media (max-width: 768px) {
    .hero h1[b-otqj337pkh] {
        font-size: var(--fs-h1);
    }

    .hero-subtitle[b-otqj337pkh] {
        font-size: var(--fs-body);
    }
}
/* /Components/Sections/TrialSection.razor.rz.scp.css */
.trial[b-d32bi5d5my] {
    /* Fondo con imagen + overlay tenue, la tarjeta blanca va encima */
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('/img/home/TrialBg.jpg');
    background-size: cover;
    background-position: center;
    padding: var(--space-2xl) var(--space-lg);
    display: flex;
    justify-content: center;
}

/* ---------- Tarjeta blanca central ---------- */
.trial-card[b-d32bi5d5my] {
    background-color: var(--tuio-white);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    max-width: var(--container-max);
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

/* ---------- Texto (izquierda) ---------- */
.trial-text[b-d32bi5d5my] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.trial-heading[b-d32bi5d5my] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trial-eyebrow[b-d32bi5d5my] {
    color: var(--tuio-purple);
    font-size: 20px;
    font-weight: var(--fw-bold);
}

.trial-text h2[b-d32bi5d5my] {
    color: var(--tuio-purple);
    font-size: 48px;
    font-weight: var(--fw-bold);
    margin: 0;
}

.trial-text p[b-d32bi5d5my] {
    color: var(--tuio-purple-dark);
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
}

    .trial-text p strong[b-d32bi5d5my] {
        font-weight: var(--fw-bold);
    }

.trial-cta[b-d32bi5d5my] {
    align-self: flex-start;
    margin-top: var(--space-sm);
    background-color: var(--tuio-orange);
    color: var(--text-on-dark);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
}

    .trial-cta:hover[b-d32bi5d5my] {
        background-color: var(--tuio-orange-hover);
    }

/* ---------- Foto (derecha) ---------- */
.trial-visual[b-d32bi5d5my] {
    flex: 0 0 45%;
}

    .trial-visual img[b-d32bi5d5my] {
        width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
        display: block;
    }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .trial-card[b-d32bi5d5my] {
        flex-direction: column;
    }

    .trial-visual[b-d32bi5d5my] {
        flex-basis: auto;
        width: 100%;
    }

    .trial-text h2[b-d32bi5d5my] {
        font-size: 34px;
    }
}