/**
 * Marketing sections — Hero, Feature cards, Social proof, FAQ, CTA banner,
 * Live counters. Extraído de style.css en MA-M17 (sesión 2026-05-19).
 *
 * Carga condicional desde inc/assets.php — sólo en surfaces que renderizan
 * `template-parts/sections/*` o sus equivalentes via block-patterns:
 *   - is_front_page()                     → hero/showcase/live-stats/faq/cta
 *   - is_page_template('pricing-page.php')→ faq + cta-banner
 *   - is_singular('post')                 → cta-banner (single.php)
 *
 * `.section-header` se queda en style.css porque también lo usan contact-page
 * y home.php (heading del blog) — fuera de este enqueue.
 */

/* =========================================================
   HERO SECTION — fondo blanco, sin gradientes
   ========================================================= */
.hero {
	padding-block: var(--space-section) calc(var(--space-section) * 1.1);
	background: var(--bg-primary);
	text-align: center;
	overflow: hidden;
	position: relative;
}

/* Eyebrow = .pill style, sin tinte indigo */
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bg-pill);
	color: var(--text-primary);
	font-size: var(--text-sm);
	font-weight: 500;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-2xl);
}

.hero__title {
	margin-bottom: var(--space-2xl);
	max-width: 22ch;
	margin-inline: auto;
	font-size: clamp(var(--text-4xl), 5.5vw, var(--text-6xl));
	letter-spacing: -0.02em;
	font-weight: 800;
}
.hero__subtitle {
	font-size: var(--text-xl);
	color: var(--text-secondary);
	max-width: 56ch;
	margin-inline: auto;
	margin-bottom: var(--space-3xl);
	line-height: var(--leading-relaxed);
}

.hero__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
	margin-bottom: var(--space-3xl);
}

.hero__trust {
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

/* =========================================================
   FEATURES SECTION background — fondo blanco
   ========================================================= */
.features-section { background-color: var(--bg-primary); }

/* =========================================================
   FEATURE CARDS — usan el sistema .card adaptado a marketing
   ========================================================= */
.feature-card {
	padding: var(--space-2xl);
	background: var(--bg-card);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.feature-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.feature-card__icon {
	width: 44px;
	height: 44px;
	background: var(--bg-pill);
	border-radius: var(--radius-button);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-lg);
	font-size: 1.5rem;
}

.feature-card__badge {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(45, 91, 255, 0.10);
	color: var(--accent-blue);
	margin-bottom: var(--space-sm);
	text-transform: uppercase;
}

.feature-card__title { font-size: var(--text-xl); margin-bottom: var(--space-sm); font-weight: 700; }
.feature-card__desc  { color: var(--text-secondary); margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* =========================================================
   SOCIAL PROOF / TESTIMONIALS
   ========================================================= */
.social-proof { background-color: var(--bg-card); }

.testimonial-card {
	padding: var(--space-2xl);
	background: var(--bg-primary);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.testimonial-card__stars { color: #F5A623; font-size: var(--text-lg); margin-bottom: var(--space-md); letter-spacing: 2px; }
.testimonial-card__quote { font-size: var(--text-base); line-height: var(--leading-relaxed); margin-bottom: var(--space-lg); color: var(--text-primary); }
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-md); }
.testimonial-card__avatar {
	width: 40px; height: 40px;
	background: var(--bg-pill);
	color: var(--text-primary);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: var(--text-sm);
}
.testimonial-card__name { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); }
.testimonial-card__role { font-size: var(--text-xs); color: var(--text-secondary); }

/* =========================================================
   SECTION HEADER — eyebrow + title + subtitle (compartido por
   showcase, live-stats y faq). Antes vivía en home.css; lo
   subimos a marketing.css para que /precios/ también lo reciba.
   ========================================================= */
.showcase__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--space-3xl);
}
.showcase__eyebrow {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
	color: var(--text-secondary); margin-bottom: var(--space-md);
}
.showcase__eyebrow::before {
	content: ''; width: 3px; height: 12px;
	background: var(--accent-blue); border-radius: 2px;
}
.showcase__title {
	font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
	letter-spacing: -.02em; font-weight: 800;
	margin-bottom: var(--space-md);
}
.showcase__subtitle {
	color: var(--text-secondary);
	font-size: var(--text-lg);
	line-height: 1.5;
}

/* =========================================================
   FAQ SECTION — cards rounded + SVG icon, fuente única
   ========================================================= */
