/* 
    Handcoded por Samuel Torres Pichardo
    https://www.linkedin.com/in/samuel-torres-pichardo-7b16581a1/
*/
:root {
    /* Paleta principal basada en Aceran */
    --primaryColor: #003366;     /* Azul oscuro (principal) */
    --secondaryColor: #005588;   /* Azul medio (secundario) */
    --tertiaryColor: #0077BB;    /* Azul claro (hover/activado) */

    /* Fondo y texto */
    --bgWhite: #ffffff;
    --bgBlack: #1A1A1A;          /* Fondo oscuro profesional */
    --textWhite: #ffffff;
    --textBlack: #212121;
    --textLight: #F5F5F5;        /* Texto claro para fondos oscuros */

    /* Estados interactivos */
    --selectionBg: #0077BB;      /* Azul claro para selección */
    --selectionText: #000000;

    /* Sombras */
    --shadowColor: rgba(0, 51, 102, 0.2); /* Sombra en base al azul oscuro */
    --h1TextSize: 4rem;     /* Tamaño del título principal */
    --h3TextSize: 1.5rem;   /* Tamaño del texto descriptivo */
    --navHeight: 70px;     /* Altura real de tu navbar (ajusta según sea necesario) */
}
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background-color: var(--primaryBgBody);
}
::-webkit-scrollbar-thumb{
    background-color: var(--selectionBg);
    -webkit-border-radius: 10px;
            border-radius: 10px;
}
::-moz-selection{
    background-color: var(--selectionBg);
    color: var(--selectionText);
}
::selection{
    background-color: var(--selectionBg);
    color: var(--selectionText);
}

html,
body{
    margin: 0;
    font-family: 'nunito';
    background-color: var(--primaryBgBody);
    scroll-behavior: smooth;
    scroll-padding-top: -webkit-calc(var(--navHeight) + 30);
    scroll-padding-top: -moz-calc(var(--navHeight) + 30);
    scroll-padding-top: calc(var(--navHeight) + 30);
}

img{
    width: 100%; height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
}
hr{
    opacity: 0.5;
}

h1 { font-size: var(--h1TextSize); }
h2, .fs-h2 { font-size: var(--h2TextSize); font-weight: bold; display: block; }
h3, .fs-h3 { font-size: var(--h3TextSize); font-weight: bold; display: block; }
h4, .fs-h4 { font-size: var(--h4TextSize); font-weight: bold; display: block; }
h5, .fs-h5 { font-size: var(--h5TextSize); font-weight: bold; display: block; }
p, .fs-p { font-size: var(--pTextSize); display: block; }
li{ font-size: var(--pTextSize); }
small { font-size: var(--smTextSize); }
.display-block{ display: block; }
.display-inblock{ display: inline-block; }

nav{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    -webkit-box-shadow: 0 8px 27px -10px var(--shadowColor);
       -moz-box-shadow: 0 8px 27px -10px var(--shadowColor);
            box-shadow: 0 8px 27px -10px var(--shadowColor);
    background-color: var(--bgWhite);
    height: var(--navHeight);
    z-index: 10;
}
nav::before{
    position: absolute;
    content: "";
    pointer-events: none;
    top: -webkit-calc(-100% + 5px);
    top: -moz-calc(-100% + 5px);
    top: calc(-100% + 5px); left: 0;
    width: 100%; height: 100%;
    background: url('../svg/wave.svg') bottom / contain;
    background-repeat: repeat-x;
}
nav > div{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}
.navigation-container{
    margin: auto 0 auto auto;
}
.navigation-container > a{
    margin: 0 5px 0 5px;
}
.logo{
    height: var(--navHeight);
}
.logo::after{
    content: unset;
}

