:root {
    /* Paleta Final: Azul Corporativo y Verde Aqua de Contraste */
    --blanco: #ffffff;
    --oscuro: #0f172a; /* Azul Noche: Fondo Principal del Body */
    --primario: #2563eb; /* Azul Profesional: Botones, bordes, acentos */
    --secundario: #06b6d4; /* Verde Aqua/Teal: Para íconos de servicio y acentos de contraste */
    --gris: #94a3b8; /* Gris Suave: Para texto secundario en fondo oscuro */
    --fondoClaro: #1e293b; /* Gris muy oscuro: Para tarjetas y fondos de sección claros (en el tema oscuro) */
}
/* Globales **/
html {
    font-size: 62.5%;
    box-sizing: border-box; 
    scroll-behavior: smooth; 
}

*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-size: 1.8rem; /* Incremento suave de 16px a 18px */
    font-family: 'Krub', sans-serif;
    /* Nuevo Fondo: Tema Oscuro Tecnológico */
    background-color: var(--oscuro);
    color: var(--blanco); /* Color de texto principal en blanco */
}
.contenedor {
    max-width: 120rem;
    margin: 0 auto;
}
.boton {
    background-color: var(--primario); /* AZUL Profesional para CTA */
    color: var(--blanco);
    padding: 1rem 3rem;
    margin-top: 3rem;
    font-size: 2rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: .5rem;
    width: 90%;
    text-align: center;
    border: none;
    transition: background-color .3s ease;
}
.boton:hover {
    cursor: pointer;
    background-color: #1e52c8; /* Azul un poco más oscuro */
}
@media (min-width: 768px) {
    .boton {
        width: auto;
    }
}
.sombra {
    /* Eliminamos la sombra clásica, no funciona bien en fondos oscuros */
    background-color: var(--fondoClaro); /* Fondo de tarjetas de contenido */
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil */
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.48); /* Sombra oscura */
}

/* Tipografia */
h1 {
    font-size: 3.8rem;
}
h2 {
    font-size: 2.8rem;
    text-align: center;
    border-bottom: 2px solid var(--secundario); /* Línea de color VERDE AQUA bajo el título para contraste */
    padding-bottom: 1rem;
    margin-bottom: 4rem;
    color: var(--blanco); /* Titulo en blanco para destacar */
}
h3 {
    font-size: 1.8rem;
    color: var(--primario); /* AZUL Profesional para subtítulos */
    text-align: center;
}
h1, h2, h3 {
    text-align: center;
}
.titulo span {
    font-size: 2rem;
}

/* Utilidades */
.w-sm-100 {
    width: 100%;
}
@media (min-width: 768px) {
    .w-sm-100 {
        width: auto;
    }
}
.flex {
    display: flex;
}
.alinear-derecha {
    justify-content: flex-end;
}
.alinear-centro {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

/* Navegación */
.nav-bg {
    background-color: #101a35; /* Fondo más oscuro para la barra de navegación */
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navegacion-principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
}
@media (min-width: 768px) {
    .navegacion-principal {
        flex-direction: row;
        justify-content: space-between;
    }
}
.navegacion-principal a {
    display: block;
    text-align: center;
    color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    padding: 1rem;
    transition: background-color .3s ease;
}
.navegacion-principal a:hover {
    background-color: var(--secundario); /* Efecto VERDE AQUA al pasar el cursor */
    color: var(--oscuro);
}

/* Hero */
.hero {
    background-color: var(--oscuro);
    position: relative;
    padding: 10rem 0; 
    min-height: 500px;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
}
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    filter: brightness(30%); 
    object-fit: cover;
}
.contenido-hero {
    position: relative;
    z-index: 1;
    color: var(--blanco);
    text-align: center;
    padding: 2rem;
}
.contenido-hero h2 {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--blanco);
    border-bottom: none;
}
.ubicacion {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.ubicacion p {
    font-size: 2rem;
    margin: 0;
    padding-left: 1rem;
}
.ubicacion svg {
    stroke: var(--secundario); /* Icono de ubicación en VERDE AQUA */
}

/* Servicios */
@media (min-width: 768px) {
    .servicios {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 2rem;
    }
}
.servicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    border-radius: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil para fondo oscuro */
    background-color: var(--fondoClaro); /* Fondo de tarjeta de servicio */
}
.servicio:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(37, 99, 235, 0.3); /* Sombra con color del acento (Azul) */
    border: 1px solid var(--primario); 
}
.servicio h3 {
    color: var(--blanco); /* Subtítulos en blanco para mejor legibilidad */
    font-weight: 700;
}
.servicio p {
    line-height: 2;
    font-size: 1.6rem;
    color: var(--gris); /* Texto secundario en gris suave */
}
.servicio .iconos {
    height: 10rem;
    width: 10rem;
    background-color: var(--secundario); /* Usamos el Verde Aqua para el fondo de los iconos de servicio */
    border-radius: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    box-shadow: 0 0 0 5px rgba(6, 182, 212, 0.3); /* Efecto para destacar el icono */
}
.servicio .iconos svg {
    stroke: var(--oscuro); /* Color del ícono en oscuro para contraste en fondo aqua */
    width: 5rem; 
    height: 5rem;
}

