/* ==========================================================================
   PAGE · HOME (front-page.php) · v3.0
   Enqueued conditionally on is_front_page()
   ========================================================================== */


/* ---------- Hero ---------- */
.hero {
	padding: var(--space-16) 0 var(--space-24);
	position: relative;
	overflow: hidden;
}
.hero__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-12);
	align-items: center;
}
.hero__content { max-width: 720px; }
.hero__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-primary-light);
	margin: 0 0 var(--space-6);
}
.hero__title {
	font-family: var(--font-display);
	font-size: var(--fs-hero-display);
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-6);
	max-width: 14ch;
	text-wrap: balance;
}
.hero__title-accent {
	font-family: var(--font-editorial);
	font-weight: 400;
	font-style: italic;
	font-size: 0.5em;
	line-height: 1.2;
	color: var(--color-primary);
	display: block;
	margin-top: var(--space-3);
	letter-spacing: 0;
}
.hero__lead {
	font-size: var(--fs-md);
	color: var(--text-secondary);
	line-height: 1.5;
	max-width: 50ch;
	margin: 0 0 var(--space-8);
}
.hero__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--space-4);
}
.hero__microcopy {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	margin: 0;
}
.hero__visual {
	position: relative;
}
.hero__visual img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
}
.hero__visual-placeholder {
	aspect-ratio: 4/5;
	border-radius: var(--radius-lg);
	background: var(--bg-blush);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: var(--fs-lg);
}

@media (max-width: 1024px) {
	.hero { padding: var(--space-12) 0 var(--space-16); }
	.hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
	.hero__title { font-size: var(--fs-hero-display); max-width: none; }
	.hero__visual { order: -1; max-width: 480px; margin: 0 auto; }
}


/* ---------- Onboarding por intención ---------- */
.intent {
	padding: var(--space-16) 0;
	background: var(--bg-cream);
}
.intent__header {
	max-width: 720px;
	margin: 0 auto var(--space-8);
	text-align: center;
}
.intent__title {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-2xl);
	letter-spacing: 0;
	color: var(--text-primary);
	margin: 0 0 var(--space-3);
}
.intent__sub {
	font-size: var(--fs-md);
	color: var(--text-secondary);
	margin: 0;
}
.intent__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}
.intent-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-6);
	border-radius: var(--radius-md);
	background: #fff;
	border: 1px solid var(--border-default);
	color: var(--text-primary);
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-md);
	line-height: 1.25;
	transition: border-color 220ms ease, transform 280ms ease, box-shadow 280ms ease, background-color 220ms ease;
}
.intent-card:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	color: var(--text-primary);
}
.intent-card__arrow {
	color: var(--color-primary);
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.intent__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.intent__grid { grid-template-columns: 1fr; }
}


/* ---------- Pillars (tres áreas) ---------- */
.pillars { padding: var(--space-24) 0; }
.pillars__intro {
	max-width: 720px;
	margin: 0 auto var(--space-12);
	text-align: center;
}
.pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}
.pillar-card {
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius-lg);
	background: #fff;
	border: 1px solid var(--border-default);
	display: flex;
	flex-direction: column;
	transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.pillar-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-primary-light);
}
.pillar-card--featured {
	background: var(--bg-blush);
	border-color: transparent;
}
.pillar-card__num {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-primary-light);
	margin-bottom: var(--space-4);
}
.pillar-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text-primary);
	margin: 0 0 var(--space-4);
}
.pillar-card__quote {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-md);
	line-height: 1.35;
	color: var(--color-primary);
	border-left: 2px solid var(--color-primary);
	padding-left: var(--space-4);
	margin: 0 0 var(--space-4);
}
.pillar-card__body {
	color: var(--text-secondary);
	flex: 1;
	margin: 0 0 var(--space-6);
}
.pillar-card__link {
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 200ms ease, transform 220ms ease;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pillar-card__link:hover { color: var(--color-primary-dark); transform: translateX(2px); }

@media (max-width: 1024px) {
	.pillars__grid { grid-template-columns: 1fr; }
}


/* ---------- Also-serve grid (también atendemos) ---------- */
.also-serve { padding: var(--space-16) 0; }
.also-serve__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-8);
}
.also-card {
	background: #fff;
	padding: var(--space-6);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
	transition: transform 280ms ease, box-shadow 280ms ease, color 220ms ease;
	border: 1px solid var(--border-default);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.also-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-primary); }
