:root { --blanco: #ffffff; --negro: #000000; --gris: #6B6B6B; --verde: #25D366; --rojo: #D32F2F; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--blanco); color: var(--negro); } header { background: var(--blanco); padding: 15px 20px; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .logo { display: flex; align-items: center; } .logo img { height: 60px; margin-right: 10px; } nav a { margin-left: 15px; text-decoration: none; color: var(--negro); font-weight: bold; font-size: 14px; } nav a:hover { color: var(--verde); } .hero { padding: 50px 20px; text-align: center; } .hero h2 { font-size: 32px; margin-bottom: 10px; } .hero p { font-size: 18px; color: var(--gris); max-width: 750px; margin: auto; } .btn { display: inline-block; padding: 14px 22px; margin: 15px 10px; background: var(--verde); color: #fff; text-decoration: none; border-radius: 4px; font-weight: bold; } .btn.secondary { background: var(--negro); } section { padding: 40px 20px; max-width: 1100px; margin: auto; } section h3 { font-size: 26px; margin-bottom: 20px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .box { border: 1px solid #e0e0e0; padding: 20px; border-radius: 4px; background: #fafafa; } .box strong { display: block; margin-bottom: 8px; } footer { background: #f5f5f5; padding: 20px; text-align: center; font-size: 14px; color: var(--gris); border-top: 1px solid #ddd; } .whatsapp { position: fixed; bottom: 20px; right: 20px; background: var(--verde); color: #fff; padding: 15px 18px; border-radius: 50%; font-size: 22px; text-decoration: none; } @media (max-width: 768px) { nav { margin-top: 10px; width: 100%; text-align: center; } nav a { margin: 10px; display: inline-block; } }