.btn-back-to-top{
    position: fixed;
    bottom: 15px; right: 15px;
    padding: 0 !important;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    width: -webkit-calc(var(--h4TextSize) * 2);
    width: -moz-calc(var(--h4TextSize) * 2);
    width: calc(var(--h4TextSize) * 2);
    height: -webkit-calc(var(--h4TextSize) * 2);
    height: -moz-calc(var(--h4TextSize) * 2);
    height: calc(var(--h4TextSize) * 2);
    font-size: var(--h4TextSize);
    background-color: var(--primaryColor);
    color: var(--textWhite);
    -webkit-box-shadow: 0 8px 20px -10px var(--primaryColor);
       -moz-box-shadow: 0 8px 20px -10px var(--primaryColor);
            box-shadow: 0 8px 20px -10px var(--primaryColor);
    z-index: 5;
}
.btn-back-to-top > i{
    position: absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.btn-back-to-top:hover,
.btn-back-to-top:focus{
    color: var(--textWhite);
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

.bg-primary{
    background-color: var(--primaryColor);
    color: var(--textWhite);
}
.bg-primary-foot{
    background-color: var(--primaryBgFoot) !important;
    color: var(--textWhite) !important;
    -webkit-border-radius: unset;
       -moz-border-radius: unset;
            border-radius: unset;
}

main::before{
    content: "";
    top: 0; left: 0;
    position: fixed;
    width: 100%; height: 100%;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(-50%, var(--primaryBgBody)), color-stop(50%, var(--bgWhite)));
    background-image: -webkit-linear-gradient(bottom, var(--primaryBgBody) -50%, var(--bgWhite) 50%);
    background-image: -moz-linear-gradient(bottom, var(--primaryBgBody) -50%, var(--bgWhite) 50%);
    background-image: -o-linear-gradient(bottom, var(--primaryBgBody) -50%, var(--bgWhite) 50%);
    background-image: linear-gradient(0deg, var(--primaryBgBody) -50%, var(--bgWhite) 50%);
    z-index: 0;
}

section{
    position: relative;
    background-color: var(--bgWhite);
    color: var(--textBlack);
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 50px 5px;
    border-top: 3px solid var(--primaryBgBody);
    margin-top: 100px;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
    -webkit-box-shadow: 0 0 27px var(--shadowColor);
       -moz-box-shadow: 0 0 27px var(--shadowColor);
            box-shadow: 0 0 27px var(--shadowColor);
}
.section-title{
    position: absolute;
    top: 0; left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: var(--bgWhite);
    color: var(--primaryColor);
    border-top: 5px solid var(--primaryBgBody);
    -webkit-border-radius: var(--h2TextSize);
       -moz-border-radius: var(--h2TextSize);
            border-radius: var(--h2TextSize);
    padding: 5px 50px;
    margin: 0;
    text-align: center;
    -webkit-box-shadow: 0 0 27px var(--shadowColor);
       -moz-box-shadow: 0 0 27px var(--shadowColor);
            box-shadow: 0 0 27px var(--shadowColor);
}
section.bg-primary-foot{
    background-image: url('../svg/blob.svg');
    background-position: center;
    -moz-background-size: cover 100%;
      -o-background-size: cover 100%;
         background-size: cover 100%;
    background-repeat: no-repeat;
}


.hero-banner,
.sub-hero-banner {
    display: flex;
    width: 100%;
    height: calc(100vh - var(--navHeight));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    position: relative;
    margin: 0;
    border-radius: 0;
}

.hero-banner {
    animation: hero-slideshow 15s infinite linear;
    background-image: linear-gradient(
        rgba(0, 51, 102, 0.4),
        rgba(0, 85, 136, 0.6)
    ), url('art/banner-industrial.jpg');
}

.hero-banner::before,
.sub-hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 51, 102, 0.4),
        rgba(0, 85, 136, 0.6)
    );
    filter: brightness(50%);
    z-index: 1;
}

.hero-title {
    position: relative;
    width: 50%;
    z-index: 2;
    padding: 40px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 51, 102, 0.3);
}

