/* Link cubre toda la card */
.cvi__hit{
  text-decoration:none;
  color: inherit;
}

/* Imagen ya viene diseñada */
.cvi__bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Contenido superpuesto */
.cvi__content{
  z-index: 2;
  height: 370px;
}

/* Tipografía como tu mockup */
.cvi__title{
  color: #8a3b00 !important; /* tono café-naranja similar */
  font-family: "Nunito Sans", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 900 !important;
  font-style: normal;
  max-width: 85%;
}

.cvi__text p{
  font-family: 'Verdana-bold' !important;
}


/* Responsive */
@media (max-width: 768px){
  .cvi__content{ max-width: 100%; padding: 18px; height: auto !important; }
  .cvi__title{ font-size: 20px; }
  .cvi__bg{ min-height: 210px; }
}

/* --- Interacciones de la Card --- */

.cvi {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  outline: 3px solid transparent;
  outline-offset: -3px; /* Forzamos el outline hacia ADENTRO para que el overflow no lo corte */
}

/* ESTADO: HOVER (Mouse) */
.cvi:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.cvi:hover .cvi__bg {
  transform: scale(1.05); /* Efecto de zoom suave en la imagen */
  transition: transform 0.6s ease;
}

/* ESTADO: FOCUS (Navegación por Teclado) */
/* Usamos :focus-within para que el section reaccione cuando el enlace <a> tiene el foco */
.cvi:focus-within {
  outline: 4px solid #4466cc !important; /* Azul Alcaldía */
  outline-offset: 4px; 
  /* Si el overflow-hidden sigue cortando el outline, quita esa clase del section y usa: */
  box-shadow: 0 0 0 5px rgba(68, 102, 204, 0.5); 
}

/* ESTADO: ACTIVE (Momento del clic) */
.cvi:active {
  transform: scale(0.98); /* La card se "hunde" ligeramente al presionar */
  filter: brightness(0.9);
}

/* Estilo para el botón interno cuando la card tiene foco o hover */
.cvi__hit:hover .btn-primary,
.cvi__hit:focus .btn-primary {
  background-color: #1e3a8a !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
}