:root {
    --primary-color: #20c997; /* Verde menta claro (el único que usaremos) */
    --secondary-color: #1baa80; /* Un tono más oscuro del verde menta para el efecto hover */
    --gradient-start: #20c997;
    --gradient-end: #1baa80;
}
body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

/* --- ESTILOS DE LA BARRA DE NAVEGACIÓN --- */

.navbar {
    /* Fondo blanco semitransparente con efecto "blur" para un look moderno */
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Estilo para los enlaces de la navegación */
.navbar .nav-link {
    color: #34495e; /* Un color de texto oscuro pero no negro puro */
    font-weight: 500;
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

/* Efecto hover para los enlaces: se vuelven verdes */
.navbar .nav-link:hover {
    color: var(--primary-color); /* Usamos la variable de color verde primario */
}

/* Cuando se hace scroll, el fondo se vuelve más opaco y se añade una sombra */
.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-section {
    /* 1. Capa de color oscura para mejorar el contraste del texto */
    /* Se pone un gradiente negro semitransparente sobre la imagen de fondo */
    background: linear-gradient(rgba(25, 30, 35, 0.6), rgba(25, 30, 35, 0.6)), url(assets/imgs/hero.png);

    /* 2. Propiedades para ajustar la imagen de fondo */
    background-size: cover;             /* Hace que la imagen cubra todo el contenedor sin deformarse. */
    background-position: center center; /* Centra la imagen para que el punto focal sea visible. */
    background-repeat: no-repeat;       /* Evita que la imagen se repita si es pequeña. */
    background-attachment: fixed;       /* (Efecto Parallax) Fija la imagen, creando un efecto de profundidad al hacer scroll. */

    /* Estilos que ya tenías */
    color: white;
    padding: 150px 0;
    text-align: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .highlight {
    color: var(--primary-color);
    font-weight: 700;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Agrega esto al final de tu archivo styles.css */

.highlight-text {
    color: #20c997; /* Un tono verde menta brillante */
    font-weight: 600;
}

#nosotros h2 {
    color: #34495e; /* Un color azul oscuro/gris para el título */
    font-weight: 700;
}

.btn-success {
    background-color: #20c997;
    border-color: #20c997;
}

.btn-success:hover {
    background-color: #1baa80;
    border-color: #1baa80;
}


section {
    padding: 80px 0;
}

h2 {
    font-weight: 700;
    margin-bottom: 30px;
}

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card .card-img-top {
    width: 100%;              /* Asegura que la imagen ocupe todo el ancho de la tarjeta. */
    height: 250px;            /* ¡Esta es la clave! Define una altura fija para todas las imágenes. */
    object-fit: cover;        /* Evita que la imagen se estire o deforme. La recorta para que encaje perfectamente. */
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.benefit-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    background-color: #e9f7ef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-card {
    border-left: 5px solid var(--primary-color);
}
.testimonial-card .stars {
    color: #ffc107;
    margin-bottom: 15px;
}

footer a {
    text-decoration: none;
    color: #555;
}

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