/**
 * Variavista Blocks — Estilos para los Block Patterns reutilizables.
 *
 * Cargado globalmente desde inc/block-patterns.php.
 * Encapsula los estilos para que NO peleen con WCAG global ni Tailwind del theme.
 *
 * @package Variavista
 * @since 3.40.0
 */

/* -------------------------------------------------------------------------- */
/*  ALIGNFULL BREAKOUT — los wp:group con .alignfull/.alignwide rompen el     */
/*  padding del wrapper .max-w-[1920px].px-6 que envuelve la página.          */
/* -------------------------------------------------------------------------- */
.entry-content .vv-block.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* -------------------------------------------------------------------------- */
/*  TÍTULOS DE INTRO con em en degradado dorado→magenta                        */
/*  Soporta tanto BEM (.vv-intro__title) como legacy (.vv-intro-title).       */
/* -------------------------------------------------------------------------- */
.vv-intro__title em,
.vv-intro-title em,
.vv-section h2 em.vv-em-gradient {
	font-style: italic;
	background: linear-gradient(135deg, #C5A572 0%, #C5006B 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	display: inline-block;
	padding-right: 0.12em;
}

/* En secciones oscuras: degradado oro claro → rosa pálido para mejor contraste */
.vv-section--dark h2 em,
.vv-section-dark h2 em {
	background: linear-gradient(135deg, #E8C589 0%, #E8B4B8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}

/* Pill note */
.vv-pill-note {
	display: inline-block;
	padding: 0.5rem 1rem !important;
	border-radius: 999px;
	background: rgba(122, 0, 63, 0.08);
	color: #7A003F !important;
	margin: 0 auto !important;
}

/* -------------------------------------------------------------------------- */
/*  vv-stats — 3 columnas sobre fondo oscuro (estadísticas)                   */
/* -------------------------------------------------------------------------- */
.vv-stats {
	color: #ffffff;
}
body .vv-stats h3,
body .vv-stats .vv-stat__num {
	color: #E8C589 !important;
	font-variant-numeric: tabular-nums;
}
body .vv-stats p,
body .vv-stats .vv-stat__label {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* -------------------------------------------------------------------------- */
/*  vv-section--dark — sección genérica con fondo oscuro (método, etc.)       */
/* -------------------------------------------------------------------------- */
.vv-section--dark,
.vv-section-dark {
	color: #ffffff;
}
/* Specificity boost (prefijo body + doble clase) para vencer al WCAG hardcoded
   `.bg-white h3 { color: rgb(26,26,26) !important }` que carga inline al final. */
body .vv-section--dark h2,
body .vv-section--dark h3,
body .vv-section-dark h2,
body .vv-section-dark h3,
.vv-section--dark.vv-section--dark h2,
.vv-section--dark.vv-section--dark h3,
.vv-section-dark.vv-section-dark h2,
.vv-section-dark.vv-section-dark h3 {
	color: #ffffff !important;
}
body .vv-section--dark p,
body .vv-section-dark p {
	color: rgba(255, 255, 255, 0.85) !important;
}
body .vv-section--dark .vv-kicker,
body .vv-section-dark .vv-kicker,
body .vv-section--dark .vv-kicker-gold,
body .vv-section-dark .vv-kicker-gold {
	color: #E8C589 !important;
}
body .vv-section--dark .vv-method-pillar h3,
body .vv-section-dark .vv-method-pillar h3 {
	color: #E8C589 !important;
}
body .vv-section--dark .vv-method-pillar p,
body .vv-section-dark .vv-method-pillar p {
	color: rgba(255, 255, 255, 0.88) !important;
}

/* Pillars (método): cards translúcidas con borde dorado */
.vv-method-pillar {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(197, 165, 114, 0.28);
	border-radius: 14px;
	padding: clamp(1.25rem, 2vw, 1.75rem) !important;
	transition: transform 0.3s ease, border-color 0.3s ease;
}
.vv-method-pillar:hover {
	transform: translateY(-4px);
	border-color: rgba(197, 165, 114, 0.5);
}
.vv-method-pillar h3 {
	color: #E8C589 !important;
}
.vv-method-pillar p {
	color: rgba(255, 255, 255, 0.88) !important;
}

/* -------------------------------------------------------------------------- */
/*  vv-section--light — sección clara                                          */
/* -------------------------------------------------------------------------- */
.vv-section--light h2,
.vv-section-light h2 {
	color: #1a0a14 !important;
}
.vv-section--light p,
.vv-section-light p {
	color: #4a3441 !important;
}
.vv-section--light .vv-kicker,
.vv-section-light .vv-kicker {
	color: #7A003F !important;
}

/* Lista de "signos" con barra primaria a la izquierda */
.vv-signs-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 1.75rem auto 0 !important;
	max-width: 720px;
	display: grid;
	gap: 0.625rem;
}
.vv-signs-list li {
	background: rgba(255, 255, 255, 0.7);
	border-left: 3px solid #C5006B;
	padding: 0.875rem 1.125rem;
	border-radius: 0 8px 8px 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #2d1820 !important;
}

/* -------------------------------------------------------------------------- */
/*  vv-fit — Para quién es / no — 2 cards con checkmarks                      */
/* -------------------------------------------------------------------------- */
.vv-fit-card {
	background: #ffffff;
	border-radius: 14px;
	padding: clamp(1.5rem, 2.5vw, 2rem) !important;
	border: 1px solid rgba(122, 0, 63, 0.08);
}
.vv-fit-card--yes { border-top: 4px solid #7A003F; }
.vv-fit-card--no  { border-top: 4px solid #C5A572; }
.vv-fit-card h3 {
	color: #1a0a14 !important;
}
.vv-fit-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	gap: 0.625rem;
}
.vv-fit-list li {
	padding-left: 1.5rem !important;
	position: relative;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #2d1820 !important;
	list-style: none !important;
}
.vv-fit-list--yes li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #7A003F;
	font-weight: 700;
}
.vv-fit-list--no li::before {
	content: "—";
	position: absolute;
	left: 0;
	top: 0;
	color: #C5A572;
	font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/*  vv-email-card — Card oscura de contacto con botón mailto                  */
/* -------------------------------------------------------------------------- */
.vv-email-card .vv-kicker { color: #C5A572 !important; }
.vv-email-card h2 { color: #ffffff !important; }
.vv-email-card p { color: rgba(255, 255, 255, 0.85) !important; }
.vv-email-card .wp-block-button__link {
	background: #7A003F !important;
	color: #ffffff !important;
	border: 2px solid #7A003F !important;
	border-radius: 999px !important;
	padding: 0.875rem 1.75rem !important;
	font-weight: 600 !important;
	transition: background-color 0.25s ease, border-color 0.25s ease !important;
}
.vv-email-card .wp-block-button__link:hover {
	background: #5A002E !important;
	border-color: #5A002E !important;
}
.vv-email-card .wp-block-button__link.is-copied {
	background: #1a0a14 !important;
	border-color: #1a0a14 !important;
	color: #C5A572 !important;
}

/* -------------------------------------------------------------------------- */
/*  vv-social — 4 cards con icono + platform + metric + botón                 */
/* -------------------------------------------------------------------------- */
.vv-social {
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* -------------------------------------------------------------------------- */
/*  vv-team-grid — listado de equipo (Sobre Mí "No camino sola")              */
/* -------------------------------------------------------------------------- */
.vv-team-grid {
	max-width: 1040px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.vv-team-grid > .wp-block-group__inner-container {
	max-width: none !important;
	width: 100% !important;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 2vw, 1.5rem);
}
.vv-team-grid > .wp-block-group__inner-container > .vv-team-member {
	flex: 0 1 calc(33.333% - clamp(1rem, 2vw, 1.5rem) * 2 / 3);
	min-width: 240px;
	max-width: 320px;
}
@media (max-width: 900px) {
	.vv-team-grid > .wp-block-group__inner-container > .vv-team-member {
		flex: 0 1 calc(50% - clamp(1rem, 2vw, 1.5rem) / 2);
	}
}
@media (max-width: 560px) {
	.vv-team-grid > .wp-block-group__inner-container > .vv-team-member {
		flex: 0 1 100%;
		max-width: 380px;
	}
}
.vv-team-member {
	background: #FFF9F3 !important;
	border: 1px solid rgba(122, 0, 63, 0.08);
	border-radius: 16px;
	padding: 1.5rem 1.25rem 1.5rem !important;
	transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease;
	box-shadow: 0 1px 3px rgba(122, 0, 63, 0.04);
}
.vv-team-member:hover {
	transform: translateY(-3px);
	border-color: rgba(122, 0, 63, 0.18);
	box-shadow: 0 8px 24px rgba(122, 0, 63, 0.08);
}
.vv-team-member > .wp-block-group__inner-container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	max-width: none !important;
	width: 100% !important;
}
.vv-team-member:hover {
	transform: translateY(-3px);
	border-color: rgba(122, 0, 63, 0.18);
	box-shadow: 0 8px 24px rgba(122, 0, 63, 0.08);
}
.vv-team-member__avatar {
	width: 56px !important;
	height: 56px !important;
	margin: 0 0 1rem !important;
	background: #7A003F !important;
	color: #C5A572 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	line-height: 1 !important;
	font-family: inherit;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(122, 0, 63, 0.15);
}
.vv-team-member__name {
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 0 0.375rem !important;
	color: #1a0a14 !important;
}
.vv-team-member__role {
	font-size: 0.8125rem !important;
	line-height: 1.45 !important;
	margin: 0 !important;
	color: #5C5662 !important;
}

/* -------------------------------------------------------------------------- */
/*  vv-resources — Cards de vídeos YouTube en Recursos                         */
/* -------------------------------------------------------------------------- */
.vv-resources-grid {
	max-width: 980px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.vv-resources-grid > .wp-block-group__inner-container {
	max-width: none !important;
	width: 100% !important;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.vv-resources-grid > .wp-block-group__inner-container > .vv-resource-card {
	flex: 0 1 calc(33.333% - clamp(1.25rem, 2.5vw, 2rem) * 2 / 3);
	min-width: 260px;
	max-width: 320px;
}
.vv-resources-grid--two > .wp-block-group__inner-container > .vv-resource-card {
	flex: 0 1 calc(50% - clamp(1.25rem, 2.5vw, 2rem) / 2);
	max-width: 460px;
}
@media (max-width: 900px) {
	.vv-resources-grid > .wp-block-group__inner-container > .vv-resource-card {
		flex: 0 1 calc(50% - clamp(1.25rem, 2.5vw, 2rem) / 2);
	}
}
@media (max-width: 560px) {
	.vv-resources-grid > .wp-block-group__inner-container > .vv-resource-card {
		flex: 0 1 100%;
		max-width: 380px;
	}
}
.vv-resource-card {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(122, 0, 63, 0.06), 0 8px 24px rgba(122, 0, 63, 0.04);
	border: 1px solid rgba(122, 0, 63, 0.06);
	padding: 0 !important;
	transition: transform 0.4s cubic-bezier(.2, .8, .2, 1),
	            box-shadow 0.4s cubic-bezier(.2, .8, .2, 1);
}
.vv-resource-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(122, 0, 63, 0.10), 0 20px 48px rgba(122, 0, 63, 0.10);
}
/* Imagen thumbnail con aspect-ratio fija + play overlay */
.vv-resource-card .vv-resource-card__thumb {
	margin: 0 !important;
	position: relative;
	aspect-ratio: 16 / 9;
	background: #1a0a14;
}
.vv-resource-card .vv-resource-card__thumb a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.vv-resource-card .vv-resource-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
}
/* Gradient inferior para legibilidad */
.vv-resource-card .vv-resource-card__thumb a::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%);
	transition: background 0.3s;
	pointer-events: none;
	z-index: 1;
}
.vv-resource-card:hover .vv-resource-card__thumb a::before {
	background: linear-gradient(180deg, rgba(122,0,63,0.15) 0%, rgba(0,0,0,0.55) 100%);
}
/* Play button (▶) centrado */
.vv-resource-card .vv-resource-card__thumb a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A003F'><path d='M8 5v14l11-7z'/></svg>") no-repeat center / 28px 28px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s, background-color 0.3s;
	z-index: 2;
}
.vv-resource-card:hover .vv-resource-card__thumb a::after {
	transform: translate(-50%, -50%) scale(1.08);
}
/* Body con padding */
.vv-resource-card .vv-resource-card__kicker {
	color: #C5A572 !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	padding-top: 1.25rem !important;
}
.vv-resource-card .vv-resource-card__title {
	color: #1a0a14 !important;
	padding: 0 1.5rem 1.5rem !important;
}
.vv-resource-card .vv-resource-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}
.vv-resource-card .vv-resource-card__title a:hover {
	color: #7A003F !important;
}
@media (max-width: 640px) {
	.vv-resources-row.wp-block-columns {
		flex-direction: column !important;
		gap: 1.25rem !important;
	}
	.vv-resources-row .wp-block-column {
		flex-basis: 100% !important;
	}
}
/* Espaciado vertical entre filas de columns (fila 1 y fila 2 quedaban pegadas) */
.vv-social .wp-block-columns + .wp-block-columns {
	margin-top: clamp(1rem, 2vw, 1.5rem) !important;
}
.vv-social-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 1.5rem 1.25rem !important;
	border: 1px solid rgba(122, 0, 63, 0.08);
	transition: transform 0.4s cubic-bezier(.2, .8, .2, 1),
	            box-shadow 0.4s cubic-bezier(.2, .8, .2, 1),
	            border-color 0.3s;
	text-align: center;
}
.vv-social-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(122, 0, 63, 0.10);
	border-color: rgba(122, 0, 63, 0.20);
}
/* Iconos: glyph en color corporativo (#7A003F) sobre círculo crema clarito */
.vv-social-card .vv-social-card__icon,
.vv-social-card .vv-social-icon {
	margin: 0 auto 1rem !important;
	justify-content: center;
}
.vv-social-card .vv-social-card__icon .wp-block-social-link,
.vv-social-card .vv-social-icon .wp-block-social-link {
	background: #FFF9F3 !important;
	width: 64px;
	height: 64px;
	border-radius: 50% !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease, background 0.3s ease;
}
.vv-social-card .vv-social-card__icon .wp-block-social-link a,
.vv-social-card .vv-social-icon .wp-block-social-link a {
	color: #7A003F !important;
	background: transparent !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.vv-social-card .vv-social-card__icon .wp-block-social-link svg,
.vv-social-card .vv-social-icon .wp-block-social-link svg {
	fill: #7A003F !important;
	color: #7A003F !important;
	width: 32px;
	height: 32px;
}
.vv-social-card .vv-social-card__icon .wp-block-social-link:hover,
.vv-social-card .vv-social-icon .wp-block-social-link:hover {
	transform: translateY(-2px);
	background: #fbeee2 !important;
}
.vv-social-card .vv-social-card__platform {
	color: #C5A572 !important;
}
.vv-social-card .vv-social-card__metric {
	color: #1a0a14 !important;
	font-variant-numeric: tabular-nums;
}
.vv-social-card .vv-social-card__desc {
	color: #4a3441 !important;
}
.vv-social-card .wp-block-button__link {
	font-size: 0.875rem !important;
	padding: 0.5rem 1.25rem !important;
}

/* -------------------------------------------------------------------------- */
/*  Vídeo embed con esquinas redondeadas                                       */
/* -------------------------------------------------------------------------- */
.vv-video-rounded {
	border-radius: clamp(12px, 1.5vw, 18px);
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(122, 0, 63, 0.18);
}

/* -------------------------------------------------------------------------- */
/*  Mobile — wp:columns que NO deben colapsar a 1 col en tablet               */
/* -------------------------------------------------------------------------- */
/* Forzar stacking limpio en mobile <640px para social-cards y fit-duo */
@media (max-width: 640px) {
	.vv-social .wp-block-columns,
	.vv-fit .wp-block-columns,
	.vv-method .wp-block-columns,
	.vv-stats .wp-block-columns {
		flex-direction: column !important;
		gap: 1rem !important;
	}
	.vv-social .wp-block-column,
	.vv-fit .wp-block-column,
	.vv-method .wp-block-column,
	.vv-stats .wp-block-column {
		flex-basis: 100% !important;
	}
}