.hero-title h1 {
    color: white;
    font-size: var(--h1TextSize);
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-title p {
    color: var(--textLight);
    font-size: var(--h3TextSize);
    line-height: 1.6;
}

.hero-socials {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.hero-socials > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #003366;
    color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.hero-socials > a:hover {
    background-color: #005588;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.4);
}

.sticky-img,
.sticky-img-dual{
    position: -webkit-sticky;
    position: sticky;
    top: 84px;
    height: 250px;
}
.sticky-img-dual{
    width: 50%;
}
.sticky-img,
.sticky-img-dual > img{
    -webkit-filter: drop-shadow(0 2px 5px var(--shadowColor));
            filter: drop-shadow(0 2px 5px var(--shadowColor));
}
.sticky-img-dual > img:first-child{
    -webkit-transform: translateX(10%);
       -moz-transform: translateX(10%);
        -ms-transform: translateX(10%);
         -o-transform: translateX(10%);
            transform: translateX(10%);
}
.sticky-img-dual > img:last-child{
    position: absolute;
    top: 0; right: 0;
    -webkit-transform: translate(90%, 40%);
       -moz-transform: translate(90%, 40%);
        -ms-transform: translate(90%, 40%);
         -o-transform: translate(90%, 40%);
            transform: translate(90%, 40%);
}
.sticky-img-dual-spacer{
    width: 100%;
    height: 150px;
}
.sticky-img-dual > .blob{
    position: absolute;
    top: 0; left: 0;
    -webkit-transform: translateY(10%);
       -moz-transform: translateY(10%);
        -ms-transform: translateY(10%);
         -o-transform: translateY(10%);
            transform: translateY(10%);
    width: 470px;
    height: 340px;
    z-index: -1;
}

.card-team{
    position: relative;
    height: 400px;
    width: 80%;
    margin: auto;
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    -webkit-box-shadow: 0 11px 20px var(--shadowColor);
       -moz-box-shadow: 0 11px 20px var(--shadowColor);
            box-shadow: 0 11px 20px var(--shadowColor);
    overflow: hidden;
}
.card-team > img{
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -moz-transition: transform 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
}
.card-team > .title,
.card-team > .info{
    position: absolute;
    width: 100%;
    bottom: 0; left: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    background-color: var(--primaryBgFoot);
    color: var(--bgWhite);
    -webkit-border-radius: 15px 15px 0 0;
       -moz-border-radius: 15px 15px 0 0;
            border-radius: 15px 15px 0 0;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -moz-transition: transform 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
}
.card-team > .title{
    padding: 5px 0 5px 15px;
    margin: 0;
    -webkit-transition-delay: 0.5s;
       -moz-transition-delay: 0.5s;
         -o-transition-delay: 0.5s;
            transition-delay: 0.5s;
}
.card-team > .info{
    height: 60%;
    -webkit-transform: translateY(100%);
       -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
         -o-transform: translateY(100%);
            transform: translateY(100%);
    overflow: auto;
    padding: 15px;
}
.card-team:hover > img{
    -webkit-transform: translateY(-25%) scale(1.1);
       -moz-transform: translateY(-25%) scale(1.1);
        -ms-transform: translateY(-25%) scale(1.1);
         -o-transform: translateY(-25%) scale(1.1);
            transform: translateY(-25%) scale(1.1);
}
.card-team:hover > .title{
    -webkit-transform: translateY(100%);
       -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
         -o-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}
.card-team:hover > .info{
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
}

.card-blog{
    overflow: hidden;
    -webkit-border-radius: 15px 15px 0 0;
       -moz-border-radius: 15px 15px 0 0;
            border-radius: 15px 15px 0 0;
    padding-bottom: 20px;
    -webkit-transition: -webkit-box-shadow 0.5s, -webkit-transform 0.5s;
    transition: -webkit-box-shadow 0.5s, -webkit-transform 0.5s;
    -o-transition: box-shadow 0.5s, -o-transform 0.5s;
    -moz-transition: box-shadow 0.5s, transform 0.5s, -moz-box-shadow 0.5s, -moz-transform 0.5s;
    transition: box-shadow 0.5s, transform 0.5s;
    transition: box-shadow 0.5s, transform 0.5s, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
}
.card-blog > img{
    height: 300px;
}
.card-blog > .info{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 0 10px;
}
.card-blog > .info > :first-child{
    padding-right: 5px;
}
.card-blog:hover{
    -webkit-box-shadow: 0 0 27px var(--shadowColor);
       -moz-box-shadow: 0 0 27px var(--shadowColor);
            box-shadow: 0 0 27px var(--shadowColor);
    -webkit-transform: translateY(-10px);
       -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
         -o-transform: translateY(-10px);
            transform: translateY(-10px);
}

.card-career{
    position: relative;
    padding: 10px;
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
}
.card-career::before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    width: 100%; height: 100%;
    border: 2px ridge var(--bgBlack);
    opacity: 0.2;
    -webkit-border-radius: inherit;
       -moz-border-radius: inherit;
            border-radius: inherit;
}

.img-unheight{
    height: unset;
}

.card-side,
.card-post,
.card-comment > .info{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
}
.card-side,
.card-comment > .info{
    width: 100%;
    padding: 20px;
    background-color: var(--primaryBgBody);
}
.card-post{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 10px;
    margin: 10px 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    font-size: unset;
    cursor: pointer;
    -webkit-transition: background 0.4s;
    -o-transition: background 0.4s;
    -moz-transition: background 0.4s;
    transition: background 0.4s;
}
.card-post:hover,
.card-post:focus{
    background-color: var(--bgWhite);
}
.card-post::after{
    content: unset;
}
.card-post > img{
    width: 75px;
    height: -webkit-calc(var(--pTextSize) * 4);
    height: -moz-calc(var(--pTextSize) * 4);
    height: calc(var(--pTextSize) * 4);
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.card-post > .info{
    margin-left: 10px;
}

.tags{
    margin: 5px;
    padding: 5px 15px;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    background-color: var(--bgWhite);
}

.comments-list{
    margin-top: 50px;
    padding: 0;
    list-style: none;
}

.card-comment{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin: 20px 0;
}
.card-comment > img{
    margin-right: 10px;
    width: 100px; height: 100px;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
.card-comment > .info{
    width: -webkit-calc(100% - 110px);
    width: -moz-calc(100% - 110px);
    width: calc(100% - 110px);
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-border-top-left-radius: 0;
       -moz-border-radius-topleft: 0;
            border-top-left-radius: 0;
}

.card-comment > img,
.card-side-navigation{
    position: -webkit-sticky;
    position: sticky;
    top: 84px;
}

.card-side-navigation{
    max-height: 80%;
    overflow-y: auto;
}
.card-side-navigation > a{
    display: block;
    margin: 10px 0;
    max-width: 180px;
}

.subscribe{
    position: relative;
    background: fixed no-repeat center bottom / cover;
    z-index: 1;
    padding: 50px 0;
}
.subscribe > div{
    margin: auto;
}
.subscribe::before {
    background-color: var(--primaryColor); /* Reemplaza #D2691E */
    opacity: 0.6;
}
footer{
    position: relative;
    margin-top: 100px;
    background-color: var(--primaryBgFoot);
}
footer > .copy{
    padding: 10px 0;
    background-color: var(--bgBlack);
}

.message-form input,
.message-form textarea{
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 15px;
    width: 100%;
    background-color: var(--primaryBgBody);
}
.message-form > .row > input{
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}
.message-form textarea{
    width: 100%;
    border: none;
    resize: vertical;
}

.border-round,
.map-embed > iframe{
    -webkit-border-radius: 12px;
       -moz-border-radius: 12px;
            border-radius: 12px;
}

.map-embed > iframe{
    width: 100%;
    height: 100%;
    border: none;
    -webkit-box-shadow: 0 2px 10px -5px var(--shadowColor);
       -moz-box-shadow: 0 2px 10px -5px var(--shadowColor);
            box-shadow: 0 2px 10px -5px var(--shadowColor);
}

/* Buttons and links */
.tab-mob-menu{
    display: none;
}

a {
    position: relative;
    text-decoration: none;
    color: var(--textBlack);
    font-size: var(--pTextSize);
    -webkit-transform-origin: center;
       -moz-transform-origin: center;
        -ms-transform-origin: center;
         -o-transform-origin: center;
            transform-origin: center;
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    -moz-transition: color 0.2s;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
a::after{
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background-color: var(--primaryColor);
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
        -ms-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    -o-transition: -o-transform 0.4s;
    -moz-transition: transform 0.4s, -moz-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s, -o-transform 0.4s;
}
a.fc-white::after{
    background-color: var(--bgWhite);
}
:focus{
    outline: 3px solid transparent;
}

.icon-link > i{
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: -webkit-calc(var(--pTextSize) * 1.5);
    width: -moz-calc(var(--pTextSize) * 1.5);
    width: calc(var(--pTextSize) * 1.5); height: -webkit-calc(var(--pTextSize) * 1.5); height: -moz-calc(var(--pTextSize) * 1.5); height: calc(var(--pTextSize) * 1.5);
    font-size: var(--pTextSize);
    background-color: var(--bgWhite);
    color: var(--primaryColor);
    -webkit-border-radius: -webkit-calc(var(--pTextSize) / 2);
       -moz-border-radius: -moz-calc(var(--pTextSize) / 2);
            border-radius: calc(var(--pTextSize) / 2);
    -webkit-transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s, -webkit-transform 0.2s;
    transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s, -webkit-transform 0.2s;
    -o-transition: box-shadow 0.2s, background 0.2s, color 0.2s, -o-transform 0.2s;
    -moz-transition: box-shadow 0.2s, background 0.2s, color 0.2s, transform 0.2s, -moz-box-shadow 0.2s, -moz-transform 0.2s;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s, transform 0.2s;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s, transform 0.2s, -webkit-box-shadow 0.2s, -moz-box-shadow 0.2s, -webkit-transform 0.2s, -moz-transform 0.2s, -o-transform 0.2s;
}
.icon-link > i::before{
    margin: auto;
}

input,
textarea,
button{
    padding: 8px;
    font-family: 'nunito';
    font-size: var(--pTextSize);
    border: none;
}

[class*="btn-"]{
    padding: 8px 20px;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s, -webkit-filter 0.2s, -webkit-transform 0.2s;
    transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s, -webkit-filter 0.2s, -webkit-transform 0.2s;
    -o-transition: box-shadow 0.2s, background 0.2s, color 0.2s, filter 0.2s, -o-transform 0.2s;
    -moz-transition: box-shadow 0.2s, background 0.2s, color 0.2s, filter 0.2s, transform 0.2s, -moz-box-shadow 0.2s, -moz-transform 0.2s;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s, filter 0.2s, transform 0.2s;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s, filter 0.2s, transform 0.2s, -webkit-box-shadow 0.2s, -moz-box-shadow 0.2s, -webkit-filter 0.2s, -webkit-transform 0.2s, -moz-transform 0.2s, -o-transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
[class*="btn-"]::after{
    content: unset;
}

/* Botones principales (Nuestros Servicios / Ver Proyectos) */
.btn-bg1, .btn-bg2 {
    background-color: var(--primaryColor); /* Azul oscuro */
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.btn-bg1:hover, .btn-bg2:hover {
    background-color: var(--secondaryColor); /* Azul medio */
    box-shadow: 0 8px 15px -10px var(--primaryColor);
}
/* Hovers */
a:hover,
a:focus{
    color: var(--primaryColor);
}
a:hover:after,
a:focus::after{
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
}

.btn-bg1:hover,
.btn-bg1:focus,
.icon-link:hover,
a.fc-white{
    color: var(--textWhite);
}

.btn-bg1:hover,
.btn-bg1:focus{
    -webkit-box-shadow: 0 8px 15px -10px #D2691E; /* Naranja cálido */
       -moz-box-shadow: 0 8px 15px -10px #D2691E;
            box-shadow: 0 8px 15px -10px #D2691E;
}

.btn-bg2:hover,
.btn-bg2:focus{
    -webkit-box-shadow: 0 8px 15px -10px #D2691E; /* Consistencia con color principal */
       -moz-box-shadow: 0 8px 15px -10px #D2691E;
            box-shadow: 0 8px 15px -10px #D2691E;
    background-color: #D2691E; /* Transición de color para botones secundarios */
    color: white;
}

[class*="btn-"]:hover,
[class*="btn-"]:focus,
.icon-link:hover > i{
    -webkit-transform: translateY(-3px);
       -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
         -o-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-box-shadow: 0 8px 15px -10px #D2691E; /* Sombra en hover */
       -moz-box-shadow: 0 8px 15px -10px #D2691E;
            box-shadow: 0 8px 15px -10px #D2691E;
}

/* Active states con efecto dinámico */
.btn-bg1:active{
    -webkit-filter: contrast(75%) brightness(150%);
            filter: contrast(75%) brightness(150%);
    background-color: #B8860B !important; /* Dorado metálico en click */
}

.btn-bg2:active{
    -webkit-filter: contrast(150%) brightness(75%);
            filter: contrast(150%) brightness(75%);
    background-color: #FFA07A !important; /* Naranja suave en click */
}

/* Efecto adicional para iconos */
.icon-link:hover > i {
    color: #B8860B; /* Dorado en hover */
    -webkit-transform: translateY(-5px) scale(1.1);
       -moz-transform: translateY(-5px) scale(1.1);
        -ms-transform: translateY(-5px) scale(1.1);
         -o-transform: translateY(-5px) scale(1.1);
            transform: translateY(-5px) scale(1.1);
    transition: all 0.3s ease;
}

.fade{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--bgWhite);
    pointer-events: none;
    opacity: 0;
    z-index: 50;
    -webkit-animation: fade 1s ease-out;
       -moz-animation: fade 1s ease-out;
         -o-animation: fade 1s ease-out;
            animation: fade 1s ease-out;
}


/* Tablet View */
@media only screen and (max-width: 992px) {

    .hero-title{
        width: 80%;
    }

    .navigation-container{
        position: absolute;
        top: 100%; left: 0;
        width: 100%; height: 0;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        background-color: var(--bgWhite);
        -webkit-box-shadow: 0 8px 27px -10px var(--shadowColor);
           -moz-box-shadow: 0 8px 27px -10px var(--shadowColor);
                box-shadow: 0 8px 27px -10px var(--shadowColor);
        overflow: hidden;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-transition: height 1s;
        -o-transition: height 1s;
        -moz-transition: height 1s;
        transition: height 1s;
    }
    .navigation-container > a{
        margin: 5px 0 5px 0;
    }

    .tab-mob-menu{
        position: relative;
        margin: auto 20px auto auto;
        font-family: 'bootstrap-icons';
        visibility: hidden;
        display: block;
        font-size: var(--h3TextSize);
    }
    .tab-mob-menu::after{
        position: absolute;
        top: 50%; left: 50%;
        -webkit-transform: translate(-50%, -50%);
           -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        content: "\F479";
        visibility: visible;
    }
    .tab-mob-menu:checked::after{
        content: "\F659";
    }

    .tab-mob-menu:checked ~ .navigation-container{
        border-top: 1px solid var(--shadowColor);
        height: 280px;
    }

    .sticky-img-dual > .blob{
        display: none;
    }

    .map-embed > iframe{
        height: 300px;
    }

    .card-side-navigation{
        max-height: unset;
        height: auto;
    }
}

/* Mobile View */
@media only screen and (max-width: 600px){
    .sticky-img-dual{
        width: 100%;
        height: auto;
    }
    .sticky-img-dual > img{
        height: 250px;
    }
    .sticky-img-dual > img:first-child{
        -webkit-transform: none;
           -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                transform: none;
    }
    .sticky-img-dual > img:last-child{
        position: unset;
        -webkit-transform: none;
           -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                transform: none;
    }
    .sticky-img-dual-spacer{
        display: none;
    }
    
    .message-form > .row > input{
        width: -webkit-calc(50% - 5px);
        width: -moz-calc(50% - 5px);
        width: calc(50% - 5px);
    }

    
    .card-comment > img{
        width: 70px; height: 70px;
    }
    .card-comment > .info{
        width: -webkit-calc(100% - 80px);
        width: -moz-calc(100% - 80px);
        width: calc(100% - 80px);
        -webkit-border-radius: 30px;
           -moz-border-radius: 30px;
                border-radius: 30px;
        -webkit-border-top-left-radius: 0;
           -moz-border-radius-topleft: 0;
                border-top-left-radius: 0;
    }
}

.hero-banner {
    animation: hero-slideshow 15s infinite linear;
    background-image: linear-gradient(
        rgba(0, 51, 102, 0.4),  /* Azul oscuro */
        rgba(0, 85, 136, 0.6)   /* Azul medio */
    ), url('art/banner-industrial.jpg');
}

/* Estilos para el carrusel */
.carousel-control-prev,
.carousel-control-next {
    background-color: rgba(0, 51, 102, 0.8); /* Azul oscuro con transparencia */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: var(--secondaryColor); /* Reemplaza #B8860B */
}

.carousel-item img {
  min-height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

/* Botón principal con efecto hover */
.btn-orange {
  background-color:rgb(0, 123, 255); 
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-orange:hover {
  background-color: rgb(0, 123, 255);  
  color: white;
  box-shadow: 0 8px 15px -10px #128C7E;;
  transform: translateY(-3px);
}

.btn-orange i {
  transition: transform 0.3s ease;
}

.btn-orange:hover i {
  transform: translateX(5px); /* Efecto de desplazamiento en el ícono */
}

.btn-whatsapp {
  background-color: #25D366; /* Verde WhatsApp */
  color: white;
  border-radius: 8px;
  padding: 15px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-whatsapp:hover {
  background-color: #128C7E; /* Verde oscuro */
  color: white;
}


/* Botones de idioma */
.btn-lang {
    background-color: white;
    color: var(--primaryColor); /* Azul oscuro */
    padding: 8px 15px;
    border-radius: 8px; /* Bordes más suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-lang:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -10px var(--primaryColor); /* Sombra en azul oscuro */
    background-color: var(--primaryColor); /* Fondo azul al pasar el mouse */
    color: white;
}

/* Botón "Volver arriba" */
.btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--primaryColor); /* Azul oscuro */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 51, 102, 0.3); /* Sombra azul */
    z-index: 9999;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-back-to-top:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 15px -10px var(--primaryColor);
}

/* Botón WhatsApp (si lo tienes en tu HTML) */
.btn-whatsapp {
    position: fixed;
    bottom: 80px; /* Ajustado para no chocar con el botón "Volver arriba" */
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #25D366; /* Verde por defecto de WhatsApp */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 51, 102, 0.2);
    z-index: 9998;
    transition: transform 0.3s;
}

.btn-whatsapp:hover {
    transform: scale(1.1);
    background-color: #128C7E; /* Verde más oscuro */
}

/* Estilos optimizados para carruseles */
.carousel-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Llena el contenedor sin distorsionar */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease; /* Efecto zoom al pasar el cursor */
}

.carousel-item {
  height: 400px; /* Altura uniforme para todos los carruseles */
}

.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 850px;
  height: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1.5px solid #e5e7eb;
  overflow: hidden;
}

/* Efecto hover para imágenes */
.image-container:hover .carousel-image {
  transform: scale(1.05);
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .carousel-item {
    height: 300px;
  }
}
/* Modern gallery/carrusel improvements */

.image-container {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: 60vh;
  min-height: 320px;
  max-height: 80vh;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}


.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  transition: none;
}

/* Carousel controls and indicators */
.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1.5px solid #dee2e6;
  width: 2.5rem;
  height: 2.5rem;
}
.carousel-control-prev, .carousel-control-next {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.10));
}
.carousel-indicators [data-bs-target] {
  background-color: #0d6efd;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 6px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.carousel-indicators .active {
  opacity: 1;
  background-color: #0d6efd;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,0.10);
}
.carousel {
  margin-bottom: 2rem;
}
  border-radius: 8px; /* Coincide con "rounded" de Bootstrap */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra uniforme */
}

