@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

:root {
    --bg-color: #011425;
    --second-bg-color: #112e42;
    --text-color: #ededed;
    --main-color: #00abf0;

    /*colores slider*/
    --raisin-black: hsla(231, 10%, 14%, 1);
    --roman-silver: hsla(229, 10%, 57%, 1);
    --roman-silver2: rgb(63, 65, 73);
    --eerie-black: hsla(228, 9%, 10%, 1);
    --black: hsla(0, 0%, 0%, 1);
    --white: hsla(0, 0%, 100%, 1);
    --white_a10: hsla(0, 0%, 100%, 0.1);
    --white_a5: hsla(0, 0%, 100%, 0.05);



    /**
   * typography
   */

    /*--ff-syne: 'Syne', sans-serif;*/

    --fs-1: 4.8rem;
    --fs-2: 4.5rem;
    --fs-3: 4rem;
    --fs-4: 2.4rem;
    --fs-5: 2rem;
    --fs-6: 1.8rem;
    --fs-7: 1.4rem;
    --fs-8: 1.2rem;

    --fw-800: 800;
    --fw-700: 700;

    /**
    * transition
    */

    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
    --cubic-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --cubic-ease-out: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);

    /*Fin slider*/



    /**
   * COLORS slider 2
   */

    /** Background colors */
    --bg-wild-blue-yonder: hsla(216, 33%, 68%, 1);
    --bg-carolina-blue: hsla(199, 89%, 49%, 1);
    --bg-prussian-blue: hsla(216, 33%, 20%, 1);
    --bg-oxford-blue: hsla(222, 44%, 13%, 1);
    --bg-oxford-blue-2: hsla(222, 47%, 11%, 1);

    /** Text colors */
    --text-white: hsla(0, 0%, 100%, 1);
    --text-alice-blue: hsla(216, 100%, 95%, 1);
    --text-columbia-blue: hsla(199, 69%, 84%, 1);
    --text-wild-blue-yonder: hsla(216, 33%, 68%, 1);
    --text-carolina-blue: hsla(199, 89%, 49%, 1);
    --text-shadow-blue: hsla(217, 24%, 59%, 1);
    --text-slate-gray: hsla(217, 17%, 48%, 1);

    /** Gradient colors */
    --gradient-1: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%);
    --gradient-2: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea);
    --gradient-3: linear-gradient(0deg, #000d1a, transparent);

    /** Border colors */
    --border-wild-blue-yonder: hsla(216, 33%, 68%, 1);
    --border-prussian-blue: hsla(216, 33%, 20%, 1);
    --border-white: hsl(0, 0%, 100%);
    --border-white-alpha-15: hsla(0, 0%, 100%, 0.15);



    /**
   * TYPOGRAPHY
   */

    /** Font family */
    --fontFamily-noto_sans: 'Noto Sans', sans-serif;

    /** Font size */
    --fontSize-1: 2.9rem;
    --fontSize-2: 2.0rem;
    --fontSize-3: 1.8rem;
    --fontSize-4: 1.6rem;
    --fontSize-5: 1.5rem;
    --fontSize-6: 1.4rem;
    --fontSize-7: 1.2rem;
    --fontSize-8: 1.3rem;

    /** Font weight */
    --weight-medium: 500;
    --weight-semiBold: 600;
    --weight-bold: 700;
    --weight-extraBold: 800;

    /** Line height */
    --lineHeight-1: 1.3;
    --lineHeight-2: 1.5;
    --lineHeight-4: 1.5;

    /**
   * BOX SHADOW
   */

    --shadow-1: 0 8px 20px 0 hsla(0, 0%, 0%, 0.05);
    --shadow-2: 0px 3px 20px hsla(180, 90%, 43%, 0.2);

    /**
   * BORDER RADIUS
   */

    --radius-6: 6px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-48: 48px;
    --radius-circle: 50%;
    --radius-pill: 200px;

    /**
   * SPACING
   */

    --section-padding: 70px;

    /**
   * TRANSITION
   */

    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);


    /**FIN SLIDER 2**/
    /
}

/*-----------------------------------*\
  #TYPOGRAPHY SCALE
\*-----------------------------------*/

h1,
h2,
h3,
h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
}

h1 {
    font-size: 3.6rem;
}

h2 {
    font-size: 2.6rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.6rem;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-color);
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

button {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 1.6rem;
    line-height: 1.5;
    overflow-y: overlay;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: .3s;
    border-bottom: 1px solid rgba(0, 174, 239, 0.15);
}

.header.sticky {
    background: var(--bg-color);
}

.logo {
    position: relative;
    font-size: 2.5rem;
    color: var(--text-color);
    /*text-decoration: none;*/
    font-weight: 600;
    text-align: center;
    display: inline-flex;
    /* Solo si realmente necesitas manejar el SVG y texto internamente */
    align-items: center;
    gap: 2px;
}

.logo-img {
    width: 40px;
    /* Ancho del SVG */
    height: auto;
    /* Altura proporcional al ancho */
    display: block;
    /* Evita espacio extra alrededor del SVG */
}

.title_logo {
    line-height: 1;
    /* Elimina espacio adicional en el texto */
}

.navbar {
    position: relative;
}

/*.logo::before{
    content: '';
    position:  absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #011425;
    animation: showRight 1s ease forwards;
    animation-delay: .4s;
}*/

.navbar a {
    font-size: 1.7rem;
    color: var(--text-color);
    /*text-decoration: none;*/
    font-weight: 500;
    margin-left: 3.5rem;
    transition: .3s;
}

.navbar a:hover,
.navbar a.active {
    color: var(--main-color);
}

#menu-icon {
    position: relative;
    font-size: 3.6rem;
    color: var(--text-color);
    cursor: pointer;
    display: none;
}


section {
    padding: 5rem 9% 2rem;
}

.home {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 0 9%;
    background: url('../images/home2.jpg') no-repeat;
    background-size: cover;
    background-position: center;
}

.home-content {
    max-width: 60rem;
    z-index: 99;
}

.home-content h1 {
    position: relative;
    display: inline-block;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.home-content h1 span {
    color: var(--text-color);
}

.home-content .text-animate {
    position: relative;
    /*width: 26.8rem;*/
    width: 46rem;
}

.home-content .text-animate h3 {
    font-size: 2.6rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: .7px var(--main-color);
    background-image: linear-gradient(var(--main-color), var(--main-color));
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-position: -46rem 0;

}

.home.show-animate .home-content .text-animate h3 {
    animation: homeBgText 6s linear infinite;
    animation-delay: 2s;
}

.home-content .text-animate h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-right: 2px solid var(--main-color);
    z-index: -1;
}

.home.show-animate .home-content .text-animate h3::before {
    animation: homeCursorText 6s linear infinite;
    animation-delay: 2s;
}

.home-content h3 {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: #00abf0;
}

.home-content p {
    position: relative;
    font-size: 1.7rem;
    line-height: 1.7;
    margin: 4rem 0 4rem;
}

.btn-box {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: auto;
    max-width: 40rem;
}

