/* VARIABLES CSS - Define tus colores aquí */
:root {
    --primary-color: #0d6efd; /* Azul Bootstrap por defecto, cámbialo a tu gusto */
    --bg-color: #f8f9fa;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
}

/* Ajuste para que el Carrusel tenga esquinas redondeadas bonitas */
.carousel-item img {
    object-fit: cover;
    height: 300px; /* Altura fija para evitar saltos al deslizar */
}

/* Efecto hover suave en las tarjetas de experiencia */
.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px); /* Se levanta un poco al pasar el mouse */
}

/* Ajuste visual para los indicadores del carrusel */
.carousel-indicators [data-bs-target] {
    background-color: var(--primary-color);
}

.foto-perfil {
    width: 200px;        /* Tu tamaño deseado */
    height: 200px;       /* Alto igual para ser círculo */
    object-fit: cover;   /* Recorte inteligente */
    border: 5px solid #198754;
    padding: 4px;
    
    /* LÍNEA DE SEGURIDAD PARA MÓVILES */
    max-width: 100%;     
}