/* Estilos trasladados desde el <style> interno */
body {
	/* ajustado: quitar padding global para que el header ocupe todo el ancho */
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	/* color café de fondo */
	background: #6b3e26; /* ajuste si quieres otra tonalidad */
	color: #fff; /* texto fuera de los contenedores será claro */
}

/* contenedor central para contenido de páginas */
.container {
	max-width: 900px;
	margin: 1.5rem auto 2rem; /* levanta ligeramente el main sobre el banner */
	background: #ccac83;
	color: #222; /* texto dentro del contenedor */
	padding: 1.5rem;
	border-radius:8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Container más ancho solo para index */
body.index .container {
	max-width: 1500px;
}

/* header / banner */
.banner-header {
	position: relative;
	/* altura aumentada */
	height: 420px;
	background-image: url('img/banner.png'); /* reemplaza por tu imagen */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.25));
}

/* Contenido encima del banner */
.banner-content {
	position: relative;
	z-index: 2;
	padding: 0 1rem;
}

.banner-content h1 {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	letter-spacing: 0.5px;
}

.banner-content .subtitle {
	margin-top: 0.4rem;
	font-size: 1rem;
	opacity: 0.95;
}

/* navegación principal: ahora está debajo del banner (no absoluta) */
.main-nav {
	position: relative;
	width: 100%;
	background: black;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	display: flex;
	justify-content: center;
	z-index: 3;
	padding: 8px 0;
}
.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
}
/* Letras del menú en blanco */
.main-nav a {
	color: #ffffff;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	background: transparent;
}
/* Hover mantiene contraste sobre fondo negro */
.main-nav a:hover, .main-nav a:focus {
	background: rgba(255,255,255,0.08);
	outline: none;
}
/* Caja gris que rodea el enlace de la página actual */
.main-nav a.active {
	background: #d9d9d9; /* caja gris */
	color: #222222;      /* texto oscuro dentro de la caja */
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* cards de secciones en la landing */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-top: 0.5rem;
}
.card {
	padding: 1rem;
	border-radius: 8px;
	background: #f5e6d3;
	box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.card h3 { margin: 0 0 0.5rem 0; font-size: 1.05rem; }
.card a { color: #2b2b2b; text-decoration: none; }
.card a:hover { text-decoration: underline; }
/* imágenes en tarjetas de la landing */
.card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 0.6rem;
}

/* intro, callout y footer */
.intro { margin-bottom: 1rem; background: #f5e6d3; padding: 1rem; border-radius: 8px; }

/* grid de 2 columnas para las secciones callout */
.callout { background:#f5e6d3; padding:0.8rem; border-left:4px solid #613e28; border-radius:6px; margin: 0; }

main.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

main.container > .intro,
main.container > .cards {
	grid-column: 1 / -1;
}

/* section de color crema (por defecto) */
section {
	background: #f5e6d3;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
}

/* Para páginas específicas: hacer que el área blanca ocupe todo el fondo crema */
body.fullwhite section {
	background: #ffffff;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	grid-column: 1 / -1;
	color: #222;
}
	
/* Para la página de blog que también use fullwhite: eliminar padding del contenedor
   y hacer que el section blanco ocupe todo el área crema (sin dejar huecos). */
body.blog.fullwhite .container {
	/* dejar un pequeño marco crema alrededor del área blanca */
	padding: 1rem;
}

body.blog.fullwhite section {
	grid-column: 1 / -1;
	background: #f5e6d3;
	color: #222;
	padding: 1.5rem;
	margin: 0;
	border-radius: 6px; /* ligeramente menor para que se note el marco crema */
}

.site-footer {
	text-align:center;
	margin: 1.5rem auto;
	font-size:0.95rem;
	color:#fff;
	/* si el footer está fuera del contenedor, hacerlo legible sobre el fondo café */
	background: transparent;
	padding: 1rem 0;
}

/* estilos para los enlaces del footer */
.footer-links { margin-bottom: 0.5rem; }
.footer-links a { color: #fff; text-decoration: none; margin: 0 0.35rem; }
.footer-links a:hover, .footer-links a:focus { text-decoration: underline; }

.site-footer a { color: inherit; }

/* imágenes de contenido (hero dentro del artículo) */
.content-img {
	max-width: 600px;
	max-height: 700px;
	object-fit: cover;
	border-radius: 8px;
	margin: 0 auto 1rem;
	display: block;
}

/* Ajustes móviles */
@media (max-width: 600px) {
	.banner-header { height: 300px; }
	.banner-content h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
	/* .main-nav ya no usa top, ajustar paddings */
	.main-nav { padding: 6px 0; }
	.main-nav ul { gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
	.container { margin: 1rem 12px; padding: 1rem; }
}