.also-card h3 {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin: 0;
	color: inherit;
}
.also-card p { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; flex: 1; }
.also-card__arrow { display: inline-block; color: var(--color-primary); font-size: 18px; align-self: flex-start; }

@media (max-width: 1024px) { .also-serve__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .also-serve__grid { grid-template-columns: 1fr; } }


/* ---------- About intro ---------- */
.about-intro { padding: var(--space-24) 0; }
.about-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--space-12);
	align-items: center;
}
.about-intro__visual img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
}
.about-intro__placeholder {
	aspect-ratio: 3/4;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-family: var(--font-editorial);
	font-style: italic;
}
.about-intro__content h2 {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-3xl);
	letter-spacing: 0;
	line-height: 1.1;
	margin: var(--space-3) 0 var(--space-6);
}

@media (max-width: 1024px) {
	.about-intro__grid { grid-template-columns: 1fr; }
}


/* ---------- Why us ---------- */
.why-us { padding: var(--space-24) 0; }
.why-us__title { text-align: center; }
.why-us__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	margin-top: var(--space-12);
}
.why-card {
	background: rgba(255,255,255,.55);
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius-md);
}
.why-card__num {
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-4);
}
.why-card h3 {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 var(--space-3);
}
.why-card p {
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	margin: 0;
}

@media (max-width: 1024px) { .why-us__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .why-us__grid { grid-template-columns: 1fr; } }


/* ---------- Testimonials ---------- */
.testimonials { padding: var(--space-24) 0; }
.testimonials__title { text-align: center; }
.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	margin-top: var(--space-12);
}
/* v3.1: el grid se reajusta al nº real de testimonios válidos (manifiesto §11.8). */
.testimonials__grid--1 {
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}
.testimonials__grid--2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.testimonial-card {
	background: #fff;
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin: 0;
}
.testimonial-card blockquote {
	margin: 0 0 var(--space-4);
	font-family: var(--font-editorial);
	font-style: italic;
	color: var(--text-primary);
	font-size: var(--fs-md);
	line-height: 1.5;
	quotes: "“" "”";
}
.testimonial-card blockquote::before { content: open-quote; color: var(--color-primary-light); margin-right: 4px; }
.testimonial-card blockquote::after  { content: close-quote; }
.testimonial-card figcaption {
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	font-weight: 500;
}

@media (max-width: 1024px) { .testimonials__grid { grid-template-columns: 1fr; } }


/* ---------- Home blog cards ---------- */
.home-blog { padding: var(--space-24) 0; }
.home-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}
/* v3.1: el grid se reajusta al nº real de posts válidos (manifiesto §11.8). */
.home-blog__grid--1 {
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}
.home-blog__grid--2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.blog-card {
	background: #fff;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 280ms ease, box-shadow 280ms ease;
	display: flex;
	flex-direction: column;
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.blog-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-cream); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__content { padding: var(--space-6); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card__category {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary-light);
	margin: 0;
	font-weight: 500;
}
.blog-card__title {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: var(--fs-lg);
	line-height: 1.25;
	margin: 0;
}
.blog-card__title a { color: var(--text-primary); }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; }

@media (max-width: 1024px) { .home-blog__grid { grid-template-columns: 1fr; } }


/* ---------- Home contact ---------- */
.home-contact { padding: var(--space-24) 0; }
.home-contact__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-12);
}
.home-contact__form .section-title { margin-top: 0; }
.home-contact__form > p { color: var(--text-secondary); margin-bottom: var(--space-6); }

@media (max-width: 1024px) {
	.home-contact__grid { grid-template-columns: 1fr; }
}