.faq-section {
	padding: var(--space-section) 0;
	background: transparent;
}
.faq-list {
	max-width: 760px;
	margin: 0 auto;
	display: flex; flex-direction: column;
	gap: 8px;
}
.faq-list .faq-item {
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.faq-list .faq-item:hover { border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--divider)); }
.faq-list .faq-item.is-open {
	background: var(--bg-primary);
	border-color: var(--accent-blue);
	box-shadow: var(--shadow-card);
}
.faq-list .faq-question {
	width: 100%;
	background: none; border: none;
	padding: 20px 22px;
	text-align: left;
	font: 600 var(--text-base) / 1.4 var(--font);
	color: var(--text-primary);
	cursor: pointer;
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-md);
	letter-spacing: -.005em;
}
.faq-list .faq-question:hover { color: var(--accent-blue); }
.faq-list .faq-icon {
	display: inline-flex; flex-shrink: 0;
	color: var(--accent-blue);
	transition: transform .25s ease;
}
.faq-list .faq-item.is-open .faq-icon { transform: rotate(45deg); }

.faq-list .faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	padding: 0;
	transition: grid-template-rows .3s ease;
}
.faq-list .faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-list .faq-answer__inner {
	overflow: hidden;
	padding: 0 22px;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.6;
	transition: padding .3s ease;
}
.faq-list .faq-item.is-open .faq-answer__inner { padding: 0 22px 22px; }
.faq-list .faq-answer__inner strong { color: var(--text-primary); font-weight: 600; }
.faq-list .faq-answer__inner em {
	font-style: normal; font-family: var(--mono); font-size: .92em;
	color: var(--text-primary); background: var(--bg-pill);
	padding: 1px 6px; border-radius: 4px;
}

.faq-footnote {
	text-align: center;
	margin-top: var(--space-2xl);
	font-size: var(--text-sm); color: var(--text-secondary);
}
.faq-footnote a { color: var(--accent-blue); font-weight: 600; }
.faq-footnote a:hover { text-decoration: underline; }

/* =========================================================
   CTA BANNER — fondo blanco, separado por borde superior/inferior.
   Sin gradientes, sin colores de marketing genérico.
   ========================================================= */
.cta-banner {
	background: var(--bg-card);
	color: var(--text-primary);
	text-align: center;
	padding-block: var(--space-section);
	border-top: 1px solid var(--divider);
	border-bottom: 1px solid var(--divider);
}

.cta-banner h2 { color: var(--text-primary); margin-bottom: var(--space-md); letter-spacing: -0.02em; font-weight: 800; }
.cta-banner p  { color: var(--text-secondary); font-size: var(--text-lg); margin-bottom: var(--space-3xl); max-width: 56ch; margin-inline: auto; line-height: var(--leading-relaxed); }

/* Anula el fondo blanco hardcodeado de cta-banner.php cuando lo siga
   recibiendo (style="background:#fff..."). El selector estilo `.btn[style]`
   no podemos pisarlo desde CSS — la limpieza vive en el template. Aquí
   sólo nos aseguramos de que el secundario contraste. */
.cta-banner .btn--outline {
	border-color: var(--divider);
	color: var(--text-primary);
}
.cta-banner .btn--outline:hover {
	background-color: var(--bg-primary);
	border-color: var(--text-secondary);
	color: var(--text-primary);
}

/* =========================================================
   LIVE COUNTERS — indicador "● Live" debajo del label
   =========================================================
   Aplicado a los nodos .puente-curiosity-stat (block-pattern de social
   proof + shortcode [puente_curiosity_stat]). JS pbCuriosityStats refresca
   cada 30 s y anima un count-up suave al cambiar el valor. */
.puente-curiosity-stat__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.puente-curiosity-stat__live::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	animation: puente-live-pulse 2s ease-in-out infinite;
}
@keyframes puente-live-pulse {
	0%, 100% { opacity: 1;   transform: scale(1);   }
	50%      { opacity: 0.4; transform: scale(0.85); }
}
/* Pulse del número cuando el JS termina el count-up — coincide con la
   clase .is-pulsing que aplica pbCuriosityStats. */
.puente-curiosity-stat.is-pulsing .puente-curiosity-stat__number {
	animation: puente-live-number-pulse 600ms ease-out;
}
@keyframes puente-live-number-pulse {
	0%   { transform: translateY(0); }
	40%  { transform: translateY(-2px); }
	100% { transform: translateY(0); }
}