.btn-box .btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    height: 5rem;
    background-color: var(--main-color);
    border: .2rem solid var(--main-color);
    border-radius: .8rem;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .1rem;
    color: var(--bg-color);
    white-space: nowrap;
    z-index: 1;
    overflow: hidden;
    transition: .5s;
}

.btn-box .btn:hover {
    color: var(--main-color);
}

.btn-box .btn:nth-child(2) {
    background: transparent;
    color: var(--main-color);
}

.btn-box .btn:nth-child(2):hover {
    color: var(--bg-color);
}

.btn-box .btn:nth-child(2)::before {
    background: var(--main-color);
}

.btn-box .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--bg-color);
    z-index: -1;
    transition: .5s;
}

.btn-box .btn:hover::before {
    width: 100%;
}

.btn-box .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    padding: .8rem 1.8rem;
    min-height: 5rem;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: .8rem;
    color: var(--main-color);
    font-size: 1.4rem;
    font-weight: 600;
}

.home-sci {
    position: absolute;
    bottom: 4rem;

}



.home-imgHover {
    position: absolute;
    top: 0;
    right: 0px;
    width: 45%;
    height: 100%;
    background: transparent;
    transition: 3s;
    /*animation: manipActiveHover .1s forwards;
    animation-delay: 4s;
    pointer-events: none;*/
}

.home-imgHover:hover {
    background-color: var(--bg-color);
    opacity: .8;
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*gap: 2rem;
    background: var(--second-bg-color);*/
    padding-bottom: 6rem;
}


.heading {
    position: relative;
    margin-top: 2rem;
    text-align: center;
}

span {
    color: var(--main-color);
}

.about-img {
    position: relative;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    display: flex;
    align-content: center;
    align-items: center;
}

.about-img img {
    width: 90%;
    border-radius: 50%;
    border: .2rem solid var(--main-color);
}

.about-img .circle-spin {
    position: absolute;
    top: 50%;
    left: 45%;
    /*50% original*/
    transform: translate(-50%, -50%) rotate(0);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top: .2rem solid var(--second-bg-color);
    border-bottom: .2rem solid var(--second-bg-color);
    border-left: .2rem solid var(--main-color);
    border-right: .2rem solid var(--main-color);
    animation: aboutSpinner 8s linear infinite;
}

.about-content {
    text-align: center;
}

.about-content h3 {
    position: relative;
    display: inline-block;
    font-size: 2.6rem;
}

.about-content p {
    position: relative;
    font-size: 1.6rem;
    /*margin: 2rem 0 3rem;*/
}

.btn-box.btns {
    display: inline-block;
    width: 15rem;
}

.btn-box.btns a::before {
    background: var(--second-bg-color);
}


.education {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: auto;
    padding-bottom: 5rem;
}

.education .education-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
}

.education-row .education-column {
    flex: 1 1 40rem;
}

.education-column .title {
    position: relative;
    display: inline-block;
    font-size: 2.5rem;
    margin: 0 0 1.5rem;
}

.education-column .education-box {
    position: relative;
    border-left: .2rem solid var(--main-color);
}

.education-box .education-content {
    position: relative;
    padding-left: 2rem;
}

.education-box .education-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1.1rem;
    width: 2rem;
    height: 2rem;
    background: var(--main-color);
    border-radius: 50%;
}

.education-content .content {
    position: relative;
    padding: 1.5rem;
    border: .2rem solid var(--main-color);
    border-radius: .6rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.education-content .content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--second-bg-color);
    z-index: -1;
    transition: .5s;
}

.education-content .content:hover::before {
    width: 100%;
}

.education-content .content .year {
    font-size: 1.5rem;
    color: var(--main-color);
    padding-bottom: .5rem;
}

.education-content .content .year i {
    padding-right: .5rem;
}

.education-content .content h3 {
    font-size: 2rem;
}

.education-content .content p {
    font-size: 1.6rem;
    padding-top: .5rem;
}


.skills {
    min-height: auto;
    padding-bottom: 7rem;
    background: var(--second-bg-color);
}

.skills h2 {
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.skills .skills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
}

.skills-row .skills-column {
    flex: 1 1 40rem;
}

.skills-column .title {
    position: relative;
    display: inline-block;
    font-size: 2.5rem;
    margin: 0 0 1.5rem;
}

.skills-column .skills-box {
    position: relative;
}

.skills-box .skills-content {
    position: relative;
    border: .2rem solid var(--main-color);
    border-radius: .6rem;
    padding: .5rem 1.5rem;
    z-index: 1;
    overflow: hidden;
}

.skills-box .skills-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--bg-color);
    z-index: -1;
    transition: .5s;
}

.skills-box .skills-content:hover::before {
    width: 100%;
}

.skills-content .progress {
    padding: 1rem 0;
}

.skills-content .progress h3 {
    font-size: 1.7rem;
    display: flex;
    justify-content: space-between;
}

.skills-content .progress h3 span {
    color: var(--text-color);
}

.skills-content .progress .bar {
    height: 2.5rem;
    border-radius: .6rem;
    border: .2rem solid var(--main-color);
    padding: .5rem;
    margin: 1rem 0;
}

