/* TOKENS */
:root {
  --va-verde:      #2D6A4F;
  --va-verde-luz:  #52B788;
  --va-verde-bg:   #D8F3DC;
  --va-tierra:     #9C6B3C;
  --va-tierra-luz: #E9C46A;
  --va-crema:      #373737;
  --va-gris-1:     #1A1A1A;
  --va-gris-2:     #444444;
  --va-gris-3:     #888888;
  --va-gris-4:     #D4D0C8;
  --va-font-d:     'Playfair Display', Georgia, serif;
  --va-font-b:     'DM Sans', sans-serif;
  --va-radius:     12px;
  --va-shadow:     0 4px 24px rgba(0,0,0,.08);
  --va-shadow-lg:  0 8px 40px rgba(0,0,0,.13);
  --va-trans:      all .25s cubic-bezier(.4,0,.2,1);
}

/* BASE */
body { font-family: var(--va-font-b); background: var(--va-crema); color: var(--va-gris-1); }

/* SOBRESCRIBIR colores Bootstrap para el proyecto  */
.btn-primary   { background-color: var(--va-verde) !important; border-color: var(--va-verde) !important; border-radius: 999px !important; font-weight: 500 !important; }
.btn-primary:hover { background-color: var(--va-verde-luz) !important; border-color: var(--va-verde-luz) !important; }
.btn-outline-primary { color: var(--va-verde) !important; border-color: var(--va-verde) !important; border-radius: 999px !important; }
.btn-outline-primary:hover { background-color: var(--va-verde) !important; color: #fff !important; }
.btn-warning   { background-color: var(--va-tierra-luz) !important; border-color: var(--va-tierra-luz) !important; border-radius: 999px !important; font-weight: 500 !important; color: var(--va-gris-1) !important; }
.badge-success { background-color: var(--va-verde-bg) !important; color: var(--va-verde) !important; }
.badge-warning { background-color: #FFF3CD !important; color: #7A5200 !important; }
.badge-danger  { background-color: #FDECEA !important; color: #A0230B !important; }

/* Badges de categoria */
.badge-cat-cultural     { background: #EEEDFE; color: #534AB7; }
.badge-cat-musical      { background: #FDECEA; color: #A0230B; }
.badge-cat-deportivo    { background: var(--va-verde-bg); color: var(--va-verde); }
.badge-cat-gastronomico { background: #FFF3CD; color: #7A5200; }
.badge-cat-familiar     { background: #E6F1FB; color: #185FA5; }
.badge-cat-arte         { background: #FBEAF0; color: #993556; }
.badge-cat { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

/*  NAVBAR  */
/* En tu proyecto usas .navbar de Bootstrap  solo ajustamos colores */
.navbar-va {
  background: rgba(250,246,240,.97) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--va-gris-4);
  font-family: var(--va-font-b);
}
.navbar-va .navbar-brand {
  font-family: var(--va-font-d); font-size: 1.4rem; font-weight: 700; color: var(--va-verde) !important;
}
.navbar-va .navbar-brand span { color: var(--va-tierra); }
.navbar-va .nav-link { color: var(--va-gris-2) !important; font-size: .875rem; font-weight: 500; border-bottom: 2px solid transparent; transition: var(--va-trans); padding: .25rem 0 !important; margin: 0 .75rem; }
.navbar-va .nav-link:hover, .navbar-va .nav-link.active { color: var(--va-verde) !important; border-color: var(--va-verde); }

/* Barra de secciones rapidas */
.snav { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; background: #fff; border-bottom: 1px solid var(--va-gris-4); padding: .75rem 1rem; }
.snav::-webkit-scrollbar { display: none; }
.snav .btn { border-radius: 999px; font-size: .8125rem; white-space: nowrap; }

/* HERO  */
/* Bootstrap no tiene hero  componente propio */
.va-hero {
  position: relative; overflow: hidden; min-height: 500px;
  display: flex; align-items: flex-end;
  padding: 3rem 0;
  background: linear-gradient(160deg, #1B4332 0%, #2D6A4F 50%, #52B788 100%);
}
.va-hero-bg { position: absolute; inset: 0; background-image: radial-gradient(ellipse at 70% 30%, rgba(233,196,106,.25) 0%, transparent 60%), radial-gradient(ellipse at 10% 80%, rgba(45,106,79,.8) 0%, transparent 50%); pointer-events: none; }
.va-hero-tag { display: inline-block; background: rgba(255,255,255,.15); color: #fff; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); margin-bottom: 1.25rem; }
.va-hero h1 { font-family: var(--va-font-d); font-size: clamp(2.25rem,6vw,3.75rem); color: #fff; line-height: 1.1; }
.va-hero h1 em { font-style: italic; color: var(--va-tierra-luz); }
.va-hero p   { color: rgba(255,255,255,.8); }

/* BUSCADOR  */
/* Usa .input-group de Bootstrap + ajuste visual */
.va-search-wrap { background: #fff; border-bottom: 1px solid var(--va-gris-4); padding: 1.5rem 0; }
.va-search-wrap .input-group { border: 2px solid var(--va-verde); border-radius: 999px; overflow: hidden; max-width: 640px; }
.va-search-wrap .form-control { border: none; box-shadow: none !important; padding: .7rem 1.25rem; font-size: .9375rem; }
.va-search-wrap .btn { border-radius: 0 !important; padding: .7rem 1.5rem; }
.va-search-tag { display: inline-block; font-size: .75rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--va-gris-4); color: var(--va-gris-2); background: var(--va-crema); cursor: pointer; transition: var(--va-trans); margin: .25rem; }
.va-search-tag:hover { border-color: var(--va-verde); color: var(--va-verde); }

/*  CARDS de categoria  */
/* Usa .card de Bootstrap, ajustamos hover */
.va-cat-card { border: 1.5px solid var(--va-gris-4) !important; border-radius: var(--va-radius) !important; text-align: center; padding: 1.25rem 1rem; cursor: pointer; transition: var(--va-trans); background: #fff; }
.va-cat-card:hover { border-color: var(--va-verde) !important; background: var(--va-verde-bg); transform: translateY(-2px); box-shadow: var(--va-shadow); }
.va-cat-icon { font-size: 1.75rem; margin-bottom: .4rem; }
.va-cat-name { font-size: .8125rem; font-weight: 500; color: var(--va-gris-2); }

/*  CARD DE NEGOCIO  */
/* Extiende .card de Bootstrap */
.va-neg-card { border: 1px solid var(--va-gris-4) !important; border-radius: var(--va-radius) !important; overflow: hidden; transition: var(--va-trans); cursor: pointer; background: var(--va-crema) !important; }
.va-neg-card:hover { box-shadow: var(--va-shadow-lg) !important; transform: translateY(-3px); }
.va-neg-card .card-img-top { height: 180px; object-fit: cover; background: var(--va-verde-bg); }
.va-neg-card .card-cat   { font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--va-verde); margin-bottom: .3rem; }
.va-neg-card .card-title { font-family: var(--va-font-d); font-size: 1.1rem; margin-bottom: .3rem; }
.va-neg-card .card-text  { font-size: .8125rem; color: var(--va-gris-2); }
.va-neg-card .card-tel   { font-size: .8125rem; color: var(--va-verde); font-weight: 500; margin-top: .6rem; }

/*  CARD DE EVENTO (listado) */
.va-ev-card { border: 1px solid var(--va-gris-4) !important; border-radius: var(--va-radius) !important; overflow: hidden; transition: var(--va-trans); cursor: pointer; background: #fff !important; }
.va-ev-card:hover { box-shadow: var(--va-shadow-lg) !important; transform: translateY(-3px); }
.va-ev-card .card-img-top { height: 190px; object-fit: cover; background: linear-gradient(135deg, var(--va-verde-bg), var(--va-tierra-luz)); }
.va-ev-card .card-title { font-family: var(--va-font-d); font-size: 1.05rem; line-height: 1.25; }
.va-ev-card .card-lugar { font-size: .8rem; color: var(--va-gris-3); }
.va-ev-card .card-text  { font-size: .8rem; color: var(--va-gris-2); }

/* Badges de fecha/precio en events */
.badge-fecha  { background: var(--va-verde-bg); color: var(--va-verde); font-size: .72rem; font-weight: 500; padding: .22rem .6rem; border-radius: 6px; }
.badge-gratis { background: #FFF3CD; color: #7A5200; font-size: .72rem; font-weight: 500; padding: .22rem .6rem; border-radius: 6px; }
.badge-pago   { background: #FDECEA; color: #A0230B; font-size: .72rem; font-weight: 500; padding: .22rem .6rem; border-radius: 6px; }

/*  CARD EVENTO DESTACADO (horizontal)  */
.va-ev-dest { border: 2px solid var(--va-tierra-luz) !important; border-radius: var(--va-radius) !important; overflow: hidden; transition: var(--va-trans); cursor: pointer; display: flex; min-height: 155px; background: #fff; }
.va-ev-dest:hover { box-shadow: var(--va-shadow-lg) !important; transform: translateY(-3px); }
.va-ev-dest-img { width: 175px; flex-shrink: 0; object-fit: cover; background: var(--va-verde-bg); }
.va-ev-dest-badge { background: #FFF3CD; color: #7A5200; font-size: .7rem; font-weight: 500; padding: .2rem .6rem; border-radius: 999px; }
@media (max-width: 480px) { .va-ev-dest-img { width: 110px; } }

/*  SECTION HEADERS  */
.va-section-title { font-family: var(--va-font-d); font-size: 1.5rem; }
.va-dest-heading  { font-family: var(--va-font-d); font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.va-dest-heading::before { content: '★'; color: var(--va-tierra-luz); }
.va-cat-heading   { font-family: var(--va-font-d); font-size: 1.1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--va-gris-4); }

/*  FILTROS  */
/* Usa .btn-group de Bootstrap */
.va-filtros-wrap  { background: #fff; border-bottom: 1px solid var(--va-gris-4); }
.va-filtros-label { font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--va-gris-3); padding: .75rem 1rem 0; display: block; }
.va-filtros { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .5rem 1rem; }
.va-filtros::-webkit-scrollbar { display: none; }
.va-fil-btn { padding: .4rem 1rem; border-radius: 999px !important; white-space: nowrap; font-size: .8125rem; font-weight: 500; border: 1.5px solid var(--va-gris-4); background: #fff; color: var(--va-gris-2); cursor: pointer; transition: var(--va-trans); }
.va-fil-btn:hover, .va-fil-btn.active { border-color: var(--va-verde) !important; background: var(--va-verde) !important; color: #fff !important; }
.va-fil-btn[data-cat="Cultural"].active    { background: #534AB7 !important; border-color: #534AB7 !important; }
.va-fil-btn[data-cat="Musical"].active     { background: #C1440E !important; border-color: #C1440E !important; }
.va-fil-btn[data-cat="Gastronomico"].active{ background: #9C6B3C !important; border-color: #9C6B3C !important; }
.va-fil-btn[data-cat="Arte"].active        { background: #993556 !important; border-color: #993556 !important; }
.va-fil-btn[data-cat="Familiar"].active    { background: #185FA5 !important; border-color: #185FA5 !important; }

/*  BANNER ANUNCIATE  */
.va-banner { background: linear-gradient(135deg, var(--va-verde) 0%, #1B4332 100%); border-radius: 16px; }

/*  HERO EVENTO (ficha)  */
.fev-hero { position: relative; height: 420px; overflow: hidden; }
@media (max-width: 576px) { .fev-hero { height: 260px; } }
.fev-hero-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.fev-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.75) 0%, transparent 55%); }
.fev-hero-content { position: absolute; bottom: 2rem; left: 0; right: 0; }
.fev-hero-title { font-family: var(--va-font-d); font-size: clamp(1.75rem,5vw,3rem); color: #fff; line-height: 1.1; }
.fev-badge { font-size: .75rem; font-weight: 500; padding: .28rem .85rem; border-radius: 999px; }
.fev-badge-cat  { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.fev-badge-dest { background: var(--va-tierra-luz); color: var(--va-gris-1); }
.fev-badge-free { background: var(--va-verde-bg); color: var(--va-verde); }
.fev-badge-paid { background: #FDECEA; color: #A0230B; }

/*  MINIGALERIA EVENTO  */
.fev-gal-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 180px 180px; gap: 6px; border-radius: var(--va-radius); overflow: hidden; }
.fev-gal-img  { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: var(--va-trans); background: var(--va-verde-bg); }
.fev-gal-img:hover { filter: brightness(.88); }
.fev-gal-img.main { grid-row: 1 / 3; }
.fev-gal-more { display: flex; gap: 6px; margin-top: 6px; }
.fev-gal-more img { height: 100px; flex: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; transition: var(--va-trans); }
.fev-gal-more img:hover { filter: brightness(.88); }

/*  SIDEBAR CARDS (ficha evento y negocio)  */
/* Extiende .card de Bootstrap */
.va-side-card { border: 1px solid var(--va-gris-4) !important; border-radius: var(--va-radius) !important; }
.va-side-card-title { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--va-gris-3); margin-bottom: .9rem; }
.va-info-row { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--va-gris-4); }
.va-info-row:last-child { border-bottom: none; }
.va-info-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--va-verde-bg); color: var(--va-verde); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.va-info-label { font-size: .7rem; color: var(--va-gris-3); margin-bottom: .1rem; }
.va-info-val   { font-weight: 500; color: var(--va-gris-1); font-size: .875rem; }

/* Precio card */
.va-precio-card { text-align: center; }
.va-precio-label { font-size: .75rem; color: var(--va-gris-3); }
.va-precio-val   { font-family: var(--va-font-d); font-size: 2.25rem; }

/* Botones de contacto full-width */
.btn-call { background: var(--va-verde); color: #fff; border: none; border-radius: 999px !important; padding: .85rem 1.25rem; font-size: 1rem; font-weight: 500; width: 100%; transition: var(--va-trans); }
.btn-call:hover { background: var(--va-verde-luz); }
.btn-wa   { background: #25D366; color: #fff; border: none; border-radius: 999px !important; padding: .85rem 1.25rem; font-size: 1rem; font-weight: 500; width: 100%; transition: var(--va-trans); }
.btn-wa:hover { background: #1ebd5b; }

/* Galeria ficha negocio */
.va-neg-gal { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 200px 200px; gap: 6px; border-radius: var(--va-radius); overflow: hidden; }
.va-neg-gal-img { width: 100%; height: 100%; object-fit: cover; background: var(--va-verde-bg); cursor: zoom-in; transition: var(--va-trans); }
.va-neg-gal-img:hover { filter: brightness(.9); }
.va-neg-gal-img.main { grid-row: 1 / 3; }

/* Tabs ficha negocio  usa .nav-tabs de Bootstrap */
.va-tabs .nav-link { color: var(--va-gris-3); font-weight: 500; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; }
.va-tabs .nav-link.active { color: var(--va-verde) !important; border-color: var(--va-verde) !important; background: none !important; }

/* Horario */
.va-horario-row { display: flex; justify-content: space-between; padding: .5rem .75rem; border-radius: 8px; font-size: .875rem; }
.va-horario-row.hoy { background: var(--va-verde-bg); font-weight: 500; }

/* Mapa placeholder */
.va-mapa { height: 180px; border-radius: 10px; background: linear-gradient(135deg, var(--va-verde-bg), #c8e6c9); border: 2px dashed var(--va-verde-luz); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: var(--va-trans); color: var(--va-verde); font-weight: 500; font-size: .875rem; }
.va-mapa:hover { background: #c8e6c9; }

/* Badge premium negocio */
.badge-premium { background: linear-gradient(135deg, #9C6B3C, #E9C46A); color: #fff; font-size: .75rem; font-weight: 500; padding: .3rem .9rem; border-radius: 999px; vertical-align: middle; }

/* Compartir */
.va-share-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem; border-radius: 8px !important; font-size: .8rem; font-weight: 500; border: 1.5px solid var(--va-gris-4) !important; color: var(--va-gris-2) !important; background: none !important; transition: var(--va-trans); }
.va-share-btn:hover { border-color: var(--va-verde) !important; color: var(--va-verde) !important; }

/*  MINI STRIP EVENTOS (home)  */
.va-ev-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.va-ev-mini { flex: 0 0 200px; border: 1px solid var(--va-gris-4); border-radius: var(--va-radius); overflow: hidden; cursor: pointer; transition: var(--va-trans); background: #fff; }
.va-ev-mini:hover { box-shadow: var(--va-shadow); transform: translateY(-2px); }
.va-ev-mini img { width: 100%; height: 130px; object-fit: cover; background: var(--va-verde-bg); }
.va-ev-mini-fecha { font-size: .7rem; font-weight: 500; color: var(--va-tierra); text-transform: uppercase; letter-spacing: .06em; }
.va-ev-mini-name  { font-size: .875rem; font-weight: 500; line-height: 1.3; }

/*  MODAL GALERIA  */
/* Usa .modal de Bootstrap + estilos propios para el lightbox */
#modalGaleria .modal-dialog { max-width: 860px; }
#modalGaleria .modal-content { background: rgba(10,10,10,.95) !important; border: none !important; }
#modalGaleria .modal-header { border: none !important; }
#modalGaleria .close { color: #fff; opacity: .7; font-size: 1.5rem; }
.gal-img-principal { width: 100%; max-height: 65vh; object-fit: contain; border-radius: 10px; transition: opacity .2s; }
.gal-img-principal.fade-img { opacity: 0; }
.gal-nav { background: rgba(255,255,255,.12); color: #fff; border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s; flex-shrink: 0; }
.gal-nav:hover { background: rgba(255,255,255,.25); }
.gal-contador { color: rgba(255,255,255,.6); font-size: .8125rem; }
.gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: .5rem 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.gal-thumb { flex: 0 0 72px; height: 52px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .5; border: 2px solid transparent; transition: opacity .2s, border-color .2s; }
.gal-thumb.active { opacity: 1; border-color: var(--va-verde-luz); }
.gal-thumb:hover { opacity: .85; }

/*  FOOTER  */
/* Usa .bg-dark de Bootstrap + ajustes */
footer .footer-logo { font-family: var(--va-font-d); font-size: 1.5rem; }
footer .footer-logo span { color: var(--va-tierra-luz); }
footer .urgente-item { background: rgba(255,255,255,.08); border-radius: 8px; padding: .4rem .75rem; font-size: .75rem; color: rgba(255,255,255,.8); }
footer .urgente-item strong { color: #fff; display: block; font-size: .8125rem; }
footer .social-btn { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-right: .5rem; transition: var(--va-trans); }
footer .social-btn:hover { background: var(--va-verde); }
footer a { color: rgba(255,255,255,.7); }
footer a:hover { color: var(--va-verde-luz); text-decoration: none; }

/*  VISTAS (SPA simulada)  */
.va-view { display: none; }
.va-view.visible { display: block; }

/*  BREADCRUMB */
/* Usa .breadcrumb de Bootstrap solo ajuste visual */
.va-breadcrumb { background: #fff; border-bottom: 1px solid var(--va-gris-4); border-radius: 0 !important; padding: .75rem 1rem; margin-bottom: 0 !important; font-size: .8125rem; }
.va-breadcrumb .breadcrumb-item a { color: var(--va-verde); }
.va-breadcrumb .breadcrumb-item.active { color: var(--va-gris-3); }