:root{
  --navy:#06283d;
  --blue:#006d9c;
  --aqua:#20c9d2;
  --water:#e8fbff;
  --white:#ffffff;
  --dark:#0a1d29;
  --text:#17384a;
  --muted:#66818d;
  --line:#d7edf3;
  --shadow:0 22px 60px rgba(6,40,61,.16);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f8fdff;color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1160px,92%);margin:auto}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(6,40,61,.07)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--navy);font-size:20px;letter-spacing:-.02em}
.brand-line{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--aqua));box-shadow:0 15px 30px rgba(0,109,156,.25);position:relative;overflow:hidden}
.brand-line:before,.brand-line:after{content:"";position:absolute;left:7px;right:7px;height:8px;border-radius:20px;background:rgba(255,255,255,.75)}
.brand-line:before{top:16px}.brand-line:after{top:27px;left:15px;right:0}
.menu{display:flex;align-items:center;gap:8px}
.menu a{font-weight:800;color:#335463;padding:12px 15px;border-radius:999px;transition:.2s ease}
.menu a:hover{background:var(--water);color:var(--blue)}
.menu-btn{display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer}
.menu-btn span{display:block;height:3px;background:var(--navy);border-radius:8px;margin:6px 0}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 16% 18%,rgba(70,223,230,.62),transparent 28%),linear-gradient(135deg,#031826 0%,#006d9c 55%,#20c9d2 100%);color:white;padding:92px 0 86px}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:80px;background:linear-gradient(to bottom,transparent,#f8fdff)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:44px}
.eyebrow,.tag{display:inline-flex;align-items:center;margin:0 0 16px;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.eyebrow{background:rgba(255,255,255,.16);color:white;border:1px solid rgba(255,255,255,.18)}
.tag{background:#e4f8fc;color:var(--blue)}
.tag-light{background:rgba(255,255,255,.15);color:white;border:1px solid rgba(255,255,255,.18)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(43px,7vw,78px);line-height:.96;letter-spacing:-.055em;margin-bottom:24px;max-width:720px}
h2{font-size:clamp(30px,4vw,52px);line-height:1.03;letter-spacing:-.045em;margin-bottom:16px;color:var(--navy)}
h3{font-size:24px;line-height:1.18;color:var(--navy);margin-bottom:0}
.lead{font-size:22px;line-height:1.65;color:#eafcff;max-width:640px;margin-bottom:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 24px;border-radius:999px;font-weight:900;border:1px solid transparent;transition:.22s ease;box-shadow:0 16px 34px rgba(0,0,0,.13)}
.btn:hover{transform:translateY(-3px)}
.btn-whatsapp{background:linear-gradient(135deg,#20c26f,#09985d);color:white}
.btn-facebook{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.36);color:white}
.hero-photo{background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.6);border-radius:34px;padding:14px;box-shadow:var(--shadow)}
.hero-photo img{width:100%;height:390px;object-fit:contain;background:#eefaff;border-radius:24px}
.section{padding:82px 0}.section-heading{text-align:center;max-width:780px;margin:0 auto 42px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{position:relative;overflow:hidden;min-height:205px;padding:32px;border-radius:var(--radius);background:linear-gradient(180deg,#fff,#effbff);border:1px solid var(--line);box-shadow:0 18px 42px rgba(6,40,61,.09)}
.service-card:after{content:"";position:absolute;right:-44px;top:-44px;width:132px;height:132px;border-radius:50%;background:linear-gradient(135deg,var(--aqua),transparent);opacity:.34}
.service-card span{width:52px;height:52px;border-radius:17px;background:var(--navy);color:white;font-weight:900;display:grid;place-items:center;margin-bottom:26px}
.area-section{padding-top:0}
.area-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:40px;border-radius:var(--radius);background:linear-gradient(135deg,var(--navy),var(--blue));color:white;box-shadow:var(--shadow);overflow:hidden;position:relative}
.area-card:after{content:"";position:absolute;right:-90px;bottom:-130px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.12)}
.area-card>*{position:relative;z-index:1}.area-card h2{color:white;margin-bottom:0}
.gallery-section{background:white}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-item{appearance:none;border:1px solid var(--line);padding:0;margin:0;min-height:295px;border-radius:24px;overflow:hidden;background:#fff;cursor:pointer;box-shadow:0 16px 36px rgba(6,40,61,.10);position:relative}
.gallery-item img{width:100%;height:100%;min-height:295px;object-fit:contain;background:#fff;transition:none}
.gallery-item:after{content:"Ver imagen";position:absolute;left:14px;right:14px;bottom:14px;text-align:center;background:rgba(6,40,61,.82);color:white;border-radius:999px;padding:11px 14px;font-weight:900;opacity:0;transform:translateY(7px);transition:.2s ease}
.gallery-item:hover:after{opacity:1;transform:translateY(0)}
.gallery-wide{grid-column:span 2;min-height:360px}.gallery-wide img{min-height:360px}
.contact-section{padding:92px 0;background:radial-gradient(circle at 86% 0%,rgba(32,201,210,.6),transparent 28%),linear-gradient(135deg,#031826,#06283d);color:white}
.contact-grid{display:grid;grid-template-columns:1fr .88fr;gap:34px;align-items:center}.contact-section h2{color:white}.contact-copy p:not(.tag){font-size:19px;line-height:1.72;color:#e5fbff}
.contact-list{display:grid;gap:14px;background:#ffffff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.contact-card{display:block;background:#eefaff;border:1px solid var(--line);color:var(--navy);border-radius:20px;padding:20px;transition:.22s ease}.contact-card:hover{transform:translateY(-3px);background:#e3f8ff}
.contact-card span{display:block;font-weight:900;color:var(--muted);margin-bottom:7px}.contact-card strong{display:block;font-size:24px;line-height:1.15;word-break:break-word}
.floating-wa{position:fixed;right:18px;bottom:18px;z-index:55;background:#13b66b;color:white;font-weight:900;padding:15px 18px;border-radius:999px;box-shadow:0 16px 40px rgba(19,182,107,.35)}
.footer{background:#02131f;color:#e2fbff;padding:24px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}.footer p{margin:0;font-weight:800}
.lightbox{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(2,19,31,.92);padding:22px}.lightbox.show{display:flex}.lightbox img{max-width:min(1100px,94vw);max-height:86vh;border-radius:20px;background:white;box-shadow:0 30px 90px rgba(0,0,0,.52)}.lightbox-close{position:absolute;top:18px;right:18px;width:50px;height:50px;border:0;border-radius:50%;background:white;color:var(--navy);font-size:34px;line-height:1;cursor:pointer}
@media (max-width:900px){.menu-btn{display:block}.menu{position:absolute;left:4%;right:4%;top:76px;display:none;flex-direction:column;align-items:stretch;background:white;padding:14px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.menu.open{display:flex}.hero{padding:60px 0 74px}.hero-grid,.contact-grid{grid-template-columns:1fr}.hero-photo img{height:320px}.service-grid,.gallery{grid-template-columns:1fr}.gallery-wide{grid-column:auto}.gallery-item,.gallery-item img,.gallery-wide,.gallery-wide img{min-height:270px}.area-card{flex-direction:column;align-items:flex-start}.footer-inner{flex-direction:column;text-align:center}}
@media (max-width:480px){.nav{height:70px}.brand{font-size:17px}.brand-line{width:42px;height:42px;border-radius:14px}.menu{top:70px}.hero-actions{display:grid}.btn{width:100%}h1{font-size:42px}.section{padding:62px 0}.hero-photo,.contact-list,.area-card{border-radius:22px;padding:18px}.hero-photo img{height:245px;border-radius:17px}.service-card{min-height:170px;padding:24px}.gallery-item,.gallery-item img{min-height:235px}.contact-card strong{font-size:21px}.floating-wa{left:18px;text-align:center}}
