/* ===== Base / Reset ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --rojo:#d32f2f; --azul:#1976d2; --verde:#0a9d56; --claro:#f7f9fc; --oscuro:#111;
}
body{
  font-family: Arial, Helvetica, sans-serif;
  color:#222; line-height:1.6; background:#fff;
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #eee; padding:.5rem .75rem;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-mini{width:36px;height:auto;border-radius:8px;margin-right:.5rem}
.brand{font-weight:700;color:var(--rojo)}
.topbar__left{display:flex;align-items:center}
.topbar__right{display:flex;gap:.5rem;align-items:center}

/* ===== Buttons ===== */
.btn{
  background:var(--rojo); color:#fff; text-decoration:none; font-weight:700;
  padding:.55rem .9rem; border-radius:10px; display:inline-block; border:none; cursor:pointer;
}
.btn:hover{filter:brightness(.96)}
.btn.primary{background:var(--azul)}
.btn.wa{background:#25d366}
.btn.pay{background:#ff9800}
.btn.outline{background:#fff;color:var(--azul);border:2px solid var(--azul)}
.btn.small{padding:.4rem .6rem; font-size:.9rem}
.btn.small.outline{border-color:#ccc;color:#333}

/* ===== Hero ===== */
.hero{
  min-height:70vh; display:grid; place-items:center; text-align:center;
  background-position:center; background-size:cover; position:relative;
}
.hero__overlay{
  width:100%; height:100%; display:grid; place-items:center; padding:28px 14px;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}
.logo{width:120px;height:auto;margin-bottom:10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.slogan{color:#fff; font-size:2rem}
.sub{color:#e6f7ff;margin:.35rem 0 1rem}
.cta-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* ===== Secciones ===== */
.section{max-width:1100px;margin:28px auto;padding:0 14px}
.section h2{text-align:center;margin-bottom:10px;color:var(--azul)}
.lead{max-width:900px;margin:0 auto;text-align:center;color:#444}

/* Paneles */
.section--panel{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.panel{background:var(--claro);border-radius:14px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.panel h3{color:var(--azul);margin-bottom:6px}

/* ===== Carruseles ===== */
.carousel-block{margin-top:18px}
.slider{position:relative;overflow:hidden;border-radius:12px;background:#fafafa;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.slider__track{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;padding:8px}
.slider__track img{width:100%;max-width:360px;height:auto;border-radius:12px;flex:0 0 auto;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);background:#000;color:#fff;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;opacity:.85}
.slider__btn:hover{opacity:1}
.prev{left:10px}.next{right:10px}
.desc{margin-top:6px;color:#555;text-align:center}

/* ===== Formulario ===== */
form{max-width:560px;margin:0 auto;display:grid;gap:10px;background:#fff;border:1px solid #eee;padding:14px;border-radius:12px}
input,textarea{padding:10px;border-radius:10px;border:1px solid #ddd}
textarea{min-height:110px}
.form-actions{display:flex;gap:.6rem;justify-content:center}

/* ===== Footer ===== */
.footer{margin-top:28px;text-align:center;padding:18px 12px;background:#f4f7fb;border-top:1px solid #eaeaea}
.footer p{color:#444}
.socials{display:flex;gap:12px;justify-content:center;margin-bottom:6px}
.icon{width:32px;height:32px;display:inline-block;background-size:cover;border-radius:6px;filter:grayscale(.1)}
.icon.insta{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23E1306C" viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.9a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z"/></svg>')}
.icon.fb{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%231877F2" viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7h-2.4V12h2.4V9.7c0-2.4 1.4-3.7 3.6-3.7 1 0 2 .2 2 .2v2.2h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z"/></svg>')}
.icon.wa{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2325D366" viewBox="0 0 24 24"><path d="M20 4.9A10 10 0 0 0 3.7 18.1L3 21l3-1a10 10 0 0 0 14-15zM7.5 17.1l-.2.1-1.8.6.6-1.7-.1-.2A7.8 7.8 0 1 1 19.8 9a7.8 7.8 0 0 1-12.3 8.1zm9-4.4c-.2-.1-1.2-.6-1.3-.6s-.3-.1-.5.1-.6.6-.7.7-.3.1-.5 0a6.4 6.4 0 0 1-1.9-1.2 7.2 7.2 0 0 1-1.3-1.6c-.1-.2 0-.3.1-.4l.4-.5.2-.4c.1-.2 0-.3 0-.4l-.6-1.5c-.2-.5-.4-.5-.6-.5h-.5l-.4.1c-.2 0-.4.3-.6.5s-.6.6-.6 1.4 0 .8.2 1.2 1 1.9 2.3 3.1a10.7 10.7 0 0 0 3.2 2.1 3.7 3.7 0 0 0 1.7.4c.6 0 1.2-.3 1.4-.7s.6-.8.6-1.1 0-.8-.1-.9l-.4-.2z"/></svg>')}
.icon.mail{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%230A6EBD" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z"/></svg>')}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .slogan{font-size:1.6rem}
  .slider__track img{max-width:78vw}
  .topbar{gap:.4rem}
  .brand{display:none}
}