/* ============================================================
   STYLE.CSS
   Estilos generales — Fundación Herediana de Salud Cardiovascular
   ============================================================ */

body {
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  background-color: var(--color-fondo);
}

h1, h2, h3, h4, .titulo {
  font-family: var(--fuente-titulos);
  color: var(--color-primario);
  font-weight: 600;
}

/* --- Header / navbar --- */
.navbar-fundacion {
  background-color: var(--blanco);
  box-shadow: var(--sombra-suave);
}

.navbar-fundacion .navbar-brand img {
  height: 55px;
}

.navbar-fundacion .nav-link {
  color: var(--azul-marino);
  font-weight: 500;
  margin: 0 var(--espacio-xs);
}

.navbar-fundacion .nav-link:hover,
.navbar-fundacion .nav-link.active {
  color: var(--naranja-sol);
}

/* --- Hero (imagen principal) --- */
.hero {
  background: linear-gradient(135deg, var(--azul-marino) 0%, var(--azul-cielo) 100%);
  color: var(--blanco);
  padding: var(--espacio-xl) var(--espacio-sm);
  text-align: center;
}

.hero h1 {
  color: var(--blanco);
  font-size: 2.5rem;
  max-width: 700px;
  margin: 0 auto var(--espacio-md);
}

.btn-cta {
  background-color: var(--naranja-sol);
  color: var(--blanco);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: var(--radio-borde);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-cta:hover {
  background-color: #E0863A;
  color: var(--blanco);
  transform: translateY(-2px);
}

/* --- Secciones --- */
.seccion {
  padding: var(--espacio-lg) var(--espacio-sm);
}

.seccion-alterna {
  background-color: var(--color-fondo-alterno);
}

/* --- Tarjetas "¿Por qué cuidar tu corazón?" --- */
.tarjeta-salud {
  background-color: var(--blanco);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: var(--espacio-md);
  text-align: center;
  height: 100%;
  transition: transform 0.2s ease;
}

.tarjeta-salud:hover {
  transform: translateY(-4px);
}

.tarjeta-salud .icono {
  font-size: 2.5rem;
  color: var(--rojo-corazon);
  margin-bottom: var(--espacio-xs);
}

/* --- Programas --- */
.tarjeta-programa {
  border-left: 4px solid var(--verde-colina);
  background-color: var(--blanco);
  border-radius: var(--radio-borde);
  padding: var(--espacio-sm) var(--espacio-md);
  box-shadow: var(--sombra-suave);
  margin-bottom: var(--espacio-sm);
}

/* --- Aviso de contenido pendiente (placeholder) --- */
.aviso-pendiente {
  background-color: #FFF4E6;
  border-left: 4px solid var(--naranja-sol);
  color: var(--azul-marino);
  padding: var(--espacio-sm);
  border-radius: var(--radio-borde);
  font-size: 0.95rem;
}

/* --- Misión / Visión --- */
.tarjeta-mv {
  background-color: var(--blanco);
  border-top: 4px solid var(--azul-marino);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: var(--espacio-md);
  height: 100%;
}

.autor-invocacion {
  font-family: var(--fuente-titulos);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--verde-colina);
}

.tarjeta-mv.vision {
  border-top-color: var(--verde-colina);
}

/* --- Historia (timeline) --- */
.timeline {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding-left: var(--espacio-md);
  border-left: 3px solid var(--azul-cielo);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--espacio-md);
  padding-left: var(--espacio-sm);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--espacio-md) - 8px);
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--naranja-sol);
  border: 3px solid var(--blanco);
  box-shadow: 0 0 0 2px var(--azul-cielo);
}

.timeline-item .anio {
  font-family: var(--fuente-titulos);
  color: var(--verde-colina);
  font-weight: 700;
}

/* --- Junta Administrativa --- */
.tarjeta-miembro {
  background-color: var(--blanco);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: var(--espacio-sm);
  text-align: center;
  height: 100%;
}

.tarjeta-miembro .foto-placeholder {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: var(--gris-claro);
  border: 3px solid var(--azul-cielo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--espacio-xs);
  font-size: 2.2rem;
  color: var(--gris-medio);
}

.tarjeta-miembro .cargo {
  color: var(--naranja-sol);
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- Noticias --- */
.tarjeta-noticia {
  background-color: var(--blanco);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  height: 100%;
}

.tarjeta-noticia .card-img-top {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.tarjeta-noticia .fecha-noticia {
  color: var(--verde-colina);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* --- Footer --- */
.footer-fundacion {
  background-color: var(--azul-marino);
  color: var(--blanco);
  padding: var(--espacio-md) var(--espacio-sm);
}

.footer-fundacion a {
  color: var(--amarillo-sol);
  text-decoration: none;
}

.footer-fundacion a:hover {
  text-decoration: underline;
}

/* --- Redes sociales --- */
.redes-sociales {
  display: flex;
  justify-content: center;
  gap: var(--espacio-sm);
}

.redes-sociales img {
  width: 32px;
  height: 32px;
  transition: transform 0.2s ease;
}

.redes-sociales a:hover img {
  transform: translateY(-3px);
}

/* Fundadores */
.tarjeta-fundador {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 70px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.tarjeta-fundador p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: #333;
}

/* Efecto al pasar el cursor */
.tarjeta-fundador:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Fundadores fallecidos */
.fundador-fallecido {
  margin-left: 0.25rem;
  font-weight: 600;
  opacity: 0.75;
}