:root {
    --bs-body-font-family: 'Montserrat', sans-serif;
    --blanco: #ffffff;
    --negro: #3e434d;
    --gris1: #f5f8ff;
    --gris2: #eaf1ff;
    --primario: #006cff;
    --secundario: #a368da;
    --marino1: #002a54;
    --rojo1: #cd133f;
    --morado1: #9047d8;
    --verde1: #59cc89;
    --amarillo1: #f1d058;
    --naranja1: #e06411;
    --azul1: #1e55eb;
    --azul2: #00449f;
    --sombra: 53, 103, 165;
    --seleccion-fondo: var(--primario);
    --seleccion-texto: var(--blanco);
    --radio-1: 0.25rem;
    --radio-2: 0.375rem;
    --radio-3: 0.5rem;
    --radio-4: 1rem;
    --radio-5: 2rem;
}

body {
    font-family: 'Montserrat', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-700 { font-weight: 700 !important; }

.max-w-100 { width: 100%; max-width: 100px; }
.max-w-200 { width: 100%; max-width: 200px; }
.max-w-300 { width: 100%; max-width: 300px; }
.max-w-400 { width: 100%; max-width: 400px; }
.max-w-500 { width: 100%; max-width: 500px; }
.max-w-600 { width: 100%; max-width: 600px; }
.max-w-700 { width: 100%; max-width: 700px; }
.max-w-800 { width: 100%; max-width: 800px; }
.max-w-900 { width: 100%; max-width: 900px; }
.max-w-1000 { width: 100%; max-width: 1000px; }
.max-w-1100 { width: 100%; max-width: 1100px; }
.max-w-1200 { width: 100%; max-width: 1200px; }

/* Fondos */
.bg-color-blanco { background-color: var(--blanco) !important; }
.bg-color-negro { background-color: var(--negro) !important; }
.bg-color-gris-1 { background-color: var(--gris1) !important; }
.bg-color-gris-2 { background-color: var(--gris2) !important; }
.bg-color-primario { background-color: var(--primario) !important; }
.bg-color-secundario { background-color: var(--secundario) !important; }
.bg-color-rojo-1 { background-color: var(--rojo1) !important; }
.bg-color-morado-1 { background-color: var(--morado1) !important; }
.bg-color-verde-1 { background-color: var(--verde1) !important; }
.bg-color-amarillo-1 { background-color: var(--amarillo1) !important; }
.bg-color-naranja-1 { background-color: var(--naranja1) !important; }
.bg-color-azul-1 { background-color: var(--azul1) !important; }
.bg-color-azul-2 { background-color: var(--azul2) !important; }
.bg-color-marino-1 { background-color: var(--marino1) !important; }

.gradient-blanco-gris-1 { background: linear-gradient(to bottom, var(--blanco) 0%, var(--gris1) 100%) !important; }
.gradient-blanco-gris-2 { background: linear-gradient(to bottom, var(--blanco) 0%, var(--gris2) 100%) !important; }

/* Colores de texto */
.t-color-blanco { color: var(--blanco) !important; }
.t-color-negro { color: var(--negro) !important; }
.t-color-gris-1 { color: var(--gris1) !important; }
.t-color-gris-2 { color: var(--gris2) !important; }
.t-color-primario { color: var(--primario) !important; }
.t-color-secundario { color: var(--secundario) !important; }
.t-color-rojo-1 { color: var(--rojo1) !important; }
.t-color-morado-1 { color: var(--morado1) !important; }
.t-color-verde-1 { color: var(--verde1) !important; }
.t-color-amarillo-1 { color: var(--amarillo1) !important; }
.t-color-naranja-1 { color: var(--naranja1) !important; }
.t-color-azul-1 { color: var(--azul1) !important; }

.btn-1 { --bs-btn-color: var(--blanco); --bs-btn-bg: var(--primario); --bs-btn-border-color: var(--primario); --bs-btn-hover-color: var(--blanco); --bs-btn-hover-bg: color-mix(in srgb, var(--primario) 85%, var(--negro)); --bs-btn-hover-border-color: color-mix(in srgb, var(--primario) 85%, var(--negro)); --bs-btn-active-color: var(--blanco); --bs-btn-active-bg: color-mix(in srgb, var(--primario) 75%, var(--negro)); --bs-btn-active-border-color: color-mix(in srgb, var(--primario) 75%, var(--negro)); --bs-btn-disabled-color: var(--blanco); --bs-btn-disabled-bg: var(--primario); --bs-btn-disabled-border-color: var(--primario); --bs-btn-disabled-opacity: .55; }
.btn-2 { --bs-btn-color: var(--blanco); --bs-btn-bg: var(--secundario); --bs-btn-border-color: var(--secundario); --bs-btn-hover-color: var(--blanco); --bs-btn-hover-bg: color-mix(in srgb, var(--secundario) 85%, var(--negro)); --bs-btn-hover-border-color: color-mix(in srgb, var(--secundario) 85%, var(--negro)); --bs-btn-active-color: var(--blanco); --bs-btn-active-bg: color-mix(in srgb, var(--secundario) 75%, var(--negro)); --bs-btn-active-border-color: color-mix(in srgb, var(--secundario) 75%, var(--negro)); --bs-btn-disabled-color: var(--blanco); --bs-btn-disabled-bg: var(--secundario); --bs-btn-disabled-border-color: var(--secundario); --bs-btn-disabled-opacity: .55; }
.btn-3 { --bs-btn-color: var(--negro); --bs-btn-bg: var(--gris2); --bs-btn-border-color: var(--gris2); --bs-btn-hover-color: var(--negro); --bs-btn-hover-bg: color-mix(in srgb, var(--gris2) 85%, var(--negro)); --bs-btn-hover-border-color: color-mix(in srgb, var(--gris2) 85%, var(--negro)); --bs-btn-active-color: var(--negro); --bs-btn-active-bg: color-mix(in srgb, var(--gris2) 75%, var(--negro)); --bs-btn-active-border-color: color-mix(in srgb, var(--gris2) 75%, var(--negro)); --bs-btn-disabled-color: var(--negro); --bs-btn-disabled-bg: var(--gris2); --bs-btn-disabled-border-color: var(--gris2); --bs-btn-disabled-opacity: .55; }
.btn-4 { --bs-btn-color: var(--blanco); --bs-btn-bg: var(--verde1); --bs-btn-border-color: var(--verde1); --bs-btn-hover-color: var(--blanco); --bs-btn-hover-bg: color-mix(in srgb, var(--verde1) 85%, var(--negro)); --bs-btn-hover-border-color: color-mix(in srgb, var(--verde1) 85%, var(--negro)); --bs-btn-active-color: var(--blanco); --bs-btn-active-bg: color-mix(in srgb, var(--verde1) 75%, var(--negro)); --bs-btn-active-border-color: color-mix(in srgb, var(--verde1) 75%, var(--negro)); --bs-btn-disabled-color: var(--blanco); --bs-btn-disabled-bg: var(--verde1); --bs-btn-disabled-border-color: var(--verde1); --bs-btn-disabled-opacity: .55; }


/***************************** Comienzo HOME ******************************/
/***************************** ID hero-home ******************************/
#hero-principal {
    min-height: max(32rem, 75vh);
    isolation: isolate;
}