/* Estilos para los carruseles de proyectos */
.project-carousel {
    margin-bottom: 2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.project-carousel .carousel-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;  /* Mantiene una proporción consistente 4:3 */
    border-radius: 8px;
    overflow: hidden;
}

.project-carousel .carousel-item {
    position: relative;
    height: 100%;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-carousel .carousel-item::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
}

.project-carousel .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.project-carousel .carousel-control-prev,
.project-carousel .carousel-control-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 51, 102, 0.7);
    top: 50%;
    transform: translateY(-50%);
    margin: 0 10px;
}

.project-carousel .carousel-control-prev:hover,
.project-carousel .carousel-control-next:hover {
    background-color: rgba(0, 51, 102, 0.9);
}

.project-carousel .carousel-indicators {
    margin-bottom: 0.5rem;
}

.project-carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 4px;
    background-color: rgba(255, 255, 255, 0.5);
}

.project-carousel .carousel-indicators button.active {
    background-color: #fff;
}

/* Efectos de hover y transiciones suaves */
.project-carousel .carousel-item:hover img {
    transform: scale(1.05);
}

/* Mejoras para los controles */
.project-carousel .carousel-control-prev,
.project-carousel .carousel-control-next {
    opacity: 0;
    transition: opacity 0.3s ease;
    width: 45px;
    height: 45px;
    background-color: rgba(0, 51, 102, 0.8);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.project-carousel:hover .carousel-control-prev,
.project-carousel:hover .carousel-control-next {
    opacity: 1;
}

.project-carousel .carousel-control-prev {
    left: 15px;
}

.project-carousel .carousel-control-next {
    right: 15px;
}

.project-carousel .carousel-indicators {
    margin-bottom: 1rem;
}

.project-carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.project-carousel .carousel-indicators button.active {
    background-color: #fff;
    transform: scale(1.2);
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .project-carousel .carousel-inner {
        aspect-ratio: 16/9;  /* Proporción más amplia para móviles */
    }
    
    .project-carousel .carousel-control-prev,
    .project-carousel .carousel-control-next {
        opacity: 1;  /* Controles siempre visibles en móviles */
        width: 35px;
        height: 35px;
    }
}

/* Estilos del carrusel de proyectos */
.carousel {
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.carousel-inner {
    width: 100%;
    height: 400px; /* Altura fija para todos los carruseles */
}

.carousel-item {
    height: 100%;
    background-color: #f8f9fa;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Cambiado a contain para mantener la proporción */
    object-position: center;
    background-color: #f8f9fa;
    padding: 10px; /* Espacio alrededor de la imagen */
}

/* Controles del carrusel */
.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 51, 102, 0.7);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-prev {
    left: 15px;
}

.carousel-control-next {
    right: 15px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* Indicadores del carrusel */
.carousel-indicators {
    margin-bottom: 0;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 51, 102, 0.7);
    margin: 0 4px;
}

.carousel-indicators .active {
    background-color: #003366;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .carousel-inner {
        height: 300px;
    }
}

