/* === Fuentes === */
/* Aplicamos la fuente base */
body {
    font-family: 'Inter', sans-serif;
}

/* === Paleta: MyScientific (Referencia) === */
.text-myscientific-primary {
    color: #0D47A1;
    /* Azul oscuro de MyScientific */
}

.bg-myscientific-primary {
    background-color: #0D47A1;
}

/* === Paleta: Verdes Frescos (Principal) === */

/* Fondo general de secciones */
.bg-fresh-mint {
    background-color: #CCFBF1;
    /* teal-100 */
}

/* Color principal de acento (textos, botones, nav) */
.bg-dark-green {
    background-color: #065F46;
    /* green-800 */
}

.text-dark-green {
    color: #065F46;
    /* green-800 */
}

/* Color vibrante para detalles (hover, categorías activas) */
.bg-lime-accent {
    background-color: #A3E635;
    /* lime-400 */
}

.text-lime-accent {
    color: #A3E635;
    /* lime-400 */
}

/* ------------------------------------------- */
/* === ESTILOS ESPECÍFICOS DEL ARTÍCULO (AÑADIDOS) === */
/* ------------------------------------------- */

/* NOTA: Las clases .bg-dark-green y .text-dark-green ya estaban definidas arriba. */

/* Regla para el hover de botones (basado en el hover:bg-green-700 original de Tailwind) */
.hover\:bg-green-700:hover {
    background-color: #047857;
}

/* Regla para el hover de enlaces/textos (basado en el group-hover:text-dark-green original) */
.group-hover\:text-dark-green:hover {
    color: #065F46;
    /* text-dark-green */
}


/* Estilos para las tarjetas giratorias (Flipper) */
.flipper-card {
    perspective: 1000px;
}

.flipper-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.7s;
    transform-style: preserve-3d;
}

.flipper-card-inner.is-flipped {
    transform: rotateY(180deg);
}

.flipper-card-front,
.flipper-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border-radius: 0.75rem;
    /* rounded-xl */
}

.flipper-card-back {
    transform: rotateY(180deg);
}

/* Estilos para la lista de referencias (Bibliografía) */
.references-list li {
    padding-left: 1.5em;
    text-indent: -1.5em;
}