:root{
  --navy:#0b2f5e; --navy-2:#0a2749; --blue:#1a73c4; --sky:#57b6e6;
  --ink:#1a2733; --muted:#5c6b7a; --line:#e2e8f0; --bg:#ffffff;
  --soft:#f4f8fc; --soft-2:#eaf3fb; --white:#fff;
  --radius:16px; --shadow:0 10px 30px rgba(11,47,94,.10); --shadow-sm:0 4px 14px rgba(11,47,94,.08);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* the header is sticky, so a section jumped to by anchor has to clear it */
section[id],[id].hero-form{scroll-margin-top:92px}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.15;color:var(--navy)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;cursor:pointer;border:none;transition:.2s;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(26,115,196,.35)}
.btn-primary:hover{background:#155ea3;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.eyebrow{font-family:'Poppins';font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--blue);margin-bottom:14px}
.section{padding:88px 0}
.section-soft{background:var(--soft)}
.center{text-align:center}
.lead{color:var(--muted);font-size:18px;max-width:680px;margin:0 auto}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy-2);color:#dbe7f4;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 24px;flex-wrap:wrap}
.topbar a{color:#dbe7f4}
.topbar .tb-left span{margin-right:22px}
.topbar .tb-left i{color:var(--sky)}
.topbar .tb-social a{margin-left:14px;opacity:.85}
.topbar .tb-social a:hover{opacity:1}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 14px rgba(11,47,94,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
/* Wordmark: the site's own Poppins carrying the logo's blue gradient, in place of
   the script-font PNG the old site used. The PNG is still in assets/ if it's needed. */
.wordmark{font-family:'Poppins',sans-serif;font-weight:600;font-size:21px;letter-spacing:-.015em;
  white-space:nowrap;background:linear-gradient(95deg,var(--navy) 0%,var(--blue) 48%,var(--sky) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wordmark b{font-weight:800}
.brand{flex:none;margin-right:20px}
/* background-clip:text hides the glyphs where it is unsupported, so paint them back */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark{-webkit-text-fill-color:currentColor;color:var(--navy)}
}
.menu{display:flex;gap:22px;align-items:center}
.menu a{font-family:'Poppins';font-weight:600;font-size:15px;color:var(--navy);transition:.2s}
.menu a:hover{color:var(--blue)}
/* ---------- Services dropdown ---------- */
.has-sub{position:relative;display:flex;align-items:center;gap:5px}
.sub-toggle{background:none;border:0;padding:3px;margin:0;cursor:pointer;color:var(--navy);display:flex;align-items:center;line-height:0}
.sub-toggle .caret{width:11px;height:8px;transition:transform .22s}
.submenu{position:absolute;top:calc(100% + 16px);left:-14px;min-width:236px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:none;z-index:60}
/* the gap between the link and the panel would drop the hover, so bridge it */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.submenu a{display:block;padding:9px 12px;border-radius:9px;font-family:'Poppins';font-weight:600;
  font-size:14.5px;color:var(--navy);white-space:nowrap}
.submenu a:hover{background:var(--soft-2);color:var(--blue)}
.has-sub.open>.submenu{display:block}
.has-sub.open .caret{transform:rotate(180deg)}
/* hover only where there is a real pointer; on touch the button does it */
@media(hover:hover) and (pointer:fine){
  .has-sub:hover>.submenu,.has-sub:focus-within>.submenu{display:block}
  .has-sub:hover .caret{transform:rotate(180deg)}
}
.nav-cta{display:flex;align-items:center;gap:18px;margin-left:32px;flex:none}
.nav-phone{font-family:'Poppins';font-weight:700;color:var(--navy);font-size:16px;white-space:nowrap;text-align:right;line-height:1.2}
.nav-phone span{display:block;font-family:'Inter';font-weight:500;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.menu{flex:1;justify-content:center}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:26px;height:3px;background:var(--navy);border-radius:2px}
/* icons */
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.ico-fill{fill:currentColor;stroke:none}
.btn .ico{width:18px;height:18px}
.topbar .tb-left span{margin-right:22px;display:inline-flex;align-items:center;gap:7px}
.topbar .ico{color:var(--sky)}
.trust div .ico{color:var(--sky);width:20px;height:20px}
.foot-col a{display:flex;align-items:center;gap:8px}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('hero-poster.jpg') center/cover}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-bg::after,.hero-overlay{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(9,39,73,.94) 0%,rgba(9,39,73,.72) 45%,rgba(10,45,88,.16) 100%);z-index:1}
.hero .wrap{position:relative;z-index:2;padding:104px 24px 110px}
.hero-inner{max-width:640px}
.hero h1{color:#fff;font-size:52px;font-weight:800;letter-spacing:-.5px}
.hero h1 em{color:var(--sky);font-style:normal}
.hero p{font-size:19px;color:#e6eef8;margin:22px 0 32px;max-width:620px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-since{margin-top:42px;font-family:'Poppins';font-weight:600;font-size:15px;letter-spacing:.04em;color:#cddcee}
/* Hero with the quote form beside the copy */
.hero-grid{display:grid;grid-template-columns:1fr 410px;gap:52px;align-items:center}
.hero .hero-grid{padding:66px 24px 72px}
/* Frosted panel: the pool video keeps showing through it, so every colour here is
   set for light text over moving footage, not for the white page below. */
.hero-form{background:rgba(7,26,51,.34);backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(255,255,255,.20);border-radius:var(--radius);
  padding:30px 28px 26px;box-shadow:0 26px 64px rgba(3,14,30,.45)}
/* where the blur is unsupported the panel alone has to carry the contrast */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hero-form{background:rgba(7,26,51,.78)}
}
.hero-form h2{font-size:23px;margin-bottom:4px;color:#fff}
.hero-form>p{font-size:14px;color:#cddcee;margin-bottom:20px}
.hero-form .field{margin-bottom:13px}
.hero-form .field label{font-size:13px;margin-bottom:4px;color:#e4eefa}
.hero-form .field input,.hero-form .field select,.hero-form .field textarea{
  padding:11px 13px;font-size:14.5px;color:#fff;
  background:rgba(4,18,38,.30);border-color:rgba(255,255,255,.36)}
.hero-form .field input::placeholder,.hero-form .field textarea::placeholder{color:rgba(238,246,254,.90)}
.hero-form .field input:focus,.hero-form .field select:focus,.hero-form .field textarea:focus{
  border-color:var(--sky);background:rgba(4,18,38,.80);box-shadow:0 0 0 3px rgba(87,182,230,.28)}
/* the dropdown list is drawn by the operating system, so keep it readable */
.hero-form .field select option{color:var(--navy);background:#fff}
.hero-form .form-note{color:#dce8f6}
.hero-form .form-note.ok{color:#8fe3b8}
.hero-form .form-note.warn{color:#ffc79a}
.hero-form .form-note a{color:var(--sky)}
/* the global form rule paints its own white card; inside the hero the panel
   IS the card, so it has to be cancelled or it draws a second one */
.hero-form form{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.hero-form .hero-since{margin:0}
/* rises into place on load */
@keyframes heroCardUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-form{animation:heroCardUp .75s cubic-bezier(.22,.85,.3,1) .12s both}
@media(prefers-reduced-motion:reduce){.hero-form{animation:none}}
.form-note{margin-top:12px;font-size:13.5px;line-height:1.5;min-height:0}
.form-note.ok{color:#1c7a4a}
.form-note.warn{color:#b3491f}
.form-note a{color:var(--blue);font-weight:600;text-decoration:underline}
@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:30px;max-width:620px}
  .hero .hero-grid{padding:52px 24px 58px}
}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy);color:#cddcee}
.trust .wrap{display:flex;justify-content:space-around;gap:24px;padding:22px 24px;flex-wrap:wrap;text-align:center}
.trust div{font-family:'Poppins';font-weight:600;font-size:15px;display:flex;align-items:center;gap:10px}
.trust i{color:var(--sky);font-size:20px}

/* ---------- Sets us apart ---------- */
.apart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.apart-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;text-align:center;box-shadow:var(--shadow-sm);transition:.25s}
.apart-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.apart-card .ic{width:64px;height:64px;margin:0 auto 18px;border-radius:16px;background:var(--soft-2);display:flex;align-items:center;justify-content:center;font-size:30px}
.apart-card h3{font-size:20px;margin-bottom:10px}
.apart-card p{color:var(--muted);font-size:15px}

/* ---------- About split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:100%;object-fit:cover;min-height:340px}
.split h2{font-size:38px;margin-bottom:8px}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.mv div{background:var(--soft);border-radius:12px;padding:20px}
.mv h4{font-size:16px;color:var(--blue);margin-bottom:6px}
.mv p{font-size:14.5px;color:var(--muted)}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.svc-top{padding:30px 26px 24px;border-top:4px solid var(--blue)}
.svc .num{font-family:'Poppins';font-weight:800;font-size:15px;color:var(--sky);letter-spacing:.05em}
.svc h3{font-size:21px;margin:8px 0 12px}
.svc p{color:var(--muted);font-size:15px}
.svc ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.svc li{font-size:14px;color:var(--ink);padding-left:22px;position:relative}
.svc li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
/* service cards that lead to their own page */
a.svc{text-decoration:none;color:inherit}
a.svc h3{transition:.2s}
a.svc:hover h3{color:var(--blue)}
.svc-more{margin-top:16px;font-family:'Poppins';font-weight:600;font-size:14px;color:var(--blue)}
.svc-more::after{content:" \2192";transition:.2s;display:inline-block}
a.svc:hover .svc-more::after{transform:translateX(4px)}
.foot-col.foot-services a{font-size:14.5px}

/* ---------- Client copy: term + definition list ---------- */
.blist{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;margin-top:46px;text-align:left}
.blist li{list-style:none;padding-left:32px;position:relative;color:var(--muted);font-size:15.5px}
.blist li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--blue);font-weight:700;font-size:17px}
.blist b{display:block;color:var(--ink);font-family:'Poppins';font-weight:700;font-size:16px;margin-bottom:3px}
@media(max-width:820px){.blist{grid-template-columns:1fr;gap:18px}}

/* ---------- Banner CTA ---------- */
.cta-band{background:linear-gradient(100deg,var(--navy) 0%,var(--blue) 100%);color:#fff;border-radius:24px;padding:56px 48px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-band h2{color:#fff;font-size:32px;max-width:640px}
.cta-band p{color:#dbe7f4;margin-top:8px}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.gallery img{border-radius:12px;height:220px;width:100%;object-fit:cover;transition:.3s}
.gallery img:hover{transform:scale(1.03)}
.gallery .tall{grid-row:span 2;height:100%}

/* ---------- Before / After ---------- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:52px}
.ba-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;position:relative}
.ba-pair figure{margin:0;position:relative}
.ba-pair img{width:100%;height:240px;object-fit:cover;display:block}
.ba-pair figcaption{position:absolute;top:12px;left:12px;font-family:'Poppins';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(8,30,58,.82);padding:6px 12px;border-radius:999px}
.ba-pair figure:last-child figcaption{background:var(--blue)}
.ba-cap{padding:20px 24px}
.ba-cap h3{font-size:19px;margin-bottom:4px}
.ba-cap p{color:var(--muted);font-size:14.5px}

/* ---------- Areas ---------- */
.areas{background:url('hero-screen-pool.jpg') center/cover;position:relative;color:#fff}
.areas::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,30,58,.9),rgba(8,30,58,.94));z-index:1}
.areas .wrap{position:relative;z-index:2}
.area-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;max-width:900px;margin-left:auto;margin-right:auto}
.area-list span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:14px 12px;text-align:center;font-family:'Poppins';font-weight:600;font-size:15px;color:#fff;backdrop-filter:blur(4px);transition:.2s}
.area-list span:hover{background:var(--blue);border-color:var(--blue)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;margin-top:52px}
.info-card{background:var(--navy);color:#dbe7f4;border-radius:var(--radius);padding:40px 34px}
.info-card h3{color:#fff;font-size:24px;margin-bottom:22px}
.info-row{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start}
.info-row .ic{width:44px;height:44px;flex:none;border-radius:12px;background:rgba(87,182,230,.18);display:flex;align-items:center;justify-content:center;font-size:20px}
.info-row b{color:#fff;font-family:'Poppins';display:block;font-size:15px}
.info-row span{font-size:14.5px}
.info-social{display:flex;gap:12px;margin-top:8px}
.info-social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:18px;transition:.2s}
.info-social a:hover{background:var(--sky);color:var(--navy)}
form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 34px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px}
.field label{display:block;font-family:'Poppins';font-weight:600;font-size:14px;margin-bottom:6px;color:var(--navy)}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font-family:'Inter';font-size:15px;transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,196,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- Footer ---------- */
footer{background:var(--navy-2);color:#9fb4cc;padding:56px 0 24px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.3fr;gap:38px}
.foot-brand .wordmark{display:inline-block;font-size:22px;margin-bottom:16px;
  background:linear-gradient(95deg,#fff 0%,#cfe6f7 50%,var(--sky) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .foot-brand .wordmark{-webkit-text-fill-color:currentColor;color:#fff}
}
.foot-col h4{color:#fff;font-size:16px;margin-bottom:16px}
.foot-col a{display:block;color:#9fb4cc;margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:var(--sky)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;text-align:center;font-size:13px;color:#7f96b0}

/* ---------- Responsive ---------- */
/* Between the burger breakpoint and a comfortable desktop the Spanish labels
   ("Cotización gratis", "Llámanos hoy") are longer than the English ones and the
   header row overflowed. Tighten the row instead of collapsing the menu early.
   The services caret costs another ~21px, so the collapse sits at 970. */
@media(min-width:971px) and (max-width:1130px){
  .wordmark{font-size:18px}
  .menu{gap:14px}
  .menu a{font-size:13.5px}
  .nav-phone{font-size:14.5px}
  .nav-cta{gap:12px}
  .nav-cta .btn-primary{padding:12px 18px;font-size:14px}
}
/* The header collapses to the burger at 970, not 900: between those the Spanish
   labels no longer fit however tightly the row is packed. */
@media(max-width:970px){
  .menu,.nav-phone,.nav-cta .btn-primary{display:none}
  .wordmark{font-size:17px}
  .nav{padding:12px 16px}
  .burger{display:flex}
  .menu.open{display:flex;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:22px 24px;gap:18px;box-shadow:var(--shadow)}
  .menu.open .has-sub{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .menu.open .has-sub>a{padding-right:34px}
  .menu.open .sub-toggle{position:absolute;top:0;right:0;padding:6px 8px}
  .menu.open .submenu{position:static;min-width:0;border:0;box-shadow:none;background:transparent;
    padding:8px 0 0 14px;border-left:2px solid var(--line);margin:8px 0 0}
  .menu.open .submenu::before{display:none}
  .menu.open .submenu a{padding:7px 0;font-size:14px}
  .menu.open #menu-cta{display:inline-flex!important;justify-content:center;width:100%}
}
@media(max-width:900px){
  .apart-grid,.svc-grid{grid-template-columns:1fr 1fr}
  .split,.contact-grid,.foot-grid{grid-template-columns:1fr;gap:34px}
  .gallery{grid-template-columns:1fr 1fr}
  .ba-grid{grid-template-columns:1fr}
  .gallery .tall{grid-row:auto}
  .area-list{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:40px}
}
@media(max-width:560px){
  .section{padding:60px 0}
  .apart-grid,.svc-grid,.gallery,.field-row{grid-template-columns:1fr}
  .area-list{grid-template-columns:1fr 1fr}
  .hero h1{font-size:33px}
  .cta-band{padding:40px 28px}
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.page-hero-bg{position:absolute;inset:0;background-position:center;background-size:cover}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,30,58,.86),rgba(8,30,58,.9))}
.page-hero .wrap{position:relative;z-index:2;padding:70px 24px;text-align:center}
.page-hero h1{color:#fff;font-size:44px;font-weight:800}
.page-hero p{color:#cddcee;font-size:18px;margin-top:12px;max-width:640px;margin-left:auto;margin-right:auto}
.crumbs{font-size:13.5px;color:#9fc0e2;margin-top:16px;font-family:'Poppins';font-weight:600}
.crumbs a{color:#9fc0e2}
.crumbs a:hover{color:#fff}
.menu a.active{color:var(--blue)}
/* ---------- Language switcher ---------- */
.lang{display:flex;gap:2px;align-items:center;font-family:'Poppins';font-weight:700;font-size:13px}
.lang a{padding:3px 8px;border-radius:6px;color:#9fc0e2}
.lang a.on{background:var(--sky);color:var(--navy)}
.lang a:hover{color:#fff}
.lang a.on:hover{color:var(--navy)}
.lang .sep{color:#4a6a8c}
/* ---------- Floating WhatsApp button ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;justify-content:center;width:58px;height:58px;background:#25d366;color:#fff;border-radius:50%;box-shadow:0 8px 24px rgba(37,211,102,.45);transition:.2s}
.wa-float:hover{background:#1ebe57;transform:translateY(-2px);color:#fff}
.wa-float svg{width:30px;height:30px;flex:none}
@media(max-width:560px){.wa-float{right:16px;bottom:16px}}
/* ---------- CTA band v2 ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:24px;padding:0;display:block;box-shadow:0 18px 44px rgba(11,47,94,.28)}
.cta-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-image:url('hero-poster.jpg')}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,30,58,.95) 0%,rgba(11,47,94,.88) 45%,rgba(26,115,196,.72) 100%)}
.cta-inner{position:relative;z-index:2;padding:64px 56px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta-band .eyebrow{color:var(--sky);margin-bottom:10px}
.cta-band h2{color:#fff;font-size:34px;max-width:600px;letter-spacing:-.3px}
.cta-band h2 em{color:var(--sky);font-style:normal}
.cta-band p{color:#dbe7f4;margin-top:10px;max-width:540px;font-size:16.5px}
.cta-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch;flex:none}
.cta-actions .btn{justify-content:center}
.cta-btn-call{background:#fff;color:var(--navy)}
.cta-btn-call:hover{background:var(--sky);color:var(--navy)}
.cta-note{position:relative;z-index:2;display:flex;gap:22px;flex-wrap:wrap;padding:16px 56px;border-top:1px solid rgba(255,255,255,.14);background:rgba(8,30,58,.45);font-size:13.5px;color:#cddcee;font-family:'Poppins';font-weight:600}
.cta-note span{display:inline-flex;align-items:center;gap:7px}
.cta-note .ico{color:var(--sky);width:16px;height:16px}
@media(max-width:900px){.cta-inner{padding:44px 30px;flex-direction:column;align-items:flex-start}.cta-actions{width:100%}.cta-note{padding:14px 30px}}
/* ---------- Areas v2 ---------- */
.area-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;max-width:960px;margin-left:auto;margin-right:auto}
.area-list a{display:flex;align-items:center;justify-content:center;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:15px 12px;text-align:center;font-family:'Poppins';font-weight:600;font-size:15px;color:#fff;backdrop-filter:blur(4px);transition:.22s}
.area-list a .ico{width:16px;height:16px;color:var(--sky);transition:.22s}
.area-list a:hover{background:var(--blue);border-color:var(--sky);transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.25)}
.area-list a:hover .ico{color:#fff}
.areas-foot{margin-top:36px;color:#9fc0e2;font-size:15px}
.areas-foot a{color:var(--sky);font-family:'Poppins';font-weight:600;border-bottom:1.5px solid rgba(87,182,230,.5);padding-bottom:1px;transition:.2s}
.areas-foot a:hover{color:#fff;border-color:#fff}
@media(max-width:900px){.area-list{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.area-list{grid-template-columns:1fr 1fr;gap:10px}.area-list a{font-size:13.5px;padding:12px 8px}}
/* ---------- Gallery v2 ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.gallery figure{position:relative;margin:0;border-radius:12px;overflow:hidden;cursor:pointer;height:220px}
.gallery figure.tall{grid-row:span 2;height:100%}
.gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(8,30,58,.85));color:#fff;font-family:'Poppins';font-weight:600;font-size:13.5px;opacity:0;transform:translateY(8px);transition:.3s}
.gallery figure:hover figcaption{opacity:1;transform:none}
.gallery figure::after{content:"⤢";position:absolute;top:10px;right:12px;color:#fff;font-size:18px;background:rgba(8,30,58,.55);width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s}
.gallery figure:hover::after{opacity:1}
/* filtros */
.gal-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.gal-filters button{font-family:'Poppins';font-weight:600;font-size:14px;padding:9px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.2s}
.gal-filters button:hover{border-color:var(--blue);color:var(--blue)}
.gal-filters button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.gallery figure.hide{display:none}
/* lightbox */
.lb{position:fixed;inset:0;z-index:120;background:rgba(6,20,40,.94);display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px}
.lb.open{display:flex}
.lb img{max-width:min(1100px,92vw);max-height:78vh;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.lb-cap{color:#dbe7f4;font-family:'Poppins';font-weight:600;margin-top:16px;font-size:15px;text-align:center}
.lb-count{color:#7f96b0;font-size:13px;margin-top:4px}
.lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.lb button:hover{background:var(--blue);border-color:var(--blue)}
.lb-close{top:22px;right:22px}
.lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb-next{right:22px;top:50%;transform:translateY(-50%)}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}.gallery figure.tall{grid-row:auto;height:220px}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}.gallery figure{height:230px}.lb-prev{left:10px}.lb-next{right:10px}}
@media(max-width:560px){.page-hero h1{font-size:32px}}