/* Microtanatocuentos — rediseño institucional (Bootstrap 5) */

:root {
	--maroon: #5c1a24;
	--maroon-dark: #351015;
	--gold: #bfa14a;
	--gold-light: #ddc384;
	--cream: #f7f5ef;
}

body {
	background: var(--cream);
	font-family: 'Source Sans 3', Georgia, 'Times New Roman', serif;
	color: #2b2b2b;
}

h1, h2, h3, .font-serif, .navbar-brand {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

a { color: var(--maroon); }
a:hover { color: var(--gold); }

/* Barra superior institucional */
.topbar {
	background: var(--maroon-dark);
	color: rgba(255,255,255,.75);
	font-size: .78rem;
	letter-spacing: .3px;
}
.topbar a { color: rgba(255,255,255,.75); }
.topbar a:hover { color: var(--gold-light); }

/* Navbar */
.custom-navbar {
	background: var(--maroon) !important;
	border-bottom: 3px solid var(--gold);
}
.custom-navbar .navbar-brand {
	color: var(--gold-light) !important;
	font-weight: 700;
	font-size: 1.35rem;
}
.custom-navbar .navbar-brand img {
	height: 38px;
	margin-right: 10px;
}
.custom-navbar .nav-link {
	color: rgba(255,255,255,.85) !important;
	text-transform: uppercase;
	font-size: .82rem;
	letter-spacing: .6px;
	padding: .6rem 1rem !important;
	border-bottom: 2px solid transparent;
}
.custom-navbar .nav-link:hover {
	color: var(--gold) !important;
}
.custom-navbar .nav-link.active {
	color: var(--gold) !important;
	border-bottom-color: var(--gold);
	font-weight: 600;
}
.custom-navbar .navbar-toggler {
	border-color: rgba(255,255,255,.4);
}
.custom-navbar .navbar-toggler-icon {
	filter: invert(1);
}

/* Hero (portada) */
.hero-section {
	position: relative;
	min-height: 58vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--maroon-dark);
	overflow: hidden;
}
.hero-section .hero-bg {
	position: absolute;
	inset: 0;
	background: url("assets/hero-bg.jpg") center 35% / cover no-repeat;
	opacity: .55;
}
.hero-section .hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(53,16,21,.45) 0%, rgba(53,16,21,.9) 80%, var(--maroon-dark) 100%);
}
.hero-section .hero-content {
	position: relative;
	z-index: 1;
	padding: 3rem 1rem;
}
.kicker {
	display: inline-block;
	color: var(--gold);
	letter-spacing: 3px;
	text-transform: uppercase;
	font-size: .82rem;
	margin-bottom: .75rem;
}
.hero-content h1 {
	color: #fff;
	font-weight: 700;
	font-size: 3rem;
	text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.hero-content .lead {
	color: rgba(255,255,255,.78);
	font-style: italic;
}

/* Mini-hero de páginas interiores */
.page-hero {
	background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%);
	padding: 4rem 1rem 3rem 1rem;
	text-align: center;
	border-bottom: 3px solid var(--gold);
}
.page-hero h1 { color: #fff; font-size: 2.3rem; font-weight: 700; }
.page-hero .lead { color: rgba(255,255,255,.75); font-style: italic; }

/* Botones dorados */
.btn-gold {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--maroon-dark);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .85rem;
	letter-spacing: .5px;
}
.btn-gold:hover, .btn-gold:focus {
	background: var(--gold-light);
	border-color: var(--gold-light);
	color: var(--maroon-dark);
}
.btn-outline-gold {
	border: 1px solid var(--gold);
	color: var(--gold-light);
	text-transform: uppercase;
	font-size: .85rem;
	letter-spacing: .5px;
	background: rgba(255,255,255,.05);
}
.btn-outline-gold:hover {
	background: var(--gold);
	color: var(--maroon-dark);
	border-color: var(--gold);
}

/* Títulos de sección */
.section-title {
	color: var(--maroon-dark);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1rem;
	margin-bottom: 2.5rem;
}
.section-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: var(--gold);
	margin: 14px auto 0 auto;
}

