/* ============================================================
   Fundación Piensa Como Perro A.C.
   theme.css — capa de marca SOBRE Bootstrap 5
   (solo identidad visual: colores, tipografía y pequeños detalles)
   ============================================================ */

:root {
	--fp-verde: #47814c;
	--fp-verde-oscuro: #356139;
	--fp-verde-claro: #eaf4eb;
	--fp-azul: #2a4d89;
	--fp-crema: #fbfaf6;

	/* Sobrescribe el color primario de Bootstrap por el verde de marca */
	--bs-primary: #47814c;
	--bs-primary-rgb: 71, 129, 76;
	--bs-link-color: #356139;
	--bs-link-hover-color: #47814c;
	--bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-body-color: #2d2f31;
	--bs-body-bg: #fbfaf6;
}

body {
	font-family: var(--bs-body-font-family);
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4, .navbar-brand-text {
	font-family: "Fredoka", "Poppins", sans-serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ---------- Botones de marca ---------- */
.btn-primary {
	--bs-btn-bg: var(--fp-verde);
	--bs-btn-border-color: var(--fp-verde);
	--bs-btn-hover-bg: var(--fp-verde-oscuro);
	--bs-btn-hover-border-color: var(--fp-verde-oscuro);
	--bs-btn-active-bg: var(--fp-verde-oscuro);
	--bs-btn-active-border-color: var(--fp-verde-oscuro);
}

.btn-outline-primary {
	--bs-btn-color: var(--fp-verde);
	--bs-btn-border-color: var(--fp-verde);
	--bs-btn-hover-bg: var(--fp-verde);
	--bs-btn-hover-border-color: var(--fp-verde);
	--bs-btn-active-bg: var(--fp-verde);
}

.btn-lg {
	border-radius: 999px;
	padding-inline: 2rem;
	font-weight: 600;
}

/* ---------- Utilidades de marca ---------- */
.text-fp-verde { color: var(--fp-verde) !important; }
.bg-fp-verde { background-color: var(--fp-verde) !important; }
.bg-fp-crema { background-color: var(--fp-crema) !important; }

.bg-fp-gradient {
	background: linear-gradient(135deg, var(--fp-verde) 0%, var(--fp-verde-oscuro) 100%);
}

.text-shadow {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ---------- Navbar ---------- */
.navbar {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.92) !important;
}

.navbar .nav-link {
	font-weight: 600;
	color: var(--fp-verde-oscuro);
	border-radius: 999px;
	padding-inline: 1rem !important;
	transition: background-color .2s ease, color .2s ease;
}

.navbar .nav-link:hover {
	background-color: var(--fp-verde-claro);
	color: var(--fp-verde-oscuro);
}

.navbar .nav-link.active {
	background-color: var(--fp-verde);
	color: #fff !important;
}

.navbar-brand img {
	height: 56px;
	width: 56px;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.navbar-brand-text {
	font-size: 1.05rem;
	line-height: 1.1;
	color: var(--fp-verde-oscuro);
}

/* ---------- Hero ---------- */
.hero {
	min-height: clamp(520px, 90vh, 900px);
	background:
		linear-gradient(rgba(18, 33, 23, 0.55), rgba(18, 33, 23, 0.65)),
		url("design/fondohero.jpeg") center/cover no-repeat;
}

.hero-logo {
	height: 200px;
	width: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

/* ---------- Tarjetas y secciones ---------- */
.section-band {
	background: linear-gradient(135deg, var(--fp-verde) 0%, var(--fp-verde-oscuro) 100%);
	color: #fff;
}

.card-hover {
	transition: transform .25s ease, box-shadow .25s ease;
}

.card-hover:hover {
	transform: translateY(-8px);
	box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.15) !important;
}

.numero-circulo {
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-family: "Fredoka", sans-serif;
	font-size: 1.9rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--fp-verde) 0%, var(--fp-verde-oscuro) 100%);
}

.feature-img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	min-height: 320px;
}

.ratio-foto {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.corazon-late {
	font-size: 5.5rem;
	line-height: 1;
	display: inline-block;
	animation: latido 1.6s ease-in-out infinite;
}

@keyframes latido {
	0%, 100% { transform: scale(1); }
	15% { transform: scale(1.15); }
	30% { transform: scale(1); }
}

/* ---------- Footer ---------- */
footer .map-wrap {
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25);
}

footer a {
	color: #cfe3d2;
	text-decoration: none;
}

footer a:hover {
	color: #fff;
}