:root{
  --red:#E63946;
  --blue:#1D3557;
  --ink:#2C2C2C;
  --muted:#707582;
  --bg:#F7F8FB;
  --card:#FFFFFF;
  --radius:12px;
  --ring: rgba(230,57,70,.18);
  --wsp:#25D366;
  --max-width:1100px;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
.container{width:min(var(--max-width),calc(100% - 2rem));margin:0 auto;padding:0 1rem}

/* ===== HEADER / NAV ===== */
.site-header{background:#fff;position:sticky;top:0;z-index:80;border-bottom:1px solid #eee}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand-logo{width:44px;height:44px;object-fit:contain}
.brand-name{font-weight:700;font-size:1.05rem}

/* Menu superior (desktop) */
.menu-superior{display:block}
.menu{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
.menu li{display:inline}
.menu-link{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--ink);font-weight:600;padding:.35rem .6rem;border-radius:8px;transition:background .18s,color .18s}
.menu-link:hover{background:rgba(29,53,87,0.04)}
.menu-cta{background:var(--red);color:#fff;padding:.45rem .75rem;border-radius:10px;box-shadow:0 6px 16px rgba(230,57,70,0.08)}
/* WhatsApp menu item */
.whatsapp-link{color:var(--wsp);display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;padding:.2rem .45rem;border-radius:8px}
.whatsapp-link:hover{color:#1ebe5d}
.icon-whatsapp{width:18px;height:18px;display:inline-block;vertical-align:middle}
.whsp-text{display:inline-block}

/* Mobile toggle */
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;padding:.25rem}

/* Mobile menu open state (simple) */
.menu-open{position:absolute;top:68px;right:12px;background:#fff;padding:12px;border-radius:10px;box-shadow:0 12px 40px rgba(15,20,25,0.08);display:flex;flex-direction:column;gap:.6rem}

/* ===== HERO ===== */
.hero{padding:3rem 0}
.hero-grid{display:grid;grid-template-columns:1fr .95fr;gap:2rem;align-items:center}
.hero-copy h1{font-size:2rem;margin:0 0 .6rem;color:var(--blue);line-height:1.05}
.lead{color:var(--muted);font-size:1.05rem;margin-bottom:1rem}
.hero-actions{display:flex;gap:.8rem;margin-bottom:1rem}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:700;border:2px solid transparent}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-ghost, .btn-ghost:link{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.hero-features{list-style:none;padding:0;margin:0;display:flex;gap:1rem;color:var(--muted);flex-wrap:wrap}
.hero-art img{width:100%;max-width:480px;display:block;margin-left:auto}

/* ===== SECTIONS ===== */
.section{padding:2.6rem 0}
.section--alt{background:#fff;border-top:1px solid #f3f4f6}
.section-head{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.section-head h2{margin:0;color:var(--blue)}
.section-head p{margin:0;color:var(--muted)}

/* ===== CARDS ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{background:var(--card);border-radius:var(--radius);padding:1.1rem;border:1px solid #f0f0f0;box-shadow:0 6px 18px rgba(15,20,25,0.03);transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(15,20,25,0.06)}
.card-ico{width:54px;height:54px;margin-bottom:.6rem;object-fit:contain}
.card h3{margin:.25rem 0 .6rem}
.small-list{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.95rem}
.link-more{display:inline-block;margin-top:.6rem;color:var(--blue);text-decoration:none;font-weight:700}

/* ===== TWO-COL / PANES ===== */
.two-col{display:grid;grid-template-columns:1fr 360px;gap:1.2rem;align-items:start}
.pane{background:var(--card);padding:1rem;border-radius:12px;border:1px solid #f1f1f1}
.checklist{list-style:disc;padding-left:1.1rem;color:var(--muted)}
.pricing{display:flex;flex-direction:column;gap:.6rem}
.pricing-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem;border-radius:10px;background:#fafafa;border:1px solid #eee}
.pricing-item.highlight{background:linear-gradient(90deg,rgba(230,57,70,0.05),#fff);border-color:rgba(230,57,70,0.12)}

/* ===== ABOUT / LISTS ===== */
.bullets{list-style:disc;padding-left:1.1rem;color:var(--muted)}
.list{list-style:circle;padding-left:1.1rem;color:var(--muted)}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:1.2rem;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:.6rem}
.contact-form label{display:block;font-weight:600;color:var(--muted);font-size:.95rem}
.contact-form input, .contact-form textarea{width:100%;padding:.65rem;border:1px solid #e6e9ef;border-radius:10px;outline:none}
.form-actions{display:flex;gap:.6rem;margin-top:.6rem}
.contact-whatsapp-inline{margin-top:1rem}
.btn-whatsapp{display:inline-flex;align-items:center;gap:.6rem;background:var(--wsp);color:white;padding:.6rem .9rem;border-radius:10px;text-decoration:none;border:2px solid var(--wsp)}
.icon-wsp{width:20px;height:20px;display:inline-block}

/* ===== FOOTER ===== */
.site-footer{background:#0f1720;color:#cbd5e1;padding:1.4rem 0;margin-top:2rem}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.foot-brand{display:flex;align-items:center;gap:.6rem}
.foot-copy{margin:.4rem 0 0;color:#98a0ad}
.foot-nav a{color:#98a0ad;text-decoration:none;margin-left:1rem}
.foot-nav a:hover{color:#fff}

/* ===== FLOATING WHATSAPP ===== */
.wsp-float{position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--wsp);box-shadow:0 10px 30px rgba(0,0,0,.18);text-decoration:none}
.wsp-float img{width:28px;height:28px;filter:none)}

/* ===== CAROUSEL (para dinstar.html) - robusto ===== */
.carousel { position: relative; overflow: hidden; max-width: 900px; margin: 1.5rem auto; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.1); background: #fff; }
.carousel-track { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-slide { min-width: 100%; flex: 0 0 100%; }
.carousel img { width: 100%; height: auto; display: block; object-fit: cover; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); border: 0; color: white; font-size: 2rem; padding: .25rem .7rem; cursor: pointer; border-radius: 999px; transition: background .2s; z-index: 2; }
.carousel-btn:hover { background: rgba(0,0,0,0.75); }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.carousel-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.carousel-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.6); cursor: pointer; }
.carousel-dots button.active { background: white; }

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu{display:none}
  .nav-toggle{display:block}
  .menu-open{right:12px;top:64px}
  .cards{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:1.2rem}
  .brand-name{display:none}
  .hero-art img{max-width:320px}
}