.skills-content .progress .bar span {
    display: block;
    height: 100%;
    border-radius: .3rem;
    background: var(--main-color);
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(1) .bar span {
    width: 90%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(2) .bar span {
    width: 80%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(3) .bar span {
    width: 65%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(4) .bar span {
    width: 75%;
}


.skills-column:nth-child(2) .skills-content .progress:nth-child(1) .bar span {
    width: 95%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(2) .bar span {
    width: 67%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(3) .bar span {
    width: 85%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(4) .bar span {
    width: 60%;
}



.contact {
    min-height: auto;
    padding-bottom: 7rem;
}

.contact h2 {
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.contact form {
    max-width: 70rem;
    margin: 0 auto;
    text-align: center;
}

.contact form .input-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact form .input-box .input-field {
    position: relative;
    width: 49%;
    margin: .8rem 0;
}

.contact form .input-box .input-field input,
.contact form .textarea-field textarea {
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--text-color);
    background: transparent;
    border-radius: .6rem;
    border: .2rem solid var(--main-color);
}

.contact form .input-box .input-field input::placeholder,
.contact form .textarea-field textarea::placeholder {
    color: var(--text-color);
}

.contact form .focus {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--second-bg-color);
    border-radius: .6rem;
    z-index: -1;
    transition: .5s;
}

.contact form .input-box .input-field input:focus~.focus,
.contact form .input-box .input-field input:valid~.focus,
.contact form .textarea-field textarea:focus~.focus,
.contact form .textarea-field textarea:valid~.focus {
    width: 100%;
}

.contact form .textarea-field {
    position: relative;
    margin: .8rem 0 2.7rem;
    display: flex;
}

.contact form .textarea-field textarea {
    resize: none;
}

.contact form .btn-box.btns .btn {
    cursor: pointer;
}






/*-----------------------------------*\
  #SITE FOOTER
\*-----------------------------------*/

.site-footer {
    background: var(--bg-color);
    border-top: .1rem solid rgba(0, 171, 240, .15);
    margin-top: 4rem;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 3rem;
    max-width: 129rem;
    margin: 0 auto;
    padding: 5rem 9% 3rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1.6rem;
}

.footer-logo i {
    color: var(--main-color);
    font-size: 2.4rem;
}

.footer-brand .footer-socials {
    display: flex;
    gap: 1rem;
}

.footer-brand .footer-socials a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 20px;
    color: var(--main-color);
    text-decoration: none;
    z-index: 1;
    overflow: hidden;
    transition: .5s;
}

.footer-brand .footer-socials a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--main-color);
    z-index: -1;
    transition: .5s;
}

.footer-brand .footer-socials a:hover {
    color: var(--bg-color);
}

.footer-brand .footer-socials a:hover::before {
    width: 100%;
}

.footer-col h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 1.4rem;
}

.footer-col a {
    display: block;
    font-size: 1.4rem;
    color: var(--text-color);
    opacity: .7;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: var(--transition-2);
}

.footer-col a:hover {
    opacity: 1;
    color: var(--main-color);
}

.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 129rem;
    margin: 0 auto;
    padding: 2rem 9%;
    border-top: .1rem solid rgba(0, 171, 240, .15);
}

.site-footer-bottom p {
    font-size: 1.3rem;
    color: var(--text-color);
    opacity: .6;
    margin: 0;
}

.footer-top-btn {
    width: 4rem;
    height: 4rem;
    border-radius: .8rem;
    background: var(--main-color);
    color: var(--bg-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.8rem;
    transition: var(--transition-2);
}

.footer-top-btn:hover {
    background: var(--text-color);
}






@media (max-width: 767px) {
    .site-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .site-footer-grid {
        grid-template-columns: 1fr;
    }

    .site-footer-bottom {
        flex-direction: column;
        gap: 1.2rem;
        text-align: center;
    }
}




/*********************/
/*SLIDER*/






.container {
    width: 100%;
}



.slider {
    --slider-items: 4;
    --item-gap: 12px;
    margin: 24px;
    margin-block-start: 30px;
    overflow: hidden;
}



.slider-container {
    position: relative;
    display: flex;
    gap: var(--item-gap);
    transition: transform var(--cubic-ease-out);
}

.slider-item {
    --total-gap: calc(var(--item-gap) * (var(--slider-items) - 1));
    --item-width: calc((100% / var(--slider-items)) - (var(--total-gap) / var(--slider-items)));

    min-width: var(--item-width);
    width: var(--item-width);
    position: relative;
}
.slider-item .card-blog {
    height: 100%;
    box-sizing: border-box;
}

.slider-control {
    position: relative;
    max-width: max-content;
    padding-block: 8px;
    opacity: 0.5;
    background: var(--bg-oxford-blue);
    cursor: pointer;
}

.slider-control .line {
    width: 30px;
    height: 1px;
    background-color: var(--white);
}

.slider-control .arrow {
    position: absolute;
    transform: translateY(-60%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-style: solid;
    border-color: var(--white);
}

.slider-control.prev .arrow {
    left: 0;
    border-width: 0 0 1px 1px;
}

.slider-control.next .arrow {
    right: 0;
    border-width: 1px 1px 0 0;
}

.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-block-start: 40px;
}


.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/*-----------------------------------*\
  #SERVICE
\*-----------------------------------*/

.service-card {
    position: relative;
    background-color: var(--bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1rem;
    height: 100%;
    padding: 25px 20px 20px 20px;
    transition: var(--transition-2);
}

/*nuevos estilos*/
.service-card h3 {
    font-size: 2.4rem;
}

.service-card ul,
li {
    list-style-type: none;
}

box-icon {
    display: block;
}

box-icon {
    pointer-events: none;
}

/*fin nuevos estilos*/

.service-card .card-icon i {
    color: var(--main-color);
    font-size: 5rem;
}

.service-card .card-title {
    color: var(--text-color);
    margin-block: 16px;
    font-size: 2.4rem;
}

.service-card .card-text {
    color: var(--text-color);
    opacity: .8;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.service-card .card-number {
    margin-inline-start: auto;
    font-weight: var(--fw-800);
    line-height: 0.6;
    max-width: max-content;
    margin-block-start: 12px;
    -webkit-text-stroke: 1px var(--main-color);
    -webkit-text-fill-color: transparent;
    opacity: 0.35;
}

.service-card:is(:hover, :focus-within) {
    background-color: var(--bg-color);
    border-color: var(--main-color);
    transform: translateY(-.6rem);
}


.text-lg {
    font-family: var(--ff-syne);
    font-size: var(--fs-1);
    display: none;
}


.layer-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Botones prev/next solo dentro de #servicios: no afecta otros sliders del sitio (ej. blog) */
#servicios .slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-block-start: 3rem;
}

#servicios .slider-control {
    position: relative;
    width: 3rem;
    height: 3rem;
    max-width: none;
    padding-block: 0;
    opacity: 1;
    background: transparent;
    border-radius: 50%;
    border: .15rem solid var(--main-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-2);
}

#servicios .slider-control:hover {
    background-color: var(--main-color);
}

#servicios .slider-control .line {
    display: none;
}

#servicios .slider-control .arrow {
    position: static;
    transform: none;
    width: .8rem;
    height: .8rem;
    border-style: solid;
    border-color: var(--main-color);
    border-width: 0 .2rem .2rem 0;
    transition: var(--transition-2);
}

#servicios .slider-control:hover .arrow {
    border-color: var(--bg-color);
}

#servicios .slider-control.prev .arrow {
    transform: rotate(135deg);
    margin-left: .4rem;
}

#servicios .slider-control.next .arrow {
    transform: rotate(-45deg);
    margin-right: .4rem;
}

#servicios .slider-container {
    padding-block-start: 1rem;
}

/*END*/

/*END*/



/*-----------------------------------*\
  #PORTFOLIO
\*-----------------------------------*/

.portfolio {
    padding: 0;
    background-color: var(--second-bg-color);
}

.portfolio .slider {
    --item-gap: 16px;
}

.portfolio-card {
    position: relative;
    background-color: transparent;
    transition: var(--cubic-ease-out);
}

.portfolio-card .img-cover {
    transition: var(--cubic-ease-out);
}

.portfolio-card .card-content {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    width: 100%;
    transform: translate(-55%, -50%);
    opacity: 0;
    transition: var(--cubic-ease-out);
    z-index: 1;
}

.portfolio-card .card-title {
    font-size: 2.6rem;
}

.portfolio-card .card-text {
    font-size: 1.6rem;
    color: var(--white);
}

.portfolio-card:is(:hover, :focus-within) .img-cover {
    opacity: 0.1;
    transform: scale(0.95);
}

.portfolio-card:is(:hover, :focus-within) .card-content {
    transform: translate(-50%, -50%);
    opacity: 1;
}














/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container_2 {
    padding-inline: 16px;
}

.card2 {
    /*background-color: var(--bg-oxford-blue);*/
    background-color: var(--bg-color);
    /*border: 1px solid var(--border-prussian-blue);*/
    border-radius: var(--radius-8);
}

