/* ==========================================================================
   Melodiossa — Sección "Nosotros"
   Diseño profesional, dinámico e interactivo. Identidad: crema / café / rosa.
   Animaciones de entrada con AOS (data-aos) + contadores (js/melo-about.js).
   ========================================================================== */

.melo-about {
	--melo-cream: #efe8df;
	--melo-cream-soft: #faf6f1;
	--melo-ink: #4b4342;
	--melo-ink-soft: #6f6563;
	--melo-pink: #ff91a4;
	--melo-pink-dark: #f4718a;
	--melo-white: #fff;
	--melo-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	padding: 100px 0 110px;
	background:
		radial-gradient(60% 55% at 12% 0%, rgba(255, 145, 164, 0.08) 0%, rgba(255, 145, 164, 0) 60%),
		radial-gradient(55% 50% at 92% 100%, rgba(255, 145, 164, 0.10) 0%, rgba(255, 145, 164, 0) 60%),
		var(--melo-cream-soft);
	overflow: hidden;
}

/* Puntos decorativos (lunares) */
.melo-about__dots {
	position: absolute;
	width: 150px;
	height: 150px;
	background-image: radial-gradient(var(--melo-pink) 2.2px, transparent 2.2px);
	background-size: 20px 20px;
	opacity: 0.35;
	pointer-events: none;
}

.melo-about__dots--tl { top: 54px; left: 40px; }
.melo-about__dots--br { bottom: 48px; right: 40px; }

.melo-about .auto-container {
	position: relative;
	z-index: 1;
}

.melo-about__grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	align-items: center;
	gap: 64px;
}

/* ------------------------------------------------------------- Media / foto */
.melo-about__media {
	position: relative;
}

.melo-about__photo {
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 26px 60px rgba(75, 67, 66, 0.22);
	aspect-ratio: 4 / 3.4;
	outline: 8px solid #fff;
	outline-offset: -8px;
}

.melo-about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
	transition: transform 0.8s var(--melo-ease);
}

.melo-about__media:hover .melo-about__photo img {
	transform: scale(1.06);
}

/* Marco punteado detrás de la foto */
.melo-about__frame {
	position: absolute;
	inset: 22px -22px -22px 22px;
	border: 2px dashed rgba(255, 145, 164, 0.7);
	border-radius: 34px;
	z-index: -1;
}

/* Tarjeta flotante con sello */
.melo-about__badge {
	position: absolute;
	left: -26px;
	bottom: 34px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px 16px 16px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 16px 36px rgba(75, 67, 66, 0.2);
}

.melo-about__badge-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--melo-pink), var(--melo-pink-dark));
	color: #fff;
	font-size: 22px;
	flex-shrink: 0;
}

.melo-about__badge-text strong {
	display: block;
	font-family: 'Leckerli One', cursive;
	font-size: 22px;
	color: var(--melo-ink);
	line-height: 1;
}

.melo-about__badge-text span {
	font-family: 'ABeeZee', sans-serif;
	font-size: 13px;
	color: var(--melo-ink-soft);
}

/* ---------------------------------------------------------------- Contenido */
.melo-about__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 7px 18px;
	border-radius: 999px;
	background: rgba(255, 145, 164, 0.14);
	color: var(--melo-pink-dark);
	font-family: 'ABeeZee', sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.melo-about__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--melo-pink);
}

.melo-about__title {
	margin: 0 0 20px;
	font-family: 'Leckerli One', cursive;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.05;
	color: var(--melo-ink);
}

.melo-about__title span { color: var(--melo-pink-dark); }

.melo-about__lead {
	margin: 0 0 18px;
	font-family: 'ABeeZee', sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: var(--melo-ink-soft);
}

.melo-about__lead strong { color: var(--melo-ink); }

/* -------------------------------------------------------- Rejilla de valores */
.melo-about__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 28px 0 32px;
	padding: 0;
	list-style: none;
}