@keyframes hero-principal-background {
    from {
        background-position: center 0;
    }

    to {
        background-position: center -1080px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero-principal::before {
        animation: none;
    }
}

#hero-principal::before {
    position: absolute;
    inset: -2px;
    z-index: 0;
    background-image: url('../img/bg-hero-home.webp');
    background-position: center 0;
    background-repeat: repeat;
    background-size: auto;
    content: '';
    filter: blur(2px);
    animation: hero-principal-background 70s linear infinite;
}

#hero-principal::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0c2136;
    content: '';
    opacity: 0.88;
}

#servicios-portafolio {
    background-image: url('../img/bg-pattern-blanco.webp');
    background-position: top left;
    background-repeat: repeat;
    background-size: auto;
}

/***************************** ID servicios-portafolio ******************************/
#servicios-portafolio .home-servicios-card {
    margin-top: -2rem;
}

#servicios-portafolio .home-servicios-card > a > img,
#servicios-portafolio .home-servicios-card > button > img {
    width: 40px;
    height: 40px;
    filter: brightness(0) saturate(100%) invert(26%) sepia(14%) saturate(1255%) hue-rotate(176deg) brightness(91%) contrast(87%);
}

#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a {
    position: relative;
    overflow: hidden;
    border-radius: var(--radio-4);
    box-shadow: 0 1rem 3rem rgba(var(--sombra), 0.25);
}