.img-holder {
    aspect-ratio: var(--width) / var(--height);
    background-color: var(--bg-prussian-blue);
    overflow: hidden;
}

.img-cover2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.grid-list {
    display: grid;
    gap: 30px;
}

.card2-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: var(--fontSize-6);
    margin-block: 20px;
}

.card2-wrapper :is(.card2-tag, .wrapper) {
    display: flex;
    gap: 3px;
    align-items: center;
}








/*-----------------------------------*\
  #TOPICS
\*-----------------------------------*/

.topic-card {
    padding: 24px;
    border-radius: var(--radius-8);
}

.topic-card h2 {
    /*font-size: 3rem;*/
}

.topic-card .card2-content {
    margin-block-end: 15px;
}

.topic-card .card2-text {
    color: var(--text-wild-blue-yonder);
    font-size: var(--fontSize-6);
    margin-block: 15px 20px;
}

.btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--bg-prussian-blue);
    border-radius: var(--radius-circle);
    color: var(--white);
}

.btn-icon:is(:hover, :focus-visible) {
    background: var(--gradient-1);
}

.slider2 {
    --slider-items: 1;
    overflow: hidden;
}

.slider2-list {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform var(--transition-2);
}

.slider2-item {
    min-width: 100%;
}

.slider2-card {
    position: relative;
}

.slider2-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: var(--gradient-3);
    border-radius: var(--radius-8);
}

.slider2-list .slider2-banner {
    border-radius: var(--radius-8);
}

.slider2-content {
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.slider2-title {
    color: var(--text-columbia-blue);
    font-weight: var(--weight-bold);
    margin-block-end: 5px;
    transition: var(--transition-1);
}

.slider2-card:is(:hover, :focus-visible) .slider2-title {
    color: var(--text-carolina-blue);
}

.slider2-subtitle {
    font-size: var(--fontSize-7);
    color: white;
}




/*-----------------------------------*\
  #POPULAR TAGS
\*-----------------------------------*/

.tags .grid-list {
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
}

.tag-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px;
    border-radius: var(--radius-16);
}

.tag-btn:is(:hover, :focus-visible) {
    box-shadow: var(--shadow-2);
    background-image: linear-gradient(var(--bg-oxford-blue), var(--bg-oxford-blue)), var(--gradient-1);
    background-clip: padding-box, border-box;
    border-color: transparent;
    transform: translateY(-2px);
    transition: var(--transition-1);
}

.tag-btn img {
    width: 100%;
    max-width: 32px;
}











/*-----------------------------------*\
  #BLOG GALERIA
\*-----------------------------------*/

section.galeria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    row-gap: 3rem;
    width: 100%;
    max-width: 129rem;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 2rem 9% 4rem;
}


/*-----------------------------------*\
  TARJETAS BLOG
\*-----------------------------------*/

section.galeria div,
.card-blog {
    background-color: var(--bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1rem;
    overflow: hidden;
    transition: var(--transition-2);
    display: flex;
    flex-direction: column;
    height: 100%;
}

section.galeria div:hover,
.card-blog:hover {
    border-color: var(--main-color);
    transform: translateY(-.6rem);
}


/* Imagen */

section.galeria div .card-imagen,
.card-blog .card-imagen {
    width: 100%;
    overflow: hidden;
}

section.galeria div img,
.card-blog .card-imagen img {
    width: 100%;
    height: auto;
    display: block;
}


/* Título */

section.galeria div h3,
.card-blog h3 {
    width: 100%;
    min-height: 5.5rem;
    margin: 0 !important;
    padding: 1.4rem 1.6rem .4rem;
    font-size: 1.4rem;
    line-height: 1.35;
    color: var(--text-color);
    font-weight: 400;
    border-top: none;
    text-align: left;
}


/* Párrafo */

section.galeria div p,
.card-blog p {
    width: 100%;
    margin: 0 !important;
    padding: 0 1.6rem 1.6rem;
    font-size: 1.3rem;
    color: var(--text-color);
    opacity: .7;
}


/* Enlace de las tarjetas de galería */

section.galeria div a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    text-align: left;
}


/* Fecha */

section.galeria div time,
.card-blog time {
    display: block;
    margin-top: auto;
    padding: 1.4rem 1.6rem .4rem;
    font-size: 1.2rem;
    color: var(--text-color);
    opacity: .6;
    text-align: right;
}



/*-----------------------------------*\
  RESPONSIVE
\*-----------------------------------*/

/* Tablet: 2 tarjetas */

@media screen and (max-width: 991px) {

    section.galeria {
        grid-template-columns: repeat(2, 1fr);
        padding-left: 6%;
        padding-right: 6%;
    }

}


/* Móvil pequeño: 1 tarjeta */

@media screen and (max-width: 480px) {

    section.galeria {
        grid-template-columns: 1fr;
        padding: 2rem 5% 3rem;
        gap: 1.5rem;
        row-gap: 3rem;
    }

}










/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for large than 575px screen
 */

@media (min-width: 575px) {


    /**
   * REUSED STYLE
   */

    .container_2 {
        max-width: 540px;
        width: 100%;
        margin-inline: auto;
    }



    /**
   * TOPICS
   */

    .topics .section-title {
        font-size: 2rem;
    }

    .slider2 {
        --slider-items: 3;
    }

    .slider2-item {
        min-width: calc(33.33% - 13.33px);
    }


}





/**
 * responsive for large than 768px screen
 */

@media (min-width: 768px) {

    /**
   * REUSED STYLE
   */

    .container_2 {
        max-width: 720px;
    }

}



/**
 * responsive for large than 992px screen
 */

@media (min-width: 992px) {

    /** 
   * TOPICS
   */

    .topic-card {
        display: grid;
        grid-template-columns: 0.3fr 1fr;
        align-items: center;
        gap: 20px;
    }




    /**
   * TAGS
   */

    .tags .grid-list {
        grid-template-columns: repeat(4, 1fr);
    }

}





/**
 * responsive for large than 1200px screen
 */

@media (min-width: 1200px) {

    /**
   * REUSED STYLE
   */

    .container_2 {
        max-width: 1140px;
    }


    /**
   * TAGS
   */

    .tags .grid-list {
        grid-template-columns: repeat(6, 1fr);
    }





}
















/*BREAKPOINT*/


@media (max-width: 1200px) {
    html {
        font-size: 55%;
    }

    /*slider*/
    .container {
        width: 100%;
    }

    .slider {
        --slider-items: 3;
    }

}

@media (max-width: 991px) {
    .header {
        padding: 2rem 4%;
    }

    section {
        padding: 5rem 4% 2rem;
    }

    .home {
        padding: 0 4%;
    }

    .footer {
        padding: 2rem 4%;
    }


    /*slider*/
    .container {
        width: 100%;
    }

    .slider {
        --slider-items: 2;
    }

}

@media (max-width: 850px) {
    .animate.home-img {
        width: 55%;
    }

}

