/* Variables CSS para la nueva paleta de colores de Gradotech */
:root {
    --primary-color: #5FB134;
    /* Verde Gradotech */
    --secondary-color: #4a8f2a;
    /* Verde más oscuro */
    --accent-color: #5FB134;
    /* Verde Gradotech */
    --accent-hover: #6bc23a;
    /* Verde hover más claro */
    --dark-bg: #1a1a1a;
    /* Fondo oscuro elegante */
    --light-bg: #f8f9fa;
    /* Fondo claro */
    --text-primary: #212121;
    /* Texto principal */
    --text-secondary: #757575;
    /* Texto secundario */
    --white: #ffffff;
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
    --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
    --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Variables específicas para el formulario */
    --form-bg: #ffffff;
    --form-border: 1px solid rgba(0, 0, 0, 0.1);
    --form-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --form-radius: 12px;
    --input-bg: #f8f9fa;
    --input-border: 1px solid #e9ecef;
    --input-focus-border: var(--primary);
    --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    --input-padding: 0.75rem 1rem;
    --input-radius: 8px;
    --label-color: #495057;
    --error-color: #dc3545;
    --success-color: #28a745;
}

/* Ocultar scrollbar hasta hacer scroll */
html {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

html::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

html.scrolling {
    scrollbar-width: auto;
    -ms-overflow-style: auto;
}

html.scrolling::-webkit-scrollbar {
    display: block;
    width: 8px;
}

html.scrolling::-webkit-scrollbar-track {
    background: #f1f1f1;
}

html.scrolling::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

html.scrolling::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

body {
    font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.loaded {
    opacity: 1;
}

/* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
.navbar {
    background: #f8f9fa !important;
    backdrop-filter: blur(10px);
    transition: var(--transition);
    box-shadow: none;
}

.navbar.scrolled {
    background: rgba(26, 26, 26, 0.98) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.navbar-brand img {
    transition: var(--transition);
    max-height: 50px;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.nav-link {
    position: relative;
    transition: var(--transition);
    font-weight: 500;
    color: var(--white) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-size: 1.1rem;
    padding: 0.75rem 1.2rem !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-link:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--white);
    transition: var(--transition);
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--white) !important;
    opacity: 0.8;
}

.nav-link.active {
    color: var(--white) !important;
    font-weight: 600;
}

.nav-link.active::after {
    width: 100%;
    background: var(--white);
}

/* Header mejorado con colores de Gradotech */
.masthead {
    background: var(--gradient-primary);
    position: relative;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 0;
}

/* Efecto de ondas animadas */
.masthead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

/* Nuevo efecto de ondas animadas */
.waves-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" opacity=".25" fill="%23ffffff"/></path></svg>');
    background-size: 1200px 100%;
    animation: wave 25s linear infinite;
}

.wave:nth-child(2) {
    bottom: 10%;
    animation: wave 20s linear infinite;
    opacity: 0.5;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
}

.wave:nth-child(3) {
    bottom: 20%;
    animation: wave 15s linear infinite;
    opacity: 0.2;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
}

@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }

    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.8);
    }

    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.masthead .container {
    position: relative;
    z-index: 10;
    text-align: left;
    padding-left: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.masthead-heading {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--white);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    line-height: 1.1;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(30px);
    animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
    text-align: left;
}

.masthead-subheading {
    font-size: 2rem;
    color: var(--white) !important;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(30px);
    animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
    text-align: left;
}

@keyframes elegantFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Secciones que ocupan 100% de altura con efecto parallax */
.full-width-section {
    min-height: 100vh;
    padding: 80px 0;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.full-width-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.05;
    z-index: -1;
    transform: translateZ(0);
}

.full-width-section:nth-child(even) {
    background: var(--light-bg);
}

.full-width-section:nth-child(even)::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

.full-width-section:nth-child(odd)::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
}

/* Sección empresa específica - 100% altura */
#page-empresa {
    min-height: 100vh;
    height: auto;
    padding: 120px 0 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    background: var(--white);
}

.empresa-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Títulos de sección mejorados */
.border-left-green-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    position: relative;
    padding-left: 2rem;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.border-left-green-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--gradient-primary);
    border-radius: 3px;
}

/* Carrusel horizontal de alianzas */
.alliances-carousel {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: transparent;
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
}

.alliances-track {
    display: flex;
    animation: scrollHorizontal 60s linear infinite;
    gap: 4rem;
    align-items: center;
    padding: 1rem 0;
    width: max-content;
    will-change: transform;
}

.alliances-track:hover {
    animation-play-state: paused;
}

.alliance-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    height: 140px;
    padding: 1.5rem;
    background: transparent;
    border-radius: 15px;
    transition: var(--transition);
    flex-shrink: 0;
    position: relative;
}

.alliance-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    opacity: 0;
}

.alliance-item:hover::before {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(95, 177, 52, 0.3);
}

.alliance-item:hover {
    transform: scale(1.05);
}

.alliance-item img {
    max-width: 160px;
    max-height: 90px;
    object-fit: contain;
    /* filter: grayscale(100%) brightness(0.9); */
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

.alliance-item:hover img {
    /* filter: grayscale(0%) brightness(1.1); */
    transform: scale(1.1);
}

@keyframes scrollHorizontal {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-33.333% * 3));
    }
}

/* Controles del carrusel horizontal - OCULTOS */
.carousel-controls {
    display: none !important;
}

.carousel-btn {
    display: none !important;
}

.carousel-btn:hover {
    display: none !important;
}

.carousel-btn:disabled {
    display: none !important;
}

/* Control de navegación lateral como Black-up - OCULTO */
.side-nav-control {
    display: none !important;
}

.nav-dot {
    display: none !important;
}

.nav-dot:hover,
.nav-dot.active {
    display: none !important;
}

.nav-dot-label {
    display: none !important;
}

.nav-dot:hover .nav-dot-label {
    display: none !important;
}

/* Efectos de scroll mejorados */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal.from-left {
    transform: translateX(-50px);
}

.scroll-reveal.from-right {
    transform: translateX(50px);
}

.scroll-reveal.from-bottom {
    transform: translateY(50px);
}

.scroll-reveal.scale-in {
    transform: scale(0.8);
}

/* Responsive para el carrusel horizontal */
@media (max-width: 768px) {
    .alliances-carousel {
        height: 150px;
        padding: 1rem;
        margin: 1rem 0;
    }

    .alliance-item {
        min-width: 120px;
        height: 80px;
        padding: 1rem;
    }

    .alliance-item img {
        max-height: 50px;
    }

    .carousel-controls {
        display: none !important;
    }

    .carousel-btn {
        display: none !important;
    }

    .masthead-heading {
        font-size: 2.5rem;
    }

    .masthead-subheading {
        font-size: 1.3rem;
    }

    .side-nav-control {
        display: none !important;
    }

    .nav-dot {
        display: none !important;
    }
}

/* Cards de servicios mejorados */
.card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    background: var(--white);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-strong);
}

.card-img-top {
    transition: var(--transition);
    height: 250px;
    object-fit: cover;
}

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

.card-body {
    padding: 2rem;
}

.card-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-text {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* Efectos de imagen mejorados */
.img-grayscale {
    filter: grayscale(100%);
    transition: var(--transition);
}

.img-grayscale:hover {
    /* filter: grayscale(0%) brightness(1.1); */
}

/* Sección de clientes */
.client-logo {
    transition: var(--transition);
    filter: grayscale(100%);
    opacity: 0.7;
}

.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
    box-shadow: var(--shadow-strong);
    border-color: var(--primary-color);
}

/* Sección de partners */
.partner-card {
    background: var(--white);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
    border-color: var(--primary-color);
}

.partner-card img {
    transition: var(--transition);
    filter: grayscale(100%);
}

.partner-card:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Estilos modernos para el formulario de contacto */
.contact-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
    border: 1px solid rgba(95, 177, 52, 0.1);
}

.contact-info-wrapper {
    background: linear-gradient(135deg, #5FB134 0%, #4a8f2a 100%);
    color: white;
    padding: 3rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px 0 0 20px;
}

.contact-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.contact-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.contact-item:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.15);
}

.contact-item i {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.contact-item h5 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: white;
}

.contact-item p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.social-links {
    margin-top: auto;
    display: flex;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: white;
    color: #5FB134;
    transform: translateY(-3px);
}

.form-wrapper {
    padding: 3rem 2rem;
    background: white;
    border-radius: 0 20px 20px 0;
}

.form-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.form-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.modern-form .form-group {
    margin-bottom: 1.5rem;
}

.modern-form label {
    display: block;
    color: #333;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.modern-form .input-container {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modern-form .input-container:hover,
.modern-form .input-container:focus-within {
    border-color: #5FB134;
    background: white;
    box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.1);
}

.modern-form .input-container input,
.modern-form .input-container select,
.modern-form .input-container textarea {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #333;
    outline: none;
}

.modern-form .input-container textarea {
    min-height: 140px;
    resize: vertical;
}

.modern-form .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5FB134;
    font-size: 1.1rem;
}

.modern-form .input-container textarea+.input-icon {
    top: 1rem;
    transform: none;
}

.modern-form .error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
}

.modern-form .privacy-check {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.modern-form .privacy-check input[type="checkbox"] {
    margin-top: 0.3rem;
}

.modern-form .privacy-check label {
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
    line-height: 1.5;
}

.modern-form .privacy-check a {
    color: #5FB134;
    text-decoration: none;
}

.modern-form .privacy-check a:hover {
    text-decoration: underline;
}

.modern-form .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.modern-form .btn-primary:hover {
    background: #4a8f2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
}

.modern-form .btn-primary i {
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 991.98px) {
    .contact-container {
        padding: 2rem;
    }

    .contact-info-wrapper {
        border-radius: 20px 20px 0 0;
        margin-bottom: 2rem;
    }

    .form-wrapper {
        border-radius: 0 0 20px 20px;
        padding: 2rem;
    }
}

@media (max-width: 767.98px) {
    .contact-container {
        padding: 1.5rem;
    }

    .contact-title,
    .form-title {
        font-size: 1.75rem;
    }

    .contact-item {
        padding: 0.75rem;
    }

    .modern-form .input-container input,
    .modern-form .input-container select,
    .modern-form .input-container textarea {
        font-size: 0.95rem;
    }
}

/* Mensajes de error */
.error-message {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: none;
    animation: slideIn 0.2s ease;
    text-align: left;
    padding-left: 0;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* Botón de envío mejorado */
.btn-primary {
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    margin-top: 0.5rem;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
    letter-spacing: normal;
}

.btn-primary:hover {
    background: #4a8f2a;
    transform: none;
    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
}

/* Contenedor de captcha */
.captcha-container {
    background: #f8f9fa;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    margin-bottom: 1rem;
}

.captcha-question {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: #333;
}

.captcha-question i {
    font-size: 1rem;
    color: #5FB134;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-form {
        padding: 2rem;
        margin: 5% 0;
    }

    .form-wrapper h3 {
        font-size: 1.5rem;
    }

    .form-wrapper p {
        font-size: 0.9rem;
    }

    .modern-input,
    .modern-textarea,
    .modern-select {
        font-size: 0.9rem;
    }

    .input-icon {
        font-size: 0.9rem;
    }
}

/* Footer mejorado */
.footer {
    background: var(--dark-bg) !important;
    color: var(--white);
    padding: 3rem 0 1rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-accent);
}

.link-empresa {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.link-empresa:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Efectos de scroll */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animaciones adicionales */
.slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* Efectos de hover para botones sociales */
.btn-social {
    transition: var(--transition);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-social:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: var(--shadow-strong);
}

/* Mejoras en el mapa */
.responsive-iframe {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.responsive-iframe iframe {
    border: none;
    width: 100%;
    height: 300px;
}

/* Efectos de partículas mejorados */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    background: transparent;
}

/* Utilidades adicionales */
.text-gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient {
    background: var(--gradient-primary);
}

.shadow-custom {
    box-shadow: var(--shadow-strong);
}

/* Efectos de carga */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.mt-100 {
    margin-top: 100px !important;
}

.border-left-green {
    border-left: 4px solid #5FB134;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
}

.text-content-empresa {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    text-align: justify;
}

.empresa-content p {
    text-align: justify;
}

.image-container-pilares {
    text-align: center;
    margin: 2rem 0;
}

.image-container-pilares img {
    max-width: 160px;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.image-container-pilares:hover img {
    transform: scale(1.02);
    box-shadow: var(--shadow-strong);
}

/* Estilos para el contenedor de la imagen */
.image-container {
    width: 400px;
    height: 400px;

    overflow: hidden;
    position: relative;

    margin-left: 10%;
    display: flex;
    /* Usa flexbox para centrar verticalmente */
    align-items: center;
    /* Centra verticalmente el contenido */
}

/* Estilos para la imagen */
.image-container img {
    max-width: 160px;
    max-height: 100%;
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
    /* Efecto de transición para hover */
}

.image-container:hover img {
    border: 2px solid #5FB134;
    /* Cambia al color y grosor de borde deseado */
}

.custom-card {
    width: 100% !important;
    /* Asegura que el card ocupe todo el ancho disponible */
    margin-bottom: 20px !important;
    /* Espacio entre las tarjetas */
}

.custom-card .card-body {
    position: relative !important;
    /* Para posicionar absolutamente la cabecera dentro del card */
}

.card-text-empresa {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: justify;
}

.card-title-empresa {
    background-color: #5FB134;
    color: #fff;
    padding: 5px;
    /* Opcional: agrega relleno para que se vea mejor */
    display: flex;
    /* Crea un contenedor flexible */
    justify-content: space-between;
    /* Espacio uniforme entre el texto y el icono */
    align-items: center;
    /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
}

.card-title-empresa i {
    margin-left: 5px;
    /* Agrega un margen izquierdo al icono para separarlo del texto */
}

.section {
    margin-bottom: 20px !important;
    /* Agrega margen inferior para separar las secciones */
}

.contacto {
    background-color: #5FB134;
}

/* Efectos de scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Efectos de carga para imágenes */
img {
    transition: opacity 0.3s ease;
}

img.loaded {
    opacity: 1;
}

/* Animación de carga inicial */
body {
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.loaded {
    opacity: 1;
}

/* Mejoras en las pestañas */
.nav-tabs .nav-link {
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 25px;
    margin: 0 5px;
    transition: var(--transition);
}

.nav-tabs .nav-link.active {
    background: var(--gradient-accent);
    color: var(--white);
    box-shadow: var(--shadow-soft);
}

.nav-tabs .nav-link:hover {
    background: rgba(95, 177, 52, 0.1);
    color: var(--primary-color);
}

/* Efectos de hover para botones sociales mejorados */
.btn-social:hover {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Efectos de hover para enlaces */
a {
    transition: var(--transition);
}

a:hover {
    color: var(--primary-color);
}

/* Efectos de hover para iconos */
.fas,
.fab {
    transition: var(--transition);
}

.service-highlight:hover .fas,
.service-highlight:hover .fab {
    transform: scale(1.2);
    color: var(--white);
}

/* Efectos de hover para el botón scroll to top */
.scroll-to-top:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
}

/* Efectos de animación para elementos específicos */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.fade-in-down {
    animation: fadeInDown 0.8s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* Efectos de hover para iconos */
.fas,
.fab {
    transition: var(--transition);
}

.service-highlight:hover .fas,
.service-highlight:hover .fab {
    transform: scale(1.2);
    color: var(--white);
}

/* Efectos de hover para elementos de la empresa */
.image-container-pilares:hover img {
    transform: scale(1.05);
    transition: var(--transition);
}

/* Mejoras en la navegación móvil */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    .navbar-nav .nav-link:last-child {
        margin-bottom: 0;
    }

    .masthead-heading {
        font-size: 2.5rem;
    }

    .masthead-subheading {
        font-size: 1.1rem;
    }

    .border-left-green-title {
        font-size: 2.5rem;
    }

    .full-width-section {
        padding: 2rem 0;
    }

    #page-empresa {
        padding: 2rem 0;
    }

    .service-highlights {
        flex-direction: column;
        gap: 1rem;
        justify-content: flex-start;
        padding-left: 1rem;
    }

    .service-highlight {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    .side-nav-control {
        display: none;
    }

    .nav-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 992px) {
    .masthead {
        padding: 0 1rem;
    }

    .service-highlights {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1rem;
        padding-left: 1rem;
    }

    .navbar-brand img {
        max-height: 40px;
    }

    .nav-link {
        font-size: 1rem;
        padding: 0.5rem 1rem !important;
    }
}

@media (max-width: 576px) {
    .masthead-heading {
        font-size: 2rem;
    }

    .service-highlight {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .btn-primary {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
    }

    .border-left-green-title {
        font-size: 2rem;
        padding-left: 1rem;
    }
}

/* Asegurar que todas las secciones ocupen 100% de altura */
.page-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 80px;
}

/* Mejorar el espaciado del contenido en secciones */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Efectos de hover mejorados para navegación */
.navbar-nav .nav-link {
    position: relative;
    transition: all 0.3s ease;
    margin: 0 0.5rem;
}

.navbar-nav .nav-link:hover {
    transform: translateY(-2px);
}

.navbar-nav .nav-link.active {
    transform: translateY(-2px);
    font-weight: 700;
}

/* Efectos de parallax mejorados */
.full-width-section::before {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimización para dispositivos móviles */
@media (max-width: 768px) {
    .full-width-section::before {
        background-attachment: scroll;
    }

    .masthead::before {
        background-attachment: scroll;
    }
}

/* Botones mejorados con colores de Gradotech */
.btn-primary {
    background: var(--gradient-accent);
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    background: var(--gradient-primary);
}

/* Servicios destacados en el header - COLOR VERDE */
.service-highlights {
    display: flex;
    justify-content: flex-start;
    margin-top: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding-left: 0;
    align-items: flex-start;
}

.service-highlight {
    background: rgba(95, 177, 52, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(95, 177, 52, 0.3);
    border-radius: 15px;
    padding: 1rem 1.5rem;
    color: var(--white);
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
}

.service-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--white);
    transition: var(--transition);
}

.service-highlight:hover {
    background: rgba(95, 177, 52, 1);
    transform: translateY(-5px);
    border-color: var(--white);
    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
}

.service-highlight:hover::before {
    width: 100%;
    opacity: 0.3;
}

/* Efecto de brillo para los service highlights */
.service-highlight::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.service-highlight:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(50%, 50%);
}

/* Efectos de hover para iconos en service highlights */
.service-highlight .fas,
.service-highlight .fab {
    transition: var(--transition);
    margin-right: 0.5rem;
}

.service-highlight:hover .fas,
.service-highlight:hover .fab {
    transform: scale(1.2);
    color: var(--white);
}

/* Efectos de hover para enlaces de contacto */
.contact-form a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.contact-form i {
    color: var(--primary-color);
    width: 20px;
}

/* Efectos de hover para elementos de la empresa */
.empresa-content:hover {
    transform: translateY(-2px);
    transition: var(--transition);
}

.image-container-pilares:hover img {
    transform: scale(1.05);
    transition: var(--transition);
}

/* Mejoras en la accesibilidad */
.nav-link:focus,
.btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Efectos de hover para elementos de partners */
.partner-card:hover .card-text-empresa {
    color: var(--text-primary);
}

/* Efectos de scroll reveal adicionales */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.fade-in-down {
    animation: fadeInDown 0.8s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* Títulos elegantes con línea vertical al costado */
.elegant-title {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: -0.5px;
    line-height: 1;
    position: relative;
    padding-left: 2rem;
    text-align: left;
}

.elegant-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0.2px;
    line-height: 1.1;
    opacity: 0.8;
    text-align: left;
    padding-left: 2rem;
    position: relative;
}

/* Contenedor para título y subtítulo con línea vertical compartida */
.title-container {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}

.title-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--gradient-primary);
    border-radius: 3px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1;
}

.title-container .elegant-title {
    padding-left: 0;
    margin-bottom: 0;
}

.title-container .elegant-subtitle {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
}

/* Animación para los títulos elegantes */
.elegant-title {
    opacity: 0;
    transform: translateY(30px);
    animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
}

.elegant-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
}

@keyframes elegantTitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes elegantSubtitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Responsividad para títulos elegantes */
@media (max-width: 768px) {
    .elegant-title {
        font-size: 2.5rem;
    }

    .elegant-subtitle {
        font-size: 1.1rem;
    }

    .title-container {
        padding-left: 1.5rem;
    }
}

@media (max-width: 576px) {
    .elegant-title {
        font-size: 2rem;
    }

    .elegant-subtitle {
        font-size: 1rem;
    }

    .title-container {
        padding-left: 1rem;
    }
}

/* Eliminar contornos de navegación */
.navbar-nav .nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.navbar-nav .nav-link:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Estilos para la sección Nosotros */
.about-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(95, 177, 52, 0.1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.about-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.about-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.about-icon i {
    font-size: 1.5rem;
    color: var(--white);
}

.about-card h3 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.about-text {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

/* Tarjetas de Misión y Visión */
.mission-vision-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(95, 177, 52, 0.1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mission-vision-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.card-header-mv {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.card-header-mv i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-right: 1rem;
}

.card-header-mv h3 {
    color: var(--primary-color);
    font-weight: 600;
    margin: 0;
    font-size: 1.5rem;
}

.mission-vision-card p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

/* Responsive para la sección Nosotros */
@media (max-width: 768px) {

    .about-card,
    .mission-vision-card {
        padding: 2rem;
    }

    .about-icon {
        width: 50px;
        height: 50px;
    }

    .about-icon i {
        font-size: 1.2rem;
    }
}

/* Grid moderno para servicios */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 2rem;
    justify-content: center;
}

.service-modern-card {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(95, 177, 52, 0.15);
    padding: 2.5rem 2rem 2rem 2rem;
    text-align: center;
    transition: box-shadow 0.3s, transform 0.3s;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.service-modern-card:hover {
    box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
    transform: translateY(-6px) scale(1.03);
}

.service-icon {
    background: var(--gradient-primary);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
}

.service-icon i {
    color: #fff;
    font-size: 2.5rem;
}

.service-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.service-desc {
    color: var(--text-secondary);
    font-size: 1.08rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.btn-modern {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: 0.7rem 2.2rem;
    font-weight: 600;
    font-size: 1.08rem;
    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

.btn-modern:hover {
    background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
    transform: scale(1.05);
}

@media (max-width: 992px) {
    .service-modern-card {
        min-height: 380px;
        padding: 2rem 1.2rem 1.5rem 1.2rem;
    }

    .service-icon {
        width: 65px;
        height: 65px;
    }

    .service-icon i {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .services-grid {
        gap: 1.5rem 0.5rem;
    }

    .service-modern-card {
        min-height: 320px;
        padding: 1.5rem 0.7rem 1.2rem 0.7rem;
    }

    .service-title {
        font-size: 1.1rem;
    }

    .service-desc {
        font-size: 0.98rem;
    }

    .btn-modern {
        font-size: 0.98rem;
        padding: 0.6rem 1.5rem;
    }
}

/* Cards modernas para servicios con imágenes en colores */
.service-card-modern {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    border: 1px solid rgba(95, 177, 52, 0.1);
    position: relative;
}

.service-card-modern:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
    border-color: var(--primary-color);
}

.service-image-container {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    filter: brightness(0.9) contrast(1.1);
}

.service-card-modern:hover .service-image {
    transform: scale(1.05);
    filter: brightness(1) contrast(1.2);
}

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.service-card-modern:hover .service-overlay {
    opacity: 1;
}

.service-icon-overlay {
    font-size: 4rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.2s ease;
}

.service-card-modern:hover .service-icon-overlay {
    transform: scale(1);
}

.service-content {
    padding: 2rem;
    position: relative;
}

.service-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.service-card-modern:hover .service-content::before {
    transform: scaleX(1);
}

.service-title-modern {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.service-text-modern {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.btn-service-modern {
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.8rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
}

.btn-service-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.3s ease;
}

.btn-service-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
}

.btn-service-modern:hover::before {
    left: 100%;
}

/* Responsive para servicios modernos */
@media (max-width: 768px) {
    .service-image-container {
        height: 220px;
    }

    .service-content {
        padding: 1.5rem;
    }

    .service-title-modern {
        font-size: 1.3rem;
    }

    .service-text-modern {
        font-size: 0.95rem;
    }

    .service-icon-overlay {
        font-size: 3rem;
    }
}

/* Selector de idioma */
.language-selector {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999 !important;
    background: rgba(95, 177, 52, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
    transition: all 0.3s ease;
    display: flex;
    gap: 4px;
    align-items: center;
}

.language-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.language-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 700;
}

.language-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: scale(1.05);
}

/* Estilos del formulario de contacto moderno */
.contact-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
    border: 1px solid rgba(95, 177, 52, 0.1);
}

.contact-info-wrapper {
    background: linear-gradient(135deg, #5FB134 0%, #4a8f2a 100%);
    color: white;
    padding: 3rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px 0 0 20px;
}

.contact-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.contact-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.contact-item:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.15);
}

.contact-item i {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.contact-item h5 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: white;
}

.contact-item p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.social-links {
    margin-top: auto;
    display: flex;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: white;
    color: #5FB134;
    transform: translateY(-3px);
}

.form-wrapper {
    padding: 3rem 2rem;
    background: white;
    border-radius: 0 20px 20px 0;
}

.form-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.form-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.modern-form .form-group {
    margin-bottom: 1.5rem;
}

.modern-form label {
    display: block;
    color: #333;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.modern-form .input-container {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modern-form .input-container:hover,
.modern-form .input-container:focus-within {
    border-color: #5FB134;
    background: white;
    box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.1);
}

.modern-form .input-container input,
.modern-form .input-container select,
.modern-form .input-container textarea {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #333;
    outline: none;
}

.modern-form .input-container textarea {
    min-height: 140px;
    resize: vertical;
}

.modern-form .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5FB134;
    font-size: 1.1rem;
}

.modern-form .input-container textarea+.input-icon {
    top: 1rem;
    transform: none;
}

.modern-form .error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
}

.modern-form .privacy-check {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.modern-form .privacy-check input[type="checkbox"] {
    margin-top: 0.3rem;
}

.modern-form .privacy-check label {
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
    line-height: 1.5;
}

.modern-form .privacy-check a {
    color: #5FB134;
    text-decoration: none;
}

.modern-form .privacy-check a:hover {
    text-decoration: underline;
}

.modern-form .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.modern-form .btn-primary:hover {
    background: #4a8f2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
}

.modern-form .btn-primary i {
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 991.98px) {
    .contact-container {
        padding: 2rem;
    }

    .contact-info-wrapper {
        border-radius: 20px 20px 0 0;
        margin-bottom: 2rem;
    }

    .form-wrapper {
        border-radius: 0 0 20px 20px;
        padding: 2rem;
    }
}

@media (max-width: 767.98px) {
    .contact-container {
        padding: 1.5rem;
    }

    .contact-title,
    .form-title {
        font-size: 1.75rem;
    }

    .contact-item {
        padding: 0.75rem;
    }

    .modern-form .input-container input,
    .modern-form .input-container select,
    .modern-form .input-container textarea {
        font-size: 0.95rem;
    }
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: #4a8f2a;
    transform: translateY(-3px);
    color: white;
}

/* Estilos para el formulario */
.form-wrapper {
    padding-left: 2rem;
}

.form-title {
    color: #333;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.form-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.modern-form .form-group {
    margin-bottom: 1.5rem;
}

.modern-form label {
    display: block;
    color: #333;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.modern-form .input-container {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modern-form .input-container:hover,
.modern-form .input-container:focus-within {
    border-color: #5FB134;
    background: white;
}

.modern-form .input-container input,
.modern-form .input-container select,
.modern-form .input-container textarea {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #333;
    outline: none;
}

.modern-form .input-container textarea {
    min-height: 140px;
    resize: vertical;
}

.modern-form .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5FB134;
    font-size: 1.1rem;
}

.modern-form .input-container textarea+.input-icon {
    top: 1rem;
    transform: none;
}

.modern-form .error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
}

.modern-form .privacy-check {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

.modern-form .privacy-check input[type="checkbox"] {
    margin-top: 0.3rem;
}

.modern-form .privacy-check label {
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
    line-height: 1.5;
}

.modern-form .privacy-check a {
    color: #5FB134;
    text-decoration: none;
}

.modern-form .privacy-check a:hover {
    text-decoration: underline;
}

.modern-form .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.modern-form .btn-primary:hover {
    background: #4a8f2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
}

.modern-form .btn-primary i {
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 991.98px) {
    .contact-container {
        padding: 2rem;
    }

    .contact-info-wrapper {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .form-wrapper {
        padding-left: 0;
    }

    .contact-title,
    .form-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 767.98px) {
    .contact-container {
        padding: 1.5rem;
    }

    .contact-item {
        padding: 0.75rem;
    }

    .modern-form .input-container input,
    .modern-form .input-container select,
    .modern-form .input-container textarea {
        font-size: 0.95rem;
    }
}

/* Títulos elegantes con línea vertical al costado */
.elegant-title {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: -0.5px;
    line-height: 1;
    position: relative;
    padding-left: 2rem;
    text-align: left;
}

.elegant-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0.2px;
    line-height: 1.1;
    opacity: 0.8;
    text-align: left;
    padding-left: 2rem;
    position: relative;
}

/* Contenedor para título y subtítulo con línea vertical compartida */
.title-container {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}

.title-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--gradient-primary);
    border-radius: 3px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1;
}

.title-container .elegant-title {
    padding-left: 0;
    margin-bottom: 0;
}

.title-container .elegant-subtitle {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
}

/* Animación para los títulos elegantes */
.elegant-title {
    opacity: 0;
    transform: translateY(30px);
    animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
}

.elegant-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
}

@keyframes elegantTitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes elegantSubtitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Responsividad para títulos elegantes */
@media (max-width: 768px) {
    .elegant-title {
        font-size: 2.5rem;
    }

    .elegant-subtitle {
        font-size: 1.1rem;
    }

    .title-container {
        padding-left: 1.5rem;
    }
}

@media (max-width: 576px) {
    .elegant-title {
        font-size: 2rem;
    }

    .elegant-subtitle {
        font-size: 1rem;
    }

    .title-container {
        padding-left: 1rem;
    }
}

/* Eliminar contornos de navegación */
.navbar-nav .nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.navbar-nav .nav-link:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Estilos para la sección Nosotros */
.about-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(95, 177, 52, 0.1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.about-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.about-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.about-icon i {
    font-size: 1.5rem;
    color: var(--white);
}

.about-card h3 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.about-text {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

/* Variables CSS para la nueva paleta de colores de Gradotech */
:root {
    --primary-color: #5FB134;
    /* Verde Gradotech */
    --secondary-color: #4a8f2a;
    /* Verde más oscuro */
    --accent-color: #5FB134;
    /* Verde Gradotech */
    --accent-hover: #6bc23a;
    /* Verde hover más claro */
    --dark-bg: #1a1a1a;
    /* Fondo oscuro elegante */
    --light-bg: #f8f9fa;
    /* Fondo claro */
    --text-primary: #212121;
    /* Texto principal */
    --text-secondary: #757575;
    /* Texto secundario */
    --white: #ffffff;
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
    --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
    --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Variables específicas para el formulario */
    --form-bg: #ffffff;
    --form-border: 1px solid rgba(0, 0, 0, 0.1);
    --form-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --form-radius: 12px;
    --input-bg: #f8f9fa;
    --input-border: 1px solid #e9ecef;
    --input-focus-border: var(--primary);
    --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    --input-padding: 0.75rem 1rem;
    --input-radius: 8px;
    --label-color: #495057;
    --error-color: #dc3545;
    --success-color: #28a745;
}

/* Ocultar scrollbar hasta hacer scroll */
html {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

html::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

html.scrolling {
    scrollbar-width: auto;
    -ms-overflow-style: auto;
}

html.scrolling::-webkit-scrollbar {
    display: block;
    width: 8px;
}

html.scrolling::-webkit-scrollbar-track {
    background: #f1f1f1;
}

html.scrolling::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

html.scrolling::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

body {
    font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.loaded {
    opacity: 1;
}

/* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
.navbar {
    background: #f8f9fa !important;
    backdrop-filter: blur(10px);
    transition: var(--transition);
    box-shadow: none;
}

.navbar.scrolled {
    background: rgba(26, 26, 26, 0.98) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.navbar-brand img {
    transition: var(--transition);
    max-height: 50px;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.nav-link {
    position: relative;
    transition: var(--transition);
    font-weight: 500;
    color: var(--white) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-size: 1.1rem;
    padding: 0.75rem 1.2rem !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-link:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--white);
    transition: var(--transition);
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--white) !important;
    opacity: 0.8;
}

.nav-link.active {
    color: var(--white) !important;
    font-weight: 600;
}

.nav-link.active::after {
    width: 100%;
    background: var(--white);
}

/* Header mejorado con colores de Gradotech */
.masthead {
    background: var(--gradient-primary);
    position: relative;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 0;
}

/* Efecto de ondas animadas */
.masthead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

/* Nuevo efecto de ondas animadas */
.waves-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23ffffff"/></path></svg>');
    background-size: 1200px 100%;
    animation: wave 25s linear infinite;
}

.wave:nth-child(2) {
    bottom: 10%;
    animation: wave 20s linear infinite;
    opacity: 0.5;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
}

.wave:nth-child(3) {
    bottom: 20%;
    animation: wave 15s linear infinite;
    opacity: 0.2;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
}

@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }

    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.8);
    }

    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.masthead .container {
    position: relative;
    z-index: 10;
    text-align: left;
    padding-left: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.masthead-heading {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--white);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    line-height: 1.1;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(30px);
    animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
    text-align: left;
}

.masthead-subheading {
    font-size: 2rem;
    color: var(--white) !important;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(30px);
    animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
    text-align: left;
}

@keyframes elegantFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Secciones que ocupan 100% de altura con efecto parallax */
.full-width-section {
    min-height: 100vh;
    padding: 80px 0;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.full-width-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.05;
    z-index: -1;
    transform: translateZ(0);
}

.full-width-section:nth-child(even) {
    background: var(--light-bg);
}

.full-width-section:nth-child(even)::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

.full-width-section:nth-child(odd)::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
}

/* Sección empresa específica - 100% altura */
#page-empresa {
    min-height: 100vh;
    height: auto;
    padding: 120px 0 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    background: var(--white);
}

.empresa-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Títulos de sección mejorados */
.border-left-green-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    position: relative;
    padding-left: 2rem;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.border-left-green-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--gradient-primary);
    border-radius: 3px;
}

/* Carrusel horizontal de alianzas */
.alliances-carousel {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: transparent;
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
}

.alliances-track {
    display: flex;
    animation: scrollHorizontal 60s linear infinite;
    gap: 4rem;
    align-items: center;
    padding: 1rem 0;
    width: max-content;
    will-change: transform;
}

.alliances-track:hover {
    animation-play-state: paused;
}

.alliance-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    height: 140px;
    padding: 1.5rem;
    background: transparent;
    border-radius: 15px;
    transition: var(--transition);
    flex-shrink: 0;
    position: relative;
}

.alliance-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    opacity: 0;
}

.alliance-item:hover::before {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(95, 177, 52, 0.3);
}

.alliance-item:hover {
    transform: scale(1.05);
}

.alliance-item img {
    max-width: 160px;
    max-height: 90px;
    object-fit: contain;
    /* filter: grayscale(100%) brightness(0.9); */
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

.alliance-item:hover img {
    /* filter: grayscale(0%) brightness(1.1); */
    transform: scale(1.1);
}

@keyframes scrollHorizontal {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-33.333% * 3));
    }
}

/* Controles del carrusel horizontal - OCULTOS */
.carousel-controls {
    display: none !important;
}

.carousel-btn {
    display: none !important;
}

.carousel-btn:hover {
    display: none !important;
}

.carousel-btn:disabled {
    display: none !important;
}

/* Control de navegación lateral como Black-up - OCULTO */
.side-nav-control {
    display: none !important;
}

.nav-dot {
    display: none !important;
}

.nav-dot:hover,
.nav-dot.active {
    display: none !important;
}

.nav-dot-label {
    display: none !important;
}

.nav-dot:hover .nav-dot-label {
    display: none !important;
}

/* Efectos de scroll mejorados */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal.from-left {
    transform: translateX(-50px);
}

.scroll-reveal.from-right {
    transform: translateX(50px);
}

.scroll-reveal.from-bottom {
    transform: translateY(50px);
}

.scroll-reveal.scale-in {
    transform: scale(0.8);
}

/* Responsive para el carrusel horizontal */
@media (max-width: 768px) {
    .alliances-carousel {
        height: 150px;
        padding: 1rem;
        margin: 1rem 0;
    }

    .alliance-item {
        min-width: 120px;
        height: 80px;
        padding: 1rem;
    }

    .alliance-item img {
        max-height: 50px;
    }

    .carousel-controls {
        display: none !important;
    }

    .carousel-btn {
        display: none !important;
    }

    .masthead-heading {
        font-size: 2.5rem;
    }

    .masthead-subheading {
        font-size: 1.3rem;
    }

    .side-nav-control {
        display: none !important;
    }

    .nav-dot {
        display: none !important;
    }
}

/* Cards de servicios mejorados */
.card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    background: var(--white);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-strong);
}

.card-img-top {
    transition: var(--transition);
    height: 250px;
    object-fit: cover;
}

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

.card-body {
    padding: 2rem;
}

.card-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-text {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* Efectos de imagen mejorados */
.img-grayscale {
    filter: grayscale(100%);
    transition: var(--transition);
}

.img-grayscale:hover {
    /* filter: grayscale(0%) brightness(1.1); */
}

/* Sección de clientes */
.client-logo {
    transition: var(--transition);
    filter: grayscale(100%);
    opacity: 0.7;
}

.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
    box-shadow: var(--shadow-strong);
    border-color: var(--primary-color);
}

/* Sección de partners */
.partner-card {
    background: var(--white);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
    border-color: var(--primary-color);
}

.partner-card img {
    transition: var(--transition);
    filter: grayscale(100%);
}

.partner-card:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Formulario de contacto mejorado - Diseño limpio y profesional */
.contact-form {
    background: var(--form-bg);
    padding: 3rem;
    border: var(--form-border);
    box-shadow: var(--form-shadow);
    margin: 10% 0;
    max-width: 160px;
    border-radius: var(--form-radius);
}

.form-wrapper h3 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: left;
}

.form-wrapper p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 2rem;
    text-align: left;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

/* Contenedor de input mejorado */
.input-container {
    position: relative;
    background: var(--input-bg);
    border: var(--input-border);
    transition: all 0.2s ease;
    height: 48px;
    display: flex;
    align-items: center;
    border-radius: var(--input-radius);
}

.input-container:hover {
    border-color: var(--primary-color);
}

.input-container.focused {
    border-color: var(--primary-color);
    border-width: 2px;
    box-shadow: var(--input-focus-shadow);
}

.input-container.error {
    border-color: var(--error-color);
    border-width: 2px;
}

/* Inputs mejorados */
.modern-input,
.modern-textarea,
.modern-select {
    width: 100%;
    border: none;
    background: transparent;
    padding: var(--input-padding);
    font-size: 0.95rem;
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s ease;
    height: 100%;
    text-align: left;
}

.modern-input::placeholder,
.modern-textarea::placeholder {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: left;
    opacity: 0.8;
}

.modern-textarea {
    height: 140px;
    resize: vertical;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.modern-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-right: 3rem;
}

.modern-select:focus {
    box-shadow: none;
}

.modern-select option {
    background: var(--input-bg);
    color: var(--text-primary);
    padding: 0.5rem;
}

/* Iconos de input */
.input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 1rem;
    z-index: 2;
    transition: all 0.2s ease;
    width: 20px;
    text-align: center;
}

.input-container.focused .input-icon {
    color: var(--primary-color);
}

/* Mensajes de error */
.error-message {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: none;
    animation: slideIn 0.2s ease;
    text-align: left;
    padding-left: 0;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* Botón de envío mejorado */
.btn-primary {
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    margin-top: 0.5rem;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
    letter-spacing: normal;
}

.btn-primary:hover {
    background: #4a8f2a;
    transform: none;
    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
}

/* Contenedor de captcha */
.captcha-container {
    background: #f8f9fa;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    margin-bottom: 1rem;
}

.captcha-question {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: #333;
}

.captcha-question i {
    font-size: 1rem;
    color: #5FB134;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-form {
        padding: 2rem;
        margin: 5% 0;
    }

    .form-wrapper h3 {
        font-size: 1.5rem;
    }

    .form-wrapper p {
        font-size: 0.9rem;
    }

    .modern-input,
    .modern-textarea,
    .modern-select {
        font-size: 0.9rem;
    }

    .input-icon {
        font-size: 0.9rem;
    }
}

/* Footer mejorado */
.footer {
    background: var(--dark-bg) !important;
    color: var(--white);
    padding: 3rem 0 1rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-accent);
}

.link-empresa {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.link-empresa:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Efectos de scroll */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animaciones adicionales */
.slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* Efectos de hover para botones sociales */
.btn-social {
    transition: var(--transition);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-social:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: var(--shadow-strong);
}

/* Mejoras en el mapa */
.responsive-iframe {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.responsive-iframe iframe {
    border: none;
    width: 100%;
    height: 300px;
}

/* Efectos de partículas mejorados */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    background: transparent;
}

/* Utilidades adicionales */
.text-gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient {
    background: var(--gradient-primary);
}

.shadow-custom {
    box-shadow: var(--shadow-strong);
}

/* Efectos de carga */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.mt-100 {
    margin-top: 100px !important;
}

.border-left-green {
    border-left: 4px solid #5FB134;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
}

.text-content-empresa {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    text-align: justify;
}

.empresa-content p {
    text-align: justify;
}

.image-container-pilares {
    text-align: center;
    margin: 2rem 0;
}

.image-container-pilares img {
    max-width: 160px;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.image-container-pilares:hover img {
    transform: scale(1.02);
    box-shadow: var(--shadow-strong);
}

/* Estilos para el contenedor de la imagen */
.image-container {
    width: 400px;
    height: 400px;

    overflow: hidden;
    position: relative;

    margin-left: 10%;
    display: flex;
    /* Usa flexbox para centrar verticalmente */
    align-items: center;
    /* Centra verticalmente el contenido */
}

/* Estilos para la imagen */
.image-container img {
    max-width: 160px;
    max-height: 100%;
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
    /* Efecto de transición para hover */
}

.image-container:hover img {
    border: 2px solid #5FB134;
    /* Cambia al color y grosor de borde deseado */
}

.custom-card {
    width: 100% !important;
    /* Asegura que el card ocupe todo el ancho disponible */
    margin-bottom: 20px !important;
    /* Espacio entre las tarjetas */
}

.custom-card .card-body {
    position: relative !important;
    /* Para posicionar absolutamente la cabecera dentro del card */
}

.card-text-empresa {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: justify;
}

.card-title-empresa {
    background-color: #5FB134;
    color: #fff;
    padding: 5px;
    /* Opcional: agrega relleno para que se vea mejor */
    display: flex;
    /* Crea un contenedor flexible */
    justify-content: space-between;
    /* Espacio uniforme entre el texto y el icono */
    align-items: center;
    /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
}

.card-title-empresa i {
    margin-left: 5px;
    /* Agrega un margen izquierdo al icono para separarlo del texto */
}

.section {
    margin-bottom: 20px !important;
    /* Agrega margen inferior para separar las secciones */
}

.contacto {
    background-color: #5FB134;
}

/* Efectos de scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Efectos de carga para imágenes */
img {
    transition: opacity 0.3s ease;
}

img.loaded {
    opacity: 1;
}

/* Animación de carga inicial */
body {
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.loaded {
    opacity: 1;
}

/* Mejoras en las pestañas */
.nav-tabs .nav-link {
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 25px;
    margin: 0 5px;
    transition: var(--transition);
}

.nav-tabs .nav-link.active {
    background: var(--gradient-accent);
    color: var(--white);
    box-shadow: var(--shadow-soft);
}

.nav-tabs .nav-link:hover {
    background: rgba(95, 177, 52, 0.1);
    color: var(--primary-color);
}

/* Efectos de hover para botones sociales mejorados */
.btn-social:hover {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Efectos de hover para enlaces */
a {
    transition: var(--transition);
}

a:hover {
    color: var(--primary-color);
}

/* Efectos de hover para iconos */
.fas,
.fab {
    transition: var(--transition);
}

.service-highlight:hover .fas,
.service-highlight:hover .fab {
    transform: scale(1.2);
    color: var(--white);
}

/* Efectos de hover para el botón scroll to top */
.scroll-to-top:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
}

/* Efectos de animación para elementos específicos */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.fade-in-down {
    animation: fadeInDown 0.8s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* Efectos de hover para iconos */
.fas,
.fab {
    transition: var(--transition);
}

.service-highlight:hover .fas,
.service-highlight:hover .fab {
    transform: scale(1.2);
    color: var(--white);
}

/* Efectos de hover para elementos de la empresa */
.image-container-pilares:hover img {
    transform: scale(1.05);
    transition: var(--transition);
}

/* Mejoras en la navegación móvil */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    .navbar-nav .nav-link:last-child {
        margin-bottom: 0;
    }

    .masthead-heading {
        font-size: 2.5rem;
    }

    .masthead-subheading {
        font-size: 1.1rem;
    }

    .border-left-green-title {
        font-size: 2.5rem;
    }

    .full-width-section {
        padding: 2rem 0;
    }

    #page-empresa {
        padding: 2rem 0;
    }

    .service-highlights {
        flex-direction: column;
        gap: 1rem;
        justify-content: flex-start;
        padding-left: 1rem;
    }

    .service-highlight {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    .side-nav-control {
        display: none;
    }

    .nav-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 992px) {
    .masthead {
        padding: 0 1rem;
    }

    .service-highlights {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1rem;
        padding-left: 1rem;
    }

    .navbar-brand img {
        max-height: 40px;
    }

    .nav-link {
        font-size: 1rem;
        padding: 0.5rem 1rem !important;
    }
}

@media (max-width: 576px) {
    .masthead-heading {
        font-size: 2rem;
    }

    .service-highlight {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .btn-primary {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
    }

    .border-left-green-title {
        font-size: 2rem;
        padding-left: 1rem;
    }
}

/* Asegurar que todas las secciones ocupen 100% de altura */
.page-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 80px;
}

/* Mejorar el espaciado del contenido en secciones */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Efectos de hover mejorados para navegación */
.navbar-nav .nav-link {
    position: relative;
    transition: all 0.3s ease;
    margin: 0 0.5rem;
}

.navbar-nav .nav-link:hover {
    transform: translateY(-2px);
}

.navbar-nav .nav-link.active {
    transform: translateY(-2px);
    font-weight: 700;
}

/* Efectos de parallax mejorados */
.full-width-section::before {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimización para dispositivos móviles */
@media (max-width: 768px) {
    .full-width-section::before {
        background-attachment: scroll;
    }

    .masthead::before {
        background-attachment: scroll;
    }
}

/* Botones mejorados con colores de Gradotech */
.btn-primary {
    background: var(--gradient-accent);
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    background: var(--gradient-primary);
}

/* Servicios destacados en el header - COLOR VERDE */
.service-highlights {
    display: flex;
    justify-content: flex-start;
    margin-top: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding-left: 0;
    align-items: flex-start;
}

.service-highlight {
    background: rgba(95, 177, 52, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(95, 177, 52, 0.3);
    border-radius: 15px;
    padding: 1rem 1.5rem;
    color: var(--white);
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
}

.service-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--white);
    transition: var(--transition);
}

.service-highlight:hover {
    background: rgba(95, 177, 52, 1);
    transform: translateY(-5px);
    border-color: var(--white);
    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
}

.service-highlight:hover::before {
    width: 100%;
    opacity: 0.3;
}

/* Efecto de brillo para los service highlights */
.service-highlight::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.service-highlight:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(50%, 50%);
}

/* Efectos de hover para iconos en service highlights */
.service-highlight .fas,
.service-highlight .fab {
    transition: var(--transition);
    margin-right: 0.5rem;
}

.service-highlight:hover .fas,
.service-highlight:hover .fab {
    transform: scale(1.2);
    color: var(--white);
}

/* Efectos de hover para enlaces de contacto */
.contact-form a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.contact-form i {
    color: var(--primary-color);
    width: 20px;
}

/* Efectos de hover para elementos de la empresa */
.empresa-content:hover {
    transform: translateY(-2px);
    transition: var(--transition);
}

.image-container-pilares:hover img {
    transform: scale(1.05);
    transition: var(--transition);
}

/* Mejoras en la accesibilidad */
.nav-link:focus,
.btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Efectos de hover para elementos de partners */
.partner-card:hover .card-text-empresa {
    color: var(--text-primary);
}

/* Efectos de scroll reveal adicionales */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.fade-in-down {
    animation: fadeInDown 0.8s ease-out;
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* Títulos elegantes con línea vertical al costado */
.elegant-title {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: -0.5px;
    line-height: 1;
    position: relative;
    padding-left: 2rem;
    text-align: left;
}

.elegant-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0.2px;
    line-height: 1.1;
    opacity: 0.8;
    text-align: left;
    padding-left: 2rem;
    position: relative;
}

/* Contenedor para título y subtítulo con línea vertical compartida */
.title-container {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}

.title-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--gradient-primary);
    border-radius: 3px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1;
}

.title-container .elegant-title {
    padding-left: 0;
    margin-bottom: 0;
}

.title-container .elegant-subtitle {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
}

/* Animación para los títulos elegantes */
.elegant-title {
    opacity: 0;
    transform: translateY(30px);
    animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
}

.elegant-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
}

@keyframes elegantTitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes elegantSubtitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Responsividad para títulos elegantes */
@media (max-width: 768px) {
    .elegant-title {
        font-size: 2.5rem;
    }

    .elegant-subtitle {
        font-size: 1.1rem;
    }

    .title-container {
        padding-left: 1.5rem;
    }
}

@media (max-width: 576px) {
    .elegant-title {
        font-size: 2rem;
    }

    .elegant-subtitle {
        font-size: 1rem;
    }

    .title-container {
        padding-left: 1rem;
    }
}

/* Eliminar contornos de navegación */
.navbar-nav .nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.navbar-nav .nav-link:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Estilos para la sección Nosotros */
.about-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(95, 177, 52, 0.1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.about-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.about-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.about-icon i {
    font-size: 1.5rem;
    color: var(--white);
}

.about-card h3 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.about-text {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

/* Tarjetas de Misión y Visión */
.mission-vision-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(95, 177, 52, 0.1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mission-vision-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.card-header-mv {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.card-header-mv i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-right: 1rem;
}

.card-header-mv h3 {
    color: var(--primary-color);
    font-weight: 600;
    margin: 0;
    font-size: 1.5rem;
}

.mission-vision-card p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

/* Responsive para la sección Nosotros */
@media (max-width: 768px) {

    .about-card,
    .mission-vision-card {
        padding: 2rem;
    }

    .about-icon {
        width: 50px;
        height: 50px;
    }

    .about-icon i {
        font-size: 1.2rem;
    }
}

/* Grid moderno para servicios */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 2rem;
    justify-content: center;
}

.service-modern-card {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(95, 177, 52, 0.15);
    padding: 2.5rem 2rem 2rem 2rem;
    text-align: center;
    transition: box-shadow 0.3s, transform 0.3s;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.service-modern-card:hover {
    box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
    transform: translateY(-6px) scale(1.03);
}

.service-icon {
    background: var(--gradient-primary);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
}

.service-icon i {
    color: #fff;
    font-size: 2.5rem;
}

.service-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.service-desc {
    color: var(--text-secondary);
    font-size: 1.08rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.btn-modern {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: 0.7rem 2.2rem;
    font-weight: 600;
    font-size: 1.08rem;
    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

.btn-modern:hover {
    background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
    transform: scale(1.05);
}

@media (max-width: 992px) {
    .service-modern-card {
        min-height: 380px;
        padding: 2rem 1.2rem 1.5rem 1.2rem;
    }

    .service-icon {
        width: 65px;
        height: 65px;
    }

    .service-icon i {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .services-grid {
        gap: 1.5rem 0.5rem;
    }

    .service-modern-card {
        min-height: 320px;
        padding: 1.5rem 0.7rem 1.2rem 0.7rem;
    }

    .service-title {
        font-size: 1.1rem;
    }

    .service-desc {
        font-size: 0.98rem;
    }

    .btn-modern {
        font-size: 0.98rem;
        padding: 0.6rem 1.5rem;
    }
}

/* Cards modernas para servicios con imágenes en colores */
.service-card-modern {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    border: 1px solid rgba(95, 177, 52, 0.1);
    position: relative;
}

.service-card-modern:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
    border-color: var(--primary-color);
}

.service-image-container {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    filter: brightness(0.9) contrast(1.1);
}

.service-card-modern:hover .service-image {
    transform: scale(1.05);
    filter: brightness(1) contrast(1.2);
}

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.service-card-modern:hover .service-overlay {
    opacity: 1;
}

.service-icon-overlay {
    font-size: 4rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.2s ease;
}

.service-card-modern:hover .service-icon-overlay {
    transform: scale(1);
}

.service-content {
    padding: 2rem;
    position: relative;
}

.service-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.service-card-modern:hover .service-content::before {
    transform: scaleX(1);
}

.service-title-modern {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.service-text-modern {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.btn-service-modern {
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.8rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
}

.btn-service-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.3s ease;
}

.btn-service-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
}

.btn-service-modern:hover::before {
    left: 100%;
}

/* Responsive para servicios modernos */
@media (max-width: 768px) {
    .service-image-container {
        height: 220px;
    }

    .service-content {
        padding: 1.5rem;
    }

    .service-title-modern {
        font-size: 1.3rem;
    }

    .service-text-modern {
        font-size: 0.95rem;
    }

    .service-icon-overlay {
        font-size: 3rem;
    }
}

/* Selector de idioma */
.language-selector {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999 !important;
    background: rgba(95, 177, 52, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
    transition: all 0.3s ease;
    display: flex;
    gap: 4px;
    align-items: center;
}

.language-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.language-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 700;
}

.language-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: scale(1.05);
}

/* Estilos del formulario de contacto moderno */
.contact-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
}

/* Estilos para la sección de información de contacto */
.contact-info-wrapper {
    padding-right: 2rem;
}

.contact-title {
    color: #333;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.contact-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(95, 177, 52, 0.05);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(95, 177, 52, 0.1);
    transform: translateX(5px);
}

.contact-item i {
    font-size: 1.5rem;
    color: #5FB134;
    margin-top: 0.2rem;
}

.contact-item h5 {
    color: #333;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.contact-item p {
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: #4a8f2a;
    transform: translateY(-3px);
    color: white;
}

/* Estilos para el formulario */
.form-wrapper {
    padding-left: 2rem;
}

.form-title {
    color: #333;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.form-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.modern-form .form-group {
    margin-bottom: 1.5rem;
}

.modern-form label {
    display: block;
    color: #333;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.modern-form .input-container {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modern-form .input-container:hover,
.modern-form .input-container:focus-within {
    border-color: #5FB134;
    background: white;
}

.modern-form .input-container input,
.modern-form .input-container select,
.modern-form .input-container textarea {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #333;
    outline: none;
}

.modern-form .input-container textarea {
    min-height: 140px;
    resize: vertical;
}

.modern-form .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5FB134;
    font-size: 1.1rem;
}

.modern-form .input-container textarea+.input-icon {
    top: 1rem;
    transform: none;
}

.modern-form .error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
}

.modern-form .privacy-check {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

.modern-form .privacy-check input[type="checkbox"] {
    margin-top: 0.3rem;
}

.modern-form .privacy-check label {
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
    line-height: 1.5;
}

.modern-form .privacy-check a {
    color: #5FB134;
    text-decoration: none;
}

.modern-form .privacy-check a:hover {
    text-decoration: underline;
}

.modern-form .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.modern-form .btn-primary:hover {
    background: #4a8f2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
}

.modern-form .btn-primary i {
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 991.98px) {
    .contact-container {
        padding: 2rem;
    }

    .contact-info-wrapper {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .form-wrapper {
        padding-left: 0;
    }

    .contact-title,
    .form-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 767.98px) {
    .contact-container {
        padding: 1.5rem;
    }

    .contact-item {
        padding: 0.75rem;
    }

    .modern-form .input-container input,
    .modern-form .input-container select,
    .modern-form .input-container textarea {
        font-size: 0.95rem;
    }
}

/* Títulos elegantes con línea vertical al costado */
.elegant-title {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: -0.5px;
    line-height: 1;
    position: relative;
    padding-left: 2rem;
    text-align: left;
}

.elegant-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0.2px;
    line-height: 1.1;
    opacity: 0.8;
    text-align: left;
    padding-left: 2rem;
    position: relative;
}

/* Contenedor para título y subtítulo con línea vertical compartida */
.title-container {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}

.title-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--gradient-primary);
    border-radius: 3px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1;
}

.title-container .elegant-title {
    padding-left: 0;
    margin-bottom: 0;
}

.title-container .elegant-subtitle {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
}

/* Animación para los títulos elegantes */
.elegant-title {
    opacity: 0;
    transform: translateY(30px);
    animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
}

.elegant-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
}

@keyframes elegantTitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes elegantSubtitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Responsividad para títulos elegantes */
@media (max-width: 768px) {
    .elegant-title {
        font-size: 2.5rem;
    }

    .elegant-subtitle {
        font-size: 1.1rem;
    }

    .title-container {
        padding-left: 1.5rem;
    }
}

@media (max-width: 576px) {
    .elegant-title {
        font-size: 2rem;
    }

    .elegant-subtitle {
        font-size: 1rem;
    }

    .title-container {
        padding-left: 1rem;
    }
}

/* Eliminar contornos de navegación */
.navbar-nav .nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.navbar-nav .nav-link:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Estilos para la sección Nosotros */
.about-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(95, 177, 52, 0.1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.about-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.about-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.about-icon i {
    font-size: 1.5rem;
    color: var(--white);
}

.about-card h3 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.about-text {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

/* Tarjetas de Misión y Visión */
.mission-vision-card {

    /* Variables CSS para la nueva paleta de colores de Gradotech */
    :root {
        --primary-color: #5FB134;
        /* Verde Gradotech */
        --secondary-color: #4a8f2a;
        /* Verde más oscuro */
        --accent-color: #5FB134;
        /* Verde Gradotech */
        --accent-hover: #6bc23a;
        /* Verde hover más claro */
        --dark-bg: #1a1a1a;
        /* Fondo oscuro elegante */
        --light-bg: #f8f9fa;
        /* Fondo claro */
        --text-primary: #212121;
        /* Texto principal */
        --text-secondary: #757575;
        /* Texto secundario */
        --white: #ffffff;
        --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
        --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
        --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Ocultar scrollbar hasta hacer scroll */
    html {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    html::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    html.scrolling {
        scrollbar-width: auto;
        -ms-overflow-style: auto;
    }

    html.scrolling::-webkit-scrollbar {
        display: block;
        width: 8px;
    }

    html.scrolling::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    html.scrolling::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 4px;
    }

    html.scrolling::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-color);
    }

    body {
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
        color: var(--text-primary);
        line-height: 1.6;
        overflow-x: hidden;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    body.loaded {
        opacity: 1;
    }

    /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
    .navbar {
        background: #f8f9fa !important;
        backdrop-filter: blur(10px);
        transition: var(--transition);
        box-shadow: none;
    }

    .navbar.scrolled {
        background: rgba(26, 26, 26, 0.98) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    .navbar-brand img {
        transition: var(--transition);
        max-height: 50px;
    }

    .navbar-brand:hover img {
        transform: scale(1.05);
    }

    .nav-link {
        position: relative;
        transition: var(--transition);
        font-weight: 500;
        color: var(--white) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        font-size: 1.1rem;
        padding: 0.75rem 1.2rem !important;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-link:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--white);
        transition: var(--transition);
        transform: translateX(-50%);
    }

    .nav-link:hover::after {
        width: 100%;
    }

    .nav-link:hover {
        color: var(--white) !important;
        opacity: 0.8;
    }

    .nav-link.active {
        color: var(--white) !important;
        font-weight: 600;
    }

    .nav-link.active::after {
        width: 100%;
        background: var(--white);
    }

    /* Header mejorado con colores de Gradotech */
    .masthead {
        background: var(--gradient-primary);
        position: relative;
        height: 100vh;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-top: 0;
    }

    /* Efecto de ondas animadas */
    .masthead::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
        opacity: 0.3;
        animation: float 20s ease-in-out infinite;
    }

    /* Nuevo efecto de ondas animadas */
    .waves-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }

    .wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%;
        height: 100%;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" opacity=".25" fill="%23ffffff"/></path></svg>');
        background-size: 1200px 100%;
        animation: wave 25s linear infinite;
    }

    .wave:nth-child(2) {
        bottom: 10%;
        animation: wave 20s linear infinite;
        opacity: 0.5;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
    }

    .wave:nth-child(3) {
        bottom: 20%;
        animation: wave 15s linear infinite;
        opacity: 0.2;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
    }

    @keyframes wave {
        0% {
            transform: translateX(0) translateZ(0) scaleY(1);
        }

        50% {
            transform: translateX(-25%) translateZ(0) scaleY(0.8);
        }

        100% {
            transform: translateX(-50%) translateZ(0) scaleY(1);
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px) rotate(0deg);
        }

        50% {
            transform: translateY(-20px) rotate(180deg);
        }
    }

    .masthead .container {
        position: relative;
        z-index: 10;
        text-align: left;
        padding-left: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .masthead-heading {
        font-size: 4.5rem;
        font-weight: 800;
        color: var(--white);
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        margin-bottom: 1.5rem;
        letter-spacing: -1px;
        line-height: 1.1;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(30px);
        animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
        text-align: left;
    }

    .masthead-subheading {
        font-size: 2rem;
        color: var(--white) !important;
        margin-bottom: 2.5rem;
        opacity: 0.9;
        font-weight: 300;
        letter-spacing: 0.5px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(30px);
        animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
        text-align: left;
    }

    @keyframes elegantFadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    /* Secciones que ocupan 100% de altura con efecto parallax */
    .full-width-section {
        min-height: 100vh;
        padding: 80px 0;
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .full-width-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.05;
        z-index: -1;
        transform: translateZ(0);
    }

    .full-width-section:nth-child(even) {
        background: var(--light-bg);
    }

    .full-width-section:nth-child(even)::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    }

    .full-width-section:nth-child(odd)::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    }

    /* Sección empresa específica - 100% altura */
    #page-empresa {
        min-height: 100vh;
        height: auto;
        padding: 120px 0 80px 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        background: var(--white);
    }

    .empresa-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* Títulos de sección mejorados */
    .border-left-green-title {
        font-size: 3.5rem;
        font-weight: 700;
        color: var(--text-primary);
        position: relative;
        padding-left: 2rem;
        margin-bottom: 3rem;
        text-transform: uppercase;
        letter-spacing: -1px;
    }

    .border-left-green-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: var(--gradient-primary);
        border-radius: 3px;
    }

    /* Carrusel horizontal de alianzas */
    .alliances-carousel {
        position: relative;
        height: 220px;
        overflow: hidden;
        background: transparent;
        border-radius: 20px;
        padding: 2rem;
        margin: 2rem 0;
    }

    .alliances-track {
        display: flex;
        animation: scrollHorizontal 60s linear infinite;
        gap: 4rem;
        align-items: center;
        padding: 1rem 0;
        width: max-content;
        will-change: transform;
    }

    .alliances-track:hover {
        animation-play-state: paused;
    }

    .alliance-item {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 200px;
        height: 140px;
        padding: 1.5rem;
        background: transparent;
        border-radius: 15px;
        transition: var(--transition);
        flex-shrink: 0;
        position: relative;
    }

    .alliance-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: var(--transition);
        opacity: 0;
    }

    .alliance-item:hover::before {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(95, 177, 52, 0.3);
    }

    .alliance-item:hover {
        transform: scale(1.05);
    }

    .alliance-item img {
        max-width: 160px;
        max-height: 90px;
        object-fit: contain;
        /* filter: grayscale(100%) brightness(0.9); */
        transition: var(--transition);
        position: relative;
        z-index: 1;
    }

    .alliance-item:hover img {
        /* filter: grayscale(0%) brightness(1.1); */
        transform: scale(1.1);
    }

    @keyframes scrollHorizontal {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-33.333% * 3));
        }
    }

    /* Controles del carrusel horizontal - OCULTOS */
    .carousel-controls {
        display: none !important;
    }

    .carousel-btn {
        display: none !important;
    }

    .carousel-btn:hover {
        display: none !important;
    }

    .carousel-btn:disabled {
        display: none !important;
    }

    /* Control de navegación lateral como Black-up - OCULTO */
    .side-nav-control {
        display: none !important;
    }

    .nav-dot {
        display: none !important;
    }

    .nav-dot:hover,
    .nav-dot.active {
        display: none !important;
    }

    .nav-dot-label {
        display: none !important;
    }

    .nav-dot:hover .nav-dot-label {
        display: none !important;
    }

    /* Efectos de scroll mejorados */
    .scroll-reveal {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .scroll-reveal.from-left {
        transform: translateX(-50px);
    }

    .scroll-reveal.from-right {
        transform: translateX(50px);
    }

    .scroll-reveal.from-bottom {
        transform: translateY(50px);
    }

    .scroll-reveal.scale-in {
        transform: scale(0.8);
    }

    /* Responsive para el carrusel horizontal */
    @media (max-width: 768px) {
        .alliances-carousel {
            height: 150px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .alliance-item {
            min-width: 120px;
            height: 80px;
            padding: 1rem;
        }

        .alliance-item img {
            max-height: 50px;
        }

        .carousel-controls {
            display: none !important;
        }

        .carousel-btn {
            display: none !important;
        }

        .masthead-heading {
            font-size: 2.5rem;
        }

        .masthead-subheading {
            font-size: 1.3rem;
        }

        .side-nav-control {
            display: none !important;
        }

        .nav-dot {
            display: none !important;
        }
    }

    /* Cards de servicios mejorados */
    .card {
        border: none;
        border-radius: 20px;
        overflow: hidden;
        transition: var(--transition);
        box-shadow: var(--shadow-soft);
        background: var(--white);
    }

    .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-strong);
    }

    .card-img-top {
        transition: var(--transition);
        height: 250px;
        object-fit: cover;
    }

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

    .card-body {
        padding: 2rem;
    }

    .card-title {
        color: var(--primary-color);
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .card-text {
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    /* Efectos de imagen mejorados */
    .img-grayscale {
        filter: grayscale(100%);
        transition: var(--transition);
    }

    .img-grayscale:hover {
        /* filter: grayscale(0%) brightness(1.1); */
    }

    /* Sección de clientes */
    .client-logo {
        transition: var(--transition);
        filter: grayscale(100%);
        opacity: 0.7;
    }

    .client-logo:hover {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.1);
        box-shadow: var(--shadow-strong);
        border-color: var(--primary-color);
    }

    /* Sección de partners */
    .partner-card {
        background: var(--white);
        border-radius: 15px;
        padding: 2rem;
        box-shadow: var(--shadow-soft);
        transition: var(--transition);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .partner-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-strong);
        border-color: var(--primary-color);
    }

    .partner-card img {
        transition: var(--transition);
        filter: grayscale(100%);
    }

    .partner-card:hover img {
        filter: grayscale(0%);
        transform: scale(1.05);
    }

    /* Formulario de contacto mejorado - Diseño limpio y profesional */
    .contact-form {
        background: var(--form-bg);
        padding: 3rem;
        border: var(--form-border);
        box-shadow: var(--form-shadow);
        margin: 10% 0;
        max-width: 160px;
        border-radius: var(--form-radius);
    }

    .form-wrapper h3 {
        color: var(--text-primary);
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        text-align: left;
    }

    /* Variables CSS para la nueva paleta de colores de Gradotech */
    :root {
        --primary-color: #5FB134;
        /* Verde Gradotech */
        --secondary-color: #4a8f2a;
        /* Verde más oscuro */
        --accent-color: #5FB134;
        /* Verde Gradotech */
        --accent-hover: #6bc23a;
        /* Verde hover más claro */
        --dark-bg: #1a1a1a;
        /* Fondo oscuro elegante */
        --light-bg: #f8f9fa;
        /* Fondo claro */
        --text-primary: #212121;
        /* Texto principal */
        --text-secondary: #757575;
        /* Texto secundario */
        --white: #ffffff;
        --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
        --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
        --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Ocultar scrollbar hasta hacer scroll */
    html {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    html::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    html.scrolling {
        scrollbar-width: auto;
        -ms-overflow-style: auto;
    }

    html.scrolling::-webkit-scrollbar {
        display: block;
        width: 8px;
    }

    html.scrolling::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    html.scrolling::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 4px;
    }

    html.scrolling::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-color);
    }

    body {
        font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
        color: var(--text-primary);
        line-height: 1.6;
        overflow-x: hidden;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    body.loaded {
        opacity: 1;
    }

    /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
    .navbar {
        background: #f8f9fa !important;
        backdrop-filter: blur(10px);
        transition: var(--transition);
        box-shadow: none;
    }

    .navbar.scrolled {
        background: rgba(26, 26, 26, 0.98) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    .navbar-brand img {
        transition: var(--transition);
        max-height: 50px;
    }

    .navbar-brand:hover img {
        transform: scale(1.05);
    }

    .nav-link {
        position: relative;
        transition: var(--transition);
        font-weight: 500;
        color: var(--white) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        font-size: 1.1rem;
        padding: 0.75rem 1.2rem !important;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-link:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--white);
        transition: var(--transition);
        transform: translateX(-50%);
    }

    .nav-link:hover::after {
        width: 100%;
    }

    .nav-link:hover {
        color: var(--white) !important;
        opacity: 0.8;
    }

    .nav-link.active {
        color: var(--white) !important;
        font-weight: 600;
    }

    .nav-link.active::after {
        width: 100%;
        background: var(--white);
    }

    /* Header mejorado con colores de Gradotech */
    .masthead {
        background: var(--gradient-primary);
        position: relative;
        height: 100vh;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-top: 0;
    }

    /* Efecto de ondas animadas */
    .masthead::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
        opacity: 0.3;
        animation: float 20s ease-in-out infinite;
    }

    /* Nuevo efecto de ondas animadas */
    .waves-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }

    .wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%;
        height: 100%;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23ffffff"/></path></svg>');
        background-size: 1200px 100%;
        animation: wave 25s linear infinite;
    }

    .wave:nth-child(2) {
        bottom: 10%;
        animation: wave 20s linear infinite;
        opacity: 0.5;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
    }

    .wave:nth-child(3) {
        bottom: 20%;
        animation: wave 15s linear infinite;
        opacity: 0.2;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
    }

    @keyframes wave {
        0% {
            transform: translateX(0) translateZ(0) scaleY(1);
        }

        50% {
            transform: translateX(-25%) translateZ(0) scaleY(0.8);
        }

        100% {
            transform: translateX(-50%) translateZ(0) scaleY(1);
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px) rotate(0deg);
        }

        50% {
            transform: translateY(-20px) rotate(180deg);
        }
    }

    .masthead .container {
        position: relative;
        z-index: 10;
        text-align: left;
        padding-left: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .masthead-heading {
        font-size: 4.5rem;
        font-weight: 800;
        color: var(--white);
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        margin-bottom: 1.5rem;
        letter-spacing: -1px;
        line-height: 1.1;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(30px);
        animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
        text-align: left;
    }

    .masthead-subheading {
        font-size: 2rem;
        color: var(--white) !important;
        margin-bottom: 2.5rem;
        opacity: 0.9;
        font-weight: 300;
        letter-spacing: 0.5px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(30px);
        animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
        text-align: left;
    }

    @keyframes elegantFadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    /* Secciones que ocupan 100% de altura con efecto parallax */
    .full-width-section {
        min-height: 100vh;
        padding: 80px 0;
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .full-width-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.05;
        z-index: -1;
        transform: translateZ(0);
    }

    .full-width-section:nth-child(even) {
        background: var(--light-bg);
    }

    .full-width-section:nth-child(even)::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    }

    .full-width-section:nth-child(odd)::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    }

    /* Sección empresa específica - 100% altura */
    #page-empresa {
        min-height: 100vh;
        height: auto;
        padding: 120px 0 80px 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        background: var(--white);
    }

    .empresa-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* Títulos de sección mejorados */
    .border-left-green-title {
        font-size: 3.5rem;
        font-weight: 700;
        color: var(--text-primary);
        position: relative;
        padding-left: 2rem;
        margin-bottom: 3rem;
        text-transform: uppercase;
        letter-spacing: -1px;
    }

    .border-left-green-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: var(--gradient-primary);
        border-radius: 3px;
    }

    /* Carrusel horizontal de alianzas */
    .alliances-carousel {
        position: relative;
        height: 220px;
        overflow: hidden;
        background: transparent;
        border-radius: 20px;
        padding: 2rem;
        margin: 2rem 0;
    }

    .alliances-track {
        display: flex;
        animation: scrollHorizontal 60s linear infinite;
        gap: 4rem;
        align-items: center;
        padding: 1rem 0;
        width: max-content;
        will-change: transform;
    }

    .alliances-track:hover {
        animation-play-state: paused;
    }

    .alliance-item {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 200px;
        height: 140px;
        padding: 1.5rem;
        background: transparent;
        border-radius: 15px;
        transition: var(--transition);
        flex-shrink: 0;
        position: relative;
    }

    .alliance-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: var(--transition);
        opacity: 0;
    }

    .alliance-item:hover::before {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(95, 177, 52, 0.3);
    }

    .alliance-item:hover {
        transform: scale(1.05);
    }

    .alliance-item img {
        max-width: 160px;
        max-height: 90px;
        object-fit: contain;
        /* filter: grayscale(100%) brightness(0.9); */
        transition: var(--transition);
        position: relative;
        z-index: 1;
    }

    .alliance-item:hover img {
        /* filter: grayscale(0%) brightness(1.1); */
        transform: scale(1.1);
    }

    @keyframes scrollHorizontal {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-33.333% * 3));
        }
    }

    /* Controles del carrusel horizontal - OCULTOS */
    .carousel-controls {
        display: none !important;
    }

    .carousel-btn {
        display: none !important;
    }

    .carousel-btn:hover {
        display: none !important;
    }

    .carousel-btn:disabled {
        display: none !important;
    }

    /* Control de navegación lateral como Black-up - OCULTO */
    .side-nav-control {
        display: none !important;
    }

    .nav-dot {
        display: none !important;
    }

    .nav-dot:hover,
    .nav-dot.active {
        display: none !important;
    }

    .nav-dot-label {
        display: none !important;
    }

    .nav-dot:hover .nav-dot-label {
        display: none !important;
    }

    /* Efectos de scroll mejorados */
    .scroll-reveal {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .scroll-reveal.from-left {
        transform: translateX(-50px);
    }

    .scroll-reveal.from-right {
        transform: translateX(50px);
    }

    .scroll-reveal.from-bottom {
        transform: translateY(50px);
    }

    .scroll-reveal.scale-in {
        transform: scale(0.8);
    }

    /* Responsive para el carrusel horizontal */
    @media (max-width: 768px) {
        .alliances-carousel {
            height: 150px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .alliance-item {
            min-width: 120px;
            height: 80px;
            padding: 1rem;
        }

        .alliance-item img {
            max-height: 50px;
        }

        .carousel-controls {
            display: none !important;
        }

        .carousel-btn {
            display: none !important;
        }

        .masthead-heading {
            font-size: 2.5rem;
        }

        .masthead-subheading {
            font-size: 1.3rem;
        }

        .side-nav-control {
            display: none !important;
        }

        .nav-dot {
            display: none !important;
        }
    }

    /* Cards de servicios mejorados */
    .card {
        border: none;
        border-radius: 20px;
        overflow: hidden;
        transition: var(--transition);
        box-shadow: var(--shadow-soft);
        background: var(--white);
    }

    .card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-strong);
    }

    .card-img-top {
        transition: var(--transition);
        height: 250px;
        object-fit: cover;
    }

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

    .card-body {
        padding: 2rem;
    }

    .card-title {
        color: var(--primary-color);
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .card-text {
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    /* Efectos de imagen mejorados */
    .img-grayscale {
        filter: grayscale(100%);
        transition: var(--transition);
    }

    .img-grayscale:hover {
        /* filter: grayscale(0%) brightness(1.1); */
    }

    /* Sección de clientes */
    .client-logo {
        transition: var(--transition);
        filter: grayscale(100%);
        opacity: 0.7;
    }

    .client-logo:hover {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.1);
        box-shadow: var(--shadow-strong);
        border-color: var(--primary-color);
    }

    /* Sección de partners */
    .partner-card {
        background: var(--white);
        border-radius: 15px;
        padding: 2rem;
        box-shadow: var(--shadow-soft);
        transition: var(--transition);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .partner-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-strong);
        border-color: var(--primary-color);
    }

    .partner-card img {
        transition: var(--transition);
        filter: grayscale(100%);
    }

    .partner-card:hover img {
        filter: grayscale(0%);
        transform: scale(1.05);
    }

    /* Formulario de contacto mejorado - Diseño limpio y profesional */
    .contact-form {
        background: #ffffff;
        padding: 3rem;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        margin: 10% 0;
        max-width: 160px;
    }

    .form-wrapper h3 {
        color: #333;
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        text-align: left;
    }

    .form-wrapper p {
        color: #666;
        font-size: 1rem;
        margin-bottom: 2rem;
        text-align: left;
    }

    .form-group {
        margin-bottom: 1.5rem;
        position: relative;
    }

    /* Contenedor de input mejorado */
    .input-container {
        position: relative;
        background: #ffffff;
        border: 1px solid #d0d0d0;
        transition: all 0.2s ease;
        height: 48px;
        display: flex;
        align-items: center;
    }

    .input-container:hover {
        border-color: #5FB134;
    }

    .input-container.focused {
        border-color: #5FB134;
        border-width: 2px;
    }

    .input-container.error {
        border-color: #dc3545;
        border-width: 2px;
    }

    /* Inputs mejorados */
    .modern-input,
    .modern-textarea,
    .modern-select {
        width: 100%;
        border: none;
        background: transparent;
        padding: 0.75rem 1rem 0.75rem 3rem;
        font-size: 0.95rem;
        color: #333;
        outline: none;
        transition: all 0.3s ease;
        height: 100%;
        text-align: left;
    }

    .modern-input::placeholder,
    .modern-textarea::placeholder {
        color: #6c757d;
        font-size: 0.9rem;
        text-align: left;
        opacity: 0.8;
    }

    .modern-textarea {
        height: 140px;
        resize: vertical;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .modern-select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1rem;
        padding-right: 3rem;
    }

    .modern-select:focus {
        box-shadow: none;
    }

    .modern-select option {
        background: white;
        color: #333;
        padding: 0.5rem;
    }

    /* Iconos de input */
    .input-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #5FB134;
        font-size: 1rem;
        z-index: 2;
        transition: all 0.2s ease;
        width: 20px;
        text-align: center;
    }

    .input-container.focused .input-icon {
        color: #5FB134;
    }

    /* Mensajes de error */
    .error-message {
        color: #dc3545;
        font-size: 0.8rem;
        margin-top: 0.25rem;
        display: none;
        animation: slideIn 0.2s ease;
        text-align: left;
        padding-left: 0;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

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

    /* Botón de envío mejorado */
    .btn-primary {
        width: 100%;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        margin-top: 0.5rem;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: none;
        letter-spacing: normal;
    }

    .btn-primary:hover {
        background: #4a8f2a;
        transform: none;
        box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
    }

    .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
    }

    /* Contenedor de captcha */
    .captcha-container {
        background: #f8f9fa;
        padding: 1rem;
        border: 1px solid #e0e0e0;
        margin-bottom: 1rem;
    }

    .captcha-question {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        font-weight: 500;
        color: #333;
    }

    .captcha-question i {
        font-size: 1rem;
        color: #5FB134;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .contact-form {
            padding: 2rem;
            margin: 5% 0;
        }

        .form-wrapper h3 {
            font-size: 1.5rem;
        }

        .form-wrapper p {
            font-size: 0.9rem;
        }

        .modern-input,
        .modern-textarea,
        .modern-select {
            font-size: 0.9rem;
        }

        .input-icon {
            font-size: 0.9rem;
        }
    }

    /* Footer mejorado */
    .footer {
        background: var(--dark-bg) !important;
        color: var(--white);
        padding: 3rem 0 1rem;
        position: relative;
        overflow: hidden;
    }

    .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--gradient-accent);
    }

    .link-empresa {
        color: var(--primary-color);
        text-decoration: none;
        transition: var(--transition);
    }

    .link-empresa:hover {
        color: var(--accent-hover);
        text-decoration: underline;
    }

    /* Efectos de scroll */
    .fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition: var(--transition);
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Animaciones adicionales */
    .slide-in-left {
        animation: slideInLeft 0.8s ease-out;
    }

    .slide-in-right {
        animation: slideInRight 0.8s ease-out;
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }

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

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

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

    /* Efectos de hover para botones sociales */
    .btn-social {
        transition: var(--transition);
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-social:hover {
        transform: translateY(-3px) scale(1.1);
        box-shadow: var(--shadow-strong);
    }

    /* Mejoras en el mapa */
    .responsive-iframe {
        border-radius: 15px;
        overflow: hidden;
        box-shadow: var(--shadow-soft);
    }

    .responsive-iframe iframe {
        border: none;
        width: 100%;
        height: 300px;
    }

    /* Efectos de partículas mejorados */
    #particles-js {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 0;
        background: transparent;
    }

    /* Utilidades adicionales */
    .text-gradient {
        background: var(--gradient-accent);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .bg-gradient {
        background: var(--gradient-primary);
    }

    .shadow-custom {
        box-shadow: var(--shadow-strong);
    }

    /* Efectos de carga */
    .loading {
        position: relative;
        overflow: hidden;
    }

    .loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        0% {
            left: -100%;
        }

        100% {
            left: 100%;
        }
    }

    .mt-100 {
        margin-top: 100px !important;
    }

    .border-left-green {
        border-left: 4px solid #5FB134;
        font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 16px;
    }

    .text-content-empresa {
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--text-secondary);
        margin-bottom: 2rem;
        text-align: justify;
    }

    .empresa-content p {
        text-align: justify;
    }

    .image-container-pilares {
        text-align: center;
        margin: 2rem 0;
    }

    .image-container-pilares img {
        max-width: 160px;
        height: auto;
        border-radius: 10px;
        box-shadow: var(--shadow-soft);
        transition: var(--transition);
    }

    .image-container-pilares:hover img {
        transform: scale(1.02);
        box-shadow: var(--shadow-strong);
    }

    /* Estilos para el contenedor de la imagen */
    .image-container {
        width: 400px;
        height: 400px;

        overflow: hidden;
        position: relative;

        margin-left: 10%;
        display: flex;
        /* Usa flexbox para centrar verticalmente */
        align-items: center;
        /* Centra verticalmente el contenido */
    }

    /* Estilos para la imagen */
    .image-container img {
        max-width: 160px;
        max-height: 100%;
        width: auto;
        height: auto;
        transition: transform 0.3s ease;
        /* Efecto de transición para hover */
    }

    .image-container:hover img {
        border: 2px solid #5FB134;
        /* Cambia al color y grosor de borde deseado */
    }

    .custom-card {
        width: 100% !important;
        /* Asegura que el card ocupe todo el ancho disponible */
        margin-bottom: 20px !important;
        /* Espacio entre las tarjetas */
    }

    .custom-card .card-body {
        position: relative !important;
        /* Para posicionar absolutamente la cabecera dentro del card */
    }

    .card-text-empresa {
        font-size: 1rem;
        line-height: 1.7;
        color: var(--text-secondary);
        text-align: justify;
    }

    .card-title-empresa {
        background-color: #5FB134;
        color: #fff;
        padding: 5px;
        /* Opcional: agrega relleno para que se vea mejor */
        display: flex;
        /* Crea un contenedor flexible */
        justify-content: space-between;
        /* Espacio uniforme entre el texto y el icono */
        align-items: center;
        /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
    }

    .card-title-empresa i {
        margin-left: 5px;
        /* Agrega un margen izquierdo al icono para separarlo del texto */
    }

    .section {
        margin-bottom: 20px !important;
        /* Agrega margen inferior para separar las secciones */
    }

    .contacto {
        background-color: #5FB134;
    }

    /* Efectos de scroll reveal */
    .reveal {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Efectos de carga para imágenes */
    img {
        transition: opacity 0.3s ease;
    }

    img.loaded {
        opacity: 1;
    }

    /* Animación de carga inicial */
    body {
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    body.loaded {
        opacity: 1;
    }

    /* Mejoras en las pestañas */
    .nav-tabs .nav-link {
        border: none;
        color: var(--text-secondary);
        font-weight: 500;
        padding: 12px 24px;
        border-radius: 25px;
        margin: 0 5px;
        transition: var(--transition);
    }

    .nav-tabs .nav-link.active {
        background: var(--gradient-accent);
        color: var(--white);
        box-shadow: var(--shadow-soft);
    }

    .nav-tabs .nav-link:hover {
        background: rgba(95, 177, 52, 0.1);
        color: var(--primary-color);
    }

    /* Efectos de hover para botones sociales mejorados */
    .btn-social:hover {
        background: var(--accent-color) !important;
        border-color: var(--accent-color) !important;
    }

    /* Efectos de hover para enlaces */
    a {
        transition: var(--transition);
    }

    a:hover {
        color: var(--primary-color);
    }

    /* Efectos de hover para iconos */
    .fas,
    .fab {
        transition: var(--transition);
    }

    .service-highlight:hover .fas,
    .service-highlight:hover .fab {
        transform: scale(1.2);
        color: var(--white);
    }

    /* Efectos de hover para el botón scroll to top */
    .scroll-to-top:hover {
        background: var(--accent-hover) !important;
        transform: translateY(-3px);
        box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
    }

    /* Efectos de animación para elementos específicos */
    .fade-in-up {
        animation: fadeInUp 0.8s ease-out;
    }

    .fade-in-down {
        animation: fadeInDown 0.8s ease-out;
    }

    .fade-in-left {
        animation: fadeInLeft 0.8s ease-out;
    }

    .fade-in-right {
        animation: fadeInRight 0.8s ease-out;
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }

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

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }

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

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

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

    /* Efectos de hover para iconos */
    .fas,
    .fab {
        transition: var(--transition);
    }

    .service-highlight:hover .fas,
    .service-highlight:hover .fab {
        transform: scale(1.2);
        color: var(--white);
    }

    /* Efectos de hover para elementos de la empresa */
    .image-container-pilares:hover img {
        transform: scale(1.05);
        transition: var(--transition);
    }

    /* Mejoras en la navegación móvil */
    @media (max-width: 768px) {
        .navbar-nav {
            text-align: center;
        }

        .navbar-nav .nav-link {
            padding: 0.5rem 1rem;
        }

        .navbar-nav .nav-link:last-child {
            margin-bottom: 0;
        }

        .masthead-heading {
            font-size: 2.5rem;
        }

        .masthead-subheading {
            font-size: 1.1rem;
        }

        .border-left-green-title {
            font-size: 2.5rem;
        }

        .full-width-section {
            padding: 2rem 0;
        }

        #page-empresa {
            padding: 2rem 0;
        }

        .service-highlights {
            flex-direction: column;
            gap: 1rem;
            justify-content: flex-start;
            padding-left: 1rem;
        }

        .service-highlight {
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
        }

        .side-nav-control {
            display: none;
        }

        .nav-dot {
            width: 12px;
            height: 12px;
        }
    }

    @media (max-width: 992px) {
        .masthead {
            padding: 0 1rem;
        }

        .service-highlights {
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 1rem;
            padding-left: 1rem;
        }

        .navbar-brand img {
            max-height: 40px;
        }

        .nav-link {
            font-size: 1rem;
            padding: 0.5rem 1rem !important;
        }
    }

    @media (max-width: 576px) {
        .masthead-heading {
            font-size: 2rem;
        }

        .service-highlight {
            font-size: 0.8rem;
            padding: 0.4rem 0.8rem;
        }

        .btn-primary {
            font-size: 0.9rem;
            padding: 0.75rem 1.5rem;
        }

        .border-left-green-title {
            font-size: 2rem;
            padding-left: 1rem;
        }
    }

    /* Asegurar que todas las secciones ocupen 100% de altura */
    .page-section {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 80px;
    }

    /* Mejorar el espaciado del contenido en secciones */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }

    /* Efectos de hover mejorados para navegación */
    .navbar-nav .nav-link {
        position: relative;
        transition: all 0.3s ease;
        margin: 0 0.5rem;
    }

    .navbar-nav .nav-link:hover {
        transform: translateY(-2px);
    }

    .navbar-nav .nav-link.active {
        transform: translateY(-2px);
        font-weight: 700;
    }

    /* Efectos de parallax mejorados */
    .full-width-section::before {
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* Optimización para dispositivos móviles */
    @media (max-width: 768px) {
        .full-width-section::before {
            background-attachment: scroll;
        }

        .masthead::before {
            background-attachment: scroll;
        }
    }

    /* Botones mejorados con colores de Gradotech */
    .btn-primary {
        background: var(--gradient-accent);
        border: none;
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: var(--transition);
        box-shadow: var(--shadow-soft);
        position: relative;
        overflow: hidden;
    }

    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: var(--transition);
    }

    .btn-primary:hover::before {
        left: 100%;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-strong);
        background: var(--gradient-primary);
    }

    /* Servicios destacados en el header - COLOR VERDE */
    .service-highlights {
        display: flex;
        justify-content: flex-start;
        margin-top: 3rem;
        flex-wrap: wrap;
        gap: 1rem;
        padding-left: 0;
        align-items: flex-start;
    }

    .service-highlight {
        background: rgba(95, 177, 52, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(95, 177, 52, 0.3);
        border-radius: 15px;
        padding: 1rem 1.5rem;
        color: var(--white);
        font-weight: 500;
        transition: var(--transition);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
    }

    .service-highlight::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--white);
        transition: var(--transition);
    }

    .service-highlight:hover {
        background: rgba(95, 177, 52, 1);
        transform: translateY(-5px);
        border-color: var(--white);
        box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
    }

    .service-highlight:hover::before {
        width: 100%;
        opacity: 0.3;
    }

    /* Efecto de brillo para los service highlights */
    .service-highlight::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg,
                transparent,
                rgba(255, 255, 255, 0.1),
                transparent);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
    }

    .service-highlight:hover::after {
        opacity: 1;
        transform: rotate(45deg) translate(50%, 50%);
    }

    /* Efectos de hover para iconos en service highlights */
    .service-highlight .fas,
    .service-highlight .fab {
        transition: var(--transition);
        margin-right: 0.5rem;
    }

    .service-highlight:hover .fas,
    .service-highlight:hover .fab {
        transform: scale(1.2);
        color: var(--white);
    }

    /* Efectos de hover para enlaces de contacto */
    .contact-form a:hover {
        color: var(--accent-hover);
        text-decoration: underline;
    }

    .contact-form i {
        color: var(--primary-color);
        width: 20px;
    }

    /* Efectos de hover para elementos de la empresa */
    .empresa-content:hover {
        transform: translateY(-2px);
        transition: var(--transition);
    }

    .image-container-pilares:hover img {
        transform: scale(1.05);
        transition: var(--transition);
    }

    /* Mejoras en la accesibilidad */
    .nav-link:focus,
    .btn:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    /* Efectos de hover para elementos de partners */
    .partner-card:hover .card-text-empresa {
        color: var(--text-primary);
    }

    /* Efectos de scroll reveal adicionales */
    .fade-in-up {
        animation: fadeInUp 0.8s ease-out;
    }

    .fade-in-down {
        animation: fadeInDown 0.8s ease-out;
    }

    .fade-in-left {
        animation: fadeInLeft 0.8s ease-out;
    }

    .fade-in-right {
        animation: fadeInRight 0.8s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }

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

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }

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

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

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

    /* Títulos elegantes con línea vertical al costado */
    .elegant-title {
        font-family: 'Roboto', sans-serif;
        font-size: 3.5rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0;
        text-transform: none;
        letter-spacing: -0.5px;
        line-height: 1;
        position: relative;
        padding-left: 2rem;
        text-align: left;
    }

    .elegant-subtitle {
        font-family: 'Roboto', sans-serif;
        font-size: 1.3rem;
        font-weight: 300;
        color: var(--text-secondary);
        margin-bottom: 2rem;
        margin-top: 0;
        text-transform: none;
        letter-spacing: 0.2px;
        line-height: 1.1;
        opacity: 0.8;
        text-align: left;
        padding-left: 2rem;
        position: relative;
    }

    /* Contenedor para título y subtítulo con línea vertical compartida */
    .title-container {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 2rem;
    }

    .title-container::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: var(--gradient-primary);
        border-radius: 3px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1;
    }

    .title-container .elegant-title {
        padding-left: 0;
        margin-bottom: 0;
    }

    .title-container .elegant-subtitle {
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 0;
    }

    /* Animación para los títulos elegantes */
    .elegant-title {
        opacity: 0;
        transform: translateY(30px);
        animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
    }

    .elegant-subtitle {
        opacity: 0;
        transform: translateY(20px);
        animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
    }

    @keyframes elegantTitleFadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes elegantSubtitleFadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

    /* Responsividad para títulos elegantes */
    @media (max-width: 768px) {
        .elegant-title {
            font-size: 2.5rem;
        }

        .elegant-subtitle {
            font-size: 1.1rem;
        }

        .title-container {
            padding-left: 1.5rem;
        }
    }

    @media (max-width: 576px) {
        .elegant-title {
            font-size: 2rem;
        }

        .elegant-subtitle {
            font-size: 1rem;
        }

        .title-container {
            padding-left: 1rem;
        }
    }

    /* Eliminar contornos de navegación */
    .navbar-nav .nav-link,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:active,
    .navbar-nav .nav-link:hover {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
    }

    .navbar-nav .nav-link:focus-visible {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Estilos para la sección Nosotros */
    .about-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 2.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(95, 177, 52, 0.1);
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .about-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
    }

    .about-icon {
        width: 60px;
        height: 60px;
        background: var(--gradient-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

    .about-icon i {
        font-size: 1.5rem;
        color: var(--white);
    }

    .about-card h3 {
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

    .about-text {
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: 0;
        position: relative;
        z-index: 1;
        flex-grow: 1;
    }

    /* Tarjetas de Misión y Visión */
    .mission-vision-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 2.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(95, 177, 52, 0.1);
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .mission-vision-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
    }

    .card-header-mv {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

    .card-header-mv i {
        font-size: 2rem;
        color: var(--primary-color);
        margin-right: 1rem;
    }

    .card-header-mv h3 {
        color: var(--primary-color);
        font-weight: 600;
        margin: 0;
        font-size: 1.5rem;
    }

    .mission-vision-card p {
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: 0;
        position: relative;
        z-index: 1;
        flex-grow: 1;
    }

    /* Responsive para la sección Nosotros */
    @media (max-width: 768px) {

        .about-card,
        .mission-vision-card {
            padding: 2rem;
        }

        .about-icon {
            width: 50px;
            height: 50px;
        }

        .about-icon i {
            font-size: 1.2rem;
        }
    }

    /* Grid moderno para servicios */
    .services-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 2.5rem 2rem;
        justify-content: center;
    }

    .service-modern-card {
        background: rgba(255, 255, 255, 0.7);
        border-radius: 2rem;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(95, 177, 52, 0.15);
        padding: 2.5rem 2rem 2rem 2rem;
        text-align: center;
        transition: box-shadow 0.3s, transform 0.3s;
        min-height: 420px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .service-modern-card:hover {
        box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
        transform: translateY(-6px) scale(1.03);
    }

    .service-icon {
        background: var(--gradient-primary);
        border-radius: 50%;
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
    }

    .service-icon i {
        color: #fff;
        font-size: 2.5rem;
    }

    .service-title {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }

    .service-desc {
        color: var(--text-secondary);
        font-size: 1.08rem;
        margin-bottom: 2rem;
        flex-grow: 1;
    }

    .btn-modern {
        background: var(--gradient-primary);
        color: #fff;
        border: none;
        border-radius: 2rem;
        padding: 0.7rem 2.2rem;
        font-weight: 600;
        font-size: 1.08rem;
        box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
        transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
        position: relative;
        overflow: hidden;
    }

    .btn-modern:hover {
        background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
        color: #fff;
        box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
        transform: scale(1.05);
    }

    @media (max-width: 992px) {
        .service-modern-card {
            min-height: 380px;
            padding: 2rem 1.2rem 1.5rem 1.2rem;
        }

        .service-icon {
            width: 65px;
            height: 65px;
        }

        .service-icon i {
            font-size: 2rem;
        }
    }

    @media (max-width: 768px) {
        .services-grid {
            gap: 1.5rem 0.5rem;
        }

        .service-modern-card {
            min-height: 320px;
            padding: 1.5rem 0.7rem 1.2rem 0.7rem;
        }

        .service-title {
            font-size: 1.1rem;
        }

        .service-desc {
            font-size: 0.98rem;
        }

        .btn-modern {
            font-size: 0.98rem;
            padding: 0.6rem 1.5rem;
        }
    }

    /* Cards modernas para servicios con imágenes en colores */
    .service-card-modern {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        border: 1px solid rgba(95, 177, 52, 0.1);
        position: relative;
    }

    .service-card-modern:hover {
        transform: translateY(-5px) scale(1.01);
        box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
        border-color: var(--primary-color);
    }

    .service-image-container {
        position: relative;
        overflow: hidden;
        height: 250px;
    }

    .service-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        filter: brightness(0.9) contrast(1.1);
    }

    .service-card-modern:hover .service-image {
        transform: scale(1.05);
        filter: brightness(1) contrast(1.2);
    }

    .service-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .service-card-modern:hover .service-overlay {
        opacity: 1;
    }

    .service-icon-overlay {
        font-size: 4rem;
        color: white;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        transform: scale(0.8);
        transition: transform 0.2s ease;
    }

    .service-card-modern:hover .service-icon-overlay {
        transform: scale(1);
    }

    .service-content {
        padding: 2rem;
        position: relative;
    }

    .service-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 2rem;
        right: 2rem;
        height: 3px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transition: transform 0.2s ease;
    }

    .service-card-modern:hover .service-content::before {
        transform: scaleX(1);
    }

    .service-title-modern {
        color: var(--primary-color);
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
    }

    .service-text-modern {
        color: var(--text-secondary);
        line-height: 1.7;
        margin-bottom: 1.5rem;
        font-size: 1rem;
    }

    .btn-service-modern {
        background: var(--gradient-primary);
        color: white;
        border: none;
        border-radius: 25px;
        padding: 0.8rem 2rem;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
    }

    .btn-service-modern::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.3s ease;
    }

    .btn-service-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
    }

    .btn-service-modern:hover::before {
        left: 100%;
    }

    /* Responsive para servicios modernos */
    @media (max-width: 768px) {
        .service-image-container {
            height: 220px;
        }

        .service-content {
            padding: 1.5rem;
        }

        .service-title-modern {
            font-size: 1.3rem;
        }

        .service-text-modern {
            font-size: 0.95rem;
        }

        .service-icon-overlay {
            font-size: 3rem;
        }
    }

    /* Selector de idioma */
    .language-selector {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 9999 !important;
        background: rgba(95, 177, 52, 0.9);
        backdrop-filter: blur(8px);
        border-radius: 20px;
        padding: 6px;
        box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
        transition: all 0.3s ease;
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .language-btn {
        background: transparent;
        border: none;
        padding: 6px 12px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        outline: none;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .language-btn.active {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        font-weight: 700;
    }

    .language-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        transform: scale(1.05);
    }

    /* Estilos del formulario de contacto moderno */
    .contact-container {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 3rem;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        margin: 2rem 0;
    }

    /* Estilos para la sección de información de contacto */
    .contact-info-wrapper {
        padding-right: 2rem;
    }

    .contact-title {
        color: #333;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .contact-subtitle {
        color: #666;
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .contact-details {
        margin-bottom: 2rem;
    }

    .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding: 1rem;
        border-radius: 12px;
        background: rgba(95, 177, 52, 0.05);
        transition: all 0.3s ease;
    }

    .contact-item:hover {
        background: rgba(95, 177, 52, 0.1);
        transform: translateX(5px);
    }

    .contact-item i {
        font-size: 1.5rem;
        color: #5FB134;
        margin-top: 0.2rem;
    }

    .contact-item h5 {
        color: #333;
        font-weight: 600;
        margin-bottom: 0.3rem;
    }

    .contact-item p {
        color: #666;
        margin: 0;
        line-height: 1.5;
    }

    .social-links {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
    }

    .social-link {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .social-link:hover {
        background: #4a8f2a;
        transform: translateY(-3px);
        color: white;
    }

    /* Estilos para el formulario */
    .form-wrapper {
        padding-left: 2rem;
    }

    .form-title {
        color: #333;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .form-subtitle {
        color: #666;
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .modern-form .form-group {
        margin-bottom: 1.5rem;
    }

    .modern-form label {
        display: block;
        color: #333;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    .modern-form .input-container {
        position: relative;
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .modern-form .input-container:hover,
    .modern-form .input-container:focus-within {
        border-color: #5FB134;
        background: white;
    }

    .modern-form .input-container input,
    .modern-form .input-container select,
    .modern-form .input-container textarea {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 3rem;
        border: none;
        background: transparent;
        font-size: 1rem;
        color: #333;
        outline: none;
    }

    .modern-form .input-container textarea {
        min-height: 140px;
        resize: vertical;
    }

    .modern-form .input-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #5FB134;
        font-size: 1.1rem;
    }

    .modern-form .input-container textarea+.input-icon {
        top: 1rem;
        transform: none;
    }

    .modern-form .error-message {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.5rem;
        display: none;
    }

    .modern-form .privacy-check {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-top: 1rem;
    }

    .modern-form .privacy-check input[type="checkbox"] {
        margin-top: 0.3rem;
    }

    .modern-form .privacy-check label {
        font-size: 0.9rem;
        color: #666;
        font-weight: normal;
        line-height: 1.5;
    }

    .modern-form .privacy-check a {
        color: #5FB134;
        text-decoration: none;
    }

    .modern-form .privacy-check a:hover {
        text-decoration: underline;
    }

    .modern-form .btn-primary {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .modern-form .btn-primary:hover {
        background: #4a8f2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
    }

    .modern-form .btn-primary i {
        font-size: 1.2rem;
    }

    /* Responsive */
    @media (max-width: 991.98px) {
        .contact-container {
            padding: 2rem;
        }

        .contact-info-wrapper {
            padding-right: 0;
            margin-bottom: 2rem;
        }

        .form-wrapper {
            padding-left: 0;
        }

        .contact-title,
        .form-title {
            font-size: 1.75rem;
        }
    }

    @media (max-width: 767.98px) {
        .contact-container {
            padding: 1.5rem;
        }

        .contact-item {
            padding: 0.75rem;
        }

        .modern-form .input-container input,
        .modern-form .input-container select,
        .modern-form .input-container textarea {
            font-size: 0.95rem;
        }
    }

    /* Títulos elegantes con línea vertical al costado */
    .elegant-title {
        font-family: 'Roboto', sans-serif;
        font-size: 3.5rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0;
        text-transform: none;
        letter-spacing: -0.5px;
        line-height: 1;
        position: relative;
        padding-left: 2rem;
        text-align: left;
    }

    .elegant-subtitle {
        font-family: 'Roboto', sans-serif;
        font-size: 1.3rem;
        font-weight: 300;
        color: var(--text-secondary);
        margin-bottom: 2rem;
        margin-top: 0;
        text-transform: none;
        letter-spacing: 0.2px;
        line-height: 1.1;
        opacity: 0.8;
        text-align: left;
        padding-left: 2rem;
        position: relative;
    }

    /* Contenedor para título y subtítulo con línea vertical compartida */
    .title-container {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 2rem;
    }

    .title-container::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: var(--gradient-primary);
        border-radius: 3px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1;
    }

    .title-container .elegant-title {
        padding-left: 0;
        margin-bottom: 0;
    }

    .title-container .elegant-subtitle {
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 0;
    }

    /* Animación para los títulos elegantes */
    .elegant-title {
        opacity: 0;
        transform: translateY(30px);
        animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
    }

    .elegant-subtitle {
        opacity: 0;
        transform: translateY(20px);
        animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
    }

    @keyframes elegantTitleFadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes elegantSubtitleFadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

    /* Responsividad para títulos elegantes */
    @media (max-width: 768px) {
        .elegant-title {
            font-size: 2.5rem;
        }

        .elegant-subtitle {
            font-size: 1.1rem;
        }

        .title-container {
            padding-left: 1.5rem;
        }
    }

    @media (max-width: 576px) {
        .elegant-title {
            font-size: 2rem;
        }

        .elegant-subtitle {
            font-size: 1rem;
        }

        .title-container {
            padding-left: 1rem;
        }
    }

    /* Eliminar contornos de navegación */
    .navbar-nav .nav-link,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:active,
    .navbar-nav .nav-link:hover {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
    }

    .navbar-nav .nav-link:focus-visible {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Estilos para la sección Nosotros */
    .about-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 2.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(95, 177, 52, 0.1);
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .about-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
    }

    .about-icon {
        width: 60px;
        height: 60px;
        background: var(--gradient-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

    .about-icon i {
        font-size: 1.5rem;
        color: var(--white);
    }

    .about-card h3 {
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

    .about-text {
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: 0;
        position: relative;
        z-index: 1;
        flex-grow: 1;
    }

    /* Tarjetas de Misión y Visión */
    .mission-vision-card {

        /* Variables CSS para la nueva paleta de colores de Gradotech */
        :root {
            --primary-color: #5FB134;
            /* Verde Gradotech */
            --secondary-color: #4a8f2a;
            /* Verde más oscuro */
            --accent-color: #5FB134;
            /* Verde Gradotech */
            --accent-hover: #6bc23a;
            /* Verde hover más claro */
            --dark-bg: #1a1a1a;
            /* Fondo oscuro elegante */
            --light-bg: #f8f9fa;
            /* Fondo claro */
            --text-primary: #212121;
            /* Texto principal */
            --text-secondary: #757575;
            /* Texto secundario */
            --white: #ffffff;
            --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
            --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
            --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Ocultar scrollbar hasta hacer scroll */
        html {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE and Edge */
        }

        html::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        html.scrolling {
            scrollbar-width: auto;
            -ms-overflow-style: auto;
        }

        html.scrolling::-webkit-scrollbar {
            display: block;
            width: 8px;
        }

        html.scrolling::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        html.scrolling::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        html.scrolling::-webkit-scrollbar-thumb:hover {
            background: var(--secondary-color);
        }

        body {
            font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.loaded {
            opacity: 1;
        }

        /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
        .navbar {
            background: #f8f9fa !important;
            backdrop-filter: blur(10px);
            transition: var(--transition);
            box-shadow: none;
        }

        .navbar.scrolled {
            background: rgba(26, 26, 26, 0.98) !important;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }

        .navbar-brand img {
            transition: var(--transition);
            max-height: 50px;
        }

        .navbar-brand:hover img {
            transform: scale(1.05);
        }

        .nav-link {
            position: relative;
            transition: var(--transition);
            font-weight: 500;
            color: var(--white) !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            font-size: 1.1rem;
            padding: 0.75rem 1.2rem !important;
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .nav-link:focus {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--white);
            transition: var(--transition);
            transform: translateX(-50%);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .nav-link:hover {
            color: var(--white) !important;
            opacity: 0.8;
        }

        .nav-link.active {
            color: var(--white) !important;
            font-weight: 600;
        }

        .nav-link.active::after {
            width: 100%;
            background: var(--white);
        }

        /* Header mejorado con colores de Gradotech */
        .masthead {
            background: var(--gradient-primary);
            position: relative;
            height: 100vh;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding-top: 0;
        }

        /* Efecto de ondas animadas */
        .masthead::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
            opacity: 0.3;
            animation: float 20s ease-in-out infinite;
        }

        /* Nuevo efecto de ondas animadas */
        .waves-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23ffffff"/></path></svg>');
            background-size: 1200px 100%;
            animation: wave 25s linear infinite;
        }

        .wave:nth-child(2) {
            bottom: 10%;
            animation: wave 20s linear infinite;
            opacity: 0.5;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
        }

        .wave:nth-child(3) {
            bottom: 20%;
            animation: wave 15s linear infinite;
            opacity: 0.2;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
        }

        @keyframes wave {
            0% {
                transform: translateX(0) translateZ(0) scaleY(1);
            }

            50% {
                transform: translateX(-25%) translateZ(0) scaleY(0.8);
            }

            100% {
                transform: translateX(-50%) translateZ(0) scaleY(1);
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(180deg);
            }
        }

        .masthead .container {
            position: relative;
            z-index: 10;
            text-align: left;
            padding-left: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .masthead-heading {
            font-size: 4.5rem;
            font-weight: 800;
            color: var(--white);
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            margin-bottom: 1.5rem;
            letter-spacing: -1px;
            line-height: 1.1;
            text-transform: uppercase;
            opacity: 0;
            transform: translateY(30px);
            animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
            text-align: left;
        }

        .masthead-subheading {
            font-size: 2rem;
            color: var(--white) !important;
            margin-bottom: 2.5rem;
            opacity: 0.9;
            font-weight: 300;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transform: translateY(30px);
            animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
            text-align: left;
        }

        @keyframes elegantFadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        /* Secciones que ocupan 100% de altura con efecto parallax */
        .full-width-section {
            min-height: 100vh;
            padding: 80px 0;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .full-width-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.05;
            z-index: -1;
            transform: translateZ(0);
        }

        .full-width-section:nth-child(even) {
            background: var(--light-bg);
        }

        .full-width-section:nth-child(even)::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        }

        .full-width-section:nth-child(odd)::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
        }

        /* Sección empresa específica - 100% altura */
        #page-empresa {
            min-height: 100vh;
            height: auto;
            padding: 120px 0 80px 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
            background: var(--white);
        }

        .empresa-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* Títulos de sección mejorados */
        .border-left-green-title {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--text-primary);
            position: relative;
            padding-left: 2rem;
            margin-bottom: 3rem;
            text-transform: uppercase;
            letter-spacing: -1px;
        }

        .border-left-green-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
        }

        /* Carrusel horizontal de alianzas */
        .alliances-carousel {
            position: relative;
            height: 220px;
            overflow: hidden;
            background: transparent;
            border-radius: 20px;
            padding: 2rem;
            margin: 2rem 0;
        }

        .alliances-track {
            display: flex;
            animation: scrollHorizontal 60s linear infinite;
            gap: 4rem;
            align-items: center;
            padding: 1rem 0;
            width: max-content;
            will-change: transform;
        }

        .alliances-track:hover {
            animation-play-state: paused;
        }

        .alliance-item {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 200px;
            height: 140px;
            padding: 1.5rem;
            background: transparent;
            border-radius: 15px;
            transition: var(--transition);
            flex-shrink: 0;
            position: relative;
        }

        .alliance-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            opacity: 0;
        }

        .alliance-item:hover::before {
            opacity: 1;
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(95, 177, 52, 0.3);
        }

        .alliance-item:hover {
            transform: scale(1.05);
        }

        .alliance-item img {
            max-width: 160px;
            max-height: 90px;
            object-fit: contain;
            /* filter: grayscale(100%) brightness(0.9); */
            transition: var(--transition);
            position: relative;
            z-index: 1;
        }

        .alliance-item:hover img {
            /* filter: grayscale(0%) brightness(1.1); */
            transform: scale(1.1);
        }

        @keyframes scrollHorizontal {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-33.333% * 3));
            }
        }

        /* Controles del carrusel horizontal - OCULTOS */
        .carousel-controls {
            display: none !important;
        }

        .carousel-btn {
            display: none !important;
        }

        .carousel-btn:hover {
            display: none !important;
        }

        .carousel-btn:disabled {
            display: none !important;
        }

        /* Control de navegación lateral como Black-up - OCULTO */
        .side-nav-control {
            display: none !important;
        }

        .nav-dot {
            display: none !important;
        }

        .nav-dot:hover,
        .nav-dot.active {
            display: none !important;
        }

        .nav-dot-label {
            display: none !important;
        }

        .nav-dot:hover .nav-dot-label {
            display: none !important;
        }

        /* Efectos de scroll mejorados */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        .scroll-reveal.from-left {
            transform: translateX(-50px);
        }

        .scroll-reveal.from-right {
            transform: translateX(50px);
        }

        .scroll-reveal.from-bottom {
            transform: translateY(50px);
        }

        .scroll-reveal.scale-in {
            transform: scale(0.8);
        }

        /* Responsive para el carrusel horizontal */
        @media (max-width: 768px) {
            .alliances-carousel {
                height: 150px;
                padding: 1rem;
                margin: 1rem 0;
            }

            .alliance-item {
                min-width: 120px;
                height: 80px;
                padding: 1rem;
            }

            .alliance-item img {
                max-height: 50px;
            }

            .carousel-controls {
                display: none !important;
            }

            .carousel-btn {
                display: none !important;
            }

            .masthead-heading {
                font-size: 2.5rem;
            }

            .masthead-subheading {
                font-size: 1.3rem;
            }

            .side-nav-control {
                display: none !important;
            }

            .nav-dot {
                display: none !important;
            }
        }

        /* Cards de servicios mejorados */
        .card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--shadow-soft);
            background: var(--white);
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-strong);
        }

        .card-img-top {
            transition: var(--transition);
            height: 250px;
            object-fit: cover;
        }

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

        .card-body {
            padding: 2rem;
        }

        .card-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .card-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        /* Efectos de imagen mejorados */
        .img-grayscale {
            filter: grayscale(100%);
            transition: var(--transition);
        }

        .img-grayscale:hover {
            /* filter: grayscale(0%) brightness(1.1); */
        }

        /* Sección de clientes */
        .client-logo {
            transition: var(--transition);
            filter: grayscale(100%);
            opacity: 0.7;
        }

        .client-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
            box-shadow: var(--shadow-strong);
            border-color: var(--primary-color);
        }

        /* Sección de partners */
        .partner-card {
            background: var(--white);
            border-radius: 15px;
            padding: 2rem;
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .partner-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-strong);
            border-color: var(--primary-color);
        }

        .partner-card img {
            transition: var(--transition);
            filter: grayscale(100%);
        }

        .partner-card:hover img {
            filter: grayscale(0%);
            transform: scale(1.05);
        }

        /* Formulario de contacto mejorado - Diseño limpio y profesional */
        .contact-form {
            background: #ffffff;
            padding: 3rem;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin: 10% 0;
            max-width: 160px;
        }

        .form-wrapper h3 {
            color: #333;
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            text-align: left;
        }

        .form-wrapper p {
            color: #666;
            font-size: 1rem;
            margin-bottom: 2rem;
            text-align: left;
        }

        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        /* Contenedor de input mejorado */
        .input-container {
            position: relative;
            background: #ffffff;
            border: 1px solid #d0d0d0;
            transition: all 0.2s ease;
            height: 48px;
            display: flex;
            align-items: center;
        }

        .input-container:hover {
            border-color: #5FB134;
        }

        .input-container.focused {
            border-color: #5FB134;
            border-width: 2px;
        }

        .input-container.error {
            border-color: #dc3545;
            border-width: 2px;
        }

        /* Inputs mejorados */
        .modern-input,
        .modern-textarea,
        .modern-select {
            width: 100%;
            border: none;
            background: transparent;
            padding: 0.75rem 1rem 0.75rem 3rem;
            font-size: 0.95rem;
            color: #333;
            outline: none;
            transition: all 0.3s ease;
            height: 100%;
            text-align: left;
        }

        .modern-input::placeholder,
        .modern-textarea::placeholder {
            color: #6c757d;
            font-size: 0.9rem;
            text-align: left;
            opacity: 0.8;
        }

        .modern-textarea {
            height: 140px;
            resize: vertical;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .modern-select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1rem;
            padding-right: 3rem;
        }

        .modern-select:focus {
            box-shadow: none;
        }

        .modern-select option {
            background: white;
            color: #333;
            padding: 0.5rem;
        }

        /* Iconos de input */
        .input-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #5FB134;
            font-size: 1rem;
            z-index: 2;
            transition: all 0.2s ease;
            width: 20px;
            text-align: center;
        }

        .input-container.focused .input-icon {
            color: #5FB134;
        }

        /* Mensajes de error */
        .error-message {
            color: #dc3545;
            font-size: 0.8rem;
            margin-top: 0.25rem;
            display: none;
            animation: slideIn 0.2s ease;
            text-align: left;
            padding-left: 0;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

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

        /* Botón de envío mejorado */
        .btn-primary {
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            margin-top: 0.5rem;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: none;
            letter-spacing: normal;
        }

        .btn-primary:hover {
            background: #4a8f2a;
            transform: none;
            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
        }

        .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
        }

        /* Contenedor de captcha */
        .captcha-container {
            background: #f8f9fa;
            padding: 1rem;
            border: 1px solid #e0e0e0;
            margin-bottom: 1rem;
        }

        .captcha-question {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            font-weight: 500;
            color: #333;
        }

        .captcha-question i {
            font-size: 1rem;
            color: #5FB134;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .contact-form {
                padding: 2rem;
                margin: 5% 0;
            }

            .form-wrapper h3 {
                font-size: 1.5rem;
            }

            .form-wrapper p {
                font-size: 0.9rem;
            }

            .modern-input,
            .modern-textarea,
            .modern-select {
                font-size: 0.9rem;
            }

            .input-icon {
                font-size: 0.9rem;
            }
        }

        /* Footer mejorado */
        .footer {
            background: var(--dark-bg) !important;
            color: var(--white);
            padding: 3rem 0 1rem;
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--gradient-accent);
        }

        .link-empresa {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }

        .link-empresa:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        /* Efectos de scroll */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: var(--transition);
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animaciones adicionales */
        .slide-in-left {
            animation: slideInLeft 0.8s ease-out;
        }

        .slide-in-right {
            animation: slideInRight 0.8s ease-out;
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

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

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

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

        /* Efectos de hover para botones sociales */
        .btn-social {
            transition: var(--transition);
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-social:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: var(--shadow-strong);
        }

        /* Mejoras en el mapa */
        .responsive-iframe {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }

        .responsive-iframe iframe {
            border: none;
            width: 100%;
            height: 300px;
        }

        /* Efectos de partículas mejorados */
        #particles-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 0;
            background: transparent;
        }

        /* Utilidades adicionales */
        .text-gradient {
            background: var(--gradient-accent);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .bg-gradient {
            background: var(--gradient-primary);
        }

        .shadow-custom {
            box-shadow: var(--shadow-strong);
        }

        /* Efectos de carga */
        .loading {
            position: relative;
            overflow: hidden;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        .mt-100 {
            margin-top: 100px !important;
        }

        .border-left-green {
            border-left: 4px solid #5FB134;
            font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-size: 16px;
        }

        .text-content-empresa {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            text-align: justify;
        }

        .empresa-content p {
            text-align: justify;
        }

        .image-container-pilares {
            text-align: center;
            margin: 2rem 0;
        }

        .image-container-pilares img {
            max-width: 160px;
            height: auto;
            border-radius: 10px;
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
        }

        .image-container-pilares:hover img {
            transform: scale(1.02);
            box-shadow: var(--shadow-strong);
        }

        /* Estilos para el contenedor de la imagen */
        .image-container {
            width: 400px;
            height: 400px;

            overflow: hidden;
            position: relative;

            margin-left: 10%;
            display: flex;
            /* Usa flexbox para centrar verticalmente */
            align-items: center;
            /* Centra verticalmente el contenido */
        }

        /* Estilos para la imagen */
        .image-container img {
            max-width: 160px;
            max-height: 100%;
            width: auto;
            height: auto;
            transition: transform 0.3s ease;
            /* Efecto de transición para hover */
        }

        .image-container:hover img {
            border: 2px solid #5FB134;
            /* Cambia al color y grosor de borde deseado */
        }

        .custom-card {
            width: 100% !important;
            /* Asegura que el card ocupe todo el ancho disponible */
            margin-bottom: 20px !important;
            /* Espacio entre las tarjetas */
        }

        .custom-card .card-body {
            position: relative !important;
            /* Para posicionar absolutamente la cabecera dentro del card */
        }

        .card-text-empresa {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-secondary);
            text-align: justify;
        }

        .card-title-empresa {
            background-color: #5FB134;
            color: #fff;
            padding: 5px;
            /* Opcional: agrega relleno para que se vea mejor */
            display: flex;
            /* Crea un contenedor flexible */
            justify-content: space-between;
            /* Espacio uniforme entre el texto y el icono */
            align-items: center;
            /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
        }

        .card-title-empresa i {
            margin-left: 5px;
            /* Agrega un margen izquierdo al icono para separarlo del texto */
        }

        .section {
            margin-bottom: 20px !important;
            /* Agrega margen inferior para separar las secciones */
        }

        .contacto {
            background-color: #5FB134;
        }

        /* Efectos de scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

        .reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* Efectos de carga para imágenes */
        img {
            transition: opacity 0.3s ease;
        }

        img.loaded {
            opacity: 1;
        }

        /* Animación de carga inicial */
        body {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.loaded {
            opacity: 1;
        }

        /* Mejoras en las pestañas */
        .nav-tabs .nav-link {
            border: none;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 12px 24px;
            border-radius: 25px;
            margin: 0 5px;
            transition: var(--transition);
        }

        .nav-tabs .nav-link.active {
            background: var(--gradient-accent);
            color: var(--white);
            box-shadow: var(--shadow-soft);
        }

        .nav-tabs .nav-link:hover {
            background: rgba(95, 177, 52, 0.1);
            color: var(--primary-color);
        }

        /* Efectos de hover para botones sociales mejorados */
        .btn-social:hover {
            background: var(--accent-color) !important;
            border-color: var(--accent-color) !important;
        }

        /* Efectos de hover para enlaces */
        a {
            transition: var(--transition);
        }

        a:hover {
            color: var(--primary-color);
        }

        /* Efectos de hover para iconos */
        .fas,
        .fab {
            transition: var(--transition);
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para el botón scroll to top */
        .scroll-to-top:hover {
            background: var(--accent-hover) !important;
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
        }

        /* Efectos de animación para elementos específicos */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        .fade-in-left {
            animation: fadeInLeft 0.8s ease-out;
        }

        .fade-in-right {
            animation: fadeInRight 0.8s ease-out;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        /* Efectos de hover para iconos */
        .fas,
        .fab {
            transition: var(--transition);
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para elementos de la empresa */
        .image-container-pilares:hover img {
            transform: scale(1.05);
            transition: var(--transition);
        }

        /* Mejoras en la navegación móvil */
        @media (max-width: 768px) {
            .navbar-nav {
                text-align: center;
            }

            .navbar-nav .nav-link {
                padding: 0.5rem 1rem;
            }

            .navbar-nav .nav-link:last-child {
                margin-bottom: 0;
            }

            .masthead-heading {
                font-size: 2.5rem;
            }

            .masthead-subheading {
                font-size: 1.1rem;
            }

            .border-left-green-title {
                font-size: 2.5rem;
            }

            .full-width-section {
                padding: 2rem 0;
            }

            #page-empresa {
                padding: 2rem 0;
            }

            .service-highlights {
                flex-direction: column;
                gap: 1rem;
                justify-content: flex-start;
                padding-left: 1rem;
            }

            .service-highlight {
                font-size: 0.9rem;
                padding: 0.5rem 1rem;
            }

            .side-nav-control {
                display: none;
            }

            .nav-dot {
                width: 12px;
                height: 12px;
            }
        }

        @media (max-width: 992px) {
            .masthead {
                padding: 0 1rem;
            }

            .service-highlights {
                flex-wrap: wrap;
                justify-content: flex-start;
                gap: 1rem;
                padding-left: 1rem;
            }

            .navbar-brand img {
                max-height: 40px;
            }

            .nav-link {
                font-size: 1rem;
                padding: 0.5rem 1rem !important;
            }
        }

        @media (max-width: 576px) {
            .masthead-heading {
                font-size: 2rem;
            }

            .service-highlight {
                font-size: 0.8rem;
                padding: 0.4rem 0.8rem;
            }

            .btn-primary {
                font-size: 0.9rem;
                padding: 0.75rem 1.5rem;
            }

            .border-left-green-title {
                font-size: 2rem;
                padding-left: 1rem;
            }
        }

        /* Asegurar que todas las secciones ocupen 100% de altura */
        .page-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 80px;
        }

        /* Mejorar el espaciado del contenido en secciones */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* Efectos de hover mejorados para navegación */
        .navbar-nav .nav-link {
            position: relative;
            transition: all 0.3s ease;
            margin: 0 0.5rem;
        }

        .navbar-nav .nav-link:hover {
            transform: translateY(-2px);
        }

        .navbar-nav .nav-link.active {
            transform: translateY(-2px);
            font-weight: 700;
        }

        /* Efectos de parallax mejorados */
        .full-width-section::before {
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* Optimización para dispositivos móviles */
        @media (max-width: 768px) {
            .full-width-section::before {
                background-attachment: scroll;
            }

            .masthead::before {
                background-attachment: scroll;
            }
        }

        /* Botones mejorados con colores de Gradotech */
        .btn-primary {
            background: var(--gradient-accent);
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: var(--transition);
        }

        .btn-primary:hover::before {
            left: 100%;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-strong);
            background: var(--gradient-primary);
        }

        /* Servicios destacados en el header - COLOR VERDE */
        .service-highlights {
            display: flex;
            justify-content: flex-start;
            margin-top: 3rem;
            flex-wrap: wrap;
            gap: 1rem;
            padding-left: 0;
            align-items: flex-start;
        }

        .service-highlight {
            background: rgba(95, 177, 52, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(95, 177, 52, 0.3);
            border-radius: 15px;
            padding: 1rem 1.5rem;
            color: var(--white);
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
        }

        .service-highlight::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--white);
            transition: var(--transition);
        }

        .service-highlight:hover {
            background: rgba(95, 177, 52, 1);
            transform: translateY(-5px);
            border-color: var(--white);
            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
        }

        .service-highlight:hover::before {
            width: 100%;
            opacity: 0.3;
        }

        /* Efecto de brillo para los service highlights */
        .service-highlight::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent);
            transform: rotate(45deg);
            transition: all 0.6s ease;
            opacity: 0;
        }

        .service-highlight:hover::after {
            opacity: 1;
            transform: rotate(45deg) translate(50%, 50%);
        }

        /* Efectos de hover para iconos en service highlights */
        .service-highlight .fas,
        .service-highlight .fab {
            transition: var(--transition);
            margin-right: 0.5rem;
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para enlaces de contacto */
        .contact-form a:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        .contact-form i {
            color: var(--primary-color);
            width: 20px;
        }

        /* Efectos de hover para elementos de la empresa */
        .empresa-content:hover {
            transform: translateY(-2px);
            transition: var(--transition);
        }

        .image-container-pilares:hover img {
            transform: scale(1.05);
            transition: var(--transition);
        }

        /* Mejoras en la accesibilidad */
        .nav-link:focus,
        .btn:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

        /* Efectos de hover para elementos de partners */
        .partner-card:hover .card-text-empresa {
            color: var(--text-primary);
        }

        /* Efectos de scroll reveal adicionales */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        .fade-in-left {
            animation: fadeInLeft 0.8s ease-out;
        }

        .fade-in-right {
            animation: fadeInRight 0.8s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        /* Títulos elegantes con línea vertical al costado */
        .elegant-title {
            font-family: 'Roboto', sans-serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0;
            text-transform: none;
            letter-spacing: -0.5px;
            line-height: 1;
            position: relative;
            padding-left: 2rem;
            text-align: left;
        }

        .elegant-subtitle {
            font-family: 'Roboto', sans-serif;
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            margin-top: 0;
            text-transform: none;
            letter-spacing: 0.2px;
            line-height: 1.1;
            opacity: 0.8;
            text-align: left;
            padding-left: 2rem;
            position: relative;
        }

        /* Contenedor para título y subtítulo con línea vertical compartida */
        .title-container {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 2rem;
        }

        .title-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 1;
        }

        .title-container .elegant-title {
            padding-left: 0;
            margin-bottom: 0;
        }

        .title-container .elegant-subtitle {
            padding-left: 0;
            margin-bottom: 0;
            margin-top: 0;
        }

        /* Animación para los títulos elegantes */
        .elegant-title {
            opacity: 0;
            transform: translateY(30px);
            animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
        }

        .elegant-subtitle {
            opacity: 0;
            transform: translateY(20px);
            animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
        }

        @keyframes elegantTitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes elegantSubtitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Responsividad para títulos elegantes */
        @media (max-width: 768px) {
            .elegant-title {
                font-size: 2.5rem;
            }

            .elegant-subtitle {
                font-size: 1.1rem;
            }

            .title-container {
                padding-left: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .elegant-title {
                font-size: 2rem;
            }

            .elegant-subtitle {
                font-size: 1rem;
            }

            .title-container {
                padding-left: 1rem;
            }
        }

        /* Eliminar contornos de navegación */
        .navbar-nav .nav-link,
        .navbar-nav .nav-link:focus,
        .navbar-nav .nav-link:active,
        .navbar-nav .nav-link:hover {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
        }

        .navbar-nav .nav-link:focus-visible {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Estilos para la sección Nosotros */
        .about-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .about-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .about-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-icon i {
            font-size: 1.5rem;
            color: var(--white);
        }

        .about-card h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Tarjetas de Misión y Visión */
        .mission-vision-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .mission-vision-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .card-header-mv {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .card-header-mv i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-right: 1rem;
        }

        .card-header-mv h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin: 0;
            font-size: 1.5rem;
        }

        .mission-vision-card p {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Responsive para la sección Nosotros */
        @media (max-width: 768px) {

            .about-card,
            .mission-vision-card {
                padding: 2rem;
            }

            .about-icon {
                width: 50px;
                height: 50px;
            }

            .about-icon i {
                font-size: 1.2rem;
            }
        }

        /* Grid moderno para servicios */
        .services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2.5rem 2rem;
            justify-content: center;
        }

        .service-modern-card {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 2rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(95, 177, 52, 0.15);
            padding: 2.5rem 2rem 2rem 2rem;
            text-align: center;
            transition: box-shadow 0.3s, transform 0.3s;
            min-height: 420px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .service-modern-card:hover {
            box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
            transform: translateY(-6px) scale(1.03);
        }

        .service-icon {
            background: var(--gradient-primary);
            border-radius: 50%;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
        }

        .service-icon i {
            color: #fff;
            font-size: 2.5rem;
        }

        .service-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1rem;
            margin-top: 0.5rem;
        }

        .service-desc {
            color: var(--text-secondary);
            font-size: 1.08rem;
            margin-bottom: 2rem;
            flex-grow: 1;
        }

        .btn-modern {
            background: var(--gradient-primary);
            color: #fff;
            border: none;
            border-radius: 2rem;
            padding: 0.7rem 2.2rem;
            font-weight: 600;
            font-size: 1.08rem;
            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
            transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
            position: relative;
            overflow: hidden;
        }

        .btn-modern:hover {
            background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
            color: #fff;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
            transform: scale(1.05);
        }

        @media (max-width: 992px) {
            .service-modern-card {
                min-height: 380px;
                padding: 2rem 1.2rem 1.5rem 1.2rem;
            }

            .service-icon {
                width: 65px;
                height: 65px;
            }

            .service-icon i {
                font-size: 2rem;
            }
        }

        @media (max-width: 768px) {
            .services-grid {
                gap: 1.5rem 0.5rem;
            }

            .service-modern-card {
                min-height: 320px;
                padding: 1.5rem 0.7rem 1.2rem 0.7rem;
            }

            .service-title {
                font-size: 1.1rem;
            }

            .service-desc {
                font-size: 0.98rem;
            }

            .btn-modern {
                font-size: 0.98rem;
                padding: 0.6rem 1.5rem;
            }
        }

        /* Cards modernas para servicios con imágenes en colores */
        .service-card-modern {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
        }

        .service-card-modern:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
            border-color: var(--primary-color);
        }

        .service-image-container {
            position: relative;
            overflow: hidden;
            height: 250px;
        }

        .service-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            filter: brightness(0.9) contrast(1.1);
        }

        .service-card-modern:hover .service-image {
            transform: scale(1.05);
            filter: brightness(1) contrast(1.2);
        }

        .service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .service-card-modern:hover .service-overlay {
            opacity: 1;
        }

        .service-icon-overlay {
            font-size: 4rem;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            transform: scale(0.8);
            transition: transform 0.2s ease;
        }

        .service-card-modern:hover .service-icon-overlay {
            transform: scale(1);
        }

        .service-content {
            padding: 2rem;
            position: relative;
        }

        .service-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 2rem;
            right: 2rem;
            height: 3px;
            background: var(--gradient-primary);
            transform: scaleX(0);
            transition: transform 0.2s ease;
        }

        .service-card-modern:hover .service-content::before {
            transform: scaleX(1);
        }

        .service-title-modern {
            color: var(--primary-color);
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .service-text-modern {
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 1.5rem;
            font-size: 1rem;
        }

        .btn-service-modern {
            background: var(--gradient-primary);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 0.8rem 2rem;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
        }

        .btn-service-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.3s ease;
        }

        .btn-service-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
        }

        .btn-service-modern:hover::before {
            left: 100%;
        }

        /* Responsive para servicios modernos */
        @media (max-width: 768px) {
            .service-image-container {
                height: 220px;
            }

            .service-content {
                padding: 1.5rem;
            }

            .service-title-modern {
                font-size: 1.3rem;
            }

            .service-text-modern {
                font-size: 0.95rem;
            }

            .service-icon-overlay {
                font-size: 3rem;
            }
        }

        /* Selector de idioma */
        .language-selector {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 9999 !important;
            background: rgba(95, 177, 52, 0.9);
            backdrop-filter: blur(8px);
            border-radius: 20px;
            padding: 6px;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
            transition: all 0.3s ease;
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .language-btn {
            background: transparent;
            border: none;
            padding: 6px 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .language-btn.active {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-weight: 700;
        }

        .language-btn:hover:not(.active) {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            transform: scale(1.05);
        }

        /* Estilos del formulario de contacto moderno */
        .contact-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin: 2rem 0;
        }

        /* Estilos para la sección de información de contacto */
        .contact-info-wrapper {
            padding-right: 2rem;
        }

        .contact-title {
            color: #333;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .contact-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .contact-details {
            margin-bottom: 2rem;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            border-radius: 12px;
            background: rgba(95, 177, 52, 0.05);
            transition: all 0.3s ease;
        }

        .contact-item:hover {
            background: rgba(95, 177, 52, 0.1);
            transform: translateX(5px);
        }

        .contact-item i {
            font-size: 1.5rem;
            color: #5FB134;
            margin-top: 0.2rem;
        }

        .contact-item h5 {
            color: #333;
            font-weight: 600;
            margin-bottom: 0.3rem;
        }

        .contact-item p {
            color: #666;
            margin: 0;
            line-height: 1.5;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: #4a8f2a;
            transform: translateY(-3px);
            color: white;
        }

        /* Estilos para el formulario */
        .form-wrapper {
            padding-left: 2rem;
        }

        .form-title {
            color: #333;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .form-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .modern-form .form-group {
            margin-bottom: 1.5rem;
        }

        .modern-form label {
            display: block;
            color: #333;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .modern-form .input-container {
            position: relative;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .modern-form .input-container:hover,
        .modern-form .input-container:focus-within {
            border-color: #5FB134;
            background: white;
        }

        .modern-form .input-container input,
        .modern-form .input-container select,
        .modern-form .input-container textarea {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 3rem;
            border: none;
            background: transparent;
            font-size: 1rem;
            color: #333;
            outline: none;
        }

        .modern-form .input-container textarea {
            min-height: 140px;
            resize: vertical;
        }

        .modern-form .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #5FB134;
            font-size: 1.1rem;
        }

        .modern-form .input-container textarea+.input-icon {
            top: 1rem;
            transform: none;
        }

        .modern-form .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }

        .modern-form .privacy-check {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-top: 1rem;
        }

        .modern-form .privacy-check input[type="checkbox"] {
            margin-top: 0.3rem;
        }

        .modern-form .privacy-check label {
            font-size: 0.9rem;
            color: #666;
            font-weight: normal;
            line-height: 1.5;
        }

        .modern-form .privacy-check a {
            color: #5FB134;
            text-decoration: none;
        }

        .modern-form .privacy-check a:hover {
            text-decoration: underline;
        }

        .modern-form .btn-primary {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .modern-form .btn-primary:hover {
            background: #4a8f2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
        }

        .modern-form .btn-primary i {
            font-size: 1.2rem;
        }

        /* Responsive */
        @media (max-width: 991.98px) {
            .contact-container {
                padding: 2rem;
            }

            .contact-info-wrapper {
                padding-right: 0;
                margin-bottom: 2rem;
            }

            .form-wrapper {
                padding-left: 0;
            }

            .contact-title,
            .form-title {
                font-size: 1.75rem;
            }
        }

        @media (max-width: 767.98px) {
            .contact-container {
                padding: 1.5rem;
            }

            .contact-item {
                padding: 0.75rem;
            }

            .modern-form .input-container input,
            .modern-form .input-container select,
            .modern-form .input-container textarea {
                font-size: 0.95rem;
            }
        }

        .contact-map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 15px;
            display: block;
        }

        /* Estilos de información de contacto */
        .contact-info-title {
            color: var(--primary-color);
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .contact-info-title i {
            font-size: 2rem;
            color: var(--primary-color);
        }

        .contact-info-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            border-radius: 15px;
            transition: all 0.3s ease;
            background: rgba(95, 177, 52, 0.05);
        }

        .contact-info-item:hover {
            background: rgba(95, 177, 52, 0.1);
            transform: translateX(5px);
        }

        .contact-info-item i {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-top: 0.2rem;
            min-width: 24px;
        }

        .contact-info-item div {
            flex: 1;
        }

        .contact-info-item strong {
            color: var(--text-primary);
            font-weight: 600;
            display: block;
            margin-bottom: 0.3rem;
        }

        .contact-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .contact-link:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        /* Captcha */
        .captcha-container {
            background: rgba(95, 177, 52, 0.05);
            border-radius: 12px;
            padding: 1rem;
            border: 2px solid rgba(95, 177, 52, 0.2);
        }

        .captcha-question {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 0.8rem;
            font-size: 1rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        .captcha-question i {
            font-size: 1.2rem;
            color: var(--primary-color);
        }

        /* Inputs más delgados y compactos */
        .modern-input,
        .modern-textarea,
        .modern-select {
            width: 100%;
            border: none;
            background: transparent;
            padding: 0.75rem 1rem 0.75rem 3rem;
            font-size: 0.95rem;
            color: #333;
            outline: none;
            transition: all 0.3s ease;
            height: 100%;
            text-align: left;
        }

        .modern-input::placeholder,
        .modern-textarea::placeholder {
            color: #6c757d;
            font-size: 0.9rem;
            text-align: left;
            opacity: 0.8;
        }

        .modern-textarea {
            height: 140px;
            resize: vertical;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .modern-select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1rem;
            padding-right: 3rem;
        }

        .modern-select:focus {
            box-shadow: none;
        }

        .modern-select option {
            background: white;
            color: #333;
            padding: 0.5rem;
        }

        /* Iconos de input */
        .input-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #5FB134;
            font-size: 1rem;
            z-index: 2;
            transition: all 0.2s ease;
            width: 20px;
            text-align: center;
        }

        .input-container.focused .input-icon {
            color: #5FB134;
        }

        /* Mensajes de error */
        .error-message {
            color: #dc3545;
            font-size: 0.8rem;
            margin-top: 0.25rem;
            display: none;
            animation: slideIn 0.2s ease;
            text-align: left;
            padding-left: 0;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

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

        /* Botón de envío mejorado */
        .btn-primary {
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            margin-top: 0.5rem;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: none;
            letter-spacing: normal;
        }

        .btn-primary:hover {
            background: #4a8f2a;
            transform: none;
            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
        }

        .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
        }

        /* Contenedor de captcha */
        .captcha-container {
            background: #f8f9fa;
            padding: 1rem;
            border: 1px solid #e0e0e0;
            margin-bottom: 1rem;
        }

        .captcha-question {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            font-weight: 500;
            color: #333;
        }

        .captcha-question i {
            font-size: 1rem;
            color: #5FB134;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .contact-form {
                padding: 2rem;
                margin: 5% 0;
            }

            .form-wrapper h3 {
                font-size: 1.5rem;
            }

            .form-wrapper p {
                font-size: 0.9rem;
            }

            .modern-input,
            .modern-textarea,
            .modern-select {
                font-size: 0.9rem;
            }

            .input-icon {
                font-size: 0.9rem;
            }
        }

        /* Footer mejorado */
        .footer {
            background: var(--dark-bg) !important;
            color: var(--white);
            padding: 3rem 0 1rem;
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--gradient-accent);
        }

        .link-empresa {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }

        .link-empresa:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        /* Efectos de scroll */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: var(--transition);
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animaciones adicionales */
        .slide-in-left {
            animation: slideInLeft 0.8s ease-out;
        }

        .slide-in-right {
            animation: slideInRight 0.8s ease-out;
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

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

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

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

        /* Efectos de hover para botones sociales */
        .btn-social {
            transition: var(--transition);
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-social:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: var(--shadow-strong);
        }

        /* Mejoras en el mapa */
        .responsive-iframe {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }

        .responsive-iframe iframe {
            border: none;
            width: 100%;
            height: 300px;
        }

        /* Efectos de partículas mejorados */
        #particles-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 0;
            background: transparent;
        }

        /* Utilidades adicionales */
        .text-gradient {
            background: var(--gradient-accent);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .bg-gradient {
            background: var(--gradient-primary);
        }

        .shadow-custom {
            box-shadow: var(--shadow-strong);
        }

        /* Efectos de carga */
        .loading {
            position: relative;
            overflow: hidden;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        .mt-100 {
            margin-top: 100px !important;
        }

        .border-left-green {
            border-left: 4px solid #5FB134;
            font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-size: 16px;
        }

        .text-content-empresa {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            text-align: justify;
        }

        .empresa-content p {
            text-align: justify;
        }

        .image-container-pilares {
            text-align: center;
            margin: 2rem 0;
        }

        .image-container-pilares img {
            max-width: 160px;
            height: auto;
            border-radius: 10px;
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
        }

        .image-container-pilares:hover img {
            transform: scale(1.02);
            box-shadow: var(--shadow-strong);
        }

        /* Estilos para el contenedor de la imagen */
        .image-container {
            width: 400px;
            height: 400px;

            overflow: hidden;
            position: relative;

            margin-left: 10%;
            display: flex;
            /* Usa flexbox para centrar verticalmente */
            align-items: center;
            /* Centra verticalmente el contenido */
        }

        /* Estilos para la imagen */
        .image-container img {
            max-width: 160px;
            max-height: 100%;
            width: auto;
            height: auto;
            transition: transform 0.3s ease;
            /* Efecto de transición para hover */
        }

        .image-container:hover img {
            border: 2px solid #5FB134;
            /* Cambia al color y grosor de borde deseado */
        }

        .custom-card {
            width: 100% !important;
            /* Asegura que el card ocupe todo el ancho disponible */
            margin-bottom: 20px !important;
            /* Espacio entre las tarjetas */
        }

        .custom-card .card-body {
            position: relative !important;
            /* Para posicionar absolutamente la cabecera dentro del card */
        }

        .card-text-empresa {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-secondary);
            text-align: justify;
        }

        .card-title-empresa {
            background-color: #5FB134;
            color: #fff;
            padding: 5px;
            /* Opcional: agrega relleno para que se vea mejor */
            display: flex;
            /* Crea un contenedor flexible */
            justify-content: space-between;
            /* Espacio uniforme entre el texto y el icono */
            align-items: center;
            /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
        }

        .card-title-empresa i {
            margin-left: 5px;
            /* Agrega un margen izquierdo al icono para separarlo del texto */
        }

        .section {
            margin-bottom: 20px !important;
            /* Agrega margen inferior para separar las secciones */
        }

        .contacto {
            background-color: #5FB134;
        }

        /* Efectos de scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

        .reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* Efectos de carga para imágenes */
        img {
            transition: opacity 0.3s ease;
        }

        img.loaded {
            opacity: 1;
        }

        /* Animación de carga inicial */
        body {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.loaded {
            opacity: 1;
        }

        /* Mejoras en las pestañas */
        .nav-tabs .nav-link {
            border: none;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 12px 24px;
            border-radius: 25px;
            margin: 0 5px;
            transition: var(--transition);
        }

        .nav-tabs .nav-link.active {
            background: var(--gradient-accent);
            color: var(--white);
            box-shadow: var(--shadow-soft);
        }

        .nav-tabs .nav-link:hover {
            background: rgba(95, 177, 52, 0.1);
            color: var(--primary-color);
        }

        /* Efectos de hover para botones sociales mejorados */
        .btn-social:hover {
            background: var(--accent-color) !important;
            border-color: var(--accent-color) !important;
        }

        /* Efectos de hover para enlaces */
        a {
            transition: var(--transition);
        }

        a:hover {
            color: var(--primary-color);
        }

        /* Efectos de hover para iconos */
        .fas,
        .fab {
            transition: var(--transition);
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para el botón scroll to top */
        .scroll-to-top:hover {
            background: var(--accent-hover) !important;
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
        }

        /* Efectos de animación para elementos específicos */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        .fade-in-left {
            animation: fadeInLeft 0.8s ease-out;
        }

        .fade-in-right {
            animation: fadeInRight 0.8s ease-out;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        /* Efectos de hover para iconos */
        .fas,
        .fab {
            transition: var(--transition);
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para elementos de la empresa */
        .image-container-pilares:hover img {
            transform: scale(1.05);
            transition: var(--transition);
        }

        /* Mejoras en la navegación móvil */
        @media (max-width: 768px) {
            .navbar-nav {
                text-align: center;
            }

            .navbar-nav .nav-link {
                padding: 0.5rem 1rem;
            }

            .navbar-nav .nav-link:last-child {
                margin-bottom: 0;
            }

            .masthead-heading {
                font-size: 2.5rem;
            }

            .masthead-subheading {
                font-size: 1.1rem;
            }

            .border-left-green-title {
                font-size: 2.5rem;
            }

            .full-width-section {
                padding: 2rem 0;
            }

            #page-empresa {
                padding: 2rem 0;
            }

            .service-highlights {
                flex-direction: column;
                gap: 1rem;
                justify-content: flex-start;
                padding-left: 1rem;
            }

            .service-highlight {
                font-size: 0.9rem;
                padding: 0.5rem 1rem;
            }

            .side-nav-control {
                display: none;
            }

            .nav-dot {
                width: 12px;
                height: 12px;
            }
        }

        @media (max-width: 992px) {
            .masthead {
                padding: 0 1rem;
            }

            .service-highlights {
                flex-wrap: wrap;
                justify-content: flex-start;
                gap: 1rem;
                padding-left: 1rem;
            }

            .navbar-brand img {
                max-height: 40px;
            }

            .nav-link {
                font-size: 1rem;
                padding: 0.5rem 1rem !important;
            }
        }

        @media (max-width: 576px) {
            .masthead-heading {
                font-size: 2rem;
            }

            .service-highlight {
                font-size: 0.8rem;
                padding: 0.4rem 0.8rem;
            }

            .btn-primary {
                font-size: 0.9rem;
                padding: 0.75rem 1.5rem;
            }

            .border-left-green-title {
                font-size: 2rem;
                padding-left: 1rem;
            }
        }

        /* Asegurar que todas las secciones ocupen 100% de altura */
        .page-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 80px;
        }

        /* Mejorar el espaciado del contenido en secciones */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* Efectos de hover mejorados para navegación */
        .navbar-nav .nav-link {
            position: relative;
            transition: all 0.3s ease;
            margin: 0 0.5rem;
        }

        .navbar-nav .nav-link:hover {
            transform: translateY(-2px);
        }

        .navbar-nav .nav-link.active {
            transform: translateY(-2px);
            font-weight: 700;
        }

        /* Efectos de parallax mejorados */
        .full-width-section::before {
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* Optimización para dispositivos móviles */
        @media (max-width: 768px) {
            .full-width-section::before {
                background-attachment: scroll;
            }

            .masthead::before {
                background-attachment: scroll;
            }
        }

        /* Botones mejorados con colores de Gradotech */
        .btn-primary {
            background: var(--gradient-accent);
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: var(--transition);
        }

        .btn-primary:hover::before {
            left: 100%;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-strong);
            background: var(--gradient-primary);
        }

        /* Servicios destacados en el header - COLOR VERDE */
        .service-highlights {
            display: flex;
            justify-content: flex-start;
            margin-top: 3rem;
            flex-wrap: wrap;
            gap: 1rem;
            padding-left: 0;
            align-items: flex-start;
        }

        .service-highlight {
            background: rgba(95, 177, 52, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(95, 177, 52, 0.3);
            border-radius: 15px;
            padding: 1rem 1.5rem;
            color: var(--white);
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
        }

        .service-highlight::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--white);
            transition: var(--transition);
        }

        .service-highlight:hover {
            background: rgba(95, 177, 52, 1);
            transform: translateY(-5px);
            border-color: var(--white);
            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
        }

        .service-highlight:hover::before {
            width: 100%;
            opacity: 0.3;
        }

        /* Efecto de brillo para los service highlights */
        .service-highlight::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent);
            transform: rotate(45deg);
            transition: all 0.6s ease;
            opacity: 0;
        }

        .service-highlight:hover::after {
            opacity: 1;
            transform: rotate(45deg) translate(50%, 50%);
        }

        /* Efectos de hover para iconos en service highlights */
        .service-highlight .fas,
        .service-highlight .fab {
            transition: var(--transition);
            margin-right: 0.5rem;
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para enlaces de contacto */
        .contact-form a:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        .contact-form i {
            color: var(--primary-color);
            width: 20px;
        }

        /* Efectos de hover para elementos de la empresa */
        .empresa-content:hover {
            transform: translateY(-2px);
            transition: var(--transition);
        }

        .image-container-pilares:hover img {
            transform: scale(1.05);
            transition: var(--transition);
        }

        /* Mejoras en la accesibilidad */
        .nav-link:focus,
        .btn:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

        /* Efectos de hover para elementos de partners */
        .partner-card:hover .card-text-empresa {
            color: var(--text-primary);
        }

        /* Efectos de scroll reveal adicionales */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        .fade-in-left {
            animation: fadeInLeft 0.8s ease-out;
        }

        .fade-in-right {
            animation: fadeInRight 0.8s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        /* Títulos elegantes con línea vertical al costado */
        .elegant-title {
            font-family: 'Roboto', sans-serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0;
            text-transform: none;
            letter-spacing: -0.5px;
            line-height: 1;
            position: relative;
            padding-left: 2rem;
            text-align: left;
        }

        .elegant-subtitle {
            font-family: 'Roboto', sans-serif;
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            margin-top: 0;
            text-transform: none;
            letter-spacing: 0.2px;
            line-height: 1.1;
            opacity: 0.8;
            text-align: left;
            padding-left: 2rem;
            position: relative;
        }

        /* Contenedor para título y subtítulo con línea vertical compartida */
        .title-container {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 2rem;
        }

        .title-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 1;
        }

        .title-container .elegant-title {
            padding-left: 0;
            margin-bottom: 0;
        }

        .title-container .elegant-subtitle {
            padding-left: 0;
            margin-bottom: 0;
            margin-top: 0;
        }

        /* Animación para los títulos elegantes */
        .elegant-title {
            opacity: 0;
            transform: translateY(30px);
            animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
        }

        .elegant-subtitle {
            opacity: 0;
            transform: translateY(20px);
            animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
        }

        @keyframes elegantTitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes elegantSubtitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Responsividad para títulos elegantes */
        @media (max-width: 768px) {
            .elegant-title {
                font-size: 2.5rem;
            }

            .elegant-subtitle {
                font-size: 1.1rem;
            }

            .title-container {
                padding-left: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .elegant-title {
                font-size: 2rem;
            }

            .elegant-subtitle {
                font-size: 1rem;
            }

            .title-container {
                padding-left: 1rem;
            }
        }

        /* Eliminar contornos de navegación */
        .navbar-nav .nav-link,
        .navbar-nav .nav-link:focus,
        .navbar-nav .nav-link:active,
        .navbar-nav .nav-link:hover {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
        }

        .navbar-nav .nav-link:focus-visible {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Estilos para la sección Nosotros */
        .about-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .about-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .about-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-icon i {
            font-size: 1.5rem;
            color: var(--white);
        }

        .about-card h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Tarjetas de Misión y Visión */
        .mission-vision-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .mission-vision-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .card-header-mv {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .card-header-mv i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-right: 1rem;
        }

        /* Variables CSS para la nueva paleta de colores de Gradotech */
        :root {
            --primary-color: #5FB134;
            /* Verde Gradotech */
            --secondary-color: #4a8f2a;
            /* Verde más oscuro */
            --accent-color: #5FB134;
            /* Verde Gradotech */
            --accent-hover: #6bc23a;
            /* Verde hover más claro */
            --dark-bg: #1a1a1a;
            /* Fondo oscuro elegante */
            --light-bg: #f8f9fa;
            /* Fondo claro */
            --text-primary: #212121;
            /* Texto principal */
            --text-secondary: #757575;
            /* Texto secundario */
            --white: #ffffff;
            --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
            --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
            --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            /* Variables específicas para el formulario */
            --form-bg: #ffffff;
            --form-border: 1px solid rgba(0, 0, 0, 0.1);
            --form-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --form-radius: 12px;
            --input-bg: #f8f9fa;
            --input-border: 1px solid #e9ecef;
            --input-focus-border: var(--primary);
            --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
            --input-padding: 0.75rem 1rem;
            --input-radius: 8px;
            --label-color: #495057;
            --error-color: #dc3545;
            --success-color: #28a745;
        }

        /* Ocultar scrollbar hasta hacer scroll */
        html {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE and Edge */
        }

        html::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        html.scrolling {
            scrollbar-width: auto;
            -ms-overflow-style: auto;
        }

        html.scrolling::-webkit-scrollbar {
            display: block;
            width: 8px;
        }

        html.scrolling::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        html.scrolling::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        html.scrolling::-webkit-scrollbar-thumb:hover {
            background: var(--secondary-color);
        }

        body {
            font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.loaded {
            opacity: 1;
        }

        /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
        .navbar {
            background: #f8f9fa !important;
            backdrop-filter: blur(10px);
            transition: var(--transition);
            box-shadow: none;
        }

        .navbar.scrolled {
            background: rgba(26, 26, 26, 0.98) !important;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }

        .navbar-brand img {
            transition: var(--transition);
            max-height: 50px;
        }

        .navbar-brand:hover img {
            transform: scale(1.05);
        }

        .nav-link {
            position: relative;
            transition: var(--transition);
            font-weight: 500;
            color: var(--white) !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            font-size: 1.1rem;
            padding: 0.75rem 1.2rem !important;
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .nav-link:focus {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--white);
            transition: var(--transition);
            transform: translateX(-50%);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .nav-link:hover {
            color: var(--white) !important;
            opacity: 0.8;
        }

        .nav-link.active {
            color: var(--white) !important;
            font-weight: 600;
        }

        .nav-link.active::after {
            width: 100%;
            background: var(--white);
        }

        /* Header mejorado con colores de Gradotech */
        .masthead {
            background: var(--gradient-primary);
            position: relative;
            height: 100vh;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding-top: 0;
        }

        /* Efecto de ondas animadas */
        .masthead::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
            opacity: 0.3;
            animation: float 20s ease-in-out infinite;
        }

        /* Nuevo efecto de ondas animadas */
        .waves-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" opacity=".25" fill="%23ffffff"/></path></svg>');
            background-size: 1200px 100%;
            animation: wave 25s linear infinite;
        }

        .wave:nth-child(2) {
            bottom: 10%;
            animation: wave 20s linear infinite;
            opacity: 0.5;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
        }

        .wave:nth-child(3) {
            bottom: 20%;
            animation: wave 15s linear infinite;
            opacity: 0.2;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
        }

        @keyframes wave {
            0% {
                transform: translateX(0) translateZ(0) scaleY(1);
            }

            50% {
                transform: translateX(-25%) translateZ(0) scaleY(0.8);
            }

            100% {
                transform: translateX(-50%) translateZ(0) scaleY(1);
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(180deg);
            }
        }

        .masthead .container {
            position: relative;
            z-index: 10;
            text-align: left;
            padding-left: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .masthead-heading {
            font-size: 4.5rem;
            font-weight: 800;
            color: var(--white);
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            margin-bottom: 1.5rem;
            letter-spacing: -1px;
            line-height: 1.1;
            text-transform: uppercase;
            opacity: 0;
            transform: translateY(30px);
            animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
            text-align: left;
        }

        .masthead-subheading {
            font-size: 2rem;
            color: var(--white) !important;
            margin-bottom: 2.5rem;
            opacity: 0.9;
            font-weight: 300;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transform: translateY(30px);
            animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
            text-align: left;
        }

        @keyframes elegantFadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        /* Secciones que ocupan 100% de altura con efecto parallax */
        .full-width-section {
            min-height: 100vh;
            padding: 80px 0;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .full-width-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.05;
            z-index: -1;
            transform: translateZ(0);
        }

        .full-width-section:nth-child(even) {
            background: var(--light-bg);
        }

        .full-width-section:nth-child(even)::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        }

        .full-width-section:nth-child(odd)::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
        }

        /* Sección empresa específica - 100% altura */
        #page-empresa {
            min-height: 100vh;
            height: auto;
            padding: 120px 0 80px 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
            background: var(--white);
        }

        .empresa-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* Títulos de sección mejorados */
        .border-left-green-title {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--text-primary);
            position: relative;
            padding-left: 2rem;
            margin-bottom: 3rem;
            text-transform: uppercase;
            letter-spacing: -1px;
        }

        .border-left-green-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
        }

        /* Carrusel horizontal de alianzas */
        .alliances-carousel {
            position: relative;
            height: 220px;
            overflow: hidden;
            background: transparent;
            border-radius: 20px;
            padding: 2rem;
            margin: 2rem 0;
        }

        .alliances-track {
            display: flex;
            animation: scrollHorizontal 60s linear infinite;
            gap: 4rem;
            align-items: center;
            padding: 1rem 0;
            width: max-content;
            will-change: transform;
        }

        .alliances-track:hover {
            animation-play-state: paused;
        }

        .alliance-item {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 200px;
            height: 140px;
            padding: 1.5rem;
            background: transparent;
            border-radius: 15px;
            transition: var(--transition);
            flex-shrink: 0;
            position: relative;
        }

        .alliance-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            opacity: 0;
        }

        .alliance-item:hover::before {
            opacity: 1;
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(95, 177, 52, 0.3);
        }

        .alliance-item:hover {
            transform: scale(1.05);
        }

        .alliance-item img {
            max-width: 160px;
            max-height: 90px;
            object-fit: contain;
            /* filter: grayscale(100%) brightness(0.9); */
            transition: var(--transition);
            position: relative;
            z-index: 1;
        }

        .alliance-item:hover img {
            /* filter: grayscale(0%) brightness(1.1); */
            transform: scale(1.1);
        }

        @keyframes scrollHorizontal {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-33.333% * 3));
            }
        }

        /* Controles del carrusel horizontal - OCULTOS */
        .carousel-controls {
            display: none !important;
        }

        .carousel-btn {
            display: none !important;
        }

        .carousel-btn:hover {
            display: none !important;
        }

        .carousel-btn:disabled {
            display: none !important;
        }

        /* Control de navegación lateral como Black-up - OCULTO */
        .side-nav-control {
            display: none !important;
        }

        .nav-dot {
            display: none !important;
        }

        .nav-dot:hover,
        .nav-dot.active {
            display: none !important;
        }

        .nav-dot-label {
            display: none !important;
        }

        .nav-dot:hover .nav-dot-label {
            display: none !important;
        }

        /* Efectos de scroll mejorados */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        .scroll-reveal.from-left {
            transform: translateX(-50px);
        }

        .scroll-reveal.from-right {
            transform: translateX(50px);
        }

        .scroll-reveal.from-bottom {
            transform: translateY(50px);
        }

        .scroll-reveal.scale-in {
            transform: scale(0.8);
        }

        /* Responsive para el carrusel horizontal */
        @media (max-width: 768px) {
            .alliances-carousel {
                height: 150px;
                padding: 1rem;
                margin: 1rem 0;
            }

            .alliance-item {
                min-width: 120px;
                height: 80px;
                padding: 1rem;
            }

            .alliance-item img {
                max-height: 50px;
            }

            .carousel-controls {
                display: none !important;
            }

            .carousel-btn {
                display: none !important;
            }

            .masthead-heading {
                font-size: 2.5rem;
            }

            .masthead-subheading {
                font-size: 1.3rem;
            }

            .side-nav-control {
                display: none !important;
            }

            .nav-dot {
                display: none !important;
            }
        }

        /* Cards de servicios mejorados */
        .card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--shadow-soft);
            background: var(--white);
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-strong);
        }

        .card-img-top {
            transition: var(--transition);
            height: 250px;
            object-fit: cover;
        }

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

        .card-body {
            padding: 2rem;
        }

        .card-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .card-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        /* Efectos de imagen mejorados */
        .img-grayscale {
            filter: grayscale(100%);
            transition: var(--transition);
        }

        .img-grayscale:hover {
            /* filter: grayscale(0%) brightness(1.1); */
        }

        /* Sección de clientes */
        .client-logo {
            transition: var(--transition);
            filter: grayscale(100%);
            opacity: 0.7;
        }

        .client-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
            box-shadow: var(--shadow-strong);
            border-color: var(--primary-color);
        }

        /* Sección de partners */
        .partner-card {
            background: var(--white);
            border-radius: 15px;
            padding: 2rem;
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .partner-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-strong);
            border-color: var(--primary-color);
        }

        .partner-card img {
            transition: var(--transition);
            filter: grayscale(100%);
        }

        .partner-card:hover img {
            filter: grayscale(0%);
            transform: scale(1.05);
        }

        /* Estilos modernos para el formulario de contacto */
        .contact-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin: 2rem 0;
            border: 1px solid rgba(95, 177, 52, 0.1);
        }

        .contact-info-wrapper {
            background: linear-gradient(135deg, #5FB134 0%, #4a8f2a 100%);
            color: white;
            padding: 3rem 2rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            border-radius: 20px 0 0 20px;
        }

        .contact-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: white;
        }

        .contact-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        .contact-details {
            margin-bottom: 2rem;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .contact-item:hover {
            transform: translateX(5px);
            background: rgba(255, 255, 255, 0.15);
        }

        .contact-item i {
            font-size: 1.5rem;
            margin-right: 1rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .contact-item h5 {
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
            color: white;
        }

        .contact-item p {
            margin: 0;
            opacity: 0.9;
            font-size: 0.95rem;
        }

        .social-links {
            margin-top: auto;
            display: flex;
            gap: 1rem;
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: white;
            color: #5FB134;
            transform: translateY(-3px);
        }

        .form-wrapper {
            padding: 3rem 2rem;
            background: white;
            border-radius: 0 20px 20px 0;
        }

        .form-title {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 1rem;
        }

        .form-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .modern-form .form-group {
            margin-bottom: 1.5rem;
        }

        .modern-form label {
            display: block;
            color: #333;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .modern-form .input-container {
            position: relative;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .modern-form .input-container:hover,
        .modern-form .input-container:focus-within {
            border-color: #5FB134;
            background: white;
            box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.1);
        }

        .modern-form .input-container input,
        .modern-form .input-container select,
        .modern-form .input-container textarea {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 3rem;
            border: none;
            background: transparent;
            font-size: 1rem;
            color: #333;
            outline: none;
        }

        .modern-form .input-container textarea {
            min-height: 140px;
            resize: vertical;
        }

        .modern-form .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #5FB134;
            font-size: 1.1rem;
        }

        .modern-form .input-container textarea+.input-icon {
            top: 1rem;
            transform: none;
        }

        .modern-form .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }

        .modern-form .privacy-check {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-top: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .modern-form .privacy-check input[type="checkbox"] {
            margin-top: 0.3rem;
        }

        .modern-form .privacy-check label {
            font-size: 0.9rem;
            color: #666;
            font-weight: normal;
            line-height: 1.5;
        }

        .modern-form .privacy-check a {
            color: #5FB134;
            text-decoration: none;
        }

        .modern-form .privacy-check a:hover {
            text-decoration: underline;
        }

        .modern-form .btn-primary {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
        }

        .modern-form .btn-primary:hover {
            background: #4a8f2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
        }

        .modern-form .btn-primary i {
            font-size: 1.2rem;
        }

        /* Responsive */
        @media (max-width: 991.98px) {
            .contact-container {
                padding: 2rem;
            }

            .contact-info-wrapper {
                border-radius: 20px 20px 0 0;
                margin-bottom: 2rem;
            }

            .form-wrapper {
                border-radius: 0 0 20px 20px;
                padding: 2rem;
            }
        }

        @media (max-width: 767.98px) {
            .contact-container {
                padding: 1.5rem;
            }

            .contact-title,
            .form-title {
                font-size: 1.75rem;
            }

            .contact-item {
                padding: 0.75rem;
            }

            .modern-form .input-container input,
            .modern-form .input-container select,
            .modern-form .input-container textarea {
                font-size: 0.95rem;
            }
        }

        /* Mensajes de error */
        .error-message {
            color: var(--error-color);
            font-size: 0.8rem;
            margin-top: 0.25rem;
            display: none;
            animation: slideIn 0.2s ease;
            text-align: left;
            padding-left: 0;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

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

        /* Botón de envío mejorado */
        .btn-primary {
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            margin-top: 0.5rem;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: none;
            letter-spacing: normal;
        }

        .btn-primary:hover {
            background: #4a8f2a;
            transform: none;
            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
        }

        .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
        }

        /* Contenedor de captcha */
        .captcha-container {
            background: #f8f9fa;
            padding: 1rem;
            border: 1px solid #e0e0e0;
            margin-bottom: 1rem;
        }

        .captcha-question {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            font-weight: 500;
            color: #333;
        }

        .captcha-question i {
            font-size: 1rem;
            color: #5FB134;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .contact-form {
                padding: 2rem;
                margin: 5% 0;
            }

            .form-wrapper h3 {
                font-size: 1.5rem;
            }

            .form-wrapper p {
                font-size: 0.9rem;
            }

            .modern-input,
            .modern-textarea,
            .modern-select {
                font-size: 0.9rem;
            }

            .input-icon {
                font-size: 0.9rem;
            }
        }

        /* Footer mejorado */
        .footer {
            background: var(--dark-bg) !important;
            color: var(--white);
            padding: 3rem 0 1rem;
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--gradient-accent);
        }

        .link-empresa {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }

        .link-empresa:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        /* Efectos de scroll */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: var(--transition);
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animaciones adicionales */
        .slide-in-left {
            animation: slideInLeft 0.8s ease-out;
        }

        .slide-in-right {
            animation: slideInRight 0.8s ease-out;
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

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

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

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

        /* Efectos de hover para botones sociales */
        .btn-social {
            transition: var(--transition);
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-social:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: var(--shadow-strong);
        }

        /* Mejoras en el mapa */
        .responsive-iframe {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }

        .responsive-iframe iframe {
            border: none;
            width: 100%;
            height: 300px;
        }

        /* Efectos de partículas mejorados */
        #particles-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 0;
            background: transparent;
        }

        /* Utilidades adicionales */
        .text-gradient {
            background: var(--gradient-accent);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .bg-gradient {
            background: var(--gradient-primary);
        }

        .shadow-custom {
            box-shadow: var(--shadow-strong);
        }

        /* Efectos de carga */
        .loading {
            position: relative;
            overflow: hidden;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        .mt-100 {
            margin-top: 100px !important;
        }

        .border-left-green {
            border-left: 4px solid #5FB134;
            font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-size: 16px;
        }

        .text-content-empresa {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            text-align: justify;
        }

        .empresa-content p {
            text-align: justify;
        }

        .image-container-pilares {
            text-align: center;
            margin: 2rem 0;
        }

        .image-container-pilares img {
            max-width: 160px;
            height: auto;
            border-radius: 10px;
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
        }

        .image-container-pilares:hover img {
            transform: scale(1.02);
            box-shadow: var(--shadow-strong);
        }

        /* Estilos para el contenedor de la imagen */
        .image-container {
            width: 400px;
            height: 400px;

            overflow: hidden;
            position: relative;

            margin-left: 10%;
            display: flex;
            /* Usa flexbox para centrar verticalmente */
            align-items: center;
            /* Centra verticalmente el contenido */
        }

        /* Estilos para la imagen */
        .image-container img {
            max-width: 160px;
            max-height: 100%;
            width: auto;
            height: auto;
            transition: transform 0.3s ease;
            /* Efecto de transición para hover */
        }

        .image-container:hover img {
            border: 2px solid #5FB134;
            /* Cambia al color y grosor de borde deseado */
        }

        .custom-card {
            width: 100% !important;
            /* Asegura que el card ocupe todo el ancho disponible */
            margin-bottom: 20px !important;
            /* Espacio entre las tarjetas */
        }

        .custom-card .card-body {
            position: relative !important;
            /* Para posicionar absolutamente la cabecera dentro del card */
        }

        .card-text-empresa {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-secondary);
            text-align: justify;
        }

        .card-title-empresa {
            background-color: #5FB134;
            color: #fff;
            padding: 5px;
            /* Opcional: agrega relleno para que se vea mejor */
            display: flex;
            /* Crea un contenedor flexible */
            justify-content: space-between;
            /* Espacio uniforme entre el texto y el icono */
            align-items: center;
            /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
        }

        .card-title-empresa i {
            margin-left: 5px;
            /* Agrega un margen izquierdo al icono para separarlo del texto */
        }

        .section {
            margin-bottom: 20px !important;
            /* Agrega margen inferior para separar las secciones */
        }

        .contacto {
            background-color: #5FB134;
        }

        /* Efectos de scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

        .reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* Efectos de carga para imágenes */
        img {
            transition: opacity 0.3s ease;
        }

        img.loaded {
            opacity: 1;
        }

        /* Animación de carga inicial */
        body {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.loaded {
            opacity: 1;
        }

        /* Mejoras en las pestañas */
        .nav-tabs .nav-link {
            border: none;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 12px 24px;
            border-radius: 25px;
            margin: 0 5px;
            transition: var(--transition);
        }

        .nav-tabs .nav-link.active {
            background: var(--gradient-accent);
            color: var(--white);
            box-shadow: var(--shadow-soft);
        }

        .nav-tabs .nav-link:hover {
            background: rgba(95, 177, 52, 0.1);
            color: var(--primary-color);
        }

        /* Efectos de hover para botones sociales mejorados */
        .btn-social:hover {
            background: var(--accent-color) !important;
            border-color: var(--accent-color) !important;
        }

        /* Efectos de hover para enlaces */
        a {
            transition: var(--transition);
        }

        a:hover {
            color: var(--primary-color);
        }

        /* Efectos de hover para iconos */
        .fas,
        .fab {
            transition: var(--transition);
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para el botón scroll to top */
        .scroll-to-top:hover {
            background: var(--accent-hover) !important;
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
        }

        /* Efectos de animación para elementos específicos */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        .fade-in-left {
            animation: fadeInLeft 0.8s ease-out;
        }

        .fade-in-right {
            animation: fadeInRight 0.8s ease-out;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        /* Efectos de hover para iconos */
        .fas,
        .fab {
            transition: var(--transition);
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para elementos de la empresa */
        .image-container-pilares:hover img {
            transform: scale(1.05);
            transition: var(--transition);
        }

        /* Mejoras en la navegación móvil */
        @media (max-width: 768px) {
            .navbar-nav {
                text-align: center;
            }

            .navbar-nav .nav-link {
                padding: 0.5rem 1rem;
            }

            .navbar-nav .nav-link:last-child {
                margin-bottom: 0;
            }

            .masthead-heading {
                font-size: 2.5rem;
            }

            .masthead-subheading {
                font-size: 1.1rem;
            }

            .border-left-green-title {
                font-size: 2.5rem;
            }

            .full-width-section {
                padding: 2rem 0;
            }

            #page-empresa {
                padding: 2rem 0;
            }

            .service-highlights {
                flex-direction: column;
                gap: 1rem;
                justify-content: flex-start;
                padding-left: 1rem;
            }

            .service-highlight {
                font-size: 0.9rem;
                padding: 0.5rem 1rem;
            }

            .side-nav-control {
                display: none;
            }

            .nav-dot {
                width: 12px;
                height: 12px;
            }
        }

        @media (max-width: 992px) {
            .masthead {
                padding: 0 1rem;
            }

            .service-highlights {
                flex-wrap: wrap;
                justify-content: flex-start;
                gap: 1rem;
                padding-left: 1rem;
            }

            .navbar-brand img {
                max-height: 40px;
            }

            .nav-link {
                font-size: 1rem;
                padding: 0.5rem 1rem !important;
            }
        }

        @media (max-width: 576px) {
            .masthead-heading {
                font-size: 2rem;
            }

            .service-highlight {
                font-size: 0.8rem;
                padding: 0.4rem 0.8rem;
            }

            .btn-primary {
                font-size: 0.9rem;
                padding: 0.75rem 1.5rem;
            }

            .border-left-green-title {
                font-size: 2rem;
                padding-left: 1rem;
            }
        }

        /* Asegurar que todas las secciones ocupen 100% de altura */
        .page-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 80px;
        }

        /* Mejorar el espaciado del contenido en secciones */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* Efectos de hover mejorados para navegación */
        .navbar-nav .nav-link {
            position: relative;
            transition: all 0.3s ease;
            margin: 0 0.5rem;
        }

        .navbar-nav .nav-link:hover {
            transform: translateY(-2px);
        }

        .navbar-nav .nav-link.active {
            transform: translateY(-2px);
            font-weight: 700;
        }

        /* Efectos de parallax mejorados */
        .full-width-section::before {
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* Optimización para dispositivos móviles */
        @media (max-width: 768px) {
            .full-width-section::before {
                background-attachment: scroll;
            }

            .masthead::before {
                background-attachment: scroll;
            }
        }

        /* Botones mejorados con colores de Gradotech */
        .btn-primary {
            background: var(--gradient-accent);
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: var(--transition);
        }

        .btn-primary:hover::before {
            left: 100%;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-strong);
            background: var(--gradient-primary);
        }

        /* Servicios destacados en el header - COLOR VERDE */
        .service-highlights {
            display: flex;
            justify-content: flex-start;
            margin-top: 3rem;
            flex-wrap: wrap;
            gap: 1rem;
            padding-left: 0;
            align-items: flex-start;
        }

        .service-highlight {
            background: rgba(95, 177, 52, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(95, 177, 52, 0.3);
            border-radius: 15px;
            padding: 1rem 1.5rem;
            color: var(--white);
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
        }

        .service-highlight::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--white);
            transition: var(--transition);
        }

        .service-highlight:hover {
            background: rgba(95, 177, 52, 1);
            transform: translateY(-5px);
            border-color: var(--white);
            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
        }

        .service-highlight:hover::before {
            width: 100%;
            opacity: 0.3;
        }

        /* Efecto de brillo para los service highlights */
        .service-highlight::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent);
            transform: rotate(45deg);
            transition: all 0.6s ease;
            opacity: 0;
        }

        .service-highlight:hover::after {
            opacity: 1;
            transform: rotate(45deg) translate(50%, 50%);
        }

        /* Efectos de hover para iconos en service highlights */
        .service-highlight .fas,
        .service-highlight .fab {
            transition: var(--transition);
            margin-right: 0.5rem;
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para enlaces de contacto */
        .contact-form a:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        .contact-form i {
            color: var(--primary-color);
            width: 20px;
        }

        /* Efectos de hover para elementos de la empresa */
        .empresa-content:hover {
            transform: translateY(-2px);
            transition: var(--transition);
        }

        .image-container-pilares:hover img {
            transform: scale(1.05);
            transition: var(--transition);
        }

        /* Mejoras en la accesibilidad */
        .nav-link:focus,
        .btn:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

        /* Efectos de hover para elementos de partners */
        .partner-card:hover .card-text-empresa {
            color: var(--text-primary);
        }

        /* Efectos de scroll reveal adicionales */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        .fade-in-left {
            animation: fadeInLeft 0.8s ease-out;
        }

        .fade-in-right {
            animation: fadeInRight 0.8s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        /* Títulos elegantes con línea vertical al costado */
        .elegant-title {
            font-family: 'Roboto', sans-serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0;
            text-transform: none;
            letter-spacing: -0.5px;
            line-height: 1;
            position: relative;
            padding-left: 2rem;
            text-align: left;
        }

        .elegant-subtitle {
            font-family: 'Roboto', sans-serif;
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            margin-top: 0;
            text-transform: none;
            letter-spacing: 0.2px;
            line-height: 1.1;
            opacity: 0.8;
            text-align: left;
            padding-left: 2rem;
            position: relative;
        }

        /* Contenedor para título y subtítulo con línea vertical compartida */
        .title-container {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 2rem;
        }

        .title-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 1;
        }

        .title-container .elegant-title {
            padding-left: 0;
            margin-bottom: 0;
        }

        .title-container .elegant-subtitle {
            padding-left: 0;
            margin-bottom: 0;
            margin-top: 0;
        }

        /* Animación para los títulos elegantes */
        .elegant-title {
            opacity: 0;
            transform: translateY(30px);
            animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
        }

        .elegant-subtitle {
            opacity: 0;
            transform: translateY(20px);
            animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
        }

        @keyframes elegantTitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes elegantSubtitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Responsividad para títulos elegantes */
        @media (max-width: 768px) {
            .elegant-title {
                font-size: 2.5rem;
            }

            .elegant-subtitle {
                font-size: 1.1rem;
            }

            .title-container {
                padding-left: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .elegant-title {
                font-size: 2rem;
            }

            .elegant-subtitle {
                font-size: 1rem;
            }

            .title-container {
                padding-left: 1rem;
            }
        }

        /* Eliminar contornos de navegación */
        .navbar-nav .nav-link,
        .navbar-nav .nav-link:focus,
        .navbar-nav .nav-link:active,
        .navbar-nav .nav-link:hover {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
        }

        .navbar-nav .nav-link:focus-visible {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Estilos para la sección Nosotros */
        .about-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .about-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .about-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-icon i {
            font-size: 1.5rem;
            color: var(--white);
        }

        .about-card h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Tarjetas de Misión y Visión */
        .mission-vision-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .mission-vision-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .card-header-mv {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .card-header-mv i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-right: 1rem;
        }

        .card-header-mv h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin: 0;
            font-size: 1.5rem;
        }

        .mission-vision-card p {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Responsive para la sección Nosotros */
        @media (max-width: 768px) {

            .about-card,
            .mission-vision-card {
                padding: 2rem;
            }

            .about-icon {
                width: 50px;
                height: 50px;
            }

            .about-icon i {
                font-size: 1.2rem;
            }
        }

        /* Grid moderno para servicios */
        .services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2.5rem 2rem;
            justify-content: center;
        }

        .service-modern-card {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 2rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(95, 177, 52, 0.15);
            padding: 2.5rem 2rem 2rem 2rem;
            text-align: center;
            transition: box-shadow 0.3s, transform 0.3s;
            min-height: 420px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .service-modern-card:hover {
            box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
            transform: translateY(-6px) scale(1.03);
        }

        .service-icon {
            background: var(--gradient-primary);
            border-radius: 50%;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
        }

        .service-icon i {
            color: #fff;
            font-size: 2.5rem;
        }

        .service-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1rem;
            margin-top: 0.5rem;
        }

        .service-desc {
            color: var(--text-secondary);
            font-size: 1.08rem;
            margin-bottom: 2rem;
            flex-grow: 1;
        }

        .btn-modern {
            background: var(--gradient-primary);
            color: #fff;
            border: none;
            border-radius: 2rem;
            padding: 0.7rem 2.2rem;
            font-weight: 600;
            font-size: 1.08rem;
            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
            transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
            position: relative;
            overflow: hidden;
        }

        .btn-modern:hover {
            background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
            color: #fff;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
            transform: scale(1.05);
        }

        @media (max-width: 992px) {
            .service-modern-card {
                min-height: 380px;
                padding: 2rem 1.2rem 1.5rem 1.2rem;
            }

            .service-icon {
                width: 65px;
                height: 65px;
            }

            .service-icon i {
                font-size: 2rem;
            }
        }

        @media (max-width: 768px) {
            .services-grid {
                gap: 1.5rem 0.5rem;
            }

            .service-modern-card {
                min-height: 320px;
                padding: 1.5rem 0.7rem 1.2rem 0.7rem;
            }

            .service-title {
                font-size: 1.1rem;
            }

            .service-desc {
                font-size: 0.98rem;
            }

            .btn-modern {
                font-size: 0.98rem;
                padding: 0.6rem 1.5rem;
            }
        }

        /* Cards modernas para servicios con imágenes en colores */
        .service-card-modern {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
        }

        .service-card-modern:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
            border-color: var(--primary-color);
        }

        .service-image-container {
            position: relative;
            overflow: hidden;
            height: 250px;
        }

        .service-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            filter: brightness(0.9) contrast(1.1);
        }

        .service-card-modern:hover .service-image {
            transform: scale(1.05);
            filter: brightness(1) contrast(1.2);
        }

        .service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .service-card-modern:hover .service-overlay {
            opacity: 1;
        }

        .service-icon-overlay {
            font-size: 4rem;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            transform: scale(0.8);
            transition: transform 0.2s ease;
        }

        .service-card-modern:hover .service-icon-overlay {
            transform: scale(1);
        }

        .service-content {
            padding: 2rem;
            position: relative;
        }

        .service-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 2rem;
            right: 2rem;
            height: 3px;
            background: var(--gradient-primary);
            transform: scaleX(0);
            transition: transform 0.2s ease;
        }

        .service-card-modern:hover .service-content::before {
            transform: scaleX(1);
        }

        .service-title-modern {
            color: var(--primary-color);
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .service-text-modern {
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 1.5rem;
            font-size: 1rem;
        }

        .btn-service-modern {
            background: var(--gradient-primary);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 0.8rem 2rem;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
        }

        .btn-service-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.3s ease;
        }

        .btn-service-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
        }

        .btn-service-modern:hover::before {
            left: 100%;
        }

        /* Responsive para servicios modernos */
        @media (max-width: 768px) {
            .service-image-container {
                height: 220px;
            }

            .service-content {
                padding: 1.5rem;
            }

            .service-title-modern {
                font-size: 1.3rem;
            }

            .service-text-modern {
                font-size: 0.95rem;
            }

            .service-icon-overlay {
                font-size: 3rem;
            }
        }

        /* Selector de idioma */
        .language-selector {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 9999 !important;
            background: rgba(95, 177, 52, 0.9);
            backdrop-filter: blur(8px);
            border-radius: 20px;
            padding: 6px;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
            transition: all 0.3s ease;
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .language-btn {
            background: transparent;
            border: none;
            padding: 6px 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .language-btn.active {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-weight: 700;
        }

        .language-btn:hover:not(.active) {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            transform: scale(1.05);
        }

        /* Estilos del formulario de contacto moderno */
        .contact-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin: 2rem 0;
            border: 1px solid rgba(95, 177, 52, 0.1);
        }

        .contact-info-wrapper {
            background: linear-gradient(135deg, #5FB134 0%, #4a8f2a 100%);
            color: white;
            padding: 3rem 2rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            border-radius: 20px 0 0 20px;
        }

        .contact-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: white;
        }

        .contact-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        .contact-details {
            margin-bottom: 2rem;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .contact-item:hover {
            transform: translateX(5px);
            background: rgba(255, 255, 255, 0.15);
        }

        .contact-item i {
            font-size: 1.5rem;
            margin-right: 1rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .contact-item h5 {
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
            color: white;
        }

        .contact-item p {
            margin: 0;
            opacity: 0.9;
            font-size: 0.95rem;
        }

        .social-links {
            margin-top: auto;
            display: flex;
            gap: 1rem;
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: white;
            color: #5FB134;
            transform: translateY(-3px);
        }

        .form-wrapper {
            padding: 3rem 2rem;
            background: white;
            border-radius: 0 20px 20px 0;
        }

        .form-title {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 1rem;
        }

        .form-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .modern-form .form-group {
            margin-bottom: 1.5rem;
        }

        .modern-form label {
            display: block;
            color: #333;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .modern-form .input-container {
            position: relative;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .modern-form .input-container:hover,
        .modern-form .input-container:focus-within {
            border-color: #5FB134;
            background: white;
            box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.1);
        }

        .modern-form .input-container input,
        .modern-form .input-container select,
        .modern-form .input-container textarea {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 3rem;
            border: none;
            background: transparent;
            font-size: 1rem;
            color: #333;
            outline: none;
        }

        .modern-form .input-container textarea {
            min-height: 140px;
            resize: vertical;
        }

        .modern-form .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #5FB134;
            font-size: 1.1rem;
        }

        .modern-form .input-container textarea+.input-icon {
            top: 1rem;
            transform: none;
        }

        .modern-form .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }

        .modern-form .privacy-check {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-top: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .modern-form .privacy-check input[type="checkbox"] {
            margin-top: 0.3rem;
        }

        .modern-form .privacy-check label {
            font-size: 0.9rem;
            color: #666;
            font-weight: normal;
            line-height: 1.5;
        }

        .modern-form .privacy-check a {
            color: #5FB134;
            text-decoration: none;
        }

        .modern-form .privacy-check a:hover {
            text-decoration: underline;
        }

        .modern-form .btn-primary {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
        }

        .modern-form .btn-primary:hover {
            background: #4a8f2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
        }

        .modern-form .btn-primary i {
            font-size: 1.2rem;
        }

        /* Responsive */
        @media (max-width: 991.98px) {
            .contact-container {
                padding: 2rem;
            }

            .contact-info-wrapper {
                border-radius: 20px 20px 0 0;
                margin-bottom: 2rem;
            }

            .form-wrapper {
                border-radius: 0 0 20px 20px;
                padding: 2rem;
            }
        }

        @media (max-width: 767.98px) {
            .contact-container {
                padding: 1.5rem;
            }

            .contact-title,
            .form-title {
                font-size: 1.75rem;
            }

            .contact-item {
                padding: 0.75rem;
            }

            .modern-form .input-container input,
            .modern-form .input-container select,
            .modern-form .input-container textarea {
                font-size: 0.95rem;
            }
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: #4a8f2a;
            transform: translateY(-3px);
            color: white;
        }

        /* Estilos para el formulario */
        .form-wrapper {
            padding-left: 2rem;
        }

        .form-title {
            color: #333;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .form-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .modern-form .form-group {
            margin-bottom: 1.5rem;
        }

        .modern-form label {
            display: block;
            color: #333;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .modern-form .input-container {
            position: relative;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .modern-form .input-container:hover,
        .modern-form .input-container:focus-within {
            border-color: #5FB134;
            background: white;
        }

        .modern-form .input-container input,
        .modern-form .input-container select,
        .modern-form .input-container textarea {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 3rem;
            border: none;
            background: transparent;
            font-size: 1rem;
            color: #333;
            outline: none;
        }

        .modern-form .input-container textarea {
            min-height: 140px;
            resize: vertical;
        }

        .modern-form .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #5FB134;
            font-size: 1.1rem;
        }

        .modern-form .input-container textarea+.input-icon {
            top: 1rem;
            transform: none;
        }

        .modern-form .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }

        .modern-form .privacy-check {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-top: 1rem;
        }

        .modern-form .privacy-check input[type="checkbox"] {
            margin-top: 0.3rem;
        }

        .modern-form .privacy-check label {
            font-size: 0.9rem;
            color: #666;
            font-weight: normal;
            line-height: 1.5;
        }

        .modern-form .privacy-check a {
            color: #5FB134;
            text-decoration: none;
        }

        .modern-form .privacy-check a:hover {
            text-decoration: underline;
        }

        .modern-form .btn-primary {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .modern-form .btn-primary:hover {
            background: #4a8f2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
        }

        .modern-form .btn-primary i {
            font-size: 1.2rem;
        }

        /* Responsive */
        @media (max-width: 991.98px) {
            .contact-container {
                padding: 2rem;
            }

            .contact-info-wrapper {
                padding-right: 0;
                margin-bottom: 2rem;
            }

            .form-wrapper {
                padding-left: 0;
            }

            .contact-title,
            .form-title {
                font-size: 1.75rem;
            }
        }

        @media (max-width: 767.98px) {
            .contact-container {
                padding: 1.5rem;
            }

            .contact-item {
                padding: 0.75rem;
            }

            .modern-form .input-container input,
            .modern-form .input-container select,
            .modern-form .input-container textarea {
                font-size: 0.95rem;
            }
        }

        /* Títulos elegantes con línea vertical al costado */
        .elegant-title {
            font-family: 'Roboto', sans-serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0;
            text-transform: none;
            letter-spacing: -0.5px;
            line-height: 1;
            position: relative;
            padding-left: 2rem;
            text-align: left;
        }

        .elegant-subtitle {
            font-family: 'Roboto', sans-serif;
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            margin-top: 0;
            text-transform: none;
            letter-spacing: 0.2px;
            line-height: 1.1;
            opacity: 0.8;
            text-align: left;
            padding-left: 2rem;
            position: relative;
        }

        /* Contenedor para título y subtítulo con línea vertical compartida */
        .title-container {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 2rem;
        }

        .title-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 1;
        }

        .title-container .elegant-title {
            padding-left: 0;
            margin-bottom: 0;
        }

        .title-container .elegant-subtitle {
            padding-left: 0;
            margin-bottom: 0;
            margin-top: 0;
        }

        /* Animación para los títulos elegantes */
        .elegant-title {
            opacity: 0;
            transform: translateY(30px);
            animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
        }

        .elegant-subtitle {
            opacity: 0;
            transform: translateY(20px);
            animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
        }

        @keyframes elegantTitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes elegantSubtitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Responsividad para títulos elegantes */
        @media (max-width: 768px) {
            .elegant-title {
                font-size: 2.5rem;
            }

            .elegant-subtitle {
                font-size: 1.1rem;
            }

            .title-container {
                padding-left: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .elegant-title {
                font-size: 2rem;
            }

            .elegant-subtitle {
                font-size: 1rem;
            }

            .title-container {
                padding-left: 1rem;
            }
        }

        /* Eliminar contornos de navegación */
        .navbar-nav .nav-link,
        .navbar-nav .nav-link:focus,
        .navbar-nav .nav-link:active,
        .navbar-nav .nav-link:hover {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
        }

        .navbar-nav .nav-link:focus-visible {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Estilos para la sección Nosotros */
        .about-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .about-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .about-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-icon i {
            font-size: 1.5rem;
            color: var(--white);
        }

        .about-card h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Variables CSS para la nueva paleta de colores de Gradotech */
        :root {
            --primary-color: #5FB134;
            /* Verde Gradotech */
            --secondary-color: #4a8f2a;
            /* Verde más oscuro */
            --accent-color: #5FB134;
            /* Verde Gradotech */
            --accent-hover: #6bc23a;
            /* Verde hover más claro */
            --dark-bg: #1a1a1a;
            /* Fondo oscuro elegante */
            --light-bg: #f8f9fa;
            /* Fondo claro */
            --text-primary: #212121;
            /* Texto principal */
            --text-secondary: #757575;
            /* Texto secundario */
            --white: #ffffff;
            --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
            --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
            --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            /* Variables específicas para el formulario */
            --form-bg: #ffffff;
            --form-border: 1px solid rgba(0, 0, 0, 0.1);
            --form-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --form-radius: 12px;
            --input-bg: #f8f9fa;
            --input-border: 1px solid #e9ecef;
            --input-focus-border: var(--primary);
            --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
            --input-padding: 0.75rem 1rem;
            --input-radius: 8px;
            --label-color: #495057;
            --error-color: #dc3545;
            --success-color: #28a745;
        }

        /* Ocultar scrollbar hasta hacer scroll */
        html {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE and Edge */
        }

        html::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari, Opera */
        }

        html.scrolling {
            scrollbar-width: auto;
            -ms-overflow-style: auto;
        }

        html.scrolling::-webkit-scrollbar {
            display: block;
            width: 8px;
        }

        html.scrolling::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        html.scrolling::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        html.scrolling::-webkit-scrollbar-thumb:hover {
            background: var(--secondary-color);
        }

        body {
            font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.loaded {
            opacity: 1;
        }

        /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
        .navbar {
            background: #f8f9fa !important;
            backdrop-filter: blur(10px);
            transition: var(--transition);
            box-shadow: none;
        }

        .navbar.scrolled {
            background: rgba(26, 26, 26, 0.98) !important;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }

        .navbar-brand img {
            transition: var(--transition);
            max-height: 50px;
        }

        .navbar-brand:hover img {
            transform: scale(1.05);
        }

        .nav-link {
            position: relative;
            transition: var(--transition);
            font-weight: 500;
            color: var(--white) !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            font-size: 1.1rem;
            padding: 0.75rem 1.2rem !important;
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .nav-link:focus {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--white);
            transition: var(--transition);
            transform: translateX(-50%);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .nav-link:hover {
            color: var(--white) !important;
            opacity: 0.8;
        }

        .nav-link.active {
            color: var(--white) !important;
            font-weight: 600;
        }

        .nav-link.active::after {
            width: 100%;
            background: var(--white);
        }

        /* Header mejorado con colores de Gradotech */
        .masthead {
            background: var(--gradient-primary);
            position: relative;
            height: 100vh;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding-top: 0;
        }

        /* Efecto de ondas animadas */
        .masthead::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
            opacity: 0.3;
            animation: float 20s ease-in-out infinite;
        }

        /* Nuevo efecto de ondas animadas */
        .waves-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23ffffff"/></path></svg>');
            background-size: 1200px 100%;
            animation: wave 25s linear infinite;
        }

        .wave:nth-child(2) {
            bottom: 10%;
            animation: wave 20s linear infinite;
            opacity: 0.5;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
        }

        .wave:nth-child(3) {
            bottom: 20%;
            animation: wave 15s linear infinite;
            opacity: 0.2;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
        }

        @keyframes wave {
            0% {
                transform: translateX(0) translateZ(0) scaleY(1);
            }

            50% {
                transform: translateX(-25%) translateZ(0) scaleY(0.8);
            }

            100% {
                transform: translateX(-50%) translateZ(0) scaleY(1);
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(180deg);
            }
        }

        .masthead .container {
            position: relative;
            z-index: 10;
            text-align: left;
            padding-left: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .masthead-heading {
            font-size: 4.5rem;
            font-weight: 800;
            color: var(--white);
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            margin-bottom: 1.5rem;
            letter-spacing: -1px;
            line-height: 1.1;
            text-transform: uppercase;
            opacity: 0;
            transform: translateY(30px);
            animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
            text-align: left;
        }

        .masthead-subheading {
            font-size: 2rem;
            color: var(--white) !important;
            margin-bottom: 2.5rem;
            opacity: 0.9;
            font-weight: 300;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transform: translateY(30px);
            animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
            text-align: left;
        }

        @keyframes elegantFadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        /* Secciones que ocupan 100% de altura con efecto parallax */
        .full-width-section {
            min-height: 100vh;
            padding: 80px 0;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .full-width-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.05;
            z-index: -1;
            transform: translateZ(0);
        }

        .full-width-section:nth-child(even) {
            background: var(--light-bg);
        }

        .full-width-section:nth-child(even)::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        }

        .full-width-section:nth-child(odd)::before {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
        }

        /* Sección empresa específica - 100% altura */
        #page-empresa {
            min-height: 100vh;
            height: auto;
            padding: 120px 0 80px 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
            background: var(--white);
        }

        .empresa-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* Títulos de sección mejorados */
        .border-left-green-title {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--text-primary);
            position: relative;
            padding-left: 2rem;
            margin-bottom: 3rem;
            text-transform: uppercase;
            letter-spacing: -1px;
        }

        .border-left-green-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
        }

        /* Carrusel horizontal de alianzas */
        .alliances-carousel {
            position: relative;
            height: 220px;
            overflow: hidden;
            background: transparent;
            border-radius: 20px;
            padding: 2rem;
            margin: 2rem 0;
        }

        .alliances-track {
            display: flex;
            animation: scrollHorizontal 60s linear infinite;
            gap: 4rem;
            align-items: center;
            padding: 1rem 0;
            width: max-content;
            will-change: transform;
        }

        .alliances-track:hover {
            animation-play-state: paused;
        }

        .alliance-item {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 200px;
            height: 140px;
            padding: 1.5rem;
            background: transparent;
            border-radius: 15px;
            transition: var(--transition);
            flex-shrink: 0;
            position: relative;
        }

        .alliance-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            opacity: 0;
        }

        .alliance-item:hover::before {
            opacity: 1;
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(95, 177, 52, 0.3);
        }

        .alliance-item:hover {
            transform: scale(1.05);
        }

        .alliance-item img {
            max-width: 160px;
            max-height: 90px;
            object-fit: contain;
            /* filter: grayscale(100%) brightness(0.9); */
            transition: var(--transition);
            position: relative;
            z-index: 1;
        }

        .alliance-item:hover img {
            /* filter: grayscale(0%) brightness(1.1); */
            transform: scale(1.1);
        }

        @keyframes scrollHorizontal {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-33.333% * 3));
            }
        }

        /* Controles del carrusel horizontal - OCULTOS */
        .carousel-controls {
            display: none !important;
        }

        .carousel-btn {
            display: none !important;
        }

        .carousel-btn:hover {
            display: none !important;
        }

        .carousel-btn:disabled {
            display: none !important;
        }

        /* Control de navegación lateral como Black-up - OCULTO */
        .side-nav-control {
            display: none !important;
        }

        .nav-dot {
            display: none !important;
        }

        .nav-dot:hover,
        .nav-dot.active {
            display: none !important;
        }

        .nav-dot-label {
            display: none !important;
        }

        .nav-dot:hover .nav-dot-label {
            display: none !important;
        }

        /* Efectos de scroll mejorados */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        .scroll-reveal.from-left {
            transform: translateX(-50px);
        }

        .scroll-reveal.from-right {
            transform: translateX(50px);
        }

        .scroll-reveal.from-bottom {
            transform: translateY(50px);
        }

        .scroll-reveal.scale-in {
            transform: scale(0.8);
        }

        /* Responsive para el carrusel horizontal */
        @media (max-width: 768px) {
            .alliances-carousel {
                height: 150px;
                padding: 1rem;
                margin: 1rem 0;
            }

            .alliance-item {
                min-width: 120px;
                height: 80px;
                padding: 1rem;
            }

            .alliance-item img {
                max-height: 50px;
            }

            .carousel-controls {
                display: none !important;
            }

            .carousel-btn {
                display: none !important;
            }

            .masthead-heading {
                font-size: 2.5rem;
            }

            .masthead-subheading {
                font-size: 1.3rem;
            }

            .side-nav-control {
                display: none !important;
            }

            .nav-dot {
                display: none !important;
            }
        }

        /* Cards de servicios mejorados */
        .card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--shadow-soft);
            background: var(--white);
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-strong);
        }

        .card-img-top {
            transition: var(--transition);
            height: 250px;
            object-fit: cover;
        }

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

        .card-body {
            padding: 2rem;
        }

        .card-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .card-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        /* Efectos de imagen mejorados */
        .img-grayscale {
            filter: grayscale(100%);
            transition: var(--transition);
        }

        .img-grayscale:hover {
            /* filter: grayscale(0%) brightness(1.1); */
        }

        /* Sección de clientes */
        .client-logo {
            transition: var(--transition);
            filter: grayscale(100%);
            opacity: 0.7;
        }

        .client-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
            box-shadow: var(--shadow-strong);
            border-color: var(--primary-color);
        }

        /* Sección de partners */
        .partner-card {
            background: var(--white);
            border-radius: 15px;
            padding: 2rem;
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .partner-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-strong);
            border-color: var(--primary-color);
        }

        .partner-card img {
            transition: var(--transition);
            filter: grayscale(100%);
        }

        .partner-card:hover img {
            filter: grayscale(0%);
            transform: scale(1.05);
        }

        /* Formulario de contacto mejorado - Diseño limpio y profesional */
        .contact-form {
            background: var(--form-bg);
            padding: 3rem;
            border: var(--form-border);
            box-shadow: var(--form-shadow);
            margin: 10% 0;
            max-width: 160px;
            border-radius: var(--form-radius);
        }

        .form-wrapper h3 {
            color: var(--text-primary);
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            text-align: left;
        }

        .form-wrapper p {
            color: var(--text-secondary);
            font-size: 1rem;
            margin-bottom: 2rem;
            text-align: left;
        }

        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        /* Contenedor de input mejorado */
        .input-container {
            position: relative;
            background: var(--input-bg);
            border: var(--input-border);
            transition: all 0.2s ease;
            height: 48px;
            display: flex;
            align-items: center;
            border-radius: var(--input-radius);
        }

        .input-container:hover {
            border-color: var(--primary-color);
        }

        .input-container.focused {
            border-color: var(--primary-color);
            border-width: 2px;
            box-shadow: var(--input-focus-shadow);
        }

        .input-container.error {
            border-color: var(--error-color);
            border-width: 2px;
        }

        /* Inputs mejorados */
        .modern-input,
        .modern-textarea,
        .modern-select {
            width: 100%;
            border: none;
            background: transparent;
            padding: var(--input-padding);
            font-size: 0.95rem;
            color: var(--text-primary);
            outline: none;
            transition: all 0.3s ease;
            height: 100%;
            text-align: left;
        }

        .modern-input::placeholder,
        .modern-textarea::placeholder {
            color: var(--text-secondary);
            font-size: 0.9rem;
            text-align: left;
            opacity: 0.8;
        }

        .modern-textarea {
            height: 140px;
            resize: vertical;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .modern-select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1rem;
            padding-right: 3rem;
        }

        .modern-select:focus {
            box-shadow: none;
        }

        .modern-select option {
            background: var(--input-bg);
            color: var(--text-primary);
            padding: 0.5rem;
        }

        /* Iconos de input */
        .input-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-color);
            font-size: 1rem;
            z-index: 2;
            transition: all 0.2s ease;
            width: 20px;
            text-align: center;
        }

        .input-container.focused .input-icon {
            color: var(--primary-color);
        }

        /* Mensajes de error */
        .error-message {
            color: var(--error-color);
            font-size: 0.8rem;
            margin-top: 0.25rem;
            display: none;
            animation: slideIn 0.2s ease;
            text-align: left;
            padding-left: 0;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

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

        /* Botón de envío mejorado */
        .btn-primary {
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            margin-top: 0.5rem;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: none;
            letter-spacing: normal;
        }

        .btn-primary:hover {
            background: #4a8f2a;
            transform: none;
            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
        }

        .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
        }

        /* Contenedor de captcha */
        .captcha-container {
            background: #f8f9fa;
            padding: 1rem;
            border: 1px solid #e0e0e0;
            margin-bottom: 1rem;
        }

        .captcha-question {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            font-weight: 500;
            color: #333;
        }

        .captcha-question i {
            font-size: 1rem;
            color: #5FB134;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .contact-form {
                padding: 2rem;
                margin: 5% 0;
            }

            .form-wrapper h3 {
                font-size: 1.5rem;
            }

            .form-wrapper p {
                font-size: 0.9rem;
            }

            .modern-input,
            .modern-textarea,
            .modern-select {
                font-size: 0.9rem;
            }

            .input-icon {
                font-size: 0.9rem;
            }
        }

        /* Footer mejorado */
        .footer {
            background: var(--dark-bg) !important;
            color: var(--white);
            padding: 3rem 0 1rem;
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--gradient-accent);
        }

        .link-empresa {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }

        .link-empresa:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        /* Efectos de scroll */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: var(--transition);
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animaciones adicionales */
        .slide-in-left {
            animation: slideInLeft 0.8s ease-out;
        }

        .slide-in-right {
            animation: slideInRight 0.8s ease-out;
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

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

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

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

        /* Efectos de hover para botones sociales */
        .btn-social {
            transition: var(--transition);
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-social:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: var(--shadow-strong);
        }

        /* Mejoras en el mapa */
        .responsive-iframe {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }

        .responsive-iframe iframe {
            border: none;
            width: 100%;
            height: 300px;
        }

        /* Efectos de partículas mejorados */
        #particles-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 0;
            background: transparent;
        }

        /* Utilidades adicionales */
        .text-gradient {
            background: var(--gradient-accent);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .bg-gradient {
            background: var(--gradient-primary);
        }

        .shadow-custom {
            box-shadow: var(--shadow-strong);
        }

        /* Efectos de carga */
        .loading {
            position: relative;
            overflow: hidden;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        .mt-100 {
            margin-top: 100px !important;
        }

        .border-left-green {
            border-left: 4px solid #5FB134;
            font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            font-size: 16px;
        }

        .text-content-empresa {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            text-align: justify;
        }

        .empresa-content p {
            text-align: justify;
        }

        .image-container-pilares {
            text-align: center;
            margin: 2rem 0;
        }

        .image-container-pilares img {
            max-width: 160px;
            height: auto;
            border-radius: 10px;
            box-shadow: var(--shadow-soft);
            transition: var(--transition);
        }

        .image-container-pilares:hover img {
            transform: scale(1.02);
            box-shadow: var(--shadow-strong);
        }

        /* Estilos para el contenedor de la imagen */
        .image-container {
            width: 400px;
            height: 400px;

            overflow: hidden;
            position: relative;

            margin-left: 10%;
            display: flex;
            /* Usa flexbox para centrar verticalmente */
            align-items: center;
            /* Centra verticalmente el contenido */
        }

        /* Estilos para la imagen */
        .image-container img {
            max-width: 160px;
            max-height: 100%;
            width: auto;
            height: auto;
            transition: transform 0.3s ease;
            /* Efecto de transición para hover */
        }

        .image-container:hover img {
            border: 2px solid #5FB134;
            /* Cambia al color y grosor de borde deseado */
        }

        .custom-card {
            width: 100% !important;
            /* Asegura que el card ocupe todo el ancho disponible */
            margin-bottom: 20px !important;
            /* Espacio entre las tarjetas */
        }

        .custom-card .card-body {
            position: relative !important;
            /* Para posicionar absolutamente la cabecera dentro del card */
        }

        .card-text-empresa {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-secondary);
            text-align: justify;
        }

        .card-title-empresa {
            background-color: #5FB134;
            color: #fff;
            padding: 5px;
            /* Opcional: agrega relleno para que se vea mejor */
            display: flex;
            /* Crea un contenedor flexible */
            justify-content: space-between;
            /* Espacio uniforme entre el texto y el icono */
            align-items: center;
            /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
        }

        .card-title-empresa i {
            margin-left: 5px;
            /* Agrega un margen izquierdo al icono para separarlo del texto */
        }

        .section {
            margin-bottom: 20px !important;
            /* Agrega margen inferior para separar las secciones */
        }

        .contacto {
            background-color: #5FB134;
        }

        /* Efectos de scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

        .reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* Efectos de carga para imágenes */
        img {
            transition: opacity 0.3s ease;
        }

        img.loaded {
            opacity: 1;
        }

        /* Animación de carga inicial */
        body {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.loaded {
            opacity: 1;
        }

        /* Mejoras en las pestañas */
        .nav-tabs .nav-link {
            border: none;
            color: var(--text-secondary);
            font-weight: 500;
            padding: 12px 24px;
            border-radius: 25px;
            margin: 0 5px;
            transition: var(--transition);
        }

        .nav-tabs .nav-link.active {
            background: var(--gradient-accent);
            color: var(--white);
            box-shadow: var(--shadow-soft);
        }

        .nav-tabs .nav-link:hover {
            background: rgba(95, 177, 52, 0.1);
            color: var(--primary-color);
        }

        /* Efectos de hover para botones sociales mejorados */
        .btn-social:hover {
            background: var(--accent-color) !important;
            border-color: var(--accent-color) !important;
        }

        /* Efectos de hover para enlaces */
        a {
            transition: var(--transition);
        }

        a:hover {
            color: var(--primary-color);
        }

        /* Efectos de hover para iconos */
        .fas,
        .fab {
            transition: var(--transition);
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para el botón scroll to top */
        .scroll-to-top:hover {
            background: var(--accent-hover) !important;
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
        }

        /* Efectos de animación para elementos específicos */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        .fade-in-left {
            animation: fadeInLeft 0.8s ease-out;
        }

        .fade-in-right {
            animation: fadeInRight 0.8s ease-out;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        /* Efectos de hover para iconos */
        .fas,
        .fab {
            transition: var(--transition);
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para elementos de la empresa */
        .image-container-pilares:hover img {
            transform: scale(1.05);
            transition: var(--transition);
        }

        /* Mejoras en la navegación móvil */
        @media (max-width: 768px) {
            .navbar-nav {
                text-align: center;
            }

            .navbar-nav .nav-link {
                padding: 0.5rem 1rem;
            }

            .navbar-nav .nav-link:last-child {
                margin-bottom: 0;
            }

            .masthead-heading {
                font-size: 2.5rem;
            }

            .masthead-subheading {
                font-size: 1.1rem;
            }

            .border-left-green-title {
                font-size: 2.5rem;
            }

            .full-width-section {
                padding: 2rem 0;
            }

            #page-empresa {
                padding: 2rem 0;
            }

            .service-highlights {
                flex-direction: column;
                gap: 1rem;
                justify-content: flex-start;
                padding-left: 1rem;
            }

            .service-highlight {
                font-size: 0.9rem;
                padding: 0.5rem 1rem;
            }

            .side-nav-control {
                display: none;
            }

            .nav-dot {
                width: 12px;
                height: 12px;
            }
        }

        @media (max-width: 992px) {
            .masthead {
                padding: 0 1rem;
            }

            .service-highlights {
                flex-wrap: wrap;
                justify-content: flex-start;
                gap: 1rem;
                padding-left: 1rem;
            }

            .navbar-brand img {
                max-height: 40px;
            }

            .nav-link {
                font-size: 1rem;
                padding: 0.5rem 1rem !important;
            }
        }

        @media (max-width: 576px) {
            .masthead-heading {
                font-size: 2rem;
            }

            .service-highlight {
                font-size: 0.8rem;
                padding: 0.4rem 0.8rem;
            }

            .btn-primary {
                font-size: 0.9rem;
                padding: 0.75rem 1.5rem;
            }

            .border-left-green-title {
                font-size: 2rem;
                padding-left: 1rem;
            }
        }

        /* Asegurar que todas las secciones ocupen 100% de altura */
        .page-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 80px;
        }

        /* Mejorar el espaciado del contenido en secciones */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* Efectos de hover mejorados para navegación */
        .navbar-nav .nav-link {
            position: relative;
            transition: all 0.3s ease;
            margin: 0 0.5rem;
        }

        .navbar-nav .nav-link:hover {
            transform: translateY(-2px);
        }

        .navbar-nav .nav-link.active {
            transform: translateY(-2px);
            font-weight: 700;
        }

        /* Efectos de parallax mejorados */
        .full-width-section::before {
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* Optimización para dispositivos móviles */
        @media (max-width: 768px) {
            .full-width-section::before {
                background-attachment: scroll;
            }

            .masthead::before {
                background-attachment: scroll;
            }
        }

        /* Botones mejorados con colores de Gradotech */
        .btn-primary {
            background: var(--gradient-accent);
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition);
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: var(--transition);
        }

        .btn-primary:hover::before {
            left: 100%;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-strong);
            background: var(--gradient-primary);
        }

        /* Servicios destacados en el header - COLOR VERDE */
        .service-highlights {
            display: flex;
            justify-content: flex-start;
            margin-top: 3rem;
            flex-wrap: wrap;
            gap: 1rem;
            padding-left: 0;
            align-items: flex-start;
        }

        .service-highlight {
            background: rgba(95, 177, 52, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(95, 177, 52, 0.3);
            border-radius: 15px;
            padding: 1rem 1.5rem;
            color: var(--white);
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
        }

        .service-highlight::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--white);
            transition: var(--transition);
        }

        .service-highlight:hover {
            background: rgba(95, 177, 52, 1);
            transform: translateY(-5px);
            border-color: var(--white);
            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
        }

        .service-highlight:hover::before {
            width: 100%;
            opacity: 0.3;
        }

        /* Efecto de brillo para los service highlights */
        .service-highlight::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent);
            transform: rotate(45deg);
            transition: all 0.6s ease;
            opacity: 0;
        }

        .service-highlight:hover::after {
            opacity: 1;
            transform: rotate(45deg) translate(50%, 50%);
        }

        /* Efectos de hover para iconos en service highlights */
        .service-highlight .fas,
        .service-highlight .fab {
            transition: var(--transition);
            margin-right: 0.5rem;
        }

        .service-highlight:hover .fas,
        .service-highlight:hover .fab {
            transform: scale(1.2);
            color: var(--white);
        }

        /* Efectos de hover para enlaces de contacto */
        .contact-form a:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        .contact-form i {
            color: var(--primary-color);
            width: 20px;
        }

        /* Efectos de hover para elementos de la empresa */
        .empresa-content:hover {
            transform: translateY(-2px);
            transition: var(--transition);
        }

        .image-container-pilares:hover img {
            transform: scale(1.05);
            transition: var(--transition);
        }

        /* Mejoras en la accesibilidad */
        .nav-link:focus,
        .btn:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

        /* Efectos de hover para elementos de partners */
        .partner-card:hover .card-text-empresa {
            color: var(--text-primary);
        }

        /* Efectos de scroll reveal adicionales */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        .fade-in-left {
            animation: fadeInLeft 0.8s ease-out;
        }

        .fade-in-right {
            animation: fadeInRight 0.8s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

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

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        /* Títulos elegantes con línea vertical al costado */
        .elegant-title {
            font-family: 'Roboto', sans-serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0;
            text-transform: none;
            letter-spacing: -0.5px;
            line-height: 1;
            position: relative;
            padding-left: 2rem;
            text-align: left;
        }

        .elegant-subtitle {
            font-family: 'Roboto', sans-serif;
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            margin-top: 0;
            text-transform: none;
            letter-spacing: 0.2px;
            line-height: 1.1;
            opacity: 0.8;
            text-align: left;
            padding-left: 2rem;
            position: relative;
        }

        /* Contenedor para título y subtítulo con línea vertical compartida */
        .title-container {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 2rem;
        }

        .title-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 1;
        }

        .title-container .elegant-title {
            padding-left: 0;
            margin-bottom: 0;
        }

        .title-container .elegant-subtitle {
            padding-left: 0;
            margin-bottom: 0;
            margin-top: 0;
        }

        /* Animación para los títulos elegantes */
        .elegant-title {
            opacity: 0;
            transform: translateY(30px);
            animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
        }

        .elegant-subtitle {
            opacity: 0;
            transform: translateY(20px);
            animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
        }

        @keyframes elegantTitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes elegantSubtitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Responsividad para títulos elegantes */
        @media (max-width: 768px) {
            .elegant-title {
                font-size: 2.5rem;
            }

            .elegant-subtitle {
                font-size: 1.1rem;
            }

            .title-container {
                padding-left: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .elegant-title {
                font-size: 2rem;
            }

            .elegant-subtitle {
                font-size: 1rem;
            }

            .title-container {
                padding-left: 1rem;
            }
        }

        /* Eliminar contornos de navegación */
        .navbar-nav .nav-link,
        .navbar-nav .nav-link:focus,
        .navbar-nav .nav-link:active,
        .navbar-nav .nav-link:hover {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
        }

        .navbar-nav .nav-link:focus-visible {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Estilos para la sección Nosotros */
        .about-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .about-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .about-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-icon i {
            font-size: 1.5rem;
            color: var(--white);
        }

        .about-card h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Tarjetas de Misión y Visión */
        .mission-vision-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .mission-vision-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .card-header-mv {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .card-header-mv i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-right: 1rem;
        }

        .card-header-mv h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin: 0;
            font-size: 1.5rem;
        }

        .mission-vision-card p {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Responsive para la sección Nosotros */
        @media (max-width: 768px) {

            .about-card,
            .mission-vision-card {
                padding: 2rem;
            }

            .about-icon {
                width: 50px;
                height: 50px;
            }

            .about-icon i {
                font-size: 1.2rem;
            }
        }

        /* Grid moderno para servicios */
        .services-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2.5rem 2rem;
            justify-content: center;
        }

        .service-modern-card {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 2rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(95, 177, 52, 0.15);
            padding: 2.5rem 2rem 2rem 2rem;
            text-align: center;
            transition: box-shadow 0.3s, transform 0.3s;
            min-height: 420px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .service-modern-card:hover {
            box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
            transform: translateY(-6px) scale(1.03);
        }

        .service-icon {
            background: var(--gradient-primary);
            border-radius: 50%;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
        }

        .service-icon i {
            color: #fff;
            font-size: 2.5rem;
        }

        .service-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1rem;
            margin-top: 0.5rem;
        }

        .service-desc {
            color: var(--text-secondary);
            font-size: 1.08rem;
            margin-bottom: 2rem;
            flex-grow: 1;
        }

        .btn-modern {
            background: var(--gradient-primary);
            color: #fff;
            border: none;
            border-radius: 2rem;
            padding: 0.7rem 2.2rem;
            font-weight: 600;
            font-size: 1.08rem;
            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
            transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
            position: relative;
            overflow: hidden;
        }

        .btn-modern:hover {
            background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
            color: #fff;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
            transform: scale(1.05);
        }

        @media (max-width: 992px) {
            .service-modern-card {
                min-height: 380px;
                padding: 2rem 1.2rem 1.5rem 1.2rem;
            }

            .service-icon {
                width: 65px;
                height: 65px;
            }

            .service-icon i {
                font-size: 2rem;
            }
        }

        @media (max-width: 768px) {
            .services-grid {
                gap: 1.5rem 0.5rem;
            }

            .service-modern-card {
                min-height: 320px;
                padding: 1.5rem 0.7rem 1.2rem 0.7rem;
            }

            .service-title {
                font-size: 1.1rem;
            }

            .service-desc {
                font-size: 0.98rem;
            }

            .btn-modern {
                font-size: 0.98rem;
                padding: 0.6rem 1.5rem;
            }
        }

        /* Cards modernas para servicios con imágenes en colores */
        .service-card-modern {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
        }

        .service-card-modern:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
            border-color: var(--primary-color);
        }

        .service-image-container {
            position: relative;
            overflow: hidden;
            height: 250px;
        }

        .service-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            filter: brightness(0.9) contrast(1.1);
        }

        .service-card-modern:hover .service-image {
            transform: scale(1.05);
            filter: brightness(1) contrast(1.2);
        }

        .service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .service-card-modern:hover .service-overlay {
            opacity: 1;
        }

        .service-icon-overlay {
            font-size: 4rem;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            transform: scale(0.8);
            transition: transform 0.2s ease;
        }

        .service-card-modern:hover .service-icon-overlay {
            transform: scale(1);
        }

        .service-content {
            padding: 2rem;
            position: relative;
        }

        .service-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 2rem;
            right: 2rem;
            height: 3px;
            background: var(--gradient-primary);
            transform: scaleX(0);
            transition: transform 0.2s ease;
        }

        .service-card-modern:hover .service-content::before {
            transform: scaleX(1);
        }

        .service-title-modern {
            color: var(--primary-color);
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .service-text-modern {
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 1.5rem;
            font-size: 1rem;
        }

        .btn-service-modern {
            background: var(--gradient-primary);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 0.8rem 2rem;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
        }

        .btn-service-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.3s ease;
        }

        .btn-service-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
        }

        .btn-service-modern:hover::before {
            left: 100%;
        }

        /* Responsive para servicios modernos */
        @media (max-width: 768px) {
            .service-image-container {
                height: 220px;
            }

            .service-content {
                padding: 1.5rem;
            }

            .service-title-modern {
                font-size: 1.3rem;
            }

            .service-text-modern {
                font-size: 0.95rem;
            }

            .service-icon-overlay {
                font-size: 3rem;
            }
        }

        /* Selector de idioma */
        .language-selector {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 9999 !important;
            background: rgba(95, 177, 52, 0.9);
            backdrop-filter: blur(8px);
            border-radius: 20px;
            padding: 6px;
            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
            transition: all 0.3s ease;
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .language-btn {
            background: transparent;
            border: none;
            padding: 6px 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .language-btn.active {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-weight: 700;
        }

        .language-btn:hover:not(.active) {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            transform: scale(1.05);
        }

        /* Estilos del formulario de contacto moderno */
        .contact-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin: 2rem 0;
        }

        /* Estilos para la sección de información de contacto */
        .contact-info-wrapper {
            padding-right: 2rem;
        }

        .contact-title {
            color: #333;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .contact-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .contact-details {
            margin-bottom: 2rem;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            border-radius: 12px;
            background: rgba(95, 177, 52, 0.05);
            transition: all 0.3s ease;
        }

        .contact-item:hover {
            background: rgba(95, 177, 52, 0.1);
            transform: translateX(5px);
        }

        .contact-item i {
            font-size: 1.5rem;
            color: #5FB134;
            margin-top: 0.2rem;
        }

        .contact-item h5 {
            color: #333;
            font-weight: 600;
            margin-bottom: 0.3rem;
        }

        .contact-item p {
            color: #666;
            margin: 0;
            line-height: 1.5;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: #4a8f2a;
            transform: translateY(-3px);
            color: white;
        }

        /* Estilos para el formulario */
        .form-wrapper {
            padding-left: 2rem;
        }

        .form-title {
            color: #333;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .form-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .modern-form .form-group {
            margin-bottom: 1.5rem;
        }

        .modern-form label {
            display: block;
            color: #333;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .modern-form .input-container {
            position: relative;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .modern-form .input-container:hover,
        .modern-form .input-container:focus-within {
            border-color: #5FB134;
            background: white;
        }

        .modern-form .input-container input,
        .modern-form .input-container select,
        .modern-form .input-container textarea {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 3rem;
            border: none;
            background: transparent;
            font-size: 1rem;
            color: #333;
            outline: none;
        }

        .modern-form .input-container textarea {
            min-height: 140px;
            resize: vertical;
        }

        .modern-form .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #5FB134;
            font-size: 1.1rem;
        }

        .modern-form .input-container textarea+.input-icon {
            top: 1rem;
            transform: none;
        }

        .modern-form .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: none;
        }

        .modern-form .privacy-check {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-top: 1rem;
        }

        .modern-form .privacy-check input[type="checkbox"] {
            margin-top: 0.3rem;
        }

        .modern-form .privacy-check label {
            font-size: 0.9rem;
            color: #666;
            font-weight: normal;
            line-height: 1.5;
        }

        .modern-form .privacy-check a {
            color: #5FB134;
            text-decoration: none;
        }

        .modern-form .privacy-check a:hover {
            text-decoration: underline;
        }

        .modern-form .btn-primary {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .modern-form .btn-primary:hover {
            background: #4a8f2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
        }

        .modern-form .btn-primary i {
            font-size: 1.2rem;
        }

        /* Responsive */
        @media (max-width: 991.98px) {
            .contact-container {
                padding: 2rem;
            }

            .contact-info-wrapper {
                padding-right: 0;
                margin-bottom: 2rem;
            }

            .form-wrapper {
                padding-left: 0;
            }

            .contact-title,
            .form-title {
                font-size: 1.75rem;
            }
        }

        @media (max-width: 767.98px) {
            .contact-container {
                padding: 1.5rem;
            }

            .contact-item {
                padding: 0.75rem;
            }

            .modern-form .input-container input,
            .modern-form .input-container select,
            .modern-form .input-container textarea {
                font-size: 0.95rem;
            }
        }

        /* Títulos elegantes con línea vertical al costado */
        .elegant-title {
            font-family: 'Roboto', sans-serif;
            font-size: 3.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0;
            text-transform: none;
            letter-spacing: -0.5px;
            line-height: 1;
            position: relative;
            padding-left: 2rem;
            text-align: left;
        }

        .elegant-subtitle {
            font-family: 'Roboto', sans-serif;
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            margin-top: 0;
            text-transform: none;
            letter-spacing: 0.2px;
            line-height: 1.1;
            opacity: 0.8;
            text-align: left;
            padding-left: 2rem;
            position: relative;
        }

        /* Contenedor para título y subtítulo con línea vertical compartida */
        .title-container {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 2rem;
        }

        .title-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--gradient-primary);
            border-radius: 3px;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 1;
        }

        .title-container .elegant-title {
            padding-left: 0;
            margin-bottom: 0;
        }

        .title-container .elegant-subtitle {
            padding-left: 0;
            margin-bottom: 0;
            margin-top: 0;
        }

        /* Animación para los títulos elegantes */
        .elegant-title {
            opacity: 0;
            transform: translateY(30px);
            animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
        }

        .elegant-subtitle {
            opacity: 0;
            transform: translateY(20px);
            animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
        }

        @keyframes elegantTitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes elegantSubtitleFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Responsividad para títulos elegantes */
        @media (max-width: 768px) {
            .elegant-title {
                font-size: 2.5rem;
            }

            .elegant-subtitle {
                font-size: 1.1rem;
            }

            .title-container {
                padding-left: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .elegant-title {
                font-size: 2rem;
            }

            .elegant-subtitle {
                font-size: 1rem;
            }

            .title-container {
                padding-left: 1rem;
            }
        }

        /* Eliminar contornos de navegación */
        .navbar-nav .nav-link,
        .navbar-nav .nav-link:focus,
        .navbar-nav .nav-link:active,
        .navbar-nav .nav-link:hover {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -moz-box-shadow: none !important;
        }

        .navbar-nav .nav-link:focus-visible {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Estilos para la sección Nosotros */
        .about-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(95, 177, 52, 0.1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .about-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .about-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-icon i {
            font-size: 1.5rem;
            color: var(--white);
        }

        .about-card h3 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .about-text {
            color: var(--text-secondary);
            line-height: 1.8;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-grow: 1;
        }

        /* Tarjetas de Misión y Visión */
        .mission-vision-card {

            /* Variables CSS para la nueva paleta de colores de Gradotech */
            :root {
                --primary-color: #5FB134;
                /* Verde Gradotech */
                --secondary-color: #4a8f2a;
                /* Verde más oscuro */
                --accent-color: #5FB134;
                /* Verde Gradotech */
                --accent-hover: #6bc23a;
                /* Verde hover más claro */
                --dark-bg: #1a1a1a;
                /* Fondo oscuro elegante */
                --light-bg: #f8f9fa;
                /* Fondo claro */
                --text-primary: #212121;
                /* Texto principal */
                --text-secondary: #757575;
                /* Texto secundario */
                --white: #ffffff;
                --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
                --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
                --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
                --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
                --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* Ocultar scrollbar hasta hacer scroll */
            html {
                scrollbar-width: none;
                /* Firefox */
                -ms-overflow-style: none;
                /* IE and Edge */
            }

            html::-webkit-scrollbar {
                display: none;
                /* Chrome, Safari, Opera */
            }

            html.scrolling {
                scrollbar-width: auto;
                -ms-overflow-style: auto;
            }

            html.scrolling::-webkit-scrollbar {
                display: block;
                width: 8px;
            }

            html.scrolling::-webkit-scrollbar-track {
                background: #f1f1f1;
            }

            html.scrolling::-webkit-scrollbar-thumb {
                background: var(--primary-color);
                border-radius: 4px;
            }

            html.scrolling::-webkit-scrollbar-thumb:hover {
                background: var(--secondary-color);
            }

            body {
                font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
                color: var(--text-primary);
                line-height: 1.6;
                overflow-x: hidden;
                opacity: 0;
                transition: opacity 0.5s ease;
            }

            body.loaded {
                opacity: 1;
            }

            /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
            .navbar {
                background: #f8f9fa !important;
                backdrop-filter: blur(10px);
                transition: var(--transition);
                box-shadow: none;
            }

            .navbar.scrolled {
                background: rgba(26, 26, 26, 0.98) !important;
                box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            }

            .navbar-brand img {
                transition: var(--transition);
                max-height: 50px;
            }

            .navbar-brand:hover img {
                transform: scale(1.05);
            }

            .nav-link {
                position: relative;
                transition: var(--transition);
                font-weight: 500;
                color: var(--white) !important;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                font-size: 1.1rem;
                padding: 0.75rem 1.2rem !important;
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
            }

            .nav-link:focus {
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
            }

            .nav-link::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 0;
                height: 2px;
                background: var(--white);
                transition: var(--transition);
                transform: translateX(-50%);
            }

            .nav-link:hover::after {
                width: 100%;
            }

            .nav-link:hover {
                color: var(--white) !important;
                opacity: 0.8;
            }

            .nav-link.active {
                color: var(--white) !important;
                font-weight: 600;
            }

            .nav-link.active::after {
                width: 100%;
                background: var(--white);
            }

            /* Header mejorado con colores de Gradotech */
            .masthead {
                background: var(--gradient-primary);
                position: relative;
                height: 100vh;
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                padding-top: 0;
            }

            /* Efecto de ondas animadas */
            .masthead::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
                opacity: 0.3;
                animation: float 20s ease-in-out infinite;
            }

            /* Nuevo efecto de ondas animadas */
            .waves-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                z-index: 1;
            }

            .wave {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 200%;
                height: 100%;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23ffffff"/></path></svg>');
                background-size: 1200px 100%;
                animation: wave 25s linear infinite;
            }

            .wave:nth-child(2) {
                bottom: 10%;
                animation: wave 20s linear infinite;
                opacity: 0.5;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
            }

            .wave:nth-child(3) {
                bottom: 20%;
                animation: wave 15s linear infinite;
                opacity: 0.2;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
            }

            @keyframes wave {
                0% {
                    transform: translateX(0) translateZ(0) scaleY(1);
                }

                50% {
                    transform: translateX(-25%) translateZ(0) scaleY(0.8);
                }

                100% {
                    transform: translateX(-50%) translateZ(0) scaleY(1);
                }
            }

            @keyframes float {

                0%,
                100% {
                    transform: translateY(0px) rotate(0deg);
                }

                50% {
                    transform: translateY(-20px) rotate(180deg);
                }
            }

            .masthead .container {
                position: relative;
                z-index: 10;
                text-align: left;
                padding-left: 2rem;
                max-width: 1200px;
                margin: 0 auto;
            }

            .masthead-heading {
                font-size: 4.5rem;
                font-weight: 800;
                color: var(--white);
                text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
                margin-bottom: 1.5rem;
                letter-spacing: -1px;
                line-height: 1.1;
                text-transform: uppercase;
                opacity: 0;
                transform: translateY(30px);
                animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
                text-align: left;
            }

            .masthead-subheading {
                font-size: 2rem;
                color: var(--white) !important;
                margin-bottom: 2.5rem;
                opacity: 0.9;
                font-weight: 300;
                letter-spacing: 0.5px;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                opacity: 0;
                transform: translateY(30px);
                animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
                text-align: left;
            }

            @keyframes elegantFadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

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

            /* Secciones que ocupan 100% de altura con efecto parallax */
            .full-width-section {
                min-height: 100vh;
                padding: 80px 0;
                position: relative;
                display: flex;
                align-items: center;
                overflow: hidden;
            }

            .full-width-section::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                opacity: 0.05;
                z-index: -1;
                transform: translateZ(0);
            }

            .full-width-section:nth-child(even) {
                background: var(--light-bg);
            }

            .full-width-section:nth-child(even)::before {
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            }

            .full-width-section:nth-child(odd)::before {
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
            }

            /* Sección empresa específica - 100% altura */
            #page-empresa {
                min-height: 100vh;
                height: auto;
                padding: 120px 0 80px 0;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                position: relative;
                background: var(--white);
            }

            .empresa-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }

            /* Títulos de sección mejorados */
            .border-left-green-title {
                font-size: 3.5rem;
                font-weight: 700;
                color: var(--text-primary);
                position: relative;
                padding-left: 2rem;
                margin-bottom: 3rem;
                text-transform: uppercase;
                letter-spacing: -1px;
            }

            .border-left-green-title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 6px;
                background: var(--gradient-primary);
                border-radius: 3px;
            }

            /* Carrusel horizontal de alianzas */
            .alliances-carousel {
                position: relative;
                height: 220px;
                overflow: hidden;
                background: transparent;
                border-radius: 20px;
                padding: 2rem;
                margin: 2rem 0;
            }

            .alliances-track {
                display: flex;
                animation: scrollHorizontal 60s linear infinite;
                gap: 4rem;
                align-items: center;
                padding: 1rem 0;
                width: max-content;
                will-change: transform;
            }

            .alliances-track:hover {
                animation-play-state: paused;
            }

            .alliance-item {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 200px;
                height: 140px;
                padding: 1.5rem;
                background: transparent;
                border-radius: 15px;
                transition: var(--transition);
                flex-shrink: 0;
                position: relative;
            }

            .alliance-item::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 15px;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                transition: var(--transition);
                opacity: 0;
            }

            .alliance-item:hover::before {
                opacity: 1;
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(95, 177, 52, 0.3);
            }

            .alliance-item:hover {
                transform: scale(1.05);
            }

            .alliance-item img {
                max-width: 160px;
                max-height: 90px;
                object-fit: contain;
                /* filter: grayscale(100%) brightness(0.9); */
                transition: var(--transition);
                position: relative;
                z-index: 1;
            }

            .alliance-item:hover img {
                /* filter: grayscale(0%) brightness(1.1); */
                transform: scale(1.1);
            }

            @keyframes scrollHorizontal {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(calc(-33.333% * 3));
                }
            }

            /* Controles del carrusel horizontal - OCULTOS */
            .carousel-controls {
                display: none !important;
            }

            .carousel-btn {
                display: none !important;
            }

            .carousel-btn:hover {
                display: none !important;
            }

            .carousel-btn:disabled {
                display: none !important;
            }

            /* Control de navegación lateral como Black-up - OCULTO */
            .side-nav-control {
                display: none !important;
            }

            .nav-dot {
                display: none !important;
            }

            .nav-dot:hover,
            .nav-dot.active {
                display: none !important;
            }

            .nav-dot-label {
                display: none !important;
            }

            .nav-dot:hover .nav-dot-label {
                display: none !important;
            }

            /* Efectos de scroll mejorados */
            .scroll-reveal {
                opacity: 0;
                transform: translateY(50px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .scroll-reveal.revealed {
                opacity: 1;
                transform: translateY(0);
            }

            .scroll-reveal.from-left {
                transform: translateX(-50px);
            }

            .scroll-reveal.from-right {
                transform: translateX(50px);
            }

            .scroll-reveal.from-bottom {
                transform: translateY(50px);
            }

            .scroll-reveal.scale-in {
                transform: scale(0.8);
            }

            /* Responsive para el carrusel horizontal */
            @media (max-width: 768px) {
                .alliances-carousel {
                    height: 150px;
                    padding: 1rem;
                    margin: 1rem 0;
                }

                .alliance-item {
                    min-width: 120px;
                    height: 80px;
                    padding: 1rem;
                }

                .alliance-item img {
                    max-height: 50px;
                }

                .carousel-controls {
                    display: none !important;
                }

                .carousel-btn {
                    display: none !important;
                }

                .masthead-heading {
                    font-size: 2.5rem;
                }

                .masthead-subheading {
                    font-size: 1.3rem;
                }

                .side-nav-control {
                    display: none !important;
                }

                .nav-dot {
                    display: none !important;
                }
            }

            /* Cards de servicios mejorados */
            .card {
                border: none;
                border-radius: 20px;
                overflow: hidden;
                transition: var(--transition);
                box-shadow: var(--shadow-soft);
                background: var(--white);
            }

            .card:hover {
                transform: translateY(-10px);
                box-shadow: var(--shadow-strong);
            }

            .card-img-top {
                transition: var(--transition);
                height: 250px;
                object-fit: cover;
            }

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

            .card-body {
                padding: 2rem;
            }

            .card-title {
                color: var(--primary-color);
                font-weight: 700;
                font-size: 1.5rem;
                margin-bottom: 1rem;
            }

            .card-text {
                color: var(--text-secondary);
                line-height: 1.8;
                margin-bottom: 1.5rem;
            }

            /* Efectos de imagen mejorados */
            .img-grayscale {
                filter: grayscale(100%);
                transition: var(--transition);
            }

            .img-grayscale:hover {
                /* filter: grayscale(0%) brightness(1.1); */
            }

            /* Sección de clientes */
            .client-logo {
                transition: var(--transition);
                filter: grayscale(100%);
                opacity: 0.7;
            }

            .client-logo:hover {
                filter: grayscale(0%);
                opacity: 1;
                transform: scale(1.1);
                box-shadow: var(--shadow-strong);
                border-color: var(--primary-color);
            }

            /* Sección de partners */
            .partner-card {
                background: var(--white);
                border-radius: 15px;
                padding: 2rem;
                box-shadow: var(--shadow-soft);
                transition: var(--transition);
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            .partner-card:hover {
                transform: translateY(-5px);
                box-shadow: var(--shadow-strong);
                border-color: var(--primary-color);
            }

            .partner-card img {
                transition: var(--transition);
                filter: grayscale(100%);
            }

            .partner-card:hover img {
                filter: grayscale(0%);
                transform: scale(1.05);
            }

            /* Formulario de contacto mejorado - Diseño limpio y profesional */
            .contact-form {
                background: var(--form-bg);
                padding: 3rem;
                border: var(--form-border);
                box-shadow: var(--form-shadow);
                margin: 10% 0;
                max-width: 160px;
                border-radius: var(--form-radius);
            }

            .form-wrapper h3 {
                color: var(--text-primary);
                font-size: 1.8rem;
                font-weight: 600;
                margin-bottom: 0.5rem;
                text-align: left;
            }

            /* Variables CSS para la nueva paleta de colores de Gradotech */
            :root {
                --primary-color: #5FB134;
                /* Verde Gradotech */
                --secondary-color: #4a8f2a;
                /* Verde más oscuro */
                --accent-color: #5FB134;
                /* Verde Gradotech */
                --accent-hover: #6bc23a;
                /* Verde hover más claro */
                --dark-bg: #1a1a1a;
                /* Fondo oscuro elegante */
                --light-bg: #f8f9fa;
                /* Fondo claro */
                --text-primary: #212121;
                /* Texto principal */
                --text-secondary: #757575;
                /* Texto secundario */
                --white: #ffffff;
                --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
                --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
                --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
                --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
                --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* Ocultar scrollbar hasta hacer scroll */
            html {
                scrollbar-width: none;
                /* Firefox */
                -ms-overflow-style: none;
                /* IE and Edge */
            }

            html::-webkit-scrollbar {
                display: none;
                /* Chrome, Safari, Opera */
            }

            html.scrolling {
                scrollbar-width: auto;
                -ms-overflow-style: auto;
            }

            html.scrolling::-webkit-scrollbar {
                display: block;
                width: 8px;
            }

            html.scrolling::-webkit-scrollbar-track {
                background: #f1f1f1;
            }

            html.scrolling::-webkit-scrollbar-thumb {
                background: var(--primary-color);
                border-radius: 4px;
            }

            html.scrolling::-webkit-scrollbar-thumb:hover {
                background: var(--secondary-color);
            }

            body {
                font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
                color: var(--text-primary);
                line-height: 1.6;
                overflow-x: hidden;
                opacity: 0;
                transition: opacity 0.5s ease;
            }

            body.loaded {
                opacity: 1;
            }

            /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
            .navbar {
                background: #f8f9fa !important;
                backdrop-filter: blur(10px);
                transition: var(--transition);
                box-shadow: none;
            }

            .navbar.scrolled {
                background: rgba(26, 26, 26, 0.98) !important;
                box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            }

            .navbar-brand img {
                transition: var(--transition);
                max-height: 50px;
            }

            .navbar-brand:hover img {
                transform: scale(1.05);
            }

            .nav-link {
                position: relative;
                transition: var(--transition);
                font-weight: 500;
                color: var(--white) !important;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                font-size: 1.1rem;
                padding: 0.75rem 1.2rem !important;
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
            }

            .nav-link:focus {
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
            }

            .nav-link::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 0;
                height: 2px;
                background: var(--white);
                transition: var(--transition);
                transform: translateX(-50%);
            }

            .nav-link:hover::after {
                width: 100%;
            }

            .nav-link:hover {
                color: var(--white) !important;
                opacity: 0.8;
            }

            .nav-link.active {
                color: var(--white) !important;
                font-weight: 600;
            }

            .nav-link.active::after {
                width: 100%;
                background: var(--white);
            }

            /* Header mejorado con colores de Gradotech */
            .masthead {
                background: var(--gradient-primary);
                position: relative;
                height: 100vh;
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                padding-top: 0;
            }

            /* Efecto de ondas animadas */
            .masthead::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
                opacity: 0.3;
                animation: float 20s ease-in-out infinite;
            }

            /* Nuevo efecto de ondas animadas */
            .waves-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                z-index: 1;
            }

            .wave {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 200%;
                height: 100%;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23ffffff"/></path></svg>');
                background-size: 1200px 100%;
                animation: wave 25s linear infinite;
            }

            .wave:nth-child(2) {
                bottom: 10%;
                animation: wave 20s linear infinite;
                opacity: 0.5;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
            }

            .wave:nth-child(3) {
                bottom: 20%;
                animation: wave 15s linear infinite;
                opacity: 0.2;
                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
            }

            @keyframes wave {
                0% {
                    transform: translateX(0) translateZ(0) scaleY(1);
                }

                50% {
                    transform: translateX(-25%) translateZ(0) scaleY(0.8);
                }

                100% {
                    transform: translateX(-50%) translateZ(0) scaleY(1);
                }
            }

            @keyframes float {

                0%,
                100% {
                    transform: translateY(0px) rotate(0deg);
                }

                50% {
                    transform: translateY(-20px) rotate(180deg);
                }
            }

            .masthead .container {
                position: relative;
                z-index: 10;
                text-align: left;
                padding-left: 2rem;
                max-width: 1200px;
                margin: 0 auto;
            }

            .masthead-heading {
                font-size: 4.5rem;
                font-weight: 800;
                color: var(--white);
                text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
                margin-bottom: 1.5rem;
                letter-spacing: -1px;
                line-height: 1.1;
                text-transform: uppercase;
                opacity: 0;
                transform: translateY(30px);
                animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
                text-align: left;
            }

            .masthead-subheading {
                font-size: 2rem;
                color: var(--white) !important;
                margin-bottom: 2.5rem;
                opacity: 0.9;
                font-weight: 300;
                letter-spacing: 0.5px;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                opacity: 0;
                transform: translateY(30px);
                animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
                text-align: left;
            }

            @keyframes elegantFadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

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

            /* Secciones que ocupan 100% de altura con efecto parallax */
            .full-width-section {
                min-height: 100vh;
                padding: 80px 0;
                position: relative;
                display: flex;
                align-items: center;
                overflow: hidden;
            }

            .full-width-section::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                opacity: 0.05;
                z-index: -1;
                transform: translateZ(0);
            }

            .full-width-section:nth-child(even) {
                background: var(--light-bg);
            }

            .full-width-section:nth-child(even)::before {
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            }

            .full-width-section:nth-child(odd)::before {
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
            }

            /* Sección empresa específica - 100% altura */
            #page-empresa {
                min-height: 100vh;
                height: auto;
                padding: 120px 0 80px 0;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                position: relative;
                background: var(--white);
            }

            .empresa-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }

            /* Títulos de sección mejorados */
            .border-left-green-title {
                font-size: 3.5rem;
                font-weight: 700;
                color: var(--text-primary);
                position: relative;
                padding-left: 2rem;
                margin-bottom: 3rem;
                text-transform: uppercase;
                letter-spacing: -1px;
            }

            .border-left-green-title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 6px;
                background: var(--gradient-primary);
                border-radius: 3px;
            }

            /* Carrusel horizontal de alianzas */
            .alliances-carousel {
                position: relative;
                height: 220px;
                overflow: hidden;
                background: transparent;
                border-radius: 20px;
                padding: 2rem;
                margin: 2rem 0;
            }

            .alliances-track {
                display: flex;
                animation: scrollHorizontal 60s linear infinite;
                gap: 4rem;
                align-items: center;
                padding: 1rem 0;
                width: max-content;
                will-change: transform;
            }

            .alliances-track:hover {
                animation-play-state: paused;
            }

            .alliance-item {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 200px;
                height: 140px;
                padding: 1.5rem;
                background: transparent;
                border-radius: 15px;
                transition: var(--transition);
                flex-shrink: 0;
                position: relative;
            }

            .alliance-item::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 15px;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                transition: var(--transition);
                opacity: 0;
            }

            .alliance-item:hover::before {
                opacity: 1;
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(95, 177, 52, 0.3);
            }

            .alliance-item:hover {
                transform: scale(1.05);
            }

            .alliance-item img {
                max-width: 160px;
                max-height: 90px;
                object-fit: contain;
                /* filter: grayscale(100%) brightness(0.9); */
                transition: var(--transition);
                position: relative;
                z-index: 1;
            }

            .alliance-item:hover img {
                /* filter: grayscale(0%) brightness(1.1); */
                transform: scale(1.1);
            }

            @keyframes scrollHorizontal {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(calc(-33.333% * 3));
                }
            }

            /* Controles del carrusel horizontal - OCULTOS */
            .carousel-controls {
                display: none !important;
            }

            .carousel-btn {
                display: none !important;
            }

            .carousel-btn:hover {
                display: none !important;
            }

            .carousel-btn:disabled {
                display: none !important;
            }

            /* Control de navegación lateral como Black-up - OCULTO */
            .side-nav-control {
                display: none !important;
            }

            .nav-dot {
                display: none !important;
            }

            .nav-dot:hover,
            .nav-dot.active {
                display: none !important;
            }

            .nav-dot-label {
                display: none !important;
            }

            .nav-dot:hover .nav-dot-label {
                display: none !important;
            }

            /* Efectos de scroll mejorados */
            .scroll-reveal {
                opacity: 0;
                transform: translateY(50px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .scroll-reveal.revealed {
                opacity: 1;
                transform: translateY(0);
            }

            .scroll-reveal.from-left {
                transform: translateX(-50px);
            }

            .scroll-reveal.from-right {
                transform: translateX(50px);
            }

            .scroll-reveal.from-bottom {
                transform: translateY(50px);
            }

            .scroll-reveal.scale-in {
                transform: scale(0.8);
            }

            /* Responsive para el carrusel horizontal */
            @media (max-width: 768px) {
                .alliances-carousel {
                    height: 150px;
                    padding: 1rem;
                    margin: 1rem 0;
                }

                .alliance-item {
                    min-width: 120px;
                    height: 80px;
                    padding: 1rem;
                }

                .alliance-item img {
                    max-height: 50px;
                }

                .carousel-controls {
                    display: none !important;
                }

                .carousel-btn {
                    display: none !important;
                }

                .masthead-heading {
                    font-size: 2.5rem;
                }

                .masthead-subheading {
                    font-size: 1.3rem;
                }

                .side-nav-control {
                    display: none !important;
                }

                .nav-dot {
                    display: none !important;
                }
            }

            /* Cards de servicios mejorados */
            .card {
                border: none;
                border-radius: 20px;
                overflow: hidden;
                transition: var(--transition);
                box-shadow: var(--shadow-soft);
                background: var(--white);
            }

            .card:hover {
                transform: translateY(-10px);
                box-shadow: var(--shadow-strong);
            }

            .card-img-top {
                transition: var(--transition);
                height: 250px;
                object-fit: cover;
            }

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

            .card-body {
                padding: 2rem;
            }

            .card-title {
                color: var(--primary-color);
                font-weight: 700;
                font-size: 1.5rem;
                margin-bottom: 1rem;
            }

            .card-text {
                color: var(--text-secondary);
                line-height: 1.8;
                margin-bottom: 1.5rem;
            }

            /* Efectos de imagen mejorados */
            .img-grayscale {
                filter: grayscale(100%);
                transition: var(--transition);
            }

            .img-grayscale:hover {
                /* filter: grayscale(0%) brightness(1.1); */
            }

            /* Sección de clientes */
            .client-logo {
                transition: var(--transition);
                filter: grayscale(100%);
                opacity: 0.7;
            }

            .client-logo:hover {
                filter: grayscale(0%);
                opacity: 1;
                transform: scale(1.1);
                box-shadow: var(--shadow-strong);
                border-color: var(--primary-color);
            }

            /* Sección de partners */
            .partner-card {
                background: var(--white);
                border-radius: 15px;
                padding: 2rem;
                box-shadow: var(--shadow-soft);
                transition: var(--transition);
                border: 1px solid rgba(0, 0, 0, 0.05);
            }

            .partner-card:hover {
                transform: translateY(-5px);
                box-shadow: var(--shadow-strong);
                border-color: var(--primary-color);
            }

            .partner-card img {
                transition: var(--transition);
                filter: grayscale(100%);
            }

            .partner-card:hover img {
                filter: grayscale(0%);
                transform: scale(1.05);
            }

            /* Formulario de contacto mejorado - Diseño limpio y profesional */
            .contact-form {
                background: #ffffff;
                padding: 3rem;
                border: 1px solid #e0e0e0;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                margin: 10% 0;
                max-width: 160px;
            }

            .form-wrapper h3 {
                color: #333;
                font-size: 1.8rem;
                font-weight: 600;
                margin-bottom: 0.5rem;
                text-align: left;
            }

            .form-wrapper p {
                color: #666;
                font-size: 1rem;
                margin-bottom: 2rem;
                text-align: left;
            }

            .form-group {
                margin-bottom: 1.5rem;
                position: relative;
            }

            /* Contenedor de input mejorado */
            .input-container {
                position: relative;
                background: #ffffff;
                border: 1px solid #d0d0d0;
                transition: all 0.2s ease;
                height: 48px;
                display: flex;
                align-items: center;
            }

            .input-container:hover {
                border-color: #5FB134;
            }

            .input-container.focused {
                border-color: #5FB134;
                border-width: 2px;
            }

            .input-container.error {
                border-color: #dc3545;
                border-width: 2px;
            }

            /* Inputs mejorados */
            .modern-input,
            .modern-textarea,
            .modern-select {
                width: 100%;
                border: none;
                background: transparent;
                padding: 0.75rem 1rem 0.75rem 3rem;
                font-size: 0.95rem;
                color: #333;
                outline: none;
                transition: all 0.3s ease;
                height: 100%;
                text-align: left;
            }

            .modern-input::placeholder,
            .modern-textarea::placeholder {
                color: #6c757d;
                font-size: 0.9rem;
                text-align: left;
                opacity: 0.8;
            }

            .modern-textarea {
                height: 140px;
                resize: vertical;
                padding-top: 1rem;
                padding-bottom: 1rem;
            }

            .modern-select {
                cursor: pointer;
                appearance: none;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right 1rem center;
                background-size: 1rem;
                padding-right: 3rem;
            }

            .modern-select:focus {
                box-shadow: none;
            }

            .modern-select option {
                background: white;
                color: #333;
                padding: 0.5rem;
            }

            /* Iconos de input */
            .input-icon {
                position: absolute;
                left: 0.75rem;
                top: 50%;
                transform: translateY(-50%);
                color: #5FB134;
                font-size: 1rem;
                z-index: 2;
                transition: all 0.2s ease;
                width: 20px;
                text-align: center;
            }

            .input-container.focused .input-icon {
                color: #5FB134;
            }

            /* Mensajes de error */
            .error-message {
                color: #dc3545;
                font-size: 0.8rem;
                margin-top: 0.25rem;
                display: none;
                animation: slideIn 0.2s ease;
                text-align: left;
                padding-left: 0;
            }

            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateY(-5px);
                }

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

            /* Botón de envío mejorado */
            .btn-primary {
                width: 100%;
                background: rgba(255, 255, 255, 0.2);
                color: white;
                border: none;
                padding: 0.75rem 1.5rem;
                font-size: 1rem;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s ease;
                position: relative;
                overflow: hidden;
                margin-top: 0.5rem;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-transform: none;
                letter-spacing: normal;
            }

            .btn-primary:hover {
                background: #4a8f2a;
                transform: none;
                box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
            }

            .btn-primary:focus {
                box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
            }

            /* Contenedor de captcha */
            .captcha-container {
                background: #f8f9fa;
                padding: 1rem;
                border: 1px solid #e0e0e0;
                margin-bottom: 1rem;
            }

            .captcha-question {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                margin-bottom: 0.75rem;
                font-weight: 500;
                color: #333;
            }

            .captcha-question i {
                font-size: 1rem;
                color: #5FB134;
            }

            /* Responsive */
            @media (max-width: 768px) {
                .contact-form {
                    padding: 2rem;
                    margin: 5% 0;
                }

                .form-wrapper h3 {
                    font-size: 1.5rem;
                }

                .form-wrapper p {
                    font-size: 0.9rem;
                }

                .modern-input,
                .modern-textarea,
                .modern-select {
                    font-size: 0.9rem;
                }

                .input-icon {
                    font-size: 0.9rem;
                }
            }

            /* Footer mejorado */
            .footer {
                background: var(--dark-bg) !important;
                color: var(--white);
                padding: 3rem 0 1rem;
                position: relative;
                overflow: hidden;
            }

            .footer::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 1px;
                background: var(--gradient-accent);
            }

            .link-empresa {
                color: var(--primary-color);
                text-decoration: none;
                transition: var(--transition);
            }

            .link-empresa:hover {
                color: var(--accent-hover);
                text-decoration: underline;
            }

            /* Efectos de scroll */
            .fade-in {
                opacity: 0;
                transform: translateY(30px);
                transition: var(--transition);
            }

            .fade-in.visible {
                opacity: 1;
                transform: translateY(0);
            }

            /* Animaciones adicionales */
            .slide-in-left {
                animation: slideInLeft 0.8s ease-out;
            }

            .slide-in-right {
                animation: slideInRight 0.8s ease-out;
            }

            @keyframes slideInLeft {
                from {
                    opacity: 0;
                    transform: translateX(-50px);
                }

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

            @keyframes slideInRight {
                from {
                    opacity: 0;
                    transform: translateX(50px);
                }

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

            /* Efectos de hover para botones sociales */
            .btn-social {
                transition: var(--transition);
                border-radius: 50%;
                width: 45px;
                height: 45px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .btn-social:hover {
                transform: translateY(-3px) scale(1.1);
                box-shadow: var(--shadow-strong);
            }

            /* Mejoras en el mapa */
            .responsive-iframe {
                border-radius: 15px;
                overflow: hidden;
                box-shadow: var(--shadow-soft);
            }

            .responsive-iframe iframe {
                border: none;
                width: 100%;
                height: 300px;
            }

            /* Efectos de partículas mejorados */
            #particles-js {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                z-index: 0;
                background: transparent;
            }

            /* Utilidades adicionales */
            .text-gradient {
                background: var(--gradient-accent);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .bg-gradient {
                background: var(--gradient-primary);
            }

            .shadow-custom {
                box-shadow: var(--shadow-strong);
            }

            /* Efectos de carga */
            .loading {
                position: relative;
                overflow: hidden;
            }

            .loading::after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                animation: loading 1.5s infinite;
            }

            @keyframes loading {
                0% {
                    left: -100%;
                }

                100% {
                    left: 100%;
                }
            }

            .mt-100 {
                margin-top: 100px !important;
            }

            .border-left-green {
                border-left: 4px solid #5FB134;
                font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-size: 16px;
            }

            .text-content-empresa {
                font-size: 1.1rem;
                line-height: 1.8;
                color: var(--text-secondary);
                margin-bottom: 2rem;
                text-align: justify;
            }

            .empresa-content p {
                text-align: justify;
            }

            .image-container-pilares {
                text-align: center;
                margin: 2rem 0;
            }

            .image-container-pilares img {
                max-width: 160px;
                height: auto;
                border-radius: 10px;
                box-shadow: var(--shadow-soft);
                transition: var(--transition);
            }

            .image-container-pilares:hover img {
                transform: scale(1.02);
                box-shadow: var(--shadow-strong);
            }

            /* Estilos para el contenedor de la imagen */
            .image-container {
                width: 400px;
                height: 400px;

                overflow: hidden;
                position: relative;

                margin-left: 10%;
                display: flex;
                /* Usa flexbox para centrar verticalmente */
                align-items: center;
                /* Centra verticalmente el contenido */
            }

            /* Estilos para la imagen */
            .image-container img {
                max-width: 160px;
                max-height: 100%;
                width: auto;
                height: auto;
                transition: transform 0.3s ease;
                /* Efecto de transición para hover */
            }

            .image-container:hover img {
                border: 2px solid #5FB134;
                /* Cambia al color y grosor de borde deseado */
            }

            .custom-card {
                width: 100% !important;
                /* Asegura que el card ocupe todo el ancho disponible */
                margin-bottom: 20px !important;
                /* Espacio entre las tarjetas */
            }

            .custom-card .card-body {
                position: relative !important;
                /* Para posicionar absolutamente la cabecera dentro del card */
            }

            .card-text-empresa {
                font-size: 1rem;
                line-height: 1.7;
                color: var(--text-secondary);
                text-align: justify;
            }

            .card-title-empresa {
                background-color: #5FB134;
                color: #fff;
                padding: 5px;
                /* Opcional: agrega relleno para que se vea mejor */
                display: flex;
                /* Crea un contenedor flexible */
                justify-content: space-between;
                /* Espacio uniforme entre el texto y el icono */
                align-items: center;
                /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
            }

            .card-title-empresa i {
                margin-left: 5px;
                /* Agrega un margen izquierdo al icono para separarlo del texto */
            }

            .section {
                margin-bottom: 20px !important;
                /* Agrega margen inferior para separar las secciones */
            }

            .contacto {
                background-color: #5FB134;
            }

            /* Efectos de scroll reveal */
            .reveal {
                opacity: 0;
                transform: translateY(50px);
                transition: all 0.8s ease;
            }

            .reveal.revealed {
                opacity: 1;
                transform: translateY(0);
            }

            /* Efectos de carga para imágenes */
            img {
                transition: opacity 0.3s ease;
            }

            img.loaded {
                opacity: 1;
            }

            /* Animación de carga inicial */
            body {
                opacity: 0;
                transition: opacity 0.5s ease;
            }

            body.loaded {
                opacity: 1;
            }

            /* Mejoras en las pestañas */
            .nav-tabs .nav-link {
                border: none;
                color: var(--text-secondary);
                font-weight: 500;
                padding: 12px 24px;
                border-radius: 25px;
                margin: 0 5px;
                transition: var(--transition);
            }

            .nav-tabs .nav-link.active {
                background: var(--gradient-accent);
                color: var(--white);
                box-shadow: var(--shadow-soft);
            }

            .nav-tabs .nav-link:hover {
                background: rgba(95, 177, 52, 0.1);
                color: var(--primary-color);
            }

            /* Efectos de hover para botones sociales mejorados */
            .btn-social:hover {
                background: var(--accent-color) !important;
                border-color: var(--accent-color) !important;
            }

            /* Efectos de hover para enlaces */
            a {
                transition: var(--transition);
            }

            a:hover {
                color: var(--primary-color);
            }

            /* Efectos de hover para iconos */
            .fas,
            .fab {
                transition: var(--transition);
            }

            .service-highlight:hover .fas,
            .service-highlight:hover .fab {
                transform: scale(1.2);
                color: var(--white);
            }

            /* Efectos de hover para el botón scroll to top */
            .scroll-to-top:hover {
                background: var(--accent-hover) !important;
                transform: translateY(-3px);
                box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
            }

            /* Efectos de animación para elementos específicos */
            .fade-in-up {
                animation: fadeInUp 0.8s ease-out;
            }

            .fade-in-down {
                animation: fadeInDown 0.8s ease-out;
            }

            .fade-in-left {
                animation: fadeInLeft 0.8s ease-out;
            }

            .fade-in-right {
                animation: fadeInRight 0.8s ease-out;
            }

            @keyframes fadeInDown {
                from {
                    opacity: 0;
                    transform: translateY(-30px);
                }

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

            @keyframes fadeInLeft {
                from {
                    opacity: 0;
                    transform: translateX(-30px);
                }

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

            @keyframes fadeInRight {
                from {
                    opacity: 0;
                    transform: translateX(30px);
                }

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

            /* Efectos de hover para iconos */
            .fas,
            .fab {
                transition: var(--transition);
            }

            .service-highlight:hover .fas,
            .service-highlight:hover .fab {
                transform: scale(1.2);
                color: var(--white);
            }

            /* Efectos de hover para elementos de la empresa */
            .image-container-pilares:hover img {
                transform: scale(1.05);
                transition: var(--transition);
            }

            /* Mejoras en la navegación móvil */
            @media (max-width: 768px) {
                .navbar-nav {
                    text-align: center;
                }

                .navbar-nav .nav-link {
                    padding: 0.5rem 1rem;
                }

                .navbar-nav .nav-link:last-child {
                    margin-bottom: 0;
                }

                .masthead-heading {
                    font-size: 2.5rem;
                }

                .masthead-subheading {
                    font-size: 1.1rem;
                }

                .border-left-green-title {
                    font-size: 2.5rem;
                }

                .full-width-section {
                    padding: 2rem 0;
                }

                #page-empresa {
                    padding: 2rem 0;
                }

                .service-highlights {
                    flex-direction: column;
                    gap: 1rem;
                    justify-content: flex-start;
                    padding-left: 1rem;
                }

                .service-highlight {
                    font-size: 0.9rem;
                    padding: 0.5rem 1rem;
                }

                .side-nav-control {
                    display: none;
                }

                .nav-dot {
                    width: 12px;
                    height: 12px;
                }
            }

            @media (max-width: 992px) {
                .masthead {
                    padding: 0 1rem;
                }

                .service-highlights {
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    gap: 1rem;
                    padding-left: 1rem;
                }

                .navbar-brand img {
                    max-height: 40px;
                }

                .nav-link {
                    font-size: 1rem;
                    padding: 0.5rem 1rem !important;
                }
            }

            @media (max-width: 576px) {
                .masthead-heading {
                    font-size: 2rem;
                }

                .service-highlight {
                    font-size: 0.8rem;
                    padding: 0.4rem 0.8rem;
                }

                .btn-primary {
                    font-size: 0.9rem;
                    padding: 0.75rem 1.5rem;
                }

                .border-left-green-title {
                    font-size: 2rem;
                    padding-left: 1rem;
                }
            }

            /* Asegurar que todas las secciones ocupen 100% de altura */
            .page-section {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                padding-top: 80px;
            }

            /* Mejorar el espaciado del contenido en secciones */
            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 15px;
            }

            /* Efectos de hover mejorados para navegación */
            .navbar-nav .nav-link {
                position: relative;
                transition: all 0.3s ease;
                margin: 0 0.5rem;
            }

            .navbar-nav .nav-link:hover {
                transform: translateY(-2px);
            }

            .navbar-nav .nav-link.active {
                transform: translateY(-2px);
                font-weight: 700;
            }

            /* Efectos de parallax mejorados */
            .full-width-section::before {
                will-change: transform;
                transform: translateZ(0);
                backface-visibility: hidden;
            }

            /* Optimización para dispositivos móviles */
            @media (max-width: 768px) {
                .full-width-section::before {
                    background-attachment: scroll;
                }

                .masthead::before {
                    background-attachment: scroll;
                }
            }

            /* Botones mejorados con colores de Gradotech */
            .btn-primary {
                background: var(--gradient-accent);
                border: none;
                padding: 12px 30px;
                border-radius: 50px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 1px;
                transition: var(--transition);
                box-shadow: var(--shadow-soft);
                position: relative;
                overflow: hidden;
            }

            .btn-primary::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: var(--transition);
            }

            .btn-primary:hover::before {
                left: 100%;
            }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow-strong);
                background: var(--gradient-primary);
            }

            /* Servicios destacados en el header - COLOR VERDE */
            .service-highlights {
                display: flex;
                justify-content: flex-start;
                margin-top: 3rem;
                flex-wrap: wrap;
                gap: 1rem;
                padding-left: 0;
                align-items: flex-start;
            }

            .service-highlight {
                background: rgba(95, 177, 52, 0.9);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(95, 177, 52, 0.3);
                border-radius: 15px;
                padding: 1rem 1.5rem;
                color: var(--white);
                font-weight: 500;
                transition: var(--transition);
                cursor: pointer;
                position: relative;
                overflow: hidden;
                box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
            }

            .service-highlight::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 4px;
                height: 100%;
                background: var(--white);
                transition: var(--transition);
            }

            .service-highlight:hover {
                background: rgba(95, 177, 52, 1);
                transform: translateY(-5px);
                border-color: var(--white);
                box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
            }

            .service-highlight:hover::before {
                width: 100%;
                opacity: 0.3;
            }

            /* Efecto de brillo para los service highlights */
            .service-highlight::after {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: linear-gradient(45deg,
                        transparent,
                        rgba(255, 255, 255, 0.1),
                        transparent);
                transform: rotate(45deg);
                transition: all 0.6s ease;
                opacity: 0;
            }

            .service-highlight:hover::after {
                opacity: 1;
                transform: rotate(45deg) translate(50%, 50%);
            }

            /* Efectos de hover para iconos en service highlights */
            .service-highlight .fas,
            .service-highlight .fab {
                transition: var(--transition);
                margin-right: 0.5rem;
            }

            .service-highlight:hover .fas,
            .service-highlight:hover .fab {
                transform: scale(1.2);
                color: var(--white);
            }

            /* Efectos de hover para enlaces de contacto */
            .contact-form a:hover {
                color: var(--accent-hover);
                text-decoration: underline;
            }

            .contact-form i {
                color: var(--primary-color);
                width: 20px;
            }

            /* Efectos de hover para elementos de la empresa */
            .empresa-content:hover {
                transform: translateY(-2px);
                transition: var(--transition);
            }

            .image-container-pilares:hover img {
                transform: scale(1.05);
                transition: var(--transition);
            }

            /* Mejoras en la accesibilidad */
            .nav-link:focus,
            .btn:focus {
                outline: 2px solid var(--primary-color);
                outline-offset: 2px;
            }

            /* Efectos de hover para elementos de partners */
            .partner-card:hover .card-text-empresa {
                color: var(--text-primary);
            }

            /* Efectos de scroll reveal adicionales */
            .fade-in-up {
                animation: fadeInUp 0.8s ease-out;
            }

            .fade-in-down {
                animation: fadeInDown 0.8s ease-out;
            }

            .fade-in-left {
                animation: fadeInLeft 0.8s ease-out;
            }

            .fade-in-right {
                animation: fadeInRight 0.8s ease-out;
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

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

            @keyframes fadeInDown {
                from {
                    opacity: 0;
                    transform: translateY(-30px);
                }

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

            @keyframes fadeInLeft {
                from {
                    opacity: 0;
                    transform: translateX(-30px);
                }

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

            @keyframes fadeInRight {
                from {
                    opacity: 0;
                    transform: translateX(30px);
                }

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

            /* Títulos elegantes con línea vertical al costado */
            .elegant-title {
                font-family: 'Roboto', sans-serif;
                font-size: 3.5rem;
                font-weight: 600;
                color: var(--text-primary);
                margin-bottom: 0;
                text-transform: none;
                letter-spacing: -0.5px;
                line-height: 1;
                position: relative;
                padding-left: 2rem;
                text-align: left;
            }

            .elegant-subtitle {
                font-family: 'Roboto', sans-serif;
                font-size: 1.3rem;
                font-weight: 300;
                color: var(--text-secondary);
                margin-bottom: 2rem;
                margin-top: 0;
                text-transform: none;
                letter-spacing: 0.2px;
                line-height: 1.1;
                opacity: 0.8;
                text-align: left;
                padding-left: 2rem;
                position: relative;
            }

            /* Contenedor para título y subtítulo con línea vertical compartida */
            .title-container {
                position: relative;
                padding-left: 2rem;
                margin-bottom: 2rem;
            }

            .title-container::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 6px;
                background: var(--gradient-primary);
                border-radius: 3px;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                z-index: 1;
            }

            .title-container .elegant-title {
                padding-left: 0;
                margin-bottom: 0;
            }

            .title-container .elegant-subtitle {
                padding-left: 0;
                margin-bottom: 0;
                margin-top: 0;
            }

            /* Animación para los títulos elegantes */
            .elegant-title {
                opacity: 0;
                transform: translateY(30px);
                animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
            }

            .elegant-subtitle {
                opacity: 0;
                transform: translateY(20px);
                animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
            }

            @keyframes elegantTitleFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

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

            @keyframes elegantSubtitleFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

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

            /* Responsividad para títulos elegantes */
            @media (max-width: 768px) {
                .elegant-title {
                    font-size: 2.5rem;
                }

                .elegant-subtitle {
                    font-size: 1.1rem;
                }

                .title-container {
                    padding-left: 1.5rem;
                }
            }

            @media (max-width: 576px) {
                .elegant-title {
                    font-size: 2rem;
                }

                .elegant-subtitle {
                    font-size: 1rem;
                }

                .title-container {
                    padding-left: 1rem;
                }
            }

            /* Eliminar contornos de navegación */
            .navbar-nav .nav-link,
            .navbar-nav .nav-link:focus,
            .navbar-nav .nav-link:active,
            .navbar-nav .nav-link:hover {
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
            }

            .navbar-nav .nav-link:focus-visible {
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
            }

            /* Estilos para la sección Nosotros */
            .about-card {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 20px;
                padding: 2.5rem;
                margin-bottom: 2rem;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                border: 1px solid rgba(95, 177, 52, 0.1);
                position: relative;
                overflow: hidden;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .about-card::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: var(--gradient-primary);
            }

            .about-icon {
                width: 60px;
                height: 60px;
                background: var(--gradient-primary);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1.5rem;
                position: relative;
                z-index: 1;
                flex-shrink: 0;
            }

            .about-icon i {
                font-size: 1.5rem;
                color: var(--white);
            }

            .about-card h3 {
                color: var(--primary-color);
                font-weight: 600;
                margin-bottom: 1rem;
                font-size: 1.5rem;
                position: relative;
                z-index: 1;
                flex-shrink: 0;
            }

            .about-text {
                color: var(--text-secondary);
                line-height: 1.8;
                margin-bottom: 0;
                position: relative;
                z-index: 1;
                flex-grow: 1;
            }

            /* Tarjetas de Misión y Visión */
            .mission-vision-card {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 20px;
                padding: 2.5rem;
                margin-bottom: 2rem;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                border: 1px solid rgba(95, 177, 52, 0.1);
                position: relative;
                overflow: hidden;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .mission-vision-card::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: var(--gradient-primary);
            }

            .card-header-mv {
                display: flex;
                align-items: center;
                margin-bottom: 1.5rem;
                position: relative;
                z-index: 1;
                flex-shrink: 0;
            }

            .card-header-mv i {
                font-size: 2rem;
                color: var(--primary-color);
                margin-right: 1rem;
            }

            .card-header-mv h3 {
                color: var(--primary-color);
                font-weight: 600;
                margin: 0;
                font-size: 1.5rem;
            }

            .mission-vision-card p {
                color: var(--text-secondary);
                line-height: 1.8;
                margin-bottom: 0;
                position: relative;
                z-index: 1;
                flex-grow: 1;
            }

            /* Responsive para la sección Nosotros */
            @media (max-width: 768px) {

                .about-card,
                .mission-vision-card {
                    padding: 2rem;
                }

                .about-icon {
                    width: 50px;
                    height: 50px;
                }

                .about-icon i {
                    font-size: 1.2rem;
                }
            }

            /* Grid moderno para servicios */
            .services-grid {
                display: flex;
                flex-wrap: wrap;
                gap: 2.5rem 2rem;
                justify-content: center;
            }

            .service-modern-card {
                background: rgba(255, 255, 255, 0.7);
                border-radius: 2rem;
                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border: 1px solid rgba(95, 177, 52, 0.15);
                padding: 2.5rem 2rem 2rem 2rem;
                text-align: center;
                transition: box-shadow 0.3s, transform 0.3s;
                min-height: 420px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
            }

            .service-modern-card:hover {
                box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
                transform: translateY(-6px) scale(1.03);
            }

            .service-icon {
                background: var(--gradient-primary);
                border-radius: 50%;
                width: 80px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1.5rem;
                box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
            }

            .service-icon i {
                color: #fff;
                font-size: 2.5rem;
            }

            .service-title {
                font-size: 1.4rem;
                font-weight: 700;
                color: var(--primary-color);
                margin-bottom: 1rem;
                margin-top: 0.5rem;
            }

            .service-desc {
                color: var(--text-secondary);
                font-size: 1.08rem;
                margin-bottom: 2rem;
                flex-grow: 1;
            }

            .btn-modern {
                background: var(--gradient-primary);
                color: #fff;
                border: none;
                border-radius: 2rem;
                padding: 0.7rem 2.2rem;
                font-weight: 600;
                font-size: 1.08rem;
                box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
                transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
                position: relative;
                overflow: hidden;
            }

            .btn-modern:hover {
                background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
                color: #fff;
                box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
                transform: scale(1.05);
            }

            @media (max-width: 992px) {
                .service-modern-card {
                    min-height: 380px;
                    padding: 2rem 1.2rem 1.5rem 1.2rem;
                }

                .service-icon {
                    width: 65px;
                    height: 65px;
                }

                .service-icon i {
                    font-size: 2rem;
                }
            }

            @media (max-width: 768px) {
                .services-grid {
                    gap: 1.5rem 0.5rem;
                }

                .service-modern-card {
                    min-height: 320px;
                    padding: 1.5rem 0.7rem 1.2rem 0.7rem;
                }

                .service-title {
                    font-size: 1.1rem;
                }

                .service-desc {
                    font-size: 0.98rem;
                }

                .btn-modern {
                    font-size: 0.98rem;
                    padding: 0.6rem 1.5rem;
                }
            }

            /* Cards modernas para servicios con imágenes en colores */
            .service-card-modern {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                transition: all 0.2s ease;
                border: 1px solid rgba(95, 177, 52, 0.1);
                position: relative;
            }

            .service-card-modern:hover {
                transform: translateY(-5px) scale(1.01);
                box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
                border-color: var(--primary-color);
            }

            .service-image-container {
                position: relative;
                overflow: hidden;
                height: 250px;
            }

            .service-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease;
                filter: brightness(0.9) contrast(1.1);
            }

            .service-card-modern:hover .service-image {
                transform: scale(1.05);
                filter: brightness(1) contrast(1.2);
            }

            .service-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.2s ease;
            }

            .service-card-modern:hover .service-overlay {
                opacity: 1;
            }

            .service-icon-overlay {
                font-size: 4rem;
                color: white;
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                transform: scale(0.8);
                transition: transform 0.2s ease;
            }

            .service-card-modern:hover .service-icon-overlay {
                transform: scale(1);
            }

            .service-content {
                padding: 2rem;
                position: relative;
            }

            .service-content::before {
                content: '';
                position: absolute;
                top: 0;
                left: 2rem;
                right: 2rem;
                height: 3px;
                background: var(--gradient-primary);
                transform: scaleX(0);
                transition: transform 0.2s ease;
            }

            .service-card-modern:hover .service-content::before {
                transform: scaleX(1);
            }

            .service-title-modern {
                color: var(--primary-color);
                font-size: 1.5rem;
                font-weight: 700;
                margin-bottom: 1rem;
                position: relative;
                z-index: 1;
            }

            .service-text-modern {
                color: var(--text-secondary);
                line-height: 1.7;
                margin-bottom: 1.5rem;
                font-size: 1rem;
            }

            .btn-service-modern {
                background: var(--gradient-primary);
                color: white;
                border: none;
                border-radius: 25px;
                padding: 0.8rem 2rem;
                font-weight: 600;
                font-size: 1rem;
                transition: all 0.2s ease;
                position: relative;
                overflow: hidden;
                box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
            }

            .btn-service-modern::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: left 0.3s ease;
            }

            .btn-service-modern:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
            }

            .btn-service-modern:hover::before {
                left: 100%;
            }

            /* Responsive para servicios modernos */
            @media (max-width: 768px) {
                .service-image-container {
                    height: 220px;
                }

                .service-content {
                    padding: 1.5rem;
                }

                .service-title-modern {
                    font-size: 1.3rem;
                }

                .service-text-modern {
                    font-size: 0.95rem;
                }

                .service-icon-overlay {
                    font-size: 3rem;
                }
            }

            /* Selector de idioma */
            .language-selector {
                position: fixed;
                top: 15px;
                right: 15px;
                z-index: 9999 !important;
                background: rgba(95, 177, 52, 0.9);
                backdrop-filter: blur(8px);
                border-radius: 20px;
                padding: 6px;
                box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
                transition: all 0.3s ease;
                display: flex;
                gap: 4px;
                align-items: center;
            }

            .language-btn {
                background: transparent;
                border: none;
                padding: 6px 12px;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.3s ease;
                outline: none;
                box-shadow: none;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 0.9rem;
                color: rgba(255, 255, 255, 0.8);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .language-btn.active {
                background: rgba(255, 255, 255, 0.2);
                color: white;
                font-weight: 700;
            }

            .language-btn:hover:not(.active) {
                background: rgba(255, 255, 255, 0.1);
                color: white;
                transform: scale(1.05);
            }

            /* Estilos del formulario de contacto moderno */
            .contact-container {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 20px;
                padding: 3rem;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                margin: 2rem 0;
            }

            /* Estilos para la sección de información de contacto */
            .contact-info-wrapper {
                padding-right: 2rem;
            }

            .contact-title {
                color: #333;
                font-size: 2rem;
                font-weight: 700;
                margin-bottom: 1rem;
            }

            .contact-subtitle {
                color: #666;
                font-size: 1.1rem;
                margin-bottom: 2rem;
            }

            .contact-details {
                margin-bottom: 2rem;
            }

            .contact-item {
                display: flex;
                align-items: flex-start;
                gap: 1rem;
                margin-bottom: 1.5rem;
                padding: 1rem;
                border-radius: 12px;
                background: rgba(95, 177, 52, 0.05);
                transition: all 0.3s ease;
            }

            .contact-item:hover {
                background: rgba(95, 177, 52, 0.1);
                transform: translateX(5px);
            }

            .contact-item i {
                font-size: 1.5rem;
                color: #5FB134;
                margin-top: 0.2rem;
            }

            .contact-item h5 {
                color: #333;
                font-weight: 600;
                margin-bottom: 0.3rem;
            }

            .contact-item p {
                color: #666;
                margin: 0;
                line-height: 1.5;
            }

            .social-links {
                display: flex;
                gap: 1rem;
                margin-top: 2rem;
            }

            .social-link {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.2);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .social-link:hover {
                background: #4a8f2a;
                transform: translateY(-3px);
                color: white;
            }

            /* Estilos para el formulario */
            .form-wrapper {
                padding-left: 2rem;
            }

            .form-title {
                color: #333;
                font-size: 2rem;
                font-weight: 700;
                margin-bottom: 1rem;
            }

            .form-subtitle {
                color: #666;
                font-size: 1.1rem;
                margin-bottom: 2rem;
            }

            .modern-form .form-group {
                margin-bottom: 1.5rem;
            }

            .modern-form label {
                display: block;
                color: #333;
                font-weight: 500;
                margin-bottom: 0.5rem;
            }

            .modern-form .input-container {
                position: relative;
                background: #f8f9fa;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                transition: all 0.3s ease;
            }

            .modern-form .input-container:hover,
            .modern-form .input-container:focus-within {
                border-color: #5FB134;
                background: white;
            }

            .modern-form .input-container input,
            .modern-form .input-container select,
            .modern-form .input-container textarea {
                width: 100%;
                padding: 0.75rem 1rem 0.75rem 3rem;
                border: none;
                background: transparent;
                font-size: 1rem;
                color: #333;
                outline: none;
            }

            .modern-form .input-container textarea {
                min-height: 140px;
                resize: vertical;
            }

            .modern-form .input-icon {
                position: absolute;
                left: 1rem;
                top: 50%;
                transform: translateY(-50%);
                color: #5FB134;
                font-size: 1.1rem;
            }

            .modern-form .input-container textarea+.input-icon {
                top: 1rem;
                transform: none;
            }

            .modern-form .error-message {
                color: #dc3545;
                font-size: 0.875rem;
                margin-top: 0.5rem;
                display: none;
            }

            .modern-form .privacy-check {
                display: flex;
                align-items: flex-start;
                gap: 1rem;
                margin-top: 1rem;
            }

            .modern-form .privacy-check input[type="checkbox"] {
                margin-top: 0.3rem;
            }

            .modern-form .privacy-check label {
                font-size: 0.9rem;
                color: #666;
                font-weight: normal;
                line-height: 1.5;
            }

            .modern-form .privacy-check a {
                color: #5FB134;
                text-decoration: none;
            }

            .modern-form .privacy-check a:hover {
                text-decoration: underline;
            }

            .modern-form .btn-primary {
                background: rgba(255, 255, 255, 0.2);
                border: none;
                padding: 1rem 2rem;
                font-size: 1.1rem;
                font-weight: 500;
                border-radius: 8px;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
            }

            .modern-form .btn-primary:hover {
                background: #4a8f2a;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
            }

            .modern-form .btn-primary i {
                font-size: 1.2rem;
            }

            /* Responsive */
            @media (max-width: 991.98px) {
                .contact-container {
                    padding: 2rem;
                }

                .contact-info-wrapper {
                    padding-right: 0;
                    margin-bottom: 2rem;
                }

                .form-wrapper {
                    padding-left: 0;
                }

                .contact-title,
                .form-title {
                    font-size: 1.75rem;
                }
            }

            @media (max-width: 767.98px) {
                .contact-container {
                    padding: 1.5rem;
                }

                .contact-item {
                    padding: 0.75rem;
                }

                .modern-form .input-container input,
                .modern-form .input-container select,
                .modern-form .input-container textarea {
                    font-size: 0.95rem;
                }
            }

            /* Títulos elegantes con línea vertical al costado */
            .elegant-title {
                font-family: 'Roboto', sans-serif;
                font-size: 3.5rem;
                font-weight: 600;
                color: var(--text-primary);
                margin-bottom: 0;
                text-transform: none;
                letter-spacing: -0.5px;
                line-height: 1;
                position: relative;
                padding-left: 2rem;
                text-align: left;
            }

            .elegant-subtitle {
                font-family: 'Roboto', sans-serif;
                font-size: 1.3rem;
                font-weight: 300;
                color: var(--text-secondary);
                margin-bottom: 2rem;
                margin-top: 0;
                text-transform: none;
                letter-spacing: 0.2px;
                line-height: 1.1;
                opacity: 0.8;
                text-align: left;
                padding-left: 2rem;
                position: relative;
            }

            /* Contenedor para título y subtítulo con línea vertical compartida */
            .title-container {
                position: relative;
                padding-left: 2rem;
                margin-bottom: 2rem;
            }

            .title-container::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 6px;
                background: var(--gradient-primary);
                border-radius: 3px;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                z-index: 1;
            }

            .title-container .elegant-title {
                padding-left: 0;
                margin-bottom: 0;
            }

            .title-container .elegant-subtitle {
                padding-left: 0;
                margin-bottom: 0;
                margin-top: 0;
            }

            /* Animación para los títulos elegantes */
            .elegant-title {
                opacity: 0;
                transform: translateY(30px);
                animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
            }

            .elegant-subtitle {
                opacity: 0;
                transform: translateY(20px);
                animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
            }

            @keyframes elegantTitleFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

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

            @keyframes elegantSubtitleFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

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

            /* Responsividad para títulos elegantes */
            @media (max-width: 768px) {
                .elegant-title {
                    font-size: 2.5rem;
                }

                .elegant-subtitle {
                    font-size: 1.1rem;
                }

                .title-container {
                    padding-left: 1.5rem;
                }
            }

            @media (max-width: 576px) {
                .elegant-title {
                    font-size: 2rem;
                }

                .elegant-subtitle {
                    font-size: 1rem;
                }

                .title-container {
                    padding-left: 1rem;
                }
            }

            /* Eliminar contornos de navegación */
            .navbar-nav .nav-link,
            .navbar-nav .nav-link:focus,
            .navbar-nav .nav-link:active,
            .navbar-nav .nav-link:hover {
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
            }

            .navbar-nav .nav-link:focus-visible {
                outline: none !important;
                border: none !important;
                box-shadow: none !important;
            }

            /* Estilos para la sección Nosotros */
            .about-card {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 20px;
                padding: 2.5rem;
                margin-bottom: 2rem;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                border: 1px solid rgba(95, 177, 52, 0.1);
                position: relative;
                overflow: hidden;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .about-card::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: var(--gradient-primary);
            }

            .about-icon {
                width: 60px;
                height: 60px;
                background: var(--gradient-primary);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1.5rem;
                position: relative;
                z-index: 1;
                flex-shrink: 0;
            }

            .about-icon i {
                font-size: 1.5rem;
                color: var(--white);
            }

            .about-card h3 {
                color: var(--primary-color);
                font-weight: 600;
                margin-bottom: 1rem;
                font-size: 1.5rem;
                position: relative;
                z-index: 1;
                flex-shrink: 0;
            }

            .about-text {
                color: var(--text-secondary);
                line-height: 1.8;
                margin-bottom: 0;
                position: relative;
                z-index: 1;
                flex-grow: 1;
            }

            /* Tarjetas de Misión y Visión */
            .mission-vision-card {

                /* Variables CSS para la nueva paleta de colores de Gradotech */
                :root {
                    --primary-color: #5FB134;
                    /* Verde Gradotech */
                    --secondary-color: #4a8f2a;
                    /* Verde más oscuro */
                    --accent-color: #5FB134;
                    /* Verde Gradotech */
                    --accent-hover: #6bc23a;
                    /* Verde hover más claro */
                    --dark-bg: #1a1a1a;
                    /* Fondo oscuro elegante */
                    --light-bg: #f8f9fa;
                    /* Fondo claro */
                    --text-primary: #212121;
                    /* Texto principal */
                    --text-secondary: #757575;
                    /* Texto secundario */
                    --white: #ffffff;
                    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
                    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
                    --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
                    --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
                    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                /* Ocultar scrollbar hasta hacer scroll */
                html {
                    scrollbar-width: none;
                    /* Firefox */
                    -ms-overflow-style: none;
                    /* IE and Edge */
                }

                html::-webkit-scrollbar {
                    display: none;
                    /* Chrome, Safari, Opera */
                }

                html.scrolling {
                    scrollbar-width: auto;
                    -ms-overflow-style: auto;
                }

                html.scrolling::-webkit-scrollbar {
                    display: block;
                    width: 8px;
                }

                html.scrolling::-webkit-scrollbar-track {
                    background: #f1f1f1;
                }

                html.scrolling::-webkit-scrollbar-thumb {
                    background: var(--primary-color);
                    border-radius: 4px;
                }

                html.scrolling::-webkit-scrollbar-thumb:hover {
                    background: var(--secondary-color);
                }

                body {
                    font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
                    color: var(--text-primary);
                    line-height: 1.6;
                    overflow-x: hidden;
                    opacity: 0;
                    transition: opacity 0.5s ease;
                }

                body.loaded {
                    opacity: 1;
                }

                /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
                .navbar {
                    background: #f8f9fa !important;
                    backdrop-filter: blur(10px);
                    transition: var(--transition);
                    box-shadow: none;
                }

                .navbar.scrolled {
                    background: rgba(26, 26, 26, 0.98) !important;
                    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
                }

                .navbar-brand img {
                    transition: var(--transition);
                    max-height: 50px;
                }

                .navbar-brand:hover img {
                    transform: scale(1.05);
                }

                .nav-link {
                    position: relative;
                    transition: var(--transition);
                    font-weight: 500;
                    color: var(--white) !important;
                    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                    font-size: 1.1rem;
                    padding: 0.75rem 1.2rem !important;
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                }

                .nav-link:focus {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                }

                .nav-link::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    width: 0;
                    height: 2px;
                    background: var(--white);
                    transition: var(--transition);
                    transform: translateX(-50%);
                }

                .nav-link:hover::after {
                    width: 100%;
                }

                .nav-link:hover {
                    color: var(--white) !important;
                    opacity: 0.8;
                }

                .nav-link.active {
                    color: var(--white) !important;
                    font-weight: 600;
                }

                .nav-link.active::after {
                    width: 100%;
                    background: var(--white);
                }

                /* Header mejorado con colores de Gradotech */
                .masthead {
                    background: var(--gradient-primary);
                    position: relative;
                    height: 100vh;
                    min-height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    padding-top: 0;
                }

                /* Efecto de ondas animadas */
                .masthead::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
                    opacity: 0.3;
                    animation: float 20s ease-in-out infinite;
                }

                /* Nuevo efecto de ondas animadas */
                .waves-container {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    z-index: 1;
                }

                .wave {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 200%;
                    height: 100%;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23ffffff"/></path></svg>');
                    background-size: 1200px 100%;
                    animation: wave 25s linear infinite;
                }

                .wave:nth-child(2) {
                    bottom: 10%;
                    animation: wave 20s linear infinite;
                    opacity: 0.5;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
                }

                .wave:nth-child(3) {
                    bottom: 20%;
                    animation: wave 15s linear infinite;
                    opacity: 0.2;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
                }

                @keyframes wave {
                    0% {
                        transform: translateX(0) translateZ(0) scaleY(1);
                    }

                    50% {
                        transform: translateX(-25%) translateZ(0) scaleY(0.8);
                    }

                    100% {
                        transform: translateX(-50%) translateZ(0) scaleY(1);
                    }
                }

                @keyframes float {

                    0%,
                    100% {
                        transform: translateY(0px) rotate(0deg);
                    }

                    50% {
                        transform: translateY(-20px) rotate(180deg);
                    }
                }

                .masthead .container {
                    position: relative;
                    z-index: 10;
                    text-align: left;
                    padding-left: 2rem;
                    max-width: 1200px;
                    margin: 0 auto;
                }

                .masthead-heading {
                    font-size: 4.5rem;
                    font-weight: 800;
                    color: var(--white);
                    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
                    margin-bottom: 1.5rem;
                    letter-spacing: -1px;
                    line-height: 1.1;
                    text-transform: uppercase;
                    opacity: 0;
                    transform: translateY(30px);
                    animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
                    text-align: left;
                }

                .masthead-subheading {
                    font-size: 2rem;
                    color: var(--white) !important;
                    margin-bottom: 2.5rem;
                    opacity: 0.9;
                    font-weight: 300;
                    letter-spacing: 0.5px;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                    opacity: 0;
                    transform: translateY(30px);
                    animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
                    text-align: left;
                }

                @keyframes elegantFadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                /* Secciones que ocupan 100% de altura con efecto parallax */
                .full-width-section {
                    min-height: 100vh;
                    padding: 80px 0;
                    position: relative;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                }

                .full-width-section::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-attachment: fixed;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    opacity: 0.05;
                    z-index: -1;
                    transform: translateZ(0);
                }

                .full-width-section:nth-child(even) {
                    background: var(--light-bg);
                }

                .full-width-section:nth-child(even)::before {
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
                }

                .full-width-section:nth-child(odd)::before {
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
                }

                /* Sección empresa específica - 100% altura */
                #page-empresa {
                    min-height: 100vh;
                    height: auto;
                    padding: 120px 0 80px 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    position: relative;
                    background: var(--white);
                }

                .empresa-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                }

                /* Títulos de sección mejorados */
                .border-left-green-title {
                    font-size: 3.5rem;
                    font-weight: 700;
                    color: var(--text-primary);
                    position: relative;
                    padding-left: 2rem;
                    margin-bottom: 3rem;
                    text-transform: uppercase;
                    letter-spacing: -1px;
                }

                .border-left-green-title::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 6px;
                    background: var(--gradient-primary);
                    border-radius: 3px;
                }

                /* Carrusel horizontal de alianzas */
                .alliances-carousel {
                    position: relative;
                    height: 220px;
                    overflow: hidden;
                    background: transparent;
                    border-radius: 20px;
                    padding: 2rem;
                    margin: 2rem 0;
                }

                .alliances-track {
                    display: flex;
                    animation: scrollHorizontal 60s linear infinite;
                    gap: 4rem;
                    align-items: center;
                    padding: 1rem 0;
                    width: max-content;
                    will-change: transform;
                }

                .alliances-track:hover {
                    animation-play-state: paused;
                }

                .alliance-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-width: 200px;
                    height: 140px;
                    padding: 1.5rem;
                    background: transparent;
                    border-radius: 15px;
                    transition: var(--transition);
                    flex-shrink: 0;
                    position: relative;
                }

                .alliance-item::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(255, 255, 255, 0.05);
                    border-radius: 15px;
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    transition: var(--transition);
                    opacity: 0;
                }

                .alliance-item:hover::before {
                    opacity: 1;
                    background: rgba(255, 255, 255, 0.1);
                    border-color: rgba(95, 177, 52, 0.3);
                }

                .alliance-item:hover {
                    transform: scale(1.05);
                }

                .alliance-item img {
                    max-width: 160px;
                    max-height: 90px;
                    object-fit: contain;
                    /* filter: grayscale(100%) brightness(0.9); */
                    transition: var(--transition);
                    position: relative;
                    z-index: 1;
                }

                .alliance-item:hover img {
                    /* filter: grayscale(0%) brightness(1.1); */
                    transform: scale(1.1);
                }

                @keyframes scrollHorizontal {
                    0% {
                        transform: translateX(0);
                    }

                    100% {
                        transform: translateX(calc(-33.333% * 3));
                    }
                }

                /* Controles del carrusel horizontal - OCULTOS */
                .carousel-controls {
                    display: none !important;
                }

                .carousel-btn {
                    display: none !important;
                }

                .carousel-btn:hover {
                    display: none !important;
                }

                .carousel-btn:disabled {
                    display: none !important;
                }

                /* Control de navegación lateral como Black-up - OCULTO */
                .side-nav-control {
                    display: none !important;
                }

                .nav-dot {
                    display: none !important;
                }

                .nav-dot:hover,
                .nav-dot.active {
                    display: none !important;
                }

                .nav-dot-label {
                    display: none !important;
                }

                .nav-dot:hover .nav-dot-label {
                    display: none !important;
                }

                /* Efectos de scroll mejorados */
                .scroll-reveal {
                    opacity: 0;
                    transform: translateY(50px);
                    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .scroll-reveal.revealed {
                    opacity: 1;
                    transform: translateY(0);
                }

                .scroll-reveal.from-left {
                    transform: translateX(-50px);
                }

                .scroll-reveal.from-right {
                    transform: translateX(50px);
                }

                .scroll-reveal.from-bottom {
                    transform: translateY(50px);
                }

                .scroll-reveal.scale-in {
                    transform: scale(0.8);
                }

                /* Responsive para el carrusel horizontal */
                @media (max-width: 768px) {
                    .alliances-carousel {
                        height: 150px;
                        padding: 1rem;
                        margin: 1rem 0;
                    }

                    .alliance-item {
                        min-width: 120px;
                        height: 80px;
                        padding: 1rem;
                    }

                    .alliance-item img {
                        max-height: 50px;
                    }

                    .carousel-controls {
                        display: none !important;
                    }

                    .carousel-btn {
                        display: none !important;
                    }

                    .masthead-heading {
                        font-size: 2.5rem;
                    }

                    .masthead-subheading {
                        font-size: 1.3rem;
                    }

                    .side-nav-control {
                        display: none !important;
                    }

                    .nav-dot {
                        display: none !important;
                    }
                }

                /* Cards de servicios mejorados */
                .card {
                    border: none;
                    border-radius: 20px;
                    overflow: hidden;
                    transition: var(--transition);
                    box-shadow: var(--shadow-soft);
                    background: var(--white);
                }

                .card:hover {
                    transform: translateY(-10px);
                    box-shadow: var(--shadow-strong);
                }

                .card-img-top {
                    transition: var(--transition);
                    height: 250px;
                    object-fit: cover;
                }

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

                .card-body {
                    padding: 2rem;
                }

                .card-title {
                    color: var(--primary-color);
                    font-weight: 700;
                    font-size: 1.5rem;
                    margin-bottom: 1rem;
                }

                .card-text {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 1.5rem;
                }

                /* Efectos de imagen mejorados */
                .img-grayscale {
                    filter: grayscale(100%);
                    transition: var(--transition);
                }

                .img-grayscale:hover {
                    /* filter: grayscale(0%) brightness(1.1); */
                }

                /* Sección de clientes */
                .client-logo {
                    transition: var(--transition);
                    filter: grayscale(100%);
                    opacity: 0.7;
                }

                .client-logo:hover {
                    filter: grayscale(0%);
                    opacity: 1;
                    transform: scale(1.1);
                    box-shadow: var(--shadow-strong);
                    border-color: var(--primary-color);
                }

                /* Sección de partners */
                .partner-card {
                    background: var(--white);
                    border-radius: 15px;
                    padding: 2rem;
                    box-shadow: var(--shadow-soft);
                    transition: var(--transition);
                    border: 1px solid rgba(0, 0, 0, 0.05);
                }

                .partner-card:hover {
                    transform: translateY(-5px);
                    box-shadow: var(--shadow-strong);
                    border-color: var(--primary-color);
                }

                .partner-card img {
                    transition: var(--transition);
                    filter: grayscale(100%);
                }

                .partner-card:hover img {
                    filter: grayscale(0%);
                    transform: scale(1.05);
                }

                /* Formulario de contacto mejorado - Diseño limpio y profesional */
                .contact-form {
                    background: #ffffff;
                    padding: 3rem;
                    border: 1px solid #e0e0e0;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                    margin: 10% 0;
                    max-width: 160px;
                }

                .form-wrapper h3 {
                    color: #333;
                    font-size: 1.8rem;
                    font-weight: 600;
                    margin-bottom: 0.5rem;
                    text-align: left;
                }

                .form-wrapper p {
                    color: #666;
                    font-size: 1rem;
                    margin-bottom: 2rem;
                    text-align: left;
                }

                .form-group {
                    margin-bottom: 1.5rem;
                    position: relative;
                }

                /* Contenedor de input mejorado */
                .input-container {
                    position: relative;
                    background: #ffffff;
                    border: 1px solid #d0d0d0;
                    transition: all 0.2s ease;
                    height: 48px;
                    display: flex;
                    align-items: center;
                }

                .input-container:hover {
                    border-color: #5FB134;
                }

                .input-container.focused {
                    border-color: #5FB134;
                    border-width: 2px;
                }

                .input-container.error {
                    border-color: #dc3545;
                    border-width: 2px;
                }

                /* Inputs mejorados */
                .modern-input,
                .modern-textarea,
                .modern-select {
                    width: 100%;
                    border: none;
                    background: transparent;
                    padding: 0.75rem 1rem 0.75rem 3rem;
                    font-size: 0.95rem;
                    color: #333;
                    outline: none;
                    transition: all 0.3s ease;
                    height: 100%;
                    text-align: left;
                }

                .modern-input::placeholder,
                .modern-textarea::placeholder {
                    color: #6c757d;
                    font-size: 0.9rem;
                    text-align: left;
                    opacity: 0.8;
                }

                .modern-textarea {
                    height: 140px;
                    resize: vertical;
                    padding-top: 1rem;
                    padding-bottom: 1rem;
                }

                .modern-select {
                    cursor: pointer;
                    appearance: none;
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                    background-repeat: no-repeat;
                    background-position: right 1rem center;
                    background-size: 1rem;
                    padding-right: 3rem;
                }

                .modern-select:focus {
                    box-shadow: none;
                }

                .modern-select option {
                    background: white;
                    color: #333;
                    padding: 0.5rem;
                }

                /* Iconos de input */
                .input-icon {
                    position: absolute;
                    left: 0.75rem;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #5FB134;
                    font-size: 1rem;
                    z-index: 2;
                    transition: all 0.2s ease;
                    width: 20px;
                    text-align: center;
                }

                .input-container.focused .input-icon {
                    color: #5FB134;
                }

                /* Mensajes de error */
                .error-message {
                    color: #dc3545;
                    font-size: 0.8rem;
                    margin-top: 0.25rem;
                    display: none;
                    animation: slideIn 0.2s ease;
                    text-align: left;
                    padding-left: 0;
                }

                @keyframes slideIn {
                    from {
                        opacity: 0;
                        transform: translateY(-5px);
                    }

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

                /* Botón de envío mejorado */
                .btn-primary {
                    width: 100%;
                    background: rgba(255, 255, 255, 0.2);
                    color: white;
                    border: none;
                    padding: 0.75rem 1.5rem;
                    font-size: 1rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    position: relative;
                    overflow: hidden;
                    margin-top: 0.5rem;
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-transform: none;
                    letter-spacing: normal;
                }

                .btn-primary:hover {
                    background: #4a8f2a;
                    transform: none;
                    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
                }

                .btn-primary:focus {
                    box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
                }

                /* Contenedor de captcha */
                .captcha-container {
                    background: #f8f9fa;
                    padding: 1rem;
                    border: 1px solid #e0e0e0;
                    margin-bottom: 1rem;
                }

                .captcha-question {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    margin-bottom: 0.75rem;
                    font-weight: 500;
                    color: #333;
                }

                .captcha-question i {
                    font-size: 1rem;
                    color: #5FB134;
                }

                /* Responsive */
                @media (max-width: 768px) {
                    .contact-form {
                        padding: 2rem;
                        margin: 5% 0;
                    }

                    .form-wrapper h3 {
                        font-size: 1.5rem;
                    }

                    .form-wrapper p {
                        font-size: 0.9rem;
                    }

                    .modern-input,
                    .modern-textarea,
                    .modern-select {
                        font-size: 0.9rem;
                    }

                    .input-icon {
                        font-size: 0.9rem;
                    }
                }

                /* Footer mejorado */
                .footer {
                    background: var(--dark-bg) !important;
                    color: var(--white);
                    padding: 3rem 0 1rem;
                    position: relative;
                    overflow: hidden;
                }

                .footer::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: var(--gradient-accent);
                }

                .link-empresa {
                    color: var(--primary-color);
                    text-decoration: none;
                    transition: var(--transition);
                }

                .link-empresa:hover {
                    color: var(--accent-hover);
                    text-decoration: underline;
                }

                /* Efectos de scroll */
                .fade-in {
                    opacity: 0;
                    transform: translateY(30px);
                    transition: var(--transition);
                }

                .fade-in.visible {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Animaciones adicionales */
                .slide-in-left {
                    animation: slideInLeft 0.8s ease-out;
                }

                .slide-in-right {
                    animation: slideInRight 0.8s ease-out;
                }

                @keyframes slideInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-50px);
                    }

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

                @keyframes slideInRight {
                    from {
                        opacity: 0;
                        transform: translateX(50px);
                    }

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

                /* Efectos de hover para botones sociales */
                .btn-social {
                    transition: var(--transition);
                    border-radius: 50%;
                    width: 45px;
                    height: 45px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }

                .btn-social:hover {
                    transform: translateY(-3px) scale(1.1);
                    box-shadow: var(--shadow-strong);
                }

                /* Mejoras en el mapa */
                .responsive-iframe {
                    border-radius: 15px;
                    overflow: hidden;
                    box-shadow: var(--shadow-soft);
                }

                .responsive-iframe iframe {
                    border: none;
                    width: 100%;
                    height: 300px;
                }

                /* Efectos de partículas mejorados */
                #particles-js {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    z-index: 0;
                    background: transparent;
                }

                /* Utilidades adicionales */
                .text-gradient {
                    background: var(--gradient-accent);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }

                .bg-gradient {
                    background: var(--gradient-primary);
                }

                .shadow-custom {
                    box-shadow: var(--shadow-strong);
                }

                /* Efectos de carga */
                .loading {
                    position: relative;
                    overflow: hidden;
                }

                .loading::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                    animation: loading 1.5s infinite;
                }

                @keyframes loading {
                    0% {
                        left: -100%;
                    }

                    100% {
                        left: 100%;
                    }
                }

                .mt-100 {
                    margin-top: 100px !important;
                }

                .border-left-green {
                    border-left: 4px solid #5FB134;
                    font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                    font-size: 16px;
                }

                .text-content-empresa {
                    font-size: 1.1rem;
                    line-height: 1.8;
                    color: var(--text-secondary);
                    margin-bottom: 2rem;
                    text-align: justify;
                }

                .empresa-content p {
                    text-align: justify;
                }

                .image-container-pilares {
                    text-align: center;
                    margin: 2rem 0;
                }

                .image-container-pilares img {
                    max-width: 160px;
                    height: auto;
                    border-radius: 10px;
                    box-shadow: var(--shadow-soft);
                    transition: var(--transition);
                }

                .image-container-pilares:hover img {
                    transform: scale(1.02);
                    box-shadow: var(--shadow-strong);
                }

                /* Estilos para el contenedor de la imagen */
                .image-container {
                    width: 400px;
                    height: 400px;

                    overflow: hidden;
                    position: relative;

                    margin-left: 10%;
                    display: flex;
                    /* Usa flexbox para centrar verticalmente */
                    align-items: center;
                    /* Centra verticalmente el contenido */
                }

                /* Estilos para la imagen */
                .image-container img {
                    max-width: 160px;
                    max-height: 100%;
                    width: auto;
                    height: auto;
                    transition: transform 0.3s ease;
                    /* Efecto de transición para hover */
                }

                .image-container:hover img {
                    border: 2px solid #5FB134;
                    /* Cambia al color y grosor de borde deseado */
                }

                .custom-card {
                    width: 100% !important;
                    /* Asegura que el card ocupe todo el ancho disponible */
                    margin-bottom: 20px !important;
                    /* Espacio entre las tarjetas */
                }

                .custom-card .card-body {
                    position: relative !important;
                    /* Para posicionar absolutamente la cabecera dentro del card */
                }

                .card-text-empresa {
                    font-size: 1rem;
                    line-height: 1.7;
                    color: var(--text-secondary);
                    text-align: justify;
                }

                .card-title-empresa {
                    background-color: #5FB134;
                    color: #fff;
                    padding: 5px;
                    /* Opcional: agrega relleno para que se vea mejor */
                    display: flex;
                    /* Crea un contenedor flexible */
                    justify-content: space-between;
                    /* Espacio uniforme entre el texto y el icono */
                    align-items: center;
                    /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
                }

                .card-title-empresa i {
                    margin-left: 5px;
                    /* Agrega un margen izquierdo al icono para separarlo del texto */
                }

                .section {
                    margin-bottom: 20px !important;
                    /* Agrega margen inferior para separar las secciones */
                }

                .contacto {
                    background-color: #5FB134;
                }

                /* Efectos de scroll reveal */
                .reveal {
                    opacity: 0;
                    transform: translateY(50px);
                    transition: all 0.8s ease;
                }

                .reveal.revealed {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Efectos de carga para imágenes */
                img {
                    transition: opacity 0.3s ease;
                }

                img.loaded {
                    opacity: 1;
                }

                /* Animación de carga inicial */
                body {
                    opacity: 0;
                    transition: opacity 0.5s ease;
                }

                body.loaded {
                    opacity: 1;
                }

                /* Mejoras en las pestañas */
                .nav-tabs .nav-link {
                    border: none;
                    color: var(--text-secondary);
                    font-weight: 500;
                    padding: 12px 24px;
                    border-radius: 25px;
                    margin: 0 5px;
                    transition: var(--transition);
                }

                .nav-tabs .nav-link.active {
                    background: var(--gradient-accent);
                    color: var(--white);
                    box-shadow: var(--shadow-soft);
                }

                .nav-tabs .nav-link:hover {
                    background: rgba(95, 177, 52, 0.1);
                    color: var(--primary-color);
                }

                /* Efectos de hover para botones sociales mejorados */
                .btn-social:hover {
                    background: var(--accent-color) !important;
                    border-color: var(--accent-color) !important;
                }

                /* Efectos de hover para enlaces */
                a {
                    transition: var(--transition);
                }

                a:hover {
                    color: var(--primary-color);
                }

                /* Efectos de hover para iconos */
                .fas,
                .fab {
                    transition: var(--transition);
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para el botón scroll to top */
                .scroll-to-top:hover {
                    background: var(--accent-hover) !important;
                    transform: translateY(-3px);
                    box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
                }

                /* Efectos de animación para elementos específicos */
                .fade-in-up {
                    animation: fadeInUp 0.8s ease-out;
                }

                .fade-in-down {
                    animation: fadeInDown 0.8s ease-out;
                }

                .fade-in-left {
                    animation: fadeInLeft 0.8s ease-out;
                }

                .fade-in-right {
                    animation: fadeInRight 0.8s ease-out;
                }

                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-30px);
                    }

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

                @keyframes fadeInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-30px);
                    }

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

                @keyframes fadeInRight {
                    from {
                        opacity: 0;
                        transform: translateX(30px);
                    }

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

                /* Efectos de hover para iconos */
                .fas,
                .fab {
                    transition: var(--transition);
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para elementos de la empresa */
                .image-container-pilares:hover img {
                    transform: scale(1.05);
                    transition: var(--transition);
                }

                /* Mejoras en la navegación móvil */
                @media (max-width: 768px) {
                    .navbar-nav {
                        text-align: center;
                    }

                    .navbar-nav .nav-link {
                        padding: 0.5rem 1rem;
                    }

                    .navbar-nav .nav-link:last-child {
                        margin-bottom: 0;
                    }

                    .masthead-heading {
                        font-size: 2.5rem;
                    }

                    .masthead-subheading {
                        font-size: 1.1rem;
                    }

                    .border-left-green-title {
                        font-size: 2.5rem;
                    }

                    .full-width-section {
                        padding: 2rem 0;
                    }

                    #page-empresa {
                        padding: 2rem 0;
                    }

                    .service-highlights {
                        flex-direction: column;
                        gap: 1rem;
                        justify-content: flex-start;
                        padding-left: 1rem;
                    }

                    .service-highlight {
                        font-size: 0.9rem;
                        padding: 0.5rem 1rem;
                    }

                    .side-nav-control {
                        display: none;
                    }

                    .nav-dot {
                        width: 12px;
                        height: 12px;
                    }
                }

                @media (max-width: 992px) {
                    .masthead {
                        padding: 0 1rem;
                    }

                    .service-highlights {
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        gap: 1rem;
                        padding-left: 1rem;
                    }

                    .navbar-brand img {
                        max-height: 40px;
                    }

                    .nav-link {
                        font-size: 1rem;
                        padding: 0.5rem 1rem !important;
                    }
                }

                @media (max-width: 576px) {
                    .masthead-heading {
                        font-size: 2rem;
                    }

                    .service-highlight {
                        font-size: 0.8rem;
                        padding: 0.4rem 0.8rem;
                    }

                    .btn-primary {
                        font-size: 0.9rem;
                        padding: 0.75rem 1.5rem;
                    }

                    .border-left-green-title {
                        font-size: 2rem;
                        padding-left: 1rem;
                    }
                }

                /* Asegurar que todas las secciones ocupen 100% de altura */
                .page-section {
                    min-height: 100vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    padding-top: 80px;
                }

                /* Mejorar el espaciado del contenido en secciones */
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 15px;
                }

                /* Efectos de hover mejorados para navegación */
                .navbar-nav .nav-link {
                    position: relative;
                    transition: all 0.3s ease;
                    margin: 0 0.5rem;
                }

                .navbar-nav .nav-link:hover {
                    transform: translateY(-2px);
                }

                .navbar-nav .nav-link.active {
                    transform: translateY(-2px);
                    font-weight: 700;
                }

                /* Efectos de parallax mejorados */
                .full-width-section::before {
                    will-change: transform;
                    transform: translateZ(0);
                    backface-visibility: hidden;
                }

                /* Optimización para dispositivos móviles */
                @media (max-width: 768px) {
                    .full-width-section::before {
                        background-attachment: scroll;
                    }

                    .masthead::before {
                        background-attachment: scroll;
                    }
                }

                /* Botones mejorados con colores de Gradotech */
                .btn-primary {
                    background: var(--gradient-accent);
                    border: none;
                    padding: 12px 30px;
                    border-radius: 50px;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    transition: var(--transition);
                    box-shadow: var(--shadow-soft);
                    position: relative;
                    overflow: hidden;
                }

                .btn-primary::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: var(--transition);
                }

                .btn-primary:hover::before {
                    left: 100%;
                }

                .btn-primary:hover {
                    transform: translateY(-2px);
                    box-shadow: var(--shadow-strong);
                    background: var(--gradient-primary);
                }

                /* Servicios destacados en el header - COLOR VERDE */
                .service-highlights {
                    display: flex;
                    justify-content: flex-start;
                    margin-top: 3rem;
                    flex-wrap: wrap;
                    gap: 1rem;
                    padding-left: 0;
                    align-items: flex-start;
                }

                .service-highlight {
                    background: rgba(95, 177, 52, 0.9);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(95, 177, 52, 0.3);
                    border-radius: 15px;
                    padding: 1rem 1.5rem;
                    color: var(--white);
                    font-weight: 500;
                    transition: var(--transition);
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                }

                .service-highlight::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 4px;
                    height: 100%;
                    background: var(--white);
                    transition: var(--transition);
                }

                .service-highlight:hover {
                    background: rgba(95, 177, 52, 1);
                    transform: translateY(-5px);
                    border-color: var(--white);
                    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                }

                .service-highlight:hover::before {
                    width: 100%;
                    opacity: 0.3;
                }

                /* Efecto de brillo para los service highlights */
                .service-highlight::after {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: linear-gradient(45deg,
                            transparent,
                            rgba(255, 255, 255, 0.1),
                            transparent);
                    transform: rotate(45deg);
                    transition: all 0.6s ease;
                    opacity: 0;
                }

                .service-highlight:hover::after {
                    opacity: 1;
                    transform: rotate(45deg) translate(50%, 50%);
                }

                /* Efectos de hover para iconos en service highlights */
                .service-highlight .fas,
                .service-highlight .fab {
                    transition: var(--transition);
                    margin-right: 0.5rem;
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para enlaces de contacto */
                .contact-form a:hover {
                    color: var(--accent-hover);
                    text-decoration: underline;
                }

                .contact-form i {
                    color: var(--primary-color);
                    width: 20px;
                }

                /* Efectos de hover para elementos de la empresa */
                .empresa-content:hover {
                    transform: translateY(-2px);
                    transition: var(--transition);
                }

                .image-container-pilares:hover img {
                    transform: scale(1.05);
                    transition: var(--transition);
                }

                /* Mejoras en la accesibilidad */
                .nav-link:focus,
                .btn:focus {
                    outline: 2px solid var(--primary-color);
                    outline-offset: 2px;
                }

                /* Efectos de hover para elementos de partners */
                .partner-card:hover .card-text-empresa {
                    color: var(--text-primary);
                }

                /* Efectos de scroll reveal adicionales */
                .fade-in-up {
                    animation: fadeInUp 0.8s ease-out;
                }

                .fade-in-down {
                    animation: fadeInDown 0.8s ease-out;
                }

                .fade-in-left {
                    animation: fadeInLeft 0.8s ease-out;
                }

                .fade-in-right {
                    animation: fadeInRight 0.8s ease-out;
                }

                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-30px);
                    }

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

                @keyframes fadeInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-30px);
                    }

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

                @keyframes fadeInRight {
                    from {
                        opacity: 0;
                        transform: translateX(30px);
                    }

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

                /* Títulos elegantes con línea vertical al costado */
                .elegant-title {
                    font-family: 'Roboto', sans-serif;
                    font-size: 3.5rem;
                    font-weight: 600;
                    color: var(--text-primary);
                    margin-bottom: 0;
                    text-transform: none;
                    letter-spacing: -0.5px;
                    line-height: 1;
                    position: relative;
                    padding-left: 2rem;
                    text-align: left;
                }

                .elegant-subtitle {
                    font-family: 'Roboto', sans-serif;
                    font-size: 1.3rem;
                    font-weight: 300;
                    color: var(--text-secondary);
                    margin-bottom: 2rem;
                    margin-top: 0;
                    text-transform: none;
                    letter-spacing: 0.2px;
                    line-height: 1.1;
                    opacity: 0.8;
                    text-align: left;
                    padding-left: 2rem;
                    position: relative;
                }

                /* Contenedor para título y subtítulo con línea vertical compartida */
                .title-container {
                    position: relative;
                    padding-left: 2rem;
                    margin-bottom: 2rem;
                }

                .title-container::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 6px;
                    background: var(--gradient-primary);
                    border-radius: 3px;
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    z-index: 1;
                }

                .title-container .elegant-title {
                    padding-left: 0;
                    margin-bottom: 0;
                }

                .title-container .elegant-subtitle {
                    padding-left: 0;
                    margin-bottom: 0;
                    margin-top: 0;
                }

                /* Animación para los títulos elegantes */
                .elegant-title {
                    opacity: 0;
                    transform: translateY(30px);
                    animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
                }

                .elegant-subtitle {
                    opacity: 0;
                    transform: translateY(20px);
                    animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
                }

                @keyframes elegantTitleFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                @keyframes elegantSubtitleFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }

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

                /* Responsividad para títulos elegantes */
                @media (max-width: 768px) {
                    .elegant-title {
                        font-size: 2.5rem;
                    }

                    .elegant-subtitle {
                        font-size: 1.1rem;
                    }

                    .title-container {
                        padding-left: 1.5rem;
                    }
                }

                @media (max-width: 576px) {
                    .elegant-title {
                        font-size: 2rem;
                    }

                    .elegant-subtitle {
                        font-size: 1rem;
                    }

                    .title-container {
                        padding-left: 1rem;
                    }
                }

                /* Eliminar contornos de navegación */
                .navbar-nav .nav-link,
                .navbar-nav .nav-link:focus,
                .navbar-nav .nav-link:active,
                .navbar-nav .nav-link:hover {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                    -webkit-box-shadow: none !important;
                    -moz-box-shadow: none !important;
                }

                .navbar-nav .nav-link:focus-visible {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                }

                /* Estilos para la sección Nosotros */
                .about-card {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 2.5rem;
                    margin-bottom: 2rem;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

                .about-card::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--gradient-primary);
                }

                .about-icon {
                    width: 60px;
                    height: 60px;
                    background: var(--gradient-primary);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .about-icon i {
                    font-size: 1.5rem;
                    color: var(--white);
                }

                .about-card h3 {
                    color: var(--primary-color);
                    font-weight: 600;
                    margin-bottom: 1rem;
                    font-size: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .about-text {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;
                    flex-grow: 1;
                }

                /* Tarjetas de Misión y Visión */
                .mission-vision-card {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 2.5rem;
                    margin-bottom: 2rem;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

                .mission-vision-card::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--gradient-primary);
                }

                .card-header-mv {
                    display: flex;
                    align-items: center;
                    margin-bottom: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .card-header-mv i {
                    font-size: 2rem;
                    color: var(--primary-color);
                    margin-right: 1rem;
                }

                .card-header-mv h3 {
                    color: var(--primary-color);
                    font-weight: 600;
                    margin: 0;
                    font-size: 1.5rem;
                }

                .mission-vision-card p {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;
                    flex-grow: 1;
                }

                /* Responsive para la sección Nosotros */
                @media (max-width: 768px) {

                    .about-card,
                    .mission-vision-card {
                        padding: 2rem;
                    }

                    .about-icon {
                        width: 50px;
                        height: 50px;
                    }

                    .about-icon i {
                        font-size: 1.2rem;
                    }
                }

                /* Grid moderno para servicios */
                .services-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 2.5rem 2rem;
                    justify-content: center;
                }

                .service-modern-card {
                    background: rgba(255, 255, 255, 0.7);
                    border-radius: 2rem;
                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                    border: 1px solid rgba(95, 177, 52, 0.15);
                    padding: 2.5rem 2rem 2rem 2rem;
                    text-align: center;
                    transition: box-shadow 0.3s, transform 0.3s;
                    min-height: 420px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-start;
                }

                .service-modern-card:hover {
                    box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
                    transform: translateY(-6px) scale(1.03);
                }

                .service-icon {
                    background: var(--gradient-primary);
                    border-radius: 50%;
                    width: 80px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
                }

                .service-icon i {
                    color: #fff;
                    font-size: 2.5rem;
                }

                .service-title {
                    font-size: 1.4rem;
                    font-weight: 700;
                    color: var(--primary-color);
                    margin-bottom: 1rem;
                    margin-top: 0.5rem;
                }

                .service-desc {
                    color: var(--text-secondary);
                    font-size: 1.08rem;
                    margin-bottom: 2rem;
                    flex-grow: 1;
                }

                .btn-modern {
                    background: var(--gradient-primary);
                    color: #fff;
                    border: none;
                    border-radius: 2rem;
                    padding: 0.7rem 2.2rem;
                    font-weight: 600;
                    font-size: 1.08rem;
                    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
                    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
                    position: relative;
                    overflow: hidden;
                }

                .btn-modern:hover {
                    background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
                    color: #fff;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
                    transform: scale(1.05);
                }

                @media (max-width: 992px) {
                    .service-modern-card {
                        min-height: 380px;
                        padding: 2rem 1.2rem 1.5rem 1.2rem;
                    }

                    .service-icon {
                        width: 65px;
                        height: 65px;
                    }

                    .service-icon i {
                        font-size: 2rem;
                    }
                }

                @media (max-width: 768px) {
                    .services-grid {
                        gap: 1.5rem 0.5rem;
                    }

                    .service-modern-card {
                        min-height: 320px;
                        padding: 1.5rem 0.7rem 1.2rem 0.7rem;
                    }

                    .service-title {
                        font-size: 1.1rem;
                    }

                    .service-desc {
                        font-size: 0.98rem;
                    }

                    .btn-modern {
                        font-size: 0.98rem;
                        padding: 0.6rem 1.5rem;
                    }
                }

                /* Cards modernas para servicios con imágenes en colores */
                .service-card-modern {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                    transition: all 0.2s ease;
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                }

                .service-card-modern:hover {
                    transform: translateY(-5px) scale(1.01);
                    box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
                    border-color: var(--primary-color);
                }

                .service-image-container {
                    position: relative;
                    overflow: hidden;
                    height: 250px;
                }

                .service-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                    filter: brightness(0.9) contrast(1.1);
                }

                .service-card-modern:hover .service-image {
                    transform: scale(1.05);
                    filter: brightness(1) contrast(1.2);
                }

                .service-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    transition: opacity 0.2s ease;
                }

                .service-card-modern:hover .service-overlay {
                    opacity: 1;
                }

                .service-icon-overlay {
                    font-size: 4rem;
                    color: white;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                    transform: scale(0.8);
                    transition: transform 0.2s ease;
                }

                .service-card-modern:hover .service-icon-overlay {
                    transform: scale(1);
                }

                .service-content {
                    padding: 2rem;
                    position: relative;
                }

                .service-content::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 2rem;
                    right: 2rem;
                    height: 3px;
                    background: var(--gradient-primary);
                    transform: scaleX(0);
                    transition: transform 0.2s ease;
                }

                .service-card-modern:hover .service-content::before {
                    transform: scaleX(1);
                }

                .service-title-modern {
                    color: var(--primary-color);
                    font-size: 1.5rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                    position: relative;
                    z-index: 1;
                }

                .service-text-modern {
                    color: var(--text-secondary);
                    line-height: 1.7;
                    margin-bottom: 1.5rem;
                    font-size: 1rem;
                }

                .btn-service-modern {
                    background: var(--gradient-primary);
                    color: white;
                    border: none;
                    border-radius: 25px;
                    padding: 0.8rem 2rem;
                    font-weight: 600;
                    font-size: 1rem;
                    transition: all 0.2s ease;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                }

                .btn-service-modern::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: left 0.3s ease;
                }

                .btn-service-modern:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                }

                .btn-service-modern:hover::before {
                    left: 100%;
                }

                /* Responsive para servicios modernos */
                @media (max-width: 768px) {
                    .service-image-container {
                        height: 220px;
                    }

                    .service-content {
                        padding: 1.5rem;
                    }

                    .service-title-modern {
                        font-size: 1.3rem;
                    }

                    .service-text-modern {
                        font-size: 0.95rem;
                    }

                    .service-icon-overlay {
                        font-size: 3rem;
                    }
                }

                /* Selector de idioma */
                .language-selector {
                    position: fixed;
                    top: 15px;
                    right: 15px;
                    z-index: 9999 !important;
                    background: rgba(95, 177, 52, 0.9);
                    backdrop-filter: blur(8px);
                    border-radius: 20px;
                    padding: 6px;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
                    transition: all 0.3s ease;
                    display: flex;
                    gap: 4px;
                    align-items: center;
                }

                .language-btn {
                    background: transparent;
                    border: none;
                    padding: 6px 12px;
                    border-radius: 12px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    outline: none;
                    box-shadow: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 600;
                    font-size: 0.9rem;
                    color: rgba(255, 255, 255, 0.8);
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }

                .language-btn.active {
                    background: rgba(255, 255, 255, 0.2);
                    color: white;
                    font-weight: 700;
                }

                .language-btn:hover:not(.active) {
                    background: rgba(255, 255, 255, 0.1);
                    color: white;
                    transform: scale(1.05);
                }

                /* Estilos del formulario de contacto moderno */
                .contact-container {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 3rem;
                    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                    margin: 2rem 0;
                }

                /* Estilos para la sección de información de contacto */
                .contact-info-wrapper {
                    padding-right: 2rem;
                }

                .contact-title {
                    color: #333;
                    font-size: 2rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                }

                .contact-subtitle {
                    color: #666;
                    font-size: 1.1rem;
                    margin-bottom: 2rem;
                }

                .contact-details {
                    margin-bottom: 2rem;
                }

                .contact-item {
                    display: flex;
                    align-items: flex-start;
                    gap: 1rem;
                    margin-bottom: 1.5rem;
                    padding: 1rem;
                    border-radius: 12px;
                    background: rgba(95, 177, 52, 0.05);
                    transition: all 0.3s ease;
                }

                .contact-item:hover {
                    background: rgba(95, 177, 52, 0.1);
                    transform: translateX(5px);
                }

                .contact-item i {
                    font-size: 1.5rem;
                    color: #5FB134;
                    margin-top: 0.2rem;
                }

                .contact-item h5 {
                    color: #333;
                    font-weight: 600;
                    margin-bottom: 0.3rem;
                }

                .contact-item p {
                    color: #666;
                    margin: 0;
                    line-height: 1.5;
                }

                .social-links {
                    display: flex;
                    gap: 1rem;
                    margin-top: 2rem;
                }

                .social-link {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.2);
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-decoration: none;
                    transition: all 0.3s ease;
                }

                .social-link:hover {
                    background: #4a8f2a;
                    transform: translateY(-3px);
                    color: white;
                }

                /* Estilos para el formulario */
                .form-wrapper {
                    padding-left: 2rem;
                }

                .form-title {
                    color: #333;
                    font-size: 2rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                }

                .form-subtitle {
                    color: #666;
                    font-size: 1.1rem;
                    margin-bottom: 2rem;
                }

                .modern-form .form-group {
                    margin-bottom: 1.5rem;
                }

                .modern-form label {
                    display: block;
                    color: #333;
                    font-weight: 500;
                    margin-bottom: 0.5rem;
                }

                .modern-form .input-container {
                    position: relative;
                    background: #f8f9fa;
                    border: 1px solid #e0e0e0;
                    border-radius: 8px;
                    transition: all 0.3s ease;
                }

                .modern-form .input-container:hover,
                .modern-form .input-container:focus-within {
                    border-color: #5FB134;
                    background: white;
                }

                .modern-form .input-container input,
                .modern-form .input-container select,
                .modern-form .input-container textarea {
                    width: 100%;
                    padding: 0.75rem 1rem 0.75rem 3rem;
                    border: none;
                    background: transparent;
                    font-size: 1rem;
                    color: #333;
                    outline: none;
                }

                .modern-form .input-container textarea {
                    min-height: 140px;
                    resize: vertical;
                }

                .modern-form .input-icon {
                    position: absolute;
                    left: 1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #5FB134;
                    font-size: 1.1rem;
                }

                .modern-form .input-container textarea+.input-icon {
                    top: 1rem;
                    transform: none;
                }

                .modern-form .error-message {
                    color: #dc3545;
                    font-size: 0.875rem;
                    margin-top: 0.5rem;
                    display: none;
                }

                .modern-form .privacy-check {
                    display: flex;
                    align-items: flex-start;
                    gap: 1rem;
                    margin-top: 1rem;
                }

                .modern-form .privacy-check input[type="checkbox"] {
                    margin-top: 0.3rem;
                }

                .modern-form .privacy-check label {
                    font-size: 0.9rem;
                    color: #666;
                    font-weight: normal;
                    line-height: 1.5;
                }

                .modern-form .privacy-check a {
                    color: #5FB134;
                    text-decoration: none;
                }

                .modern-form .privacy-check a:hover {
                    text-decoration: underline;
                }

                .modern-form .btn-primary {
                    background: rgba(255, 255, 255, 0.2);
                    border: none;
                    padding: 1rem 2rem;
                    font-size: 1.1rem;
                    font-weight: 500;
                    border-radius: 8px;
                    transition: all 0.3s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                }

                .modern-form .btn-primary:hover {
                    background: #4a8f2a;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
                }

                .modern-form .btn-primary i {
                    font-size: 1.2rem;
                }

                /* Responsive */
                @media (max-width: 991.98px) {
                    .contact-container {
                        padding: 2rem;
                    }

                    .contact-info-wrapper {
                        padding-right: 0;
                        margin-bottom: 2rem;
                    }

                    .form-wrapper {
                        padding-left: 0;
                    }

                    .contact-title,
                    .form-title {
                        font-size: 1.75rem;
                    }
                }

                @media (max-width: 767.98px) {
                    .contact-container {
                        padding: 1.5rem;
                    }

                    .contact-item {
                        padding: 0.75rem;
                    }

                    .modern-form .input-container input,
                    .modern-form .input-container select,
                    .modern-form .input-container textarea {
                        font-size: 0.95rem;
                    }
                }

                .contact-map-container iframe {
                    width: 100%;
                    height: 100%;
                    border: none;
                    border-radius: 15px;
                    display: block;
                }

                /* Estilos de información de contacto */
                .contact-info-title {
                    color: var(--primary-color);
                    font-size: 1.8rem;
                    font-weight: 700;
                    margin-bottom: 2rem;
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }

                .contact-info-title i {
                    font-size: 2rem;
                    color: var(--primary-color);
                }

                .contact-info-item {
                    display: flex;
                    align-items: flex-start;
                    gap: 1rem;
                    margin-bottom: 1.5rem;
                    padding: 1rem;
                    border-radius: 15px;
                    transition: all 0.3s ease;
                    background: rgba(95, 177, 52, 0.05);
                }

                .contact-info-item:hover {
                    background: rgba(95, 177, 52, 0.1);
                    transform: translateX(5px);
                }

                .contact-info-item i {
                    font-size: 1.5rem;
                    color: var(--primary-color);
                    margin-top: 0.2rem;
                    min-width: 24px;
                }

                .contact-info-item div {
                    flex: 1;
                }

                .contact-info-item strong {
                    color: var(--text-primary);
                    font-weight: 600;
                    display: block;
                    margin-bottom: 0.3rem;
                }

                .contact-link {
                    color: var(--primary-color);
                    text-decoration: none;
                    font-weight: 500;
                    transition: all 0.3s ease;
                }

                .contact-link:hover {
                    color: var(--secondary-color);
                    text-decoration: underline;
                }

                /* Captcha */
                .captcha-container {
                    background: rgba(95, 177, 52, 0.05);
                    border-radius: 12px;
                    padding: 1rem;
                    border: 2px solid rgba(95, 177, 52, 0.2);
                }

                .captcha-question {
                    display: flex;
                    align-items: center;
                    gap: 0.8rem;
                    margin-bottom: 0.8rem;
                    font-size: 1rem;
                    font-weight: 600;
                    color: var(--primary-color);
                }

                .captcha-question i {
                    font-size: 1.2rem;
                    color: var(--primary-color);
                }

                /* Inputs más delgados y compactos */
                .modern-input,
                .modern-textarea,
                .modern-select {
                    width: 100%;
                    border: none;
                    background: transparent;
                    padding: 0.75rem 1rem 0.75rem 3rem;
                    font-size: 0.95rem;
                    color: #333;
                    outline: none;
                    transition: all 0.3s ease;
                    height: 100%;
                    text-align: left;
                }

                .modern-input::placeholder,
                .modern-textarea::placeholder {
                    color: #6c757d;
                    font-size: 0.9rem;
                    text-align: left;
                    opacity: 0.8;
                }

                .modern-textarea {
                    height: 140px;
                    resize: vertical;
                    padding-top: 1rem;
                    padding-bottom: 1rem;
                }

                .modern-select {
                    cursor: pointer;
                    appearance: none;
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                    background-repeat: no-repeat;
                    background-position: right 1rem center;
                    background-size: 1rem;
                    padding-right: 3rem;
                }

                .modern-select:focus {
                    box-shadow: none;
                }

                .modern-select option {
                    background: white;
                    color: #333;
                    padding: 0.5rem;
                }

                /* Iconos de input */
                .input-icon {
                    position: absolute;
                    left: 0.75rem;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #5FB134;
                    font-size: 1rem;
                    z-index: 2;
                    transition: all 0.2s ease;
                    width: 20px;
                    text-align: center;
                }

                .input-container.focused .input-icon {
                    color: #5FB134;
                }

                /* Mensajes de error */
                .error-message {
                    color: #dc3545;
                    font-size: 0.8rem;
                    margin-top: 0.25rem;
                    display: none;
                    animation: slideIn 0.2s ease;
                    text-align: left;
                    padding-left: 0;
                }

                @keyframes slideIn {
                    from {
                        opacity: 0;
                        transform: translateY(-5px);
                    }

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

                /* Botón de envío mejorado */
                .btn-primary {
                    width: 100%;
                    background: rgba(255, 255, 255, 0.2);
                    color: white;
                    border: none;
                    padding: 0.75rem 1.5rem;
                    font-size: 1rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    position: relative;
                    overflow: hidden;
                    margin-top: 0.5rem;
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-transform: none;
                    letter-spacing: normal;
                }

                .btn-primary:hover {
                    background: #4a8f2a;
                    transform: none;
                    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
                }

                .btn-primary:focus {
                    box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
                }

                /* Contenedor de captcha */
                .captcha-container {
                    background: #f8f9fa;
                    padding: 1rem;
                    border: 1px solid #e0e0e0;
                    margin-bottom: 1rem;
                }

                .captcha-question {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    margin-bottom: 0.75rem;
                    font-weight: 500;
                    color: #333;
                }

                .captcha-question i {
                    font-size: 1rem;
                    color: #5FB134;
                }

                /* Responsive */
                @media (max-width: 768px) {
                    .contact-form {
                        padding: 2rem;
                        margin: 5% 0;
                    }

                    .form-wrapper h3 {
                        font-size: 1.5rem;
                    }

                    .form-wrapper p {
                        font-size: 0.9rem;
                    }

                    .modern-input,
                    .modern-textarea,
                    .modern-select {
                        font-size: 0.9rem;
                    }

                    .input-icon {
                        font-size: 0.9rem;
                    }
                }

                /* Footer mejorado */
                .footer {
                    background: var(--dark-bg) !important;
                    color: var(--white);
                    padding: 3rem 0 1rem;
                    position: relative;
                    overflow: hidden;
                }

                .footer::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: var(--gradient-accent);
                }

                .link-empresa {
                    color: var(--primary-color);
                    text-decoration: none;
                    transition: var(--transition);
                }

                .link-empresa:hover {
                    color: var(--accent-hover);
                    text-decoration: underline;
                }

                /* Efectos de scroll */
                .fade-in {
                    opacity: 0;
                    transform: translateY(30px);
                    transition: var(--transition);
                }

                .fade-in.visible {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Animaciones adicionales */
                .slide-in-left {
                    animation: slideInLeft 0.8s ease-out;
                }

                .slide-in-right {
                    animation: slideInRight 0.8s ease-out;
                }

                @keyframes slideInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-50px);
                    }

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

                @keyframes slideInRight {
                    from {
                        opacity: 0;
                        transform: translateX(50px);
                    }

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

                /* Efectos de hover para botones sociales */
                .btn-social {
                    transition: var(--transition);
                    border-radius: 50%;
                    width: 45px;
                    height: 45px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }

                .btn-social:hover {
                    transform: translateY(-3px) scale(1.1);
                    box-shadow: var(--shadow-strong);
                }

                /* Mejoras en el mapa */
                .responsive-iframe {
                    border-radius: 15px;
                    overflow: hidden;
                    box-shadow: var(--shadow-soft);
                }

                .responsive-iframe iframe {
                    border: none;
                    width: 100%;
                    height: 300px;
                }

                /* Efectos de partículas mejorados */
                #particles-js {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    z-index: 0;
                    background: transparent;
                }

                /* Utilidades adicionales */
                .text-gradient {
                    background: var(--gradient-accent);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }

                .bg-gradient {
                    background: var(--gradient-primary);
                }

                .shadow-custom {
                    box-shadow: var(--shadow-strong);
                }

                /* Efectos de carga */
                .loading {
                    position: relative;
                    overflow: hidden;
                }

                .loading::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                    animation: loading 1.5s infinite;
                }

                @keyframes loading {
                    0% {
                        left: -100%;
                    }

                    100% {
                        left: 100%;
                    }
                }

                .mt-100 {
                    margin-top: 100px !important;
                }

                .border-left-green {
                    border-left: 4px solid #5FB134;
                    font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                    font-size: 16px;
                }

                .text-content-empresa {
                    font-size: 1.1rem;
                    line-height: 1.8;
                    color: var(--text-secondary);
                    margin-bottom: 2rem;
                    text-align: justify;
                }

                .empresa-content p {
                    text-align: justify;
                }

                .image-container-pilares {
                    text-align: center;
                    margin: 2rem 0;
                }

                .image-container-pilares img {
                    max-width: 160px;
                    height: auto;
                    border-radius: 10px;
                    box-shadow: var(--shadow-soft);
                    transition: var(--transition);
                }

                .image-container-pilares:hover img {
                    transform: scale(1.02);
                    box-shadow: var(--shadow-strong);
                }

                /* Estilos para el contenedor de la imagen */
                .image-container {
                    width: 400px;
                    height: 400px;

                    overflow: hidden;
                    position: relative;

                    margin-left: 10%;
                    display: flex;
                    /* Usa flexbox para centrar verticalmente */
                    align-items: center;
                    /* Centra verticalmente el contenido */
                }

                /* Estilos para la imagen */
                .image-container img {
                    max-width: 160px;
                    max-height: 100%;
                    width: auto;
                    height: auto;
                    transition: transform 0.3s ease;
                    /* Efecto de transición para hover */
                }

                .image-container:hover img {
                    border: 2px solid #5FB134;
                    /* Cambia al color y grosor de borde deseado */
                }

                .custom-card {
                    width: 100% !important;
                    /* Asegura que el card ocupe todo el ancho disponible */
                    margin-bottom: 20px !important;
                    /* Espacio entre las tarjetas */
                }

                .custom-card .card-body {
                    position: relative !important;
                    /* Para posicionar absolutamente la cabecera dentro del card */
                }

                .card-text-empresa {
                    font-size: 1rem;
                    line-height: 1.7;
                    color: var(--text-secondary);
                    text-align: justify;
                }

                .card-title-empresa {
                    background-color: #5FB134;
                    color: #fff;
                    padding: 5px;
                    /* Opcional: agrega relleno para que se vea mejor */
                    display: flex;
                    /* Crea un contenedor flexible */
                    justify-content: space-between;
                    /* Espacio uniforme entre el texto y el icono */
                    align-items: center;
                    /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
                }

                .card-title-empresa i {
                    margin-left: 5px;
                    /* Agrega un margen izquierdo al icono para separarlo del texto */
                }

                .section {
                    margin-bottom: 20px !important;
                    /* Agrega margen inferior para separar las secciones */
                }

                .contacto {
                    background-color: #5FB134;
                }

                /* Efectos de scroll reveal */
                .reveal {
                    opacity: 0;
                    transform: translateY(50px);
                    transition: all 0.8s ease;
                }

                .reveal.revealed {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Efectos de carga para imágenes */
                img {
                    transition: opacity 0.3s ease;
                }

                img.loaded {
                    opacity: 1;
                }

                /* Animación de carga inicial */
                body {
                    opacity: 0;
                    transition: opacity 0.5s ease;
                }

                body.loaded {
                    opacity: 1;
                }

                /* Mejoras en las pestañas */
                .nav-tabs .nav-link {
                    border: none;
                    color: var(--text-secondary);
                    font-weight: 500;
                    padding: 12px 24px;
                    border-radius: 25px;
                    margin: 0 5px;
                    transition: var(--transition);
                }

                .nav-tabs .nav-link.active {
                    background: var(--gradient-accent);
                    color: var(--white);
                    box-shadow: var(--shadow-soft);
                }

                .nav-tabs .nav-link:hover {
                    background: rgba(95, 177, 52, 0.1);
                    color: var(--primary-color);
                }

                /* Efectos de hover para botones sociales mejorados */
                .btn-social:hover {
                    background: var(--accent-color) !important;
                    border-color: var(--accent-color) !important;
                }

                /* Efectos de hover para enlaces */
                a {
                    transition: var(--transition);
                }

                a:hover {
                    color: var(--primary-color);
                }

                /* Efectos de hover para iconos */
                .fas,
                .fab {
                    transition: var(--transition);
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para el botón scroll to top */
                .scroll-to-top:hover {
                    background: var(--accent-hover) !important;
                    transform: translateY(-3px);
                    box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
                }

                /* Efectos de animación para elementos específicos */
                .fade-in-up {
                    animation: fadeInUp 0.8s ease-out;
                }

                .fade-in-down {
                    animation: fadeInDown 0.8s ease-out;
                }

                .fade-in-left {
                    animation: fadeInLeft 0.8s ease-out;
                }

                .fade-in-right {
                    animation: fadeInRight 0.8s ease-out;
                }

                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-30px);
                    }

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

                @keyframes fadeInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-30px);
                    }

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

                @keyframes fadeInRight {
                    from {
                        opacity: 0;
                        transform: translateX(30px);
                    }

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

                /* Efectos de hover para iconos */
                .fas,
                .fab {
                    transition: var(--transition);
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para elementos de la empresa */
                .image-container-pilares:hover img {
                    transform: scale(1.05);
                    transition: var(--transition);
                }

                /* Mejoras en la navegación móvil */
                @media (max-width: 768px) {
                    .navbar-nav {
                        text-align: center;
                    }

                    .navbar-nav .nav-link {
                        padding: 0.5rem 1rem;
                    }

                    .navbar-nav .nav-link:last-child {
                        margin-bottom: 0;
                    }

                    .masthead-heading {
                        font-size: 2.5rem;
                    }

                    .masthead-subheading {
                        font-size: 1.1rem;
                    }

                    .border-left-green-title {
                        font-size: 2.5rem;
                    }

                    .full-width-section {
                        padding: 2rem 0;
                    }

                    #page-empresa {
                        padding: 2rem 0;
                    }

                    .service-highlights {
                        flex-direction: column;
                        gap: 1rem;
                        justify-content: flex-start;
                        padding-left: 1rem;
                    }

                    .service-highlight {
                        font-size: 0.9rem;
                        padding: 0.5rem 1rem;
                    }

                    .side-nav-control {
                        display: none;
                    }

                    .nav-dot {
                        width: 12px;
                        height: 12px;
                    }
                }

                @media (max-width: 992px) {
                    .masthead {
                        padding: 0 1rem;
                    }

                    .service-highlights {
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        gap: 1rem;
                        padding-left: 1rem;
                    }

                    .navbar-brand img {
                        max-height: 40px;
                    }

                    .nav-link {
                        font-size: 1rem;
                        padding: 0.5rem 1rem !important;
                    }
                }

                @media (max-width: 576px) {
                    .masthead-heading {
                        font-size: 2rem;
                    }

                    .service-highlight {
                        font-size: 0.8rem;
                        padding: 0.4rem 0.8rem;
                    }

                    .btn-primary {
                        font-size: 0.9rem;
                        padding: 0.75rem 1.5rem;
                    }

                    .border-left-green-title {
                        font-size: 2rem;
                        padding-left: 1rem;
                    }
                }

                /* Asegurar que todas las secciones ocupen 100% de altura */
                .page-section {
                    min-height: 100vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    padding-top: 80px;
                }

                /* Mejorar el espaciado del contenido en secciones */
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 15px;
                }

                /* Efectos de hover mejorados para navegación */
                .navbar-nav .nav-link {
                    position: relative;
                    transition: all 0.3s ease;
                    margin: 0 0.5rem;
                }

                .navbar-nav .nav-link:hover {
                    transform: translateY(-2px);
                }

                .navbar-nav .nav-link.active {
                    transform: translateY(-2px);
                    font-weight: 700;
                }

                /* Efectos de parallax mejorados */
                .full-width-section::before {
                    will-change: transform;
                    transform: translateZ(0);
                    backface-visibility: hidden;
                }

                /* Optimización para dispositivos móviles */
                @media (max-width: 768px) {
                    .full-width-section::before {
                        background-attachment: scroll;
                    }

                    .masthead::before {
                        background-attachment: scroll;
                    }
                }

                /* Botones mejorados con colores de Gradotech */
                .btn-primary {
                    background: var(--gradient-accent);
                    border: none;
                    padding: 12px 30px;
                    border-radius: 50px;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    transition: var(--transition);
                    box-shadow: var(--shadow-soft);
                    position: relative;
                    overflow: hidden;
                }

                .btn-primary::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: var(--transition);
                }

                .btn-primary:hover::before {
                    left: 100%;
                }

                .btn-primary:hover {
                    transform: translateY(-2px);
                    box-shadow: var(--shadow-strong);
                    background: var(--gradient-primary);
                }

                /* Servicios destacados en el header - COLOR VERDE */
                .service-highlights {
                    display: flex;
                    justify-content: flex-start;
                    margin-top: 3rem;
                    flex-wrap: wrap;
                    gap: 1rem;
                    padding-left: 0;
                    align-items: flex-start;
                }

                .service-highlight {
                    background: rgba(95, 177, 52, 0.9);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(95, 177, 52, 0.3);
                    border-radius: 15px;
                    padding: 1rem 1.5rem;
                    color: var(--white);
                    font-weight: 500;
                    transition: var(--transition);
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                }

                .service-highlight::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 4px;
                    height: 100%;
                    background: var(--white);
                    transition: var(--transition);
                }

                .service-highlight:hover {
                    background: rgba(95, 177, 52, 1);
                    transform: translateY(-5px);
                    border-color: var(--white);
                    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                }

                .service-highlight:hover::before {
                    width: 100%;
                    opacity: 0.3;
                }

                /* Efecto de brillo para los service highlights */
                .service-highlight::after {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: linear-gradient(45deg,
                            transparent,
                            rgba(255, 255, 255, 0.1),
                            transparent);
                    transform: rotate(45deg);
                    transition: all 0.6s ease;
                    opacity: 0;
                }

                .service-highlight:hover::after {
                    opacity: 1;
                    transform: rotate(45deg) translate(50%, 50%);
                }

                /* Efectos de hover para iconos en service highlights */
                .service-highlight .fas,
                .service-highlight .fab {
                    transition: var(--transition);
                    margin-right: 0.5rem;
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para enlaces de contacto */
                .contact-form a:hover {
                    color: var(--accent-hover);
                    text-decoration: underline;
                }

                .contact-form i {
                    color: var(--primary-color);
                    width: 20px;
                }

                /* Efectos de hover para elementos de la empresa */
                .empresa-content:hover {
                    transform: translateY(-2px);
                    transition: var(--transition);
                }

                .image-container-pilares:hover img {
                    transform: scale(1.05);
                    transition: var(--transition);
                }

                /* Mejoras en la accesibilidad */
                .nav-link:focus,
                .btn:focus {
                    outline: 2px solid var(--primary-color);
                    outline-offset: 2px;
                }

                /* Efectos de hover para elementos de partners */
                .partner-card:hover .card-text-empresa {
                    color: var(--text-primary);
                }

                /* Efectos de scroll reveal adicionales */
                .fade-in-up {
                    animation: fadeInUp 0.8s ease-out;
                }

                .fade-in-down {
                    animation: fadeInDown 0.8s ease-out;
                }

                .fade-in-left {
                    animation: fadeInLeft 0.8s ease-out;
                }

                .fade-in-right {
                    animation: fadeInRight 0.8s ease-out;
                }

                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-30px);
                    }

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

                @keyframes fadeInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-30px);
                    }

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

                @keyframes fadeInRight {
                    from {
                        opacity: 0;
                        transform: translateX(30px);
                    }

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

                /* Títulos elegantes con línea vertical al costado */
                .elegant-title {
                    font-family: 'Roboto', sans-serif;
                    font-size: 3.5rem;
                    font-weight: 600;
                    color: var(--text-primary);
                    margin-bottom: 0;
                    text-transform: none;
                    letter-spacing: -0.5px;
                    line-height: 1;
                    position: relative;
                    padding-left: 2rem;
                    text-align: left;
                }

                .elegant-subtitle {
                    font-family: 'Roboto', sans-serif;
                    font-size: 1.3rem;
                    font-weight: 300;
                    color: var(--text-secondary);
                    margin-bottom: 2rem;
                    margin-top: 0;
                    text-transform: none;
                    letter-spacing: 0.2px;
                    line-height: 1.1;
                    opacity: 0.8;
                    text-align: left;
                    padding-left: 2rem;
                    position: relative;
                }

                /* Contenedor para título y subtítulo con línea vertical compartida */
                .title-container {
                    position: relative;
                    padding-left: 2rem;
                    margin-bottom: 2rem;
                }

                .title-container::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 6px;
                    background: var(--gradient-primary);
                    border-radius: 3px;
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    z-index: 1;
                }

                .title-container .elegant-title {
                    padding-left: 0;
                    margin-bottom: 0;
                }

                .title-container .elegant-subtitle {
                    padding-left: 0;
                    margin-bottom: 0;
                    margin-top: 0;
                }

                /* Animación para los títulos elegantes */
                .elegant-title {
                    opacity: 0;
                    transform: translateY(30px);
                    animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
                }

                .elegant-subtitle {
                    opacity: 0;
                    transform: translateY(20px);
                    animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
                }

                @keyframes elegantTitleFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                @keyframes elegantSubtitleFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }

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

                /* Responsividad para títulos elegantes */
                @media (max-width: 768px) {
                    .elegant-title {
                        font-size: 2.5rem;
                    }

                    .elegant-subtitle {
                        font-size: 1.1rem;
                    }

                    .title-container {
                        padding-left: 1.5rem;
                    }
                }

                @media (max-width: 576px) {
                    .elegant-title {
                        font-size: 2rem;
                    }

                    .elegant-subtitle {
                        font-size: 1rem;
                    }

                    .title-container {
                        padding-left: 1rem;
                    }
                }

                /* Eliminar contornos de navegación */
                .navbar-nav .nav-link,
                .navbar-nav .nav-link:focus,
                .navbar-nav .nav-link:active,
                .navbar-nav .nav-link:hover {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                    -webkit-box-shadow: none !important;
                    -moz-box-shadow: none !important;
                }

                .navbar-nav .nav-link:focus-visible {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                }

                /* Estilos para la sección Nosotros */
                .about-card {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 2.5rem;
                    margin-bottom: 2rem;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

                .about-card::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--gradient-primary);
                }

                .about-icon {
                    width: 60px;
                    height: 60px;
                    background: var(--gradient-primary);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .about-icon i {
                    font-size: 1.5rem;
                    color: var(--white);
                }

                .about-card h3 {
                    color: var(--primary-color);
                    font-weight: 600;
                    margin-bottom: 1rem;
                    font-size: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .about-text {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;
                    flex-grow: 1;
                }

                /* Tarjetas de Misión y Visión */
                .mission-vision-card {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 2.5rem;
                    margin-bottom: 2rem;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

                .mission-vision-card::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--gradient-primary);
                }

                .card-header-mv {
                    display: flex;
                    align-items: center;
                    margin-bottom: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .card-header-mv i {
                    font-size: 2rem;
                    color: var(--primary-color);
                    margin-right: 1rem;
                }

                .card-header-mv h3 {
                    color: var(--primary-color);
                    font-weight: 600;
                    margin: 0;
                    font-size: 1.5rem;
                }

                .mission-vision-card p {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;
                    flex-grow: 1;
                }

                /* Responsive para la sección Nosotros */
                @media (max-width: 768px) {

                    .about-card,
                    .mission-vision-card {
                        padding: 2rem;
                    }

                    .about-icon {
                        width: 50px;
                        height: 50px;
                    }

                    .about-icon i {
                        font-size: 1.2rem;
                    }
                }

                /* Grid moderno para servicios */
                .services-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 2.5rem 2rem;
                    justify-content: center;
                }

                .service-modern-card {
                    background: rgba(255, 255, 255, 0.7);
                    border-radius: 2rem;
                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                    border: 1px solid rgba(95, 177, 52, 0.15);
                    padding: 2.5rem 2rem 2rem 2rem;
                    text-align: center;
                    transition: box-shadow 0.3s, transform 0.3s;
                    min-height: 420px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-start;
                }

                .service-modern-card:hover {
                    box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
                    transform: translateY(-6px) scale(1.03);
                }

                .service-icon {
                    background: var(--gradient-primary);
                    border-radius: 50%;
                    width: 80px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
                }

                .service-icon i {
                    color: #fff;
                    font-size: 2.5rem;
                }

                .service-title {
                    font-size: 1.4rem;
                    font-weight: 700;
                    color: var(--primary-color);
                    margin-bottom: 1rem;
                    margin-top: 0.5rem;
                }

                .service-desc {
                    color: var(--text-secondary);
                    font-size: 1.08rem;
                    margin-bottom: 2rem;
                    flex-grow: 1;
                }

                .btn-modern {
                    background: var(--gradient-primary);
                    color: #fff;
                    border: none;
                    border-radius: 2rem;
                    padding: 0.7rem 2.2rem;
                    font-weight: 600;
                    font-size: 1.08rem;
                    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
                    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
                    position: relative;
                    overflow: hidden;
                }

                .btn-modern:hover {
                    background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
                    color: #fff;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
                    transform: scale(1.05);
                }

                @media (max-width: 992px) {
                    .service-modern-card {
                        min-height: 380px;
                        padding: 2rem 1.2rem 1.5rem 1.2rem;
                    }

                    .service-icon {
                        width: 65px;
                        height: 65px;
                    }

                    .service-icon i {
                        font-size: 2rem;
                    }
                }

                @media (max-width: 768px) {
                    .services-grid {
                        gap: 1.5rem 0.5rem;
                    }

                    .service-modern-card {
                        min-height: 320px;
                        padding: 1.5rem 0.7rem 1.2rem 0.7rem;
                    }

                    .service-title {
                        font-size: 1.1rem;
                    }

                    .service-desc {
                        font-size: 0.98rem;
                    }

                    .btn-modern {
                        font-size: 0.98rem;
                        padding: 0.6rem 1.5rem;
                    }
                }

                /* Cards modernas para servicios con imágenes en colores */
                .service-card-modern {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                    transition: all 0.2s ease;
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                }

                .service-card-modern:hover {
                    transform: translateY(-5px) scale(1.01);
                    box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
                    border-color: var(--primary-color);
                }

                .service-image-container {
                    position: relative;
                    overflow: hidden;
                    height: 250px;
                }

                .service-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                    filter: brightness(0.9) contrast(1.1);
                }

                .service-card-modern:hover .service-image {
                    transform: scale(1.05);
                    filter: brightness(1) contrast(1.2);
                }

                .service-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    transition: opacity 0.2s ease;
                }

                .service-card-modern:hover .service-overlay {
                    opacity: 1;
                }

                .service-icon-overlay {
                    font-size: 4rem;
                    color: white;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                    transform: scale(0.8);
                    transition: transform 0.2s ease;
                }

                .service-card-modern:hover .service-icon-overlay {
                    transform: scale(1);
                }

                .service-content {
                    padding: 2rem;
                    position: relative;
                }

                .service-content::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 2rem;
                    right: 2rem;
                    height: 3px;
                    background: var(--gradient-primary);
                    transform: scaleX(0);
                    transition: transform 0.2s ease;
                }

                .service-card-modern:hover .service-content::before {
                    transform: scaleX(1);
                }

                .service-title-modern {
                    color: var(--primary-color);
                    font-size: 1.5rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                    position: relative;
                    z-index: 1;
                }

                .service-text-modern {
                    color: var(--text-secondary);
                    line-height: 1.7;
                    margin-bottom: 1.5rem;
                    font-size: 1rem;
                }

                .btn-service-modern {
                    background: var(--gradient-primary);
                    color: white;
                    border: none;
                    border-radius: 25px;
                    padding: 0.8rem 2rem;
                    font-weight: 600;
                    font-size: 1rem;
                    transition: all 0.2s ease;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                }

                .btn-service-modern::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: left 0.3s ease;
                }

                .btn-service-modern:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                }

                .btn-service-modern:hover::before {
                    left: 100%;
                }

                /* Responsive para servicios modernos */
                @media (max-width: 768px) {
                    .service-image-container {
                        height: 220px;
                    }

                    .service-content {
                        padding: 1.5rem;
                    }

                    .service-title-modern {
                        font-size: 1.3rem;
                    }

                    .service-text-modern {
                        font-size: 0.95rem;
                    }

                    .service-icon-overlay {
                        font-size: 3rem;
                    }
                }

                /* Selector de idioma */
                .language-selector {
                    position: fixed;
                    top: 15px;
                    right: 15px;
                    z-index: 9999 !important;
                    background: rgba(95, 177, 52, 0.9);
                    backdrop-filter: blur(8px);
                    border-radius: 20px;
                    padding: 6px;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
                    transition: all 0.3s ease;
                    display: flex;
                    gap: 4px;
                    align-items: center;
                }

                .language-btn {
                    background: transparent;
                    border: none;
                    padding: 6px 12px;
                    border-radius: 12px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    outline: none;
                    box-shadow: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 600;
                    font-size: 0.9rem;
                    color: rgba(255, 255, 255, 0.8);
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }

                .language-btn.active {
                    background: rgba(255, 255, 255, 0.2);
                    color: white;
                    font-weight: 700;
                }

                .language-btn:hover:not(.active) {
                    background: rgba(255, 255, 255, 0.1);
                    color: white;
                    transform: scale(1.05);
                }

                /* Captcha */
                .captcha-container {
                    background: rgba(95, 177, 52, 0.05);
                    border-radius: 12px;
                    padding: 1rem;
                    border: 2px solid rgba(95, 177, 52, 0.2);
                }

                .captcha-question {
                    display: flex;
                    align-items: center;
                    gap: 0.8rem;
                    margin-bottom: 0.8rem;
                    font-size: 1rem;
                    font-weight: 600;
                    color: var(--primary-color);
                }

                .captcha-question i {
                    font-size: 1.2rem;
                    color: var(--primary-color);
                }

                /* Inputs más delgados y compactos */
                .modern-input,
                .modern-textarea,
                .modern-select {
                    width: 100%;
                    border: none;
                    background: transparent;
                    padding: 0.75rem 1rem 0.75rem 3rem;
                    font-size: 0.95rem;
                    color: #333;
                    outline: none;
                    transition: all 0.3s ease;
                    height: 100%;
                    text-align: left;
                }

                .modern-input::placeholder,
                .modern-textarea::placeholder {
                    color: #6c757d;
                    font-size: 0.9rem;
                    text-align: left;
                    opacity: 0.8;
                }

                .modern-textarea {
                    height: 140px;
                    resize: vertical;
                    padding-top: 1rem;
                    padding-bottom: 1rem;
                }

                .modern-select {
                    cursor: pointer;
                    appearance: none;
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                    background-repeat: no-repeat;
                    background-position: right 1rem center;
                    background-size: 1rem;
                    padding-right: 3rem;
                }

                .modern-select:focus {
                    box-shadow: none;
                }

                .modern-select option {
                    background: white;
                    color: #333;
                    padding: 0.5rem;
                }

                /* Iconos de input */
                .input-icon {
                    position: absolute;
                    left: 0.75rem;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #5FB134;
                    font-size: 1rem;
                    z-index: 2;
                    transition: all 0.2s ease;
                    width: 20px;
                    text-align: center;
                }

                .input-container.focused .input-icon {
                    color: #5FB134;
                }

                /* Mensajes de error */
                .error-message {
                    color: #dc3545;
                    font-size: 0.8rem;
                    margin-top: 0.25rem;
                    display: none;
                    animation: slideIn 0.2s ease;
                    text-align: left;
                    padding-left: 0;
                }

                @keyframes slideIn {
                    from {
                        opacity: 0;
                        transform: translateY(-5px);
                    }

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

                /* Botón de envío mejorado */
                .btn-primary {
                    width: 100%;
                    background: rgba(255, 255, 255, 0.2);
                    color: white;
                    border: none;
                    padding: 0.75rem 1.5rem;
                    font-size: 1rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    position: relative;
                    overflow: hidden;
                    margin-top: 0.5rem;
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-transform: none;
                    letter-spacing: normal;
                }

                .btn-primary:hover {
                    background: #4a8f2a;
                    transform: none;
                    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
                }

                .btn-primary:focus {
                    box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
                }

                /* Contenedor de captcha */
                .captcha-container {
                    background: #f8f9fa;
                    padding: 1rem;
                    border: 1px solid #e0e0e0;
                    margin-bottom: 1rem;
                }

                .captcha-question {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    margin-bottom: 0.75rem;
                    font-weight: 500;
                    color: #333;
                }

                .captcha-question i {
                    font-size: 1rem;
                    color: #5FB134;
                }

                /* Responsive */
                @media (max-width: 768px) {
                    .contact-form {
                        padding: 2rem;
                        margin: 5% 0;
                    }

                    .form-wrapper h3 {
                        font-size: 1.5rem;
                    }

                    .form-wrapper p {
                        font-size: 0.9rem;
                    }

                    .modern-input,
                    .modern-textarea,
                    .modern-select {
                        font-size: 0.9rem;
                    }

                    .input-icon {
                        font-size: 0.9rem;
                    }
                }

                /* Footer mejorado */
                .footer {
                    background: var(--dark-bg) !important;
                    color: var(--white);
                    padding: 3rem 0 1rem;
                    position: relative;
                    overflow: hidden;
                }

                .footer::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: var(--gradient-accent);
                }

                .link-empresa {
                    color: var(--primary-color);
                    text-decoration: none;
                    transition: var(--transition);
                }

                .link-empresa:hover {
                    color: var(--accent-hover);
                    text-decoration: underline;
                }

                /* Efectos de scroll */
                .fade-in {
                    opacity: 0;
                    transform: translateY(30px);
                    transition: var(--transition);
                }

                .fade-in.visible {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Animaciones adicionales */
                .slide-in-left {
                    animation: slideInLeft 0.8s ease-out;
                }

                .slide-in-right {
                    animation: slideInRight 0.8s ease-out;
                }

                @keyframes slideInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-50px);
                    }

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

                @keyframes slideInRight {
                    from {
                        opacity: 0;
                        transform: translateX(50px);
                    }

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

                /* Efectos de hover para botones sociales */
                .btn-social {
                    transition: var(--transition);
                    border-radius: 50%;
                    width: 45px;
                    height: 45px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }

                .btn-social:hover {
                    transform: translateY(-3px) scale(1.1);
                    box-shadow: var(--shadow-strong);
                }

                /* Mejoras en el mapa */
                .responsive-iframe {
                    border-radius: 15px;
                    overflow: hidden;
                    box-shadow: var(--shadow-soft);
                }

                .responsive-iframe iframe {
                    border: none;
                    width: 100%;
                    height: 300px;
                }

                /* Efectos de partículas mejorados */
                #particles-js {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    z-index: 0;
                    background: transparent;
                }

                /* Utilidades adicionales */
                .text-gradient {
                    background: var(--gradient-accent);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }

                .bg-gradient {
                    background: var(--gradient-primary);
                }

                .shadow-custom {
                    box-shadow: var(--shadow-strong);
                }

                /* Efectos de carga */
                .loading {
                    position: relative;
                    overflow: hidden;
                }

                .loading::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                    animation: loading 1.5s infinite;
                }

                @keyframes loading {
                    0% {
                        left: -100%;
                    }

                    100% {
                        left: 100%;
                    }
                }

                .mt-100 {
                    margin-top: 100px !important;
                }

                .border-left-green {
                    border-left: 4px solid #5FB134;
                    font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                    font-size: 16px;
                }

                .text-content-empresa {
                    font-size: 1.1rem;
                    line-height: 1.8;
                    color: var(--text-secondary);
                    margin-bottom: 2rem;
                    text-align: justify;
                }

                .empresa-content p {
                    text-align: justify;
                }

                .image-container-pilares {
                    text-align: center;
                    margin: 2rem 0;
                }

                .image-container-pilares img {
                    max-width: 160px;
                    height: auto;
                    border-radius: 10px;
                    box-shadow: var(--shadow-soft);
                    transition: var(--transition);
                }

                .image-container-pilares:hover img {
                    transform: scale(1.02);
                    box-shadow: var(--shadow-strong);
                }

                /* Estilos para el contenedor de la imagen */
                .image-container {
                    width: 400px;
                    height: 400px;

                    overflow: hidden;
                    position: relative;

                    margin-left: 10%;
                    display: flex;
                    /* Usa flexbox para centrar verticalmente */
                    align-items: center;
                    /* Centra verticalmente el contenido */
                }

                /* Estilos para la imagen */
                .image-container img {
                    max-width: 160px;
                    max-height: 100%;
                    width: auto;
                    height: auto;
                    transition: transform 0.3s ease;
                    /* Efecto de transición para hover */
                }

                .image-container:hover img {
                    border: 2px solid #5FB134;
                    /* Cambia al color y grosor de borde deseado */
                }

                .custom-card {
                    width: 100% !important;
                    /* Asegura que el card ocupe todo el ancho disponible */
                    margin-bottom: 20px !important;
                    /* Espacio entre las tarjetas */
                }

                .custom-card .card-body {
                    position: relative !important;
                    /* Para posicionar absolutamente la cabecera dentro del card */
                }

                .card-text-empresa {
                    font-size: 1rem;
                    line-height: 1.7;
                    color: var(--text-secondary);
                    text-align: justify;
                }

                .card-title-empresa {
                    background-color: #5FB134;
                    color: #fff;
                    padding: 5px;
                    /* Opcional: agrega relleno para que se vea mejor */
                    display: flex;
                    /* Crea un contenedor flexible */
                    justify-content: space-between;
                    /* Espacio uniforme entre el texto y el icono */
                    align-items: center;
                    /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
                }

                .card-title-empresa i {
                    margin-left: 5px;
                    /* Agrega un margen izquierdo al icono para separarlo del texto */
                }

                .section {
                    margin-bottom: 20px !important;
                    /* Agrega margen inferior para separar las secciones */
                }

                .contacto {
                    background-color: #5FB134;
                }

                /* Efectos de scroll reveal */
                .reveal {
                    opacity: 0;
                    transform: translateY(50px);
                    transition: all 0.8s ease;
                }

                .reveal.revealed {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Efectos de carga para imágenes */
                img {
                    transition: opacity 0.3s ease;
                }

                img.loaded {
                    opacity: 1;
                }

                /* Animación de carga inicial */
                body {
                    opacity: 0;
                    transition: opacity 0.5s ease;
                }

                body.loaded {
                    opacity: 1;
                }

                /* Mejoras en las pestañas */
                .nav-tabs .nav-link {
                    border: none;
                    color: var(--text-secondary);
                    font-weight: 500;
                    padding: 12px 24px;
                    border-radius: 25px;
                    margin: 0 5px;
                    transition: var(--transition);
                }

                .nav-tabs .nav-link.active {
                    background: var(--gradient-accent);
                    color: var(--white);
                    box-shadow: var(--shadow-soft);
                }

                .nav-tabs .nav-link:hover {
                    background: rgba(95, 177, 52, 0.1);
                    color: var(--primary-color);
                }

                /* Efectos de hover para botones sociales mejorados */
                .btn-social:hover {
                    background: var(--accent-color) !important;
                    border-color: var(--accent-color) !important;
                }

                /* Efectos de hover para enlaces */
                a {
                    transition: var(--transition);
                }

                a:hover {
                    color: var(--primary-color);
                }

                /* Efectos de hover para iconos */
                .fas,
                .fab {
                    transition: var(--transition);
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para el botón scroll to top */
                .scroll-to-top:hover {
                    background: var(--accent-hover) !important;
                    transform: translateY(-3px);
                    box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
                }

                /* Efectos de animación para elementos específicos */
                .fade-in-up {
                    animation: fadeInUp 0.8s ease-out;
                }

                .fade-in-down {
                    animation: fadeInDown 0.8s ease-out;
                }

                .fade-in-left {
                    animation: fadeInLeft 0.8s ease-out;
                }

                .fade-in-right {
                    animation: fadeInRight 0.8s ease-out;
                }

                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-30px);
                    }

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

                @keyframes fadeInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-30px);
                    }

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

                @keyframes fadeInRight {
                    from {
                        opacity: 0;
                        transform: translateX(30px);
                    }

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

                /* Efectos de hover para iconos */
                .fas,
                .fab {
                    transition: var(--transition);
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para elementos de la empresa */
                .image-container-pilares:hover img {
                    transform: scale(1.05);
                    transition: var(--transition);
                }

                /* Mejoras en la navegación móvil */
                @media (max-width: 768px) {
                    .navbar-nav {
                        text-align: center;
                    }

                    .navbar-nav .nav-link {
                        padding: 0.5rem 1rem;
                    }

                    .navbar-nav .nav-link:last-child {
                        margin-bottom: 0;
                    }

                    .masthead-heading {
                        font-size: 2.5rem;
                    }

                    .masthead-subheading {
                        font-size: 1.1rem;
                    }

                    .border-left-green-title {
                        font-size: 2.5rem;
                    }

                    .full-width-section {
                        padding: 2rem 0;
                    }

                    #page-empresa {
                        padding: 2rem 0;
                    }

                    .service-highlights {
                        flex-direction: column;
                        gap: 1rem;
                        justify-content: flex-start;
                        padding-left: 1rem;
                    }

                    .service-highlight {
                        font-size: 0.9rem;
                        padding: 0.5rem 1rem;
                    }

                    .side-nav-control {
                        display: none;
                    }

                    .nav-dot {
                        width: 12px;
                        height: 12px;
                    }
                }

                @media (max-width: 992px) {
                    .masthead {
                        padding: 0 1rem;
                    }

                    .service-highlights {
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        gap: 1rem;
                        padding-left: 1rem;
                    }

                    .navbar-brand img {
                        max-height: 40px;
                    }

                    .nav-link {
                        font-size: 1rem;
                        padding: 0.5rem 1rem !important;
                    }
                }

                @media (max-width: 576px) {
                    .masthead-heading {
                        font-size: 2rem;
                    }

                    .service-highlight {
                        font-size: 0.8rem;
                        padding: 0.4rem 0.8rem;
                    }

                    .btn-primary {
                        font-size: 0.9rem;
                        padding: 0.75rem 1.5rem;
                    }

                    .border-left-green-title {
                        font-size: 2rem;
                        padding-left: 1rem;
                    }
                }

                /* Asegurar que todas las secciones ocupen 100% de altura */
                .page-section {
                    min-height: 100vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    padding-top: 80px;
                }

                /* Mejorar el espaciado del contenido en secciones */
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 15px;
                }

                /* Efectos de hover mejorados para navegación */
                .navbar-nav .nav-link {
                    position: relative;
                    transition: all 0.3s ease;
                    margin: 0 0.5rem;
                }

                .navbar-nav .nav-link:hover {
                    transform: translateY(-2px);
                }

                .navbar-nav .nav-link.active {
                    transform: translateY(-2px);
                    font-weight: 700;
                }

                /* Efectos de parallax mejorados */
                .full-width-section::before {
                    will-change: transform;
                    transform: translateZ(0);
                    backface-visibility: hidden;
                }

                /* Optimización para dispositivos móviles */
                @media (max-width: 768px) {
                    .full-width-section::before {
                        background-attachment: scroll;
                    }

                    .masthead::before {
                        background-attachment: scroll;
                    }
                }

                /* Botones mejorados con colores de Gradotech */
                .btn-primary {
                    background: var(--gradient-accent);
                    border: none;
                    padding: 12px 30px;
                    border-radius: 50px;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    transition: var(--transition);
                    box-shadow: var(--shadow-soft);
                    position: relative;
                    overflow: hidden;
                }

                .btn-primary::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: var(--transition);
                }

                .btn-primary:hover::before {
                    left: 100%;
                }

                .btn-primary:hover {
                    transform: translateY(-2px);
                    box-shadow: var(--shadow-strong);
                    background: var(--gradient-primary);
                }

                /* Servicios destacados en el header - COLOR VERDE */
                .service-highlights {
                    display: flex;
                    justify-content: flex-start;
                    margin-top: 3rem;
                    flex-wrap: wrap;
                    gap: 1rem;
                    padding-left: 0;
                    align-items: flex-start;
                }

                .service-highlight {
                    background: rgba(95, 177, 52, 0.9);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(95, 177, 52, 0.3);
                    border-radius: 15px;
                    padding: 1rem 1.5rem;
                    color: var(--white);
                    font-weight: 500;
                    transition: var(--transition);
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                }

                .service-highlight::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 4px;
                    height: 100%;
                    background: var(--white);
                    transition: var(--transition);
                }

                .service-highlight:hover {
                    background: rgba(95, 177, 52, 1);
                    transform: translateY(-5px);
                    border-color: var(--white);
                    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                }

                .service-highlight:hover::before {
                    width: 100%;
                    opacity: 0.3;
                }

                /* Efecto de brillo para los service highlights */
                .service-highlight::after {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: linear-gradient(45deg,
                            transparent,
                            rgba(255, 255, 255, 0.1),
                            transparent);
                    transform: rotate(45deg);
                    transition: all 0.6s ease;
                    opacity: 0;
                }

                .service-highlight:hover::after {
                    opacity: 1;
                    transform: rotate(45deg) translate(50%, 50%);
                }

                /* Efectos de hover para iconos en service highlights */
                .service-highlight .fas,
                .service-highlight .fab {
                    transition: var(--transition);
                    margin-right: 0.5rem;
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para enlaces de contacto */
                .contact-form a:hover {
                    color: var(--accent-hover);
                    text-decoration: underline;
                }

                .contact-form i {
                    color: var(--primary-color);
                    width: 20px;
                }

                /* Efectos de hover para elementos de la empresa */
                .empresa-content:hover {
                    transform: translateY(-2px);
                    transition: var(--transition);
                }

                .image-container-pilares:hover img {
                    transform: scale(1.05);
                    transition: var(--transition);
                }

                /* Mejoras en la accesibilidad */
                .nav-link:focus,
                .btn:focus {
                    outline: 2px solid var(--primary-color);
                    outline-offset: 2px;
                }

                /* Efectos de hover para elementos de partners */
                .partner-card:hover .card-text-empresa {
                    color: var(--text-primary);
                }

                /* Efectos de scroll reveal adicionales */
                .fade-in-up {
                    animation: fadeInUp 0.8s ease-out;
                }

                .fade-in-down {
                    animation: fadeInDown 0.8s ease-out;
                }

                .fade-in-left {
                    animation: fadeInLeft 0.8s ease-out;
                }

                .fade-in-right {
                    animation: fadeInRight 0.8s ease-out;
                }

                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-30px);
                    }

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

                @keyframes fadeInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-30px);
                    }

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

                @keyframes fadeInRight {
                    from {
                        opacity: 0;
                        transform: translateX(30px);
                    }

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

                /* Títulos elegantes con línea vertical al costado */
                .elegant-title {
                    font-family: 'Roboto', sans-serif;
                    font-size: 3.5rem;
                    font-weight: 600;
                    color: var(--text-primary);
                    margin-bottom: 0;
                    text-transform: none;
                    letter-spacing: -0.5px;
                    line-height: 1;
                    position: relative;
                    padding-left: 2rem;
                    text-align: left;
                }

                .elegant-subtitle {
                    font-family: 'Roboto', sans-serif;
                    font-size: 1.3rem;
                    font-weight: 300;
                    color: var(--text-secondary);
                    margin-bottom: 2rem;
                    margin-top: 0;
                    text-transform: none;
                    letter-spacing: 0.2px;
                    line-height: 1.1;
                    opacity: 0.8;
                    text-align: left;
                    padding-left: 2rem;
                    position: relative;
                }

                /* Contenedor para título y subtítulo con línea vertical compartida */
                .title-container {
                    position: relative;
                    padding-left: 2rem;
                    margin-bottom: 2rem;
                }

                .title-container::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 6px;
                    background: var(--gradient-primary);
                    border-radius: 3px;
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    z-index: 1;
                }

                .title-container .elegant-title {
                    padding-left: 0;
                    margin-bottom: 0;
                }

                .title-container .elegant-subtitle {
                    padding-left: 0;
                    margin-bottom: 0;
                    margin-top: 0;
                }

                /* Animación para los títulos elegantes */
                .elegant-title {
                    opacity: 0;
                    transform: translateY(30px);
                    animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
                }

                .elegant-subtitle {
                    opacity: 0;
                    transform: translateY(20px);
                    animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
                }

                @keyframes elegantTitleFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                @keyframes elegantSubtitleFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }

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

                /* Responsividad para títulos elegantes */
                @media (max-width: 768px) {
                    .elegant-title {
                        font-size: 2.5rem;
                    }

                    .elegant-subtitle {
                        font-size: 1.1rem;
                    }

                    .title-container {
                        padding-left: 1.5rem;
                    }
                }

                @media (max-width: 576px) {
                    .elegant-title {
                        font-size: 2rem;
                    }

                    .elegant-subtitle {
                        font-size: 1rem;
                    }

                    .title-container {
                        padding-left: 1rem;
                    }
                }

                /* Eliminar contornos de navegación */
                .navbar-nav .nav-link,
                .navbar-nav .nav-link:focus,
                .navbar-nav .nav-link:active,
                .navbar-nav .nav-link:hover {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                    -webkit-box-shadow: none !important;
                    -moz-box-shadow: none !important;
                }

                .navbar-nav .nav-link:focus-visible {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                }

                /* Estilos para la sección Nosotros */
                .about-card {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 2.5rem;
                    margin-bottom: 2rem;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

                .about-card::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--gradient-primary);
                }

                .about-icon {
                    width: 60px;
                    height: 60px;
                    background: var(--gradient-primary);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .about-icon i {
                    font-size: 1.5rem;
                    color: var(--white);
                }

                .about-card h3 {
                    color: var(--primary-color);
                    font-weight: 600;
                    margin-bottom: 1rem;
                    font-size: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .about-text {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;
                    flex-grow: 1;
                }

                /* Tarjetas de Misión y Visión */
                .mission-vision-card {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 2.5rem;
                    margin-bottom: 2rem;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

                .mission-vision-card::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--gradient-primary);
                }

                .card-header-mv {
                    display: flex;
                    align-items: center;
                    margin-bottom: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .card-header-mv i {
                    font-size: 2rem;
                    color: var(--primary-color);
                    margin-right: 1rem;
                }

                .card-header-mv h3 {
                    color: var(--primary-color);
                    font-weight: 600;
                    margin: 0;
                    font-size: 1.5rem;
                }

                .mission-vision-card p {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;
                    flex-grow: 1;
                }

                /* Responsive para la sección Nosotros */
                @media (max-width: 768px) {

                    .about-card,
                    .mission-vision-card {
                        padding: 2rem;
                    }

                    .about-icon {
                        width: 50px;
                        height: 50px;
                    }

                    .about-icon i {
                        font-size: 1.2rem;
                    }
                }

                /* Grid moderno para servicios */
                .services-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 2.5rem 2rem;
                    justify-content: center;
                }

                .service-modern-card {
                    background: rgba(255, 255, 255, 0.7);
                    border-radius: 2rem;
                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                    border: 1px solid rgba(95, 177, 52, 0.15);
                    padding: 2.5rem 2rem 2rem 2rem;
                    text-align: center;
                    transition: box-shadow 0.3s, transform 0.3s;
                    min-height: 420px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-start;
                }

                .service-modern-card:hover {
                    box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
                    transform: translateY(-6px) scale(1.03);
                }

                .service-icon {
                    background: var(--gradient-primary);
                    border-radius: 50%;
                    width: 80px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
                }

                .service-icon i {
                    color: #fff;
                    font-size: 2.5rem;
                }

                .service-title {
                    font-size: 1.4rem;
                    font-weight: 700;
                    color: var(--primary-color);
                    margin-bottom: 1rem;
                    margin-top: 0.5rem;
                }

                .service-desc {
                    color: var(--text-secondary);
                    font-size: 1.08rem;
                    margin-bottom: 2rem;
                    flex-grow: 1;
                }

                .btn-modern {
                    background: var(--gradient-primary);
                    color: #fff;
                    border: none;
                    border-radius: 2rem;
                    padding: 0.7rem 2.2rem;
                    font-weight: 600;
                    font-size: 1.08rem;
                    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
                    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
                    position: relative;
                    overflow: hidden;
                }

                .btn-modern:hover {
                    background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
                    color: #fff;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
                    transform: scale(1.05);
                }

                @media (max-width: 992px) {
                    .service-modern-card {
                        min-height: 380px;
                        padding: 2rem 1.2rem 1.5rem 1.2rem;
                    }

                    .service-icon {
                        width: 65px;
                        height: 65px;
                    }

                    .service-icon i {
                        font-size: 2rem;
                    }
                }

                @media (max-width: 768px) {
                    .services-grid {
                        gap: 1.5rem 0.5rem;
                    }

                    .service-modern-card {
                        min-height: 320px;
                        padding: 1.5rem 0.7rem 1.2rem 0.7rem;
                    }

                    .service-title {
                        font-size: 1.1rem;
                    }

                    .service-desc {
                        font-size: 0.98rem;
                    }

                    .btn-modern {
                        font-size: 0.98rem;
                        padding: 0.6rem 1.5rem;
                    }
                }

                /* Cards modernas para servicios con imágenes en colores */
                .service-card-modern {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                    transition: all 0.2s ease;
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                }

                .service-card-modern:hover {
                    transform: translateY(-5px) scale(1.01);
                    box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
                    border-color: var(--primary-color);
                }

                .service-image-container {
                    position: relative;
                    overflow: hidden;
                    height: 250px;
                }

                .service-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                    filter: brightness(0.9) contrast(1.1);
                }

                .service-card-modern:hover .service-image {
                    transform: scale(1.05);
                    filter: brightness(1) contrast(1.2);
                }

                .service-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    transition: opacity 0.2s ease;
                }

                .service-card-modern:hover .service-overlay {
                    opacity: 1;
                }

                .service-icon-overlay {
                    font-size: 4rem;
                    color: white;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                    transform: scale(0.8);
                    transition: transform 0.2s ease;
                }

                .service-card-modern:hover .service-icon-overlay {
                    transform: scale(1);
                }

                .service-content {
                    padding: 2rem;
                    position: relative;
                }

                .service-content::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 2rem;
                    right: 2rem;
                    height: 3px;
                    background: var(--gradient-primary);
                    transform: scaleX(0);
                    transition: transform 0.2s ease;
                }

                .service-card-modern:hover .service-content::before {
                    transform: scaleX(1);
                }

                .service-title-modern {
                    color: var(--primary-color);
                    font-size: 1.5rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                    position: relative;
                    z-index: 1;
                }

                .service-text-modern {
                    color: var(--text-secondary);
                    line-height: 1.7;
                    margin-bottom: 1.5rem;
                    font-size: 1rem;
                }

                .btn-service-modern {
                    background: var(--gradient-primary);
                    color: white;
                    border: none;
                    border-radius: 25px;
                    padding: 0.8rem 2rem;
                    font-weight: 600;
                    font-size: 1rem;
                    transition: all 0.2s ease;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                }

                .btn-service-modern::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: left 0.3s ease;
                }

                .btn-service-modern:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                }

                .btn-service-modern:hover::before {
                    left: 100%;
                }

                /* Responsive para servicios modernos */
                @media (max-width: 768px) {
                    .service-image-container {
                        height: 220px;
                    }

                    .service-content {
                        padding: 1.5rem;
                    }

                    .service-title-modern {
                        font-size: 1.3rem;
                    }

                    .service-text-modern {
                        font-size: 0.95rem;
                    }

                    .service-icon-overlay {
                        font-size: 3rem;
                    }
                }

                /* Selector de idioma */
                .language-selector {
                    position: fixed;
                    top: 15px;
                    right: 15px;
                    z-index: 9999 !important;
                    background: rgba(95, 177, 52, 0.9);
                    backdrop-filter: blur(8px);
                    border-radius: 20px;
                    padding: 6px;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
                    transition: all 0.3s ease;
                    display: flex;
                    gap: 4px;
                    align-items: center;
                }

                .language-btn {
                    background: transparent;
                    border: none;
                    padding: 6px 12px;
                    border-radius: 12px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    outline: none;
                    box-shadow: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 600;
                    font-size: 0.9rem;
                    color: rgba(255, 255, 255, 0.8);
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }

                .language-btn.active {
                    background: rgba(255, 255, 255, 0.2);
                    color: white;
                    font-weight: 700;
                }

                .language-btn:hover:not(.active) {
                    background: rgba(255, 255, 255, 0.1);
                    color: white;
                    transform: scale(1.05);
                }

                /* Formulario de contacto moderno */
                .contact-container {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 3rem;
                    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                    margin: 2rem 0;
                }

                /* Estilos para la sección de información de contacto */
                .contact-info-wrapper {
                    padding-right: 2rem;
                }

                .contact-title {
                    color: #333;
                    font-size: 2rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                }

                .contact-subtitle {
                    color: #666;
                    font-size: 1.1rem;
                    margin-bottom: 2rem;
                }

                .contact-details {
                    margin-bottom: 2rem;
                }

                .contact-item {
                    display: flex;
                    align-items: flex-start;
                    gap: 1rem;
                    margin-bottom: 1.5rem;
                    padding: 1rem;
                    border-radius: 12px;
                    background: rgba(95, 177, 52, 0.05);
                    transition: all 0.3s ease;
                }

                .contact-item:hover {
                    background: rgba(95, 177, 52, 0.1);
                    transform: translateX(5px);
                }

                .contact-item i {
                    font-size: 1.5rem;
                    color: #5FB134;
                    margin-top: 0.2rem;
                }

                .contact-item h5 {
                    color: #333;
                    font-weight: 600;
                    margin-bottom: 0.3rem;
                }

                .contact-item p {
                    color: #666;
                    margin: 0;
                    line-height: 1.5;
                }

                .social-links {
                    display: flex;
                    gap: 1rem;
                    margin-top: 2rem;
                }

                .social-link {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.2);
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-decoration: none;
                    transition: all 0.3s ease;
                }

                .social-link:hover {
                    background: #4a8f2a;
                    transform: translateY(-3px);
                    color: white;
                }

                /* Estilos para el formulario */
                .form-wrapper {
                    padding-left: 2rem;
                }

                .form-title {
                    color: #333;
                    font-size: 2rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                }

                .form-subtitle {
                    color: #666;
                    font-size: 1.1rem;
                    margin-bottom: 2rem;
                }

                .modern-form .form-group {
                    margin-bottom: 1.5rem;
                }

                .modern-form label {
                    display: block;
                    color: #333;
                    font-weight: 500;
                    margin-bottom: 0.5rem;
                }

                .modern-form .input-container {
                    position: relative;
                    background: #f8f9fa;
                    border: 1px solid #e0e0e0;
                    border-radius: 8px;
                    transition: all 0.3s ease;
                }

                .modern-form .input-container:hover,
                .modern-form .input-container:focus-within {
                    border-color: #5FB134;
                    background: white;
                }

                .modern-form .input-container input,
                .modern-form .input-container select,
                .modern-form .input-container textarea {
                    width: 100%;
                    padding: 0.75rem 1rem 0.75rem 3rem;
                    border: none;
                    background: transparent;
                    font-size: 1rem;
                    color: #333;
                    outline: none;
                }

                .modern-form .input-container textarea {
                    min-height: 140px;
                    resize: vertical;
                }

                .modern-form .input-icon {
                    position: absolute;
                    left: 1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #5FB134;
                    font-size: 1.1rem;
                }

                .modern-form .input-container textarea+.input-icon {
                    top: 1rem;
                    transform: none;
                }

                .modern-form .error-message {
                    color: #dc3545;
                    font-size: 0.875rem;
                    margin-top: 0.5rem;
                    display: none;
                }

                .modern-form .privacy-check {
                    display: flex;
                    align-items: flex-start;
                    gap: 1rem;
                    margin-top: 1rem;
                }

                .modern-form .privacy-check input[type="checkbox"] {
                    margin-top: 0.3rem;
                }

                .modern-form .privacy-check label {
                    font-size: 0.9rem;
                    color: #666;
                    font-weight: normal;
                    line-height: 1.5;
                }

                .modern-form .privacy-check a {
                    color: #5FB134;
                    text-decoration: none;
                }

                .modern-form .privacy-check a:hover {
                    text-decoration: underline;
                }

                .modern-form .btn-primary {
                    background: rgba(255, 255, 255, 0.2);
                    border: none;
                    padding: 1rem 2rem;
                    font-size: 1.1rem;
                    font-weight: 500;
                    border-radius: 8px;
                    transition: all 0.3s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                }

                .modern-form .btn-primary:hover {
                    background: #4a8f2a;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
                }

                .modern-form .btn-primary i {
                    font-size: 1.2rem;
                }

                /* Responsive */
                @media (max-width: 991.98px) {
                    .contact-container {
                        padding: 2rem;
                    }

                    .contact-info-wrapper {
                        padding-right: 0;
                        margin-bottom: 2rem;
                    }

                    .form-wrapper {
                        padding-left: 0;
                    }

                    .contact-title,
                    .form-title {
                        font-size: 1.75rem;
                    }
                }

                @media (max-width: 767.98px) {
                    .contact-container {
                        padding: 1.5rem;
                    }

                    .contact-item {
                        padding: 0.75rem;
                    }

                    .modern-form .input-container input,
                    .modern-form .input-container select,
                    .modern-form .input-container textarea {
                        font-size: 0.95rem;
                    }
                }

                /* Footer mejorado */
                .footer {
                    background: var(--dark-bg) !important;
                    color: var(--white);
                    padding: 3rem 0 1rem;
                    position: relative;
                    overflow: hidden;
                }

                .footer::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: var(--gradient-accent);
                }

                .link-empresa {
                    color: var(--primary-color);
                    text-decoration: none;
                    transition: var(--transition);
                }

                .link-empresa:hover {
                    color: var(--accent-hover);
                    text-decoration: underline;
                }

                /* Efectos de scroll */
                .fade-in {
                    opacity: 0;
                    transform: translateY(30px);
                    transition: var(--transition);
                }

                .fade-in.visible {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Animaciones adicionales */
                .slide-in-left {
                    animation: slideInLeft 0.8s ease-out;
                }

                .slide-in-right {
                    animation: slideInRight 0.8s ease-out;
                }

                @keyframes slideInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-50px);
                    }

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

                @keyframes slideInRight {
                    from {
                        opacity: 0;
                        transform: translateX(50px);
                    }

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

                /* Efectos de hover para botones sociales */
                .btn-social {
                    transition: var(--transition);
                    border-radius: 50%;
                    width: 45px;
                    height: 45px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }

                .btn-social:hover {
                    transform: translateY(-3px) scale(1.1);
                    box-shadow: var(--shadow-strong);
                }

                /* Mejoras en el mapa */
                .responsive-iframe {
                    border-radius: 15px;
                    overflow: hidden;
                    box-shadow: var(--shadow-soft);
                }

                .responsive-iframe iframe {
                    border: none;
                    width: 100%;
                    height: 300px;
                }

                /* Efectos de partículas mejorados */
                #particles-js {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    z-index: 0;
                    background: transparent;
                }

                /* Utilidades adicionales */
                .text-gradient {
                    background: var(--gradient-accent);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }

                .bg-gradient {
                    background: var(--gradient-primary);
                }

                .shadow-custom {
                    box-shadow: var(--shadow-strong);
                }

                /* Efectos de carga */
                .loading {
                    position: relative;
                    overflow: hidden;
                }

                .loading::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                    animation: loading 1.5s infinite;
                }

                @keyframes loading {
                    0% {
                        left: -100%;
                    }

                    100% {
                        left: 100%;
                    }
                }

                .mt-100 {
                    margin-top: 100px !important;
                }

                .border-left-green {
                    border-left: 4px solid #5FB134;
                    font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                    font-size: 16px;
                }

                .text-content-empresa {
                    font-size: 1.1rem;
                    line-height: 1.8;
                    color: var(--text-secondary);
                    margin-bottom: 2rem;
                    text-align: justify;
                }

                .empresa-content p {
                    text-align: justify;
                }

                .image-container-pilares {
                    text-align: center;
                    margin: 2rem 0;
                }

                .image-container-pilares img {
                    max-width: 160px;
                    height: auto;
                    border-radius: 10px;
                    box-shadow: var(--shadow-soft);
                    transition: var(--transition);
                }

                .image-container-pilares:hover img {
                    transform: scale(1.02);
                    box-shadow: var(--shadow-strong);
                }

                /* Estilos para el contenedor de la imagen */
                .image-container {
                    width: 400px;
                    height: 400px;

                    overflow: hidden;
                    position: relative;

                    margin-left: 10%;
                    display: flex;
                    /* Usa flexbox para centrar verticalmente */
                    align-items: center;
                    /* Centra verticalmente el contenido */
                }

                /* Estilos para la imagen */
                .image-container img {
                    max-width: 160px;
                    max-height: 100%;
                    width: auto;
                    height: auto;
                    transition: transform 0.3s ease;
                    /* Efecto de transición para hover */
                }

                .image-container:hover img {
                    border: 2px solid #5FB134;
                    /* Cambia al color y grosor de borde deseado */
                }

                .custom-card {
                    width: 100% !important;
                    /* Asegura que el card ocupe todo el ancho disponible */
                    margin-bottom: 20px !important;
                    /* Espacio entre las tarjetas */
                }

                .custom-card .card-body {
                    position: relative !important;
                    /* Para posicionar absolutamente la cabecera dentro del card */
                }

                .card-text-empresa {
                    font-size: 1rem;
                    line-height: 1.7;
                    color: var(--text-secondary);
                    text-align: justify;
                }

                .card-title-empresa {
                    background-color: #5FB134;
                    color: #fff;
                    padding: 5px;
                    /* Opcional: agrega relleno para que se vea mejor */
                    display: flex;
                    /* Crea un contenedor flexible */
                    justify-content: space-between;
                    /* Espacio uniforme entre el texto y el icono */
                    align-items: center;
                    /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
                }

                .card-title-empresa i {
                    margin-left: 5px;
                    /* Agrega un margen izquierdo al icono para separarlo del texto */
                }

                .section {
                    margin-bottom: 20px !important;
                    /* Agrega margen inferior para separar las secciones */
                }

                .contacto {
                    background-color: #5FB134;
                }

                /* Efectos de scroll reveal */
                .reveal {
                    opacity: 0;
                    transform: translateY(50px);
                    transition: all 0.8s ease;
                }

                .reveal.revealed {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* Efectos de carga para imágenes */
                img {
                    transition: opacity 0.3s ease;
                }

                img.loaded {
                    opacity: 1;
                }

                /* Animación de carga inicial */
                body {
                    opacity: 0;
                    transition: opacity 0.5s ease;
                }

                body.loaded {
                    opacity: 1;
                }

                /* Mejoras en las pestañas */
                .nav-tabs .nav-link {
                    border: none;
                    color: var(--text-secondary);
                    font-weight: 500;
                    padding: 12px 24px;
                    border-radius: 25px;
                    margin: 0 5px;
                    transition: var(--transition);
                }

                .nav-tabs .nav-link.active {
                    background: var(--gradient-accent);
                    color: var(--white);
                    box-shadow: var(--shadow-soft);
                }

                .nav-tabs .nav-link:hover {
                    background: rgba(95, 177, 52, 0.1);
                    color: var(--primary-color);
                }

                /* Efectos de hover para botones sociales mejorados */
                .btn-social:hover {
                    background: var(--accent-color) !important;
                    border-color: var(--accent-color) !important;
                }

                /* Efectos de hover para enlaces */
                a {
                    transition: var(--transition);
                }

                a:hover {
                    color: var(--primary-color);
                }

                /* Efectos de hover para iconos */
                .fas,
                .fab {
                    transition: var(--transition);
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para el botón scroll to top */
                .scroll-to-top:hover {
                    background: var(--accent-hover) !important;
                    transform: translateY(-3px);
                    box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
                }

                /* Efectos de animación para elementos específicos */
                .fade-in-up {
                    animation: fadeInUp 0.8s ease-out;
                }

                .fade-in-down {
                    animation: fadeInDown 0.8s ease-out;
                }

                .fade-in-left {
                    animation: fadeInLeft 0.8s ease-out;
                }

                .fade-in-right {
                    animation: fadeInRight 0.8s ease-out;
                }

                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-30px);
                    }

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

                @keyframes fadeInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-30px);
                    }

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

                @keyframes fadeInRight {
                    from {
                        opacity: 0;
                        transform: translateX(30px);
                    }

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

                /* Efectos de hover para iconos */
                .fas,
                .fab {
                    transition: var(--transition);
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para elementos de la empresa */
                .image-container-pilares:hover img {
                    transform: scale(1.05);
                    transition: var(--transition);
                }

                /* Mejoras en la navegación móvil */
                @media (max-width: 768px) {
                    .navbar-nav {
                        text-align: center;
                    }

                    .navbar-nav .nav-link {
                        padding: 0.5rem 1rem;
                    }

                    .navbar-nav .nav-link:last-child {
                        margin-bottom: 0;
                    }

                    .masthead-heading {
                        font-size: 2.5rem;
                    }

                    .masthead-subheading {
                        font-size: 1.1rem;
                    }

                    .border-left-green-title {
                        font-size: 2.5rem;
                    }

                    .full-width-section {
                        padding: 2rem 0;
                    }

                    #page-empresa {
                        padding: 2rem 0;
                    }

                    .service-highlights {
                        flex-direction: column;
                        gap: 1rem;
                        justify-content: flex-start;
                        padding-left: 1rem;
                    }

                    .service-highlight {
                        font-size: 0.9rem;
                        padding: 0.5rem 1rem;
                    }

                    .side-nav-control {
                        display: none;
                    }

                    .nav-dot {
                        width: 12px;
                        height: 12px;
                    }
                }

                @media (max-width: 992px) {
                    .masthead {
                        padding: 0 1rem;
                    }

                    .service-highlights {
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        gap: 1rem;
                        padding-left: 1rem;
                    }

                    .navbar-brand img {
                        max-height: 40px;
                    }

                    .nav-link {
                        font-size: 1rem;
                        padding: 0.5rem 1rem !important;
                    }
                }

                @media (max-width: 576px) {
                    .masthead-heading {
                        font-size: 2rem;
                    }

                    .service-highlight {
                        font-size: 0.8rem;
                        padding: 0.4rem 0.8rem;
                    }

                    .btn-primary {
                        font-size: 0.9rem;
                        padding: 0.75rem 1.5rem;
                    }

                    .border-left-green-title {
                        font-size: 2rem;
                        padding-left: 1rem;
                    }
                }

                /* Asegurar que todas las secciones ocupen 100% de altura */
                .page-section {
                    min-height: 100vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    padding-top: 80px;
                }

                /* Mejorar el espaciado del contenido en secciones */
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 15px;
                }

                /* Efectos de hover mejorados para navegación */
                .navbar-nav .nav-link {
                    position: relative;
                    transition: all 0.3s ease;
                    margin: 0 0.5rem;
                }

                .navbar-nav .nav-link:hover {
                    transform: translateY(-2px);
                }

                .navbar-nav .nav-link.active {
                    transform: translateY(-2px);
                    font-weight: 700;
                }

                /* Efectos de parallax mejorados */
                .full-width-section::before {
                    will-change: transform;
                    transform: translateZ(0);
                    backface-visibility: hidden;
                }

                /* Optimización para dispositivos móviles */
                @media (max-width: 768px) {
                    .full-width-section::before {
                        background-attachment: scroll;
                    }

                    .masthead::before {
                        background-attachment: scroll;
                    }
                }

                /* Botones mejorados con colores de Gradotech */
                .btn-primary {
                    background: var(--gradient-accent);
                    border: none;
                    padding: 12px 30px;
                    border-radius: 50px;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    transition: var(--transition);
                    box-shadow: var(--shadow-soft);
                    position: relative;
                    overflow: hidden;
                }

                .btn-primary::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: var(--transition);
                }

                .btn-primary:hover::before {
                    left: 100%;
                }

                .btn-primary:hover {
                    transform: translateY(-2px);
                    box-shadow: var(--shadow-strong);
                    background: var(--gradient-primary);
                }

                /* Servicios destacados en el header - COLOR VERDE */
                .service-highlights {
                    display: flex;
                    justify-content: flex-start;
                    margin-top: 3rem;
                    flex-wrap: wrap;
                    gap: 1rem;
                    padding-left: 0;
                    align-items: flex-start;
                }

                .service-highlight {
                    background: rgba(95, 177, 52, 0.9);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(95, 177, 52, 0.3);
                    border-radius: 15px;
                    padding: 1rem 1.5rem;
                    color: var(--white);
                    font-weight: 500;
                    transition: var(--transition);
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                }

                .service-highlight::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 4px;
                    height: 100%;
                    background: var(--white);
                    transition: var(--transition);
                }

                .service-highlight:hover {
                    background: rgba(95, 177, 52, 1);
                    transform: translateY(-5px);
                    border-color: var(--white);
                    box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                }

                .service-highlight:hover::before {
                    width: 100%;
                    opacity: 0.3;
                }

                /* Efecto de brillo para los service highlights */
                .service-highlight::after {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: linear-gradient(45deg,
                            transparent,
                            rgba(255, 255, 255, 0.1),
                            transparent);
                    transform: rotate(45deg);
                    transition: all 0.6s ease;
                    opacity: 0;
                }

                .service-highlight:hover::after {
                    opacity: 1;
                    transform: rotate(45deg) translate(50%, 50%);
                }

                /* Efectos de hover para iconos en service highlights */
                .service-highlight .fas,
                .service-highlight .fab {
                    transition: var(--transition);
                    margin-right: 0.5rem;
                }

                .service-highlight:hover .fas,
                .service-highlight:hover .fab {
                    transform: scale(1.2);
                    color: var(--white);
                }

                /* Efectos de hover para enlaces de contacto */
                .contact-form a:hover {
                    color: var(--accent-hover);
                    text-decoration: underline;
                }

                .contact-form i {
                    color: var(--primary-color);
                    width: 20px;
                }

                /* Efectos de hover para elementos de la empresa */
                .empresa-content:hover {
                    transform: translateY(-2px);
                    transition: var(--transition);
                }

                .image-container-pilares:hover img {
                    transform: scale(1.05);
                    transition: var(--transition);
                }

                /* Mejoras en la accesibilidad */
                .nav-link:focus,
                .btn:focus {
                    outline: 2px solid var(--primary-color);
                    outline-offset: 2px;
                }

                /* Efectos de hover para elementos de partners */
                .partner-card:hover .card-text-empresa {
                    color: var(--text-primary);
                }

                /* Efectos de scroll reveal adicionales */
                .fade-in-up {
                    animation: fadeInUp 0.8s ease-out;
                }

                .fade-in-down {
                    animation: fadeInDown 0.8s ease-out;
                }

                .fade-in-left {
                    animation: fadeInLeft 0.8s ease-out;
                }

                .fade-in-right {
                    animation: fadeInRight 0.8s ease-out;
                }

                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-30px);
                    }

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

                @keyframes fadeInLeft {
                    from {
                        opacity: 0;
                        transform: translateX(-30px);
                    }

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

                @keyframes fadeInRight {
                    from {
                        opacity: 0;
                        transform: translateX(30px);
                    }

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

                /* Títulos elegantes con línea vertical al costado */
                .elegant-title {
                    font-family: 'Roboto', sans-serif;
                    font-size: 3.5rem;
                    font-weight: 600;
                    color: var(--text-primary);
                    margin-bottom: 0;
                    text-transform: none;
                    letter-spacing: -0.5px;
                    line-height: 1;
                    position: relative;
                    padding-left: 2rem;
                    text-align: left;
                }

                .elegant-subtitle {
                    font-family: 'Roboto', sans-serif;
                    font-size: 1.3rem;
                    font-weight: 300;
                    color: var(--text-secondary);
                    margin-bottom: 2rem;
                    margin-top: 0;
                    text-transform: none;
                    letter-spacing: 0.2px;
                    line-height: 1.1;
                    opacity: 0.8;
                    text-align: left;
                    padding-left: 2rem;
                    position: relative;
                }

                /* Contenedor para título y subtítulo con línea vertical compartida */
                .title-container {
                    position: relative;
                    padding-left: 2rem;
                    margin-bottom: 2rem;
                }

                .title-container::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 6px;
                    background: var(--gradient-primary);
                    border-radius: 3px;
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    z-index: 1;
                }

                .title-container .elegant-title {
                    padding-left: 0;
                    margin-bottom: 0;
                }

                .title-container .elegant-subtitle {
                    padding-left: 0;
                    margin-bottom: 0;
                    margin-top: 0;
                }

                /* Animación para los títulos elegantes */
                .elegant-title {
                    opacity: 0;
                    transform: translateY(30px);
                    animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
                }

                .elegant-subtitle {
                    opacity: 0;
                    transform: translateY(20px);
                    animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
                }

                @keyframes elegantTitleFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }

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

                @keyframes elegantSubtitleFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }

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

                /* Responsividad para títulos elegantes */
                @media (max-width: 768px) {
                    .elegant-title {
                        font-size: 2.5rem;
                    }

                    .elegant-subtitle {
                        font-size: 1.1rem;
                    }

                    .title-container {
                        padding-left: 1.5rem;
                    }
                }

                @media (max-width: 576px) {
                    .elegant-title {
                        font-size: 2rem;
                    }

                    .elegant-subtitle {
                        font-size: 1rem;
                    }

                    .title-container {
                        padding-left: 1rem;
                    }
                }

                /* Eliminar contornos de navegación */
                .navbar-nav .nav-link,
                .navbar-nav .nav-link:focus,
                .navbar-nav .nav-link:active,
                .navbar-nav .nav-link:hover {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                    -webkit-box-shadow: none !important;
                    -moz-box-shadow: none !important;
                }

                .navbar-nav .nav-link:focus-visible {
                    outline: none !important;
                    border: none !important;
                    box-shadow: none !important;
                }

                /* Estilos para la sección Nosotros */
                .about-card {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 2.5rem;
                    margin-bottom: 2rem;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

                .about-card::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--gradient-primary);
                }

                .about-icon {
                    width: 60px;
                    height: 60px;
                    background: var(--gradient-primary);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .about-icon i {
                    font-size: 1.5rem;
                    color: var(--white);
                }

                .about-card h3 {
                    color: var(--primary-color);
                    font-weight: 600;
                    margin-bottom: 1rem;
                    font-size: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .about-text {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;
                    flex-grow: 1;
                }

                /* Tarjetas de Misión y Visión */
                .mission-vision-card {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 2.5rem;
                    margin-bottom: 2rem;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    border: 1px solid rgba(95, 177, 52, 0.1);
                    position: relative;
                    overflow: hidden;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

                .mission-vision-card::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: var(--gradient-primary);
                }

                .card-header-mv {
                    display: flex;
                    align-items: center;
                    margin-bottom: 1.5rem;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                }

                .card-header-mv i {
                    font-size: 2rem;
                    color: var(--primary-color);
                    margin-right: 1rem;
                }

                .card-header-mv h3 {
                    color: var(--primary-color);
                    font-weight: 600;
                    margin: 0;
                    font-size: 1.5rem;
                }

                .mission-vision-card p {
                    color: var(--text-secondary);
                    line-height: 1.8;
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;
                    flex-grow: 1;
                }

                /* Responsive para la sección Nosotros */
                @media (max-width: 768px) {

                    .about-card,
                    .mission-vision-card {
                        padding: 2rem;
                    }

                    .about-icon {
                        width: 50px;
                        height: 50px;
                    }

                    .about-icon i {
                        font-size: 1.2rem;
                    }
                }

                /* Grid moderno para servicios */
                .services-grid {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 2.5rem 2rem;
                    justify-content: center;
                }

                .service-modern-card {
                    background: rgba(255, 255, 255, 0.7);
                    border-radius: 2rem;
                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                    border: 1px solid rgba(95, 177, 52, 0.15);
                    padding: 2.5rem 2rem 2rem 2rem;
                    text-align: center;
                    transition: box-shadow 0.3s, transform 0.3s;
                    min-height: 420px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-start;
                }

                .service-modern-card:hover {
                    box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
                    transform: translateY(-6px) scale(1.03);
                }

                .service-icon {
                    background: var(--gradient-primary);
                    border-radius: 50%;
                    width: 80px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
                }

                .service-icon i {
                    color: #fff;
                    font-size: 2.5rem;
                }

                .service-title {
                    font-size: 1.4rem;
                    font-weight: 700;
                    color: var(--primary-color);
                    margin-bottom: 1rem;
                    margin-top: 0.5rem;
                }

                .service-desc {
                    color: var(--text-secondary);
                    font-size: 1.08rem;
                    margin-bottom: 2rem;
                    flex-grow: 1;
                }

                .btn-modern {
                    background: var(--gradient-primary);
                    color: #fff;
                    border: none;
                    border-radius: 2rem;
                    padding: 0.7rem 2.2rem;
                    font-weight: 600;
                    font-size: 1.08rem;
                    box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
                    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
                    position: relative;
                    overflow: hidden;
                }

                .btn-modern:hover {
                    background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
                    color: #fff;
                    box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
                    transform: scale(1.05);
                }

                @media (max-width: 992px) {
                    .service-modern-card {
                        min-height: 380px;

                        /* Variables CSS para la nueva paleta de colores de Gradotech */
                        :root {
                            --primary-color: #5FB134;
                            /* Verde Gradotech */
                            --secondary-color: #4a8f2a;
                            /* Verde más oscuro */
                            --accent-color: #5FB134;
                            /* Verde Gradotech */
                            --accent-hover: #6bc23a;
                            /* Verde hover más claro */
                            --dark-bg: #1a1a1a;
                            /* Fondo oscuro elegante */
                            --light-bg: #f8f9fa;
                            /* Fondo claro */
                            --text-primary: #212121;
                            /* Texto principal */
                            --text-secondary: #757575;
                            /* Texto secundario */
                            --white: #ffffff;
                            --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
                            --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
                            --shadow-soft: 0 4px 20px rgba(95, 177, 52, 0.1);
                            --shadow-strong: 0 8px 30px rgba(95, 177, 52, 0.15);
                            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        }

                        /* Ocultar scrollbar hasta hacer scroll */
                        html {
                            scrollbar-width: none;
                            /* Firefox */
                            -ms-overflow-style: none;
                            /* IE and Edge */
                        }

                        html::-webkit-scrollbar {
                            display: none;
                            /* Chrome, Safari, Opera */
                        }

                        html.scrolling {
                            scrollbar-width: auto;
                            -ms-overflow-style: auto;
                        }

                        html.scrolling::-webkit-scrollbar {
                            display: block;
                            width: 8px;
                        }

                        html.scrolling::-webkit-scrollbar-track {
                            background: #f1f1f1;
                        }

                        html.scrolling::-webkit-scrollbar-thumb {
                            background: var(--primary-color);
                            border-radius: 4px;
                        }

                        html.scrolling::-webkit-scrollbar-thumb:hover {
                            background: var(--secondary-color);
                        }

                        body {
                            font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif;
                            color: var(--text-primary);
                            line-height: 1.6;
                            overflow-x: hidden;
                            opacity: 0;
                            transition: opacity 0.5s ease;
                        }

                        body.loaded {
                            opacity: 1;
                        }

                        /* Navegación transparente que cambia al hacer scroll - COLOR OSCURO */
                        .navbar {
                            background: #f8f9fa !important;
                            backdrop-filter: blur(10px);
                            transition: var(--transition);
                            box-shadow: none;
                        }

                        .navbar.scrolled {
                            background: rgba(26, 26, 26, 0.98) !important;
                            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
                        }

                        .navbar-brand img {
                            transition: var(--transition);
                            max-height: 50px;
                        }

                        .navbar-brand:hover img {
                            transform: scale(1.05);
                        }

                        .nav-link {
                            position: relative;
                            transition: var(--transition);
                            font-weight: 500;
                            color: var(--white) !important;
                            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                            font-size: 1.1rem;
                            padding: 0.75rem 1.2rem !important;
                            outline: none !important;
                            border: none !important;
                            box-shadow: none !important;
                        }

                        .nav-link:focus {
                            outline: none !important;
                            border: none !important;
                            box-shadow: none !important;
                        }

                        .nav-link::after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            width: 0;
                            height: 2px;
                            background: var(--white);
                            transition: var(--transition);
                            transform: translateX(-50%);
                        }

                        .nav-link:hover::after {
                            width: 100%;
                        }

                        .nav-link:hover {
                            color: var(--white) !important;
                            opacity: 0.8;
                        }

                        .nav-link.active {
                            color: var(--white) !important;
                            font-weight: 600;
                        }

                        .nav-link.active::after {
                            width: 100%;
                            background: var(--white);
                        }

                        /* Header mejorado con colores de Gradotech */
                        .masthead {
                            background: var(--gradient-primary);
                            position: relative;
                            height: 100vh;
                            min-height: 100vh;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            overflow: hidden;
                            padding-top: 0;
                        }

                        /* Efecto de ondas animadas */
                        .masthead::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
                            opacity: 0.3;
                            animation: float 20s ease-in-out infinite;
                        }

                        /* Nuevo efecto de ondas animadas */
                        .waves-container {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            z-index: 1;
                        }

                        .wave {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 200%;
                            height: 100%;
                            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23ffffff"/></path></svg>');
                            background-size: 1200px 100%;
                            animation: wave 25s linear infinite;
                        }

                        .wave:nth-child(2) {
                            bottom: 10%;
                            animation: wave 20s linear infinite;
                            opacity: 0.5;
                            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff" opacity=".3"/></path></svg>');
                        }

                        .wave:nth-child(3) {
                            bottom: 20%;
                            animation: wave 15s linear infinite;
                            opacity: 0.2;
                            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".2"/></path></svg>');
                        }

                        @keyframes wave {
                            0% {
                                transform: translateX(0) translateZ(0) scaleY(1);
                            }

                            50% {
                                transform: translateX(-25%) translateZ(0) scaleY(0.8);
                            }

                            100% {
                                transform: translateX(-50%) translateZ(0) scaleY(1);
                            }
                        }

                        @keyframes float {

                            0%,
                            100% {
                                transform: translateY(0px) rotate(0deg);
                            }

                            50% {
                                transform: translateY(-20px) rotate(180deg);
                            }
                        }

                        .masthead .container {
                            position: relative;
                            z-index: 10;
                            text-align: left;
                            padding-left: 2rem;
                            max-width: 1200px;
                            margin: 0 auto;
                        }

                        .masthead-heading {
                            font-size: 4.5rem;
                            font-weight: 800;
                            color: var(--white);
                            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
                            margin-bottom: 1.5rem;
                            letter-spacing: -1px;
                            line-height: 1.1;
                            text-transform: uppercase;
                            opacity: 0;
                            transform: translateY(30px);
                            animation: elegantFadeInUp 1.2s ease-out 0.5s forwards;
                            text-align: left;
                        }

                        .masthead-subheading {
                            font-size: 2rem;
                            color: var(--white) !important;
                            margin-bottom: 2.5rem;
                            opacity: 0.9;
                            font-weight: 300;
                            letter-spacing: 0.5px;
                            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                            opacity: 0;
                            transform: translateY(30px);
                            animation: elegantFadeInUp 1.2s ease-out 0.8s forwards;
                            text-align: left;
                        }

                        @keyframes elegantFadeInUp {
                            from {
                                opacity: 0;
                                transform: translateY(30px);
                            }

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

                        /* Secciones que ocupan 100% de altura con efecto parallax */
                        .full-width-section {
                            min-height: 100vh;
                            padding: 80px 0;
                            position: relative;
                            display: flex;
                            align-items: center;
                            overflow: hidden;
                        }

                        .full-width-section::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background-attachment: fixed;
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            opacity: 0.05;
                            z-index: -1;
                            transform: translateZ(0);
                        }

                        .full-width-section:nth-child(even) {
                            background: var(--light-bg);
                        }

                        .full-width-section:nth-child(even)::before {
                            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%235FB134" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
                        }

                        .full-width-section:nth-child(odd)::before {
                            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%235FB134" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
                        }

                        /* Sección empresa específica - 100% altura */
                        #page-empresa {
                            min-height: 100vh;
                            height: auto;
                            padding: 120px 0 80px 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            position: relative;
                            background: var(--white);
                        }

                        .empresa-content {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                        }

                        /* Títulos de sección mejorados */
                        .border-left-green-title {
                            font-size: 3.5rem;
                            font-weight: 700;
                            color: var(--text-primary);
                            position: relative;
                            padding-left: 2rem;
                            margin-bottom: 3rem;
                            text-transform: uppercase;
                            letter-spacing: -1px;
                        }

                        .border-left-green-title::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 0;
                            bottom: 0;
                            width: 6px;
                            background: var(--gradient-primary);
                            border-radius: 3px;
                        }

                        /* Carrusel horizontal de alianzas */
                        .alliances-carousel {
                            position: relative;
                            height: 220px;
                            overflow: hidden;
                            background: transparent;
                            border-radius: 20px;
                            padding: 2rem;
                            margin: 2rem 0;
                        }

                        .alliances-track {
                            display: flex;
                            animation: scrollHorizontal 60s linear infinite;
                            gap: 4rem;
                            align-items: center;
                            padding: 1rem 0;
                            width: max-content;
                            will-change: transform;
                        }

                        .alliances-track:hover {
                            animation-play-state: paused;
                        }

                        .alliance-item {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            min-width: 200px;
                            height: 140px;
                            padding: 1.5rem;
                            background: transparent;
                            border-radius: 15px;
                            transition: var(--transition);
                            flex-shrink: 0;
                            position: relative;
                        }

                        .alliance-item::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: rgba(255, 255, 255, 0.05);
                            border-radius: 15px;
                            backdrop-filter: blur(10px);
                            border: 1px solid rgba(255, 255, 255, 0.1);
                            transition: var(--transition);
                            opacity: 0;
                        }

                        .alliance-item:hover::before {
                            opacity: 1;
                            background: rgba(255, 255, 255, 0.1);
                            border-color: rgba(95, 177, 52, 0.3);
                        }

                        .alliance-item:hover {
                            transform: scale(1.05);
                        }

                        .alliance-item img {
                            max-width: 160px;
                            max-height: 90px;
                            object-fit: contain;
                            /* filter: grayscale(100%) brightness(0.9); */
                            transition: var(--transition);
                            position: relative;
                            z-index: 1;
                        }

                        .alliance-item:hover img {
                            /* filter: grayscale(0%) brightness(1.1); */
                            transform: scale(1.1);
                        }

                        @keyframes scrollHorizontal {
                            0% {
                                transform: translateX(0);
                            }

                            100% {
                                transform: translateX(calc(-33.333% * 3));
                            }
                        }

                        /* Controles del carrusel horizontal - OCULTOS */
                        .carousel-controls {
                            display: none !important;
                        }

                        .carousel-btn {
                            display: none !important;
                        }

                        .carousel-btn:hover {
                            display: none !important;
                        }

                        .carousel-btn:disabled {
                            display: none !important;
                        }

                        /* Control de navegación lateral como Black-up - OCULTO */
                        .side-nav-control {
                            display: none !important;
                        }

                        .nav-dot {
                            display: none !important;
                        }

                        .nav-dot:hover,
                        .nav-dot.active {
                            display: none !important;
                        }

                        .nav-dot-label {
                            display: none !important;
                        }

                        .nav-dot:hover .nav-dot-label {
                            display: none !important;
                        }

                        /* Efectos de scroll mejorados */
                        .scroll-reveal {
                            opacity: 0;
                            transform: translateY(50px);
                            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                        }

                        .scroll-reveal.revealed {
                            opacity: 1;
                            transform: translateY(0);
                        }

                        .scroll-reveal.from-left {
                            transform: translateX(-50px);
                        }

                        .scroll-reveal.from-right {
                            transform: translateX(50px);
                        }

                        .scroll-reveal.from-bottom {
                            transform: translateY(50px);
                        }

                        .scroll-reveal.scale-in {
                            transform: scale(0.8);
                        }

                        /* Responsive para el carrusel horizontal */
                        @media (max-width: 768px) {
                            .alliances-carousel {
                                height: 150px;
                                padding: 1rem;
                                margin: 1rem 0;
                            }

                            .alliance-item {
                                min-width: 120px;
                                height: 80px;
                                padding: 1rem;
                            }

                            .alliance-item img {
                                max-height: 50px;
                            }

                            .carousel-controls {
                                display: none !important;
                            }

                            .carousel-btn {
                                display: none !important;
                            }

                            .masthead-heading {
                                font-size: 2.5rem;
                            }

                            .masthead-subheading {
                                font-size: 1.3rem;
                            }

                            .side-nav-control {
                                display: none !important;
                            }

                            .nav-dot {
                                display: none !important;
                            }
                        }

                        /* Cards de servicios mejorados */
                        .card {
                            border: none;
                            border-radius: 20px;
                            overflow: hidden;
                            transition: var(--transition);
                            box-shadow: var(--shadow-soft);
                            background: var(--white);
                        }

                        .card:hover {
                            transform: translateY(-10px);
                            box-shadow: var(--shadow-strong);
                        }

                        .card-img-top {
                            transition: var(--transition);
                            height: 250px;
                            object-fit: cover;
                        }

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

                        .card-body {
                            padding: 2rem;
                        }

                        .card-title {
                            color: var(--primary-color);
                            font-weight: 700;
                            font-size: 1.5rem;
                            margin-bottom: 1rem;
                        }

                        .card-text {
                            color: var(--text-secondary);
                            line-height: 1.8;
                            margin-bottom: 1.5rem;
                        }

                        /* Efectos de imagen mejorados */
                        .img-grayscale {
                            filter: grayscale(100%);
                            transition: var(--transition);
                        }

                        .img-grayscale:hover {
                            /* filter: grayscale(0%) brightness(1.1); */
                        }

                        /* Sección de clientes */
                        .client-logo {
                            transition: var(--transition);
                            filter: grayscale(100%);
                            opacity: 0.7;
                        }

                        .client-logo:hover {
                            filter: grayscale(0%);
                            opacity: 1;
                            transform: scale(1.1);
                            box-shadow: var(--shadow-strong);
                            border-color: var(--primary-color);
                        }

                        /* Sección de partners */
                        .partner-card {
                            background: var(--white);
                            border-radius: 15px;
                            padding: 2rem;
                            box-shadow: var(--shadow-soft);
                            transition: var(--transition);
                            border: 1px solid rgba(0, 0, 0, 0.05);
                        }

                        .partner-card:hover {
                            transform: translateY(-5px);
                            box-shadow: var(--shadow-strong);
                            border-color: var(--primary-color);
                        }

                        .partner-card img {
                            transition: var(--transition);
                            filter: grayscale(100%);
                        }

                        .partner-card:hover img {
                            filter: grayscale(0%);
                            transform: scale(1.05);
                        }

                        /* Formulario de contacto mejorado - Diseño limpio y profesional */
                        .contact-form {
                            background: #ffffff;
                            padding: 3rem;
                            border: 1px solid #e0e0e0;
                            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                            margin: 10% 0;
                            max-width: 160px;
                        }

                        .form-wrapper h3 {
                            color: #333;
                            font-size: 1.8rem;
                            font-weight: 600;
                            margin-bottom: 0.5rem;
                            text-align: left;
                        }

                        .form-wrapper p {
                            color: #666;
                            font-size: 1rem;
                            margin-bottom: 2rem;
                            text-align: left;
                        }

                        .form-group {
                            margin-bottom: 1.5rem;
                            position: relative;
                        }

                        /* Contenedor de input mejorado */
                        .input-container {
                            position: relative;
                            background: #ffffff;
                            border: 1px solid #d0d0d0;
                            transition: all 0.2s ease;
                            height: 48px;
                            display: flex;
                            align-items: center;
                        }

                        .input-container:hover {
                            border-color: #5FB134;
                        }

                        .input-container.focused {
                            border-color: #5FB134;
                            border-width: 2px;
                        }

                        .input-container.error {
                            border-color: #dc3545;
                            border-width: 2px;
                        }

                        /* Inputs mejorados */
                        .modern-input,
                        .modern-textarea,
                        .modern-select {
                            width: 100%;
                            border: none;
                            background: transparent;
                            padding: 0.75rem 1rem 0.75rem 3rem;
                            font-size: 0.95rem;
                            color: #333;
                            outline: none;
                            transition: all 0.3s ease;
                            height: 100%;
                            text-align: left;
                        }

                        .modern-input::placeholder,
                        .modern-textarea::placeholder {
                            color: #6c757d;
                            font-size: 0.9rem;
                            text-align: left;
                            opacity: 0.8;
                        }

                        .modern-textarea {
                            height: 140px;
                            resize: vertical;
                            padding-top: 1rem;
                            padding-bottom: 1rem;
                        }

                        .modern-select {
                            cursor: pointer;
                            appearance: none;
                            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                            background-repeat: no-repeat;
                            background-position: right 1rem center;
                            background-size: 1rem;
                            padding-right: 3rem;
                        }

                        .modern-select:focus {
                            box-shadow: none;
                        }

                        .modern-select option {
                            background: white;
                            color: #333;
                            padding: 0.5rem;
                        }

                        /* Iconos de input */
                        .input-icon {
                            position: absolute;
                            left: 0.75rem;
                            top: 50%;
                            transform: translateY(-50%);
                            color: #5FB134;
                            font-size: 1rem;
                            z-index: 2;
                            transition: all 0.2s ease;
                            width: 20px;
                            text-align: center;
                        }

                        .input-container.focused .input-icon {
                            color: #5FB134;
                        }

                        /* Mensajes de error */
                        .error-message {
                            color: #dc3545;
                            font-size: 0.8rem;
                            margin-top: 0.25rem;
                            display: none;
                            animation: slideIn 0.2s ease;
                            text-align: left;
                            padding-left: 0;
                        }

                        @keyframes slideIn {
                            from {
                                opacity: 0;
                                transform: translateY(-5px);
                            }

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

                        /* Botón de envío mejorado */
                        .btn-primary {
                            width: 100%;
                            background: rgba(255, 255, 255, 0.2);
                            color: white;
                            border: none;
                            padding: 0.75rem 1.5rem;
                            font-size: 1rem;
                            font-weight: 500;
                            cursor: pointer;
                            transition: all 0.2s ease;
                            position: relative;
                            overflow: hidden;
                            margin-top: 0.5rem;
                            height: 48px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-transform: none;
                            letter-spacing: normal;
                        }

                        .btn-primary:hover {
                            background: #4a8f2a;
                            transform: none;
                            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.3);
                        }

                        .btn-primary:focus {
                            box-shadow: 0 0 0 3px rgba(95, 177, 52, 0.2);
                        }

                        /* Contenedor de captcha */
                        .captcha-container {
                            background: #f8f9fa;
                            padding: 1rem;
                            border: 1px solid #e0e0e0;
                            margin-bottom: 1rem;
                        }

                        .captcha-question {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            margin-bottom: 0.75rem;
                            font-weight: 500;
                            color: #333;
                        }

                        .captcha-question i {
                            font-size: 1rem;
                            color: #5FB134;
                        }

                        /* Responsive */
                        @media (max-width: 768px) {
                            .contact-form {
                                padding: 2rem;
                                margin: 5% 0;
                            }

                            .form-wrapper h3 {
                                font-size: 1.5rem;
                            }

                            .form-wrapper p {
                                font-size: 0.9rem;
                            }

                            .modern-input,
                            .modern-textarea,
                            .modern-select {
                                font-size: 0.9rem;
                            }

                            .input-icon {
                                font-size: 0.9rem;
                            }
                        }

                        /* Footer mejorado */
                        .footer {
                            background: var(--dark-bg) !important;
                            color: var(--white);
                            padding: 3rem 0 1rem;
                            position: relative;
                            overflow: hidden;
                        }

                        .footer::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            height: 1px;
                            background: var(--gradient-accent);
                        }

                        .link-empresa {
                            color: var(--primary-color);
                            text-decoration: none;
                            transition: var(--transition);
                        }

                        .link-empresa:hover {
                            color: var(--accent-hover);
                            text-decoration: underline;
                        }

                        /* Efectos de scroll */
                        .fade-in {
                            opacity: 0;
                            transform: translateY(30px);
                            transition: var(--transition);
                        }

                        .fade-in.visible {
                            opacity: 1;
                            transform: translateY(0);
                        }

                        /* Animaciones adicionales */
                        .slide-in-left {
                            animation: slideInLeft 0.8s ease-out;
                        }

                        .slide-in-right {
                            animation: slideInRight 0.8s ease-out;
                        }

                        @keyframes slideInLeft {
                            from {
                                opacity: 0;
                                transform: translateX(-50px);
                            }

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

                        @keyframes slideInRight {
                            from {
                                opacity: 0;
                                transform: translateX(50px);
                            }

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

                        /* Efectos de hover para botones sociales */
                        .btn-social {
                            transition: var(--transition);
                            border-radius: 50%;
                            width: 45px;
                            height: 45px;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                        }

                        .btn-social:hover {
                            transform: translateY(-3px) scale(1.1);
                            box-shadow: var(--shadow-strong);
                        }

                        /* Mejoras en el mapa */
                        .responsive-iframe {
                            border-radius: 15px;
                            overflow: hidden;
                            box-shadow: var(--shadow-soft);
                        }

                        .responsive-iframe iframe {
                            border: none;
                            width: 100%;
                            height: 300px;
                        }

                        /* Efectos de partículas mejorados */
                        #particles-js {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100vh;
                            z-index: 0;
                            background: transparent;
                        }

                        /* Utilidades adicionales */
                        .text-gradient {
                            background: var(--gradient-accent);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                        }

                        .bg-gradient {
                            background: var(--gradient-primary);
                        }

                        .shadow-custom {
                            box-shadow: var(--shadow-strong);
                        }

                        /* Efectos de carga */
                        .loading {
                            position: relative;
                            overflow: hidden;
                        }

                        .loading::after {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: -100%;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                            animation: loading 1.5s infinite;
                        }

                        @keyframes loading {
                            0% {
                                left: -100%;
                            }

                            100% {
                                left: 100%;
                            }
                        }

                        .mt-100 {
                            margin-top: 100px !important;
                        }

                        .border-left-green {
                            border-left: 4px solid #5FB134;
                            font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                            font-size: 16px;
                        }

                        .text-content-empresa {
                            font-size: 1.1rem;
                            line-height: 1.8;
                            color: var(--text-secondary);
                            margin-bottom: 2rem;
                            text-align: justify;
                        }

                        .empresa-content p {
                            text-align: justify;
                        }

                        .image-container-pilares {
                            text-align: center;
                            margin: 2rem 0;
                        }

                        .image-container-pilares img {
                            max-width: 160px;
                            height: auto;
                            border-radius: 10px;
                            box-shadow: var(--shadow-soft);
                            transition: var(--transition);
                        }

                        .image-container-pilares:hover img {
                            transform: scale(1.02);
                            box-shadow: var(--shadow-strong);
                        }

                        /* Estilos para el contenedor de la imagen */
                        .image-container {
                            width: 400px;
                            height: 400px;

                            overflow: hidden;
                            position: relative;

                            margin-left: 10%;
                            display: flex;
                            /* Usa flexbox para centrar verticalmente */
                            align-items: center;
                            /* Centra verticalmente el contenido */
                        }

                        /* Estilos para la imagen */
                        .image-container img {
                            max-width: 160px;
                            max-height: 100%;
                            width: auto;
                            height: auto;
                            transition: transform 0.3s ease;
                            /* Efecto de transición para hover */
                        }

                        .image-container:hover img {
                            border: 2px solid #5FB134;
                            /* Cambia al color y grosor de borde deseado */
                        }

                        .custom-card {
                            width: 100% !important;
                            /* Asegura que el card ocupe todo el ancho disponible */
                            margin-bottom: 20px !important;
                            /* Espacio entre las tarjetas */
                        }

                        .custom-card .card-body {
                            position: relative !important;
                            /* Para posicionar absolutamente la cabecera dentro del card */
                        }

                        .card-text-empresa {
                            font-size: 1rem;
                            line-height: 1.7;
                            color: var(--text-secondary);
                            text-align: justify;
                        }

                        .card-title-empresa {
                            background-color: #5FB134;
                            color: #fff;
                            padding: 5px;
                            /* Opcional: agrega relleno para que se vea mejor */
                            display: flex;
                            /* Crea un contenedor flexible */
                            justify-content: space-between;
                            /* Espacio uniforme entre el texto y el icono */
                            align-items: center;
                            /* Aline
  }

  .card-title {
    position: relative; /* Añade posición relativa al título */
                        }

                        .card-title-empresa i {
                            margin-left: 5px;
                            /* Agrega un margen izquierdo al icono para separarlo del texto */
                        }

                        .section {
                            margin-bottom: 20px !important;
                            /* Agrega margen inferior para separar las secciones */
                        }

                        .contacto {
                            background-color: #5FB134;
                        }

                        /* Efectos de scroll reveal */
                        .reveal {
                            opacity: 0;
                            transform: translateY(50px);
                            transition: all 0.8s ease;
                        }

                        .reveal.revealed {
                            opacity: 1;
                            transform: translateY(0);
                        }

                        /* Efectos de carga para imágenes */
                        img {
                            transition: opacity 0.3s ease;
                        }

                        img.loaded {
                            opacity: 1;
                        }

                        /* Animación de carga inicial */
                        body {
                            opacity: 0;
                            transition: opacity 0.5s ease;
                        }

                        body.loaded {
                            opacity: 1;
                        }

                        /* Mejoras en las pestañas */
                        .nav-tabs .nav-link {
                            border: none;
                            color: var(--text-secondary);
                            font-weight: 500;
                            padding: 12px 24px;
                            border-radius: 25px;
                            margin: 0 5px;
                            transition: var(--transition);
                        }

                        .nav-tabs .nav-link.active {
                            background: var(--gradient-accent);
                            color: var(--white);
                            box-shadow: var(--shadow-soft);
                        }

                        .nav-tabs .nav-link:hover {
                            background: rgba(95, 177, 52, 0.1);
                            color: var(--primary-color);
                        }

                        /* Efectos de hover para botones sociales mejorados */
                        .btn-social:hover {
                            background: var(--accent-color) !important;
                            border-color: var(--accent-color) !important;
                        }

                        /* Efectos de hover para enlaces */
                        a {
                            transition: var(--transition);
                        }

                        a:hover {
                            color: var(--primary-color);
                        }

                        /* Efectos de hover para iconos */
                        .fas,
                        .fab {
                            transition: var(--transition);
                        }

                        .service-highlight:hover .fas,
                        .service-highlight:hover .fab {
                            transform: scale(1.2);
                            color: var(--white);
                        }

                        /* Efectos de hover para el botón scroll to top */
                        .scroll-to-top:hover {
                            background: var(--accent-hover) !important;
                            transform: translateY(-3px);
                            box-shadow: 0 6px 25px rgba(95, 177, 52, 0.3);
                        }

                        /* Efectos de animación para elementos específicos */
                        .fade-in-up {
                            animation: fadeInUp 0.8s ease-out;
                        }

                        .fade-in-down {
                            animation: fadeInDown 0.8s ease-out;
                        }

                        .fade-in-left {
                            animation: fadeInLeft 0.8s ease-out;
                        }

                        .fade-in-right {
                            animation: fadeInRight 0.8s ease-out;
                        }

                        @keyframes fadeInDown {
                            from {
                                opacity: 0;
                                transform: translateY(-30px);
                            }

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

                        @keyframes fadeInLeft {
                            from {
                                opacity: 0;
                                transform: translateX(-30px);
                            }

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

                        @keyframes fadeInRight {
                            from {
                                opacity: 0;
                                transform: translateX(30px);
                            }

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

                        /* Efectos de hover para iconos */
                        .fas,
                        .fab {
                            transition: var(--transition);
                        }

                        .service-highlight:hover .fas,
                        .service-highlight:hover .fab {
                            transform: scale(1.2);
                            color: var(--white);
                        }

                        /* Efectos de hover para elementos de la empresa */
                        .image-container-pilares:hover img {
                            transform: scale(1.05);
                            transition: var(--transition);
                        }

                        /* Mejoras en la navegación móvil */
                        @media (max-width: 768px) {
                            .navbar-nav {
                                text-align: center;
                            }

                            .navbar-nav .nav-link {
                                padding: 0.5rem 1rem;
                            }

                            .navbar-nav .nav-link:last-child {
                                margin-bottom: 0;
                            }

                            .masthead-heading {
                                font-size: 2.5rem;
                            }

                            .masthead-subheading {
                                font-size: 1.1rem;
                            }

                            .border-left-green-title {
                                font-size: 2.5rem;
                            }

                            .full-width-section {
                                padding: 2rem 0;
                            }

                            #page-empresa {
                                padding: 2rem 0;
                            }

                            .service-highlights {
                                flex-direction: column;
                                gap: 1rem;
                                justify-content: flex-start;
                                padding-left: 1rem;
                            }

                            .service-highlight {
                                font-size: 0.9rem;
                                padding: 0.5rem 1rem;
                            }

                            .side-nav-control {
                                display: none;
                            }

                            .nav-dot {
                                width: 12px;
                                height: 12px;
                            }
                        }

                        @media (max-width: 992px) {
                            .masthead {
                                padding: 0 1rem;
                            }

                            .service-highlights {
                                flex-wrap: wrap;
                                justify-content: flex-start;
                                gap: 1rem;
                                padding-left: 1rem;
                            }

                            .navbar-brand img {
                                max-height: 40px;
                            }

                            .nav-link {
                                font-size: 1rem;
                                padding: 0.5rem 1rem !important;
                            }
                        }

                        @media (max-width: 576px) {
                            .masthead-heading {
                                font-size: 2rem;
                            }

                            .service-highlight {
                                font-size: 0.8rem;
                                padding: 0.4rem 0.8rem;
                            }

                            .btn-primary {
                                font-size: 0.9rem;
                                padding: 0.75rem 1.5rem;
                            }

                            .border-left-green-title {
                                font-size: 2rem;
                                padding-left: 1rem;
                            }
                        }

                        /* Asegurar que todas las secciones ocupen 100% de altura */
                        .page-section {
                            min-height: 100vh;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            padding-top: 80px;
                        }

                        /* Mejorar el espaciado del contenido en secciones */
                        .container {
                            max-width: 1200px;
                            margin: 0 auto;
                            padding: 0 15px;
                        }

                        /* Efectos de hover mejorados para navegación */
                        .navbar-nav .nav-link {
                            position: relative;
                            transition: all 0.3s ease;
                            margin: 0 0.5rem;
                        }

                        .navbar-nav .nav-link:hover {
                            transform: translateY(-2px);
                        }

                        .navbar-nav .nav-link.active {
                            transform: translateY(-2px);
                            font-weight: 700;
                        }

                        /* Efectos de parallax mejorados */
                        .full-width-section::before {
                            will-change: transform;
                            transform: translateZ(0);
                            backface-visibility: hidden;
                        }

                        /* Optimización para dispositivos móviles */
                        @media (max-width: 768px) {
                            .full-width-section::before {
                                background-attachment: scroll;
                            }

                            .masthead::before {
                                background-attachment: scroll;
                            }
                        }

                        /* Botones mejorados con colores de Gradotech */
                        .btn-primary {
                            background: var(--gradient-accent);
                            border: none;
                            padding: 12px 30px;
                            border-radius: 50px;
                            font-weight: 600;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                            transition: var(--transition);
                            box-shadow: var(--shadow-soft);
                            position: relative;
                            overflow: hidden;
                        }

                        .btn-primary::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: -100%;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                            transition: var(--transition);
                        }

                        .btn-primary:hover::before {
                            left: 100%;
                        }

                        .btn-primary:hover {
                            transform: translateY(-2px);
                            box-shadow: var(--shadow-strong);
                            background: var(--gradient-primary);
                        }

                        /* Servicios destacados en el header - COLOR VERDE */
                        .service-highlights {
                            display: flex;
                            justify-content: flex-start;
                            margin-top: 3rem;
                            flex-wrap: wrap;
                            gap: 1rem;
                            padding-left: 0;
                            align-items: flex-start;
                        }

                        .service-highlight {
                            background: rgba(95, 177, 52, 0.9);
                            backdrop-filter: blur(10px);
                            border: 1px solid rgba(95, 177, 52, 0.3);
                            border-radius: 15px;
                            padding: 1rem 1.5rem;
                            color: var(--white);
                            font-weight: 500;
                            transition: var(--transition);
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                        }

                        .service-highlight::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 4px;
                            height: 100%;
                            background: var(--white);
                            transition: var(--transition);
                        }

                        .service-highlight:hover {
                            background: rgba(95, 177, 52, 1);
                            transform: translateY(-5px);
                            border-color: var(--white);
                            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                        }

                        .service-highlight:hover::before {
                            width: 100%;
                            opacity: 0.3;
                        }

                        /* Efecto de brillo para los service highlights */
                        .service-highlight::after {
                            content: '';
                            position: absolute;
                            top: -50%;
                            left: -50%;
                            width: 200%;
                            height: 200%;
                            background: linear-gradient(45deg,
                                    transparent,
                                    rgba(255, 255, 255, 0.1),
                                    transparent);
                            transform: rotate(45deg);
                            transition: all 0.6s ease;
                            opacity: 0;
                        }

                        .service-highlight:hover::after {
                            opacity: 1;
                            transform: rotate(45deg) translate(50%, 50%);
                        }

                        /* Efectos de hover para iconos en service highlights */
                        .service-highlight .fas,
                        .service-highlight .fab {
                            transition: var(--transition);
                            margin-right: 0.5rem;
                        }

                        .service-highlight:hover .fas,
                        .service-highlight:hover .fab {
                            transform: scale(1.2);
                            color: var(--white);
                        }

                        /* Efectos de hover para enlaces de contacto */
                        .contact-form a:hover {
                            color: var(--accent-hover);
                            text-decoration: underline;
                        }

                        .contact-form i {
                            color: var(--primary-color);
                            width: 20px;
                        }

                        /* Efectos de hover para elementos de la empresa */
                        .empresa-content:hover {
                            transform: translateY(-2px);
                            transition: var(--transition);
                        }

                        .image-container-pilares:hover img {
                            transform: scale(1.05);
                            transition: var(--transition);
                        }

                        /* Mejoras en la accesibilidad */
                        .nav-link:focus,
                        .btn:focus {
                            outline: 2px solid var(--primary-color);
                            outline-offset: 2px;
                        }

                        /* Efectos de hover para elementos de partners */
                        .partner-card:hover .card-text-empresa {
                            color: var(--text-primary);
                        }

                        /* Efectos de scroll reveal adicionales */
                        .fade-in-up {
                            animation: fadeInUp 0.8s ease-out;
                        }

                        .fade-in-down {
                            animation: fadeInDown 0.8s ease-out;
                        }

                        .fade-in-left {
                            animation: fadeInLeft 0.8s ease-out;
                        }

                        .fade-in-right {
                            animation: fadeInRight 0.8s ease-out;
                        }

                        @keyframes fadeInUp {
                            from {
                                opacity: 0;
                                transform: translateY(30px);
                            }

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

                        @keyframes fadeInDown {
                            from {
                                opacity: 0;
                                transform: translateY(-30px);
                            }

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

                        @keyframes fadeInLeft {
                            from {
                                opacity: 0;
                                transform: translateX(-30px);
                            }

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

                        @keyframes fadeInRight {
                            from {
                                opacity: 0;
                                transform: translateX(30px);
                            }

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

                        /* Asegurar que el contenido de empresa se vea bien */
                        /* Comentadas para mantener consistencia con otras secciones */
                        /*
#page-empresa .container {
  margin-top: 2rem;
}

#page-empresa .row {
  margin-bottom: 2rem;
}
*/

                        /* Títulos elegantes con línea vertical al costado */
                        .elegant-title {
                            font-family: 'Roboto', sans-serif;
                            font-size: 3.5rem;
                            font-weight: 600;
                            color: var(--text-primary);
                            margin-bottom: 0;
                            text-transform: none;
                            letter-spacing: -0.5px;
                            line-height: 1;
                            position: relative;
                            padding-left: 2rem;
                            text-align: left;
                        }

                        .elegant-subtitle {
                            font-family: 'Roboto', sans-serif;
                            font-size: 1.3rem;
                            font-weight: 300;
                            color: var(--text-secondary);
                            margin-bottom: 2rem;
                            margin-top: 0;
                            text-transform: none;
                            letter-spacing: 0.2px;
                            line-height: 1.1;
                            opacity: 0.8;
                            text-align: left;
                            padding-left: 2rem;
                            position: relative;
                        }

                        /* Contenedor para título y subtítulo con línea vertical compartida */
                        .title-container {
                            position: relative;
                            padding-left: 2rem;
                            margin-bottom: 2rem;
                        }

                        .title-container::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 0;
                            bottom: 0;
                            width: 6px;
                            background: var(--gradient-primary);
                            border-radius: 3px;
                            display: block !important;
                            visibility: visible !important;
                            opacity: 1 !important;
                            z-index: 1;
                        }

                        .title-container .elegant-title {
                            padding-left: 0;
                            margin-bottom: 0;
                        }

                        .title-container .elegant-subtitle {
                            padding-left: 0;
                            margin-bottom: 0;
                            margin-top: 0;
                        }

                        /* Animación para los títulos elegantes */
                        .elegant-title {
                            opacity: 0;
                            transform: translateY(30px);
                            animation: elegantTitleFadeIn 1s ease-out 0.3s forwards;
                        }

                        .elegant-subtitle {
                            opacity: 0;
                            transform: translateY(20px);
                            animation: elegantSubtitleFadeIn 1s ease-out 0.6s forwards;
                        }

                        @keyframes elegantTitleFadeIn {
                            from {
                                opacity: 0;
                                transform: translateY(30px);
                            }

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

                        @keyframes elegantSubtitleFadeIn {
                            from {
                                opacity: 0;
                                transform: translateY(20px);
                            }

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

                        /* Responsividad para títulos elegantes */
                        @media (max-width: 768px) {
                            .elegant-title {
                                font-size: 2.5rem;
                            }

                            .elegant-subtitle {
                                font-size: 1.1rem;
                            }

                            .title-container {
                                padding-left: 1.5rem;
                            }
                        }

                        @media (max-width: 576px) {
                            .elegant-title {
                                font-size: 2rem;
                            }

                            .elegant-subtitle {
                                font-size: 1rem;
                            }

                            .title-container {
                                padding-left: 1rem;
                            }
                        }

                        /* Eliminar contornos de navegación */
                        .navbar-nav .nav-link,
                        .navbar-nav .nav-link:focus,
                        .navbar-nav .nav-link:active,
                        .navbar-nav .nav-link:hover {
                            outline: none !important;
                            border: none !important;
                            box-shadow: none !important;
                            -webkit-box-shadow: none !important;
                            -moz-box-shadow: none !important;
                        }

                        .navbar-nav .nav-link:focus-visible {
                            outline: none !important;
                            border: none !important;
                            box-shadow: none !important;
                        }

                        /* Estilos para la sección Nosotros */
                        .about-card {
                            background: rgba(255, 255, 255, 0.95);
                            border-radius: 20px;
                            padding: 2.5rem;
                            margin-bottom: 2rem;
                            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                            border: 1px solid rgba(95, 177, 52, 0.1);
                            position: relative;
                            overflow: hidden;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                        }

                        .about-card::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: 4px;
                            background: var(--gradient-primary);
                        }

                        .about-icon {
                            width: 60px;
                            height: 60px;
                            background: var(--gradient-primary);
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 1.5rem;
                            position: relative;
                            z-index: 1;
                            flex-shrink: 0;
                        }

                        .about-icon i {
                            font-size: 1.5rem;
                            color: var(--white);
                        }

                        .about-card h3 {
                            color: var(--primary-color);
                            font-weight: 600;
                            margin-bottom: 1rem;
                            font-size: 1.5rem;
                            position: relative;
                            z-index: 1;
                            flex-shrink: 0;
                        }

                        .about-text {
                            color: var(--text-secondary);
                            line-height: 1.8;
                            margin-bottom: 0;
                            position: relative;
                            z-index: 1;
                            flex-grow: 1;
                        }

                        /* Tarjetas de Misión y Visión */
                        .mission-vision-card {
                            background: rgba(255, 255, 255, 0.95);
                            border-radius: 20px;
                            padding: 2.5rem;
                            margin-bottom: 2rem;
                            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                            border: 1px solid rgba(95, 177, 52, 0.1);
                            position: relative;
                            overflow: hidden;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                        }

                        .mission-vision-card::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: 4px;
                            background: var(--gradient-primary);
                        }

                        .card-header-mv {
                            display: flex;
                            align-items: center;
                            margin-bottom: 1.5rem;
                            position: relative;
                            z-index: 1;
                            flex-shrink: 0;
                        }

                        .card-header-mv i {
                            font-size: 2rem;
                            color: var(--primary-color);
                            margin-right: 1rem;
                        }

                        .card-header-mv h3 {
                            color: var(--primary-color);
                            font-weight: 600;
                            margin: 0;
                            font-size: 1.5rem;
                        }

                        .mission-vision-card p {
                            color: var(--text-secondary);
                            line-height: 1.8;
                            margin-bottom: 0;
                            position: relative;
                            z-index: 1;
                            flex-grow: 1;
                        }

                        /* Responsive para la sección Nosotros */
                        @media (max-width: 768px) {

                            .about-card,
                            .mission-vision-card {
                                padding: 2rem;
                            }

                            .about-icon {
                                width: 50px;
                                height: 50px;
                            }

                            .about-icon i {
                                font-size: 1.2rem;
                            }
                        }

                        /* Grid moderno para servicios */
                        .services-grid {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 2.5rem 2rem;
                            justify-content: center;
                        }

                        .service-modern-card {
                            background: rgba(255, 255, 255, 0.7);
                            border-radius: 2rem;
                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
                            backdrop-filter: blur(8px);
                            -webkit-backdrop-filter: blur(8px);
                            border: 1px solid rgba(95, 177, 52, 0.15);
                            padding: 2.5rem 2rem 2rem 2rem;
                            text-align: center;
                            transition: box-shadow 0.3s, transform 0.3s;
                            min-height: 420px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: flex-start;
                        }

                        .service-modern-card:hover {
                            box-shadow: 0 16px 40px 0 rgba(95, 177, 52, 0.18);
                            transform: translateY(-6px) scale(1.03);
                        }

                        .service-icon {
                            background: var(--gradient-primary);
                            border-radius: 50%;
                            width: 80px;
                            height: 80px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 1.5rem;
                            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.15);
                        }

                        .service-icon i {
                            color: #fff;
                            font-size: 2.5rem;
                        }

                        .service-title {
                            font-size: 1.4rem;
                            font-weight: 700;
                            color: var(--primary-color);
                            margin-bottom: 1rem;
                            margin-top: 0.5rem;
                        }

                        .service-desc {
                            color: var(--text-secondary);
                            font-size: 1.08rem;
                            margin-bottom: 2rem;
                            flex-grow: 1;
                        }

                        .btn-modern {
                            background: var(--gradient-primary);
                            color: #fff;
                            border: none;
                            border-radius: 2rem;
                            padding: 0.7rem 2.2rem;
                            font-weight: 600;
                            font-size: 1.08rem;
                            box-shadow: 0 2px 8px rgba(95, 177, 52, 0.10);
                            transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
                            position: relative;
                            overflow: hidden;
                        }

                        .btn-modern:hover {
                            background: linear-gradient(90deg, #5fb134 0%, #3a7d1c 100%);
                            color: #fff;
                            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.18);
                            transform: scale(1.05);
                        }

                        @media (max-width: 992px) {
                            .service-modern-card {
                                min-height: 380px;
                                padding: 2rem 1.2rem 1.5rem 1.2rem;
                            }

                            .service-icon {
                                width: 65px;
                                height: 65px;
                            }

                            .service-icon i {
                                font-size: 2rem;
                            }
                        }

                        @media (max-width: 768px) {
                            .services-grid {
                                gap: 1.5rem 0.5rem;
                            }

                            .service-modern-card {
                                min-height: 320px;
                                padding: 1.5rem 0.7rem 1.2rem 0.7rem;
                            }

                            .service-title {
                                font-size: 1.1rem;
                            }

                            .service-desc {
                                font-size: 0.98rem;
                            }

                            .btn-modern {
                                font-size: 0.98rem;
                                padding: 0.6rem 1.5rem;
                            }
                        }

                        /* Cards modernas para servicios con imágenes en colores */
                        .service-card-modern {
                            background: rgba(255, 255, 255, 0.95);
                            border-radius: 20px;
                            overflow: hidden;
                            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                            transition: all 0.2s ease;
                            border: 1px solid rgba(95, 177, 52, 0.1);
                            position: relative;
                        }

                        .service-card-modern:hover {
                            transform: translateY(-5px) scale(1.01);
                            box-shadow: 0 20px 40px rgba(95, 177, 52, 0.2);
                            border-color: var(--primary-color);
                        }

                        .service-image-container {
                            position: relative;
                            overflow: hidden;
                            height: 250px;
                        }

                        .service-image {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            transition: transform 0.3s ease;
                            filter: brightness(0.9) contrast(1.1);
                        }

                        .service-card-modern:hover .service-image {
                            transform: scale(1.05);
                            filter: brightness(1) contrast(1.2);
                        }

                        .service-overlay {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: linear-gradient(135deg, rgba(95, 177, 52, 0.8) 0%, rgba(58, 125, 28, 0.9) 100%);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            opacity: 0;
                            transition: opacity 0.2s ease;
                        }

                        .service-card-modern:hover .service-overlay {
                            opacity: 1;
                        }

                        .service-icon-overlay {
                            font-size: 4rem;
                            color: white;
                            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                            transform: scale(0.8);
                            transition: transform 0.2s ease;
                        }

                        .service-card-modern:hover .service-icon-overlay {
                            transform: scale(1);
                        }

                        .service-content {
                            padding: 2rem;
                            position: relative;
                        }

                        .service-content::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 2rem;
                            right: 2rem;
                            height: 3px;
                            background: var(--gradient-primary);
                            transform: scaleX(0);
                            transition: transform 0.2s ease;
                        }

                        .service-card-modern:hover .service-content::before {
                            transform: scaleX(1);
                        }

                        .service-title-modern {
                            color: var(--primary-color);
                            font-size: 1.5rem;
                            font-weight: 700;
                            margin-bottom: 1rem;
                            position: relative;
                            z-index: 1;
                        }

                        .service-text-modern {
                            color: var(--text-secondary);
                            line-height: 1.7;
                            margin-bottom: 1.5rem;
                            font-size: 1rem;
                        }

                        .btn-service-modern {
                            background: var(--gradient-primary);
                            color: white;
                            border: none;
                            border-radius: 25px;
                            padding: 0.8rem 2rem;
                            font-weight: 600;
                            font-size: 1rem;
                            transition: all 0.2s ease;
                            position: relative;
                            overflow: hidden;
                            box-shadow: 0 4px 15px rgba(95, 177, 52, 0.3);
                        }

                        .btn-service-modern::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: -100%;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                            transition: left 0.3s ease;
                        }

                        .btn-service-modern:hover {
                            transform: translateY(-2px);
                            box-shadow: 0 8px 25px rgba(95, 177, 52, 0.4);
                        }

                        .btn-service-modern:hover::before {
                            left: 100%;
                        }

                        /* Responsive para servicios modernos */
                        @media (max-width: 768px) {
                            .service-image-container {
                                height: 220px;
                            }

                            .service-content {
                                padding: 1.5rem;
                            }

                            .service-title-modern {
                                font-size: 1.3rem;
                            }

                            .service-text-modern {
                                font-size: 0.95rem;
                            }

                            .service-icon-overlay {
                                font-size: 3rem;
                            }
                        }

                        /* Selector de idioma */
                        .language-selector {
                            position: fixed;
                            top: 15px;
                            right: 15px;
                            z-index: 9999 !important;
                            background: rgba(95, 177, 52, 0.9);
                            backdrop-filter: blur(8px);
                            border-radius: 20px;
                            padding: 6px;
                            box-shadow: 0 4px 16px rgba(95, 177, 52, 0.2);
                            transition: all 0.3s ease;
                            display: flex;
                            gap: 4px;
                            align-items: center;
                        }

                        .language-btn {
                            background: transparent;
                            border: none;
                            padding: 6px 12px;
                            border-radius: 12px;
                            cursor: pointer;
                            transition: all 0.3s ease;
                            outline: none;
                            box-shadow: none;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: 600;
                            font-size: 0.9rem;
                            color: rgba(255, 255, 255, 0.8);
                            text-transform: uppercase;
                            letter-spacing: 0.5px;
                        }

                        .language-btn.active {
                            background: rgba(255, 255, 255, 0.2);
                            color: white;
                            font-weight: 700;
                        }

                        .language-btn:hover:not(.active) {
                            background: rgba(255, 255, 255, 0.1);
                            color: white;
                            transform: scale(1.05);
                        }

                        /* Formulario de contacto moderno */
                        .contact-container {
                            background: rgba(255, 255, 255, 0.95);
                            border-radius: 20px;
                            padding: 3rem;
                            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                            margin: 2rem 0;
                        }

                        /* Estilos para la sección de información de contacto */
                        .contact-info-wrapper {
                            padding-right: 2rem;
                        }

                        .contact-title {
                            color: #333;
                            font-size: 2rem;
                            font-weight: 700;
                            margin-bottom: 1rem;
                        }

                        .contact-subtitle {
                            color: #666;
                            font-size: 1.1rem;
                            margin-bottom: 2rem;
                        }

                        .contact-details {
                            margin-bottom: 2rem;
                        }

                        .contact-item {
                            display: flex;
                            align-items: flex-start;
                            gap: 1rem;
                            margin-bottom: 1.5rem;
                            padding: 1rem;
                            border-radius: 12px;
                            background: rgba(95, 177, 52, 0.05);
                            transition: all 0.3s ease;
                        }

                        .contact-item:hover {
                            background: rgba(95, 177, 52, 0.1);
                            transform: translateX(5px);
                        }

                        .contact-item i {
                            font-size: 1.5rem;
                            color: #5FB134;
                            margin-top: 0.2rem;
                        }

                        .contact-item h5 {
                            color: #333;
                            font-weight: 600;
                            margin-bottom: 0.3rem;
                        }

                        .contact-item p {
                            color: #666;
                            margin: 0;
                            line-height: 1.5;
                        }

                        .social-links {
                            display: flex;
                            gap: 1rem;
                            margin-top: 2rem;
                        }

                        .social-link {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background: rgba(255, 255, 255, 0.2);
                            color: white;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-decoration: none;
                            transition: all 0.3s ease;
                        }

                        .social-link:hover {
                            background: #4a8f2a;
                            transform: translateY(-3px);
                            color: white;
                        }

                        /* Estilos para el formulario */
                        .form-wrapper {
                            padding-left: 2rem;
                        }

                        .form-title {
                            color: #333;
                            font-size: 2rem;
                            font-weight: 700;
                            margin-bottom: 1rem;
                        }

                        .form-subtitle {
                            color: #666;
                            font-size: 1.1rem;
                            margin-bottom: 2rem;
                        }

                        .modern-form .form-group {
                            margin-bottom: 1.5rem;
                        }

                        .modern-form label {
                            display: block;
                            color: #333;
                            font-weight: 500;
                            margin-bottom: 0.5rem;
                        }

                        .modern-form .input-container {
                            position: relative;
                            background: #f8f9fa;
                            border: 1px solid #e0e0e0;
                            border-radius: 8px;
                            transition: all 0.3s ease;
                        }

                        .modern-form .input-container:hover,
                        .modern-form .input-container:focus-within {
                            border-color: #5FB134;
                            background: white;
                        }

                        .modern-form .input-container input,
                        .modern-form .input-container select,
                        .modern-form .input-container textarea {
                            width: 100%;
                            padding: 0.75rem 1rem 0.75rem 3rem;
                            border: none;
                            background: transparent;
                            font-size: 1rem;
                            color: #333;
                            outline: none;
                        }

                        .modern-form .input-container textarea {
                            min-height: 140px;
                            resize: vertical;
                        }

                        .modern-form .input-icon {
                            position: absolute;
                            left: 1rem;
                            top: 50%;
                            transform: translateY(-50%);
                            color: #5FB134;
                            font-size: 1.1rem;
                        }

                        .modern-form .input-container textarea+.input-icon {
                            top: 1rem;
                            transform: none;
                        }

                        .modern-form .error-message {
                            color: #dc3545;
                            font-size: 0.875rem;
                            margin-top: 0.5rem;
                            display: none;
                        }

                        .modern-form .privacy-check {
                            display: flex;
                            align-items: flex-start;
                            gap: 1rem;
                            margin-top: 1rem;
                        }

                        .modern-form .privacy-check input[type="checkbox"] {
                            margin-top: 0.3rem;
                        }

                        .modern-form .privacy-check label {
                            font-size: 0.9rem;
                            color: #666;
                            font-weight: normal;
                            line-height: 1.5;
                        }

                        .modern-form .privacy-check a {
                            color: #5FB134;
                            text-decoration: none;
                        }

                        .modern-form .privacy-check a:hover {
                            text-decoration: underline;
                        }

                        .modern-form .btn-primary {
                            background: rgba(255, 255, 255, 0.2);
                            border: none;
                            padding: 1rem 2rem;
                            font-size: 1.1rem;
                            font-weight: 500;
                            border-radius: 8px;
                            transition: all 0.3s ease;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 0.5rem;
                        }

                        .modern-form .btn-primary:hover {
                            background: #4a8f2a;
                            transform: translateY(-2px);
                            box-shadow: 0 4px 12px rgba(95, 177, 52, 0.2);
                        }

                        .modern-form .btn-primary i {
                            font-size: 1.2rem;
                        }

                        /* Responsive */
                        @media (max-width: 991.98px) {
                            .contact-container {
                                padding: 2rem;
                            }

                            .contact-info-wrapper {
                                padding-right: 0;
                                margin-bottom: 2rem;
                            }

                            .form-wrapper {
                                padding-left: 0;
                            }

                            .contact-title,
                            .form-title {
                                font-size: 1.75rem;
                            }
                        }

                        @media (max-width: 767.98px) {
                            .contact-container {
                                padding: 1.5rem;
                            }

                            .contact-item {
                                padding: 0.75rem;
                            }

                            .modern-form .input-container input,
                            .modern-form .input-container select,
                            .modern-form .input-container textarea {
                                font-size: 0.95rem;
                            }
                        }

                        /* Captcha */
                        .captcha-container {
                            background: rgba(95, 177, 52, 0.05);
                            border-radius: 12px;
                            padding: 1rem;
                            border: 2px solid rgba(95, 177, 52, 0.2);
                        }

                        .captcha-question {
                            display: flex;
                            align-items: center;
                            gap: 0.8rem;
                            margin-bottom: 0.8rem;
                            font-size: 1rem;
                            font-weight: 600;
                            color: var(--primary-color);
                        }

                        .captcha-question i {
                            font-size: 1.2rem;
                            color: var(--primary-color);
                        }

                        /* Inputs más delgados y compactos */
                        .modern-input,
                        .modern-textarea,
                        .modern-select {
                            width: 100%;
                            border: none;
                            background: transparent;
                            padding: 0.75rem 1rem 0.75rem 3rem;
                            font-size: 0.95rem;
                            color: #333;
                            outline: none;
                            transition: all 0.3s ease;
                            height: 100%;
                            text-align: left;
                        }

                        .modern-input::placeholder,
                        .modern-textarea::placeholder {
                            color: #6c757d;
                            font-size: 0.9rem;
                            text-align: left;
                            opacity: 0.8;
                        }

                        .modern-textarea {
                            height: 140px;
                            resize: vertical;
                            padding-top: 1rem;
                            padding-bottom: 1rem;
                        }

                        .modern-select {
                            cursor: pointer;
                            appearance: none;
                            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FB134' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                            background-repeat: no-repeat;
                            background-position: right 1rem center;
                            background-size: 1rem;
                            padding-right: 3rem;
                        }

                        .modern-select:focus {
                            box-shadow: none;
                        }

                        .modern-select option {
                            background: white;
                            color: #333;
                            padding: 0.5rem;
                        }

                        /* Notificaciones */
                        .notification {
                            position: fixed;
                            top: 20px;
                            right: 20px;
                            background: white;
                            border-radius: 15px;
                            padding: 1rem 1.5rem;
                            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                            border-left: 4px solid var(--primary-color);
                            z-index: 10000;
                            display: flex;
                            align-items: center;
                            gap: 1rem;
                            transform: translateX(400px);
                            transition: all 0.3s ease;
                            max-width: 400px;
                        }

                        .notification.show {
                            transform: translateX(0);
                        }

                        .notification-success {
                            border-left-color: #28a745;
                        }

                        .notification-success i {
                            color: #28a745;
                        }

                        .notification-error {
                            border-left-color: #dc3545;
                        }

                        .notification-error i {
                            color: #dc3545;
                        }

                        .notification i {
                            font-size: 1.2rem;
                        }

                        /* Responsive */
                        @media (max-width: 768px) {
                            .language-selector {
                                position: fixed;
                                top: 1rem;
                                right: 1rem;
                                z-index: 1000;
                            }

                            .language-btn {
                                padding: 0.5rem 1rem;
                                font-size: 0.9rem;
                            }

                            .modern-contact-form {
                                max-width: 160px;
                                margin: 0.5rem;
                                padding: 1rem;
                            }

                            .contact-info-card,
                            .contact-form-card,
                            .contact-map-card {
                                padding: 1.5rem;
                                margin-bottom: 1rem;
                            }

                            .contact-info-title,
                            .contact-map-title {
                                font-size: 1.5rem;
                            }

                            .contact-info-item {
                                padding: 0.8rem;
                            }

                            .modern-input,
                            .modern-textarea,
                            .modern-select {
                                font-size: 0.9rem;
                                padding: 0.6rem 0.8rem 0.6rem 2.5rem;
                            }

                            .input-icon {
                                left: 0.8rem;
                                font-size: 0.9rem;
                            }

                            .floating-label {
                                font-size: 0.8rem;
                            }

                            .notification {
                                max-width: 300px;
                                right: 10px;
                                left: 10px;
                            }

                            .contact-map-container {
                                height: 250px;
                            }

                            .captcha-container {
                                padding: 0.8rem;
                            }

                            .captcha-question {
                                font-size: 0.85rem;
                            }
                        }

                        /* Título de contacto con margen superior */
                        .contact-title-container {
                            margin-top: 3rem;
                        }

                        /* Estilos para el card de contacto unificado */
                        .contact-section {
                            background: #f8f9fa !important;
                            background-image: none !important;
                            padding: 4rem 0;
                            min-height: 100vh;
                            display: flex;
                            align-items: center;
                        }

                        .contact-card {
                            border: none;
                            border-radius: 20px;
                            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                            overflow: hidden;
                            background: rgba(33, 37, 41, 0.9);
                            backdrop-filter: blur(10px);
                            margin: 0 auto;
                        }

                        .contact-info-column {
                            background: transparent;
                            color: white;
                            padding: 3rem 2rem;
                            position: relative;
                        }

                        .contact-info-column::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 100px;
                            height: 140px;
                            background: rgba(255, 255, 255, 0.1);
                            border-radius: 50%;
                            transform: translate(50%, -50%);
                        }

                        .contact-info-wrapper h3 {
                            color: white;
                            font-size: 1.8rem;
                            font-weight: 600;
                            margin-bottom: 1rem;
                        }

                        .contact-info-wrapper p {
                            color: rgba(255, 255, 255, 0.9);
                            font-size: 1rem;
                            line-height: 1.6;
                            margin-bottom: 2rem;
                        }

                        .contact-details {
                            margin-bottom: 2rem;
                        }

                        .contact-item {
                            display: flex;
                            align-items: flex-start;
                            margin-bottom: 1.5rem;
                            padding: 1rem;
                            background: rgba(255, 255, 255, 0.1);
                            border-radius: 12px;
                            backdrop-filter: blur(10px);
                            transition: all 0.3s ease;
                        }

                        .contact-item:hover {
                            background: rgba(255, 255, 255, 0.2);
                            transform: translateY(-2px);
                        }

                        .contact-item i {
                            font-size: 1.2rem;
                            color: #5FB134;
                            margin-right: 1rem;
                            margin-top: 0.2rem;
                            min-width: 20px;
                        }

                        .contact-item h5 {
                            color: white;
                            font-size: 1rem;
                            font-weight: 600;
                            margin: 0 0 0.3rem 0;
                        }

                        .contact-item p {
                            color: rgba(255, 255, 255, 0.9);
                            margin: 0;
                            font-size: 0.9rem;
                        }

                        .map-container {
                            margin-top: 2rem;
                        }

                        .map-placeholder {
                            background: rgba(255, 255, 255, 0.15);
                            border-radius: 15px;
                            padding: 2rem;
                            text-align: center;
                            backdrop-filter: blur(10px);
                            border: 1px solid rgba(255, 255, 255, 0.2);
                        }

                        .map-placeholder i {
                            font-size: 2.5rem;
                            color: #5FB134;
                            margin-bottom: 1rem;
                        }

                        .map-placeholder p {
                            color: rgba(255, 255, 255, 0.9);
                            margin-bottom: 1rem;
                            font-size: 0.9rem;
                        }

                        .map-placeholder .btn {
                            background: rgba(255, 255, 255, 0.2);
                            border: 1px solid #5FB134;
                            color: white;
                            transition: all 0.3s ease;
                        }

                        .map-placeholder .btn:hover {
                            background: #4A8A2A;
                            border-color: #4A8A2A;
                            transform: translateY(-2px);
                        }

                        .form-column {
                            padding: 3rem 2rem;
                            background: white;
                        }

                        .form-wrapper h3 {
                            color: #333;
                            font-size: 1.8rem;
                            font-weight: 600;
                            margin-bottom: 0.5rem;
                        }

                        .form-wrapper p {
                            color: #666;
                            font-size: 1rem;
                            margin-bottom: 2rem;
                        }

                        /* Responsive */
                        @media (max-width: 991.98px) {
                            .contact-section {
                                padding: 2rem 0;
                                min-height: auto;
                            }

                            .contact-info-column,
                            .form-column {
                                padding: 2rem 1.5rem;
                            }

                            .contact-card .row {
                                flex-direction: column;
                            }

                            .contact-info-column {
                                order: 2;
                            }

                            .form-column {
                                order: 1;
                            }
                        }

                        @media (max-width: 767.98px) {
                            .contact-section {
                                padding: 1rem 0;
                            }

                            .contact-info-column,
                            .form-column {
                                padding: 1.5rem 1rem;
                            }

                            .contact-info-wrapper h3,
                            .form-wrapper h3 {
                                font-size: 1.5rem;
                            }
                        }

                        /* Estilos para el popup de cookies */
                        .cookie-consent-overlay {
                            position: fixed;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            top: auto;
                            width: 100vw;
                            height: auto;
                            background: none;
                            display: flex;
                            justify-content: center;
                            align-items: flex-end;
                            z-index: 9999;
                            pointer-events: none;
                        }

                        .cookie-consent-modal {
                            width: 80vw;
                            max-width: 1200px;
                            margin: 0 auto;
                            border-radius: 12px 12px 0 0;
                            background: rgba(20, 20, 20, 0.85);
                            color: #fff;
                            box-shadow: 0 0 16px rgba(0, 0, 0, 0.18);
                            padding: 0.5rem 1.2rem;
                            min-height: 0;
                            display: flex;
                            align-items: center;
                            gap: 1rem;
                            pointer-events: all;
                            animation: slideUp 0.4s;
                            font-size: 0.92rem;
                        }

                        @keyframes slideUp {
                            from {
                                transform: translateY(100%);
                                opacity: 0;
                            }

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

                        .cookie-consent-header {
                            display: flex;
                            align-items: center;
                            margin-bottom: 0;
                            padding-bottom: 0;
                            border-bottom: none;
                            gap: 1rem;
                        }

                        .cookie-consent-header i {
                            font-size: 1.3rem;
                            margin-right: 0.4rem;
                        }

                        .cookie-consent-header h3 {
                            font-size: 1rem;
                        }

                        .cookie-consent-body {
                            flex: 1;
                            min-width: 0;
                        }

                        .cookie-consent-body p {
                            font-size: 0.92rem;
                            margin-bottom: 0;
                            color: #eee;
                        }

                        .cookie-options {
                            gap: 0.7rem;
                        }

                        .cookie-consent-footer {
                            gap: 0.5rem;
                        }

                        .cookie-consent-footer .btn {
                            padding: 0.35rem 1rem;
                            font-size: 0.92rem;
                            border-radius: 16px;
                        }

                        @media (max-width: 900px) {
                            .cookie-consent-modal {
                                flex-direction: column;
                                align-items: flex-start;
                                gap: 0.5rem;
                                padding: 0.7rem 0.5rem;
                                width: 95vw;
                            }

                            .cookie-consent-footer {
                                width: 100%;
                                justify-content: flex-start;
                            }
                        }

                        @media (max-width: 600px) {
                            .cookie-consent-modal {
                                border-radius: 8px 8px 0 0;
                                padding: 0.5rem 0.2rem;
                            }

                            .cookie-consent-header i {
                                font-size: 1.1rem;
                            }

                            .cookie-consent-header h3 {
                                font-size: 0.95rem;
                            }

                            .cookie-consent-body p {
                                font-size: 0.88rem;
                            }

                            .cookie-options {
                                gap: 0.4rem;
                            }

                            .cookie-consent-footer .btn {
                                font-size: 0.88rem;
                                padding: 0.3rem 0.7rem;
                                border-radius: 12px;
                            }
                        }

                        /* Overlay que bloquea toda la página hasta aceptar cookies */
                        .cookie-block-overlay {
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100vw;
                            height: 100vh;
                            background: rgba(0, 0, 0, 0.8);
                            z-index: 9998;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            pointer-events: all;
                        }

                        .cookie-block-content {
                            background: rgba(255, 255, 255, 0.95);
                            padding: 2rem;
                            border-radius: 15px;
                            text-align: center;
                            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                            max-width: 400px;
                            margin: 1rem;
                        }

                        .cookie-block-message {
                            display: flex;
                            align-items: center;
                            gap: 1rem;
                            color: #333;
                            font-size: 1.1rem;
                            font-weight: 500;
                        }

                        .cookie-block-message i {
                            font-size: 2rem;
                            color: #dc3545;
                        }

                        /* Estilos para el botón de rechazar */
                        .cookie-consent-footer .btn-danger {
                            background: #dc3545;
                            color: white;
                            border: none;
                        }

                        .cookie-consent-footer .btn-danger:hover {
                            background: #c82333;
                            color: white;
                        }

                        /* Barra de consentimiento de cookies */
                        .cookie-consent-bar {
                            position: fixed;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            background: rgba(0, 0, 0, 0.95);
                            color: white;
                            z-index: 9999;
                            padding: 1.5rem 0;
                            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
                        }

                        .cookie-consent-content {
                            max-width: 1200px;
                            margin: 0 auto;
                            padding: 0 1rem;
                            display: flex;
                            align-items: flex-start;
                            justify-content: space-between;
                            gap: 2rem;
                        }

                        .cookie-consent-text {
                            display: flex;
                            align-items: flex-start;
                            gap: 1rem;
                            flex: 1;
                        }

                        .cookie-consent-text i {
                            color: #ffc107;
                            font-size: 1.5rem;
                            margin-top: 0.2rem;
                        }

                        .cookie-message {
                            flex: 1;
                        }

                        .cookie-main-text {
                            font-size: 1.1rem;
                            font-weight: 600;
                            margin: 0 0 0.5rem 0;
                            color: #fff;
                        }

                        .cookie-description {
                            font-size: 0.9rem;
                            line-height: 1.5;
                            margin: 0;
                            color: #e9ecef;
                        }

                        .cookie-description a {
                            color: #ffc107;
                            text-decoration: none;
                            font-weight: 500;
                        }

                        .cookie-description a:hover {
                            text-decoration: underline;
                        }

                        .cookie-consent-buttons {
                            display: flex;
                            gap: 0.75rem;
                            flex-shrink: 0;
                            align-items: center;
                        }

                        /* Responsive */
                        @media (max-width: 768px) {
                            .cookie-consent-content {
                                flex-direction: column;
                                text-align: center;
                                gap: 1.5rem;
                            }

                            .cookie-consent-text {
                                flex-direction: column;
                                text-align: center;
                            }

                            .cookie-consent-buttons {
                                flex-wrap: wrap;
                                justify-content: center;
                                width: 100%;
                            }

                            .cookie-consent-buttons .btn {
                                flex: 1;
                                min-width: 120px;
                            }
                        }

                        /* Modal de configuración de cookies */
                        .cookie-settings-modal {
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, 0.7);
                            z-index: 10000;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: 1rem;
                        }

                        .cookie-settings-content {
                            background: white;
                            border-radius: 15px;
                            max-width: 600px;
                            width: 100%;
                            max-height: 80vh;
                            overflow-y: auto;
                            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                        }

                        .cookie-settings-header {
                            padding: 1.5rem;
                            border-bottom: 1px solid #eee;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }

                        .cookie-settings-header h3 {
                            margin: 0;
                            color: #333;
                        }

                        .close-btn {
                            background: none;
                            border: none;
                            font-size: 1.5rem;
                            cursor: pointer;
                            color: #666;
                            padding: 0;
                            width: 30px;
                            height: 30px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        .close-btn:hover {
                            color: #333;
                        }

                        .cookie-settings-body {
                            padding: 1.5rem;
                        }

                        .cookie-category {
                            margin-bottom: 1.5rem;
                            padding: 1rem;
                            border: 1px solid #eee;
                            border-radius: 8px;
                        }

                        .cookie-category-header {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            margin-bottom: 0.5rem;
                        }

                        .cookie-category-header input[type="checkbox"] {
                            margin: 0;
                        }

                        .cookie-category-header label {
                            font-weight: 600;
                            color: #333;
                            margin: 0;
                        }

                        .cookie-required {
                            color: #dc3545;
                            font-size: 0.8rem;
                            font-weight: normal;
                        }

                        .cookie-category p {
                            margin: 0;
                            color: #666;
                            font-size: 0.9rem;
                            line-height: 1.4;
                        }

                        .cookie-settings-footer {
                            padding: 1.5rem;
                            border-top: 1px solid #eee;
                            text-align: right;
                        }

                        /* Responsive para modal */
                        @media (max-width: 768px) {
                            .cookie-settings-content {
                                margin: 1rem;
                                max-height: 90vh;
                            }
                        }

                        /* Efecto de tecleo */
                        #typing-text {
                            min-height: 2.5rem;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            font-size: 1.25rem;
                            color: rgba(255, 255, 255, 0.9);
                            font-weight: 400;
                            letter-spacing: 0.5px;
                            line-height: 1.6;
                            text-align: left;
                            margin: 1rem 0;
                            padding-left: 0;
                        }

                        .typing-cursor {
                            color: #5FB134;
                            font-weight: bold;
                            animation: blink 1.2s infinite;
                            margin-left: 2px;
                            font-size: 1.5rem;
                            line-height: 1;
                            text-shadow: 0 0 10px rgba(95, 177, 52, 0.5);
                            transition: all 0.3s ease;
                            color: #5FB134;
                            font-weight: bold;
                            animation: blink 1.2s infinite;
                            margin-left: 2px;
                            font-size: 1.5rem;
                            line-height: 1;
                        }

                        @keyframes blink {

                            0%,
                            50% {
                                opacity: 1;
                            }

                            51%,
                            100% {
                                opacity: 0;
                            }
                        }

                        /* Responsive para el efecto de tecleo */
                        @media (max-width: 768px) {
                            #typing-text {
                                font-size: 1rem;
                                min-height: 2rem;
                                margin: 0.5rem 0;
                            }

                            .typing-cursor {
                                color: #5FB134;
                                font-weight: bold;
                                animation: blink 1.2s infinite;
                                margin-left: 2px;
                                font-size: 1.5rem;
                                line-height: 1;
                                text-shadow: 0 0 10px rgba(95, 177, 52, 0.5);
                                transition: all 0.3s ease;
                                font-size: 1.2rem;
                            }
                        }

                        @media (max-width: 576px) {
                            #typing-text {
                                font-size: 0.9rem;
                                min-height: 1.8rem;
                            }

                            .typing-cursor {
                                color: #5FB134;
                                font-weight: bold;
                                animation: blink 1.2s infinite;
                                margin-left: 2px;
                                font-size: 1.5rem;
                                line-height: 1;
                                text-shadow: 0 0 10px rgba(95, 177, 52, 0.5);
                                transition: all 0.3s ease;
                                font-size: 1rem;
                            }
                        }

                        /* Estilos para la página de contacto */
                        .contact-header {
                            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../assets/img/contact-bg.jpg');
                            background-position: center;
                            background-size: cover;
                            position: relative;
                            overflow: hidden;
                            padding: 12rem 0 8rem;
                        }

                        .contact-header::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: linear-gradient(45deg, rgba(95, 177, 52, 0.2), rgba(33, 37, 41, 0.8));
                            z-index: 1;
                        }

                        .contact-info-wrapper {
                            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
                            padding: 3rem;
                            border-radius: 0;
                            position: relative;
                            height: 100%;
                            color: var(--white);
                            box-shadow: var(--shadow-strong);
                        }

                        .form-column {
                            padding: 3rem;
                            background: var(--white);
                            border-radius: 0;
                            box-shadow: var(--shadow-soft);
                        }

                        .form-wrapper {
                            max-width: 600px;
                            margin: 0 auto;
                        }

                        .form-floating {
                            margin-bottom: 1.5rem;
                            position: relative;
                        }

                        .form-floating>.form-control,
                        .form-floating>.form-select {
                            height: 60px;
                            padding: 1rem 1rem 1rem 3rem;
                            border: 1px solid #e0e0e0;
                            border-radius: 0;
                            font-size: 1rem;
                            transition: var(--transition);
                        }

                        .form-floating>textarea.form-control {
                            height: 150px;
                            padding-top: 1.5rem;
                        }

                        .form-floating>label {
                            padding: 1rem 1rem 1rem 3rem;
                            color: var(--text-secondary);
                            font-size: 1rem;
                        }

                        .form-floating>.form-control:focus~label,
                        .form-floating>.form-control:not(:placeholder-shown)~label {
                            transform: scale(0.85) translateY(-0.5rem) translateX(-2rem);
                            color: var(--primary-color);
                        }

                        .form-floating>.form-control:focus,
                        .form-floating>.form-select:focus {
                            border-color: var(--primary-color);
                            box-shadow: none;
                            outline: none;
                        }

                        .form-floating i.input-icon {
                            position: absolute;
                            left: 1rem;
                            top: 50%;
                            transform: translateY(-50%);
                            color: var(--text-secondary);
                            z-index: 2;
                            transition: var(--transition);
                        }

                        .form-floating>.form-control:focus~i.input-icon,
                        .form-floating>.form-control:not(:placeholder-shown)~i.input-icon {
                            color: var(--primary-color);
                        }

                        .btn-primary {
                            background: var(--primary-color);
                            border: none;
                            border-radius: 0;
                            padding: 1rem 2rem;
                            font-weight: 600;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                            transition: var(--transition);
                            width: 100%;
                            margin-top: 1rem;
                        }

                        .btn-primary:hover {
                            background: var(--secondary-color);
                            transform: translateY(-2px);
                            box-shadow: var(--shadow-strong);
                        }

                        .form-floating>.form-select {
                            padding-left: 3rem;
                            background-position: right 1rem center;
                        }

                        .form-floating>.form-select~label {
                            padding-left: 3rem;
                        }

                        .form-check {
                            margin: 1.5rem 0;
                        }

                        .form-check-input {
                            border-radius: 0;
                            border-color: var(--text-secondary);
                        }

                        .form-check-label {
                            color: var(--text-secondary);
                            font-size: 0.9rem;
                        }

                        .form-check-label a {
                            color: var(--primary-color);
                            text-decoration: none;
                            transition: var(--transition);
                        }

                        .form-check-label a:hover {
                            color: var(--secondary-color);
                            text-decoration: underline;
                        }