.melo-about__feature {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	background: #fff;
	border-radius: 18px;
	border: 1px solid rgba(75, 67, 66, 0.06);
	box-shadow: 0 8px 22px rgba(75, 67, 66, 0.06);
	transition: transform 0.35s var(--melo-ease), box-shadow 0.35s var(--melo-ease);
}

.melo-about__feature:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 32px rgba(255, 145, 164, 0.22);
}

.melo-about__feature-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(255, 145, 164, 0.14);
	color: var(--melo-pink-dark);
	font-size: 18px;
	flex-shrink: 0;
}

.melo-about__feature h4 {
	margin: 2px 0 4px;
	font-family: 'ABeeZee', sans-serif;
	font-size: 16px;
	color: var(--melo-ink);
}

.melo-about__feature p {
	margin: 0;
	font-family: 'ABeeZee', sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--melo-ink-soft);
}

/* ---------------------------------------------------------- Contadores/stats */
.melo-about__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 34px;
}

.melo-about__stat {
	flex: 1;
	min-width: 120px;
	text-align: center;
	padding: 18px 10px;
	border-radius: 18px;
	background: linear-gradient(160deg, #fff, var(--melo-cream));
	border: 1px solid rgba(255, 145, 164, 0.18);
}

.melo-about__stat-num {
	font-family: 'Leckerli One', cursive;
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1;
	color: var(--melo-pink-dark);
}

.melo-about__stat-num small {
	font-size: 0.6em;
	margin-left: 2px;
}

.melo-about__stat-label {
	display: block;
	margin-top: 6px;
	font-family: 'ABeeZee', sans-serif;
	font-size: 13px;
	color: var(--melo-ink-soft);
}

/* ---------------------------------------------------------------- CTAs */
.melo-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.melo-about__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 28px;
	border-radius: 999px;
	font-family: 'ABeeZee', sans-serif;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.3s var(--melo-ease), box-shadow 0.3s var(--melo-ease), background-color 0.3s ease, color 0.3s ease;
}

.melo-about__btn--primary {
	background: var(--melo-pink);
	color: #fff;
	box-shadow: 0 10px 24px rgba(255, 145, 164, 0.45);
}

.melo-about__btn--primary:hover,
.melo-about__btn--primary:focus-visible {
	background: var(--melo-pink-dark);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(244, 113, 138, 0.55);
}

.melo-about__btn--ghost {
	background: transparent;
	color: var(--melo-ink);
	border: 2px solid rgba(75, 67, 66, 0.18);
}

.melo-about__btn--ghost:hover,
.melo-about__btn--ghost:focus-visible {
	border-color: var(--melo-pink);
	color: var(--melo-pink-dark);
	transform: translateY(-3px);
}

/* ------------------------------------------------------------- Responsive */
@media (max-width: 991px) {
	.melo-about { padding: 72px 0 80px; }
	.melo-about__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.melo-about__media { max-width: 560px; margin: 0 auto; }
	.melo-about__content { text-align: center; }
	.melo-about__eyebrow,
	.melo-about__stats,
	.melo-about__actions { justify-content: center; }
	.melo-about__features { text-align: left; }
	.melo-about__dots { display: none; }
}

@media (max-width: 575px) {
	.melo-about__features { grid-template-columns: 1fr; }
	.melo-about__badge { left: 50%; transform: translateX(-50%); bottom: -24px; }
	.melo-about__frame { inset: 16px -12px -16px 12px; }
	.melo-about__actions { flex-direction: column; }
	.melo-about__btn { width: 100%; justify-content: center; }
	.melo-about__stat { min-width: calc(50% - 7px); flex: 0 0 calc(50% - 7px); }
}

/* --------------------------------------------- Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.melo-about__photo img,
	.melo-about__feature,
	.melo-about__btn { transition: none; }
	.melo-about__media:hover .melo-about__photo img { transform: none; }
}