/* Portada pública (portada.php): la ven los visitantes sin sesión y los buscadores. */

.contenido.portada { max-width: 1100px; }

.portada-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2em;
	padding: 2em 0 3em;
}
.portada-hero h1 {
	font-size: 3em;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 .4em;
}
.portada-bajada { font-size: 1.25em; color: #555; margin: 0 0 1.4em; max-width: 34em; }
.portada-botones { display: flex; flex-wrap: wrap; gap: .8em; }
.portada-nota { color: var(--suave); font-size: .9em; margin-top: 1.2em; }
.portada-hero-img { flex: none; width: 320px; height: auto; }

.portada-cifras {
	display: flex;
	justify-content: center;
	gap: 3em;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 2em;
	padding: 1.5em;
	background: #f6f9ec;
	border-radius: 12px;
}
.portada-cifras li { display: flex; flex-direction: column; align-items: center; }
.portada-cifras strong { font-size: 2em; color: var(--verde-fuerte); }
.portada-cifras span { color: var(--suave); }

.portada-seccion { padding: 2.5em 0; border-top: 1px solid var(--gris); }
.portada-seccion h2 { font-weight: 300; font-size: 2em; letter-spacing: -0.02em; text-align: center; margin: 0 0 1.2em; }

.portada-funciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.portada-funciones li { padding: 1.4em; border: 1px solid var(--gris); border-radius: 12px; }
.portada-funciones li > span { font-size: 2em; }
.portada-funciones h3 { margin: .3em 0 .4em; font-size: 1.15em; }
.portada-funciones p { margin: 0; color: #666; }

.portada-pasos { max-width: 640px; margin: 0 auto; padding-left: 1.4em; font-size: 1.1em; }
.portada-pasos li { margin-bottom: .8em; padding-left: .3em; }
.portada-centro { text-align: center; margin-top: 1.8em; }

.portada-faq { max-width: 760px; margin: 0 auto; }
.portada-faq details { border-bottom: 1px solid var(--gris); padding: .9em 0; }
.portada-faq summary { cursor: pointer; font-weight: 600; font-size: 1.05em; }
.portada-faq p { color: #555; margin: .7em 0 .2em; }

@media (max-width: 760px) {
	.portada-hero { flex-direction: column-reverse; text-align: center; padding-top: 1em; }
	.portada-hero h1 { font-size: 2.2em; }
	.portada-bajada { font-size: 1.1em; }
	.portada-botones { justify-content: center; }
	.portada-hero-img { width: 180px; }
	.portada-seccion h2 { font-size: 1.6em; }
}