/*
 * Publibasics — CSS de marca (frontend)
 * Rojo Pantone 1805c (#ae282e) + Cool Gray 11c (#53565A), fondo blanco,
 * esquinas rectas 3px, verde SOLO para WhatsApp. Namespaced .pb-* para no
 * chocar con el tema activo (plugin theme-agnostic).
 *
 * Tipografía: pila de sistema, deliberadamente SIN fonts.googleapis.com.
 * El baseline de arquitectura de TBM (imagen-agent) marcó como defecto una
 * solicitud de fuentes web sin gate en cada carga de página; aquí se evita
 * desde el inicio. Si se necesita el look exacto de Bitter/Source Sans 3,
 * el siguiente paso es auto-alojar los .woff2 dentro de este plugin.
 */

:root {
	--pb-primary: #ae282e;
	--pb-primary-hover: #8f2126;
	--pb-primary-deep: #701a1e;
	--pb-gray: #53565a;
	--pb-black-80: #333333;
	--pb-black-60: #666666;
	--pb-black-40: #999999;
	--pb-black-20: #cccccc;
	--pb-black-05: #f2f2f2;
	--pb-white: #ffffff;
	--pb-whatsapp: #25923f;
	--pb-whatsapp-hover: #1f7d35;
	--pb-radius: 3px;

	--pb-font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
	--pb-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--pb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--pb-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--pb-container: 1160px;
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

.pb-container {
	max-width: var( --pb-container );
	margin: 0 auto;
	padding: 0 24px;
}

.pb-eyebrow {
	font-family: var( --pb-font-body );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --pb-primary );
	margin: 0 0 12px;
}

.pb-section {
	padding: 64px 0;
}

.pb-section:nth-of-type( even ) {
	background: var( --pb-black-05 );
}

.pb-section__title {
	font-family: var( --pb-font-heading );
	font-size: clamp( 24px, 3vw, 32px );
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var( --pb-black-80 );
	margin: 0 0 32px;
}

/* ------------------------------------------------------------------ */
/* Botones — respuesta en pointer-down, nunca transition: all           */
/* ------------------------------------------------------------------ */

.pb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var( --pb-radius );
	font-family: var( --pb-font-body );
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms var( --pb-ease-out ), border-color 160ms var( --pb-ease-out ), transform 100ms var( --pb-ease-out );
}

.pb-btn--primary {
	background: var( --pb-primary );
	color: var( --pb-white );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.pb-btn--primary:hover {
		background: var( --pb-primary-hover );
	}
}

.pb-btn--primary:active {
	background: var( --pb-primary-deep );
	transform: scale( 0.97 );
}

.pb-btn--ghost {
	background: transparent;
	border-color: var( --pb-black-20 );
	color: var( --pb-black-80 );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.pb-btn--ghost:hover {
		border-color: var( --pb-gray );
	}
}

.pb-btn--ghost:active {
	transform: scale( 0.97 );
}

.pb-btn--lg {
	padding: 16px 32px;
	font-size: 17px;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                  */
/* ------------------------------------------------------------------ */

.pb-hero {
	padding: 72px 0;
	background: var( --pb-white );
}

.pb-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.pb-hero__title {
	font-family: var( --pb-font-heading );
	font-size: clamp( 32px, 5vw, 48px );
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var( --pb-black-80 );
	margin: 0 0 20px;
}

.pb-hero__lede {
	font-family: var( --pb-font-body );
	font-size: 17px;
	line-height: 1.6;
	color: var( --pb-gray );
	margin: 0 0 28px;
	max-width: 46ch;
}

.pb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.pb-hero__art img,
.pb-photo,
.pb-fimg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --pb-radius );
}

/* ------------------------------------------------------------------ */
/* Familia destacada                                                    */
/* ------------------------------------------------------------------ */

.pb-featured__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: center;
}

.pb-featured h2 {
	font-family: var( --pb-font-heading );
	font-size: clamp( 26px, 4vw, 34px );
	color: var( --pb-black-80 );
	margin: 0 0 12px;
}

.pb-featured .pb-lede {
	color: var( --pb-primary );
	font-weight: 600;
	margin: 0 0 12px;
}

.pb-featured p {
	color: var( --pb-gray );
	line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* Familias — grid con entrada escalonada                               */
/* ------------------------------------------------------------------ */

.pb-families__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 28px;
}