/* ========================================================================= */
/* EXPERIENCIA LABORAL: REDISEÑO A TARJETAS APILADAS (Stacked Cards) */
/* ========================================================================= */
.experiencia-section {
    padding-top: 2rem;
}

.experience-cards-container {
    display: grid;
    gap: 3rem;
}

/* Estilo para cada tarjeta de experiencia */
.experience-card {
    background: var(--fondoClaro); /* Fondo de tarjeta de experiencia */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    position: relative;
    border-left: 5px solid var(--primario); /* Borde de progresión AZUL fuerte */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--blanco); /* Texto principal en blanco */
}

/* Efecto dinámico al pasar el cursor */
.experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.4); /* Sombra más pronunciada con AZUL */
}

/* Contenedor de la cabecera (Título, Empresa, Fechas) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se apilen en móvil */
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador claro */
    padding-bottom: 10px;
}

.card-header h3 {
    text-align: left;
    color: var(--blanco);
    margin: 0;
    flex: 1 1 100%; /* Ocupa todo el ancho en la primera línea */
}
.card-header h4 {
    text-align: left;
    color: var(--secundario); /* La línea de tiempo es VERDE AQUA para destacar */
    font-size: 2.0rem;
    font-weight: 700;
    margin: 0;
    flex: 1 1 100%;
}
.card-header p {
    color: var(--gris);
    font-size: 1.5rem;
    margin: 5px 0 0;
    flex: 1 1 100%;
}

@media (min-width: 768px) {
    .card-header h3 {
        flex: 1; 
        max-width: 70%;
    }
    .card-header h4 {
        text-align: right;
        flex: 1;
        max-width: 30%;
    }
    .card-header p {
        flex: 1 1 100%;
        margin-top: 0; 
    }
}


.experience-card img {
    max-width: 70px;
    height: auto;
    float: right;
    margin-left: 15px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.experience-card p {
    font-size: 1.8rem;
    line-height: 1.8;
    text-align: left;
    color: var(--gris);
}


/* Proyectos */
/* Contenedor principal de la galería */
.proyectos-galeria {
    display: grid;
    grid-template-columns: 1fr; /* Una sola columna para que el proyecto ocupe todo el ancho */
    gap: 6rem; /* Más espacio entre proyectos para mejorar la lectura */
}

/* Diseño interno del proyecto (Grid de dos columnas en pantallas grandes) */
@media (min-width: 992px) {
    .proyecto-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr; /* El video un poco más grande que el texto */
        gap: 4rem;
        align-items: start;
    }
}

