/* ============================================================
   SAN BLAS ON SAILBOATS — community.css
   Estilos de la página Our Community + popup con slider
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
#community-hero { position:relative; height:75vh; min-height:500px; overflow:hidden; display:flex; align-items:flex-end; }
#community-hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#community-hero .hero__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,24,38,.90) 0%,rgba(10,24,38,.30) 55%,transparent 100%); z-index:1; }
#community-hero .hero__content { position:relative; z-index:2; padding:var(--space-2xl) var(--side-pad); max-width:var(--max-width); margin:0 auto; width:100%; }
#community-hero h1 { color:var(--color-white); font-size:clamp(42px,7vw,80px); line-height:1.05; margin-bottom:var(--space-md); }
#community-hero p  { color:rgba(255,255,255,.80); font-size:clamp(16px,2vw,20px); max-width:560px; line-height:1.5; }

/* ── INTRO ─────────────────────────────────────────────────── */
#community-intro { background:var(--color-dark); padding:var(--space-2xl) var(--side-pad); }
.community-intro__inner { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:var(--space-2xl); align-items:center; }
.community-intro__text p { color:rgba(255,255,255,.70); font-size:17px; line-height:1.75; max-width:640px; }
@media(max-width:700px){ .community-intro__inner{ grid-template-columns:1fr; } }

/* ── COMPARE ───────────────────────────────────────────────── */
#community-compare { background:var(--color-cream-mid); padding:var(--space-2xl) var(--side-pad); }
.compare__inner { max-width:var(--max-width); margin:0 auto; }
.compare__header { text-align:center; margin-bottom:var(--space-xl); }
.compare__header h2 { color:var(--color-dark); }
.compare__cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); max-width:680px; margin:0 auto; }
.compare__card { background:var(--color-white); border-radius:var(--radius-md); padding:var(--space-xl); text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.compare__card .compare__icon { font-size:42px; margin-bottom:var(--space-md); display:block; }
.compare__card h3 { font-family:var(--font-display); font-size:28px; color:var(--color-dark); margin-bottom:var(--space-md); }
.compare__card ul { list-style:none; padding:0; margin:0; }
.compare__card ul li { font-size:14px; color:var(--color-text-muted); padding:5px 0; border-bottom:.5px solid rgba(0,0,0,.07); }
.compare__card ul li:last-child { border-bottom:none; }
.compare__card--sailboat { border-top:3px solid var(--color-teal); }
.compare__card--catamaran { border-top:3px solid var(--color-coral); }
.compare__cta { text-align:center; margin-top:var(--space-xl); }
@media(max-width:500px){ .compare__cards{ grid-template-columns:1fr; } }

/* ── FLEET SECTIONS ────────────────────────────────────────── */
.fleet__section-header { max-width:var(--max-width); margin:0 auto var(--space-2xl); display:flex; align-items:center; gap:var(--space-lg); }
.fleet__section-header h2 { color:var(--color-dark); white-space:nowrap; }
.fleet__section-header::after { content:""; flex:1; height:1px; background:rgba(0,0,0,.12); }
#community-sailboats { padding:var(--space-3xl) var(--side-pad); background:var(--color-cream); }
#community-cats      { padding:var(--space-3xl) var(--side-pad); background:var(--color-white); }

/* ── BOATS GRID ────────────────────────────────────────────── */
.boats__grid { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
@media(max-width:960px){ .boats__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:580px){ .boats__grid{ grid-template-columns:1fr; } }

/* ── BOAT CARD ─────────────────────────────────────────────── */
.boat-card { background:var(--color-white); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.07); display:flex; flex-direction:column; transition:transform var(--transition),box-shadow var(--transition); cursor:pointer; }
#community-cats .boat-card { background:var(--color-cream); }
.boat-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.13); }
.boat-card__img { height:200px; overflow:hidden; position:relative; }
.boat-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.boat-card:hover .boat-card__img img { transform:scale(1.05); }
.boat-card__type { position:absolute; top:var(--space-md); left:var(--space-md); background:var(--color-dark); color:var(--color-white); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:20px; }
.boat-card__body { padding:var(--space-lg); display:flex; flex-direction:column; flex:1; }
.boat-card__name { font-family:var(--font-display); font-size:26px; color:var(--color-dark); margin-bottom:2px; }
.boat-card__tagline { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-teal); margin-bottom:var(--space-md); }
.boat-card__specs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-md); }
.boat-card__spec { font-size:11px; color:var(--color-text-muted); background:var(--color-cream-mid); padding:3px 8px; border-radius:12px; }
#community-cats .boat-card__spec { background:rgba(0,0,0,.06); }
.boat-card__desc { font-size:14px; color:var(--color-text-muted); line-height:1.65; margin-bottom:var(--space-md); flex:1; }
.boat-card__price { font-size:13px; color:var(--color-dark); font-weight:600; margin-bottom:4px; }
.boat-card__price span { font-size:20px; color:var(--color-teal); }
.boat-card__price-note { font-size:11px; color:var(--color-text-muted); margin-bottom:var(--space-lg); }

