/* ====================================================== */
/* 📄 ESTILOS PARA DATOS DEL JARDÍN BOTÁNICO              */
/* ====================================================== */

.tarjeta-datos {
    max-width: 1000px;
    margin: 40px auto;
    background-color: #ffffff;
    padding: 30px 40px;

    /* Reglas weboeba: sans-serif y justificado */
    font-family: sans-serif !important;
    text-align: justify;

    /* Borde inicial sutil de 1px difuminado */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    /* Línea base azul de 2px */
    border-bottom: 2px solid #004080;

    transition: all 0.4s ease;
    border-radius: 8px 8px 0 0;
}

/* EFECTO HOVER */
.tarjeta-datos:hover {
    /* Mantiene el borde de 1px */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #004080;

    /* Sombra azul con degradee (Sombra de los Poetas) */
    box-shadow: 0 10px 20px rgba(0, 64, 128, 0.3);

    /* Pequeño movimiento para resaltar la sombra */
    transform: translateY(-2px);
}

.titulo-datos-verde {
    color: #2e7d32 !important;
    text-align: center;
    font-size: 2.3em;
    font-weight: 700;
    margin-bottom: 30px;
    border-bottom: none !important;
}

.tarjeta-datos p {
    line-height: 1.8;
    color: #333;
    margin-bottom: 18px;
}

.tarjeta-datos b,
.tarjeta-datos strong {
    color: #004080;
}

.tarjeta-datos a {
    color: #0066cc;
    text-decoration: none;
}

.tarjeta-datos a:hover {
    text-decoration: underline;
}

/* Adaptación para móviles */
@media (max-width: 768px) {
    .tarjeta-datos {
        width: 95%;
        padding: 20px;
        margin: 20px auto;
    }
}