/* Estilos para la narrativa técnica */
.bondades-lista {
    padding-left: 2rem;
    text-align: left;
    color: var(--gris);
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.ventaja-empresarial {
    margin-top: 3rem;
    padding: 2rem;
    /* Usamos el fondo oscuro de tu paleta para dar contraste */
    background-color: var(--fondoClaro); 
    /* El borde Cyan (secundario) que pediste para atrapar la mirada */
    border-left: 5px solid var(--secundario); 
    border-radius: 0 8px 8px 0;
    text-align: left;
    line-height: 1.6;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.ventaja-empresarial strong {
    color: var(--secundario); /* Resalta el título en Cyan */
    display: block;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: 1px;
}

.ventaja-empresarial p {
    margin: 0;
    color: var(--blanco);
    font-size: 1.6rem;
}
.proyecto-item {
    background-color: var(--fondoClaro);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}
.proyecto-item h3 {
    color: var(--blanco);
    margin-bottom: 1rem;
}
.proyecto-item p {
    margin-bottom: 2rem;
    color: var(--gris);
}
.proyecto-item iframe {
    border-radius: .5rem;
    margin-bottom: 2rem;
    border: 2px solid var(--primario);
    min-height: 450px; 
}

/* Certificaciones */
.certificaciones-section {
    padding-top: 2rem;
}
.carrusel-certificados {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 4rem;
}
.certificado-item {
    text-align: center;
    padding: 0 1rem; 
}
.carrusel-certificados .certificado-item {
    margin-bottom: 2rem; 
    height: 100%; 
}
.certificado-item img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    border: 3px solid transparent; 
}
.certificado-item img:hover {
    transform: scale(1.05);
    border: 3px solid var(--primario); 
}
.certificado-item h3 {
    color: var(--blanco);
    font-weight: 700;
    margin-bottom: 1rem;
}
.certificado-item p {
    color: var(--gris);
    font-size: 1.5rem;
    margin-top: 1rem;
}

/* Ajustes visuales para el carrusel */
.slick-prev:before, .slick-next:before {
    color: var(--secundario) !important; /* Verde Aqua en flechas */
    font-size: 30px !important;
}
.slick-dots li button:before {
    color: var(--primario) !important; /* Azul en puntos */
    font-size: 12px !important;
}
.certificados-secundarios {
    margin-top: 4rem;
    padding: 3rem;
    background-color: var(--fondoClaro);
    border-radius: 1rem;
    border-left: 5px solid var(--secundario); /* Borde con Verde Aqua */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.certificados-secundarios h3 {
    text-align: left;
    color: var(--blanco);
    margin-top: 0;
    margin-bottom: 2rem;
}
.certificados-secundarios ul {
    list-style: disc;
    padding-left: 2rem;
}
.certificados-secundarios li {
    margin-bottom: 1rem;
    line-height: 1.5;
    color: var(--gris);
}
.certificados-secundarios a {
    color: var(--secundario);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}
.certificados-secundarios a:hover {
    color: var(--primario);
}
.hidden {
    display: none;
}

/* Contacto */
@media (min-width: 768px) {
    .contacto-grid {
        display: grid;
        grid-template-columns: 2fr 1fr; 
        gap: 4rem;
        align-items: start;
    }
}
.formulario fieldset {
    border: 3px solid var(--secundario); /* Borde VERDE AQUA para destacarlo */
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Sombra oscura */
    background-color: var(--fondoClaro);
}
.formulario legend {
    text-align: center;
    font-size: 2.4rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primario); /* Título de la leyenda en Azul */
}
@media (min-width: 768px) {
    .contenedor-campos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto 20rem; 
        column-gap: 1rem;
    }
    .campo:nth-child(3), .campo:nth-child(4) {
        grid-column: 1 / 3;
    }
}

.campo {
    margin-bottom: 1rem;
}
.campo label {
    color: var(--blanco);
    font-weight: 700;
    margin-bottom: .5rem;
    display: block;
}
.campo textarea {
    height: 15rem;
}
.input-text {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: .5rem;
    background-color: var(--oscuro); /* Inputs aún más oscuros que el fondo de la tarjeta */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-size: 1.6rem;
    color: var(--blanco);
    transition: box-shadow 0.3s ease, border-color 0.3s ease; 
}
.input-text:focus {
    outline: none; 
    border-color: var(--primario); /* Borde AZUL al hacer focus */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5); 
}
.input-text::placeholder {
    color: var(--gris);
}