#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a::before,
#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: '';
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a::before {
    background-color: var(--marino1);
    opacity: 0.40;
}

#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a::after {
    inset: 50% auto auto 50%;
    width: 130px;
    height: 77px;
    background: url('../img/logo.png') center / contain no-repeat;
    transform: translate(-50%, -50%);
}

#portafolio-destacado-proyectos > div:nth-child(1) > a::after {
    background-image: url('../img/ejemplo-portafolio-1-logo.webp');
}

#portafolio-destacado-proyectos > div:nth-child(2) > a::after {
    background-image: url('../img/ejemplo-portafolio-2-logo.webp');
}

#portafolio-destacado-proyectos > div:nth-child(3) > a::after {
    background-image: url('../img/ejemplo-portafolio-3-logo.webp');
}

#portafolio-destacado-proyectos > div:nth-child(4) > a::after {
    background-image: url('../img/ejemplo-portafolio-4-logo.webp');
}

#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a:hover::before,
#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a:hover::after,
#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a:focus-visible::before,
#portafolio-destacado-proyectos > div:nth-child(-n + 4) > a:focus-visible::after {
    visibility: hidden;
    opacity: 0;
}


/***************************** ID servicios-destacados ******************************/
#servicios-destacados .home-servicios-media {
    min-height: 24rem;
    border-radius: var(--radio-4);
    background-image: url('../img/servicios-home-img-1.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateX(2rem);
}

#servicios-destacados .home-servicios-carousel-container {
    margin-left: -2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#servicios-destacados .servicios-destacados-invertido .home-servicios-media {
    transform: translateX(-2rem);
}

body.diseno-de-paginas-web #servicios-destacados > .container:first-of-type .home-servicios-media {
    background-image: url('../img/servicios-diseno-img-1.webp');
}

body.diseno-de-paginas-web #servicios-destacados > .container:nth-of-type(2) .home-servicios-media {
    background-image: url('../img/servicios-diseno-img-2.webp');
}

body.desarrollo-de-software-a-medida #servicios-destacados > .container:first-of-type .home-servicios-media {
    background-image: url('../img/servicios-desarrollo-img-1.webp');
}

body.desarrollo-de-software-a-medida #servicios-destacados > .container:nth-of-type(2) .home-servicios-media {
    background-image: url('../img/servicios-desarrollo-img-2.webp');
}

body.tiendas-virtuales #servicios-destacados > .container:first-of-type .home-servicios-media {
    background-image: url('../img/servicios-tiendas-img-1.webp');
}

body.tiendas-virtuales #servicios-destacados > .container:nth-of-type(2) .home-servicios-media {
    background-image: url('../img/servicios-tiendas-img-2.webp');
}

body.google-seo #servicios-destacados > .container:first-of-type .home-servicios-media {
    background-image: url('../img/servicios-seo-img-1.webp');
}

body.google-seo #servicios-destacados > .container:nth-of-type(2) .home-servicios-media {
    background-image: url('../img/servicios-seo-img-2.webp');
}

body.soporte-wordpress #servicios-destacados > .container:first-of-type .home-servicios-media {
    background-image: url('../img/servicios-wordpress-img-1.webp');
}

body.soporte-wordpress #servicios-destacados > .container:nth-of-type(2) .home-servicios-media {
    background-image: url('../img/servicios-wordpress-img-2.webp');
}

#servicios-destacados .servicios-destacados-invertido .home-servicios-carousel-container {
    margin-left: 0;
    margin-right: -2rem;
}

#servicios-destacados .carousel-indicators button {
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    margin-left: 0.25rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--primario);
}

#servicios-destacados-carousel .carousel-inner {
    overflow: hidden;
    transition: height 0.35s ease;
}

@media (max-width: 991.98px) {
    #servicios-destacados .home-servicios-media {
        min-height: 20rem;
        transform: none;
    }

    #servicios-destacados .home-servicios-carousel-container {
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/***************************** ID preguntas-frecuentes ******************************/
#preguntas-frecuentes {
    background-image: url('../img/bg-pattern-blanco.webp');
    background-position: top left;
    background-repeat: repeat;
}

#preguntas-frecuentes .accordion-body h4::before {
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
    display: inline-block;
    border-radius: 0;
    background-color: var(--gris2);
    content: '';
    opacity: 0.55;
    vertical-align: -0.125rem;
    -webkit-mask: url('../icons/icon-preguta-frecuente.svg') center / contain no-repeat;
    mask: url('../icons/icon-preguta-frecuente.svg') center / contain no-repeat;
}

