/* styles.css - Estilo personalizado para sitio de campaña */

/* Variables de color - ajusta a paleta del candidato */
:root{
  --primary:#0d6efd; /* bootstrap primary por defecto (puedes cambiar por color de campaña) */
  --accent:#f15a24;  /* color de acento */
  --muted:#6c757d;
  --hero-bg: linear-gradient(180deg, rgba(13,110,253,0.85), rgba(13,110,253,0.7));
}

/* Reset visual */
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222;
  background: #fff;
  line-height: 1.6;
}

/* NAV */
.navbar-brand .logo-sm{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:6px;
}

/* HERO */
.hero-section{
  position:relative;
  padding:4.5rem 0;
  color: #fff;
  background-image: url('../assets/hero-bg.jpg'); /* reemplaza por imagen de campaña */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: rgba(2, 30, 74, 0.45); /* overlay oscuro */
  mix-blend-mode: multiply;
}
.hero-section .container{ position: relative; z-index: 2; }
.candidate-photo{
  max-width: 360px;
  border-radius: 12px;
  border: 6px solid rgba(255,255,255,0.08);
}

/* Social small buttons */
.social-btn{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
}

/* Section headings */
h2{
  font-weight:700;
  margin-bottom:1rem;
  color: #0b3b78;
}

/* Cards and vision */
.vision-card{
  background: linear-gradient(180deg, #fff, #f8fbff);
  border-radius: 10px;
  border: 1px solid rgba(13,110,253,0.06);
}

/* Footer */
footer a { text-decoration: none; }

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  background:linear-gradient(180deg,var(--accent), #0fa37a);
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow: 0 6px 18px rgba(15,163,122,0.25);
  z-index: 1050;
  text-decoration:none;
  font-weight:600;
}
.whatsapp-float i{ font-size:1.25rem; }

/* Responsive tweaks */
@media (max-width: 991px){
  .hero-section{ padding:3.2rem 0; }
  .candidate-photo{ max-width:260px; }
}

/* Utility */
.small { font-size: .9rem; color: var(--muted); }
.card { border-radius:12px; }

/* Galería más compacta */
#galeria {
  scroll-margin-top: 80px;
}

#galeria h2 {
  color: #0b3b78;
  font-weight: 700;
}

/* Reducir la altura del carrusel */
#carouselGaleria .carousel-item img {
  height: 320px; /* antes 500px */
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.6s ease-in-out;
}

/* Efecto suave de transición */
#carouselGaleria .carousel-item-next,
#carouselGaleria .carousel-item-prev,
#carouselGaleria .carousel-item.active {
  transition: transform 0.7s ease-in-out;
}

/* Caption más pequeño y limpio */
#carouselGaleria .carousel-caption {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  #carouselGaleria .carousel-item img {
    height: 220px;
  }
  #carouselGaleria .carousel-caption {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
}

/* === HERO con fondo del mapa y efecto parallax === */
#inicio.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

/* Fondo con el mapa */
#inicio .hero-bg {
  position: absolute;
  inset: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/c/c6/Valle_del_Cauca_Topographic_2.png') center center / cover no-repeat;

  will-change: transform;
  z-index: 0;
  transform: translate3d(0,0,0);
  transition: transform 0.2s ease-out;
  filter: brightness(0.9) contrast(0.95);
}

/* Capa azul translúcida */
#inicio .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 100, 0.55);
  z-index: 1;
}

/* Contenido visible */
#inicio .container {
  position: relative;
  z-index: 2;
}

/* Imagenes del candidato */
#inicio .candidate-photo {
  max-width: 280px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: transform 0.4s ease;
}

#inicio .candidate-photo:hover {
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
  #inicio.hero-section {
    min-height: 70vh;
  }
  #inicio .candidate-photo {
    max-width: 200px;
    margin-top: 15px;
  }
}