/* ==========================================
   1. VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================== */
:root {
    --bg-main: #f0f2f5;
    --bg-card: #ffffff;
    --bg-content: aliceblue;
    --text-color: #333333;
    --border-color: #cccccc;
    --radius-main: 8px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition-smooth: all 0.3s ease;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--bg-main);
    margin: 0;
    padding: 20px;
}

/* ==========================================
   2. ANIMACIONES
   ========================================== */
@keyframes aparecerSuave {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   3. CONTENEDOR PRINCIPAL
   ========================================== */
.container-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    animation: aparecerSuave 1.2s ease-in-out forwards;
}

/* ==========================================
   4. ESTRUCTURA DE LA CARD
   ========================================== */
.card {
    margin: 15px;
    background-color: var(--bg-card);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow);
    width: 330px;
    height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Alineación vertical estricta */
}

/* 4.1 Área de Imagen Fija (Blindada contra el Hover y Vacíos) */
.card-image {
    height: 50%;         /* Ocupa exactamente la mitad de la card */
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;      /* Bloquea que la imagen se encoja o estire si falta texto */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    /* Cero transiciones y cero transforms para evitar cualquier herencia */
    transform: none !important; 
}

/* 4.2 Contenido General */
.card-content {
    padding: 16px;
    margin: 5px;
    background-color: var(--bg-content);
    border-radius: var(--radius-main);
    flex-grow: 1; /* Si hay texto, llena el espacio sobrante; si no hay, se queda vacío abajo */
}

.card-title {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0 15px 0;
    color: var(--text-color);
}

/* 4.3 Caja de Texto con Scroll */
.caja-scroll {
    width: 100%; 
    height: 150px;
    overflow-y: auto; 
    border: 1px solid var(--border-color);
    padding: 11px;
    background-color: var(--bg-content);
    border-radius: var(--radius-main);
    box-sizing: border-box; 
}

/* ==========================================
   5. ENLACES Y EFECTOS (EXCLUSIVO TEXTO)
   ========================================== */
/* El hover aplica estrictamente y de forma única a las etiquetas <a> de texto */
.card-content a, 
.caja-scroll a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    position: relative; 
    transition: var(--transition-smooth);
}

/* Subrayado animado */
.card-content a::after,
.caja-scroll a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0); 
    height: 2px;          
    bottom: -2px;         
    left: 0;
    background-color: currentColor; 
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

/* Hover del texto (Escala + Línea) */
.card-content a:hover, 
.caja-scroll a:hover {
    transform: scale(1.06); 
}

.card-content a:hover::after,
.caja-scroll a:hover::after {
    transform: scaleX(1);   
    transform-origin: bottom left;
}