.pb-family-card {
	background: var( --pb-white );
	border: 1px solid var( --pb-black-20 );
	border-radius: var( --pb-radius );
	padding: 20px;
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 320ms var( --pb-ease-out ), transform 320ms var( --pb-ease-out ), border-color 160ms ease, box-shadow 160ms ease;
	transition-delay: calc( var( --pb-stagger, 0 ) * 60ms );
}

.pb-family-card.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.pb-family-card:hover {
		border-color: var( --pb-primary );
		box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.06 );
	}
}

.pb-family-card__art {
	margin: 0 0 16px;
	border-radius: var( --pb-radius );
	overflow: hidden;
}

.pb-family-card__title {
	font-family: var( --pb-font-heading );
	font-size: 19px;
	color: var( --pb-black-80 );
	margin: 0 0 6px;
}

.pb-family-card__tagline {
	color: var( --pb-gray );
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 14px;
}

.pb-family-card__link {
	color: var( --pb-primary );
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: color 160ms ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.pb-family-card__link:hover {
		color: var( --pb-primary-hover );
	}
}

/* ------------------------------------------------------------------ */
/* Proceso — 4 pasos                                                    */
/* ------------------------------------------------------------------ */

.pb-process__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 32px;
}

.pb-process__step {
	text-align: left;
}

.pb-process__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var( --pb-radius );
	background: var( --pb-primary );
	color: var( --pb-white );
	font-family: var( --pb-font-heading );
	font-weight: 700;
	margin-bottom: 14px;
}

.pb-process__step h3 {
	font-family: var( --pb-font-heading );
	font-size: 17px;
	color: var( --pb-black-80 );
	margin: 0 0 8px;
}

.pb-process__step p {
	color: var( --pb-gray );
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Personalización                                                      */
/* ------------------------------------------------------------------ */

.pb-personalization__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.pb-check-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.pb-check-list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
	color: var( --pb-black-80 );
	font-size: 15px;
}

.pb-check-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: var( --pb-radius );
	background: var( --pb-primary );
}

/* ------------------------------------------------------------------ */
/* Confianza                                                            */
/* ------------------------------------------------------------------ */

.pb-trust__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 24px;
	text-align: center;
}

.pb-trust__item strong {
	display: block;
	font-family: var( --pb-font-heading );
	font-size: 28px;
	color: var( --pb-primary );
	margin-bottom: 6px;
}

.pb-trust__item span {
	color: var( --pb-gray );
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* CTA final                                                            */
/* ------------------------------------------------------------------ */

.pb-cta {
	background: var( --pb-black-80 );
}

.pb-cta__inner {
	text-align: center;
}

.pb-cta h2 {
	font-family: var( --pb-font-heading );
	font-size: clamp( 26px, 4vw, 34px );
	color: var( --pb-white );
	margin: 0 0 12px;
}

.pb-cta p {
	color: var( --pb-black-20 );
	margin: 0 0 28px;
}

/* ------------------------------------------------------------------ */
/* Botón flotante de WhatsApp — verde SOLO aquí                         */
/* ------------------------------------------------------------------ */

.pb-wa-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var( --pb-whatsapp );
	color: var( --pb-white );
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.2 );
	z-index: 9999;
	transition: background-color 160ms ease, transform 160ms var( --pb-ease-out );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.pb-wa-float:hover {
		background: var( --pb-whatsapp-hover );
	}
}

.pb-wa-float:active {
	transform: scale( 0.94 );
}

.pb-wa-float__icon {
	width: 28px;
	height: 28px;
}

/* ------------------------------------------------------------------ */
/* Reveal en scroll — orquestado por frontend.js vía IntersectionObserver */
/* ------------------------------------------------------------------ */

[data-pb-reveal] {
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity 360ms var( --pb-ease-out ), transform 360ms var( --pb-ease-out );
}

[data-pb-reveal].is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* ------------------------------------------------------------------ */
/* Preferencias del sistema                                             */
/* ------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	[data-pb-reveal],
	.pb-family-card {
		transition-duration: 1ms;
		transform: none;
	}
}

@media ( prefers-contrast: more ) {
	.pb-family-card,
	.pb-btn--ghost {
		border-width: 2px;
		border-color: var( --pb-black-80 );
	}
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media ( max-width: 782px ) {
	.pb-hero__grid,
	.pb-featured__grid,
	.pb-personalization__grid {
		grid-template-columns: 1fr;
	}

	.pb-hero__art {
		order: -1;
	}

	.pb-section {
		padding: 44px 0;
	}
}