/* ===== VARIABLES & RESET ===== */
:root {
  --ocean: #006d8f;
  --ocean-light: #00b4d8;
  --sunset: #ff7c38;
  --sunset-warm: #ffb347;
  --sand: #f5efe0;
  --dark: #0d2535;
  --white: #ffffff;
  --gray: #6b7a8d;
  --card-bg: #ffffff;
  --border: rgba(0,109,143,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Montserrat',sans-serif;
  background: var(--sand);
  color: var(--dark);
  overflow-x: hidden;
}

/* ===== SECTION TITLES ===== */
.section-title {
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  color:var(--dark); margin-bottom:8px;
}
.section-sub { color:var(--gray); font-size:0.9rem; margin-bottom:16px; }
.section-header { text-align:center; margin-bottom:20px; }

/* ===== ZONAS ===== */
.zonas-section { padding:40px 24px; background:var(--white); }
.zonas-inner { max-width:1280px; margin:0 auto; }
.zonas-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
}
.zona-chip {
  border:2px solid var(--border); border-radius:16px;
  padding:12px 10px; text-align:center; cursor:pointer;
  transition:all 0.25s; background:white; text-decoration:none; color:var(--dark);
  font-weight:500;
}
.zona-chip:hover, .zona-chip.active {
  border-color:var(--ocean); background:var(--ocean); color:white;
  transform:translateY(-4px); box-shadow: 0 10px 30px rgba(0,109,143,0.2);
}
.zona-chip i { display:block; font-size:1.1rem; margin-bottom:4px; }
.zona-chip span { font-size:0.78rem; }

/* ===== WHY SECTION ===== */
.why-section {
  padding:80px 24px;
  background: linear-gradient(135deg, var(--dark) 0%, #164a6e 100%);
  color:white;
}
.why-inner { max-width:1280px; margin:0 auto; }
.why-section .section-title { color:white; }
.why-section .section-sub { color:rgba(255,255,255,0.65); }
.why-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
}
.why-card {
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
  border-radius:20px; padding:28px 22px; text-align:center;
  transition:all 0.3s; backdrop-filter:blur(4px);
}
.why-card:hover {
  background:rgba(255,255,255,0.12); transform:translateY(-6px);
  border-color:rgba(0,180,216,0.4);
}
.why-icon {
  width:60px; height:60px; border-radius:16px; margin:0 auto 18px;
  background:linear-gradient(135deg, var(--ocean), var(--ocean-light));
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:white;
}
.why-card h3 { font-family:'Montserrat',sans-serif; font-size:1.1rem; margin-bottom:8px; }
.why-card p { font-size:0.85rem; color:rgba(255,255,255,0.7); line-height:1.6; }

/* ===== WHATSAPP FLOAT ===== */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:2000;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.wa-float-btn {
  width:62px; height:62px; border-radius:50%;
  background:#25d366; color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; text-decoration:none;
  box-shadow: 0 8px 25px rgba(37,211,102,0.5);
  transition:all 0.3s; animation:pulse 2.5s infinite;
}
@keyframes pulse {
  0%,100%{box-shadow: 0 8px 25px rgba(37,211,102,0.5)}
  50%{box-shadow: 0 8px 40px rgba(37,211,102,0.8)}
}
.wa-float-btn:hover { transform:scale(1.12); animation:none; }
.wa-tooltip {
  background:var(--dark); color:white; padding:7px 14px;
  border-radius:10px; font-size:0.8rem; font-weight:500;
  white-space:nowrap; opacity:0; transform:translateX(10px);
  transition:all 0.25s; pointer-events:none;
}
.wa-float:hover .wa-tooltip { opacity:1; transform:translateX(0); }

/* ===== LOADING ===== */
.loading-spinner {
  text-align:center; padding:60px;
  color:var(--gray); font-size:0.95rem;
}
.spinner {
  width:40px; height:40px; border:3px solid var(--border);
  border-top-color:var(--ocean); border-radius:50%;
  animation:spin 0.8s linear infinite; margin:0 auto 14px;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ===== NO RESULTS ===== */
.no-results {
  text-align:center; padding:60px; grid-column:1/-1;
  color:var(--gray);
}
.no-results i { font-size:3rem; margin-bottom:16px; opacity:0.4; display:block; }