/** * Variavista Pillars * * Sección reutilizable de "valores / pilares / promesas" con glass cards * sobre gradient de marca, glifos decorativos y ornamentos gold. * Hereda paleta del Customizer del cliente vía CSS variables. * * BEM: * .vv-pillars -> contenedor full-bleed (variant default = 3 cards) * .vv-pillars--duo -> 2 cards centradas (programa / pareja) * .vv-pillars__inner -> wrapper centrado con max-width * .vv-pillars__kicker -> kicker uppercase gold sobre el título * .vv-pillars__title -> h2 principal (em -> gold italic) * .vv-pillars__lede -> párrafo intro centrado * .vv-pillars__grid -> grid de pilares * .vv-pillar -> card glass individual * .vv-pillar__title -> h3 card * .vv-pillar__body -> párrafo card * .vv-pillar__list -> ul con bullets alquímicos * .vv-pillars__cta -> card full-width de cierre (CTA) * .vv-pillars__cta-title * .vv-pillars__cta-body * * Reveal animation se activa cuando tiene la clase `vv-pillars-js` * (inyectada en wp_head antes del primer paint). El editor de WP nunca * tiene esa clase -> cards visibles en edición. * * @package Variavista * @since 3.52.0 */ :root { --vvp-primary: var(--vv-primary, var(--primary, #7A003F)); --vvp-primary-dark: var(--vv-primary-dark, #4a0026); --vvp-primary-light: var(--vv-primary-light, #922E62); --vvp-accent: var(--accent, var(--vv-accent, #C5006B)); --vvp-gold: var(--vv-secondary, var(--secondary, #D2BF53)); --vvp-gold-light: var(--vv-secondary-light, #DACB72); --vvp-gold-soft: color-mix(in srgb, var(--vvp-gold) 60%, white 40%); --vvp-on-dark: rgba(255, 255, 255, 0.92); --vvp-on-dark-muted: rgba(255, 255, 255, 0.72); } /* -------------------------------------------------------------------------- */ /* Container — full-bleed con gradient + textura */ /* -------------------------------------------------------------------------- */ /* * IMPORTANTE: el `background` no debe contener `color-mix()` dentro de * un gradient — algunos navegadores invalidan toda la declaración cuando * encuentran ese patrón y la sección queda con fondo transparente * (texto blanco sobre body blanco -> sección "desaparecida"). Las capas * decorativas con tonos derivados van en pseudo-elementos. */ .vv-pillars { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem); background-color: var(--vvp-primary-dark); background-image: linear-gradient(135deg, var(--vvp-primary-dark) 0%, var(--vvp-primary) 45%, var(--vvp-accent) 100%); color: var(--vvp-on-dark); overflow: hidden; isolation: isolate; } /* Pegar la sección al hero / al footer cuando es el primer/último bloque * de la página. El wrapper de `.entry-content` aplica `py-12 md:py-20` * (3rem en mobile, 5rem en md+); igualamos exactamente con margin negativo * para que el gradient toque el bloque adyacente sin franja blanca. */ .vv-pillars:first-child { margin-top: -5rem; } .vv-pillars:last-child { margin-bottom: -5rem; } /* Cuando la sección es el último bloque y debajo viene un footer * (location billboard, etc.), eliminamos el padding inferior para que * el CTA / la última card pegue contra el borde inferior de la sección * y la siguiente sección (mapa, etc.) no muestre franja de gradient * vacío entre ambos. */ .vv-pillars:last-child { padding-bottom: 0; } @media (max-width: 767.98px) { .vv-pillars:first-child { margin-top: -3rem; } .vv-pillars:last-child { margin-bottom: -3rem; } } /* Glows superiores e inferiores — capa propia para no romper el gradient. */ .vv-pillars::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(210, 191, 83, 0.14) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Textura sutil de puntitos con mask vertical para fade arriba/abajo. */ .vv-pillars::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent); mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent); pointer-events: none; z-index: 0; } .vv-pillars__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; } .vv-pillars__inner > .wp-block-group__inner-container, .vv-pillars__inner:not(:has(> .wp-block-group__inner-container)) { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2.4vw, 1.75rem); } /* -------------------------------------------------------------------------- */ /* Encabezado de la sección */ /* -------------------------------------------------------------------------- */ /* * `!important` necesario en los colores: el theme inyecta un sistema WCAG * inline (`