*/
#ast-hf-menu-1 a:hover,
#ast-hf-menu-1 a:focus,
#ast-hf-menu-1 a:active,
#ast-hf-menu-1 .menu-item.focus > .menu-link,
#ast-hf-menu-1 .menu-item.focus > a,
.ast-menu-toggle:hover,
.ast-menu-toggle:focus,
.ast-menu-toggle:active {
color: var(--bv-gold) !important;
background-color: transparent !important;
outline-color: var(--bv-gold) !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* SVG de las flechas de submenú */
#ast-hf-menu-1 a:focus svg path,
#ast-hf-menu-1 a:active svg path,
#ast-hf-menu-1 .menu-item.focus svg path,
.ast-menu-toggle:focus svg path,
.ast-menu-toggle:active svg path {
fill: var(--bv-gold) !important;
}
}
/* ============================================================
FOOTER
============================================================ */
/* ── Fondo oscuro en todos los wrappers de Astra (solo footer) ── */
footer,
#colophon,
.site-footer,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-footer-section,
.footer-widget-area,
.site-footer .ast-builder-grid-row-container,
.site-footer .ast-builder-grid-row-container-inner,
.site-footer .ast-builder-footer-grid-columns,
.site-above-footer-inner-wrap,
.site-primary-footer-inner-wrap,
.ast-footer-row-stack {
background-color: var(--bv-black) !important;
}
footer {
padding: 0;
}
footer p {
margin: 0;
}
footer a,
footer p,
.site-footer a,
.site-footer p {
overflow-wrap: break-word;
word-break: break-word;
}
/* ── Texto y links globales del footer ── */
.site-footer a,
.site-footer p,
.site-footer span,
.site-footer li {
color: #ffffff;
text-decoration: none;
}
.site-footer a:hover {
color: var(--bv-gold);
}
/* ── Sección superior (3 columnas) ── */
.site-above-footer-wrap .ast-builder-grid-row {
max-width: 1200px;
margin: 0 auto;
padding: 50px 40px;
gap: 40px;
}
/* ── Barra inferior (copyright) ── */
.site-primary-footer-wrap {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.site-primary-footer-wrap .ast-builder-grid-row {
padding: 20px 40px;
justify-content: center;
}
/* ── Copyright ── */
.ast-footer-copyright,
.ast-footer-copyright p,
.copyright {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
font-family: var(--bv-font-body);
text-align: center;
}
/* ── Títulos de widget (ej: "Contact us" — serif dorado) ── */
.site-footer .widget-title,
.site-footer .widgettitle {
font-family: var(--bv-font-heading);
font-size: 1.375rem;
font-weight: 400;
color: var(--bv-gold);
margin: 0 0 16px;
}
/* ── Etiquetas tipo "Get in contact", "Follow Us" ── */
.bv-footer-label {
font-family: var(--bv-font-body);
font-weight: 600;
font-size: 15px;
color: #ffffff;
display: block;
margin-bottom: 4px;
}
/* ── Widget HTML: texto de párrafos ── */
.site-footer .ast-builder-html-element p {
font-size: 15px;
color: rgba(255, 255, 255, 0.75);
line-height: 1.8;
}
/* ── Botón Back to Top ── */
.bv-back-top {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 12px 22px;
border: 1.5px solid var(--bv-gold);
border-radius: 6px;
background: transparent;
color: #ffffff !important;
font-family: var(--bv-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
opacity 0.2s ease;
}
.bv-back-top:hover {
background-color: transparent;
color: var(--bv-gold) !important;
border-color: var(--bv-gold);
}
.bv-back-top.is-scrolling {
opacity: 0.45;
pointer-events: none;
}
.bv-back-top__circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
position: relative;
}
/* Tallo vertical de la flecha */
.bv-back-top__circle::before {
content: "";
position: absolute;
width: 2px;
height: 10px;
background: var(--bv-gold);
top: 5px;
left: 52%;
transform: translateX(-50%);
}
/* Cabeza del chevron (^) */
.bv-back-top__circle::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-top: 2px solid var(--bv-gold);
border-right: 2px solid var(--bv-gold);
transform: rotate(-45deg);
top: 5px;
left: 50%;
margin-left: -3.5px;
}
.bv-back-top:hover .bv-back-top__circle::before {
background: #ffffff;
}
.bv-back-top:hover .bv-back-top__circle::after {
border-color: #ffffff;
}
/* ── Iconos sociales (círculos con borde blanco) ── */
.bv-social-icons {
display: flex;
gap: 12px;
margin-top: 12px;
flex-wrap: wrap;
}
.bv-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1.5px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
color: #ffffff !important;
text-decoration: none;
font-size: 16px;
transition:
border-color 0.2s ease,
color 0.2s ease;
}
.bv-social-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.bv-social-icon:hover {
border-color: var(--bv-gold);
color: var(--bv-gold) !important;
}
/* ── Menú del footer ── */
.menu-footer,
.site-footer .ast-nav-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.menu-footer li {
list-style: none;
}
.menu-footer li a,
.site-footer .ast-nav-menu li a {
color: #ffffff;
font-size: 15px;
text-decoration: none;
}
.menu-footer li a:hover,
.site-footer .ast-nav-menu li a:hover {
color: var(--bv-gold);
}
/* ── Línea gradiente top del footer ── */
.gradient {
width: 100%;
display: flex;
justify-content: center;
background-color: var(--bv-black);
}
.gradient .bv-footer-divider {
width: 72%;
height: 2px;
background: linear-gradient(
to right,
var(--bv-red-brick) 0%,
#cba16e 50%,
var(--bv-red-brick) 100%
);
}
/* ── Footer mobile ── */
@media (max-width: 922px) {
.site-above-footer-wrap .ast-builder-grid-row {
padding: 40px 24px;
gap: 32px;
}
.site-footer-section,
.footer-widget-area {
text-align: center;
}
.bv-social-icons {
justify-content: center;
}
.bv-back-top {
display: inline-flex;
}
.menu-footer,
.site-footer .ast-nav-menu {
align-items: center;
}
}
/* ── Footer: selectores específicos por columna ── */
/* Col 1 — columna como flex para empujar botón al fondo */
.site-footer-above-section-1,
.site-footer-above-section-1 .footer-widget-area,
.site-footer-above-section-1 .ast-header-html,
.site-footer-above-section-1 .ast-builder-html-element {
display: flex !important;
flex-direction: column !important;
height: 100%;
justify-content: space-between;
}
/* Col 1 — "Contact us": serif dorado */
.site-footer-above-section-1 .ast-builder-html-element p,
.site-footer-above-section-1 .ast-builder-html-element h2 {
font-family: var(--bv-font-heading) !important;
font-size: 1.5rem !important;
font-weight: 400 !important;
color: var(--bv-gold) !important;
margin: 0 !important;
}
/* Col 2 — Labels "Get in contact" / "Book a call" (ítems impares) */
#astra-footer-menu li:nth-child(odd) {
margin-top: 14px;
}
#astra-footer-menu li:first-child {
margin-top: 0;
}
#astra-footer-menu li:nth-child(odd) .menu-link {
font-weight: 600 !important;
font-size: 15px !important;
color: #ffffff !important;
pointer-events: none;
cursor: default;
}
/* Col 2 — Links email / Info BlackVogel (ítems pares) */
#astra-footer-menu li:nth-child(even) .menu-link {
font-weight: 400 !important;
font-size: 14px !important;
color: rgba(255, 255, 255, 0.75) !important;
}
#astra-footer-menu li:nth-child(even) .menu-link:hover {
color: var(--bv-gold) !important;
}
/* Col 3 — "Follow us": body bold blanco */
.site-footer-above-section-3 .ast-builder-html-element p {
font-family: var(--bv-font-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #ffffff !important;
text-align: left !important;
margin: 0 0 12px !important;
}
/* Col 3 — Iconos sociales: círculos con borde blanco */
.footer-social-inner-wrap {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.footer-social-item.ast-builder-social-element {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
background-color: transparent !important;
border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
transition: border-color 0.2s ease !important;
}
.footer-social-item.ast-builder-social-element:hover {
border-color: var(--bv-gold) !important;
}
.footer-social-item svg path {
fill: #ffffff !important;
}
/* Copyright — centrado gris */
.ast-footer-copyright p {
text-align: center !important;
font-size: 12px !important;
color: rgba(255, 255, 255, 0.4) !important;
font-family: var(--bv-font-body);
}
/* Mobile ≤ 922px */
@media (max-width: 922px) {
/* Col 1 — centrar toda la cadena flex ("Contact us" + Back to top),
que por defecto queda alineada a la izquierda */
.site-footer-above-section-1,
.site-footer-above-section-1 .footer-widget-area,
.site-footer-above-section-1 .ast-header-html,
.site-footer-above-section-1 .ast-builder-html-element {
align-items: center !important;
text-align: center !important;
}
/* Mismo ritmo interno que las otras columnas */
.site-footer-above-section-1 .ast-builder-html-element {
gap: 16px;
}
.site-footer-above-section-3 .ast-builder-html-element p {
text-align: center !important;
}
.footer-social-inner-wrap {
justify-content: center;
}
#astra-footer-menu li:nth-child(odd) {
margin-top: 18px;
}
#astra-footer-menu li:first-child {
margin-top: 0;
}
}
/*Linea en el top/bot services*/
.bv-border-top-services {
width: 100%;
height: 8px;
background: linear-gradient(to right, #ececec 0%, #cba16e 50%, #ececec 100%);
}
.bv-border-bot-services {
width: 100%;
height: 8px;
background: linear-gradient(to right, #ececec 0%, #f53f38 50%, #ececec 100%);
}
/* ============================================================
HOME - SECTIONS
============================================================ */
/* BOTONES About — hover */
#speaker .elementor-size-sm:hover {
color: var(--bv-white) !important;
border: solid 1px var(--bv-black);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
transform: translateY(-1px);
}
.btn .elementor-size-sm:hover {
border: 1.5px solid var(--bv-gold) !important;
color: var(--bv-gold) !important;
transition:
color 0.25s ease,
border-color 0.25s ease;
}
#more-about-bv-btn {
min-width: 200px !important;
}
/* ============================================================
OuUR WORK — SECTIONS
============================================================ */
/* OUR WORK — sin efecto hover (desactivado a pedido) */
/* ============================================================
SERVICES COMPONENT — BlackVogel
============================================================ */
/* Wrapper principal */
.bv-svc {
display: flex;
gap: 150px;
align-items: center;
padding: 32px;
min-height: 280px;
}
/* ── Lista izquierda ── */
.bv-svc__list {
display: flex;
flex-direction: column;
flex: 0 0 440px;
}
.bv-svc__items {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
max-height: 280px; /* altura visible — ajustá según cuántos items querés mostrar */
overflow-y: auto; /* scroll vertical */
}
.bv-svc__items::-webkit-scrollbar {
display: none;
}
.bv-svc__item:first-child {
border-top: 1px solid #72757a;
}
/* Flechas arriba / abajo */
.bv-svc__arrows {
background: none;
border: none;
color: #72757a !important;
font-size: 30px;
cursor: pointer;
padding: 6px 0;
line-height: 1;
transition: color 0.2s ease;
}
.bv-svc__arrows svg:hover {
color: var(--bv-white);
}
/* Cada item de la lista */
.bv-svc__item {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 0;
border-bottom: 1px solid #72757a;
cursor: pointer;
position: relative;
transition: padding-left 0.25s ease;
}
/* Línea dorada a la izquierda en hover/activo */
.bv-svc__item::before {
content: "";
position: absolute;
left: -32px;
top: 0;
bottom: 0;
width: 2px;
background: #cba16e;
opacity: 0;
transition: opacity 0.2s ease;
}
.bv-svc__item:hover,
.bv-svc__item.active {
padding-left: 10px;
}
.bv-svc__item:hover::before,
.bv-svc__item.active::before {
opacity: 1;
}
/* Número */
.bv-svc__num {
font-size: 12px;
color: #7a6e64;
min-width: 22px;
font-family: "Inter", sans-serif;
transition: color 0.2s ease;
}
.bv-svc__item:hover .bv-svc__num,
.bv-svc__item.active .bv-svc__num {
color: #cba16e;
}
/* Nombre del servicio */
.bv-svc__name {
font-size: 13px;
color: #7a6e64;
font-family: "Inter", sans-serif;
line-height: 1.4;
transition: color 0.2s ease;
}
.bv-svc__item:hover .bv-svc__name {
color: #ffffff;
}
.bv-svc__item.active .bv-svc__name {
color: #ffffff;
font-weight: 500;
}
/* ── Panel derecho ── */
.bv-svc__panel {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Card */
.bv-svc__card {
background: none;
border: 1px solid var(--bv-white);
border-radius: 12px;
padding: 24px;
width: 100%;
max-width: 544px;
animation: bvSvcIn 0.28s ease;
height: 100%;
}
@keyframes bvSvcIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bv-svc__card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
/* Ícono con gradiente */
.bv-svc__icon {
width: 44px;
height: 44px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
/* el background gradient se aplica inline desde el JS */
}
.bv-svc__card-num {
font-size: 24px;
color: #cba16e;
font-family: "Inter", sans-serif;
font-weight: 500;
}
.bv-svc__card-text {
font-size: 15px;
color: #ffffff;
line-height: 1.65;
font-family: "Inter", sans-serif;
margin: 0;
}
/* ── Responsive mobile ── */
@media (max-width: 640px) {
.bv-svc {
flex-direction: column;
padding: 20px;
gap: 0;
}
.bv-svc__list {
flex: none;
width: 100%;
}
.bv-svc__item::before {
left: -20px;
}
.bv-svc__panel {
width: 100%;
margin-top: 20px;
}
.bv-svc__card-text {
font-size: 14px;
}
}
/* ============================================================
SERVICES GRID — BlackVogel (Home)
6 tarjetas. Resaltado rojo: hover en desktop, .is-active en
móvil (lo aplica IntersectionObserver desde un widget HTML).
NO se toca font-family (se hereda del tema); sólo controlamos
color, tamaño y peso — con !important para ganarle a la regla
global de headings (h1..h6 { ... !important }).
Contrato de clases (Elementor → Avanzado → Clases CSS):
.bv-services-grid > .bv-service-card ×6
.bv-service-card__label "SERVICE 0X"
.bv-service-card__num "01"
.bv-service-card__title
.bv-service-card__text
.bv-service-card__tag (solo tarjeta 05)
============================================================ */
.bv-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: var(--bv-max-width);
margin: 0 auto;
}
.bv-service-card {
position: relative;
max-height: 209px;
border: 1px solid var(--bv-white) !important;
column-gap: 10px;
border-radius: 10px;
background: transparent;
transition:
background-color 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* Alinear a la izquierda SÓLO los textos de las cards — contrarresta
el centrado global de headings en móvil, sin tocar el resto del sitio */
.bv-service-card .elementor-heading-title,
.bv-service-card .bv-service-card__text,
.bv-service-card .bv-service-card__text * {
text-align: left !important;
}
/* Etiqueta "SERVICE 0X" + línea divisora debajo */
.bv-service-card__label {
position: relative;
padding-bottom: 14px;
}
.bv-service-card__label::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--bv-gold);
transition: background-color 0.3s ease;
}
.bv-service-card__label,
.bv-service-card__label * {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.18em;
text-transform: uppercase;
/* gris cálido claro del diseño (antes #888580 quedaba muy oscuro) */
color: var(--bv-gold) !important;
transition: color 0.3s ease;
}
/* Número grande (la posición la controla Elementor: widget absoluto) */
.bv-service-card__num,
.bv-service-card__num * {
margin: 0;
font-size: 80px !important;
font-weight: 600 !important;
line-height: 1;
/* dorado de marca (--bv-gold) al 90% de opacidad: sobre el fondo
oscuro da el tono apagado del diseño (~#b99465). En hover el
estado rojo lo lleva a gold sólido. */
color: var(--bv-white);
opacity: 60%;
transition: color 0.3s ease;
}
/* Título del servicio */
.bv-service-card__title,
.bv-service-card__title * {
font-size: 18px !important;
font-weight: 600 !important;
color: var(--bv-gold) !important;
transition: color 0.3s ease;
}
/* Descripción — con más peso para mejor lectura sobre el fondo oscuro */
.bv-service-card__text,
.bv-service-card__text * {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.6;
color: var(--bv-white) !important;
transition: color 0.3s ease;
}
/* Tag "ACCESS TO FUNDING" (tarjeta 05) */
.bv-service-card__tag,
.bv-service-card__tag * {
font-size: 9px !important;
font-weight: 600 !important;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bv-gold) !important;
transition: color 0.3s ease;
}
.bv_white-btn a {
background: var(--bv-white) !important;
}
/* ── Estado resaltado en DESKTOP (hover) ── */
@media (hover: hover) {
.bv-service-card:hover {
background-color: var(--bv-red);
border-color: var(--bv-red);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.bv-service-card:hover .bv-service-card__label::after {
background: rgba(255, 255, 255, 0.45);
}
.bv-service-card:hover .bv-service-card__num,
.bv-service-card:hover .bv-service-card__num * {
color: var(--bv-white) !important;
opacity: 60%;
}
.bv-service-card:hover .bv-service-card__label,
.bv-service-card:hover .bv-service-card__label *,
.bv-service-card:hover .bv-service-card__title,
.bv-service-card:hover .bv-service-card__title *,
.bv-service-card:hover .bv-service-card__text,
.bv-service-card:hover .bv-service-card__text *,
.bv-service-card:hover .bv-service-card__tag,
.bv-service-card:hover .bv-service-card__tag * {
color: var(--bv-white) !important;
}
}
@media (max-width: 1024px) {
.bv-service-card {
max-height: 250px;
}
}
/* ── Estado resaltado en MÓVIL (.is-active vía JS) ── */
.bv-service-card.is-active {
background-color: var(--bv-red);
border-color: var(--bv-red);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.bv-service-card.is-active .bv-service-card__label::after {
background: rgba(255, 255, 255, 0.45);
}
.bv-service-card.is-active .bv-service-card__num,
.bv-service-card.is-active .bv-service-card__num * {
color: var(--bv-gold) !important;
}
.bv-service-card.is-active .bv-service-card__label,
.bv-service-card.is-active .bv-service-card__label *,
.bv-service-card.is-active .bv-service-card__title,
.bv-service-card.is-active .bv-service-card__title *,
.bv-service-card.is-active .bv-service-card__text,
.bv-service-card.is-active .bv-service-card__text *,
.bv-service-card.is-active .bv-service-card__tag,
.bv-service-card.is-active .bv-service-card__tag * {
color: var(--bv-white) !important;
}
/* Responsive */
@media (max-width: 1024px) {
.bv-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.bv-services-grid {
grid-template-columns: 1fr;
}
}
/*Leadership*/
/* ============================================================
LEADERSHIP & INITIATIVES ACCORDION — BlackVogel
Pegar en astra-child/style.css
============================================================ */
/* Wrapper de la sección */
.bv-lead {
padding: 32px 0;
font-family: "Inter", sans-serif;
}
/* Etiqueta superior roja */
.bv-lead__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bv-red-brick);
margin-bottom: 20px;
}
/* Grid 2 columnas */
.bv-lead__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
}
/* Cada caja */
.bv-lead__item {
border: 1px solid #c8c4bc;
border-radius: 12px;
background: none;
cursor: pointer;
transition:
border-color 0.2s ease,
background 0.2s ease;
overflow: hidden;
}
/* Estado hover */
.bv-lead__item:hover {
border-color: #abb1bd;
background: #fff;
}
/* Estado abierto */
.bv-lead__item.is-open {
border-color: #1c1a17;
background: #ffffff;
}
/* Header de cada caja (título + ícono) */
.bv-lead__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
gap: 12px;
}
/* Título */
.bv-lead__title {
font-size: 20px;
font-weight: 400;
color: #9a9490;
line-height: 1.4;
transition:
color 0.2s ease,
font-weight 0.15s ease;
}
.bv-lead__item:hover .bv-lead__title {
color: var(--bv-black);
font-weight: 500;
}
.bv-lead__item.is-open .bv-lead__title {
color: var(--bv-black);
font-weight: 600;
}
/* Ícono +/- */
.bv-lead__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #abb1bd;
transition: color 0.2s ease;
}
.bv-lead__item:hover .bv-lead__icon,
.bv-lead__item.is-open .bv-lead__icon {
color: var(--bv-black);
}
/* Cuerpo expandible */
.bv-lead__body {
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height 0.35s ease,
opacity 0.25s ease;
}
.bv-lead__item.is-open .bv-lead__body {
max-height: 600px;
opacity: 1;
}
/* Contenido interior */
.bv-lead__content {
padding: 0 20px 20px;
border-top: 0.5px solid var(--bv-black);
}
/* Texto descriptivo */
.bv-lead__text {
font-size: 16px;
color: var(--bv-black);
line-height: 1.7;
margin: 14px 0 16px;
}
/* Etiqueta sobre el link */
.bv-lead__link-label {
font-size: 14px;
color: var(--bv-gold);
margin-bottom: 4px;
}
/* Link dorado */
.bv-lead__link {
font-size: 14px;
color: var(--bv-gold);
text-decoration: none;
border-bottom: 1px solid var(--bv-gold);
transition:
color 0.2s ease,
border-color 0.2s ease;
}
.bv-lead__link:hover {
color: #9e7a43;
border-color: #9e7a43;
}
/* ── Responsive mobile ── */
@media (max-width: 600px) {
.bv-lead__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
BV-DROPDOWN — Acordeón anidado reutilizable (Elementor)
Una sola clase para TODAS las secciones de dropdown.
Módulo COMPACTO: items pegados (sin margen), solo redondeo en la
esquina superior del primero y la inferior del último.
Cerrado: tarjeta clara, título oscuro, ícono "+".
Abierto: fondo NEGRO (--bv-black) → título dorado, cuerpo claro,
link dorado, ícono "×" dorado, y línea dorada 48×1 bajo el título.
Estructura real (Elementor n-accordion):
.bv-dropdown .e-n-accordion > details.e-n-accordion-item
.e-n-accordion-item-title-text (span.number + texto del título)
.e-n-accordion-item-title-icon (.e-closed "+", .e-opened "×")
> .e-con (contenido: y del link)
============================================================ */
/* Contenedor: módulo compacto con borde y esquinas redondeadas */
.bv-dropdown .e-n-accordion {
gap: 0 !important;
border: 1px solid rgba(26, 28, 20, 0.14);
border-radius: 10px;
overflow: hidden;
}
/* Reset de bordes/paddings que mete Elementor */
.bv-dropdown .e-n-accordion-item-title,
.bv-dropdown .e-con {
border: none !important;
}
/* Item — pegado, sin margen ni redondeo propio; divisor inferior */
.bv-dropdown details.e-n-accordion-item {
background: var(--bv-white) !important;
border: none !important;
border-bottom: 1px solid rgba(26, 28, 20, 0.12) !important;
border-radius: 0 !important;
margin: 0 !important;
transition: background-color 0.3s ease;
}
.bv-dropdown details.e-n-accordion-item:last-of-type {
border-bottom: none !important;
}
/* Header (relativo para anclar el ícono a la derecha) */
.bv-dropdown .e-n-accordion-item-title {
position: relative;
padding: 20px 52px 20px 24px !important;
}
/* Número "01" */
.bv-dropdown .number {
font-size: 14px;
font-weight: 600;
color: var(--bv-gray-light);
margin-right: 30px;
letter-spacing: 0.04em;
transition: color 0.3s ease;
}
/* Título */
.bv-dropdown .e-n-accordion-item-title-text {
font-weight: 400 !important;
color: var(--bv-black) !important;
transition: color 0.3s ease;
font-size: 22px !important;
}
/* Cuerpo del contenido */
.bv-dropdown details > .e-con,
.bv-dropdown details > .e-con p,
.bv-dropdown details > .e-con span {
color: var(--bv-black);
transition: color 0.3s ease;
}
/* Link final */
.bv-dropdown details > .e-con a {
color: var(--bv-gold) !important;
text-decoration: underline;
transition: color 0.3s ease;
}
/* ── Ícono +/× — absolute a la derecha ── */
.bv-dropdown .e-n-accordion-item-title-icon {
position: absolute;
right: 22px;
top: 24px;
transform: translateY(-50%);
}
.bv-dropdown .e-n-accordion-item-title-icon .e-opened svg,
.bv-dropdown .e-n-accordion-item-title-icon .e-closed svg {
display: none !important;
}
.bv-dropdown .e-n-accordion-item-title-icon .e-closed::after,
.bv-dropdown .e-n-accordion-item-title-icon .e-opened::after {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #b9b7b2;
font-size: 18px;
line-height: 1;
color: #72757a;
transition:
color 0.3s ease,
border-color 0.3s ease;
}
.bv-dropdown .e-n-accordion-item-title-icon .e-closed::after {
content: "+";
}
.bv-dropdown .e-n-accordion-item-title-icon .e-opened::after {
content: "\00d7"; /* × */
font-size: 20px;
}
/* ============ ESTADO ABIERTO — NEGRO (todos los items) ============ */
.bv-dropdown details.e-n-accordion-item[open] {
background: var(--bv-black) !important;
}
.bv-dropdown details[open] .e-n-accordion-item-title-text {
color: var(--bv-gold) !important;
}
.bv-dropdown details[open] .number {
color: var(--bv-gold);
}
/* Línea dorada 48×1 debajo del título al abrir */
.bv-dropdown details[open] .e-n-accordion-item-title-text::after {
content: "";
display: block;
width: 48px;
height: 1px;
background: var(--bv-gold);
margin-top: 12px;
margin-left: 50px;
}
.bv-dropdown details[open] > .e-con,
.bv-dropdown details[open] > .e-con p,
.bv-dropdown details[open] > .e-con span {
color: var(--bv-cream);
}
.bv-dropdown details[open] > .e-con a {
color: var(--bv-gold) !important;
}
/* Ícono "×" dorado al abrir */
.bv-dropdown details[open] .e-opened::after {
color: var(--bv-gold);
border-color: var(--bv-gold);
}
/* ============================================================
BV-DROPDOWN-DARK — Acordeón de filas sobre fondo oscuro
(Our Services). Reutilizable: cualquier acordeón sobre fondo
negro lleva esta clase.
Filas transparentes separadas por hairlines; sin fondo al abrir.
Cerrado: número dorado, título tenue, chevron BLANCO (∨).
Hover/abierto: número ROJO, título blanco; chevron ROJO (∧).
Contenido: grid de 3 columnas .bv-dcol con divisor vertical,
cada una con .bv-dcol__title (h4) y .bv-dcol__list (bullets).
============================================================ */
/* Módulo: filas pegadas, hairline superior; cada fila con hairline inferior */
.bv-dropdown-dark .e-n-accordion {
gap: 0 !important;
border-top: 1px solid rgba(236, 236, 236, 0.18);
}
/* Reset de bordes de Elementor — EXCEPTO .bv-dcol (lleva el divisor vertical) */
.bv-dropdown-dark .e-n-accordion-item-title,
.bv-dropdown-dark .e-con:not(.bv-dcol) {
border: none !important;
}
.bv-dropdown-dark details.e-n-accordion-item {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(236, 236, 236, 0.18) !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* Fila (header) */
.bv-dropdown-dark .e-n-accordion-item-title {
position: relative;
padding: 20px 48px 20px 4px !important;
}
/* Número "01" — blanco en reposo */
.bv-dropdown-dark .number {
font-size: 48px;
font-weight: 600;
font-family: var(--bv-font-palatino) !important;
color: var(--bv-white);
margin-right: 28px;
letter-spacing: 0.04em;
transition: color 0.3s ease;
}
/* Título — plateado en reposo, centrado vertical respecto al número */
.bv-dropdown-dark .e-n-accordion-item-title-text {
display: flex;
align-items: center;
font-size: 24px !important;
font-weight: 500 !important;
color: var(--bv-silver) !important;
text-align: left !important;
transition: color 0.3s ease;
}
/* ── Hover y abierto: número rojo, título blanco ── */
.bv-dropdown-dark .e-n-accordion-item-title:hover .number,
.bv-dropdown-dark details[open] .number {
color: var(--bv-red);
}
.bv-dropdown-dark
.e-n-accordion-item-title:hover
.e-n-accordion-item-title-text,
.bv-dropdown-dark details[open] .e-n-accordion-item-title-text {
color: var(--bv-white) !important;
}
/* ── Chevron (se ocultan los SVG default de Elementor) ── */
.bv-dropdown-dark .e-n-accordion-item-title-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
}
.bv-dropdown-dark .e-n-accordion-item-title-icon svg {
display: none !important;
}
.bv-dropdown-dark .e-n-accordion-item-title-icon .e-closed::after,
.bv-dropdown-dark .e-n-accordion-item-title-icon .e-opened::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-right: 1.5px solid;
border-bottom: 1.5px solid;
}
/* Cerrado: chevron BLANCO apuntando abajo (∨) */
.bv-dropdown-dark .e-n-accordion-item-title-icon .e-closed::after {
border-color: var(--bv-white);
transform: rotate(45deg);
margin-top: -4px;
}
/* Abierto: chevron ROJO apuntando arriba (∧) */
.bv-dropdown-dark .e-n-accordion-item-title-icon .e-opened::after {
border-color: var(--bv-red);
transform: rotate(225deg);
margin-top: 4px;
}
/* ── Contenido: columnas .bv-dcol ── */
.bv-dropdown-dark details > .e-con {
padding-top: 8px;
padding-bottom: 28px;
/* Filas a alto de contenido: Elementor las define como 1fr y eso
iguala la fila del botón a la altura de las columnas (fila gigante) */
grid-template-rows: none !important;
grid-auto-rows: auto !important;
}
/* Divisor vertical entre columnas */
.bv-dropdown-dark .bv-dcol {
padding: 0 24px;
border-left: 1px solid rgba(236, 236, 236, 0.18) !important;
}
.bv-dropdown-dark .bv-dcol:first-child {
border-left: none !important;
padding-left: 0;
}
/* ── Botón "More information" (items que lo tengan) ──
Widget botón hijo directo del grid: ocupa las 3 columnas,
centrado (el widget ya trae align-center de Elementor). */
.bv-dropdown-dark details > .e-con > .elementor-widget-button {
grid-column: 1 / -1;
padding: 0 !important;
margin: 0 !important;
}
/* Fila del botón compacta: 10px entre columnas y botón,
10px entre botón y el borde inferior del item */
.bv-dropdown-dark details > .e-con:has(> .elementor-widget-button) {
row-gap: 10px !important;
padding-bottom: 10px;
}
/* Encabezado de columna */
.bv-dropdown-dark .bv-dcol__title,
.bv-dropdown-dark .bv-dcol__title .elementor-heading-title {
font-size: 18px !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bv-white) !important;
text-align: left !important;
margin-bottom: 12px;
}
/* Lista de bullets — blanco (--bv-white) con opacidad */
.bv-dropdown-dark .bv-dcol__list,
.bv-dropdown-dark .bv-dcol__list p,
.bv-dropdown-dark .bv-dcol__list li {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
text-align: left !important;
}
.bv-dropdown-dark .bv-dcol__list ul {
margin: 0;
padding-left: 18px;
}
.bv-dropdown-dark .bv-dcol__list li {
margin-bottom: 8px;
}
.bv-dropdown-dark .bv-dcol__list li::marker {
color: var(--bv-gold);
}
/* ── Responsive: columnas apiladas, divisor pasa a horizontal ── */
@media (max-width: 768px) {
.bv-dropdown-dark details > .e-con {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.bv-dropdown-dark .bv-dcol {
border-left: none !important;
border-top: 1px solid rgba(236, 236, 236, 0.18) !important;
padding: 10px 0 0;
margin-top: 10px;
}
.bv-dropdown-dark .bv-dcol:first-child {
border-top: none !important;
margin-top: 0;
padding-top: 0;
}
/* Tamaños proporcionales en móvil */
.bv-dropdown-dark .e-n-accordion-item-title-text {
font-size: 18px !important;
}
.bv-dropdown-dark .number {
font-size: 32px;
}
.bv-dropdown-dark .bv-dcol__title,
.bv-dropdown-dark .bv-dcol__title .elementor-heading-title {
font-size: 16px !important;
}
}
/*Speaker*/
#speaker h2 {
color: var(--bv-white);
font-size: 4.75rem;
line-height: 68px;
}
@media (max-width: 768px) {
#speaker h2 {
font-size: 2.5rem;
line-height: 1.2;
}
}
#speaker #speaker-btn {
color: var(--bv-white);
width: 217px;
background-color: var(--bv-red) !important;
background-image: none;
}
#speaker .e-con-inner {
padding-bottom: 0;
}
/* ============================================================
ABOUT - SECTIONS
============================================================ */
/* Hero */
#hero-about h1 {
color: var(--bv-white) !important;
font-size: 3.75rem !important;
}
@media (max-width: 768px) {
#hero-about h1 {
font-size: 2.25rem !important;
}
}
/* About */
#about-about h5 {
text-transform: uppercase;
color: var(--bv-black) !important;
font-weight: bold !important;
}
/* Hover */
#about-about .elementor-size-sm:hover {
border: 1.5px solid var(--bv-gold) !important;
color: var(--bv-gold) !important;
transition:
color 0.25s ease,
border-color 0.25s ease;
}
/* Leadership */
#leadership-grid-container .card-img-des-btn {
min-width: 323px;
}
@media (max-width: 768px) {
#leadership-grid-container .card-img-des-btn {
min-width: unset;
width: 100%;
}
}
#leadership-grid-container .card-img-des-btn .e-con-full {
padding: 14px !important;
gap: 14px;
min-height: 273px;
border: solid 1px #abb1bd;
}
#leadership-grid-container .card-img-des-btn h5 {
color: var(--bv-black) !important;
line-height: 110% !important;
}
#leadership-grid-container .card-img-des-btn p {
margin-bottom: 4px !important;
}
#leadership-grid-container .card-img-des-btn .leadership-card-btn {
position: absolute;
bottom: 14px;
}
#leadership-grid-container
.card-img-des-btn
.elementor-widget-container
p
strong,
#leadership-grid-container
.card-img-des-btn
.elementor-widget-container
strong {
text-transform: uppercase;
letter-spacing: 0.1em !important;
}
#leadership-grid-container
.card-img-des-btn
.leadership-card-btn
.elementor-size-sm {
background: none !important;
font-size: unset !important;
margin: 0 !important;
padding: 0 !important;
}
#leadership-grid-container
.card-img-des-btn
.leadership-card-btn
.elementor-button-text {
background: var(--bv-gold) !important;
border-radius: 8px;
padding: 7px 20px;
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
#leadership-grid-container
.card-img-des-btn
.leadership-card-btn
.elementor-button-text:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
transform: translateY(-1px);
border: solid 1px var(--bv-black);
}
/* Awards */
/* ============================================================
AWARDS CAROUSEL — BlackVogel
Pegar en astra-child/style.css
============================================================ */
/* Wrapper de la sección */
.bv-awards {
padding: 40px 20px;
background: #ffffff;
font-family: "Inter", sans-serif;
text-align: center;
}
/* Título */
.bv-awards__title {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 36px;
font-weight: 400;
color: #1c1a17;
margin-bottom: 32px;
}
/* Layout: flecha + track + flecha */
.bv-awards__stage {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
/* Flechas prev / next */
.bv-awards__arrow {
width: 44px;
height: 44px;
border-radius: 8px;
border: none;
background: #dadbdd !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
color: var(--bv-black);
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.bv-awards__arrow:hover,
.bv-awards__arrow.is-active {
background: var(--bv-gold) !important;
border-color: none;
color: #ffffff;
}
/* Track — contenedor del carrusel */
.bv-awards__track {
width: 100%;
max-width: 600px;
border-radius: 16px;
overflow: hidden;
position: relative;
}
/* Fila de slides */
.bv-awards__slides {
display: flex;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Cada slide */
.bv-awards__slide {
min-width: 100%;
position: relative;
}
.bv-awards__slide img {
width: 100%;
height: 360px;
object-fit: cover;
display: block;
background: #e0ddd8;
}
/* Gradiente oscuro inferior + texto superpuesto */
.bv-awards__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 48px 24px 24px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0) 100%
);
text-align: left;
}
.bv-awards__caption {
font-size: 14px;
color: #ffffff;
line-height: 1.5;
font-weight: 400;
}
/* Dots de navegación */
.bv-awards__dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
}
.bv-awards__dot {
width: 16px;
height: 16px;
border-radius: 50% !important;
background: #abb1bd !important;
border: none;
padding: 0 !important;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.bv-awards__dot.is-active {
background: var(--bv-gold) !important;
transform: scale(1.15);
}
/* ── Responsive mobile ── */
@media (max-width: 600px) {
.bv-awards__stage {
gap: 10px;
}
.bv-awards__arrow {
width: 36px;
height: 36px;
}
.bv-awards__slide img {
height: 260px;
}
.bv-awards__title {
font-size: 28px;
}
}
/* ============================================================
ABOUT US - SECTIONS
============================================================ */
h4 {
text-transform: uppercase;
font-family: Inter !important;
font-weight: 600 !important;
font-size: 1.25rem !important;
}
.about-us-btn-left .elementor-size-sm {
background: var(--bv-gold) !important;
color: var(--bv-black) !important;
}
.about-us-btn-right .elementor-size-sm {
background: var(--bv-white) !important;
color: var(--bv-black) !important;
}
/* Hover */
.btn-black-hover .elementor-size-sm:hover {
color: var(--bv-black) !important;
border: solid 1px var(--bv-black);
background-color: var(--bv-gold) !important;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
transform: translateY(-1px);
transition: transform 0.4s ease;
}
/* ============================================================
OUR SERVICES - SECTIONS
============================================================ */
/* Background*/
.elementor-1301 {
background: url("/wp-content/uploads/2026/05/our-services-bg-x1.jpg") repeat;
}
@media (max-width: 768px) {
/* Sin espaciado vertical de secciones en mobile: cada sección
maneja su propio aire interno (validado en DOM) */
.page-id-1301 .e-con-boxed,
.page-id-1301 .elementor-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
.services-card-heading h5 {
text-transform: uppercase;
font-weight: 600 !important;
font-family: Inter !important;
letter-spacing: 0.1em !important;
line-height: 1.375rem !important;
font-size: 1.25rem !important;
}
/* ============================================================
SPEAKING ENGAGEMENTS - Sections
============================================================ */
/* SPEAKING ENGAGEMENTS VIDEO SLIDER — BlackVogel */
.bv-speak-slider {
background: #1c1a17;
padding: 48px 40px;
}
/* Track */
.bv-speak-slider .splide__track {
overflow: hidden !important;
border-radius: 8px;
}
/* Slides */
.bv-speak-slider .splide__list {
display: flex !important;
}
.bv-speak-slider .splide__slide {
min-width: 100% !important;
}
/* Flechas */
.bv-speak-slider .splide__arrow {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
border: 1px solid #ffffff33 !important;
background: transparent !important;
opacity: 1 !important;
}
.bv-speak-slider .splide__arrow:hover,
.bv-speak-slider .splide__arrow.is-active {
background: #b8935a !important;
border-color: #b8935a !important;
}
.bv-speak-slider .splide__arrow svg {
fill: #ffffff !important;
width: 12px !important;
height: 12px !important;
}
.bv-speak-slider .splide__arrow--prev {
left: -60px !important;
}
.bv-speak-slider .splide__arrow--next {
right: -60px !important;
}
/* Dots */
.bv-speak-slider .splide__pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
margin-top: 20px !important;
bottom: unset !important;
position: relative !important;
}
.bv-speak-slider .splide__pagination__page {
width: 8px !important;
height: 8px !important;
border-radius: 4px !important;
background: #ffffff44 !important;
border: none !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
transition:
width 0.3s ease,
background 0.3s ease !important;
}
.bv-speak-slider .splide__pagination__page.is-active {
width: 40px !important;
height: 8px !important;
background: #b8935a !important;
transform: none !important;
}
/* Speaking — flechas visibles fuera del track */
.bv-speak-slider .splide__arrows {
position: relative;
}
.bv-speak-slider .splide__arrow {
position: absolute !important;
top: 350px !important;
transform: translateY(-50%) !important;
opacity: 1 !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
border: 1px solid #ffffff33 !important;
background: transparent !important;
z-index: 10 !important;
}
.bv-speak-slider .splide__arrow--prev {
left: -60px !important;
}
.bv-speak-slider .splide__arrow--next {
right: -60px !important;
background: #b8935a !important;
border-color: #b8935a !important;
}
.bv-speak-slider .splide__arrow svg {
fill: #ffffff !important;
width: 12px !important;
height: 12px !important;
}
.bv-speak-slider .splide__arrow:hover {
background: #b8935a !important;
border-color: #b8935a !important;
}
/* Mobile */
@media (max-width: 600px) {
.bv-speak-slider {
padding: 32px 16px;
}
.bv-speak-slider .splide__arrow--prev {
left: -16px !important;
}
.bv-speak-slider .splide__arrow--next {
right: -16px !important;
}
}
/* User */
/* ============================================================
MODAL GRID — BlackVogel
Pegar en astra-child/style.css
============================================================ */
/* ── Cards del grid ── */
.bv-grid__card {
position: relative;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background: #2a2620;
}
.bv-grid__card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform 0.3s ease,
filter 0.3s ease;
}
.bv-grid__card:hover img {
transform: scale(1.04);
filter: brightness(0.8);
}
/* Gradiente inferior con título */
.bv-grid__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 32px 12px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
}
.bv-grid__title {
font-size: 12px;
color: #ffffff;
line-height: 1.4;
font-weight: 500;
font-family: "Inter", sans-serif;
}
/* Ícono play — agregado por JS en cards de video */
.bv-grid__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
transition:
transform 0.2s ease,
background 0.2s ease;
pointer-events: none;
color: #1c1a17;
}
.bv-grid__card:hover .bv-grid__play {
transform: translate(-50%, -50%) scale(1.1);
background: #b8935a;
color: #ffffff;
}
/* ── Modal backdrop ── */
.bv-modal-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 99999;
align-items: center;
justify-content: center;
padding: 24px;
}
.bv-modal-backdrop.is-open {
display: flex;
}
/* ── Modal ── */
.bv-modal {
background: #1c1a17;
border-radius: 12px;
width: 100%;
max-width: 720px;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: bvModalIn 0.25s ease;
}
@keyframes bvModalIn {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Botón cerrar */
.bv-modal__close {
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
cursor: pointer;
color: #9e8e7a;
font-size: 22px;
line-height: 1;
transition: color 0.2s ease;
z-index: 1;
}
.bv-modal__close:hover {
color: #ffffff;
}
/* Video 16:9 */
.bv-modal__video {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
border-radius: 12px 12px 0 0;
overflow: hidden;
background: #000000;
}
.bv-modal__video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Imagen */
.bv-modal__image {
width: 100%;
border-radius: 12px 12px 0 0;
overflow: hidden;
}
.bv-modal__image img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
/* Cuerpo del modal */
.bv-modal__body {
padding: 20px 24px 28px;
}
.bv-modal__title {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 22px;
font-weight: 400;
color: #cba16e;
margin-bottom: 10px;
line-height: 1.3;
}
.bv-modal__desc {
font-size: 14px;
color: #c8c4bc;
line-height: 1.7;
font-family: "Inter", sans-serif;
}
/* ── Responsive mobile ── */
@media (max-width: 600px) {
.bv-modal {
max-height: 95vh;
}
.bv-modal__image img {
height: 200px;
}
.bv-modal__body {
padding: 16px 16px 24px;
}
.bv-modal__title {
font-size: 18px;
}
}
/* Ajuste max height img*/
.page-id-1885 .elementor.elementor .e-con > .elementor-widget {
max-height: 195px;
}
/* Bg borde redondeado tio*/
.page-id-1885 .elementor-1885 {
background-color: #ececec;
}
/* Estilos modales espeficivos*/
[data-modal="bv-modal-19"] .bv-modal__image img {
object-fit: contain;
}
/* ============================================================
GET IN TOUCH - Sections
============================================================ */
/* H3 estilos */
.page-id-2042 h3 b {
font-family: Inter !important;
font-size: 1.25rem !important;
}
@media (max-width: 768px) {
/* Imagen hero 968×839 — limitar alto para no empujar el formulario fuera del fold */
.page-id-2042 .elementor-widget-image img {
max-height: 280px;
width: 100%;
object-fit: cover;
object-position: center top;
}
/* Sección Let's Chat — padding mínimo para que el email no toque los bordes */
.page-id-2042 .e-con-full {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ============================================================
The raven Team - Sections
============================================================ */
/* ============================================================
RAVEN TEAM SLIDER — Swiper + flip 3D (página 2136)
Estructura en Elementor: .bv-team-controls (2 botones ‹ ›) +
.bv-team-slider > .teamate-card × 9. El JS de functions.php
envuelve las cards en swiper-slide y monta loop + autoplay.
Card: .bv-flip-front (foto con marco rojo propio + "more") /
.bv-flip-back (roja, "close" + bio). Click → .is-flipped 180°.
============================================================ */
.page-id-2136 .bv-team-slider .swiper {
width: 100%;
/* franja inferior reservada para los dots: al ir en absolute
dentro de esta zona nunca quedan ocultos ni sobre las cards */
padding-bottom: 44px;
}
/* Escenario 3D: proporción exacta de las fotos Frame (447×683)
para que no se recorte el nombre/cargo horneado en la imagen */
.page-id-2136 .teamate-card {
position: relative;
width: 100%;
aspect-ratio: 447 / 683;
perspective: 1200px;
cursor: pointer;
}
/* Caras apiladas; cada una oculta su reverso */
.page-id-2136 .bv-flip-front,
.page-id-2136 .bv-flip-back {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100%;
border-radius: 14px;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.15, 1);
}
.page-id-2136 .bv-flip-front {
z-index: 2;
transform: rotateY(0deg);
}
.page-id-2136 .bv-flip-back {
transform: rotateY(180deg);
background-color: var(--bv-red);
justify-content: center;
padding: 24px;
/* mientras está oculta no captura clicks (el frente con
backface oculto puede seguir recibiendo hit-testing) */
pointer-events: none;
}
.page-id-2136 .teamate-card.is-flipped .bv-flip-front {
transform: rotateY(-180deg);
pointer-events: none;
}
.page-id-2136 .teamate-card.is-flipped .bv-flip-back {
transform: rotateY(0deg);
pointer-events: auto;
}
/* La foto llena el frente */
.page-id-2136 .bv-flip-front .elementor-widget-image,
.page-id-2136
.bv-flip-front
.elementor-widget-image
.elementor-widget-container {
width: 100%;
height: 100%;
}
.page-id-2136 .bv-flip-front img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* "more": arriba a la izquierda como el Figma (la zona clara de
las fotos); "close": arriba a la derecha del dorso rojo.
Los spans son absolute respecto a la CARA, no a su widget:
Elementor pone position:relative a todo widget y sin esto
anclaban al widget (quedaban al centro de la card) */
.page-id-2136 .bv-flip-front .elementor-widget-text-editor,
.page-id-2136 .bv-flip-back .elementor-widget-text-editor {
position: static !important;
}
.bv-flip-more,
.bv-flip-close {
position: absolute;
cursor: pointer;
font-size: 13px;
letter-spacing: 0.04em;
z-index: 3;
}
.bv-flip-more {
/* dentro del área de la foto: los PNG traen marco rojo redondeado
con esquinas transparentes; 10/14 caía sobre la esquina */
top: 20px;
left: 26px;
color: rgba(0, 0, 0, 0.5);
}
.bv-flip-close {
top: 12px;
right: 14px;
color: var(--bv-white);
}
/* Navegación por DOTS (pagination de Swiper, clickeables).
El contenedor .bv-team-controls con las flechas se borra en el
editor; esta regla es el seguro por si queda */
.page-id-2136 .bv-team-controls {
display: none;
}
.page-id-2136 .bv-team-slider .swiper-pagination {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
}
.page-id-2136 .bv-team-slider .swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: #c8c4bc;
opacity: 1;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.page-id-2136 .bv-team-slider .swiper-pagination-bullet-active {
background-color: var(--bv-gold);
transform: scale(1.2);
}
/* ============================================================
DARTE SERIES - Sections
============================================================ */
.page-id-2270 h1 {
font-size: 3.75rem !important;
color: var(--bv-white) !important;
}
.page-id-2270 h5,
.page-id-2270 h3,
.page-id-2270 h1 {
font-weight: 700 !important;
}
.page-id-2270 .white-heading h2 {
font-family: "Inter" !important;
font-weight: 600 !important;
}
.page-id-2270 h3 {
font-size: 2.5rem !important;
}
@media (max-width: 768px) {
.page-id-2270 h1 {
font-size: 2.25rem !important;
}
.page-id-2270 h3 {
font-size: 1.75rem !important;
}
}
.page-id-2270 .round-tables-card {
min-height: 560px !important;
overflow: hidden;
}
.page-id-2270 .round-tables-card p {
margin: 0 !important;
}
.page-id-2270 .card-button {
position: absolute;
bottom: 24px;
left: 24px;
}
.page-id-2270 .card-button a,
.page-id-2270 .middle-button a,
.page-id-2646 .middle-button a {
background-image: unset !important;
background-color: var(--bv-gold) !important;
color: var(--bv-black) !important;
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
.page-id-2270 .card-button a:hover,
.page-id-2270 .middle-button a:hover,
.page-id-2646 .middle-button a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
transform: translateY(-1px);
border: solid 1px var(--bv-black);
}
/* DARTE Calendar*/
.bv_darte-calendar__text {
border-top: 2px solid transparent;
border-image: linear-gradient(to right, var(--bv-gold) 5%, transparent 5%) 1;
padding-top: 20px;
}
/* Logos*/
.bv_darte-series__logos_left {
border-right: solid 3px #d1103e;
}
@media (max-width: 768px) {
.bv_darte-series__logos_left {
border-right: none;
}
}
/* ============================================================
DARTE World Tour: ExpertCast - Sections
============================================================ */
.page-id-2422 .btn-white a,
.page-id-2422 .btn-white .elementor-button {
padding: 7.5px 20px !important;
background: var(--bv-white) !important;
color: var(--bv-black);
}
.page-id-2422 .webinar-card-btn .elementor-button {
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
.page-id-2422 .webinar-card-btn .elementor-button:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
transform: translateY(-1px);
border: solid 1px var(--bv-black);
}
@media (max-width: 768px) {
/* Banner 1024×600 — evitar scroll horizontal */
.page-id-2422 img {
max-width: 100% !important;
height: auto !important;
}
/* Fila de 5 logos partners — permitir salto de línea */
.page-id-2422 .e-flex {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 16px !important;
}
.page-id-2422 .e-flex > .e-con {
flex: 0 0 auto !important;
width: auto !important;
max-width: 100% !important;
gap: 0;
}
}
/* ============================================================
POLICY RESPONSES - Sections
============================================================ */
.page-id-2468 h1 {
color: var(--bv-white) !important;
font-size: 3.75rem !important;
}
@media (max-width: 768px) {
.page-id-2468 h1 {
font-size: 2.25rem !important;
}
}
/* ============================================================
POLICY RESPONSES - Sections
============================================================ */
.page-id-2516 h1 {
color: var(--bv-white) !important;
font-size: 3.75rem !important;
}
@media (max-width: 768px) {
.page-id-2516 h1 {
font-size: 2.25rem !important;
}
}
/* Ocultar - mostrar cards*/
/* Publications — cards ocultas */
.bv-hidden-card {
display: none;
}
/* Cuando se revelan */
.bv-hidden-card.is-visible {
display: grid;
animation: bvFadeIn 0.4s ease;
}
@keyframes bvFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bv-show-more {
cursor: pointer;
}
/* ============================================================
Social Impact & Sustainability - Sections
============================================================ */
.page-id-2615 h1 {
color: var(--bv-white) !important;
font-size: 3.75rem !important;
}
@media (max-width: 768px) {
.page-id-2615 h1 {
font-size: 2.25rem !important;
}
}
.page-id-2615 .btn-white a,
.page-id-2615 .btn-white .elementor-button {
padding: 7.5px 20px !important;
background: var(--bv-white) !important;
color: var(--bv-black);
}
/* ============================================================
EVENTS By BV - Sections
============================================================ */
.page-id-2646 h1 {
color: var(--bv-white) !important;
font-size: 3.75rem !important;
}
@media (max-width: 768px) {
.page-id-2646 h1 {
font-size: 2.25rem !important;
}
}
.page-id-2646 .divider-short {
width: 74px;
height: 2px;
background-color: var(--bv-gold);
}
.page-id-2646 .elementor-button {
background-color: var(--bv-gold) !important;
color: var(--bv-black) !important;
background-image: none !important;
font-weight: 600 !important;
}
.page-id-2646 .accordion summary,
.page-id-2646 .accordion .elementor-element {
border: none !important;
}
.page-id-2646 .accordion summary {
min-height: 108px !important;
padding-left: 40px;
/* reserva para el chevron absolute (right 22px + 32px de ancho):
los títulos largos ya no corren por debajo de él */
padding-right: 72px;
}
/* Título como flex: el número queda como columna fija y un título
de 2+ líneas envuelve alineado a su derecha, sin meterse bajo
el círculo (pisaba en mobile con títulos largos) */
.page-id-2646 .accordion .e-n-accordion-item-title-text {
display: flex;
align-items: center;
gap: 8px;
}
.page-id-2646 .accordion .e-n-accordion-item-title-text .number {
flex: 0 0 auto;
}
.page-id-2646 .accordion div.elementor-element {
padding-top: 0 !important;
}
/* BG Items — anclados por CLASE del contenedor interno de cada
item (bv-ev-*) vía :has(), NO por #e-n-accordion-item-XXXX:
esos IDs los regenera Elementor al reimportar la plantilla y
los fondos se perdían. */
.page-id-2646 .accordion details {
background-size: cover;
margin-bottom: 24px; /* solo surte efecto en el último item */
}
/* Separación entre items: la regla propia de Elementor
(.elementor-widget-n-accordion .e-n-accordion-item:not(:last-child))
le gana en especificidad al margin-bottom de arriba y lo dejaba
en 0. Se fija su misma variable, que es el mecanismo nativo del
widget (equivale a Style → Accordion → Space between Items) */
.page-id-2646 .accordion {
--n-accordion-item-title-space-between: 24px;
}
.page-id-2646 .accordion details:has(.bv-ev-darte) {
background-image: url(/wp-content/uploads/2026/06/dropdown-DARTE.jpg);
background-position-x: right;
}
.page-id-2646 .accordion details:has(.bv-ev-speaking) {
background-image: url(/wp-content/uploads/2026/06/dropdown-speaking-engagements.jpg);
/* la foto está en la mitad derecha del JPG (izquierda = negro
sólido): sin esto, en mobile con el item abierto `cover`
escala por altura y solo se ve la zona negra */
background-position-x: right;
}
/* Los 4 siguientes usan fotos de la legacy como PROVISIONALES
(con velo oscuro para que el título blanco lea bien) hasta que
se produzcan las dropdown-*.jpg definitivas con el mismo
tratamiento que DARTE/Speaking */
.page-id-2646 .accordion details:has(.bv-ev-raven) {
background-image:
linear-gradient(rgba(8, 8, 12, 0.6), rgba(8, 8, 12, 0.6)),
url(/wp-content/uploads/2026/07/raven-day-legacy.jpg);
background-position: center;
}
.page-id-2646 .accordion details:has(.bv-ev-defi) {
background-image:
linear-gradient(rgba(8, 8, 12, 0.6), rgba(8, 8, 12, 0.6)),
url(/wp-content/uploads/2026/07/defi-tech-cms-legacy.jpg);
background-position: center;
}
.page-id-2646 .accordion details:has(.bv-ev-banking) {
background-image:
linear-gradient(rgba(8, 8, 12, 0.6), rgba(8, 8, 12, 0.6)),
url(/wp-content/uploads/2026/07/future-of-banking-rt-legacy.jpg);
background-position: center;
}
.page-id-2646 .accordion details:has(.bv-ev-sustainability) {
background-image:
linear-gradient(rgba(8, 8, 12, 0.6), rgba(8, 8, 12, 0.6)),
url(/wp-content/uploads/2026/07/sustainability-rt-legacy.jpg);
background-position: center;
}
.page-id-2646 .accordion .e-n-accordion-item-title-text {
color: var(--bv-white) !important;
font-weight: 600;
}
.page-id-2646 .accordion details {
border-radius: 22px;
}
.page-id-2646 .accordion .number {
background-color: var(--bv-gray);
padding: 10px 17px;
border-radius: 50%;
margin-right: 5px;
}
/* Número activo cuando el item está expandido */
.page-id-2646 .accordion .e-n-accordion-item[open] .number {
background-color: var(--bv-gold);
color: var(--bv-black);
}
/* ── Nested Accordion BlackVogel Events ── */
/* Ocultar SVGs default de Elementor */
.page-id-2646 .accordion .e-n-accordion-item-title-icon .e-opened svg,
.page-id-2646 .accordion .e-n-accordion-item-title-icon .e-closed svg {
display: none !important;
}
/* Círculo con chevron — estado cerrado */
.page-id-2646 .accordion .e-n-accordion-item-title-icon .e-closed::after {
content: "";
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.4);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: transform 0.3s ease;
}
/* Círculo con chevron — estado abierto (rotado) */
.page-id-2646 .accordion .e-n-accordion-item-title-icon .e-opened::after {
content: "";
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.8);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transform: rotate(180deg);
}
.page-id-2646 .accordion .e-n-accordion-item-title-icon {
position: absolute;
right: 22px;
top: 24px;
}
/* Mobile: si el título crece a 2+ líneas, el chevron se centra
verticalmente en vez de quedar clavado arriba (la rotación del
estado abierto va en el ::after, no choca con este transform) */
@media (max-width: 767px) {
.page-id-2646 .accordion .e-n-accordion-item-title-icon {
top: 50%;
transform: translateY(-50%);
}
}
/* ============================================================
EVENTS By BV CHILD PAGES - Sections
============================================================ */
.breadcrumb a {
color: var(--bv-black);
}
.breadcrumb .breadcrumb_last {
font-weight: 700;
}
.accordion-events summary,
.accordion-events .elementor-element {
border: none !important;
}
.accordion-events summary {
min-height: 108px !important;
}
.accordion-events details summary,
.accordion-events details .e-child {
padding: 0 40px !important;
}
@media (max-width: 922px) {
.accordion-events details summary,
.accordion-events details .e-child {
padding: 0 40px 0 20px !important;
}
}
.accordion-events details .e-child {
padding-bottom: 40px !important;
}
.accordion-events div.elementor-element {
padding-top: 0 !important;
}
.accordion-events .e-n-accordion-item-title-text {
font-weight: 600;
}
.accordion-events details {
border-radius: 22px;
border: solid 1px var(--bv-black);
margin-bottom: 24px !important;
}
.accordion-events .number {
background-color: var(--bv-gold);
padding: 10px 16px;
border-radius: 50%;
margin-right: 5px;
color: var(--bv-white);
}
@media (max-width: 922px) {
.accordion-events .number {
padding: 4px 10px;
}
}
/* Número activo cuando el item está expandido */
.accordion-events .e-n-accordion-item[open] .number {
background-color: var(--bv-gray);
color: var(--bv-white);
}
/* ── Nested Accordion BlackVogel Events ── */
/* Ocultar SVGs default de Elementor */
.accordion-events .e-n-accordion-item-title-icon .e-opened svg,
.accordion-events .e-n-accordion-item-title-icon .e-closed svg {
display: none !important;
}
/* Círculo con chevron — estado cerrado */
.accordion-events .e-n-accordion-item-title-icon .e-closed::after {
content: "";
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #72757a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='grey' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: transform 0.3s ease;
}
/* Círculo con chevron — estado abierto (rotado) */
.accordion-events .e-n-accordion-item-title-icon .e-opened::after {
content: "";
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #72757a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='grey' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transform: rotate(180deg);
}
.accordion-events .e-n-accordion-item-title-icon {
position: absolute;
right: 48px;
top: 36px;
}
.accordion-events .e-n-accordion-item-title-text {
text-transform: uppercase;
}
@media (max-width: 922px) {
.accordion-events .e-n-accordion-item-title-icon {
right: 20px;
}
}
/* ============================================================
DARTE — PÁGINAS HIJAS (override del acordeón)
Aplica SOLO en las hijas de DARTE Series vía la clase de body
parent-pageid-2270 (20+ páginas, sin editar cada una y sin
afectar el acordeón de Events).
Item abierto: fondo negro, título dorado, texto claro,
"Call to Action" dorado, contenido en UNA columna.
Cerrado: se mantiene el diseño actual.
============================================================ */
/* Transición suave del fondo en ambos estados */
.parent-pageid-2270 .accordion-events details.e-n-accordion-item {
transition: background-color 0.3s ease;
}
/* Item abierto: fondo negro */
.parent-pageid-2270 .accordion-events details.e-n-accordion-item[open] {
background: var(--bv-black) !important;
border-color: var(--bv-black) !important;
}
/* Título dorado al abrir */
.parent-pageid-2270
.accordion-events
details[open]
.e-n-accordion-item-title-text {
color: var(--bv-gold) !important;
}
/* Número: conserva el círculo dorado al abrir (anula el gris de Events) */
.parent-pageid-2270 .accordion-events .e-n-accordion-item[open] .number {
background-color: var(--bv-gold);
color: var(--bv-black);
}
/* Contenido: texto claro — pisa el color:#000000 inline importado de Wix */
.parent-pageid-2270 .accordion-events details[open] .e-con,
.parent-pageid-2270 .accordion-events details[open] .e-con p,
.parent-pageid-2270 .accordion-events details[open] .e-con span,
.parent-pageid-2270 .accordion-events details[open] .e-con li {
color: rgba(255, 255, 255, 0.7) !important;
}
/* "Call to Action" (h5) dorado */
.parent-pageid-2270 .accordion-events details[open] .e-con h5,
.parent-pageid-2270 .accordion-events details[open] .e-con h5 * {
color: var(--bv-gold) !important;
}
/* Chevron sobre negro: círculo y trazo claros */
.parent-pageid-2270
.accordion-events
details[open]
.e-n-accordion-item-title-icon
.e-opened::after {
border-color: rgba(236, 236, 236, 0.5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ececec' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Dos columnas → UNA (el contenido es un e-grid con 2 widgets de texto) */
.parent-pageid-2270 .accordion-events details > .e-con {
grid-template-columns: 1fr !important;
}
@media (max-width: 922px) {
h4 {
margin-top: 20px !important;
}
.logos {
flex-direction: column !important;
align-items: center;
}
.logos .e-child {
gap: 0;
padding: 0;
width: 100px;
}
}
/* ============================================================
MOBILE ≤922px
Ocultar imágenes decorativas, centrar contenido,
extender background image para que cubra el texto.
============================================================ */
@media (max-width: 922px) {
.ast-grid-right-section {
justify-content: flex-end;
}
/* ── HOMEPAGE: colapsar grid 2→1 col, ocultar pájaro ──────── */
#hero {
--e-con-grid-template-columns: repeat(1, 1fr) !important;
grid-template-columns: 1fr !important;
min-height: auto !important;
background-size: cover !important;
background-position: center top !important;
border-bottom-left-radius: 64px !important;
border-bottom-right-radius: 64px !important;
}
/* About Mariana, bordeado Hero*/
.page-id-1295 .elementor-element-ed2c386 {
border-bottom-left-radius: 64px !important;
border-bottom-right-radius: 64px !important;
}
h1 {
text-align: center !important;
}
/* Columna decorativa del pájaro (homepage) */
.elementor-element-5bec9f2 {
display: none !important;
}
/* Columna de texto: ocupa 100%, centra */
.elementor-element-718999f {
--width: 100% !important;
--content-width: 100% !important;
--text-align: center !important;
--align-items: center !important;
width: 100% !important;
padding-top: 20px !important;
text-align: center !important;
align-items: center !important;
}
/* ── ABOUT MARIANA: colapsar grid 2→1 col, ocultar portrait ── */
#hero-about {
--e-con-grid-template-columns: repeat(1, 1fr) !important;
grid-template-columns: 1fr !important;
min-height: auto !important;
background-size: cover !important;
background-position: center top !important;
}
/* Columna con el portrait de Mariana */
.elementor-element-a79c790 {
display: none !important;
}
/* Columna de texto: ocupa 100%, centra */
.elementor-element-a78edc9 {
--width: 100% !important;
--content-width: 100% !important;
--text-align: center !important;
--align-items: center !important;
width: 100% !important;
padding-top: 20px !important;
text-align: center !important;
align-items: center !important;
}
/* ── CONTACT: ocultar pájaro, centrar columnas restantes ───── */
.page-id-2042 .elementor-element-5954e52 {
min-height: auto !important;
background-size: cover !important;
background-position: center top !important;
--text-align: center !important;
text-align: center !important;
align-items: center !important;
}
/* Columna del pájaro decorativo (contact) */
.elementor-element-cfd1261 {
display: none !important;
}
/* Las dos columnas restantes se expanden al 100% y centran */
.page-id-2042 .elementor-element-1c583cb,
.page-id-2042 .elementor-element-3551e77 {
--width: 100% !important;
--text-align: center !important;
--align-items: center !important;
width: 100% !important;
padding-top: 20px !important;
text-align: center !important;
align-items: center !important;
}
/* ── DARTE WEBINARS: ocultar banner, colapsar grid interno ─── */
/* Padding único 20px a los lados (sobreescribe el global 16px) */
.page-id-2422 .e-con.e-parent > .e-con-inner {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
.page-id-2422 .elementor-element-85f2c38 {
min-height: auto !important;
background-size: cover !important;
background-position: center top !important;
}
/* Imagen del banner World Tour */
.page-id-2422 .elementor-element-174752f {
display: none !important;
}
/* Grid hero → 1 col, contenido centrado */
.page-id-2422 .elementor-element-d5f9a72 {
--e-con-grid-template-columns: repeat(1, 1fr) !important;
grid-template-columns: 1fr !important;
padding-top: 20px !important;
}
/* Grids 2-col de la sección roja y videos → 1 col */
.page-id-2422 .elementor-element-202d7b3,
.page-id-2422 .elementor-element-05d48af,
.page-id-2422 .elementor-element-3a287ae,
.page-id-2422 .elementor-element-a92f73a {
--e-con-grid-template-columns: 1fr !important;
grid-template-columns: 1fr !important;
}
/* Centrar todo el contenido de la página */
.page-id-2422 .e-con {
text-align: center !important;
--text-align: center !important;
align-items: stretch !important;
--align-items: stretch !important;
}
/* Quitar padding derecho de los widgets de texto */
.page-id-2422 .elementor-element-3eec5bc > .elementor-widget-container,
.page-id-2422 .elementor-element-ce73337 > .elementor-widget-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Fila título + link de cada sesión: centrar en vez de space-between */
.page-id-2422 .elementor-element-f5027d3,
.page-id-2422 .elementor-element-a5b2ca0,
.page-id-2422 .elementor-element-ecee462 {
--justify-content: center !important;
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
/* ── HEROES DE COLUMNA ÚNICA: centrar, extender bg, padding ── */
.elementor-element-c03a638, /* Services */
.elementor-element-1dae522, /* About Us */
.elementor-element-d18d7a5, /* DARTE Series */
.elementor-element-60ef657, /* Events */
.elementor-element-1a16409, /* Sustainability / Policy / Publications */
.elementor-element-f613d56 {
/* Speaking */
min-height: auto !important;
background-size: cover !important;
background-position: center top !important;
--text-align: center !important;
text-align: center !important;
align-items: center !important;
}
/* .e-con-inner de los heroes de columna única: padding + centrado */
.elementor-element-c03a638 > .e-con-inner,
.elementor-element-1dae522 > .e-con-inner,
.elementor-element-d18d7a5 > .e-con-inner,
.elementor-element-60ef657 > .e-con-inner,
.elementor-element-1a16409 > .e-con-inner,
.elementor-element-f613d56 > .e-con-inner {
padding-top: 20px !important;
align-items: center !important;
--align-items: center !important;
text-align: center !important;
}
}
/* ============================================================
DARTE WEBINARS — páginas hijas (3 duplicados de la plantilla)
Sin IDs de página: el scope lo dan las clases custom puestas
en los widgets de la plantilla (bv_darte-digital_*, bv_watch__*,
bv_resent__*), que viajan con cada duplicado. La regla de
página completa (row-gap) se limita con body:has() al hero
del webinar — aplica solo en páginas que lo contengan.
============================================================ */
body:has(.bv_darte-digital_h1) .e-con-inner {
row-gap: 0 !important;
}
.bv_darte-digital_h1 h1,
.bv_darte-digital_h2 h2 {
letter-spacing: -0.6%;
}
.bv_darte-digital_h1 h1 {
font-size: 3.75rem;
}
.bv_darte-digital_h2 h2 {
font-size: 2.5rem;
}
.bv_watch__heading h6 {
color: var(--bv-black) !important;
font-size: 2rem;
text-transform: none !important;
}
.bv_watch__heading h6 a {
text-decoration: underline;
}
.bv_resent__heading h6 {
color: var(--bv-black) !important;
}
/* ============================================================
DAO — Decentralized Autonomous Organizations (página)
Incluye las CONTRIBUTION CARDS: dos tarjetas gemelas
(variante dorada y variante negra) con etiqueta + divisor,
título y texto. Reutilizables en cualquier página.
Contrato de clases (Elementor → Avanzado → Clases CSS):
.bv-contrib-grid (contenedor de las 2 tarjetas)
└─ .bv-contrib-card + --gold | --dark (cada tarjeta)
.bv-contrib-card__label ("CONTRIBUTION 01")
.bv-contrib-card__title (título)
.bv-contrib-card__text (párrafo)
============================================================ */
/* Headings de sección de la página DAO: en el mockup son negros,
en MAYÚSCULAS y con tracking — el uppercase lo hace CSS, no hace
falta re-tipear los textos. El !important le gana al color dorado
puesto a nivel de widget en Elementor.
Los selectores elementor-element-XXX cubren los 3 headings que no
tienen la clase bv_DAO__h3 (BlockStand / DC-BAS / Outreach); si un
día se les agrega la clase en Elementor, esos hashes sobran. */
.bv_DAO__h3,
.bv_DAO__h3 *,
.page-id-3894 .elementor-element-20a2069 .elementor-heading-title,
.page-id-3894 .elementor-element-762f280 .elementor-heading-title,
.page-id-3894 .elementor-element-bb5ad94 .elementor-heading-title {
color: var(--bv-black) !important;
font-size: 22px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
}
@media (max-width: 768px) {
.bv_DAO__h3,
.bv_DAO__h3 *,
.page-id-3894 .elementor-element-20a2069 .elementor-heading-title,
.page-id-3894 .elementor-element-762f280 .elementor-heading-title,
.page-id-3894 .elementor-element-bb5ad94 .elementor-heading-title {
font-size: 18px !important;
}
}
/* Ritmo vertical de la página DAO (todo scoped a .page-id-3894).
Mismo aire arriba/abajo en las 3 secciones de contenido — esto
reemplaza los parches puntuales (margen del heading UNCITRAL y de
la última caja): al acolchar la sección, primer y último elemento
quedan espaciados parejo automáticamente.
7a871ab = sección UNCITRAL
7e9dbae = sección BlockStand (num cards)
7f9bd40 = sección Multistakeholder + Outreach */
.page-id-3894 .elementor-element-7a871ab,
.page-id-3894 .elementor-element-7e9dbae,
.page-id-3894 .elementor-element-7f9bd40 {
padding-top: 70px !important;
padding-bottom: 80px !important;
}
/* "Outreach & Education" abre subsección dentro de la misma sección:
corte más grande que el gap normal entre bloques */
.page-id-3894 .elementor-element-bb5ad94 {
margin-top: 48px;
}
/* Las grillas de tarjetas respiran un poco más que los párrafos
que las rodean */
.page-id-3894 .bv-contrib-grid,
.page-id-3894 .bv-num-grid {
margin-top: 16px;
margin-bottom: 20px;
}
/* Caja DOCUMENT LINKS: mismo aire extra que las grillas */
.page-id-3894 .elementor-element-5f02f14 {
margin-top: 16px;
margin-bottom: 8px;
}
@media (max-width: 768px) {
.page-id-3894 .elementor-element-7a871ab,
.page-id-3894 .elementor-element-7e9dbae,
.page-id-3894 .elementor-element-7f9bd40 {
padding-top: 44px !important;
padding-bottom: 52px !important;
}
.page-id-3894 .elementor-element-bb5ad94 {
margin-top: 32px;
}
}
/* Divisor dorado degradado (bajo el hero y al cierre de secciones,
como en el mockup). Ponerlo como clase de un contenedor vacío de
ancho completo. Bordes transparentes: sirve sobre cualquier fondo
(la variante .bv-border-top-services tiene bordes #ececec fijos). */
.bv-divider-gold {
width: 100%;
height: 8px;
background: linear-gradient(
to right,
transparent 0%,
var(--bv-gold) 50%,
transparent 100%
);
}
/* Contenedor: 2 columnas iguales */
.bv-contrib-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: stretch;
}
/* Tarjeta base */
.bv-contrib-card {
border-radius: 10px;
padding: 28px 32px 32px;
}
/* Textos de las tarjetas siempre a la izquierda
(contrarresta el centrado global de headings en móvil) */
.bv-contrib-card .elementor-heading-title,
.bv-contrib-card .bv-contrib-card__text,
.bv-contrib-card .bv-contrib-card__text * {
text-align: left !important;
}
/* Etiqueta "CONTRIBUTION 0X" + divisor debajo
(tamaños/pesos por CSS; el font-family se controla en Elementor) */
.bv-contrib-card__label {
position: relative;
padding-bottom: 14px;
margin-bottom: 18px;
}
.bv-contrib-card__label,
.bv-contrib-card__label * {
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
}
/* anula el margin del heading interno (empujaría el divisor) */
.bv-contrib-card__label * {
margin: 0 !important;
}
.bv-contrib-card__label::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
}
/* Título */
.bv-contrib-card__title {
margin-bottom: 12px;
}
.bv-contrib-card__title,
.bv-contrib-card__title * {
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1.35;
}
/* Texto */
.bv-contrib-card__text,
.bv-contrib-card__text * {
font-size: 15px !important;
line-height: 1.7;
}
/* ── Variante DORADA ── */
.bv-contrib-card--gold {
background: var(--bv-gold);
}
.bv-contrib-card--gold .bv-contrib-card__label,
.bv-contrib-card--gold .bv-contrib-card__label * {
color: var(--bv-cream) !important;
}
.bv-contrib-card--gold .bv-contrib-card__label::after {
background: rgba(236, 236, 236, 0.45);
}
.bv-contrib-card--gold .bv-contrib-card__title,
.bv-contrib-card--gold .bv-contrib-card__title *,
.bv-contrib-card--gold .bv-contrib-card__text,
.bv-contrib-card--gold .bv-contrib-card__text * {
color: var(--bv-black) !important;
}
/* ── Variante NEGRA ── */
.bv-contrib-card--dark {
background: var(--bv-black);
}
.bv-contrib-card--dark .bv-contrib-card__label,
.bv-contrib-card--dark .bv-contrib-card__label * {
color: var(--bv-gold) !important;
}
.bv-contrib-card--dark .bv-contrib-card__label::after {
background: rgba(203, 161, 110, 0.4);
}
.bv-contrib-card--dark .bv-contrib-card__title,
.bv-contrib-card--dark .bv-contrib-card__title * {
color: var(--bv-white) !important;
}
.bv-contrib-card--dark .bv-contrib-card__text,
.bv-contrib-card--dark .bv-contrib-card__text * {
color: rgba(255, 255, 255, 0.75) !important;
}
/* ── Responsive: apilar en móvil ── */
@media (max-width: 768px) {
.bv-contrib-grid {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
DAO — NUM CARDS (grid 2×2)
Tarjetas negras con número grande + divisor, título dorado,
texto claro y botón abajo (reutiliza .bv-btn-outline-gold).
El CSS define colores, tamaños y pesos; el font-family se
controla desde Elementor.
Contrato de clases:
.bv-num-grid (contenedor de las 4 tarjetas)
└─ .bv-num-card ×4 (cada tarjeta)
.bv-num-card__num ("01")
.bv-num-card__title (título)
.bv-num-card__text (párrafo)
botón → clase global bv-btn-outline-gold
============================================================ */
/* Grid 2×2 */
.bv-num-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: stretch;
}
/* Tarjeta: columna flex para anclar el botón abajo */
.bv-num-card {
display: flex;
flex-direction: column;
background: var(--bv-black);
border-radius: 10px;
padding: 28px 32px 32px;
}
/* Textos siempre a la izquierda (contrarresta centrado móvil global) */
.bv-num-card .elementor-heading-title,
.bv-num-card .bv-num-card__text,
.bv-num-card .bv-num-card__text * {
text-align: left !important;
}
/* Número + divisor debajo */
.bv-num-card__num {
position: relative;
padding-bottom: 14px;
margin-bottom: 18px;
}
.bv-num-card__num::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--bv-gold);
}
.bv-num-card__num,
.bv-num-card__num * {
color: var(--bv-gray-light) !important;
font-size: 56px !important;
font-weight: 400 !important;
line-height: 1;
/* anula el margin que el tema mete al heading interno:
empujaba el divisor lejos del número */
margin: 0 !important;
}
/* Título dorado */
.bv-num-card__title,
.bv-num-card__title * {
color: var(--bv-gold) !important;
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1.35;
}
.bv-num-card__title {
margin-bottom: 14px;
}
/* Texto blanco */
.bv-num-card__text,
.bv-num-card__text * {
color: var(--bv-white) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.7;
}
/* Fallback: cualquier párrafo dentro de la tarjeta legible sobre negro
(evita texto negro-sobre-negro si a un widget le falta la clase) */
.bv-num-card .elementor-widget-text-editor p {
color: var(--bv-white);
}
/* Botón dentro de la tarjeta: letra dorada (scoped — la clase global
bv-btn-outline-gold mantiene texto blanco en otros contextos) */
.bv-num-card .bv-btn-outline-gold a,
.bv-num-card .bv-btn-outline-gold .elementor-button {
color: var(--bv-gold) !important;
}
/* Hover del botón en la tarjeta: glow dorado leve (mismo tono que el
borde), sin relleno — la letra queda dorada siempre, nunca puede
quedar ilegible sobre la tarjeta negra */
.bv-num-card .bv-btn-outline-gold a:hover,
.bv-num-card .bv-btn-outline-gold .elementor-button:hover {
background-color: transparent !important;
color: var(--bv-gold) !important;
box-shadow: 0 0 12px rgba(203, 161, 110, 0.45) !important;
}
/* Tamaños en móvil */
@media (max-width: 768px) {
.bv-num-card__num,
.bv-num-card__num * {
font-size: 40px !important;
}
.bv-num-card__title,
.bv-num-card__title * {
font-size: 18px !important;
}
}
/* Botón anclado al fondo de la tarjeta (tarjetas de igual altura) */
.bv-num-card > .elementor-widget-button,
.bv-num-card > .e-con:last-child {
margin-top: auto !important;
padding-top: 20px;
}
/* ── Responsive: 2×2 → 1 columna ── */
@media (max-width: 768px) {
.bv-num-grid {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
GLOBAL — MOBILE ≤922px
Padding lateral para todas las páginas: evita que los
contenedores lleguen hasta el borde de la pantalla.
============================================================ */
@media (max-width: 922px) {
.e-con.e-parent > .e-con-inner {
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
/* Botones centrados globalmente en mobile */
.elementor-widget-button .elementor-widget-container {
text-align: center !important;
}
.elementor-1287
.elementor-element.elementor-element-cd0d97a:not(
.elementor-motion-effects-element-type-background
) {
background-position: center;
}
.bv-awards {
padding: 0 !important;
}
.bv-awards__arrow,
.bv-awards__dots {
display: none;
}
.page-id-2646
.elementor-2646
.elementor-element.elementor-element-f0f17c8
> .elementor-widget-container {
margin: 0px 0px 0px 0px;
padding: 20px;
}
.page-id-2270
.elementor-2270
.elementor-element.elementor-element-d18d7a5.e-con {
padding: 20px;
}
.page-id-2270 .elementor-element-da05e51 {
margin-left: 0 !important;
}
.page-id-2270
.elementor-2270
.elementor-element.elementor-element-60012ae
> .elementor-widget-container {
padding: 0 !important;
}
.page-id-2270 .elementor-element-599fe05 {
margin-top: 20px !important;
}
.page-id-2270 .elementor-2270 .elementor-element.elementor-element-fd939e1 {
margin: 0 !important;
}
/* Round Tables: anclado a la clase (el ID de sección cambia al
reimportar la plantilla; antes era .elementor-element-26002d5) */
.page-id-2270 .bv_round-tables p {
margin-bottom: 70px !important;
}
.page-id-2270 .elementor-element-4d161f9 .e-con-inner {
padding: 30px 0 !important;
}
[data-section="section-header-mobile-trigger"]
.ast-button-wrap
.mobile-menu-toggle-icon
.ast-mobile-svg {
fill: var(--bv-gold) !important;
}
[data-section="section-header-mobile-trigger"]
.ast-button-wrap
.ast-mobile-menu-trigger-fill {
background: var(--bv-cream) !important;
border: none !important;
}
.page-id-2422
.elementor-2422
.elementor-element.elementor-element-3eec5bc
> .elementor-widget-container {
padding: 0 !important;
}
.page-id-1885 .elementor-element-1057846 .elementor-widget-container {
padding: 0 !important;
}
}
/* ============================================================
OUR SERVICES — ADVOCACY MODAL (bv-svc-modal)
Modal crema (mockup Figma) que abre el botón del ítem
"Advocacy and awareness campaigns" del dropdown de servicios.
Contrato de clases (Elementor):
Sección top-level (última de la página) . . bv-svc-modal ← overlay
└─ contenedor hijo . . . . . . . . . . . bv-svc-modal__dialog
botón "✕" . . . . . . . . . . . . . bv-svc-modal__close
heading . . . . . . . . . . . . . . bv-svc-modal__title
text editor (párrafos) . . . . . . . bv-svc-modal__text
contenedor de 3 columnas . . . . . . bv-svc-modal__grid
└─ por columna: imagen + botón . . bv-svc-modal__more
Trigger: agregar la clase bv-svc-modal-open al botón del ítem
Advocacy (se suma a bv-btn-outline-gold, separada por espacio).
El JS (abrir/cerrar, Esc, click afuera) vive en functions.php.
============================================================ */
/* Overlay: oculto por defecto, cubre el viewport al abrir */
.bv-svc-modal {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(26, 28, 20, 0.65);
align-items: center;
justify-content: center;
padding: 24px;
}
.bv-svc-modal.is-open {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Neutraliza el wrapper boxed de Elementor dentro del overlay */
.bv-svc-modal > .e-con-inner {
max-width: none;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* En el editor de Elementor el modal se muestra en flujo normal
para poder editarlo (el editor agrega esta clase al body) */
.elementor-editor-active .bv-svc-modal {
display: block;
position: static;
background: none;
padding: 0;
}
/* Caja crema (el crema cálido del mockup; --bv-cream es más frío) */
.bv-svc-modal__dialog {
position: relative;
background: #efede8;
border-radius: 24px;
width: min(1200px, 100%);
max-height: 85vh;
overflow-y: auto;
padding: 56px 64px;
/* margin:auto centra en ambos ejes aunque Elementor pise el
align/justify del contenedor padre */
margin: auto !important;
/* Elementor fuerza flex-wrap:wrap en mobile (--flex-wrap-mobile);
con max-height limitada la columna envolvía a una 2ª columna
cortada por el overflow. Siempre una sola columna sin wrap. */
flex-direction: column !important;
flex-wrap: nowrap !important;
animation: bvModalIn 0.25s ease; /* keyframes del modal grid */
}
/* Los hijos no se encogen: si no caben, desbordan y el dialog scrollea */
.bv-svc-modal__dialog > * {
flex-shrink: 0;
}
/* Bloqueo del scroll de fondo mientras está abierto (lo pone el JS) */
body.bv-modal-lock {
overflow: hidden;
}
/* Botón cerrar: círculo dorado con ✕ oscura.
top = padding-top del dialog y alto 48px = línea del título 42px,
así queda alineado ópticamente con el heading */
.bv-svc-modal__close {
position: absolute !important;
top: 56px;
right: 64px;
z-index: 2;
width: auto !important;
}
.bv-svc-modal__close a,
.bv-svc-modal__close .elementor-button {
display: flex !important;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50% !important;
background: var(--bv-gold) !important;
color: var(--bv-black) !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1;
padding: 0 !important;
border: none !important;
cursor: pointer;
transition: background 0.2s ease;
}
.bv-svc-modal__close a:hover,
.bv-svc-modal__close .elementor-button:hover {
background: var(--bv-gold-dark) !important;
color: var(--bv-black) !important;
}
/* Título dorado (serif desde Elementor; tamaño/peso por CSS) */
.bv-svc-modal__title,
.bv-svc-modal__title * {
color: var(--bv-gold) !important;
font-size: 42px !important;
font-weight: 500 !important;
line-height: 1.15;
text-align: left !important;
}
.bv-svc-modal__title {
margin-bottom: 20px;
/* aire para no chocar con la ✕ */
padding-right: 72px;
}
/* Párrafos */
.bv-svc-modal__text,
.bv-svc-modal__text * {
color: var(--bv-black) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.7;
text-align: left !important;
}
/* Fila de 3 imágenes */
.bv-svc-modal__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start;
margin-top: 16px;
}
.bv-svc-modal__grid img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
}
/* CTA "MORE →" bajo cada imagen, alineado a la derecha */
.bv-svc-modal__more {
margin-top: 10px;
text-align: right;
}
.bv-svc-modal__more a,
.bv-svc-modal__more .elementor-button {
display: inline-flex !important;
align-items: center;
gap: 6px;
background: transparent !important;
border: none !important;
padding: 0 !important;
color: var(--bv-black) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none !important;
transition: color 0.2s ease;
}
.bv-svc-modal__more a svg,
.bv-svc-modal__more a i,
.bv-svc-modal__more .elementor-button-icon,
.bv-svc-modal__more .elementor-button-icon svg {
color: var(--bv-red-brick);
fill: var(--bv-red-brick);
width: 1em;
height: auto;
transition: transform 0.2s ease;
}
.bv-svc-modal__more a:hover {
color: var(--bv-red-brick) !important;
}
.bv-svc-modal__more a:hover svg,
.bv-svc-modal__more a:hover i,
.bv-svc-modal__more a:hover .elementor-button-icon svg {
transform: translateX(3px);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.bv-svc-modal__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.bv-svc-modal {
padding: 12px;
}
/* Caja compacta: máx. 80% del alto de pantalla, todo reducido
para que las imágenes entren en el primer vistazo */
.bv-svc-modal__dialog {
padding: 24px 18px;
border-radius: 14px;
max-height: 80vh;
}
.bv-svc-modal__close {
top: 20px;
right: 18px;
}
.bv-svc-modal__close a,
.bv-svc-modal__close .elementor-button {
width: 34px;
height: 34px;
font-size: 15px !important;
}
.bv-svc-modal__title,
.bv-svc-modal__title * {
font-size: 22px !important;
}
.bv-svc-modal__title {
padding-right: 46px;
margin-bottom: 12px;
}
.bv-svc-modal__text,
.bv-svc-modal__text * {
font-size: 13px !important;
line-height: 1.55;
}
.bv-svc-modal__grid {
gap: 14px;
margin-top: 12px;
}
/* Blindaje: que ningún ancho/alto de Elementor esconda la imagen */
.bv-svc-modal__grid .elementor-widget-image,
.bv-svc-modal__grid .elementor-widget-image .elementor-widget-container {
width: 100% !important;
}
.bv-svc-modal__grid img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.bv-svc-modal__more {
margin-top: 6px;
}
.bv-svc-modal__more a,
.bv-svc-modal__more .elementor-button {
font-size: 11px !important;
}
}
/* ============================================================
THE RAVEN DAY · BERLIN 2026 (página 3979) — QA vs Figma
La página no usa clases custom; se estiliza por estructura:
- h4 directo en sección (e-parent > e-con-inner) . headings
de sección → rojos Title Case (Figma)
- h4 con __width-initial . . . . "The first edition…" (dorado)
- .e-grid . . . . . . . . . . . las 4 cards de paneles
Colores muestreados del Figma: rojo #F43C38 ≈ --bv-red,
dorado #C8A06C ≈ --bv-gold.
============================================================ */
/* ── Hero: título blanco (el h1 global lo pintaba negro), en 2
líneas como el Figma, con sombra para leerse sobre el collage ── */
.page-id-3979 h1.elementor-heading-title {
color: #ffffff !important;
font-size: 48px !important;
max-width: 17ch;
margin-inline: auto;
text-shadow:
0 2px 14px rgba(0, 0, 0, 0.55),
0 0 2px rgba(0, 0, 0, 0.4);
}
/* ── Headings de sección (What We Discussed / Common Threads /
Looking Ahead): rojo, Title Case, Inter bold, tamaño Figma ── */
.page-id-3979
.e-parent
> .e-con-inner
> .elementor-widget-heading
h4.elementor-heading-title {
color: var(--bv-red) !important;
text-transform: none !important;
font-family: var(--bv-font-body) !important;
font-weight: 700 !important;
font-size: 2rem !important;
margin-top: 36px;
margin-bottom: 12px;
}
/* "The first edition…" es la excepción: dorado, sentence case */
.page-id-3979
.e-parent
> .e-con-inner
> .elementor-widget__width-initial.elementor-widget-heading
h4.elementor-heading-title {
color: var(--bv-gold) !important;
font-size: 1.625rem !important;
margin-top: 48px;
}
/* ── Cards de paneles: título dorado con letter-spacing (venía
negro por override de Elementor) ── */
.page-id-3979 .e-grid h4.elementor-heading-title {
color: var(--bv-gold) !important;
font-size: 1.375rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em;
}
/* "Discussion highlights": dorado ok, pero Inter bold (salía en
serif por el h5 global) y al tamaño del cuerpo como en Figma */
.page-id-3979 .e-grid h5.elementor-heading-title {
color: var(--bv-gold) !important;
font-family: var(--bv-font-body) !important;
font-weight: 700 !important;
font-size: 1rem !important;
}
/* ── Espaciados: el Figma respira más — aire entre cards y
padding interno más generoso ──
(:not excluye el grid de speakers 670509e, que es otro e-grid) */
.page-id-3979 .e-grid:not(.elementor-element-670509e) {
margin-top: 14px !important;
margin-bottom: 14px !important;
}
/* ── Grid de speakers (670509e): Elementor lo deja en 9 columnas
también en tablet y 1 sola en mobile — columnas legibles ── */
@media (min-width: 768px) and (max-width: 1024px) {
.page-id-3979 .elementor-element.elementor-element-670509e {
grid-template-columns: repeat(6, 1fr) !important;
}
}
.page-id-3979 .elementor-element.elementor-element-6618c0ac,
.page-id-3979 .elementor-element.elementor-element-5140ea0,
.page-id-3979 .elementor-element.elementor-element-98db359,
.page-id-3979 .elementor-element.elementor-element-fa0ab8d {
padding: 32px 40px !important;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.page-id-3979 h1.elementor-heading-title {
font-size: 1.75rem !important;
}
.page-id-3979
.e-parent
> .e-con-inner
> .elementor-widget-heading
h4.elementor-heading-title {
font-size: 1.5rem !important;
margin-top: 24px;
}
.page-id-3979
.e-parent
> .e-con-inner
> .elementor-widget__width-initial.elementor-widget-heading
h4.elementor-heading-title {
font-size: 1.25rem !important;
}
/* La barra dorada de las cards desaparecía en mobile (el
contenedor interno tapa el fondo dorado al ir a 100%).
Solo para los 4 paneles — NO para el grid de speakers */
.page-id-3979 .e-grid:not(.elementor-element-670509e) {
border-left: 6px solid var(--bv-gold);
}
/* Speakers: 3 por fila en mobile (las cards nativas son de
253px, a ~115px los nombres siguen legibles) */
.page-id-3979 .elementor-element.elementor-element-670509e {
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
.page-id-3979 .elementor-element-670509e .elementor-widget-image img {
width: 100%;
height: auto;
}
.page-id-3979 .elementor-element.elementor-element-6618c0ac,
.page-id-3979 .elementor-element.elementor-element-5140ea0,
.page-id-3979 .elementor-element.elementor-element-98db359,
.page-id-3979 .elementor-element.elementor-element-fa0ab8d {
padding: 24px 20px !important;
}
}
/* ── Slider de fotos (.bv_raven-day__slider) — transición smooth ──
Swiper solo declara transition-property; el timing quedaba en el
`ease` default del navegador y se veía mecánico. Curva inOut con
frenada suave. La DURACIÓN no puede ir por CSS (Swiper la escribe
inline y forzarla con !important rompe los saltos 0ms del loop
infinito); si 500ms se queda corto, subirla desde el widget:
Elementor → Image Carousel → Additional Options → Transition Speed */
.bv_raven-day__slider .swiper-wrapper {
transition-timing-function: cubic-bezier(0.45, 0.05, 0.15, 1);
}
/* ============================================================
PUBLICATIONS & REPORTS (página 2516) — estructura de las cards
El contenido de los widgets no lleva
/; la estructura
pedida (título / fecha / línea en blanco / descripción) se
impone por CSS volviendo bloque el inicial (título)
y el span de fecha (.bv_publrep__date). Aplica igual a cards
con y sin fecha, presentes y futuras.
============================================================ */
/* Título: rompe línea tras él; en cards SIN fecha deja el hueco
antes de la descripción. Solo el strong INICIAL del widget
(directo o dentro del primer ), no el del botón Read */
.page-id-2516
.elementor-widget-text-editor
.elementor-widget-container
> strong:first-child,
.page-id-2516
.elementor-widget-text-editor
.elementor-widget-container
> p:first-child
> strong:first-child {
display: block;
margin-bottom: 0.9em;
}
/* Con fecha: la fecha va pegada justo debajo del título */
.page-id-2516
.elementor-widget-text-editor
.elementor-widget-container
> strong:first-child:has(+ .bv_publrep__date),
.page-id-2516
.elementor-widget-text-editor
.elementor-widget-container
> p:first-child
> strong:first-child:has(+ .bv_publrep__date) {
margin-bottom: 0;
}
/* Fecha en su propia línea + "línea en blanco" antes del texto */
.page-id-2516 .bv_publrep__date {
display: block;
margin-bottom: 0.9em;
}
/* El "Read >" va en un div absolute (bottom: 5px) anclado al
widget: en cards con mucho texto se montaba sobre las últimas
líneas (Climate Adaptation, ESMA). Se le reserva una franja
inferior solo en los widgets que tienen ese botón */
.page-id-2516
.elementor-widget-text-editor
.elementor-widget-container:has(> div[style*="absolute"]) {
padding-bottom: 2.5em;
}
/* ============================================================
DARTE HIJAS — LOGOS COMPACTOS (todas las mesas)
Las filas .logos venían con hijos de ancho fijo (~178px) y
tamaños de logo dispares: huecos enormes y el logo DARTE
gigante en su propia línea. Se compactan: wrap centrado, gap
uniforme y altura visual normalizada por logo (los thumbs
-ropl8/-rpe2 de Elementor y el logo DARTE traen aire interno
horneado, por eso su tope es mayor). Validado en vivo en
Vaduz y París (16/07/2026).
============================================================ */
.parent-pageid-2270 .logos {
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 16px 36px !important;
}
.parent-pageid-2270 .logos > .e-con {
width: auto !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
.parent-pageid-2270 .logos img {
max-height: 56px !important;
width: auto !important;
height: auto !important;
max-width: 170px !important;
object-fit: contain !important;
}
.parent-pageid-2270 .logos img[src*="ropl8"],
.parent-pageid-2270 .logos img[src*="rpe2"] {
max-height: 96px !important;
}
.parent-pageid-2270 .logos img[src*="Full-dark"] {
max-height: 84px !important;
}
/* ============================================================
DARTE HIJAS — MERGE STAMP (.bv_stamp)
Estampa superpuesta arriba-derecha de la foto hero (Madrid,
Madrid 2.0, Buenos Aires, São Paulo). El widget va como
hermano DESPUÉS de la imagen hero, con la clase bv_stamp.
El top de 72px compensa lo que hay antes de la foto en el
contenedor (padding 10 + breadcrumb 22 + gap 20); plantilla
compartida por todas las mesas. Validado en vivo (16/07/2026).
============================================================ */
.parent-pageid-2270 .e-con-inner:has(> .bv_stamp),
.parent-pageid-2270 .e-con:has(> .bv_stamp) {
position: relative;
}
.parent-pageid-2270 .bv_stamp {
position: absolute !important;
top: 72px;
right: 30px;
width: auto !important;
z-index: 5;
}
.parent-pageid-2270 .bv_stamp img {
width: 110px;
height: auto;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
@media (max-width: 767px) {
.parent-pageid-2270 .bv_stamp {
top: 64px;
right: 16px;
}
.parent-pageid-2270 .bv_stamp img {
width: 72px;
}
}
/* ============================================================
DARTE HIJAS — "Download the Report" centrado
Único widget botón de cada mesa (verificado en varias);
pedido del feedback: centrado en todas las páginas.
============================================================ */
.parent-pageid-2270 .elementor-widget-button .elementor-widget-container {
text-align: center;
}
/* ============================================================
FOOTER — LINKS LEGALES (.bv-footer-legal)
Privacy Policy + Impressum en gris tenue bajo el bloque de
contacto, como el Figma. El HTML vive en un widget HTML del
footer:
============================================================ */
.bv-footer-legal {
display: flex;
gap: 60px;
margin-top: 32px;
}
.bv-footer-legal a {
color: var(--bv-cream) !important;
font-family: var(--bv-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
transition: color 0.2s ease;
}
.bv-footer-legal a:hover {
color: var(--bv-gold) !important;
}
@media (max-width: 767px) {
.bv-footer-legal {
gap: 32px;
margin-top: 24px;
/* en mobile el footer apila centrado; los links legales igual */
justify-content: center;
}
}