/* Contenedor principal de tarjetas */
.contenedor {
    display: flex; /* Usar flexbox para organizar las tarjetas */
    justify-content: center; /* Centrar horizontalmente */
    flex-wrap: wrap; /* Permite que las tarjetas bajen de línea si no caben */
    gap: 30px; /* Espacio entre tarjetas */
    padding: 30px; /* Espaciado interno */
}

/* Tarjetas generales */
.tarjeta {
    background-color: #84B6F4; /* Fondo azul claro */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 100%; /* Ancho completo del contenedor padre */
    max-width: 400px; /* Ancho máximo */
    padding: 25px; /* Espaciado interno */
    box-sizing: border-box; /* Incluir padding y borde en ancho total */
    transition: transform 0.3s ease; /* Animación suave al mover */
    display: flex; /* Flexbox interno */
    flex-direction: column; /* Elementos en columna */
    justify-content: flex-start; /* Alinear al inicio */
}

/* Efecto hover en tarjeta */
.tarjeta:hover {
    transform: translateY(-5px); /* Eleva la tarjeta ligeramente al pasar el mouse */
}

/* Título dentro de tarjeta */
.tarjeta .titulo {
    font-size: 28px; /* Tamaño del título */
    color: #ffffff; /* Texto blanco */
    margin-bottom: 15px; /* Espacio inferior */
    text-align: center; /* Centrado del texto */
}

/* Texto dentro de tarjeta */
.tarjeta .texto {
    font-size: 18px; /* Tamaño de párrafo */
    line-height: 1.5; /* Espacio entre líneas */
    text-align: justify; /* Texto justificado */
    color: #f0f4ff; /* Color de texto claro */
}

/* Productos específicos sin altura fija */
.producto1,
.producto2,
.producto3 {
  /* Altura adaptable, opcional usar min-height si se desea */
  /* min-height: 300px; */
}