@media (max-width: 767px) {
    html {
        background: var(--bg-color);
    }

    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        padding: 1rem 4%;
        background: var(--main-color);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
        z-index: 1;
        transition: .25s ease;
        transition-delay: .25s;
    }

    .navbar.active {
        left: 0;
        transition-delay: 0s;
    }

    .navbar .active-nav {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        z-index: -1;
        transition: .25s ease;
        transition-delay: 0s;
    }

    .navbar.active .active-nav {
        left: 0;
        transition-delay: .25s;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
        transform: translateX(-20rem);
        transition: .25s ease;
        transition-delay: 0s;
    }

    .navbar.active a {
        transform: translateX(0);
        transition-delay: .25s;
    }

    .home-imgHover {
        pointer-events: none;
        background: var(--bg-color);
        opacity: .6;
    }

}


@media (max-width: 520px) {
    html {
        font-size: 50%;
    }

    .home-content h1 {
        display: flex;
        flex-direction: column;
    }

    .home-sci {
        width: 160px;
    }

    .home-sci a {
        width: 38px;
        height: 38px;
    }


    /*slider*/
    .container {
        width: 100%;
    }

    .slider {
        --slider-items: 1;
    }


}

@media (max-width: 462px) {
    .home-content h1 {
        font-size: 5.2rem;
    }

    .education {
        padding: 5rem 4% 5rem 5%;
    }



    .footer {
        flex-direction: column-reverse;
    }

    .footer p {
        padding-top: 2rem;
        text-align: center;
    }



}

@media (max-width: 371px) {
    .home {
        justify-content: center;
    }

    .home-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .home-content h1 {
        font-size: 5rem;
    }

}







/*KEYFRAMES ANIMATION*/

@keyframes homeBgText {

    0%,
    10%,
    100% {
        background-position: -46rem 0;
        /*background-position: -50.5rem 0;*/
    }

    65%,
    85% {
        background-position: 0 0;
    }
}

@keyframes homeCursorText {

    0%,
    10%,
    100% {
        width: 0;
    }

    65%,
    78%,
    85% {
        width: 100%;
        opacity: 1;
    }

    75%,
    81% {
        opacity: 0;
    }
}

@keyframes aboutSpinner {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



@keyframes showRight {
    100% {
        width: 0;
    }
}

@keyframes manipActiveHover {
    100% {
        pointer-events: auto;
    }
}




/* =========================================
   DROPDOWN MENU
========================================= */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-header {
    display: flex;
    align-items: center;
    margin-left: 3.5rem;
}

/* Enlace principal */
.dropdown-header .drop-link {
    margin-left: 0;
}

/* Flecha */
.dropdown-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.5rem;
    padding: .5rem;
    margin-left: .5rem;
}

.dropdown-toggle:hover {
    color: var(--main-color);
}


/* =========================================
   SUBMENU DESKTOP
========================================= */

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 3.5rem;
    min-width: 210px;
    padding: .8rem 0;
    background: var(--second-bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: .6rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
    z-index: 1000;
}

/* Mostrar con hover en PC */
@media (min-width: 768px) {

    .dropdown:hover .dropdown-content {
        display: block;
    }

}


