/* ═══════════════════════════════════════════════════
   ACTIVOSUR PROPIEDADES — global.css
   Incluir en TODAS las páginas del sitio.
   <link rel="stylesheet" href="/assets/css/global.css">
═══════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────── */
:root {
  --gold:      #f1c142;
  --gold-lt:   #f7d878;
  --gold-pale: #fffbea;
  --navy:      #1d475f;
  --navy-dk:   #123f57;
  --navy-lt:   #2a607f;
  --silver:    #c0c0c0;
  --silver-lt: #e8e8e8;
  --white:     #FFFFFF;
  --off-white: #F5F7F9;
  --dark:      #0e2030;
  --text:      #243040;
  --text-muted:#607080;
  --border:    #DDE6EE;
  --shadow-sm: 0 2px 8px rgba(18,63,87,.10);
  --shadow-md: 0 8px 28px rgba(18,63,87,.16);
  --shadow-lg: 0 20px 60px rgba(18,63,87,.22);
  --radius:    14px;
  --radius-sm: 8px;
  --font-main: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --transition: all .25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ───────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { scroll-behavior:smooth }
body  { font-family:var(--font-body); color:var(--text); background:var(--off-white); line-height:1.6; -webkit-font-smoothing:antialiased }
a     { text-decoration:none }
img   { max-width:100%; display:block }
ul    { list-style:none }

/* ── Layout ─────────────────────────────────────── */
.container   { max-width:1260px; margin:0 auto; padding:0 24px }
.section     { padding:72px 0 }
.section-sm  { padding:40px 0 }

/* ── Tipografía ─────────────────────────────────── */
h1,h2,h3,h4  { font-family:var(--font-main); line-height:1.2; color:var(--dark) }
.section-title       { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; margin-bottom:8px }
.section-title span  { color:var(--gold) }
.section-sub         { color:var(--text-muted); font-size:1.05rem; margin-bottom:40px }

/* ── Botones ────────────────────────────────────── */
.btn            { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border-radius:50px; font-family:var(--font-main); font-weight:600; font-size:.9rem; cursor:pointer; border:none; text-decoration:none; transition:var(--transition); letter-spacing:.02em }
.btn-primary    { background:var(--gold); color:var(--dark) }
.btn-primary:hover  { background:var(--gold-lt); transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,160,32,.40) }
.btn-navy       { background:var(--navy); color:var(--white) }
.btn-navy:hover { background:var(--navy-lt); transform:translateY(-2px); box-shadow:0 8px 24px rgba(29,71,95,.40) }
.btn-outline    { background:transparent; color:var(--navy); border:2px solid var(--navy) }
.btn-outline:hover { background:var(--navy); color:#fff }
.btn-outline-navy { background:transparent; color:var(--navy); border:2px solid var(--navy) }
.btn-outline-navy:hover { background:var(--navy); color:#fff }
.btn-sm         { padding:8px 18px; font-size:.82rem }
.btn-whatsapp   { background:#25D366; color:#fff }
.btn-whatsapp:hover { background:#1ebe5a; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.40) }

/* ── Badges ─────────────────────────────────────── */
.badge           { display:inline-block; padding:4px 12px; border-radius:50px; font-family:var(--font-main); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em }
.badge-venta     { background:var(--navy); color:#fff }
.badge-arriendo  { background:var(--gold); color:var(--dark) }
.badge-destacada { background:linear-gradient(135deg,var(--gold),#f0d060); color:var(--dark) }
.badge-tipo      { background:var(--off-white); color:var(--navy); border:1px solid var(--border) }

/* ══════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════ */
.navbar              { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); border-bottom:2px solid var(--border); box-shadow:var(--shadow-sm) }
.navbar-inner        { display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px }
.navbar-logo         { display:flex; align-items:center; text-decoration:none; flex-shrink:0 }
.navbar-logo img     { height:52px; width:auto; display:block; object-fit:contain }
.navbar-nav          { display:flex; align-items:center; gap:2px; list-style:none; flex:1; justify-content:center }
.navbar-nav a        { font-family:var(--font-main); font-size:.82rem; font-weight:600; color:var(--text); text-decoration:none; padding:7px 12px; border-radius:8px; transition:var(--transition); white-space:nowrap }
.navbar-nav a:hover,
.navbar-nav a.active { color:var(--navy); background:rgba(29,71,95,.09) }
.navbar-nav a.active { font-weight:700 }
.navbar-cta          { display:flex; align-items:center; gap:8px; flex-shrink:0 }

/* Hamburger */
.hamburger         { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; border:none; background:none; z-index:10 }
.hamburger span    { width:24px; height:2.5px; background:var(--dark); border-radius:3px; transition:var(--transition); display:block }
.hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg) }

/* Mobile menu */
.mobile-menu       { display:none; position:absolute; top:76px; left:0; right:0; background:#fff; border-top:3px solid var(--gold); border-bottom:1px solid var(--border); padding:12px 20px 20px; flex-direction:column; gap:2px; box-shadow:var(--shadow-md) }
.mobile-menu a     { display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:9px; color:var(--text); font-family:var(--font-main); font-weight:600; font-size:.9rem; text-decoration:none; transition:var(--transition) }
.mobile-menu a:hover { background:var(--off-white); color:var(--navy) }
.mobile-menu .m-sep  { height:1px; background:var(--border); margin:8px 0 }
.mobile-menu .m-wa   { background:var(--gold); color:var(--dark); justify-content:center; margin-top:8px; border-radius:50px; padding:12px }

@media(max-width:960px) {
  .navbar-nav, .navbar-cta { display:none }
  .hamburger                { display:flex }
  .navbar-inner             { height:68px }
  .mobile-menu              { top:68px }
}

/* ══════════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════════ */
.breadcrumb        { padding:14px 0; background:#fff; border-bottom:1px solid var(--border) }
.breadcrumb-inner  { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-muted); flex-wrap:wrap }
.breadcrumb-inner a         { color:var(--text-muted); transition:var(--transition) }
.breadcrumb-inner a:hover   { color:var(--navy) }
.breadcrumb-sep             { color:var(--border) }

/* ══════════════════════════════════════════════════
   CARDS DE PROPIEDAD
══════════════════════════════════════════════════ */
.props-grid          { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px }
.prop-card           { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:var(--transition); display:flex; flex-direction:column }
.prop-card:hover     { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent }
.prop-card-img       { position:relative; height:215px; overflow:hidden; background:linear-gradient(135deg,var(--silver-lt),var(--border)) }
.prop-card-img img   { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.prop-card:hover .prop-card-img img { transform:scale(1.05) }
.prop-card-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--silver-lt) 0%,#c8d8e4 100%) }
.prop-card-img-placeholder i { font-size:3rem; color:var(--silver); opacity:.5 }
.prop-card-badges    { position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap }
.prop-card-star      { position:absolute; top:12px; right:12px; background:rgba(232,160,32,.9); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; backdrop-filter:blur(4px) }
.prop-card-body      { padding:20px 22px; flex:1; display:flex; flex-direction:column; gap:10px }
.prop-card-title     { font-family:var(--font-main); font-size:1rem; font-weight:700; color:var(--dark); text-decoration:none; line-height:1.3; transition:var(--transition) }
.prop-card-title:hover { color:var(--navy) }
.prop-card-location  { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.82rem }
.prop-card-location i { color:var(--gold); font-size:.8rem }
.prop-card-specs     { display:flex; gap:14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.spec                { display:flex; align-items:center; gap:5px; font-size:.8rem; color:var(--text-muted) }
.spec i              { color:var(--navy); font-size:.85rem }
.spec strong         { color:var(--text); font-weight:600 }
.prop-card-footer    { display:flex; align-items:center; justify-content:space-between; margin-top:auto }
.prop-price          { font-family:var(--font-main); font-size:1.25rem; font-weight:800; color:var(--navy) }
.prop-price-sub      { font-size:.72rem; color:var(--text-muted); font-weight:400; display:block }
.prop-card-action    { display:flex; align-items:center; gap:8px; color:var(--gold); font-weight:700; font-family:var(--font-main); font-size:.82rem; text-decoration:none; transition:var(--transition) }
.prop-card-action:hover { gap:12px; color:var(--navy) }
@media(max-width:480px) { .props-grid { grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════
   FILTROS / TABS
══════════════════════════════════════════════════ */
.filter-tabs           { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px }
.filter-tab            { padding:8px 20px; border-radius:50px; font-family:var(--font-main); font-size:.82rem; font-weight:600; cursor:pointer; border:2px solid var(--border); background:#fff; color:var(--text-muted); text-decoration:none; transition:var(--transition) }
.filter-tab:hover      { border-color:var(--navy); color:var(--navy) }
.filter-tab.active     { background:var(--navy); border-color:var(--navy); color:#fff }
.filter-tab-gold.active { background:var(--gold); border-color:var(--gold); color:var(--dark) }

/* ══════════════════════════════════════════════════
   PAGINACIÓN
══════════════════════════════════════════════════ */
.pagination    { display:flex; gap:6px; justify-content:center; margin-top:48px }
.pag-btn       { width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-family:var(--font-main); font-size:.85rem; font-weight:600; text-decoration:none; border:1.5px solid var(--border); color:var(--text-muted); background:#fff; transition:var(--transition) }
.pag-btn:hover { border-color:var(--navy); color:var(--navy) }
.pag-btn.active { background:var(--navy); border-color:var(--navy); color:#fff }

/* ══════════════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════════════ */
.cta-banner         { background:linear-gradient(135deg,var(--navy-dk) 0%,var(--navy) 60%,#1a5f7a 100%); padding:80px 0; position:relative; overflow:hidden }
.cta-banner::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 80% 50%,rgba(232,160,32,.18) 0%,transparent 60%) }
.cta-inner          { display:flex; align-items:center; justify-content:space-between; gap:40px; position:relative; z-index:1 }
.cta-text h2        { font-family:var(--font-main); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:#fff; margin-bottom:12px }
.cta-text h2 span   { color:var(--gold-lt) }
.cta-text p         { color:rgba(255,255,255,.75); font-size:1.05rem; max-width:480px }
.cta-actions        { display:flex; flex-direction:column; gap:12px; flex-shrink:0 }
@media(max-width:768px) { .cta-inner { flex-direction:column; text-align:center } .cta-text p { max-width:100% } .cta-actions { flex-direction:row; flex-wrap:wrap; justify-content:center } }

/* ══════════════════════════════════════════════════
   STATS STRIP
══════════════════════════════════════════════════ */
.stats-strip { background:var(--navy); padding:32px 0; color:#fff }
.stats-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.stat-item   { text-align:center; padding:0 20px; position:relative }
.stat-item+.stat-item::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:50%; width:1px; background:rgba(255,255,255,.15) }
.stat-num    { font-family:var(--font-main); font-size:clamp(2rem,3vw,2.8rem); font-weight:800; color:var(--gold-lt); line-height:1 }
.stat-label  { font-size:.85rem; color:rgba(255,255,255,.7); margin-top:4px }
@media(max-width:600px) { .stats-grid { grid-template-columns:repeat(2,1fr); gap:24px 0 } .stat-item+.stat-item::before { display:none } }

/* ══════════════════════════════════════════════════
   CATEGORÍAS VISUAL
══════════════════════════════════════════════════ */
.cats-grid          { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px }
.cat-card           { background:#fff; border:2px solid var(--border); border-radius:var(--radius); padding:24px 16px; text-align:center; text-decoration:none; transition:var(--transition); display:flex; flex-direction:column; align-items:center; gap:10px }
.cat-card:hover     { border-color:var(--gold); background:var(--gold-pale); transform:translateY(-4px); box-shadow:var(--shadow-md) }
.cat-card i         { font-size:2rem; color:var(--navy); transition:var(--transition) }
.cat-card:hover i   { color:var(--gold) }
.cat-card span      { font-family:var(--font-main); font-size:.82rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.04em }
.cat-card .cat-count { font-size:.75rem; color:var(--text-muted); font-weight:400 }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
footer               { background:var(--dark); color:rgba(255,255,255,.75); padding:60px 0 24px }
.footer-grid         { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px }
.footer-brand img    { height:42px; margin-bottom:16px }
.footer-brand p      { font-size:.875rem; line-height:1.7; color:rgba(255,255,255,.6) }
.footer-col h4       { font-family:var(--font-main); font-size:.9rem; font-weight:700; color:#fff; margin-bottom:16px; text-transform:uppercase; letter-spacing:.06em }
.footer-col ul       { display:flex; flex-direction:column; gap:8px }
.footer-col ul a     { color:rgba(255,255,255,.6); text-decoration:none; font-size:.875rem; transition:var(--transition) }
.footer-col ul a:hover { color:var(--gold-lt) }
.footer-bottom       { border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:rgba(255,255,255,.4) }
.social-links        { display:flex; gap:10px }
.social-link         { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:.9rem; text-decoration:none; transition:var(--transition) }
.social-link:hover   { background:var(--gold); color:var(--dark) }
@media(max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr } }
@media(max-width:540px) { .footer-grid { grid-template-columns:1fr } .footer-bottom { flex-direction:column; gap:12px; text-align:center } }

/* ══════════════════════════════════════════════════
   FLOATING WHATSAPP
══════════════════════════════════════════════════ */
.wa-float        { position:fixed; bottom:28px; right:28px; z-index:999; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem; box-shadow:0 8px 28px rgba(37,211,102,.5); text-decoration:none; transition:var(--transition); animation:waPulse 2.5s infinite }
.wa-float:hover  { transform:scale(1.12); box-shadow:0 12px 36px rgba(37,211,102,.6) }
@keyframes waPulse { 0%,100% { box-shadow:0 8px 28px rgba(37,211,102,.5) } 50% { box-shadow:0 8px 28px rgba(37,211,102,.5),0 0 0 12px rgba(37,211,102,.12) } }

/* ══════════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════════ */
.fade-in         { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease }
.fade-in.visible { opacity:1; transform:translateY(0) }