/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Fondo radial cyber */
.cyber-radial-bg {
    background: radial-gradient(
        circle at 50% 0%,
        rgba(160, 120, 255, 0.12) 0%,
        rgba(3, 181, 211, 0.05) 45%,
        rgba(10, 14, 24, 0) 80%
    );
}

/* Tarjetas glassmorphism */
.glass-card {
    background: rgba(17, 24, 39, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-card:hover {
    border-color: rgba(208, 188, 255, 0.35);
    box-shadow: 0 0 28px -4px rgba(160, 120, 255, 0.25);
}

/* Borde neón */
.neon-border-glow {
    box-shadow: 0 0 20px -2px rgba(76, 215, 246, 0.3);
}

/* Scrollbar del código */
.cyber-code-scroll::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.cyber-code-scroll::-webkit-scrollbar-thumb {
    background: rgba(149, 142, 160, 0.3);
    border-radius: 9999px;
}

/* Carrusel */
.carousel-slide {
    transition:
        opacity 0.5s ease-in-out,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel-dot.active {
    width: 1.5rem;
    background-color: #4cd7f6;
}

/* Puntos del carrusel móvil */
.mob-dot.active {
    width: 1.5rem;
    background-color: #4cd7f6;
}
/* ============================================================ */
/* ICONOS SVG LOCALES (reemplazan a Material Symbols webfont)    */
/* ============================================================ */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Tamaños (heredan el font-size del contexto) */
.icon.size-sm {
    width: 0.875rem;
    height: 0.875rem;
}
.icon.size-base {
    width: 1rem;
    height: 1rem;
}
.icon.size-lg {
    width: 1.125rem;
    height: 1.125rem;
}
.icon.size-xl {
    width: 1.25rem;
    height: 1.25rem;
}
.icon.size-2xl {
    width: 1.5rem;
    height: 1.5rem;
}
.icon.size-3xl {
    width: 1.875rem;
    height: 1.875rem;
}

/* Map: cada clase → su archivo SVG */
.icon-apartment {
    -webkit-mask-image: url("/assets/icons/apartment.svg");
    mask-image: url("/assets/icons/apartment.svg");
}
.icon-arrow_forward {
    -webkit-mask-image: url("/assets/icons/arrow_forward.svg");
    mask-image: url("/assets/icons/arrow_forward.svg");
}
.icon-bolt {
    -webkit-mask-image: url("/assets/icons/bolt.svg");
    mask-image: url("/assets/icons/bolt.svg");
}
.icon-chat {
    -webkit-mask-image: url("/assets/icons/chat.svg");
    mask-image: url("/assets/icons/chat.svg");
}
.icon-check {
    -webkit-mask-image: url("/assets/icons/check.svg");
    mask-image: url("/assets/icons/check.svg");
}
.icon-check_circle {
    -webkit-mask-image: url("/assets/icons/check_circle.svg");
    mask-image: url("/assets/icons/check_circle.svg");
}
.icon-chevron_left {
    -webkit-mask-image: url("/assets/icons/chevron_left.svg");
    mask-image: url("/assets/icons/chevron_left.svg");
}
.icon-chevron_right {
    -webkit-mask-image: url("/assets/icons/chevron_right.svg");
    mask-image: url("/assets/icons/chevron_right.svg");
}
.icon-cloud_done {
    -webkit-mask-image: url("/assets/icons/cloud_done.svg");
    mask-image: url("/assets/icons/cloud_done.svg");
}
.icon-code {
    -webkit-mask-image: url("/assets/icons/code.svg");
    mask-image: url("/assets/icons/code.svg");
}
.icon-content_copy {
    -webkit-mask-image: url("/assets/icons/content_copy.svg");
    mask-image: url("/assets/icons/content_copy.svg");
}
.icon-conversion_path {
    -webkit-mask-image: url("/assets/icons/conversion_path.svg");
    mask-image: url("/assets/icons/conversion_path.svg");
}
.icon-credit_card {
    -webkit-mask-image: url("/assets/icons/credit_card.svg");
    mask-image: url("/assets/icons/credit_card.svg");
}
.icon-devices {
    -webkit-mask-image: url("/assets/icons/devices.svg");
    mask-image: url("/assets/icons/devices.svg");
}
.icon-forum {
    -webkit-mask-image: url("/assets/icons/forum.svg");
    mask-image: url("/assets/icons/forum.svg");
}
.icon-handshake {
    -webkit-mask-image: url("/assets/icons/handshake.svg");
    mask-image: url("/assets/icons/handshake.svg");
}
.icon-home {
    -webkit-mask-image: url("/assets/icons/home.svg");
    mask-image: url("/assets/icons/home.svg");
}
.icon-key {
    -webkit-mask-image: url("/assets/icons/key.svg");
    mask-image: url("/assets/icons/key.svg");
}
.icon-lock_clock {
    -webkit-mask-image: url("/assets/icons/lock_clock.svg");
    mask-image: url("/assets/icons/lock_clock.svg");
}
.icon-lock_open {
    -webkit-mask-image: url("/assets/icons/lock_open.svg");
    mask-image: url("/assets/icons/lock_open.svg");
}
.icon-mail {
    -webkit-mask-image: url("/assets/icons/mail.svg");
    mask-image: url("/assets/icons/mail.svg");
}
.icon-menu {
    -webkit-mask-image: url("/assets/icons/menu.svg");
    mask-image: url("/assets/icons/menu.svg");
}
.icon-north_east {
    -webkit-mask-image: url("/assets/icons/north_east.svg");
    mask-image: url("/assets/icons/north_east.svg");
}
.icon-palette {
    -webkit-mask-image: url("/assets/icons/palette.svg");
    mask-image: url("/assets/icons/palette.svg");
}
.icon-restaurant_menu {
    -webkit-mask-image: url("/assets/icons/restaurant_menu.svg");
    mask-image: url("/assets/icons/restaurant_menu.svg");
}
.icon-rocket {
    -webkit-mask-image: url("/assets/icons/rocket.svg");
    mask-image: url("/assets/icons/rocket.svg");
}
.icon-security {
    -webkit-mask-image: url("/assets/icons/security.svg");
    mask-image: url("/assets/icons/security.svg");
}
.icon-speed {
    -webkit-mask-image: url("/assets/icons/speed.svg");
    mask-image: url("/assets/icons/speed.svg");
}
.icon-star {
    -webkit-mask-image: url("/assets/icons/star.svg");
    mask-image: url("/assets/icons/star.svg");
}
.icon-storefront {
    -webkit-mask-image: url("/assets/icons/storefront.svg");
    mask-image: url("/assets/icons/storefront.svg");
}
.icon-terminal {
    -webkit-mask-image: url("/assets/icons/terminal.svg");
    mask-image: url("/assets/icons/terminal.svg");
}
.icon-verified {
    -webkit-mask-image: url("/assets/icons/verified.svg");
    mask-image: url("/assets/icons/verified.svg");
}
.icon-verified_user {
    -webkit-mask-image: url("/assets/icons/verified_user.svg");
    mask-image: url("/assets/icons/verified_user.svg");
}
.icon-visibility {
    -webkit-mask-image: url("/assets/icons/visibility.svg");
    mask-image: url("/assets/icons/visibility.svg");
}
.icon-web {
    -webkit-mask-image: url("/assets/icons/web.svg");
    mask-image: url("/assets/icons/web.svg");
}
.icon-widgets {
    -webkit-mask-image: url("/assets/icons/widgets.svg");
    mask-image: url("/assets/icons/widgets.svg");
}