/* ===== BASE ===== */ body{ margin:0; font-family: Arial, Helvetica, sans-serif; background:#ffffff; } /* ===== HERO ===== */ .hero{ background:#253ea1; color:#fff; text-align:center; padding:80px 20px; } .hero h1{ margin:0; font-size:40px; } .hero p{ margin-top:10px; opacity:.9; } /* ===== SECCION ===== */ .section{ max-width:1200px; margin:auto; padding:60px 20px; } .section h2{ color:#253ea1; margin-bottom:30px; } /* ===== GRID ===== */ .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } /* ===== CARD ===== */ .card{ border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,0.08); transition:.3s; } .card:hover{ transform:translateY(-5px); } /* IMAGEN */ .card img{ width:100%; height:200px; object-fit:cover; } /* CONTENIDO */ .card-content{ padding:20px; } .card-content h3{ margin:0; color:#253ea1; } .card-content p{ font-size:14px; color:#666; margin:10px 0 15px; } /* BOTON */ .btn{ display:inline-block; padding:10px 18px; background:#253ea1; color:#fff; border-radius:20px; text-decoration:none; font-size:14px; } /* ===== FOOTER ===== */ .footer{ background:#111; color:#fff; padding:40px 20px; } .footer-container{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .footer h4{ margin-bottom:10px; } .footer p{ font-size:14px; color:#ccc; } /* RESPONSIVE */ @media(max-width:900px){ .grid{ grid-template-columns:1fr; } .footer-container{ grid-template-columns:1fr; } }