/* Enlaces del submenu */
.dropdown-content a {
    display: block;
    margin: 0 !important;
    padding: 1rem 1.5rem;
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: 400;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background: var(--bg-color);
    color: var(--main-color);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .dropdown {
        display: block;
        width: 100%;
    }

    .dropdown-header {
        width: 100%;
        margin-left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* El enlace ocupa el espacio disponible */
    .dropdown-header .drop-link {
        flex: 1;
        margin: 0;
        padding: 1.5rem 0;
    }

    /* Mostrar flecha */
    .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4.5rem;
        height: 4.5rem;
        margin: 0;
        padding: 0;
        color: var(--text-color);
        font-size: 1.8rem;
    }

    /* Submenu */
    .dropdown-content {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Abrir */
    .dropdown.active .dropdown-content {
        display: block;
    }

    /* Categorías */
    .dropdown-content a {
        display: block;

        padding: 1rem 0 1rem 2rem;

        font-size: 1.8rem;
        color: var(--roman-silver);
    }

    .dropdown-content a:hover {
        background: transparent;
        color: var(--main-color);
    }

    /* Girar flecha */
    .dropdown.active .dropdown-toggle span {
        display: inline-block;
        transform: rotate(180deg);
    }

}



/*-----------------------------------*\
  #SOPORTE HERO + SERVICIOS MINI
\*-----------------------------------*/

.soporte-hero {

    margin: 0 auto;
    box-sizing: border-box;
    padding: 14rem 9% 4rem;

}

.soporte-hero .breadcrumb {
    font-size: 1.3rem;
    color: var(--text-color);
    opacity: .55;
    margin-bottom: 1.2rem;
}

.soporte-hero .breadcrumb a {
    color: var(--text-color);
    text-decoration: none;
}

.soporte-hero .breadcrumb span {
    color: var(--main-color);
}

.soporte-hero .hero-row {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.soporte-hero .icon-box {
    width: 5.4rem;
    height: 5.4rem;
    border-radius: 1.1rem;
    background: var(--second-bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.soporte-hero .icon-box i {
    color: var(--main-color);
    font-size: 2.6rem;
}

.soporte-hero h1 {
    color: var(--text-color);
    margin: 0 0 .4rem;
}

.soporte-hero h1 span {
    color: var(--main-color);
}

.soporte-hero .hero-row p {
    font-size: 1.5rem;
    color: var(--text-color);
    opacity: .75;
    margin: 0;
}

.soporte-hero .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.6rem;
}

.soporte-hero .chip {
    font-size: 1.3rem;
    font-weight: 600;
    padding: .6rem 1.6rem;
    border-radius: 2rem;
}

.soporte-hero .chip.chip-fill {
    background: var(--main-color);
    color: var(--bg-color);
}

.soporte-hero .chip.chip-outline {
    background: transparent;
    border: .1rem solid rgba(0, 171, 240, .35);
    color: var(--text-color);
    opacity: .85;
}

.section-label {
    padding: 0 9%;
    max-width: 129rem;
    margin: 0 auto;
}

.section-label h2 {
    color: var(--text-color);
    margin: 0 0 .3rem;
}

.section-label p {
    font-size: 1.4rem;
    color: var(--text-color);
    opacity: .65;
    margin: 0;
}

.services-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    max-width: 129rem;
    margin: 2rem auto 0;
    padding: 0 9%;
}

.services-mini .mini-card {
    background-color: var(--bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1rem;
    padding: 2rem 1.6rem;
    transition: var(--transition-2);
}

.services-mini .mini-card:hover {
    border-color: var(--main-color);
    transform: translateY(-.4rem);
}

.services-mini .mini-card i {
    color: var(--main-color);
    font-size: 2.6rem;
}

.services-mini .mini-card p {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 1.2rem 0 0;
}

.soporte-cta {
    max-width: 129rem;
    margin: 2rem auto 0;
    padding: 0 9%;
}

.related-posts {
    margin-top: 2rem;
    padding-top: 3rem;
    border-top: .1rem solid rgba(0, 171, 240, .15);
}

@media (max-width: 991px) {
    .services-mini {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .services-mini {
        grid-template-columns: 1fr;
    }

    .soporte-hero .hero-row {
        align-items: flex-start;
    }
}



.service-card .card-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.service-card .card-imagen img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


.service-card .card-titulo {
    color: var(--text-color);
    margin-block: 16px;
    font-size: 1.7rem;
    font-weight: 400;
}

/*END*/












/* =====================================================
   BLOG SEARCH & CATEGORIES
   ===================================================== */

.blog-explorer {
    width: 100%;
    padding: 14px 9% 0;

}

.blog-explorer__container {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


/* =====================================================
   SEARCH
   ===================================================== */

.blog-search {
    width: 100%;
}

.blog-search__box {
    position: relative;
    display: flex;
    align-items: center;

    width: 100%;
    height: 52px;

    background: #001321;
    border: 1px solid rgba(0, 174, 239, 0.25);
    border-radius: 10px;

    transition: border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.blog-search__box:focus-within {
    border-color: #00aeef;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.08);
}


/* Icono izquierdo */

.blog-search__icon {
    position: absolute;
    left: 17px;

    font-size: 20px;
    color: #00aeef;

    pointer-events: none;
}


/* Input */

.blog-search__input {
    width: 100%;
    height: 100%;

    padding: 0 55px 0 48px;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
}

.blog-search__input::placeholder {
    color: #71808c;
}

.blog-search__input::-webkit-search-cancel-button {
    filter: invert(1);
}


/* Botón */

.blog-search__button {
    position: absolute;
    right: 6px;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 7px;

    background: #00aeef;
    color: #001827;

    cursor: pointer;

    transition: background 0.25s ease,
        transform 0.2s ease;
}

.blog-search__button i {
    font-size: 19px;
}

.blog-search__button:hover {
    background: #19baf2;
}

.blog-search__button:active {
    transform: scale(0.94);
}


/* =====================================================
   CATEGORIES
   ===================================================== */

.blog-categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.blog-categories::-webkit-scrollbar {
    display: none;
}


/* Categoría */

.blog-category {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 36px;
    padding: 7px 18px;

    border: 1px solid rgba(0, 174, 239, 0.22);
    border-radius: 20px;

    background: #001321;

    color: #d7e0e5;

    text-decoration: none;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease;
}


/* Iconos */

.blog-category i {
    font-size: 15px;
    color: #00aeef;
}


/* Hover */

.blog-category:hover {
    color: #ffffff;

    background: rgba(0, 174, 239, 0.08);

    border-color: #00aeef;

    transform: translateY(-1px);
}


/* Categoría activa */

.blog-category--active {
    background: #00aeef;
    border-color: #00aeef;

    color: #001827;
}

.blog-category--active:hover {
    background: #19baf2;
    border-color: #19baf2;

    color: #001827;
}

.blog-category--active i {
    color: #001827;
}



/*-----------------------------------*\
  #BLOG CATEGORY SECTIONS
\*-----------------------------------*/

.blog-category-section {
    max-width: 129rem;
    margin: 0 auto;
    padding: 3rem 9% 0;
}

.blog-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: .5rem;
    border-bottom: .1rem solid rgba(0, 171, 240, .15);
    padding-bottom: 1.4rem;
}

.blog-category-heading h2 {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--text-color);
    margin: 0;
}

.blog-category-heading h2 i {
    color: var(--main-color);
    font-size: 2.2rem;
}

.blog-category-viewall {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--main-color);
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.blog-category-viewall i {
    font-size: 1.7rem;
    transition: var(--transition-2);
}

.blog-category-viewall:hover i {
    transform: translateX(.3rem);
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 767px) {

    .blog-explorer {
        padding: 28px 16px;
    }

    .blog-explorer__container {
        max-width: 100%;
    }

    .blog-search__box {
        height: 50px;
    }

    .blog-categories {
        gap: 8px;
        margin-top: 12px;
        justify-content: flex-start;
    }

    .blog-category {
        padding: 7px 15px;
    }
}



/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 480px) {

    .blog-explorer {
        padding: 22px 14px;
    }

    .blog-search__box {
        height: 48px;
    }

    .blog-search__input {
        font-size: 13px;
        padding-left: 44px;
        padding-right: 50px;
    }

    .blog-search__icon {
        left: 14px;
        font-size: 19px;
    }

    .blog-search__button {
        right: 5px;

        width: 38px;
        height: 38px;
    }

    .blog-categories {
        gap: 8px;
        margin-top: 12px;
        justify-content: flex-start;
    }

    .blog-category {
        min-height: 34px;
        padding: 6px 13px;
        font-size: 11px;
    }

    .blog-category i {
        font-size: 14px;
    }
}





/*-----------------------------------*\
  #SERVICES HUB
\*-----------------------------------*/

.services-hub {
    padding: 5rem 9%;
}

.services-hub-heading {
    text-align: center;
    margin-bottom: 3rem;
}

.services-hub-heading h2 {
    color: var(--text-color);
    margin: 0 0 .6rem;
}

.services-hub-heading h2 span {
    color: var(--main-color);
}

.services-hub-heading p {
    font-size: 1.5rem;
    color: var(--text-color);
    opacity: .7;
    margin: 0;
}

/* Escritorio: 4 columnas fijas. La 5ta tarjeta (y siguientes) saltan a una nueva fila solas */
.services-hub-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
    gap: 2rem;
    max-width: 129rem;
    margin: 0 auto;
    padding-top: 1.6rem;
}

.service-hub-card {
    position: relative;
    background-color: var(--bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1.2rem;
    padding: 2.6rem 2.2rem;
    transition: var(--transition-2);
}

.service-hub-card:hover {
    border-color: var(--main-color);
    transform: translateY(-.6rem);
}

.service-hub-card.featured {
    border: .2rem solid var(--main-color);
}

.service-hub-tag {
    position: absolute;
    top: -1.1rem;
    right: 1.6rem;
    background: var(--main-color);
    color: var(--bg-color);
    font-size: 1.1rem;
    font-weight: 700;
    padding: .4rem 1.2rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.service-hub-icon {
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 1rem;
    background: var(--second-bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
}

.service-hub-icon i {
    color: var(--main-color);
    font-size: 2.4rem;
}

.service-hub-card h3 {
    color: var(--text-color);
    margin: 0 0 .8rem;
}

.service-hub-card>p {
    font-size: 1.4rem;
    color: var(--text-color);
    opacity: .75;
    line-height: 1.6;
    margin: 0 0 1.6rem;
}

.service-hub-card ul {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.service-hub-card ul li {
    font-size: 1.3rem;
    color: var(--text-color);
    opacity: .65;
    padding-left: 1.8rem;
    position: relative;
    margin-bottom: .6rem;
}

.service-hub-card ul li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--main-color);
    font-weight: 700;
}

.service-hub-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--main-color);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
}

.service-hub-link i {
    font-size: 1.8rem;
    transition: var(--transition-2);
}

.service-hub-link:hover i {
    transform: translateX(.3rem);
}

/* Pantallas medianas: 2 columnas antes de pasar al carrusel movil */
@media (max-width: 991px) and (min-width: 768px) {
    .services-hub-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Movil: carrusel deslizable con los dedos, una tarjeta por vista */
@media (max-width: 767px) {
    .services-hub-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1.6rem;
        padding-top: 1.6rem;
        padding-bottom: 1rem;
        margin: 0 -5%;
        padding-inline: 5%;
        scroll-padding-inline: 5%;
    }

    .services-hub-track::-webkit-scrollbar {
        display: none;
    }

    .services-hub-track {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .service-hub-card {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }

    .service-hub-card.featured {
        margin-top: .5rem;
    }
}

/*FIN DE SERVIS HUB*/





/*-----------------------------------*\
  #CTA BANNER
\*-----------------------------------*/

.cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    margin: 4rem 9%;
    padding: 4rem 5rem;
    background: linear-gradient(135deg, var(--bg-color), var(--second-bg-color));
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1.2rem;
    overflow: hidden;
    position: relative;
}

.cta-banner-text h2 {
    color: var(--text-color);
    margin: 0 0 1rem;
}

.cta-banner-text h2 span {
    color: var(--main-color);
}

.cta-banner-text>p {
    font-size: 1.5rem;
    color: var(--text-color);
    opacity: .75;
    margin: 0 0 2rem;
}

.cta-banner-graphic {
    position: relative;
    width: 20rem;
    height: 20rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-gauge {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--main-color) 0deg 260deg, rgba(0, 171, 240, .12) 260deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.4rem), #000 calc(100% - 1.4rem));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.4rem), #000 calc(100% - 1.4rem));
}

.cta-banner-graphic i {
    position: relative;
    font-size: 8rem;
    color: var(--main-color);
}



@media (max-width: 767px) {
    .cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 3.5rem 9%;
        margin: 3rem 9%;
    }

    .cta-banner-text .btn-box {
        justify-content: center;
    }

    .cta-banner-graphic {
        width: 14rem;
        height: 14rem;
    }

    .cta-banner-graphic i {
        font-size: 5.5rem;
    }
}





