:root {

     --primary: #005BAA;

     --secondary: #00A859;

     --accent: #FF6B00;

     --dark: #111111;

     --light: #FFFFFF;

     --gray: #F5F5F5;

     --primary-light: #E6F0FA;

     --primary-hover: #004B8E;

     --secondary-light: #E6F5EC;

     --secondary-hover: #008E4D;

     --accent-light: #FFE6D5;

     --accent-hover: #E05D00;

     --gray-dark: #E0E0E0;

     --success: var(--secondary);

     --warning: #FFC107;

     --error: #E53935;

     --info: var(--primary);

 }



 /* Reset y Estilos Generales */

 * {

     margin: 0;

     padding: 0;

     box-sizing: border-box;

     font-family: 'Montserrat', sans-serif;

 }



 body {

     background-color: var(--light);

     color: var(--dark);

     overflow-x: hidden;

     scroll-behavior: smooth;

 }





 /* =============================================== */

 /* ESTILOS GENERALES PARA LA SECCIÓN DE PRESENTACION */

 /* =============================================== */

 .hero {

     position: relative;

     height: 100vh;

     overflow: hidden;

     display: flex;

     align-items: center;

     justify-content: center;

     text-align: center;

     color: white;

 }



 .hero-bg-img {

     position: absolute;

     width: 100%;

     height: 100%;

     object-fit: cover;

     z-index: 0;

     filter: brightness(0.5);

 }



 .hero-content {

     position: relative;

     z-index: 1;

     max-width: 1200px;

     padding: 0 2rem;

 }



 .hero h1 {

     font-size: clamp(2.5rem, 6vw, 3rem);

     margin-bottom: 1.5rem;

     background: linear-gradient(to right, var(--light));

     -webkit-background-clip: text;

     background-clip: text;

     color: transparent;

     opacity: 0;

     transform: translateY(40px) scale(0.95);

     animation: heroIntro 1.5s ease-out forwards;

 }



 .hero p {

     font-size: 1.2rem;

     margin-bottom: 2rem;

     max-width: 700px;

     margin-left: auto;

     margin-right: auto;

     color: var(--light);

     opacity: 0;

     transform: translateY(30px);

     animation: heroFade 1.2s ease-out 0.8s forwards;

 }



 .cta-button {

     padding: 1rem 2.5rem;

     background: var(--accent);

     color: var(--light);

     border: none;

     border-radius: 50px;

     font-size: 1.1rem;

     font-weight: 700;

     cursor: pointer;

     transition: all 0.3s ease;

     box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);

     opacity: 0;

     transform: scale(0.95);

     animation: heroFade 1.2s ease-out 1.6s forwards;

 }



 .cta-button:hover {

     transform: translateY(-5px) scale(1.05);

     box-shadow: 0 15px 30px rgba(255, 107, 0, 0.5);

 }



 @keyframes heroIntro {

     to {

         opacity: 1;

         transform: translateY(0) scale(1);

     }

 }



 @keyframes heroFade {

     to {

         opacity: 1;

         transform: translateY(0) scale(1);

     }

 }



















































 /* ============================================== */

 /* ESTILOS GENERALES PARA LA SECCIÓN DE SERVICIOS */

 /* ============================================== */



 .corporate-solutions {

     max-width: 1200px;

     margin: 2rem auto;

     background: var(--light);

     box-shadow: var(--corporate-shadow);

     border-radius: var(--corporate-radius);

     overflow: hidden;

 }



 .corporate-header {

     color: white;

     padding: 3rem 2rem;

     text-align: center;

     position: relative;

     overflow: hidden;

 }



 .header-decoration {

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');

 }



 .corporate-title {

     color: black;

     font-size: 2.5rem;

     font-weight: 700;

     margin-bottom: 0.5rem;

     position: relative;

     z-index: 1;

 }



 .title-highlight {

     color: var(--accent);

 }



 .corporate-subtitle {

     color: black;

     font-size: 1.2rem;

     opacity: 0.9;

     max-width: 700px;

     margin: 0 auto;

     position: relative;

     z-index: 1;

     font-weight: 300;

 }



 .corporate-tabs-container {

     padding: 0;

 }



 .corporate-tabs-nav {

     display: flex;

     background: var(--light);

     border-bottom: 1px solid var(--gray-dark);

     padding: 0 2rem;

 }



 .corporate-tab {

     display: flex;

     align-items: center;

     padding: 1.5rem 2rem;

     background: #e5eaf0;

     border: none;

     cursor: pointer;

     color: #1a2533;

     position: relative;

     transition: all 0.3s ease;

     gap: 1rem;

     border-bottom: 3px solid transparent;

    

     margin: 0 6px;

     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);

     font-weight: 500;

 }



 .corporate-tab:hover {

     background: #d8dee6;

     color: #0d1724;

     transform: translateY(-2px);

 }



 .corporate-tab.active {

     background: #71cb5f;

     color: #ffffff;

     /*border-bottom-color: #1e81b0;*/

     font-weight: 700;

     transform: translateY(0);

     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

 }



 .corporate-tab.active::before {

     content: "";

     position: absolute;

     left: 0;

     top: 10%;

     bottom: 10%;

     

     background: #ffffff;

     

 }



 .corporate-dynamic-title {

     text-align: center;

     padding: 1rem 2rem;

     background-color: var(--gray);

     color: black;

     font-size: 12px;

     font-weight: 600;

     border-top: 1px solid var(--gray-dark);

     border-bottom: 1px solid var(--gray-dark);

 }











 .tab-icon-container {

     width: 48px;

     height: 48px;

     background: var(--primary-light);

     border-radius: 50%;

     display: flex;

     align-items: center;

     justify-content: center;

     color: var(--primary);

     font-size: 1.2rem;

     transition: var(--transition);

 }



 .corporate-tab.active .tab-icon-container {

     background: white;

     color: black;

 }



 .tab-text {

     text-align: left;

 }



 .tab-main-text {

     display: block;

     font-weight: 600;

     font-size: 1.1rem;

 }



 .tab-subtext {

     display: block;

     font-size: 0.85rem;

     opacity: 0.8;

     margin-top: 0.2rem;

 }



 .corporate-tabs-content {

     padding: 2rem;

 }



 .corporate-tab-panel {

     display: none;

     animation: fadeIn 0.5s ease;

 }



 .corporate-tab-panel.active {

     display: block;

 }



 .corporate-service-grid {

     display: grid;

     grid-template-columns: 1fr 1fr;

     gap: 3rem;

 }



 .service-image-container {

     position: relative;

     border-radius: var(--corporate-radius);

     overflow: hidden;

     box-shadow: var(--corporate-shadow);

     height: fit-content;

 }



 .corporate-service-img {

     width: 100%;

     height: auto;

     display: block;

     transition: var(--transition);

 }



 .service-image-container:hover .corporate-service-img {

     transform: scale(1.03);

 }



 .image-overlay {

     position: absolute;

     bottom: 0;

     left: 0;

     width: 100%;

     background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));

     color: white;

     padding: 1rem;

     display: flex;

     align-items: center;

     justify-content: space-between;

     font-size: 0.9rem;

 }



 .image-overlay i {

     color: var(--accent);

 }



 .service-details-container {

     /*display: flex;

     flex-direction: column;

     gap: 2.5rem;*/

 }



 .corporate-service-category {

     margin-bottom: 1.5rem;

 }



 .category-header {

     display: flex;

     align-items: center;

     gap: 1rem;

     margin-bottom: 1.5rem;

 }



 .service-logo {

     width: 50px;

     height: 50px;

     background: var(--primary-light);

     color: var(--primary);

     border-radius: var(--corporate-radius);

     display: flex;

     align-items: center;

     justify-content: center;

     font-size: 1.3rem;

 }



 .corporate-category-title {

     font-size: 16px;

     color: var(--primary);

     margin: 0;

     font-weight: 600;

 }



 .corporate-service-list {

     list-style: none;

     padding: 0;

     margin: 0;

 }



 .corporate-service-item {

     padding: 0.7rem 0;

     padding-left: 2rem;

     position: relative;

     color: #444;

     border-bottom: 1px solid var(--gray-dark);

 }



 .corporate-service-item:last-child {

     border-bottom: none;

 }



 .corporate-service-item i {

     position: absolute;

     left: 0;

     top: 0.9rem;

     color: var(--accent);

     font-size: 0.9rem;

 }



 .corporate-badge {

     background: var(--primary-light);

     color: var(--primary);

     padding: 0.8rem 1.2rem;

     border-radius: var(--corporate-radius);

     display: inline-flex;

     align-items: center;

     gap: 0.7rem;

     font-size: 0.9rem;

     margin-top: 1rem;

 }



 .corporate-badge i {

     color: var(--accent);

 }



 .corporate-features {

     display: flex;

     gap: 1rem;

     margin-top: 2rem;

     flex-wrap: wrap;

 }



 .feature-box {

     background: var(--gray);

     padding: 0.8rem 1.2rem;

     border-radius: var(--corporate-radius);

     display: flex;

     align-items: center;

     gap: 0.7rem;

     font-size: 0.9rem;

 }



 .feature-box i {

     color: var(--accent);

 }



 .corporate-footer {

     background: var(--gray);

     padding: 2rem;

     text-align: center;

     border-top: 1px solid var(--gray-dark);

 }



 .corporate-cta {

     background: var(--accent);

     color: white;

     border: none;

     padding: 0.8rem 2rem;

     border-radius: 50px;

     font-weight: 600;

     cursor: pointer;

     margin-top: 1rem;

     display: inline-flex;

     align-items: center;

     gap: 0.7rem;

     transition: var(--transition);

     box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);

 }



 .corporate-cta:hover {

     background: var(--primary);

     transform: translateY(-2px);

     box-shadow: 0 6px 16px rgba(0, 91, 170, 0.3);

 }



 @keyframes fadeIn {

     from {

         opacity: 0;

         transform: translateY(10px);

     }



     to {

         opacity: 1;

         transform: translateY(0);

     }

 }

 @media (max-width: 1024px) {

     .corporate-service-grid {

         gap: 2rem;

     }

 }



 @media (max-width: 768px) {

     .corporate-tabs-nav {

         flex-direction: column;

         padding: 0;

     }



     .corporate-tab {

         justify-content: flex-start;

         border-bottom: 1px solid var(--gray-dark);

     }



     .corporate-service-grid {

         grid-template-columns: 1fr;

     }



     .service-image-container {

         max-width: 300px;

         margin: 0 auto;

     }



     .corporate-title {

         font-size: 2rem;

     }

 }



 @media (max-width: 480px) {

     .corporate-header {

         padding: 2rem 1rem;

     }



     .corporate-title {

         font-size: 1.8rem;

     }



     .corporate-subtitle {

         font-size: 1rem;

     }



     .corporate-tabs-content {

         padding: 1.5rem;

     }



     .category-header {

         flex-direction: column;

         align-items: flex-start;

         gap: 0.5rem;

     }



     .corporate-category-title {

         font-size: 1.2rem;

     }



     .corporate-service-item {

         font-size: 0.9rem;

     }



     .corporate-footer {

         padding: 1.5rem;

     }

 }







































 /* ============================================= */

 /* ESTILOS GENERALES PARA LA SECCIÓN DE PORTAFOLIO */

 /* ============================================= */



 .portfolio {

     padding: 5rem 2rem;

     background: var(--light);

 }



 .special-title {

     text-align: center;

     margin-bottom: 3rem;

     position: relative;

 }



 .special-title h2 {

     font-size: 2.5rem;

     color: var(--dark);

     margin-bottom: 1.5rem;

     position: relative;

     display: inline-block;

     padding-bottom: 15px;

     font-weight: 700;

     text-transform: uppercase;

     letter-spacing: 1px;

 }



 .special-title h2::after {

     content: '';

     position: absolute;

     bottom: 0;

     left: 50%;

     transform: translateX(-50%);

     width: 80px;

     height: 3px;

     background: var(--primary);

     transition: all 0.3s ease;

 }



 .special-title:hover h2::after {

     width: 120px;

     background: var(--accent);

 }



 .special-title p {

     color: #666;

     font-size: 1.1rem;

     max-width: 600px;

     margin: 0 auto;

     line-height: 1.6;

     font-weight: 300;

 }



 .dark-title {

     text-align: center;

     margin-bottom: 3rem;

     position: relative;

     padding: 20px 0;

 }



 .dark-title h2 {

     font-size: 2.5rem;

     color: var(--light);

     margin-bottom: 1.5rem;

     position: relative;

     display: inline-block;

     padding-bottom: 15px;

     font-weight: 700;

     text-transform: uppercase;

     letter-spacing: 1px;

 }



 .dark-title h2::after {

     content: '';

     position: absolute;

     bottom: 0;

     left: 50%;

     transform: translateX(-50%);

     width: 80px;

     height: 3px;

     background: var(--accent);

     transition: all 0.3s ease;

 }



 .dark-title:hover h2::after {

     width: 120px;

     background: var(--primary);

 }



 .dark-title p {

     color: rgba(255, 255, 255, 0.8);

     font-size: 1.1rem;

     max-width: 600px;

     margin: 0 auto;

     line-height: 1.6;

     font-weight: 300;

 }



 .portfolio-grid {

     display: grid;

     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

     gap: 2rem;

     max-width: 1200px;

     margin: 0 auto;

 }



 .portfolio-item {

     position: relative;

     border-radius: 15px;

     overflow: hidden;

     height: 300px;

     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

     transition: all 0.3s ease;

 }



 .portfolio-item:hover {

     transform: translateY(-10px);

     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

 }



 .portfolio-img {

     width: 100%;

     height: 100%;

     object-fit: cover;

     transition: all 0.5s ease;

 }



 .portfolio-overlay {

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background: linear-gradient(transparent, rgba(0, 91, 170, 0.9));

     display: flex;

     flex-direction: column;

     justify-content: flex-end;

     padding: 2rem;

     opacity: 0;

     transition: all 0.3s ease;

 }



 .portfolio-item:hover .portfolio-overlay {

     opacity: 1;

 }



 .portfolio-item:hover .portfolio-img {

     transform: scale(1.1);

 }



 .portfolio-overlay h3 {

     color: var(--light);

     font-size: 1.5rem;

     margin-bottom: 0.5rem;

     font-weight: 600;

 }



 .portfolio-overlay p {

     color: rgba(255, 255, 255, 0.9);

     font-size: 0.9rem;

 }



 @media (max-width: 768px) {

     .portfolio {

         padding: 3rem 1rem;

     }



     .special-title h2,

     .dark-title h2 {

         font-size: 2rem;

     }



     .special-title p,

     .dark-title p {

         font-size: 1rem;

         padding: 0 1rem;

     }



     .portfolio-grid {

         grid-template-columns: 1fr;

         gap: 1.5rem;

     }



     .portfolio-item {

         height: 250px;

     }

 }



 @media (max-width: 480px) {



     .special-title h2,

     .dark-title h2 {

         font-size: 1.8rem;

         padding-bottom: 10px;

     }



     .special-title h2::after,

     .dark-title h2::after {

         width: 60px;

         height: 2px;

     }



     .portfolio-overlay {

         padding: 1.5rem;

     }



     .portfolio-overlay h3 {

         font-size: 1.3rem;

     }

 }















 /*--------------------------------------------------------------------*/

 /*----------------- INICIO CSSS ELEGIRNOS PORQUE---------------------*/

 /*-------------------------------------------------------------------*/



 .elegirnos-section {

     background: #dbeaff;

     padding: 4rem 1rem;

     text-align: center;

 }



 .elegirnos-title {

     font-size: 2rem;

     color: #1e293b;



     font-weight: 700;

     margin-bottom: 2rem;

 }



 .elegirnos-grid {

     display: grid;

     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

     gap: 1.5rem;

     max-width: 1200px;

     margin: 0 auto;

 }



 .elegirnos-item {

     background-color: #ffffff;

     border-radius: 12px;

     padding: 1.5rem;

     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

     display: flex;

     flex-direction: column;

     align-items: center;

     transition: transform 0.3s ease, box-shadow 0.3s ease;

 }



 .elegirnos-item:hover {

     transform: translateY(-5px);

     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);

 }



 .elegirnos-icon {

     font-size: 2.5rem;

     color: #0ea5e9;

     margin-bottom: 1rem;

 }



 .elegirnos-text h3 {

     font-size: 1.25rem;

     font-weight: 600;

     color: #0f172a;

     margin-bottom: 0.5rem;

 }



 .elegirnos-text p {

     font-size: 0.95rem;

     color: #475569;

 }

 /*--------------------------------------------------------------------*/

 /*----------------- FIN     CSSS ELEGIRNOS PORQUE---------------------*/

 /*-------------------------------------------------------------------*/