/* Mapa y Ubicación */
.mapa-ubicacion {
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--fondoClaro);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.mapa-ubicacion h3 {
    text-align: left;
    color: var(--blanco);
}
.mapa-ubicacion p {
    font-size: 1.6rem;
    color: var(--gris);
    margin-bottom: 2rem;
}
.mapa-ubicacion iframe {
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Footer */
.footer {
    text-align: center;
    background-color: #101a35; /* Fondo más oscuro para el footer */
    color: var(--blanco);
    padding: 2rem 0;
    margin-top: 2rem;
    font-size: 1.4rem;
}

/* ========================================================================= */
/* ESTILOS PARA LA SECCIÓN SOBRE MÍ (Limpio y sin negritas) */
/* ========================================================================= */
.sobre-mi-mejorada {
    padding-top: 2rem 0;
    padding-bottom: 2rem;
    min-height: auto;
}

.sobre-mi-contenido-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 2rem; 
    align-items: center;
    margin-top: 0;
}

@media (min-width: 992px) {
    .sobre-mi-contenido-grid {
        grid-template-columns: 3fr 1fr; 
    }
}

.perfil-texto p {
    color: var(--gris);
}

.texto-destacado {
    color: var(--secundario); /* Las palabras destacadas ahora son VERDE AQUA para alto contraste */
    font-weight: 700;
}

/* Diseño de la Tarjeta de Resumen */
.perfil-resumen-card {
    background-color: var(--fondoClaro);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    text-align: center;
    border-top: 5px solid var(--primario); /* Borde superior con AZUL */
}

.perfil-imagen-card {
    max-width: 100%;
    border-radius: 50%;
    width: 150px; 
    height: 150px;
    object-fit: cover;
    margin-bottom: 2rem;
    border: 3px solid var(--secundario); /* Borde de la foto con VERDE AQUA */
}

.perfil-resumen-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--blanco);
}

.perfil-resumen-card .rol {
    color: var(--gris);
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

/* Lista limpia y profesional (sin bullets personalizados) */
.perfil-resumen-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 3rem;
    text-align: left;
}

.perfil-resumen-card ul li {
    padding: 0.5rem 0;
    font-size: 1.6rem;
    color: var(--gris);
    /* Se remueven los bullets personalizados */
    list-style-type: none;
}

.boton-perfil {
    margin-top: 2rem;
    display: block;
    text-align: center;
    font-weight: 700;
}


/* ========================================================================= */
/* CLASES PARA ANIMACIÓN AL HACER SCROLL (SCROLL REVEAL) */
/* ========================================================================= */

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

.aparece-scroll {
    opacity: 1;
    transform: translateY(0);
}
/* Estilo específico para el video del proyecto Scoring */
.proyecto-video-render {
    width: 100%;
    border-radius: 0.5rem;
    display: block;
    object-fit: cover; 
    aspect-ratio: 16 / 9; 
    background-color: #000; 
    margin-bottom: 2rem; /* Espacio antes del texto de abajo */
}
/* ========================================================================= */
/* AJUSTE DE LEGIBILIDAD PARA EL PROYECTO 3 (FUENTES MÁS GRANDES)            */
/* ========================================================================= */

.valor-agregado-caja {
    background: rgba(37, 99, 235, 0.12); /* Un poco más de contraste */
    border-left: 5px solid var(--secundario);
    padding: 2rem; /* Más respiro interno */
    margin-top: 2.5rem;
    font-size: 1.8rem; /* EQUIVALE A 18px - Tamaño ideal de lectura */
    border-radius: 0 8px 8px 0;
    line-height: 1.6;
}

.valor-agregado-caja strong {
    color: var(--secundario); /* Resaltamos el texto 'Valor Agregado' en Aqua */
    font-size: 1.9rem;
}

.bondades-lista {
    font-size: 1.8rem; /* EQUIVALE A 18px */
    margin: 2rem 0;
    padding-left: 2.5rem;
    color: var(--blanco); /* Texto principal en blanco para que resalte más */
}

.bondades-lista li {
    margin-bottom: 1.2rem; /* Más espacio entre puntos para que no se vea denso */
}

.bondades-lista strong {
    color: var(--secundario); /* Los términos técnicos como ISO en Aqua */
}

/* Ajuste opcional para los títulos de los proyectos si los ves pequeños */
.proyecto-info h4 {
    font-size: 2.4rem; /* Título del proyecto más imponente */
    margin-bottom: 1.5rem;
    color: var(--secundario);
}

.proyecto-info p {
    font-size: 1.8rem;
    line-height: 1.6;
}