/* ============================================================
 * HOME.CSS - Solo se carga en la home
 * ============================================================
 * Aquí van los estilos de las secciones que me pidas:
 * hero, servicios, testimonios, etc.
 * ============================================================ */

/* --- Hero --- */
.hero {
    padding: var(--s-2xl) 0;
    text-align: center;
}
.hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--s-md);
}
.hero__subtitle {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--c-text-light);
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--s-lg);
}

/* --- Secciones genéricas --- */
.section {
    padding: var(--s-2xl) 0;
}
.section--alt {
    background: var(--c-bg-alt);
}
.section__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
    margin-bottom: var(--s-xl);
}

/* --- Grid de cards --- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--s-lg);
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--pad);
}
.card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-lg);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}