/*-----------------------------------*\
  #TRUST BAR
\*-----------------------------------*/

.trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3rem 9%;
    padding: 2.4rem 3rem;
    background-color: var(--bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1.2rem;
}


.trust-item {
    flex: 1 1 20rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1rem 2rem;
    position: relative;
}

.trust-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .1rem;
    height: 3.6rem;
    background: rgba(0, 171, 240, .2);
}

.trust-bar .trust-item i {
    color: var(--main-color);
    font-size: 2.8rem;
    flex-shrink: 0;
}

.trust-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 .2rem;
}

.trust-text {
    font-size: 1.2rem;
    color: var(--text-color);
    opacity: .65;
    margin: 0;
}

@media (max-width: 991px) {
    .trust-item:nth-child(2)::after {
        display: none;
    }

    .trust-item:not(:last-child)::after {
        display: none;
    }

    .trust-item {
        flex: 1 1 45%;
    }
}

@media (max-width: 480px) {
    .trust-item {
        flex: 1 1 100%;
    }
}







/*-----------------------------------*\
  #FAQ
\*-----------------------------------*/

.faq-section {
    max-width: 129rem;
    margin: 0 auto;
    padding: 5rem 9%;
}

.faq-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.faq-heading h2 {
    color: var(--text-color);
    margin: 0 0 .6rem;
}

.faq-heading h2 span {
    color: var(--main-color);
}

.faq-heading>div>p {
    font-size: 1.4rem;
    color: var(--text-color);
    opacity: .7;
    margin: 0;
}

.faq-see-all {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--main-color);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.faq-see-all i {
    font-size: 1.8rem;
    transition: var(--transition-2);
}

.faq-see-all:hover i {
    transform: translateX(.3rem);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}

.faq-item {
    background-color: var(--bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1rem;
    padding: 1.6rem 2rem;
    transition: var(--transition-2);
}

.faq-item:hover {
    border-color: rgba(0, 171, 240, .5);
}

.faq-item[open] {
    border-color: var(--main-color);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '\ea4d';
    font-family: 'boxicons';
    font-size: 1.8rem;
    color: var(--main-color);
    transition: var(--transition-2);
    flex-shrink: 0;
    margin-left: 1rem;
}

.faq-item[open] summary::after {
    transform: rotate(180deg);
}

.faq-item p {
    font-size: 1.4rem;
    color: var(--text-color);
    opacity: .75;
    line-height: 1.6;
    margin: 1.2rem 0 0;
}

@media (max-width: 767px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}






/*-----------------------------------*\
  #CONTACT CARDS
\*-----------------------------------*/

.contact-cards {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.4rem;
    max-width: 129rem;
    margin: 0 auto;
    padding: 5rem 9%;
    /*align-items: start;*/
}

.contact-form-card,
.contact-info-card {
    background-color: var(--bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1.2rem;
    padding: 3rem;
}



.contact-info-card {
    display: flex;
    flex-direction: column;
}

.contact-map {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 20rem;
    border-radius: 1rem;
    overflow: hidden;
    margin-top: 2.4rem;
}


.contact-form-card h3,
.contact-info-card h3 {
    color: var(--text-color);
    margin: 0 0 .6rem;
}

.contact-form-card>p {
    font-size: 1.4rem;
    color: var(--text-color);
    opacity: .7;
    margin: 0 0 2.4rem;
}

.form-group {
    margin-bottom: 1.8rem;
}

.form-group label {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: .6rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--second-bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: .8rem;
    padding: 1.2rem 1.4rem;
    font-size: 1.4rem;
    color: var(--text-color);
    font-family: inherit;
    outline: none;
    resize: vertical;
    transition: var(--transition-2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-color);
    opacity: .45;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--main-color);
}

.contact-form-card .btn-box {
    width: 100%;
    max-width: none;
}

.contact-form-card .btn-box .btn {
    width: 100%;
    cursor: pointer;
}

.contact-info-card>h3 {
    margin-bottom: 2rem;
}

.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    margin-bottom: 2rem;
}

.contact-info-row i {
    color: var(--main-color);
    font-size: 2.2rem;
    flex-shrink: 0;
    margin-top: .2rem;
}

.info-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 .3rem;
}

.info-value {
    font-size: 1.4rem;
    color: var(--main-color);
    opacity: .9;
    margin: 0;
    line-height: 1.5;
}

.contact-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    margin-top: 2.4rem;
}

.contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 991px) {
    .contact-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .contact-form-card,
    .contact-info-card {
        padding: 2.2rem 1.8rem;
    }
}




/*-----------------------------------*\
  #SOCIAL ICONS (reusable)
\*-----------------------------------*/

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 20px;
    color: var(--main-color);
    text-decoration: none;
    z-index: 1;
    overflow: hidden;
    transition: .5s;
}

.social-icons a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--main-color);
    z-index: -1;
    transition: .5s;
}

.social-icons a:hover {
    color: var(--bg-color);
}

.social-icons a:hover::before {
    width: 100%;
}




/*-----------------------------------*\
  #HELP BANNER contacto
\*-----------------------------------*/

.help-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 3rem 9%;
    padding: 2.4rem 3rem;
    background-color: var(--bg-color);
    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: 1.2rem;
}

