:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #0f1b2d;
  --muted: #5b6b7c;
  --primary: #0a7ea4;
  --primary-dark: #086a8a;
  --accent: #12b76a;
  --wa: #25d366;
  --wa-dark: #1da851;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(15, 27, 45, 0.08);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  padding-bottom: 80px;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.ico { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: -0.125em; }

.ico-wa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15l-1.3 4.6 4.8-1.3A10 10 0 1 0 12 2zm5.2 14.1c-.2.6-1.2 1.2-1.7 1.3-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.6-.6-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 .9-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5s.8 1.9.8 2c0 .2.1.3 0 .5s-.3.4-.4.6c-.2.2-.3.4-.1.7.2.3.8 1.4 1.8 2.2 1.2 1.1 2.3 1.4 2.6 1.6.3.2.5.1.7-.1l.9-1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.6.4 0 .1 0 .7-.2 1.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15l-1.3 4.6 4.8-1.3A10 10 0 1 0 12 2zm5.2 14.1c-.2.6-1.2 1.2-1.7 1.3-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.6-.6-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 .9-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5s.8 1.9.8 2c0 .2.1.3 0 .5s-.3.4-.4.6c-.2.2-.3.4-.1.7.2.3.8 1.4 1.8 2.2 1.2 1.1 2.3 1.4 2.6 1.6.3.2.5.1.7-.1l.9-1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.6.4 0 .1 0 .7-.2 1.4z'/%3E%3C/svg%3E"); }

.ico-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.8 21 3 13.2 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.8 21 3 13.2 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E"); }

.ico-map { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21c-4.4-3.7-7-6.8-7-10a7 7 0 0 1 14 0c0 3.2-2.6 6.3-7 10zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21c-4.4-3.7-7-6.8-7-10a7 7 0 0 1 14 0c0 3.2-2.6 6.3-7 10zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); }

.ico-globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 10a7 7 0 0 1-.7 3.1c-.9-1.5-1.9-3-3.3-4.5 1.9.3 3.6 1 4 1.4zm-9.2-2h4.4c.3 1.2.4 2.4.3 3.6h-5c-.1-1.2 0-2.4.3-3.6zM12 4a7.3 7.3 0 0 1 3.5 4h-7A7.3 7.3 0 0 1 12 4zm-7 8a7 7 0 0 1 .7-3.1c.9 1.5 1.9 3 3.3 4.5-1.9-.3-3.6-1-4-1.4zm7 8a7.3 7.3 0 0 1-3.5-4h7a7.3 7.3 0 0 1-3.5 4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 10a7 7 0 0 1-.7 3.1c-.9-1.5-1.9-3-3.3-4.5 1.9.3 3.6 1 4 1.4zm-9.2-2h4.4c.3 1.2.4 2.4.3 3.6h-5c-.1-1.2 0-2.4.3-3.6zM12 4a7.3 7.3 0 0 1 3.5 4h-7A7.3 7.3 0 0 1 12 4zm-7 8a7 7 0 0 1 .7-3.1c.9 1.5 1.9 3 3.3 4.5-1.9-.3-3.6-1-4-1.4zm7 8a7.3 7.3 0 0 1-3.5-4h7a7.3 7.3 0 0 1-3.5 4z'/%3E%3C/svg%3E"); }

.ico-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E"); }

