/* ======================================
   COMPONENTES REUTILIZABLES
   Cards y elementos de contenido
====================================== */
/* =====================================================
COMPONENTS.CSS — COMPONENTES REUTILIZABLES
-------------------------------------------------------

.card
    contenedor de tarjeta

.card-title
    título de la tarjeta

.card-image
    bloque de imagen

.card-text
    texto descriptivo

===================================================== */

/* Ajustes a tu clase .card existente */
.card {
    min-height: 460px; /* ajusta entre 440–500px a tu gusto */
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    /* 👇 ESTE es el borde correcto (más visible pero elegante) */
    border: 1px solid rgba(0, 0, 0, 0.08);

    /* 👇 Sombra más “corta” pero con más presencia */
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.06);
}
/* Contenedor para el texto con padding interno */
.card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}


.card-title {
    margin: 0;
    text-align: left; /* Alineado a la izquierda como el ejemplo */
    font-size: 2.15rem;
    line-height: 1.2;
    color: #0c0c0c;
}

.card-image > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #000000;
    font-size: medium;
}

/* El Botón Azul */
.card-button {
    display: inline-block;
    align-self: flex-start; /* Evita que el botón se estire a todo el ancho */
    background-color: #0067b8; /* Azul corporativo */
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 2px; /* Bordes ligeramente redondeados */
    
     margin-top: 95px;
    transition: background-color 0.2s ease;
}

.card-button:hover {
    background-color: #005da6; /* Oscurece un poco al pasar el mouse */
    color: #ffffff;
}

.hero-rectangular {
    margin-top:1 em;       /* El espacio exacto que pides */
    display: flex;          /* O grid */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 80vh;       /* Para que siga teniendo altura para centrar */
}