.help-banner-text {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.help-banner-text>i {
    color: var(--main-color);
    font-size: 3.2rem;
    flex-shrink: 0;
}

.help-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 .3rem;
}

.help-subtitle {
    font-size: 1.3rem;
    color: var(--text-color);
    opacity: .7;
    margin: 0;
}

/*-----------------------------------*\
  #SOCIAL CTA contacto
\*-----------------------------------*/

.social-cta {
    text-align: center;
    max-width: 129rem;
    margin: 0 auto;
    padding: 4rem 9%;
}

.social-cta h2 {
    color: var(--text-color);
    margin: 0 0 .6rem;
}

.social-cta h2 span {
    color: var(--main-color);
}

.social-cta>p {
    font-size: 1.4rem;
    color: var(--text-color);
    opacity: .7;
    margin: 0 0 2rem;
}

.social-cta .social-icons {
    justify-content: center;
}

@media (max-width: 767px) {
    .help-banner {
        flex-direction: column;
        text-align: center;
    }

    .help-banner .btn-box {
        width: 100%;
        max-width: none;
    }

    .help-banner .btn-box .btn {
        width: 100%;
    }
}








/*-----------------------------------*\
  #POST (artículo individual del blog)
\*-----------------------------------*/

.post {
    max-width: 90rem;
    margin: 0 auto;
    padding: 16rem 9% 6rem;
    /* más espacio arriba para separar del header fijo */
}

/* --- Encabezado --- */

.post-header {
    text-align: center;
    margin-bottom: 3rem;
}

.post-header h1 {
    margin: 0 0 1.4rem;
    font-size: 3.4rem;
}

.post-subtitle {
    font-size: 1rem;
    font-style: italic;
    color: blanchedalmond;
    max-width: 60rem;
    margin: -10px auto;
}

.post-category {
    margin-bottom: 26px;
    color: blanchedalmond;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
}

.post-category a {
    color: blanchedalmond;
    text-decoration: none;
}

.post-category a:hover {
    text-decoration: none;
}

/* --- Imagen destacada --- */

.post-image {
    margin: 0 0 4rem;
}

.post-image .bimg {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 1.2rem;
    border: .1rem solid rgba(0, 171, 240, .25);
    display: block;
}

/* --- Cuerpo del artículo --- */

.post-content {
    max-width: 75rem;
    margin: 66px auto;
}

.post-content p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0 0 2rem;
    opacity: .75;
    text-align: justify;
}



/* Solo 2 niveles de subtítulo dentro del contenido, tamaño fijo cada uno */
.post-content h2,
.post-content h3,
.post-content h4 {
    font-size: 2.4rem;
    font-weight: 600;
    margin: 3.6rem 0 1.6rem;
}

.post-content h3 {
    font-size: 1.9rem;
}

/* si el post trae un h4 desde la base de datos, que se vea igual que un h3 (mismo nivel visual) */
.post-content h4 {
    font-size: 1.9rem;
}

.post-content ul,
.post-content ol {
    margin: 0 0 2rem;
    padding-left: 0;
    list-style: none;
}

.post-content ul li,
.post-content ol li {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-color);
    opacity: .75;
}

.post-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--main-color);
}

.post-content ol {
    counter-reset: post-ol;
}

.post-content ol li::before {
    counter-increment: post-ol;
    content: counter(post-ol);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--main-color);
}

.post-content a {
    color: var(--main-color);
    text-decoration: underline;
    text-underline-offset: .3rem;
}

.post-content strong {
    color: var(--text-color);
    font-weight: 700;
}

.post-content img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    border: .1rem solid rgba(0, 171, 240, .25);
    margin: 1rem 0 2rem;
}

.post-content blockquote {
    margin: 2.4rem 0;
    padding: 1.8rem 2.2rem;
    background-color: var(--bg-color);
    border-left: .3rem solid var(--main-color);
    border-radius: .6rem;
    font-size: 1.6rem;
    font-style: italic;
    color: var(--text-color);
    opacity: .9;
}



.post-dates {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.5rem;
    margin: .8rem 0 1.5rem;
}

.post-dates time {
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text-color);
    opacity: .6;
}





@media (max-width: 767px) {
    .post {
        padding: 12rem 6% 4rem;
    }

    .post-header h1 {
        font-size: 2.6rem;
    }

    .post-content h2,
    .post-content h3,
    .post-content h4 {
        font-size: 2rem;
    }
}


@media screen and (max-width: 480px) {

    .post-dates {
        gap: .5rem 1rem;
    }

    .post-dates time {
        font-size: 1.1rem;
    }

}


.cuerpo {    
    max-width: 100rem;
    padding: 14rem 9% 2rem;
    margin: 0 auto;
    text-align: justify;
}

.cuerpo p, .cuerpo ol, .cuerpo ul {
    color:#d7e0e5;
}



.cuerpo h1, .cuerpo h2 {
    padding: 3rem 0 1rem ;
    color:#d7e0e5;
}

.cuerpo a {
    color: cadetblue;
}







/*-----------------------------------*\
  #PAGINACIÓN BLOG
\*-----------------------------------*/

.paginacion {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    margin: 4rem auto 2rem;
    padding: 0 9%;
    flex-wrap: wrap;
}


/* Enlaces y página actual */

.paginacion a,
.paginacion .pagina-actual {
    min-width: 4.2rem;
    height: 4.2rem;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 0 1.2rem;

    border: .1rem solid rgba(0, 171, 240, .25);
    border-radius: .8rem;

    background: var(--bg-color);

    color: var(--text-color);

    font-size: 1.3rem;
    font-weight: 500;

    text-decoration: none;

    transition: var(--transition-2);
}


/* Hover */

.paginacion a:hover {
    color: var(--main-color);
    border-color: var(--main-color);
    transform: translateY(-.3rem);
}


/* Página actual */

.paginacion .pagina-actual {
    color: var(--bg-color);
    background: var(--main-color);
    border-color: var(--main-color);

    cursor: default;
}


/* Anterior / siguiente */

.paginacion a[aria-label="Página anterior"],
.paginacion a[aria-label="Página siguiente"] {
    min-width: auto;
    padding: 0 1.6rem;
}


/* Responsive */

@media screen and (max-width: 480px) {

    .paginacion {
        gap: .6rem;
        margin-top: 3rem;
        padding-left: 5%;
        padding-right: 5%;
    }

    .paginacion a,
    .paginacion .pagina-actual {
        min-width: 3.8rem;
        height: 3.8rem;

        padding: 0 .9rem;

        font-size: 1.2rem;
    }

    .paginacion a[aria-label="Página anterior"],
    .paginacion a[aria-label="Página siguiente"] {
        padding: 0 1.2rem;
    }
}

/*-----------------------------------*\
  #BLOG AJAX PAGINATION
\*-----------------------------------*/

#blog-resultados {
    transition: opacity .35s ease;
}


/*-----------------------------------*\
  #CONTACT FORM FEEDBACK
\*-----------------------------------*/

.form-message {
    margin: 1.2rem 0 1.8rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

.form-message-success {
    color: var(--main-color);
}

.form-message-error {
    color: #ff8a8a;
}