/* =========================================================
   ABOUT — Sobre el Herbario
   =========================================================

   Sección de presentación: texto a la izquierda, imagen a la derecha.
   Fondo ligeramente más oscuro (cream-deep).
   En móvil: imagen arriba, texto abajo (order invertido).

   Estructura:
   section.about-section
     .about-inner           ← Grid 2 columnas
       .about-text          ← Texto
       .about-image         ← Imagen en marco
   ========================================================= */

.about-section {
	padding: 5rem var(--frame-margin);
	background: var(--color-cream-deep);
}

/* Grid de 2 columnas */
.about-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.about-text {
	padding-right: 1rem;
}

/* Párrafos */
.about-body p {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--color-ink);
	margin: 0 0 1rem;
}

.about-body p:last-child {
	margin-bottom: 0;
}

/* Imagen centrada */
.about-image {
	display: flex;
	justify-content: center;
}

.about-image-frame {
	position: relative;
	border: var(--frame-border);
	padding: 1rem;
	max-width: 450px;
	background: var(--color-cream);
}

.about-image-frame img {
	width: 100%;
	height: auto;
	display: block;
}

/* Responsive: 1 columna en móvil */
@media (max-width: 768px) {
	.about-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.about-text {
		padding-right: 0;
		order: 2;
	}

	.about-image {
		order: 1;
	}
}