/* =========================================================
   CARTAGENA FOR YOU — Landing
   Mobile-first · compact · premium · app-like
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --navy:#0B2F4F; --navy-2:#0A2740; --navy-deep:#06192B; --ink:#15252F;
  --teal:#11AEC6; --teal-2:#0E8FAB; --teal-light:#5BD2E3; --teal-soft:#EAF8FB;
  --gold:#FFC23A; --orange:#FB7A24; --coral:#F2602B;
  --sand:#FBF4E4; --sand-2:#F5E8CC; --sand-deep:#E9D6B0;
  --wa:#25D366; --wa-d:#1DA851; --white:#fff;
  --muted:#5d6f7a; --line:rgba(11,47,79,.10);

  --g-sun:linear-gradient(120deg,#FFC23A 0%,#FB7A24 55%,#F2602B 100%);
  --g-sea:linear-gradient(135deg,#16B9D0 0%,#0E7FA6 55%,#0B2F4F 100%);
  --g-navy:linear-gradient(165deg,#0F3E61 0%,#0A2740 62%,#06192B 100%);
  --g-teal:linear-gradient(120deg,#15B7CE,#0E8FAB);

  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px; --pill:999px;
  --sh-sm:0 4px 14px rgba(11,47,79,.08);
  --sh:0 12px 30px rgba(11,47,79,.12);
  --sh-lg:0 22px 50px rgba(11,47,79,.20);
  --sh-sun:0 12px 28px rgba(251,122,36,.36);
  --sh-wa:0 12px 26px rgba(37,211,102,.36);

  --gut:18px; --maxw:1180px;
  --head-h:60px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--white); font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.16; letter-spacing:-.02em; font-weight:800}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
.ic{width:1.15em; height:1.15em; display:inline-block; vertical-align:-.18em; flex:0 0 auto; fill:currentColor}

.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
[id]{scroll-margin-top:calc(var(--head-h) + 12px)}
@media (max-width:959px){body{padding-bottom:60px}}
.skip-link{position:fixed; left:-999px; top:8px; z-index:200; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px}
.skip-link:focus{left:8px}

/* keyboard focus */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:8px}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important; transform:none!important; transition:none}}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--navy); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:700; font-size:.94rem; padding:.78em 1.25em; border-radius:var(--pill);
  background:var(--bg); color:var(--fg); line-height:1; white-space:nowrap;
  transition:transform .25s, box-shadow .25s, filter .25s; will-change:transform;
}
.btn .ic{width:1.2em;height:1.2em}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{font-size:.84rem; padding:.6em 1em}
.btn--block{width:100%}
.btn--wa{background:var(--wa); color:#063; color:#06351c; box-shadow:var(--sh-wa)}
.btn--wa:hover{filter:brightness(1.04); box-shadow:0 16px 32px rgba(37,211,102,.45)}
.btn--sun{background:var(--g-sun); color:#3a1600; box-shadow:var(--sh-sun)}
.btn--sun:hover{filter:brightness(1.05)}
.btn--glass{background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.45)}
.btn--glass:hover{background:rgba(255,255,255,.24)}

/* ---------- Section scaffolding ---------- */
.section{padding:46px 0; position:relative}
.section--white{background:var(--white)}
.section--sand{background:linear-gradient(180deg,#FBF4E4,#F7ECD6)}
.section--sea{background:linear-gradient(180deg,#EAF8FB,#Dff2f7)}
.section--mint{background:linear-gradient(180deg,#EAF8FB,#F4FBFC)}
.section--navy{background:var(--g-navy); color:#eaf3fb}
.section--dark{background:var(--navy-deep); color:#eaf3fb}

.sec-head{max-width:640px; margin:0 auto 22px; text-align:center}
.sec-head--left{text-align:left; margin-inline:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:.45em; font-weight:700;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-2); background:var(--teal-soft); padding:.42em .8em; border-radius:var(--pill);
}
.section--navy .eyebrow,.section--dark .eyebrow{color:#bff0fb; background:rgba(255,255,255,.10)}
.sec-title{font-size:clamp(1.4rem,5.2vw,2.25rem); margin-top:.5em; color:var(--navy)}
.sec-head--light .sec-title{color:#fff}
.sec-desc{margin-top:.55em; color:var(--muted); font-size:.95rem}
.sec-head--light .sec-desc{color:#bcd4e4}
.grad-sun{background:var(--g-sun); -webkit-background-clip:text; background-clip:text; color:transparent}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:fixed; inset:0 0 auto; z-index:90; height:var(--head-h);
  display:flex; align-items:center; transition:background .35s, box-shadow .35s, backdrop-filter .35s}
.site-header.scrolled{background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(12px); box-shadow:0 6px 22px rgba(11,47,79,.10)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%}
.brand__logo{height:38px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.28)); transition:filter .35s}
.site-header.scrolled .brand__logo{filter:none}
.nav{display:none}
.header__actions{display:flex; align-items:center; gap:8px}
.hamburger{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:12px; color:#fff; font-size:1.3rem; background:rgba(11,47,79,.30); backdrop-filter:blur(6px)}
.site-header.scrolled .hamburger{color:var(--navy); background:rgba(11,47,79,.08)}
.header__actions .btn--wa{display:none}

/* Drawer */
.drawer-backdrop{position:fixed; inset:0; background:rgba(6,21,38,.5); backdrop-filter:blur(3px); z-index:110; opacity:0; transition:opacity .3s}
.drawer-backdrop.show{opacity:1}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(86vw,360px); z-index:120;
  background:#fff; transform:translateX(105%); transition:transform .38s cubic-bezier(.3,.8,.2,1);
  display:flex; flex-direction:column; box-shadow:var(--sh-lg)}
.drawer.open{transform:none}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line)}
.drawer__head img{height:38px; width:auto}
.drawer__close{width:42px;height:42px;border-radius:12px;background:#f1f5f8;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}
.drawer__nav{display:flex; flex-direction:column; padding:10px 12px; gap:2px; overflow-y:auto}
.drawer__nav a{display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:14px; font-weight:600; color:var(--navy); transition:background .2s}
.drawer__nav a .ic{color:var(--teal-2); font-size:1.2rem}
.drawer__nav a:hover{background:var(--teal-soft)}
.drawer__cta{margin-top:auto; padding:16px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:grid; gap:12px}
.drawer__phone{display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; color:var(--navy)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; min-height:90svh; display:flex; align-items:flex-end;
  padding-top:calc(var(--head-h) + 10px); padding-bottom:42px; overflow:hidden; isolation:isolate}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover; animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.16) translateY(-1.5%)}}
.hero__overlay{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 70% 10%, rgba(17,174,198,.30), transparent 60%),
    linear-gradient(180deg, rgba(6,21,38,.45) 0%, rgba(6,21,38,.18) 35%, rgba(6,21,38,.62) 78%, rgba(6,21,38,.92) 100%);
}
.hero__content{position:relative; color:#fff; max-width:760px}
.hero__eyebrow{display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.74rem;
  letter-spacing:.06em; padding:.5em .9em; border-radius:var(--pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(6px)}
.hero__eyebrow .ic{color:var(--gold)}
.hero__title{font-size:clamp(2.1rem,8.6vw,4.3rem); margin:.5em 0 .2em; text-shadow:0 6px 30px rgba(0,0,0,.35)}
.hero__sub{font-size:clamp(.98rem,3.6vw,1.2rem); max-width:34ch; color:#eaf2f8; text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero__actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:20px}
.hero__actions .btn{flex:1 1 auto; min-width:46%}
.hero__chips{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:18px}
.hero__chips span{display:inline-flex; align-items:center; gap:.45em; font-size:.8rem; font-weight:600; color:#eaf3fb}
.hero__chips .ic{color:var(--teal-light)}
.hero__scroll{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:24px; height:38px;
  border:2px solid rgba(255,255,255,.6); border-radius:14px; z-index:2}
.hero__scroll span{position:absolute; left:50%; top:8px; width:4px; height:7px; border-radius:3px; background:#fff; transform:translateX(-50%); animation:scrolldot 1.8s infinite}
@keyframes scrolldot{0%{opacity:0; transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0; transform:translate(-50%,12px)}}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{background:var(--g-navy); color:#eaf3fb; overflow:hidden; padding:11px 0; position:relative}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:46px; z-index:2}
.marquee::before{left:0; background:linear-gradient(90deg,#0A2740,transparent)}
.marquee::after{right:0; background:linear-gradient(270deg,#0A2740,transparent)}
.marquee__track{display:flex; gap:30px; width:max-content; animation:marq 26s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.84rem; white-space:nowrap}
.marquee__track .ic{color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* =========================================================
   CAROUSEL (Destinos)
   ========================================================= */
.carousel{position:relative}
.carousel__viewport{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px var(--gut) 8px; scroll-padding-inline:var(--gut);
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.carousel__viewport::-webkit-scrollbar{display:none}
.dcard{flex:0 0 78%; max-width:330px; scroll-snap-align:start; background:#fff; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh); border:1px solid var(--line); transition:transform .3s, box-shadow .3s}
.dcard:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.dcard>img{width:100%; height:185px; object-fit:cover; transition:transform .6s}
.dcard:hover>img{transform:scale(1.07)}
.dcard__body{padding:14px 15px 16px}
.dcard__body h3{font-size:1.12rem; color:var(--navy)}
.dcard__body p{margin-top:5px; font-size:.85rem; color:var(--muted); min-height:2.6em}
.dcard__link{display:inline-flex; align-items:center; gap:.4em; margin-top:10px; font-weight:700; font-size:.85rem; color:var(--teal-2)}
.dcard__link .ic{transition:transform .25s}
.dcard__link:hover .ic{transform:translate(2px,-2px)}

.carousel__nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px}
.cbtn{width:42px; height:42px; border-radius:50%; background:#fff; color:var(--navy); box-shadow:var(--sh-sm);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; border:1px solid var(--line); transition:transform .2s, background .2s, color .2s}
.cbtn:hover{background:var(--navy); color:#fff; transform:scale(1.06)}
.cbtn:disabled{opacity:.35; cursor:default; transform:none; background:#fff; color:var(--navy)}
.carousel__dots{display:flex; gap:7px}
.carousel__dots button{width:8px; height:8px; border-radius:50%; background:var(--sand-deep); transition:width .3s, background .3s}
.carousel__dots button.active{width:24px; border-radius:5px; background:var(--g-sun)}

/* =========================================================
   ACTIVIDADES GRID
   ========================================================= */
.act-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:13px}
.acard{background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm);
  border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .28s, box-shadow .28s}
.acard:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.acard__img{position:relative; overflow:hidden; aspect-ratio:4/3}
.acard__img img{width:100%; height:100%; object-fit:cover; transition:transform .55s}
.acard:hover .acard__img img{transform:scale(1.08)}
.acard__badge{position:absolute; top:8px; left:8px; width:26px; height:26px; border-radius:50%;
  background:var(--g-sun); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; box-shadow:0 4px 10px rgba(251,122,36,.5)}
.acard__body{padding:10px 11px 12px; display:flex; flex-direction:column; gap:3px; flex:1}
.acard__body h3{font-size:.96rem; color:var(--navy); line-height:1.2}
.acard__body p{font-size:.76rem; color:var(--muted); line-height:1.35}
.acard__cta{margin-top:8px; align-self:flex-start; font-weight:700; font-size:.8rem; color:#fff;
  background:var(--g-teal); padding:.5em 1em; border-radius:var(--pill); transition:filter .2s, transform .2s; box-shadow:0 6px 14px rgba(17,174,198,.3)}
.acard__cta:hover{filter:brightness(1.06); transform:translateY(-1px)}

/* =========================================================
   TABS / CHIPS (Explora)
   ========================================================= */
.tabs__bar{display:flex; gap:9px; overflow-x:auto; padding:4px 2px 12px; scrollbar-width:none; scroll-snap-type:x proximity}
.tabs__bar::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto; scroll-snap-align:start; display:inline-flex; align-items:center; gap:.5em;
  padding:.62em 1.05em; border-radius:var(--pill); font-weight:700; font-size:.86rem; color:var(--navy);
  background:#fff; border:1.5px solid var(--line); box-shadow:var(--sh-sm); transition:.25s; white-space:nowrap}
.tab .tab__count{font-size:.74rem; font-weight:700; background:var(--teal-soft); color:var(--teal-2); padding:.1em .5em; border-radius:var(--pill)}
.tab:hover{border-color:var(--teal-light)}
.tab.is-active{background:var(--g-sea); color:#fff; border-color:transparent; box-shadow:var(--sh)}
.tab.is-active .tab__count{background:rgba(255,255,255,.25); color:#fff}

.tabs__panel{background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 16px 18px; box-shadow:var(--sh-sm); min-height:200px; backdrop-filter:blur(4px)}
.tabs__panel.fading{opacity:0; transform:translateY(6px)}
.tabs__panel{transition:opacity .28s, transform .28s}
.chipgroup + .chipgroup{margin-top:16px}
.chipgroup__title{display:flex; align-items:center; gap:.5em; font-size:.78rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal-2); margin-bottom:10px}
.chipgroup__title::after{content:""; flex:1; height:1px; background:var(--line)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:.4em; padding:.52em .9em; border-radius:var(--pill);
  background:#fff; border:1.5px solid var(--line); font-size:.83rem; font-weight:600; color:var(--navy);
  transition:.22s; box-shadow:0 2px 6px rgba(11,47,79,.05)}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--g-sun); flex:0 0 auto}
.chip:hover{transform:translateY(-2px); border-color:var(--teal-light); color:var(--teal-2); box-shadow:var(--sh-sm)}
.chip--soon{opacity:.75; font-style:italic}
.chip--soon::before{background:var(--sand-deep)}

/* =========================================================
   SERVICIOS
   ========================================================= */
.serv-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:13px}
.scard{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r);
  padding:18px 15px; transition:transform .28s, background .28s, border-color .28s}
.scard:hover{transform:translateY(-5px); background:rgba(255,255,255,.11); border-color:rgba(91,210,227,.45)}
.scard__ic{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px;
  background:var(--g-sun); color:#fff; font-size:1.4rem; margin-bottom:11px; box-shadow:var(--sh-sun)}
.scard h3{font-size:1rem; color:#fff}
.scard p{margin-top:6px; font-size:.83rem; color:#bcd4e4}
.serv-grid .scard:last-child:nth-child(odd){grid-column:1 / -1}

/* =========================================================
   NOSOTROS
   ========================================================= */
.nosotros{display:grid; gap:24px}
.nosotros__media{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg)}
.nosotros__media img{width:100%; height:320px; object-fit:cover}
.nosotros__badge{position:absolute; right:14px; bottom:14px; background:#fff; border-radius:var(--r);
  padding:10px 16px; text-align:center; box-shadow:var(--sh); line-height:1.05}
.nosotros__badge strong{display:block; font-size:.7rem; letter-spacing:.18em; color:var(--teal-2)}
.nosotros__badge span{font-size:1.35rem; font-weight:800; color:var(--navy)}
.nosotros__text p{color:var(--muted); margin-top:14px}
.mv{margin-top:18px; background:var(--teal-soft); border-radius:var(--r-lg); padding:6px}
.mv__tabs{display:flex; gap:6px; padding:4px}
.mv__tab{flex:1; padding:.6em; border-radius:12px; font-weight:700; font-size:.88rem; color:var(--teal-2); transition:.25s}
.mv__tab.is-active{background:#fff; color:var(--navy); box-shadow:var(--sh-sm)}
.mv__content{padding:6px 12px 14px}
.mv__content p{display:none; margin-top:6px; font-size:.9rem}
.mv__content p.is-active{display:block; animation:fadein .4s}
@keyframes fadein{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; text-align:center}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 6px; box-shadow:var(--sh-sm)}
.stat strong{display:block; font-size:1.7rem; font-weight:800; color:var(--navy); line-height:1}
.stat span{font-size:.72rem; color:var(--muted); font-weight:600}

/* =========================================================
   POR QUÉ ELEGIRNOS
   ========================================================= */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:11px}
.wcard{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:13px 13px; box-shadow:var(--sh-sm); transition:transform .25s, box-shadow .25s}
.wcard:hover{transform:translateY(-3px); box-shadow:var(--sh)}
.wcard .ic{flex:0 0 auto; width:34px; height:34px; padding:7px; border-radius:10px; background:var(--teal-soft); color:var(--teal-2)}
.wcard p{font-size:.82rem; font-weight:600; color:var(--navy); line-height:1.25}

/* =========================================================
   COMUNIDAD / SOCIAL PROOF
   ========================================================= */
.comunidad__inner{display:grid; gap:22px}
.comunidad__rating{text-align:center}
.rating__stars{display:inline-flex; gap:3px; color:var(--gold); font-size:1.5rem; margin-bottom:8px}
.comunidad__rating strong{display:block; font-size:1.3rem; color:#fff}
.comunidad__rating p{margin-top:8px; color:#bcd4e4; font-size:.92rem; max-width:42ch; margin-inline:auto}
.comunidad__follow{text-align:center}
.comunidad__follow>p{color:#bcd4e4; font-size:.9rem; margin-bottom:12px}
.comunidad__social{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.soc{display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-weight:700; font-size:.9rem;
  padding:.8em 1em; border-radius:var(--pill); color:#fff; transition:transform .25s, filter .25s}
.soc:hover{transform:translateY(-2px); filter:brightness(1.08)}
.soc--ig{background:linear-gradient(120deg,#feda75,#d62976 45%,#962fbf 80%,#4f5bd5)}
.soc--fb{background:#1877F2}

/* =========================================================
   GALERÍA
   ========================================================= */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; grid-auto-rows:130px}
.gitem{position:relative; overflow:hidden; border-radius:var(--r); box-shadow:var(--sh-sm); background:#0c2236}
.gitem--tall{grid-row:span 2}
.gitem img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.gitem::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(6,21,38,.4)); opacity:0; transition:opacity .3s}
.gitem:hover img{transform:scale(1.09)}
.gitem:hover::after{opacity:1}

/* =========================================================
   FAQ + PAGOS
   ========================================================= */
.faq-wrap{display:grid; gap:22px}
.acc__item{background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; overflow:hidden; box-shadow:var(--sh-sm)}
.acc__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left;
  padding:15px 16px; font-weight:700; font-size:.92rem; color:var(--navy)}
.acc__chev{transition:transform .35s; color:var(--teal-2); flex:0 0 auto}
.acc__item.open .acc__chev{transform:rotate(180deg)}
.acc__a{max-height:0; overflow:hidden; transition:max-height .38s ease}
.acc__a p{padding:0 16px 15px; font-size:.88rem; color:var(--muted)}
.pay-card{background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh); align-self:start}
.pay-card h3{display:flex; align-items:center; gap:.5em; font-size:1.05rem}
.pay-card h3 .ic{color:var(--gold)}
.pay-list{margin:14px 0 16px; display:grid; gap:10px}
.pay-list li{display:flex; align-items:center; gap:.7em; font-size:.9rem; font-weight:600; color:#dbe9f4}
.pay-list .ic{color:var(--teal-light); width:1.4em; height:1.4em}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta{position:relative; padding:64px 0; text-align:center; color:#fff; overflow:hidden; isolation:isolate}
.cta__media{position:absolute; inset:0; z-index:-2}
.cta__media img{width:100%; height:100%; object-fit:cover; object-position:center 60%}
.cta__overlay{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(11,47,79,.55),rgba(242,96,43,.45)),linear-gradient(0deg,rgba(6,21,38,.7),rgba(6,21,38,.2))}
.cta__content{max-width:640px}
.cta__content h2{font-size:clamp(1.5rem,6vw,2.4rem); text-shadow:0 4px 20px rgba(0,0,0,.35)}
.cta__content p{margin-top:12px; font-size:1rem; color:#f4ede2}
.cta__actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px}
.cta__actions .btn{flex:1 1 auto; min-width:240px}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{display:grid; gap:24px}
.contact-list{margin-top:18px; display:grid; gap:11px}
.contact-list li,.contact-list li a{display:flex; align-items:center; gap:13px}
.contact-list li{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; box-shadow:var(--sh-sm); transition:transform .25s, box-shadow .25s}
.contact-list li:hover{transform:translateY(-2px); box-shadow:var(--sh)}
.contact-ic{flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:var(--g-sea); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem}
.contact-list strong{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--teal-2); font-weight:800}
.contact-list div{font-size:.9rem; color:var(--navy); font-weight:600; line-height:1.35}
.contacto__map{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); border:1px solid var(--line); min-height:260px; display:flex}
.contacto__map iframe{width:100%; height:100%; min-height:260px; border:0; display:block; filter:saturate(1.05)}
.map-facade{flex:1; width:100%; min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:#fff; cursor:pointer; border:0; position:relative; overflow:hidden; text-align:center; padding:20px;
  background:linear-gradient(135deg,#0E8FAB,#0B2F4F)}
.map-facade::before{content:""; position:absolute; inset:0; opacity:.5;
  background:
    repeating-linear-gradient(0deg,transparent 0 26px,rgba(255,255,255,.06) 26px 27px),
    repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.06) 26px 27px),
    radial-gradient(60% 60% at 50% 45%,rgba(91,210,227,.25),transparent 70%)}
.map-facade>*{position:relative}
.map-facade__pin{width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:1.5rem; box-shadow:0 0 0 8px rgba(255,255,255,.06)}
.map-facade strong{font-size:1rem}
.map-facade__sub{font-size:.82rem; color:#bcd4e4}
.map-facade__hint{display:inline-flex; align-items:center; gap:.5em; margin-top:6px; font-size:.84rem; font-weight:700;
  background:var(--g-sun); color:#3a1600; padding:.55em 1.05em; border-radius:var(--pill); box-shadow:var(--sh-sun); transition:transform .2s}
.map-facade:hover .map-facade__hint{transform:translateY(-2px)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--navy-deep); color:#cfe0ee; padding-top:38px}
.footer__grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 18px}
.footer__brand{grid-column:1 / -1}
.footer__brand img{height:46px; width:auto; margin-bottom:10px}
.footer__slogan{font-size:.9rem; color:#9fb6c9; max-width:30ch}
.footer__soc{display:flex; gap:10px; margin-top:14px}
.footer__soc a{width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; transition:.25s}
.footer__soc a:hover{background:var(--g-sun); color:#fff; transform:translateY(-2px)}
.footer__col h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:12px}
.footer__col a,.footer__col span{display:flex; align-items:center; gap:.5em; font-size:.86rem; color:#9fb6c9; padding:4px 0; transition:color .2s}
.footer__col a:hover{color:var(--teal-light)}
.footer__col .ic{color:var(--teal-2)}
.footer__bottom{margin-top:30px; border-top:1px solid rgba(255,255,255,.08); padding:16px 0; font-size:.8rem; color:#7e98ac; text-align:center}

/* =========================================================
   FLOATING / STICKY
   ========================================================= */
.fab-wa{position:fixed; right:16px; bottom:84px; z-index:80; width:54px; height:54px; border-radius:50%;
  background:var(--wa); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:var(--sh-wa); transition:transform .25s}
.fab-wa:hover{transform:scale(1.08)}
.fab-wa__pulse{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){.fab-wa__pulse{animation:none}}

.to-top{position:fixed; right:16px; bottom:146px; z-index:80; width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--navy); box-shadow:var(--sh); display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; opacity:0; pointer-events:none; transform:translateY(10px); transition:.3s}
.to-top.show{opacity:1; pointer-events:auto; transform:none}

.mobilebar{position:fixed; left:0; right:0; bottom:0; z-index:85; display:flex; gap:9px;
  padding:9px var(--gut) calc(9px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px); box-shadow:0 -8px 24px rgba(11,47,79,.12); transform:translateY(120%); transition:transform .35s}
.mobilebar.show{transform:none}
.mobilebar__btn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:700;
  font-size:.9rem; padding:.82em; border-radius:var(--pill)}
.mobilebar__btn--wa{background:var(--wa); color:#06351c; box-shadow:var(--sh-wa)}
.mobilebar__btn--sun{background:var(--g-sun); color:#3a1600; box-shadow:var(--sh-sun)}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(6,16,28,.94); display:none;
  align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .3s}
.lightbox.open{display:flex; opacity:1}
.lightbox__img{max-width:94vw; max-height:84vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:lbin .35s}
@keyframes lbin{from{transform:scale(.92); opacity:0}to{transform:scale(1); opacity:1}}
.lightbox__close{position:absolute; top:16px; right:16px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; transition:background .2s}
.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__prev{left:12px}
.lightbox__next{right:12px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:560px){
  .act-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .comunidad__social{flex-direction:row; justify-content:center}
  .gallery{grid-template-columns:repeat(3,1fr); grid-auto-rows:150px}
  .cta__actions .btn{flex:0 1 auto}
}

@media (min-width:768px){
  :root{--gut:26px}
  .section{padding:64px 0}
  .nosotros{grid-template-columns:1fr 1fr; align-items:center; gap:36px}
  .nosotros__media img{height:420px}
  .faq-wrap{grid-template-columns:1.4fr 1fr; align-items:start; gap:30px}
  .contacto{grid-template-columns:1fr 1fr; align-items:stretch}
  .serv-grid{grid-template-columns:repeat(3,1fr)}
  .serv-grid .scard:last-child:nth-child(odd){grid-column:auto}
  .comunidad__inner{grid-template-columns:1.1fr 1fr; align-items:center; gap:40px}
  .comunidad__rating{text-align:left}
  .comunidad__rating p{margin-inline:0}
  .footer__grid{grid-template-columns:2fr 1fr 1fr 1.4fr}
  .footer__brand{grid-column:auto}
  .dcard{flex-basis:46%}
  .act-grid{grid-template-columns:repeat(4,1fr)}
  .hero__actions .btn{flex:0 1 auto}
}

@media (min-width:960px){
  :root{--head-h:72px}
  .nav{display:flex; gap:6px; margin-inline:auto}
  .nav a{padding:9px 14px; border-radius:var(--pill); font-weight:600; font-size:.92rem; color:#fff; transition:.25s; text-shadow:0 1px 8px rgba(0,0,0,.3)}
  .site-header.scrolled .nav a{color:var(--navy); text-shadow:none}
  .nav a:hover{background:rgba(255,255,255,.16)}
  .site-header.scrolled .nav a:hover{background:var(--teal-soft); color:var(--teal-2)}
  .header__actions .btn--wa{display:inline-flex}
  .hamburger{display:none}
  .why-grid{grid-template-columns:repeat(4,1fr)}
  .dcard{flex-basis:31%; max-width:340px}
  .mobilebar{display:none}
  .fab-wa{bottom:24px}
  .to-top{bottom:86px}
  .hero{min-height:88svh}
}

@media (min-width:1200px){
  .dcard{flex-basis:23.5%}
}

/* hover-zoom only where supported & pointer present */
@media (hover:none){
  .dcard:hover>img,.acard:hover .acard__img img,.gitem:hover img{transform:none}
}