.boat-card__more { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--color-teal); letter-spacing:.06em; text-transform:uppercase; margin-top:auto; padding-top:var(--space-sm); border-top:.5px solid rgba(0,0,0,.08); }
.boat-card__more i { font-size:14px; transition:transform .2s; }
.boat-card:hover .boat-card__more i { transform:translateX(3px); }

/* ── POPUP OVERLAY ─────────────────────────────────────────── */
.boat-popup-overlay { position:fixed; inset:0; background:rgba(10,24,38,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.boat-popup-overlay.active { opacity:1; pointer-events:all; }

/* ── POPUP MODAL ───────────────────────────────────────────── */
.boat-popup { background:var(--color-white); border-radius:var(--radius-md); width:100%; max-width:880px; max-height:92vh; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; box-shadow:0 40px 100px rgba(0,0,0,.50); transform:translateY(24px) scale(.98); transition:transform .35s cubic-bezier(.22,1,.36,1); position:relative; }
.boat-popup-overlay.active .boat-popup { transform:translateY(0) scale(1); }
@media(max-width:680px){ .boat-popup{ grid-template-columns:1fr; max-height:96vh; overflow-y:auto; } }

/* ── POPUP CLOSE ───────────────────────────────────────────── */
.boat-popup__close { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:rgba(10,24,38,.65); border:none; color:white; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:20; transition:background .2s; line-height:1; }
.boat-popup__close:hover { background:var(--color-dark); }

/* ── POPUP SLIDER ──────────────────────────────────────────── */
.boat-popup__slider { position:relative; overflow:hidden; border-radius:var(--radius-md) 0 0 var(--radius-md); background:var(--color-dark); }
@media(max-width:680px){ .boat-popup__slider{ border-radius:var(--radius-md) var(--radius-md) 0 0; height:240px; } }

.boat-popup__slides { display:flex; height:100%; transition:transform .4s cubic-bezier(.25,.46,.45,.94); will-change:transform; }
.boat-popup__slide { min-width:100%; height:100%; overflow:hidden; }
.boat-popup__slide img { width:100%; height:100%; object-fit:cover; display:block; }

.boat-popup__slider-btn { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); border:.5px solid rgba(255,255,255,.30); color:white; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:5; }
.boat-popup__slider-btn:hover { background:rgba(255,255,255,.38); }
.boat-popup__slider-btn--prev { left:12px; }
.boat-popup__slider-btn--next { right:12px; }

.boat-popup__dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:5; }
.boat-popup__dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.40); border:none; cursor:pointer; transition:all .2s; padding:0; }
.boat-popup__dot.active { background:white; width:18px; border-radius:3px; }

/* ── POPUP INFO ────────────────────────────────────────────── */
.boat-popup__info { padding:28px 28px 24px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; }
.boat-popup__type { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-teal); }
.boat-popup__name { font-family:var(--font-display); font-size:38px; color:var(--color-dark); line-height:1; margin:0; }
.boat-popup__tagline { font-size:13px; color:var(--color-text-muted); margin:-6px 0 0; }

.boat-popup__specs { display:flex; flex-wrap:wrap; gap:6px; }
.boat-popup__spec { font-size:11px; color:var(--color-text-muted); background:var(--color-cream-mid); padding:4px 10px; border-radius:12px; }

.boat-popup__desc { font-size:14px; color:var(--color-text-muted); line-height:1.70; }

.boat-popup__highlights { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.boat-popup__highlights li { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--color-dark); line-height:1.45; }
.boat-popup__highlights li::before { content:"✓"; color:var(--color-teal); font-weight:700; flex-shrink:0; margin-top:1px; }

.boat-popup__price-block { padding:14px 16px; background:var(--color-cream); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.boat-popup__price { font-size:13px; color:var(--color-dark); font-weight:600; }
.boat-popup__price span { font-size:24px; color:var(--color-teal); display:block; line-height:1.1; }
.boat-popup__price-note { font-size:11px; color:var(--color-text-muted); margin-top:2px; }

.boat-popup__cta .btn { width:100%; text-align:center; display:block; }

/* ── FINAL CTA ─────────────────────────────────────────────── */
#community-final-cta { background:var(--color-dark); padding:var(--space-3xl) var(--side-pad); text-align:center; }
#community-final-cta h2 { color:var(--color-white); font-size:clamp(32px,5vw,56px); margin-bottom:var(--space-md); }
#community-final-cta p { color:rgba(255,255,255,.65); font-size:16px; margin-bottom:var(--space-xl); max-width:480px; margin-left:auto; margin-right:auto; }
#community-final-cta .final-note { display:block; font-size:13px; color:rgba(255,255,255,.40); margin-top:var(--space-lg); }

body.popup-open { overflow:hidden; }