/***************************** Fin HOME ******************************/

/***************************** FOOTER ******************************/
.footer-main {
    background-image: url('../img/bg-pattern-azul.webp');
    background-position: top left;
    background-repeat: repeat;
}

.footer-icon {
    filter: brightness(0) invert(1);
}

.floating-contact {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1030;
    isolation: isolate;
    width: 65px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.floating-contact::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(89, 204, 137, 0.55);
    content: '';
    pointer-events: none;
    animation: floating-contact-pulse 2.4s ease-out infinite;
}

@keyframes floating-contact-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(89, 204, 137, 0.55);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(89, 204, 137, 0);
    }

    100% {
        box-shadow: 0 0 0 16px rgba(89, 204, 137, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-contact::before {
        animation: none;
    }
}

.floating-contact-action {
    width: 40px;
    height: 40px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
}

.floating-contact-action img {
    max-width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
}

/***************************** Inicio ajuste badge reCAPTCHA ******************************/
.grecaptcha-badge {
    display: none !important;
}
/***************************** Fin ajuste badge reCAPTCHA ******************************/

@media (max-width: 575.98px) {
    .floating-contact {
        right: 12px;
        bottom: 12px;
    }
}

/***************************** FIN FOOTER ******************************/
/***************************** HEADER ******************************/
header {
    border-bottom: 1px solid #47526b;
    background-color: #00172d26;
}

.navbar-brand > img {
    width: 62px;
    height: 50px;
}

.header-menu-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    -webkit-filter: brightness(0) invert(1) !important;
    filter: brightness(0) invert(1) !important;
}

/***************************** FIN HEADER ******************************/

/***************************** PORTAFOLIO ******************************/

#servicios-portafolio .btn-portafolio-filtro {
    color: var(--blanco);
    background-color: transparent;
    border: 0;
}

#servicios-portafolio .btn-portafolio-filtro-activo {
    color: var(--blanco);
    background-color: var(--azul2);
    border-color: var(--azul2);
}

#servicios-portafolio [data-portafolio-item] .card-img-top {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

#servicios-portafolio [data-portafolio-item] .card {
    isolation: isolate;
}

#servicios-portafolio [data-portafolio-item] .card::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: var(--azul1);
    content: '';
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#servicios-portafolio [data-portafolio-item]:hover .card::after,
#servicios-portafolio [data-portafolio-item]:focus-within .card::after {
    opacity: 0.15;
}

.portafolio-modal-preview {
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1164 / 663;
    overflow: hidden;
    background-color: transparent;
    border-radius: var(--radio-4);
}

.portafolio-laptop-screen {
    position: absolute;
    top: 4%;
    left: 13%;
    z-index: 1;
    width: 74%;
    height: 84%;
    overflow: hidden;
    border-radius: 1.5% 1.5% 0 0;
}

.portafolio-laptop-screen img {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
    animation: portafolio-preview-scroll 5s ease-in-out infinite alternate;
}

.portafolio-laptop-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.portafolio-modal-work {
    width: calc(100% - 2rem);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.portafolio-modal-work ul {
    padding-left: 0;
    list-style: none;
    text-align: center;
}

.portafolio-carousel-controls {
    padding-bottom: 0.75rem;
}

.portafolio-carousel-controls .carousel-indicators {
    position: static;
    gap: 0.5rem;
}

.portafolio-modal-galeria {
    width: 100%;
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
}

.portafolio-carousel-controls .carousel-indicators button {
    width: 0.65rem;
    height: 0.65rem;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--azul2);
    opacity: 0.35;
}

.portafolio-carousel-controls .carousel-indicators button.active {
    opacity: 1;
}

.portafolio-carousel-arrow {
    line-height: 0;
}

.portafolio-carousel-arrow img {
    display: block;
    width: 32px;
    height: 32px;
}

@keyframes portafolio-preview-scroll {
    0%,
    12% {
        transform: translateY(0);
    }

    88%,
    100% {
        transform: translateY(calc(-1 * var(--portafolio-preview-scroll-distance, 0px)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .portafolio-laptop-screen img {
        animation: none;
    }
}

/***************************** FIN PORTAFOLIO ******************************/