.ico-share { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 0 0-2.2 1l-6.1-3.5a3.2 3.2 0 0 0 0-2L15.8 8a3 3 0 1 0-.6-1.8c0 .3 0 .6.1.9L9.3 10.5a3 3 0 1 0 0 3L15.3 17a3 3 0 1 0 2.7-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 0 0-2.2 1l-6.1-3.5a3.2 3.2 0 0 0 0-2L15.8 8a3 3 0 1 0-.6-1.8c0 .3 0 .6.1.9L9.3 10.5a3 3 0 1 0 0 3L15.3 17a3 3 0 1 0 2.7-1z'/%3E%3C/svg%3E"); }

.ico-mobile { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm5 17a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4zM9 5v1h6V5H9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm5 17a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4zM9 5v1h6V5H9z'/%3E%3C/svg%3E"); }

.ico-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6 3.7 2.2-1 1.6-4.7-2.8V6h2v6.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6 3.7 2.2-1 1.6-4.7-2.8V6h2v6.6z'/%3E%3C/svg%3E"); }

.ico-xl { font-size: 28px; }
.ico-lg { font-size: 22px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-lg { padding: 14px 22px; font-size: 1rem; }

.btn-whatsapp { background: var(--wa); color: #fff; }
.btn-whatsapp:hover { background: var(--wa-dark); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35); }

.btn-call { background: var(--primary); color: #fff; }
.btn-call:hover { background: var(--primary-dark); box-shadow: 0 8px 20px rgba(10, 126, 164, 0.35); }

.btn-outline { background: #fff; color: var(--text); border-color: #d5dee8; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }

/* Topbar */
.topbar { background: #fff; border-bottom: 1px solid #e6edf4; position: sticky; top: 0; z-index: 50; }
.topbar-inner { max-width: 960px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #0f4c8a); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; letter-spacing: 0.5px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text span { font-size: 0.75rem; color: var(--muted); }
.topbar-actions { display: flex; gap: 8px; }

/* Hero */
.hero { background: linear-gradient(135deg, #0a2f5a 0%, #0a7ea4 60%, #12b76a 130%); color: #fff; text-align: center; padding: 56px 20px 64px; }
.hero-inner { max-width: 760px; margin: 0 auto; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px); padding: 8px 16px; border-radius: 999px; font-size: 0.9rem; margin-bottom: 20px; }
.stars { color: #ffd166; letter-spacing: 2px; }
.hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.7rem); font-weight: 800; line-height: 1.2; margin-bottom: 14px; }
.hero .accent { color: #8ef0bf; }
.hero-sub { font-size: 1.05rem; opacity: 0.92; max-width: 560px; margin: 0 auto 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 22px; }
.hero-info { font-size: 0.9rem; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.12); padding: 7px 14px; border-radius: 999px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--accent); box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.25); }

/* Content */
.content { max-width: 960px; margin: -28px auto 0; padding: 0 20px; position: relative; z-index: 2; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin-bottom: 22px; }

.card h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
.card .muted { color: var(--muted); margin-bottom: 18px; }

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 16px; }
.service { background: var(--bg); border: 1px solid #e6edf4; border-radius: 14px; padding: 18px; }
.service-ico { font-size: 1.8rem; margin-bottom: 8px; }
.service h3 { font-size: 1rem; margin-bottom: 6px; }
.service p { font-size: 0.88rem; color: var(--muted); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.contact-btn { display: flex; align-items: center; gap: 14px; background: var(--bg); border: 1px solid #e6edf4; border-radius: 14px; padding: 16px; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.contact-btn:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 6px 16px rgba(15, 27, 45, 0.08); }
.contact-btn strong { display: block; font-size: 1rem; }
.contact-btn small { color: var(--muted); font-size: 0.82rem; }
.chevron { margin-left: auto; color: var(--muted); font-size: 1.2rem; transition: transform 0.15s ease; }
.contact-btn:hover .chevron { transform: translateX(3px); color: var(--primary); }

.contact-wa .ico, .contact-wa strong { color: var(--wa-dark); }
.contact-call .ico, .contact-call strong { color: var(--primary); }
.contact-map .ico, .contact-map strong { color: #d85a2a; }
.contact-web .ico, .contact-web strong { color: #7a5cf0; }
.contact-pin .ico, .contact-pin strong { color: #d43c3c; }
.contact-share .ico, .contact-share strong { color: #0f1b2d; }
.contact-phone-send .ico, .contact-phone-send strong { color: #0f9b8e; }

/* Map */
.map-wrap { border-radius: 14px; overflow: hidden; border: 1px solid #e6edf4; margin: 16px 0 20px; }
.map-wrap iframe { display: block; width: 100%; height: 320px; border: 0; }

.about-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.about-meta > div { display: flex; gap: 12px; font-size: 0.88rem; }
.about-meta .ico { color: var(--primary); font-size: 20px; margin-top: 2px; }

/* Toast */
.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1f2937; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 0.9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 100; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* WhatsApp float */
.whatsapp-float { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5); z-index: 90; transition: transform 0.15s ease; }
.whatsapp-float:hover { transform: scale(1.08); }

/* Footer */
.footer { max-width: 960px; margin: 0 auto; padding: 24px 20px; text-align: center; color: var(--text); font-size: 0.85rem; }
.footer .muted { color: var(--muted); margin-top: 4px; }

/* Responsive */
@media (max-width: 600px) {
  .topbar-actions .btn-call span:not(.ico) { display: none; }
  .topbar-actions .btn-whatsapp span:not(.ico) { display: none; }
  .topbar-actions .btn { padding: 10px 12px; }
  .hero-cta .btn { width: 100%; }
  .contact-grid { grid-template-columns: 1fr; }
}