
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --bg:#0c1f23; --panel:#0f2a30; --panel2:#0d2429; --border:#14363d;
  --ink:#e6f6f7; --ink-dim:#bfe6e8;
  --brand:#16b4b8; --brand2:#0a6670; --accent:#eab308;
}
body{background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.75}
.container{width:min(1180px,92%);margin:0 auto}
.header{position:sticky;top:0;z-index:80;background:rgba(12,31,35,.9);backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand img{height:70px}
.nav a{color:var(--ink);text-decoration:none;margin-left:16px;font-weight:800;opacity:.92}
.nav a:hover{color:var(--brand)}
.lang a{margin-left:8px;opacity:.8} .lang a.active{opacity:1}
.header::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--brand2),var(--brand),var(--accent))}
.hero{position:relative;min-height:78vh;display:flex;align-items:end;overflow:hidden}
.hero .layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.hero .layer.active{opacity:1}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.7))}
.hero .inner{position:relative;padding:72px 0;color:#fff}
h1{font-size:44px;line-height:1.2;margin-bottom:12px;letter-spacing:.2px}
.lead{font-size:18px;color:var(--ink-dim)}
.badges{display:flex;gap:10px;margin:12px 0 16px;flex-wrap:wrap}
.badge{display:inline-block;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;font-weight:900}
.buttons{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.button{display:inline-block;text-decoration:none;font-weight:900;border-radius:12px;padding:12px 18px;transform:translateZ(0)}
.button.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#052a2e;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.button.primary.glow{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:85;border-radius:999px;animation:glow 2.5s infinite}
.button.secondary{border:2px solid rgba(255,255,255,.85);color:#fff;background:transparent}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(234,179,8,.0),0 0 0 rgba(234,179,8,.0)}50%{box-shadow:0 0 24px rgba(234,179,8,.35),0 0 48px rgba(234,179,8,.15)}}
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg,rgba(20,40,44,.5),rgba(12,31,35,1))}
.section h2{font-size:30px;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 12px 24px rgba(0,0,0,.22);transform:translateY(10px);opacity:0;transition:transform .5s ease, opacity .5s ease, box-shadow .15s}
.card.reveal{transform:translateY(0);opacity:1}
.card:hover{box-shadow:0 16px 32px rgba(0,0,0,.3)}
.card img{width:100%;height:190px;object-fit:cover;border-radius:10px;margin-bottom:10px}
.icon-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.icon-card{background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateY(10px);transition:all .5s}
.icon-card.reveal{opacity:1;transform:translateY(0)}
.icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:flex;align-items:center;justify-content:center;font-weight:900;color:#052a2e}
.highlight{background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center}
.highlight strong{font-size:30px;display:block}
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.t{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;display:grid;grid-template-columns:60px 1fr;gap:12px;opacity:0;transform:translateY(10px);transition:all .5s}
.t.reveal{opacity:1;transform:translateY(0)}
.t img{width:60px;height:60px;border-radius:50%}
.stars{color:#ffce3a;letter-spacing:2px;font-size:18px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
input,textarea,select{background:var(--panel); color:var(--ink); border:1px solid var(--border); padding:12px; border-radius:10px}
footer{background:#071619;color:#a9d8da;border-top:1px solid var(--border);margin-top:40px;padding:28px 0}
footer a{color:#d1f2f3;text-decoration:none} footer a:hover{color:#53c3bf}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.footer-cta a{display:inline-block;margin-right:10px;padding:10px 12px;border-radius:999px;background:linear-gradient(90deg,var(--accent),#f7e694);color:#111;font-weight:900;text-decoration:none}
.whatsapp-float{position:fixed;right:16px;bottom:76px;background:#25D366;color:#0a2f1b;border-radius:999px;padding:12px 18px;font-weight:900;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:90}
.whatsapp-float.secondary{bottom:16px;background:#128C7E;color:#e6f6f7}
.lang{margin-left:10px}
.separator{height:1px;background:var(--border);margin:26px 0 10px}
@media(max-width:900px){
  .button.primary.glow{left:12px;right:12px;transform:none;width:calc(100% - 24px);text-align:center}
  h1{font-size:34px}
}

/* ===== Responsive Enhancements ===== */
.mobile-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);color:var(--ink);font-weight:900}
.navlinks{display:flex;align-items:center;gap:16px}
@media(max-width:900px){
  .nav{gap:10px}
  .navlinks{display:none;position:absolute;top:64px;right:4%;left:4%;background:rgba(12,31,35,.98);border:1px solid var(--border);border-radius:12px;padding:12px;flex-direction:column}
  .navlinks.show{display:flex}
  .mobile-toggle{display:flex}
  .brand img{height:58px}
  h1{font-size:30px}
  .hero{min-height:64vh}
  .button{padding:14px 18px}
  .card img{height:170px}
  input,textarea,select{font-size:16px}
}
@media(max-width:600px){
  .hero{min-height:58vh}
  h1{font-size:26px}
  .lead{font-size:16px}
  .card img{height:150px}
  .icon{width:36px;height:36px}
}
