/* Paleta de Colores */
.primary-petrol { 
    background-color: #005f73 !important; 
}
.accent-petrol { 
    color: #005f73 !important; 
}
.accent-cyan { 
    color: #00b4d8 !important; 
}


/* --- Botón CTA (Call to Action) --- */
.cta-button { 
    background-color: #00b4d8 !important; /* Cian */
    color: #005f73; /* Texto Petróleo */
    transition: all 0.3s ease; /* Transición unificada */
    box-shadow: 0 4px 6px rgba(0, 180, 216, 0.2); /* Sombra suave por defecto */
}
.cta-button:hover { 
    background-color: #008fa3 !important; /* Cian más oscuro */
    transform: translateY(-3px) scale(1.02); /* ¡Más salto y ligero crecimiento! */
    box-shadow: 0 10px 20px rgba(0, 180, 216, 0.6); /* Sombra más fuerte y con color */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra base sutil */
}
.cta-button:active {
    transform: translateY(0) scale(0.98); /* Simula el clic al bajar y encoger */
    box-shadow: 0 2px 4px rgba(0, 180, 216, 0.2);
    transform: translateY(-5px); /* ESTO HACE QUE SUBA 5 píxeles */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra más grande para dar profundidad */
    cursor: pointer; /* Cambia el cursor para indicar interactividad */
}


/* --- Tarjetas de Valores (Trabajo en Equipo, etc.) --- */
.valor-item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px; /* Forma de píldora */
    color: white;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transición con "resorte" */
    cursor: default;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
}
.valor-item:hover {
    background-color: #00b4d8 !important; /* Cian en hover */
    transform: translateY(-5px) scale(1.1); /* ¡Se levanta y agranda aún más! */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Sombra muy intensa */
}


/* --- Tarjetas de Misión/Visión (Estado Normal) --- */
.mission-vision-card {
    /* Agrega 'position: relative' para que 'z-index' funcione y la tarjeta se muestre 
       por encima de otros elementos al elevarse. */
    position: relative;
    /* La transición se aplica al estado normal para que la animación se vea tanto
       al entrar como al salir del hover. */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.4s ease;
    /* Sombra base sutil */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}

/* --- Tarjetas de Misión/Visión (Estado Hover) --- */
.mission-vision-card:hover {
    /* 1. ELEVACIÓN: Mueve la tarjeta 7px hacia arriba. */
    transform: translateY(-7px); 
    
    /* 2. CAMBIO DE SOMBRA: Hace la sombra más grande y usa un color Petróleo/Azul oscuro 
          con más opacidad (0.3) para destacarla. */
    box-shadow: 0 15px 30px rgba(0, 95, 115, 0.3);
    
    /* 3. PRIORIDAD VISUAL: Asegura que la tarjeta elevada no quede detrás de otros elementos. */
    z-index: 10;
    
    /* 4. CURSOR: Indica que es un elemento interactivo. */
    cursor: pointer;
}

/* --- Tarjetas de Programas Sectoriales --- */
.program-card {
    transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1), box-shadow 0.4s ease; /* Movimiento fluido y distinto */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); 
}
.program-card:hover {
    transform: translateY(-8px); /* ¡Máxima elevación! */
    box-shadow: 0 20px 35px rgba(0, 95, 115, 0.4); /* Sombra muy profunda y oscura de color Petróleo */
}