/* ==========================================================================
   landing.css  — TuKotillon
   Hoja de estilos EXTERNA.
   Contiene únicamente los estilos que NO están en el <style> interno
   del index.php: sección "Cómo Funciona" (clase .como-funciona / .paso)
   y los formularios de la versión legacy que aún puedan reutilizarse.
   Todo lo demás vive en el <style> del head para evitar conflictos.
   ========================================================================== */

/* ── SECCIÓN CÓMO FUNCIONA (clases legacy usadas en index.php) ── */
.como-funciona {
    padding: 60px 20px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.como-funciona h2 {
    font-size: 2rem;
    color: var(--navy, #1B2B48);
    margin-bottom: 40px;
    font-weight: 800;
}

.pasos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.paso {
    background-color: var(--off, #F5FBFC);
    padding: 30px;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--tq, #00C5D7);
}

.paso:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}

.paso .icono {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.paso h3 {
    font-size: 1.15rem;
    color: var(--navy, #1B2B48);
    margin-bottom: 10px;
    font-weight: 700;
}

.paso p {
    font-size: 0.92rem;
    color: var(--muted, #667080);
    line-height: 1.6;
}

/* ── RESPONSIVE ── */
@media (max-width: 560px) {
    .como-funciona { padding: 48px 18px; }
    .pasos-grid { grid-template-columns: 1fr; }
}