/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Arial', sans-serif; }
body { background-color:#f0f8ff; color:#333; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:20px 50px; background:#fff; position:sticky; top:0; z-index:1000; box-shadow:0 2px 8px rgba(0,0,0,0.1);}
header .logo a { text-decoration:none; font-weight:bold; font-size:24px; color:#25D366; }
header nav ul { display:flex; list-style:none; gap:20px; }
header nav ul li a { text-decoration:none; color:#333; font-weight:500; transition:0.3s; }
header nav ul li a:hover { color:#25D366; }

/* Hero */
.hero { height:80vh; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; position:relative; }
.hero::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4);}
.hero-content { position:relative; z-index:1; }
.hero-content h1 { font-size:48px; margin-bottom:20px; }
.hero-content p { font-size:20px; margin-bottom:30px; }
.hero-buttons a { text-decoration:none; margin:0 10px; padding:12px 25px; border-radius:25px; font-weight:bold; transition:0.3s; }
.btn-primary { background:#25D366; color:#fff; }
.btn-primary:hover { background:#1ebe57; }
.btn-ghost { background:transparent; border:2px solid #fff; color:#fff; }
.btn-ghost:hover { background:#25D366; color:#fff; }

/* Servicios */
.services { padding:80px 50px; text-align:center; }
.services h2 { font-size:36px; margin-bottom:50px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; }
.card { background:#fff; padding:20px; border-radius:15px; box-shadow:0 10px 25px rgba(0,0,0,0.1); transition:0.3s; position:relative; overflow:hidden; }
.card:hover { transform:translateY(-10px); box-shadow:0 15px 30px rgba(0,0,0,0.2);}
.card img { width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:15px; }
.btn-mas { margin-top:15px; padding:8px 20px; border:none; background:#25D366; color:#fff; border-radius:20px; cursor:pointer; transition:0.3s; }
.btn-mas:hover { background:#1ebe57; }

/* Formulario deslizante */
.form-slide { position:fixed; top:0; left:-100%; width:400px; height:100%; background:#fff; box-shadow: 4px 0 20px rgba(0,0,0,0.2); padding:30px; transition:0.5s; z-index:9999; overflow-y:auto; }
.form-slide.active { left:0; }
.form-slide h3 { margin-bottom:20px; }
.form-slide form { display:flex; flex-direction:column; gap:15px; }
.form-slide input, .form-slide textarea { padding:10px; border-radius:10px; border:1px solid #ccc; resize:none; }
.form-slide button { padding:12px; border:none; border-radius:25px; background:#25D366; color:#fff; cursor:pointer; font-weight:bold; transition:0.3s; }
.form-slide button:hover { background:#1ebe57; }
.close-btn { position:absolute; top:15px; right:20px; font-size:24px; cursor:pointer; background:none; border:none; color:#333; }

/* Botón WhatsApp flotante */
.whatsapp-float { position:fixed; bottom:20px; right:20px; z-index:1000; animation: pulse 2s infinite; }
.whatsapp-float img { width:60px; height:60px; }

/* Footer */
footer { background:#333; color:#fff; padding:30px 50px; text-align:center; margin-top:50px;}
.footer-links { list-style:none; display:flex; justify-content:center; gap:20px; margin-top:10px; }
.footer-links li a { color:#25D366; text-decoration:none; font-weight:500; }

/* Animación */
@keyframes pulse { 0%,100% { transform:scale(1);} 50% { transform:scale(1.1);} }