/* DIF Tepic – estilos base */
/* Paleta inspirada en Tepic.gob.mx y artes del DIF */
:root{
  --borgona:#9A0B37;     /* borgoña Tepic */
  --vino:#6E0F2D;        /* tono profundo para hover */
  --dorado:#E5B85C;      /* acento dorado */
  --crema:#FBF6EE;       /* fondos claros */
  --arena:#F3E3CF;       /* contraste suave */
  --grafito:#2E2E2E;     /* texto */
}

body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
  color:var(--grafito);
  background:#fff
}

.topbar{background:var(--crema); border-bottom:4px solid var(--dorado)}
.topbar .brand-logos img{height:40px}

.navbar{background:var(--borgona)}
.navbar .nav-link{color:#fff}
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover{color:var(--dorado)}

.btn-borgona{background:var(--borgona); color:#fff; border:none}
.btn-borgona:hover{background:var(--vino); color:#fff}
.btn-dorado{background:var(--dorado); color:#4b2c0a; border:none}
.btn-dorado:hover{filter:brightness(0.95)}

.hero{
  background:radial-gradient(70% 120% at 85% 10%, #fff 0%, var(--crema) 50%, var(--arena) 100%);
  position:relative; overflow:hidden
}
.hero:after{
  content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px;
  background:var(--dorado); opacity:.15; border-radius:32px; transform:rotate(25deg)
}

.badge-dif{background:var(--dorado); color:#4b2c0a; font-weight:700}
.section-title{font-weight:800}
.section-sub{color:#6b6b6b}

.card-programa{border:0; box-shadow:0 8px 24px rgba(0,0,0,.06); border-radius:18px}
.card-programa .icon{
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:13px; background:var(--crema); color:var(--borgona)
}
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--crema); color:var(--borgona);
  padding:.35rem .7rem; border-radius:999px; font-size:.88rem; font-weight:700
}

.band{background:linear-gradient(90deg, var(--borgona), #7d0f30); color:#fff}
.band .kpi{border-right:1px solid rgba(255,255,255,.2)}

.news-card{border:0; border-radius:18px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.08)}
.news-card img{object-fit:cover; height:180px}

footer{background:#1e1b1d; color:#d6d6d6}
footer a{color:#f3d487}
.footer-brand img{height:44px}

/* utilidades */
.rounded-2xl{border-radius:20px}
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.08)}

/* Listas de servicios con viñeta borgoña */
.list-servicios { margin-left: 1rem; }
.list-servicios li { margin-bottom: .35rem; }
.list-servicios li::marker { color: var(--borgona); }

/* Barra principal estilo Tepic */
.navbar{ background:#7d0f30 !important; }            /* borgoña */
.navbar .nav-link{ color:#fff !important; }
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{ color:#E5B85C !important; } /* dorado */

.btn-dorado{ background:#E5B85C; color:#4b2c0a; border:none; }
.btn-dorado:hover{ filter:brightness(.95); }

/* Íconos a la derecha tipo chip */
.contact-icons .icon-btn{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:999px;
  border:2px solid rgba(255,255,255,.8);
  color:#fff; margin-left:.5rem; transition:.2s;
}
.contact-icons .icon-btn:hover{
  transform:translateY(-1px); color:#4b2c0a; background:#E5B85C; border-color:#E5B85C;
}

/* ===== Hover effects DIF ===== */
.card-raise{
  transition: transform .28s ease, box-shadow .28s ease, outline-color .28s ease;
  will-change: transform;
  outline: 2px solid transparent;
  outline-offset: 0;
  border-radius: 18px; /* por si la tarjeta no lo trae */
}
.card-raise:hover,
.card-raise:focus-within{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
  outline-color: rgba(229,184,92,.35); /* dorado tenue */
  outline-offset: 2px;
}

/* Zoom solo a la imagen dentro de la tarjeta */
.card-zoom img{
  transition: transform .35s ease;
  transform-origin: center;
}
.card-zoom:hover img,
.card-zoom:focus-within img{
  transform: scale(1.06);
}

/* Sutil resalte del botón dentro de la tarjeta al hover general */
.card-raise:hover .btn,
.card-raise:focus-within .btn{
  filter: brightness(1.03);
}

/* Accesibilidad: respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce){
  .card-raise, .card-zoom img{ transition: none !important; }
}

/* ====== Noticias ====== */
.text-borgona{ color:#7d0f30!important; }
.text-dorado{ color:#E5B85C!important; }

.noticia-card{
  border:none;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  background:#fff;
}

.noticia-card img{
  height:100%;
  object-fit:cover;
}

#buscar{
  max-width:480px;
  border-radius:8px;
  border:1px solid #ccc;
}