/* Botones flotantes */
.float-buttons-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.float-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    position: relative;
}

.float-button i {
    font-size: 24px;
}

/* WhatsApp button - siempre visible */
.float-button.whatsapp {
    background-color: #25D366;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    order: -1;
    margin-bottom: 0;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    position: relative;
}

.float-button.whatsapp span {
    position: absolute;
    right: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #25D366;
    color: white;
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: floatText 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes floatText {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-5px);
        opacity: 0.8;
    }
}

.float-button.whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Back to top button */
.float-button.btn-back-to-top {
    background-color: #007bff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    order: 1; /* Esto fuerza al botón de subir a estar abajo */
}

.float-button.btn-back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.float-button.btn-back-to-top:hover {
    background-color: #0056b3;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .float-buttons-container {
        right: 15px;
        bottom: 15px;
        gap: 12px;
    }

    .float-button {
        width: 45px;
        height: 45px;
    }
    
    .float-button.whatsapp {
        width: auto !important;
        padding: 0 20px !important;
    }

    .float-button.whatsapp span {
        font-size: 14px;
    }
}

    .floating-button i {
        font-size: 20px;
    }
}

/* Utilidad para accesibilidad */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Estilos consistentes para todos los botones */
.btn,
.btn-primary,
.btn-bg1,
.btn-bg2,
[class*="btn-"] {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary,
.btn-bg1 {
    background-color: var(--primaryColor);
    color: white;
}

.btn-primary:hover,
.btn-bg1:hover,
.btn-primary:focus,
.btn-bg1:focus {
    background-color: var(--secondaryColor);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Estilos del menú de navegación */
.navbar {
    background-color: var(--bgWhite);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
}

.navbar-nav {
    gap: 10px;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: var(--textBlack);
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color: var(--primaryColor);
    background-color: rgba(0, 51, 102, 0.05);
}

/* Menú principal actualizado */
.main-menu {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-right: 40px;
    align-items: center;
    padding: 0;
    list-style: none;
}

.main-menu a {
    color: var(--textBlack);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.main-menu a:hover,
.main-menu a:focus {
    color: var(--primaryColor);
    background-color: rgba(0, 51, 102, 0.05);
}

/* Contenedores y gráficos */
.content-section {
    position: relative;
    z-index: 2;
    margin-top: 50px;
    background-color: var(--bgWhite);
    padding: 30px 0;
}

.graph-container {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 20px 0;
    padding: 15px;
    background-color: var(--bgWhite);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Formulario de contacto actualizado */
.form-input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
    outline: none;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    color: var(--textBlack);
    font-weight: 500;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .main-menu {
        flex-direction: column;
        margin-right: 0;
        gap: 10px;
        padding: 10px 0;
    }

    .main-menu a {
        width: 100%;
        text-align: center;
    }

    .floating-button {
        width: 45px;
        height: 45px;
    }

    #whatsapp-button {
        right: 15px;
        bottom: 65px;
    }

    .btn-back-to-top {
        right: 15px;
        bottom: 15px;
    }

    .form-input {
        padding: 10px;
        font-size: 14px;
    }
}

/* Estilos para las tarjetas de productos */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.card-img-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa;
}

.card-img-wrapper img {
    transition: transform 0.3s ease;
}

.product-card:hover .card-img-wrapper img {
    transform: scale(1.05);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    color: var(--primaryColor);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.card-text {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Estilos para la sección de catálogo */
.section-padding {
    padding: 5rem 0;
}

.bg-light {
    background-color: #f8f9fa !important;
}

/* Estilos para la tienda */
.shop-section {
    background-color: #f8f9fa;
}

.shop-card {
    transition: all 0.3s ease;
    border: none;
    overflow: hidden;
}

.shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.shop-card .card-img-wrapper {
    overflow: hidden;
    background-color: #fff;
}

.shop-card .card-img-wrapper img {
    transition: transform 0.5s ease;
}

.shop-card:hover .card-img-wrapper img {
    transform: scale(1.05);
}

.shop-card .badge {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 30px;
}

.shop-card .card-body {
    padding: 1.5rem;
}

.shop-card .card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.price-tag {
    line-height: 1.2;
}

.shop-filters .btn-group .btn {
    border-radius: 30px;
    padding: 0.5rem 1.5rem;
    margin: 0 0.25rem;
}

.shop-filters .btn-group .btn.active {
    background-color: var(--primaryColor);
    color: white;
}

.shop-info {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.quick-contact {
    background: linear-gradient(45deg, var(--primaryColor), var(--secondaryColor));
}

.btn-primary {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    border-radius: 30px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--secondaryColor);
    border-color: var(--secondaryColor);
    transform: translateY(-2px);
}

/* Responsive para la tienda */
@media (max-width: 768px) {
    .shop-filters .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .shop-filters .btn-group .btn {
        flex: 1;
        min-width: 120px;
    }
    
    .shop-info .d-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .shop-info .bi {
        margin-bottom: 1rem;
    }
}

/* Estilos para el header de la tienda */
.shop-header {
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
    border-bottom: 1px solid #eee;
}

.shop-header .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primaryColor);
    margin-bottom: 1rem;
}

.shop-header .lead {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.shop-filters {
    margin-top: 2rem;
}

.shop-filters .btn {
    border-radius: 30px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.shop-filters .btn-primary.active {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.2);
}

.shop-filters .btn-outline-primary {
    color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.shop-filters .btn-outline-primary:hover {
    background-color: var(--primaryColor);
    color: white;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .shop-header .section-title {
        font-size: 2rem;
    }
    
    .shop-filters {
        flex-direction: column;
        width: 100%;
    }
    
    .shop-filters .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* Estilos para productos */
.producto-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1rem;
}

.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.producto-img-container {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.producto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.producto-card:hover .producto-img {
    transform: scale(1.05);
}

.producto-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primaryColor);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.producto-info {
    padding: 1.5rem;
}

.producto-info h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--primaryColor);
}

.producto-features {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.producto-features li {
    margin-bottom: 0.5rem;
    color: #666;
    display: flex;
    align-items: center;
}

.producto-features li i {
    color: var(--primaryColor);
    margin-right: 0.5rem;
}

.producto-precio {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.precio-desde {
    display: block;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.precio-cantidad {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primaryColor);
}

.precio-unidad {
    color: #666;
    font-size: 1rem;
}

/* Estilos para info cards */
.info-card {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
}

.info-card i {
    font-size: 2.5rem;
    color: var(--primaryColor);
    margin-bottom: 1rem;
}

.info-card h4 {
    color: var(--primaryColor);
    margin-bottom: 0.5rem;
}

.info-card p {
    color: #666;
    margin-bottom: 0;
}

/* Estilos para la sección de contacto */
.contact-section {
    background: linear-gradient(45deg, var(--primaryColor), var(--secondaryColor));
}

.contact-section h3 {
    margin-bottom: 0;
}

.contact-section .btn-light:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .producto-img-container {
        height: 200px;
    }

    .producto-precio {
        padding: 0.75rem;
    }

    .precio-cantidad {
        font-size: 1.75rem;
    }

    .info-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
}

/* Estilos del Marketplace */
.marketplace-section {
    background-color: #f5f5f5;
}

/* Estilos del Marketplace Actualizado */
.marketplace-section {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 2rem 0;
}

/* Barra de búsqueda mejorada */
.search-bar-container {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.search-input {
    height: 48px;
    border-right: none;
}

.search-input:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

/* Product Card Styles */
.product-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 1;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.product-info {
    padding: 1.5rem;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #2d3436;
}

.product-specs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.spec-item {
    font-size: 0.9rem;
    color: #636e72;
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.product-price {
    margin-bottom: 1rem;
}

.price-info {
    font-size: 0.85rem;
    color: #636e72;
    display: block;
}

.price {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2d3436;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
}

/* Filter Sidebar Styles */
.filters-sidebar {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.filter-section {
    margin-bottom: 2rem;
}

.filter-section h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2d3436;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.category-item:hover {
    background-color: #f8f9fa;
}

.category-item.active {
    background-color: #e3f2fd;
    color: #0d6efd;
}

.category-name {
    font-weight: 500;
}

.category-count {
    font-size: 0.85rem;
    color: #636e72;
    background: #f8f9fa;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
}

/* Pagination Styles */
.pagination {
    margin-top: 2rem;
}

.page-link {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: 4px;
    color: #2d3436;
}

.page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .filters-sidebar {
        margin-bottom: 2rem;
    }

    .product-card {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    .search-bar-container .row > div:not(:last-child) {
        margin-bottom: 1rem;
    }

    .product-image {
        height: 180px;
    }
}

/* Modal Styles */
.modal-product-details {
    max-width: 800px;
}

.modal-product-image {
    max-width: 100%;
    border-radius: 8px;
}

.modal-product-specs {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.modal-product-specs dt {
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 0.5rem;
}

.modal-product-specs dd {
    color: #636e72;
    margin-bottom: 1rem;
}