/**
 * Front page — estilos específicos de la home
 *
 * @package esto-es-wm
 */

.site-main.front-page {
	background-color: var(--color-black);
}

.site-main.front-page > section {
	padding-block: 0;
}

/* Cinta lima entre hero y servicios: sin márgenes ni huecos */
.site-main.front-page .front-page__ticker,
.site-main.front-page .wm-ticker--home {
	display: block;
	margin: 0;
	border: 0;
}

.site-main.front-page .front-page__hero + .wm-ticker--home {
	/* Pega la cinta al borde inferior del video */
	margin-top: 0;
}

/* ─── Secciones oscuras ─── */
.site-main.front-page .front-page__hero,
.site-main.front-page .front-page__services,
.site-main.front-page .front-page__contact {
	background-color: var(--color-black);
	color: var(--color-white);
}

.site-main.front-page .front-page__services,
.site-main.front-page .front-page__contact {
	padding-block: var(--space-2xl);
}

.site-main.front-page .front-page__services .services__header {
	margin: 0 0 var(--services-header-mb, 40px);
}

.site-main.front-page .front-page__services .services__heading {
	margin: 0 0 var(--services-header-gap, 12px);
	color: var(--fp-services-heading-color, var(--color-white));
}

.site-main.front-page .front-page__services .services__intro {
	margin: 0;
	color: var(--fp-services-intro-color, rgb(255 255 255 / 78%));
}

.site-main.front-page .contact-cta__heading {
	color: var(--fp-contact-heading-color, var(--color-white));
}

.site-main.front-page .contact-cta__text {
	color: var(--fp-contact-text-color, rgb(255 255 255 / 78%));
}

/* ─── Servicios (home spacing / section colors; cards use global --servicio-*) ─── */
.site-main.front-page .front-page__services .services__cta .button--accent {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
}

.site-main.front-page .contact-cta__inner {
	background: rgb(255 255 255 / 5%);
	border: 1px solid rgb(255 255 255 / 12%);
}

.site-main.front-page .contact-cta__action .button--primary {
	color: var(--fp-contact-cta-button-text-color, var(--color-white));
	border: 2px solid var(--fp-contact-cta-button-border-color, transparent);
}

/* ─── Secciones claras (base) ─── */
.site-main.front-page .section-light {
	background-color: var(--color-white);
	color: var(--color-black);
	padding-block: var(--space-2xl);
}

.site-main.front-page .section-light .portfolio__heading,
.site-main.front-page .section-light .about__heading {
	margin: 0 0 var(--space-sm);
	color: var(--color-black);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
}

.site-main.front-page .front-page__portfolio .portfolio__heading {
	color: var(--fp-portfolio-heading-color, var(--color-black));
}

.site-main.front-page .front-page__portfolio .portfolio__intro {
	color: var(--fp-portfolio-intro-color, var(--color-gray));
}

.site-main.front-page .front-page__about .about__heading {
	color: var(--fp-about-heading-color, var(--color-black));
}

.site-main.front-page .front-page__about .about__text {
	color: var(--fp-about-text-color, var(--color-gray));
}

/* ─── Portfolio / brand logos ─── */
/* Same .container as services/about/header — do not widen past --container-max. */
.site-main.front-page .front-page__portfolio .portfolio__header {
	max-width: 44rem;
	margin-bottom: var(--space-xl);
}

.site-main.front-page .front-page__portfolio .portfolio__intro {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

.site-main.front-page .front-page__portfolio .portfolio__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
	width: 100%;
	margin: 0 0 var(--space-xl);
	padding: 0;
	list-style: none;
}

.site-main.front-page .front-page__portfolio .portfolio__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	width: auto;
	min-width: 8.5rem;
	max-width: 12.5rem;
	min-height: clamp(4.5rem, 9vw, 6.5rem);
	padding: 0.35rem 0.25rem;
	background: transparent;
	border: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-main.front-page .front-page__portfolio .portfolio__logo:hover {
	transform: translateY(-3px);
}

.site-main.front-page .front-page__portfolio .portfolio__logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.site-main.front-page .front-page__portfolio .portfolio__logo-image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: clamp(3.5rem, 7vw, 5.75rem);
	object-fit: contain;
	object-position: center;
	filter: grayscale(100%);
	opacity: 0.88;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-main.front-page .front-page__portfolio .portfolio__logo:hover .portfolio__logo-image {
	filter: grayscale(100%);
	opacity: 1;
	transform: scale(1.03);
}