/* Tarjetas de cuentos */
.cuento-card {
	border: none;
	border-top: 3px solid var(--gold);
	box-shadow: 0 4px 18px rgba(53,16,21,.1);
	transition: transform .25s, box-shadow .25s;
}
.cuento-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(53,16,21,.16);
}
.cuento-card .cuento-mark {
	display: block;
	text-align: center;
	color: var(--gold);
	font-family: 'Playfair Display', serif;
	font-size: 1.9rem;
	line-height: 1;
	margin-bottom: .25rem;
}
.cuento-card .card-title {
	text-align: center;
	color: var(--maroon-dark);
	font-weight: 700;
	letter-spacing: .5px;
}
.cuento-card .card-text {
	text-align: justify;
	color: #555;
}

/* Tarjeta genérica institucional */
.institutional-card {
	border: none;
	border-top: 3px solid var(--gold);
	box-shadow: 0 4px 18px rgba(53,16,21,.1);
}

/* Sobre el autor */
.autor-photo {
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(53,16,21,.2);
	max-width: 100%;
}
.autor-text p {
	text-align: justify;
	line-height: 1.75;
	color: #444;
}
.autor-text a {
	font-weight: 600;
	border-bottom: 1px solid var(--gold);
}

/* Audio */
.audio-item {
	border: none;
	border-left: 3px solid var(--gold);
	box-shadow: 0 4px 18px rgba(53,16,21,.08);
	transition: box-shadow .25s;
}
.audio-item:hover {
	box-shadow: 0 8px 22px rgba(53,16,21,.14);
}
.audio-item .note {
	color: var(--gold);
	font-size: 1.4rem;
}
.audio-item b {
	color: var(--maroon-dark);
}
.audio-item audio {
	width: 100%;
	height: 34px;
}

/* Contactos */
.contactos-hero {
	position: relative;
	background: var(--maroon-dark);
	padding: 4rem 1rem;
	overflow: hidden;
}
.contactos-hero .hero-bg {
	position: absolute;
	inset: 0;
	background: url("../assets/cementerio.jpg") center 35% / cover no-repeat;
	opacity: .3;
}
.contactos-hero .hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(53,16,21,.75) 0%, rgba(53,16,21,.95) 100%);
}
.contactos-hero .content-wrap {
	position: relative;
	z-index: 1;
}
.contactos-card {
	background: rgba(255,255,255,.06);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(191,161,74,.4);
	border-radius: 6px;
}
.contactos-card .form-label {
	color: rgba(255,255,255,.7);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.contactos-card .form-control,
.contactos-card .form-select {
	background: rgba(255,255,255,.95);
	border: 1px solid rgba(255,255,255,.15);
}
.contactos-card .form-control:focus,
.contactos-card .form-select:focus {
	box-shadow: 0 0 0 .2rem rgba(191,161,74,.35);
	border-color: var(--gold);
}
.contactos-card .form-check-label {
	color: rgba(255,255,255,.85);
	font-size: .9rem;
}
.foto-credito {
	color: rgba(255,255,255,.55);
	font-style: italic;
	font-size: .85rem;
}

/* Footer institucional */
footer.site-footer {
	background: var(--maroon-dark);
	color: rgba(255,255,255,.7);
	border-top: 3px solid var(--gold);
}
footer.site-footer .footer-brand {
	color: var(--gold-light);
	font-weight: 700;
	font-size: 1.15rem;
}
footer.site-footer h6 {
	color: var(--gold);
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: 1.5px;
	margin-bottom: 1rem;
}
footer.site-footer a {
	color: rgba(255,255,255,.65);
	text-decoration: none;
	font-size: .9rem;
}
footer.site-footer a:hover {
	color: var(--gold-light);
}
footer.site-footer .footer-bottom {
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .8rem;
	color: rgba(255,255,255,.5);
}

@media (max-width: 767px) {
	.hero-content h1 { font-size: 2.1rem; }
	.page-hero h1 { font-size: 1.7rem; }
}