.site-main.front-page .front-page__portfolio .portfolio__logo-name {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.site-main.front-page .front-page__portfolio .portfolio__logo:hover .portfolio__logo-name {
	color: var(--color-purple);
}

.site-main.front-page .front-page__portfolio .portfolio__empty {
	margin: 0 0 var(--space-lg);
	padding: var(--space-xl);
	border: 1px dashed var(--color-border-light);
	border-radius: var(--radius-lg);
	color: var(--color-gray);
	font-size: var(--font-size-base);
	text-align: center;
}

.site-main.front-page .front-page__portfolio .portfolio__cta {
	margin-top: var(--space-md);
	text-align: left;
}

/* CTA: same visual language as hero “Potenciar tu marca”. */
.site-main.front-page .front-page__portfolio .button--hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	border: var(--hero-cta-border-width, 2px) solid var(--hero-cta-border-color, var(--color-purple));
	border-radius: var(--hero-cta-radius, var(--radius-pill));
	background: var(--hero-cta-bg, var(--gradient-2));
	color: var(--hero-cta-text, var(--color-white));
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 -2px 18px rgb(110 36 229 / 28%), 0 4px 14px rgb(110 36 229 / 18%);
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.site-main.front-page .front-page__portfolio .button--hero-cta:hover,
.site-main.front-page .front-page__portfolio .button--hero-cta:focus-visible {
	transform: translateY(-1px);
	opacity: 0.95;
	box-shadow: 0 12px 32px rgb(110 36 229 / 42%);
	color: var(--hero-cta-text, var(--color-white));
	text-decoration: none;
}

.site-main.front-page .front-page__portfolio .button--hero-cta .button__icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
	transition: transform 0.2s ease;
}

.site-main.front-page .front-page__portfolio .button--hero-cta:hover .button__icon {
	transform: translateY(2px);
}

/* ─── About ─── */
.site-main.front-page .front-page__about .about__inner {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}

@media (min-width: 48rem) {
	.site-main.front-page .front-page__about .about__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2xl);
	}
}

.site-main.front-page .front-page__about .about__text {
	color: var(--fp-about-text-color, var(--color-gray));
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

.site-main.front-page .front-page__about .about__text p {
	margin-block: 0 1.25em;
}

.site-main.front-page .front-page__about .about__text p:last-child {
	margin-bottom: 0;
}

.site-main.front-page .front-page__about .about__figure {
	margin: 0;
}

.site-main.front-page .front-page__about .about__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	object-fit: cover;
}

.site-main.front-page .front-page__about .about__image--placeholder {
	aspect-ratio: 4 / 5;
	min-height: 18rem;
	background: linear-gradient(160deg, rgb(110 36 229 / 12%) 0%, rgb(193 255 0 / 10%) 50%, rgb(0 0 0 / 4%) 100%);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
}

@media (max-width: 47.99rem) {
	.site-main.front-page .section-light {
		padding-block: var(--space-xl);
	}

	.site-main.front-page .section-light .portfolio__heading,
	.site-main.front-page .section-light .about__heading {
		font-size: clamp(1.75rem, 6vw, var(--font-size-h2));
	}

	/*
	 * Mobile: textos centrados (misma lógica visual que Contacto).
	 * Headings, intros, párrafos, tarjetas de servicios, CTAs.
	 */
	.site-main.front-page .front-page__services,
	.site-main.front-page .front-page__portfolio,
	.site-main.front-page .front-page__about,
	.site-main.front-page .front-page__contact {
		text-align: center;
	}

	.site-main.front-page .front-page__services .services__header,
	.site-main.front-page .front-page__services .services__cta,
	.site-main.front-page .front-page__portfolio .portfolio__header,
	.site-main.front-page .front-page__portfolio .portfolio__cta,
	.site-main.front-page .front-page__about .about__content {
		text-align: center;
	}

	.site-main.front-page .front-page__portfolio .portfolio__logos {
		justify-content: center;
	}

	.site-main.front-page .front-page__services .servicio-card,
	.site-main.front-page .front-page__services .servicio-card__body,
	.site-main.front-page .front-page__services .servicio-card__title,
	.site-main.front-page .front-page__services .servicio-card__description,
	.site-main.front-page .front-page__services .servicio-card__cta {
		text-align: center;
	}

	.site-main.front-page .front-page__services .servicio-card__cta {
		margin-inline: auto;
	}

	.site-main.front-page .front-page__about .about__text,
	.site-main.front-page .front-page__about .about__text p {
		text-align: center;
	}

	.site-main.front-page .front-page__portfolio .portfolio__cta {
		text-align: center;
	}
}