/* Start custom CSS for html, class: .elementor-element-bea29ef *//* =========================================================
OXFAM COLOMBIA
VOZ Y LIDERAZGO DE LAS MUJERES
SLIDER VLM — VERSIÓN CONSOLIDADA
========================================================= */
/* =========================================================
01. VARIABLES Y CONTENEDOR
========================================================= */
.oxfam-vlm-slider {
--vlm-green: #44841A;
--vlm-green-dark: #235B13;
--vlm-green-deep: #123E22;
--vlm-lime: #BECE45;
--vlm-pink: #E43989;
--vlm-pink-dark: #C72A73;
--vlm-blue: #0B83C6;
--vlm-blue-dark: #075C8D;
--vlm-orange: #F16E22;
--vlm-purple: #A91DBB;
--vlm-yellow: #FFD500;
--vlm-white: #FFFFFF;
--vlm-black: #111111;
position: relative;
width: 100%;
height: clamp(500px, 37vw, 670px);
margin: 0;
padding: 0;
overflow: hidden;
background: var(--vlm-green-dark);
font-family:
"T-StarPro",
"T-Star Pro",
"Roboto",
Arial,
sans-serif;
isolation: isolate;
}
.oxfam-vlm-slider *,
.oxfam-vlm-slider *::before,
.oxfam-vlm-slider *::after {
box-sizing: border-box;
}
/* =========================================================
02. VIEWPORT
========================================================= */
.oxfam-vlm-slider__viewport,
.oxfam-vlm-slider__track {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* =========================================================
03. SLIDES / FADE
========================================================= */
.oxfam-vlm-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
transform: scale(1.012);
transition:
opacity 850ms ease,
transform 1800ms ease,
visibility 0s linear 850ms;
}
.oxfam-vlm-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
transform: scale(1);
transition:
opacity 850ms ease,
transform 6500ms ease,
visibility 0s linear 0s;
}
/* =========================================================
04. LINK
========================================================= */
.oxfam-vlm-slide__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
color: #FFFFFF !important;
text-decoration: none !important;
}
.oxfam-vlm-slide__link:hover,
.oxfam-vlm-slide__link:focus,
.oxfam-vlm-slide__link:visited {
color: #FFFFFF !important;
text-decoration: none !important;
}
/* =========================================================
05. FOTOGRAFÍAS GENERALES
========================================================= */
.oxfam-vlm-slide__image {
position: absolute;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover;
z-index: 0;
transform: scale(1.01);
transition:
transform 8s ease,
opacity 500ms ease;
}
.oxfam-vlm-slide.is-active
.oxfam-vlm-slide__image {
transform: scale(1.04);
}
/* =========================================================
06. ENCUADRE ASOMI
========================================================= */
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__image {
object-position: 27% center;
}
/* =========================================================
07. ENCUADRE ENCUENTRO
========================================================= */
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__image {
object-position: 61% center;
}
/* =========================================================
08. CAJA DE HERRAMIENTAS
TRATAMIENTO ESPECIAL PARA ILUSTRACIÓN
========================================================= */
.oxfam-vlm-slide--herramientas {
background:
linear-gradient(
120deg,
#205D18 0%,
#347D1E 46%,
#44841A 100%
);
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__image {
inset: auto !important;
top: 4% !important;
right: 2.5% !important;
bottom: 4% !important;
left: auto !important;
width: 59% !important;
height: 92% !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
opacity: 1;
z-index: 1;
}
.oxfam-vlm-slide--herramientas.is-active
.oxfam-vlm-slide__image {
transform: none !important;
}
/* =========================================================
09. OVERLAY GENERAL
========================================================= */
.oxfam-vlm-slide__overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* ASOMI */
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__overlay {
background:
linear-gradient(
90deg,
rgba(10, 55, 28, 0.04) 0%,
rgba(10, 55, 28, 0.10) 38%,
rgba(10, 55, 28, 0.63) 60%,
rgba(10, 55, 28, 0.96) 100%
);
}
/* COSECHAMOS */
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__overlay {
background:
linear-gradient(
90deg,
rgba(4, 78, 122, 0.96) 0%,
rgba(6, 116, 180, 0.88) 34%,
rgba(6, 116, 180, 0.33) 59%,
rgba(6, 116, 180, 0.07) 100%
);
}
/* HERRAMIENTAS */
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__overlay {
z-index: 2;
background:
linear-gradient(
90deg,
rgba(25, 84, 24, 0.98) 0%,
rgba(36, 105, 28, 0.94) 31%,
rgba(50, 124, 30, 0.66) 44%,
rgba(50, 124, 30, 0.15) 61%,
transparent 76%
);
}
/* Oscurecido inferior */
.oxfam-vlm-slide__overlay::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 25%;
background:
linear-gradient(
0deg,
rgba(0, 0, 0, 0.18),
transparent
);
}
/* =========================================================
10. CONTENIDO
========================================================= */
.oxfam-vlm-slide__content {
position: absolute;
z-index: 5;
top: 50%;
color: #FFFFFF;
transform: translateY(-50%);
}
/* ASOMI */
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__content {
right: clamp(66px, 7vw, 135px);
width: min(39vw, 610px);
}
/* ENCUENTRO */
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__content {
left: clamp(70px, 7vw, 140px);
width: min(42vw, 680px);
}
/* HERRAMIENTAS */
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__content {
left: clamp(70px, 7vw, 140px);
width: min(34vw, 520px);
}
/* =========================================================
11. ENTRADA DEL CONTENIDO
========================================================= */
.oxfam-vlm-slide__content > * {
opacity: 0;
transform: translateY(16px);
transition:
opacity 600ms ease,
transform 600ms ease;
}
.oxfam-vlm-slide.is-active
.oxfam-vlm-slide__content > * {
opacity: 1;
transform: translateY(0);
}
.oxfam-vlm-slide.is-active
.oxfam-vlm-slide__kicker {
transition-delay: 140ms;
}
.oxfam-vlm-slide.is-active
.oxfam-vlm-slide__title {
transition-delay: 220ms;
}
.oxfam-vlm-slide.is-active
.oxfam-vlm-slide__description {
transition-delay: 300ms;
}
.oxfam-vlm-slide.is-active
.oxfam-vlm-slide__cta {
transition-delay: 380ms;
}
/* =========================================================
12. KICKER
========================================================= */
.oxfam-vlm-slide__kicker {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
margin: 0 0 16px;
padding: 8px 13px;
color: var(--vlm-lime) !important;
background:
rgba(21, 75, 28, 0.48);
border:
1px solid
rgba(190, 206, 69, 0.67);
border-radius: 999px;
font-family:
"T-StarPro",
"T-Star Pro",
Arial,
sans-serif;
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.045em;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
.oxfam-vlm-slide__kicker::before {
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
background: var(--vlm-lime);
border-radius: 50%;
}
/* Segundo slide */
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__kicker {
color: #FFFFFF !important;
border-color:
rgba(255, 255, 255, 0.48);
background:
rgba(4, 73, 112, 0.44);
}
/* =========================================================
13. TÍTULOS
========================================================= */
.oxfam-vlm-slide__title {
margin: 0 0 21px !important;
padding: 0 !important;
color: #FFFFFF !important;
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif !important;
font-size:
clamp(38px, 3.65vw, 66px);
font-weight: 700 !important;
line-height: 0.92;
letter-spacing: -0.025em;
text-transform: uppercase;
text-wrap: balance;
text-shadow:
0 4px 20px
rgba(0, 0, 0, 0.18);
}
.oxfam-vlm-slide__title span {
display: block;
margin-top: 4px;
color: var(--vlm-lime) !important;
}
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__title {
font-size:
clamp(36px, 3.35vw, 59px);
}
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__title span {
color: #FFFFFF !important;
}
/* Caja más contenida */
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__title {
max-width: 480px;
font-size:
clamp(36px, 3.4vw, 60px);
}
/* =========================================================
14. DESCRIPCIÓN
========================================================= */
.oxfam-vlm-slide__description {
max-width: 590px;
margin: 0 0 25px !important;
padding: 0 !important;
color:
rgba(255, 255, 255, 0.96) !important;
font-family:
"T-StarPro",
"T-Star Pro",
"Roboto",
Arial,
sans-serif !important;
font-size:
clamp(15px, 1.08vw, 18px);
font-weight: 400;
line-height: 1.5;
}
/* =========================================================
15. BOTÓN
========================================================= */
.oxfam-vlm-slide__cta {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 9px;
width: fit-content;
min-height: 46px;
padding: 11px 20px;
color: #FFFFFF !important;
background:
var(--vlm-pink) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow:
0 11px 28px
rgba(228, 57, 137, 0.25);
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif !important;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.025em;
text-transform: uppercase;
transition:
transform 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}
.oxfam-vlm-slide__cta svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.oxfam-vlm-slide__link:hover
.oxfam-vlm-slide__cta {
background:
var(--vlm-pink-dark) !important;
transform: translateX(4px);
box-shadow:
0 14px 32px
rgba(228, 57, 137, 0.33);
}
/* =========================================================
16. FLECHAS
RESET COMPLETO PARA EVITAR ESTILOS DE ELEMENTOR
========================================================= */
.oxfam-vlm-slider button.oxfam-vlm-slider__arrow {
all: unset;
box-sizing: border-box;
position: absolute;
top: 50%;
z-index: 50;
display: flex !important;
align-items: center;
justify-content: center;
width: 42px !important;
height: 54px !important;
margin: 0 !important;
padding: 0 !important;
color: #FFD500 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
transform:
translateY(-50%);
transition:
transform 180ms ease,
opacity 180ms ease;
}
.oxfam-vlm-slider button.oxfam-vlm-slider__arrow::before,
.oxfam-vlm-slider button.oxfam-vlm-slider__arrow::after {
display: none !important;
content: none !important;
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__arrow
svg {
display: block !important;
width: 29px !important;
height: 29px !important;
margin: 0 !important;
fill: none !important;
stroke: #FFD500 !important;
stroke-width: 2.7 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
filter:
drop-shadow(
0 2px 4px
rgba(0, 0, 0, 0.22)
);
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__arrow:hover {
background: transparent !important;
color: var(--vlm-lime) !important;
transform:
translateY(-50%)
scale(1.14);
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__arrow:hover
svg {
stroke:
var(--vlm-lime) !important;
}
.oxfam-vlm-slider__arrow--prev {
left: 22px !important;
}
.oxfam-vlm-slider__arrow--next {
right: 22px !important;
}
/* =========================================================
17. PAGINACIÓN
RESET COMPLETO
========================================================= */
.oxfam-vlm-slider__dots {
position: absolute;
z-index: 50;
left: 50%;
bottom: 20px;
display: flex !important;
align-items: center;
justify-content: center;
gap: 9px;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform:
translateX(-50%);
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__dot {
all: unset;
box-sizing: border-box;
display: block !important;
width: 9px !important;
min-width: 9px !important;
height: 9px !important;
min-height: 9px !important;
margin: 0 !important;
padding: 0 !important;
background:
rgba(
255,
255,
255,
0.82
) !important;
border: 0 !important;
border-radius: 50% !important;
box-shadow:
0 2px 5px
rgba(0, 0, 0, 0.13) !important;
cursor: pointer !important;
transition:
transform 180ms ease,
background-color 180ms ease !important;
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__dot:hover {
background:
#FFFFFF !important;
transform:
scale(1.15);
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__dot.is-active {
width: 10px !important;
min-width: 10px !important;
height: 10px !important;
min-height: 10px !important;
background:
var(--vlm-pink) !important;
border-radius: 50% !important;
transform:
scale(1.18);
}
/* =========================================================
18. ESCRITORIO MEDIANO
========================================================= */
@media
(max-width: 1366px)
and
(min-width: 1025px) {
.oxfam-vlm-slider {
height: 555px;
}
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__content {
right: 75px;
width: min(39vw, 530px);
}
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__content,
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__content {
left: 74px;
}
.oxfam-vlm-slide__title {
font-size:
clamp(36px, 3.4vw, 55px);
}
.oxfam-vlm-slide__description {
font-size: 14.5px;
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__image {
width: 58% !important;
}
}
/* =========================================================
19. TABLET
========================================================= */
@media (max-width: 1024px) {
.oxfam-vlm-slider {
height:
clamp(520px, 67vw, 630px);
}
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__content,
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__content {
top: auto;
right: 46px;
bottom: 57px;
left: 46px;
width: auto;
max-width: 620px;
transform: none;
}
/* ASOMI */
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__overlay {
background:
linear-gradient(
180deg,
rgba(8, 50, 25, 0.02) 0%,
rgba(8, 50, 25, 0.10) 38%,
rgba(8, 50, 25, 0.71) 68%,
rgba(8, 50, 25, 0.97) 100%
);
}
/* ENCUENTRO */
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__overlay {
background:
linear-gradient(
180deg,
rgba(4, 73, 115, 0.03) 0%,
rgba(4, 73, 115, 0.12) 37%,
rgba(4, 73, 115, 0.75) 68%,
rgba(4, 62, 98, 0.98) 100%
);
}
.oxfam-vlm-slide__title,
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__title {
font-size:
clamp(36px, 5.7vw, 54px);
}
.oxfam-vlm-slide__description {
max-width: 570px;
font-size:
clamp(14px, 1.8vw, 16.5px);
}
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__image {
object-position: 24% center;
}
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__image {
object-position: 57% center;
}
/* -----------------------------------------
HERRAMIENTAS EN TABLET
Imagen arriba/derecha y texto abajo
----------------------------------------- */
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__image {
top: 1% !important;
right: 2% !important;
bottom: auto !important;
width: 65% !important;
height: 62% !important;
object-fit: contain !important;
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__overlay {
background:
linear-gradient(
180deg,
rgba(30, 98, 27, 0.10) 0%,
rgba(30, 98, 27, 0.21) 40%,
rgba(30, 98, 27, 0.92) 70%,
rgba(22, 76, 23, 0.99) 100%
);
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__content {
top: auto;
right: 46px;
bottom: 57px;
left: 46px;
width: auto;
max-width: 550px;
transform: none;
}
.oxfam-vlm-slider__arrow--prev {
left: 12px !important;
}
.oxfam-vlm-slider__arrow--next {
right: 12px !important;
}
}
/* =========================================================
20. MÓVIL
========================================================= */
@media (max-width: 767px) {
.oxfam-vlm-slider {
height:
min(145vw, 640px);
min-height: 540px;
}
.oxfam-vlm-slide__image,
.oxfam-vlm-slide.is-active
.oxfam-vlm-slide__image {
transform:
none !important;
}
/* ASOMI */
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__image {
object-position:
18% center !important;
}
/* ENCUENTRO */
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__image {
object-position:
54% center !important;
}
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__content,
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__content {
top: auto;
right: 22px;
bottom: 48px;
left: 22px;
width: auto;
max-width: none;
transform: none;
}
.oxfam-vlm-slide__kicker {
margin-bottom: 10px;
padding: 7px 10px;
font-size: 8.5px;
}
.oxfam-vlm-slide__title,
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__title {
max-width: 100%;
margin-bottom:
13px !important;
font-size:
clamp(
27px,
8.7vw,
38px
);
line-height:
0.94;
letter-spacing:
-0.03em;
}
.oxfam-vlm-slide__description {
display:
-webkit-box;
overflow:
hidden;
max-width: 100%;
margin-bottom:
16px !important;
font-size:
12.5px;
line-height:
1.42;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
5;
}
.oxfam-vlm-slide__cta {
min-height:
40px;
padding:
9px 14px;
font-size:
9.5px;
}
/* =========================================
HERRAMIENTAS MÓVIL
Ilustración visible y sin cortes
========================================= */
.oxfam-vlm-slide--herramientas {
background:
linear-gradient(
180deg,
#44841A 0%,
#34781E 48%,
#1D561C 100%
);
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__image {
top: 2% !important;
right: -2% !important;
bottom: auto !important;
left: auto !important;
width: 88% !important;
height: 54% !important;
object-fit:
contain !important;
object-position:
center top !important;
opacity: 0.97;
transform:
none !important;
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__overlay {
background:
linear-gradient(
180deg,
rgba(32, 100, 28, 0.02) 0%,
rgba(32, 100, 28, 0.10) 36%,
rgba(32, 100, 28, 0.75) 60%,
rgba(22, 74, 23, 0.99) 100%
);
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__content {
top: auto;
right: 22px;
bottom: 48px;
left: 22px;
width: auto;
max-width: none;
transform: none;
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__title {
max-width: 320px;
font-size:
clamp(
29px,
9vw,
40px
);
}
/* =========================================
FLECHAS MÓVIL
SOLO LA PUNTA
========================================= */
.oxfam-vlm-slider
button.oxfam-vlm-slider__arrow {
width:
30px !important;
height:
44px !important;
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__arrow
svg {
width:
21px !important;
height:
21px !important;
}
.oxfam-vlm-slider__arrow--prev {
left:
6px !important;
}
.oxfam-vlm-slider__arrow--next {
right:
6px !important;
}
/* =========================================
PUNTOS MÓVIL
========================================= */
.oxfam-vlm-slider__dots {
bottom:
14px;
gap:
8px;
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__dot {
width:
8px !important;
min-width:
8px !important;
height:
8px !important;
min-height:
8px !important;
}
.oxfam-vlm-slider
button.oxfam-vlm-slider__dot.is-active {
width:
9px !important;
min-width:
9px !important;
height:
9px !important;
min-height:
9px !important;
}
}
/* =========================================================
21. MÓVILES ANGOSTOS
========================================================= */
@media (max-width: 420px) {
.oxfam-vlm-slider {
height:
590px;
min-height:
590px;
}
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__image {
object-position:
15% center !important;
}
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__image {
object-position:
52% center !important;
}
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__content,
.oxfam-vlm-slide--cosechamos
.oxfam-vlm-slide__content,
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__content {
right: 18px;
bottom: 46px;
left: 18px;
}
.oxfam-vlm-slide__title,
.oxfam-vlm-slide--asomi
.oxfam-vlm-slide__title {
font-size:
clamp(
26px,
8.4vw,
34px
);
}
.oxfam-vlm-slide__description {
font-size:
12px;
-webkit-line-clamp:
4;
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__image {
top:
1% !important;
right:
-6% !important;
width:
100% !important;
height:
51% !important;
}
.oxfam-vlm-slide--herramientas
.oxfam-vlm-slide__title {
max-width:
290px;
font-size:
clamp(
27px,
8.5vw,
35px
);
}
}
/* =========================================================
22. ACCESIBILIDAD
========================================================= */
@media (prefers-reduced-motion: reduce) {
.oxfam-vlm-slide,
.oxfam-vlm-slide__image,
.oxfam-vlm-slide__content > *,
.oxfam-vlm-slide__cta,
.oxfam-vlm-slider__arrow,
.oxfam-vlm-slider__dot {
transition:
none !important;
animation:
none !important;
}
.oxfam-vlm-slide__image,
.oxfam-vlm-slide.is-active
.oxfam-vlm-slide__image {
transform:
none !important;
}
}/* End custom CSS */
/* Start custom CSS *//* ==========================================================
OXFAM COLOMBIA
VOZ Y LIDERAZGO DE LAS MUJERES
CSS CONSOLIDADO FINAL
========================================================== */
/* ==========================================================
01. VARIABLES Y BASE
========================================================== */
.vlm-page {
--vlm-green: #44841A;
--vlm-green-dark: #285F18;
--vlm-green-deep: #173F19;
--vlm-lime: #BECE45;
--vlm-pink: #E43989;
--vlm-orange: #F16E22;
--vlm-blue: #149CD3;
--vlm-purple: #7D2D91;
--vlm-white: #FFFFFF;
--vlm-black: #111111;
--vlm-text: #333333;
--vlm-muted: #666666;
--vlm-soft: #F7F8F2;
--vlm-soft-green: #F2F5E8;
--vlm-border: rgba(68, 132, 26, .14);
--vlm-shadow:
0 14px 38px rgba(20, 55, 20, .10);
--vlm-shadow-hover:
0 22px 48px rgba(20, 55, 20, .16);
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
color: var(--vlm-text);
font-family:
"T-StarPro",
"T-Star Pro",
"Roboto",
Arial,
sans-serif;
overflow-x: hidden;
}
.vlm-page,
.vlm-page *,
.vlm-page *::before,
.vlm-page *::after {
box-sizing: border-box;
}
.vlm-page img {
display: block;
max-width: 100%;
}
.vlm-page a {
text-decoration: none;
}
.vlm-page p {
margin-top: 0;
}
.vlm-page iframe {
max-width: 100%;
}
.vlm-section {
width: 100%;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
padding:
clamp(52px, 5.5vw, 84px)
clamp(24px, 5vw, 76px);
}
/* ==========================================================
02. ACCESOS RÁPIDOS
========================================================== */
.vlm-quick-nav {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #FFFFFF;
}
.vlm-quick-nav__item {
position: relative;
display: flex;
align-items: center;
gap: 15px;
min-width: 0;
min-height: 102px;
padding:
20px
clamp(20px, 2.5vw, 34px);
color: #FFFFFF !important;
overflow: hidden;
transition:
transform .22s ease,
filter .22s ease;
}
.vlm-quick-nav__item:hover {
transform: translateY(-3px);
filter: brightness(1.04);
}
.vlm-quick-nav__item::after {
content: "";
position: absolute;
right: -38px;
bottom: -55px;
width: 125px;
height: 125px;
border-radius: 50%;
background:
rgba(255, 255, 255, .08);
}
.vlm-quick-nav__item--orange {
background: var(--vlm-orange);
}
.vlm-quick-nav__item--lime {
background: var(--vlm-lime);
color: var(--vlm-green-deep) !important;
}
.vlm-quick-nav__item--blue {
background: var(--vlm-blue);
}
.vlm-quick-nav__item--purple {
background: var(--vlm-purple);
}
.vlm-quick-nav__number {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
background:
rgba(255, 255, 255, .17);
border:
1px solid rgba(255, 255, 255, .24);
font-size: 11px;
font-weight: 800;
}
.vlm-quick-nav__text {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-width: 0;
}
.vlm-quick-nav__text strong {
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif;
font-size:
clamp(17px, 1.35vw, 22px);
line-height: 1;
text-transform: uppercase;
}
.vlm-quick-nav__text small {
margin-top: 5px;
font-size: 12px;
line-height: 1.25;
opacity: .88;
}
.vlm-quick-nav__arrow {
position: relative;
z-index: 2;
flex: 0 0 auto;
margin-left: auto;
font-size: 22px;
transition:
transform .2s ease;
}
.vlm-quick-nav__item:hover
.vlm-quick-nav__arrow {
transform: translateX(4px);
}
/* ==========================================================
03. INTRODUCCIÓN
========================================================== */
.vlm-intro {
background:
linear-gradient(
180deg,
#FFFFFF 0%,
#FBFCF8 100%
);
}
.vlm-section-heading {
max-width: 1030px;
margin-bottom:
clamp(32px, 4vw, 50px);
}
.vlm-section-heading__eyebrow,
.vlm-section-bar__eyebrow,
.vlm-podcast__eyebrow,
.vlm-tool-feature__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--vlm-green);
font-size: 12px;
font-weight: 800;
letter-spacing: .055em;
text-transform: uppercase;
}
.vlm-section-heading__eyebrow::before,
.vlm-section-bar__eyebrow::before,
.vlm-podcast__eyebrow::before,
.vlm-tool-feature__eyebrow::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--vlm-lime);
}
.vlm-section-heading h1 {
max-width: 1050px;
margin: 0 0 21px;
padding: 0;
color: var(--vlm-green);
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif !important;
font-size:
clamp(40px, 5vw, 74px);
line-height: .94;
letter-spacing: -.025em;
text-transform: uppercase;
}
.vlm-section-heading h1 span {
color: var(--vlm-lime);
}
.vlm-section-heading__lead {
max-width: 850px;
margin: 0;
color: #485548;
font-size:
clamp(18px, 1.5vw, 23px);
line-height: 1.52;
}
.vlm-intro__content {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
clamp(34px, 5vw, 74px);
max-width: 1240px;
margin-bottom: 42px;
}
.vlm-intro__primary,
.vlm-intro__secondary {
font-size:
clamp(17px, 1.15vw, 19px);
line-height: 1.72;
}
.vlm-intro__primary {
padding-left: 25px;
border-left:
5px solid var(--vlm-lime);
}
.vlm-intro__primary p,
.vlm-intro__secondary p {
margin-bottom: 20px;
}
.vlm-intro__primary p:last-child,
.vlm-intro__secondary p:last-child {
margin-bottom: 0;
}
.vlm-intro__primary strong {
color: var(--vlm-green);
font-weight: 800;
}
/* ==========================================================
04. DATOS / IMPACTO
========================================================== */
.vlm-impact-strip {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border-radius: 22px;
background:
rgba(255, 255, 255, .2);
box-shadow:
var(--vlm-shadow);
}
.vlm-impact-strip__item {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 130px;
padding: 25px;
background: var(--vlm-green);
}
.vlm-impact-strip__item:nth-child(even) {
background: var(--vlm-green-dark);
}
.vlm-impact-strip__item strong {
color: var(--vlm-lime);
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif;
font-size:
clamp(29px, 3vw, 45px);
line-height: 1;
}
.vlm-impact-strip__item span {
margin-top: 7px;
color: #FFFFFF;
font-size: 14px;
line-height: 1.3;
}
/* ==========================================================
05. ENCABEZADOS DE SECCIÓN
========================================================== */
.vlm-section-bar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom:
clamp(26px, 3.5vw, 42px);
padding-bottom: 17px;
border-bottom:
1px solid var(--vlm-border);
}
.vlm-section-bar > div {
min-width: 0;
}
.vlm-section-bar h2 {
display: inline-block;
max-width: 100%;
margin: 0;
padding:
10px 17px 9px;
color: #FFFFFF;
background: var(--vlm-green);
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif !important;
font-size:
clamp(27px, 3vw, 42px);
line-height: .96;
text-transform: uppercase;
}
.vlm-section-bar p {
max-width: 550px;
margin: 0;
color: var(--vlm-muted);
font-size: 16px;
line-height: 1.58;
}
/* ==========================================================
06. PUBLICACIONES
========================================================== */
.vlm-publications {
background: var(--vlm-soft-green);
}
.vlm-publications__grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap:
clamp(18px, 2vw, 28px);
}
.vlm-post-card {
min-width: 0;
}
.vlm-post-card__link {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
color: var(--vlm-text) !important;
background: #FFFFFF;
border:
1px solid rgba(68, 132, 26, .10);
border-radius: 20px;
box-shadow:
0 10px 30px rgba(34, 80, 24, .07);
transition:
transform .22s ease,
box-shadow .22s ease;
}
.vlm-post-card__link:hover {
transform: translateY(-5px);
box-shadow:
var(--vlm-shadow-hover);
}
.vlm-post-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #E8E8E8;
}
.vlm-post-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .5s ease;
}
.vlm-post-card__link:hover
.vlm-post-card__media img {
transform: scale(1.045);
}
.vlm-post-card__category {
position: absolute;
left: 15px;
bottom: 15px;
padding:
7px 11px;
color: #FFFFFF;
background: var(--vlm-green);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.vlm-post-card__content {
display: flex;
flex-direction: column;
flex: 1;
padding: 23px;
}
.vlm-post-card__content h3 {
margin:
0 0 13px;
color: var(--vlm-green);
font-size:
clamp(20px, 1.65vw, 27px);
font-weight: 800;
line-height: 1.12;
}
.vlm-post-card__content p {
margin:
0 0 20px;
color: #555555;
font-size: 16px;
line-height: 1.58;
}
.vlm-post-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
color: var(--vlm-pink);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
/* ==========================================================
07. GENIALLY
========================================================== */
.vlm-organizations {
background: #FFFFFF;
}
.vlm-genially {
position: relative;
width: 100%;
max-width: 1180px;
aspect-ratio: 16 / 9;
margin: 0 auto;
overflow: hidden;
background: #F5F5F5;
border-radius: 22px;
box-shadow:
var(--vlm-shadow);
}
.vlm-genially iframe {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
border: 0;
}
/* ==========================================================
08. MULTIMEDIA GENERAL
========================================================== */
#multimedia01 {
scroll-margin-top: 120px;
}
.vlm-multimedia {
background: var(--vlm-soft);
}
/*
* MUY IMPORTANTE:
* ahora hay UNA sola columna.
*
* Primero videoteca.
* Debajo Caja de Herramientas.
*/
.vlm-multimedia__grid {
display: grid !important;
grid-template-columns:
minmax(0, 1fr) !important;
gap: 30px !important;
width: 100%;
max-width: 100%;
align-items: stretch;
}
/* ==========================================================
09. VIDEOTECA
========================================================== */
.vlm-video-library {
display: grid !important;
grid-template-columns:
minmax(0, 1.55fr)
minmax(300px, .72fr);
grid-template-rows:
auto
minmax(0, 1fr);
width: 100% !important;
max-width: 100% !important;
min-width: 0;
overflow: hidden;
background: #FFFFFF;
border-radius: 22px;
box-shadow:
var(--vlm-shadow);
}
/* ==========================================================
10. CABECERA VIDEOTECA
========================================================== */
.vlm-video-library__heading {
grid-column: 1 / -1;
grid-row: 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
width: 100%;
padding:
20px 24px;
background: var(--vlm-green);
}
.vlm-video-library__heading > div {
min-width: 0;
}
.vlm-video-library__heading span {
color: var(--vlm-lime);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.vlm-video-library__heading h3 {
margin:
4px 0 0;
color: #FFFFFF;
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif !important;
font-size:
clamp(22px, 2vw, 31px);
line-height: 1;
text-transform: uppercase;
}
.vlm-video-library__count {
flex: 0 0 auto;
padding:
7px 11px;
color: #FFFFFF !important;
background:
rgba(255, 255, 255, .14);
border-radius: 999px;
font-size: 10px !important;
white-space: nowrap;
}
/* ==========================================================
11. REPRODUCTOR YOUTUBE — IZQUIERDA
========================================================== */
.vlm-video-player {
position: relative;
grid-column: 1;
grid-row: 2;
width: 100% !important;
height: 440px !important;
min-width: 0;
overflow: hidden;
background: #000000;
}
.vlm-video-player iframe {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
border: 0;
}
/* ==========================================================
12. LISTA DE VIDEOS — DERECHA
========================================================== */
.vlm-video-list {
grid-column: 2;
grid-row: 2;
display: flex !important;
flex-direction: column;
width: 100% !important;
height: 440px !important;
max-height: 440px !important;
gap: 5px !important;
margin: 0 !important;
padding: 10px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background: #FFFFFF;
border-left:
1px solid rgba(68, 132, 26, .10);
scrollbar-width: thin;
scrollbar-color:
rgba(68, 132, 26, .32)
transparent;
}
.vlm-video-list::-webkit-scrollbar {
width: 6px;
}
.vlm-video-list::-webkit-scrollbar-track {
background: transparent;
}
.vlm-video-list::-webkit-scrollbar-thumb {
background:
rgba(68, 132, 26, .28);
border-radius: 20px;
}
/* ==========================================================
13. CADA VIDEO
========================================================== */
.vlm-page .vlm-video-item,
.vlm-page button.vlm-video-item {
appearance: none !important;
-webkit-appearance: none !important;
display: grid !important;
grid-template-columns:
68px minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 56px !important;
margin: 0 !important;
padding:
6px 8px !important;
color:
#263025 !important;
background:
#FFFFFF !important;
background-image:
none !important;
border:
1px solid rgba(68, 132, 26, .11) !important;
border-radius:
7px !important;
box-shadow:
none !important;
text-align:
left !important;
white-space:
normal !important;
cursor:
pointer !important;
overflow:
hidden !important;
transition:
border-color .18s ease,
background-color .18s ease,
transform .18s ease !important;
}
.vlm-page .vlm-video-item:hover,
.vlm-page button.vlm-video-item:hover {
background:
#F7F9F0 !important;
border-color:
rgba(68, 132, 26, .30) !important;
transform:
translateX(2px);
}
.vlm-page .vlm-video-item.is-active,
.vlm-page button.vlm-video-item.is-active {
background:
#F3F6DF !important;
border-color:
rgba(68, 132, 26, .28) !important;
box-shadow:
inset 3px 0 0
var(--vlm-lime) !important;
}
.vlm-video-item::before,
.vlm-video-item::after {
display: none !important;
content: none !important;
}
.vlm-video-item img {
width: 68px !important;
max-width: 68px !important;
height: 42px !important;
margin: 0 !important;
object-fit: cover;
border-radius: 5px;
}
.vlm-video-item > span {
display: block;
min-width: 0;
overflow: hidden;
}
.vlm-video-item small {
display: block;
margin:
0 0 3px;
color:
var(--vlm-green) !important;
font-size: 8px;
font-weight: 900;
line-height: 1;
}
.vlm-video-item strong {
display: -webkit-box;
width: 100%;
max-width: 100%;
margin: 0;
overflow: hidden;
color:
#263025 !important;
font-size: 10px;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* ==========================================================
14. CAJA DE HERRAMIENTAS
OCUPA TODO EL ANCHO DEBAJO
========================================================== */
.vlm-tool-feature {
position: relative;
display: grid !important;
grid-template-columns:
minmax(340px, .88fr)
minmax(0, 1.12fr) !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
min-height: 350px !important;
overflow: hidden;
color:
var(--vlm-green-deep) !important;
background:
var(--vlm-lime) !important;
border-radius: 22px;
box-shadow:
var(--vlm-shadow);
transition:
transform .22s ease,
box-shadow .22s ease;
}
.vlm-tool-feature:hover {
transform: translateY(-4px);
box-shadow:
var(--vlm-shadow-hover);
}
/* Texto izquierda */
.vlm-tool-feature__copy {
position: relative;
z-index: 2;
display: flex !important;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
min-width: 0;
padding:
clamp(36px, 4.2vw, 64px) !important;
}
.vlm-tool-feature__eyebrow {
color:
var(--vlm-green-dark);
font-size: 12px;
}
.vlm-tool-feature__eyebrow::before {
background: var(--vlm-pink);
}
.vlm-tool-feature h3 {
display: block;
width: 100%;
max-width: 570px;
margin:
0 0 18px;
padding: 0;
color:
var(--vlm-green-deep);
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif !important;
font-size:
clamp(40px, 4vw, 62px) !important;
font-weight: 700;
line-height:
.91 !important;
letter-spacing:
-.025em;
text-transform:
uppercase;
white-space:
normal !important;
overflow-wrap:
normal !important;
}
.vlm-tool-feature h3 span {
display: block;
color:
var(--vlm-green);
}
.vlm-tool-feature p {
max-width: 570px;
margin:
0 0 24px;
color:
#254A1E;
font-size:
16px !important;
line-height:
1.58;
}
.vlm-tool-feature__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: fit-content;
max-width: 100%;
padding:
11px 17px;
color:
#FFFFFF !important;
background:
var(--vlm-pink);
border-radius:
999px;
font-size:
11px;
font-weight:
800;
line-height:
1.15;
text-align:
center;
text-transform:
uppercase;
transition:
transform .18s ease,
background-color .18s ease;
}
.vlm-tool-feature:hover
.vlm-tool-feature__cta {
transform:
translateX(3px);
}
/* Ilustración derecha */
.vlm-tool-feature__media {
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
align-self: stretch;
width: 100%;
height: 100%;
margin: 0 !important;
padding:
24px 38px 0 !important;
}
.vlm-tool-feature__media img {
width: 100% !important;
max-width: 650px !important;
max-height: 340px !important;
margin:
auto auto 0 !important;
object-fit:
contain !important;
object-position:
center bottom !important;
}
/* ==========================================================
15. PODCAST
========================================================== */
.vlm-podcast {
display: grid;
grid-template-columns:
minmax(280px, .75fr)
minmax(420px, 1.25fr);
align-items: center;
gap:
clamp(34px, 6vw, 88px);
background:
var(--vlm-green-dark);
}
.vlm-podcast__eyebrow {
color:
var(--vlm-lime);
}
.vlm-podcast__copy h2 {
max-width: 100%;
margin:
0 0 17px;
color:
#FFFFFF;
font-family:
"Titulares OXFAM",
"Arial Black",
Arial,
sans-serif !important;
font-size:
clamp(36px, 4vw, 60px);
line-height:
.92;
text-transform:
uppercase;
}
.vlm-podcast__copy h2 span {
display: block;
color:
var(--vlm-lime);
}
.vlm-podcast__copy p {
max-width: 530px;
margin: 0;
color:
rgba(255, 255, 255, .88);
font-size:
17px;
line-height:
1.6;
}
.vlm-podcast__player {
min-width: 0;
overflow: hidden;
background: #FFFFFF;
border-radius: 18px;
box-shadow:
0 18px 42px rgba(0, 0, 0, .15);
}
.vlm-podcast__player iframe {
display: block;
width: 100% !important;
max-width: 100% !important;
border: 0;
}
/* ==========================================================
16. GALERÍA
========================================================== */
.vlm-gallery {
background: #FFFFFF;
}
.vlm-gallery__grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
grid-auto-flow: dense;
grid-auto-rows: 155px;
gap: 8px;
}
.vlm-gallery__item {
position: relative;
display: block;
min-width: 0;
overflow: hidden;
background:
#EDEDED;
}
.vlm-gallery__item:nth-child(7n + 1),
.vlm-gallery__item:nth-child(11n + 4) {
grid-row: span 2;
}
.vlm-gallery__item:nth-child(9n + 3) {
grid-column: span 2;
}
.vlm-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .45s ease,
filter .3s ease;
}
.vlm-gallery__item::after {
content: "Ver imagen";
position: absolute;
inset:
auto 12px 12px 12px;
padding:
8px 11px;
color: #FFFFFF;
background:
rgba(35, 91, 19, .84);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
text-align: center;
text-transform: uppercase;
opacity: 0;
transform:
translateY(5px);
transition:
opacity .2s ease,
transform .2s ease;
}
.vlm-gallery__item:hover img {
transform:
scale(1.055);
filter:
brightness(.87);
}
.vlm-gallery__item:hover::after {
opacity: 1;
transform:
translateY(0);
}
/* ==========================================================
17. LAPTOP / ESCRITORIO PEQUEÑO
========================================================== */
@media
(max-width: 1280px)
and
(min-width: 1025px) {
.vlm-video-library {
grid-template-columns:
minmax(0, 1.45fr)
minmax(290px, .65fr);
}
.vlm-video-player {
height:
410px !important;
}
.vlm-video-list {
height:
410px !important;
max-height:
410px !important;
}
.vlm-tool-feature {
grid-template-columns:
minmax(320px, .92fr)
minmax(0, 1.08fr) !important;
}
.vlm-tool-feature h3 {
font-size:
clamp(37px, 4vw, 52px) !important;
}
}
/* ==========================================================
18. TABLET
========================================================== */
@media (max-width: 1024px) {
.vlm-section {
padding:
52px 32px;
}
.vlm-quick-nav {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.vlm-intro__content {
gap: 32px;
}
.vlm-impact-strip {
grid-template-columns:
repeat(2, 1fr);
}
/* ========================================================
VIDEOTECA TABLET
Sigue horizontal
======================================================== */
.vlm-video-library {
grid-template-columns:
minmax(0, 1.35fr)
minmax(255px, .65fr);
}
.vlm-video-player {
height:
385px !important;
}
.vlm-video-list {
height:
385px !important;
max-height:
385px !important;
padding:
8px !important;
}
.vlm-page .vlm-video-item,
.vlm-page button.vlm-video-item {
grid-template-columns:
58px minmax(0, 1fr) !important;
gap:
8px !important;
min-height:
51px !important;
}
.vlm-video-item img {
width:
58px !important;
max-width:
58px !important;
height:
37px !important;
}
.vlm-video-item strong {
font-size:
9px;
}
/* ========================================================
CAJA DE HERRAMIENTAS TABLET
======================================================== */
.vlm-tool-feature {
grid-template-columns:
minmax(280px, .95fr)
minmax(0, 1.05fr) !important;
min-height:
320px !important;
}
.vlm-tool-feature__copy {
padding:
32px !important;
}
.vlm-tool-feature h3 {
font-size:
clamp(33px, 5vw, 47px) !important;
}
.vlm-tool-feature p {
font-size:
16px !important;
}
.vlm-tool-feature__media {
padding:
20px 20px 0 !important;
}
.vlm-tool-feature__media img {
max-height:
290px !important;
}
/* PODCAST */
.vlm-podcast {
grid-template-columns: 1fr;
gap: 28px;
}
.vlm-podcast__copy {
max-width: 720px;
}
/* GALERÍA */
.vlm-gallery__grid {
grid-template-columns:
repeat(3, 1fr);
grid-auto-rows:
150px;
}
}
/* ==========================================================
19. MÓVIL
========================================================== */
@media (max-width: 767px) {
.vlm-section {
padding:
42px 20px;
}
/* ========================================================
ACCESOS
======================================================== */
.vlm-quick-nav {
grid-template-columns:
1fr 1fr;
}
.vlm-quick-nav__item {
min-height:
106px;
padding:
15px;
gap:
9px;
}
.vlm-quick-nav__number {
display: none;
}
.vlm-quick-nav__text strong {
font-size:
clamp(13px, 4vw, 16px);
line-height:
1.05;
}
.vlm-quick-nav__text small {
font-size:
9.5px;
line-height:
1.25;
}
.vlm-quick-nav__arrow {
font-size:
17px;
}
/* ========================================================
INTRO
======================================================== */
.vlm-section-heading h1 {
font-size:
clamp(35px, 9.5vw, 48px);
}
.vlm-section-heading__lead {
font-size:
17px;
}
.vlm-intro__content {
grid-template-columns:
1fr;
gap:
25px;
}
.vlm-intro__primary {
padding-left:
18px;
}
.vlm-intro__primary,
.vlm-intro__secondary {
font-size:
16px;
line-height:
1.65;
}
/* ========================================================
IMPACTO
======================================================== */
.vlm-impact-strip {
grid-template-columns:
repeat(2, 1fr);
border-radius:
17px;
}
.vlm-impact-strip__item {
min-height:
110px;
padding:
18px;
}
.vlm-impact-strip__item strong {
font-size:
29px;
}
.vlm-impact-strip__item span {
font-size:
12px;
}
/* ========================================================
ENCABEZADOS
======================================================== */
.vlm-section-bar {
display: block;
margin-bottom:
27px;
padding-bottom:
14px;
}
.vlm-section-bar h2 {
max-width:
100%;
font-size:
27px;
}
.vlm-section-bar p {
margin-top:
14px;
font-size:
15px;
}
/* ========================================================
PUBLICACIONES
======================================================== */
.vlm-publications__grid {
grid-template-columns:
1fr;
}
.vlm-post-card__media {
aspect-ratio:
16 / 9;
}
.vlm-post-card__content p {
font-size:
15px;
}
/* ========================================================
GENIALLY
======================================================== */
.vlm-genially {
border-radius:
15px;
}
/* ========================================================
VIDEOTECA MÓVIL
Player arriba, lista abajo.
======================================================== */
.vlm-video-library {
display: block !important;
width:
100% !important;
border-radius:
17px;
}
.vlm-video-library__heading {
padding:
16px 18px;
}
.vlm-video-library__heading h3 {
font-size:
clamp(22px, 7vw, 28px);
}
.vlm-video-library__count {
font-size:
9px !important;
}
.vlm-video-player {
position: relative;
width:
100% !important;
height:
auto !important;
aspect-ratio:
16 / 9;
}
.vlm-video-list {
display: flex !important;
flex-direction:
column;
width:
100% !important;
height:
auto !important;
max-height:
315px !important;
gap:
5px !important;
padding:
8px !important;
border-left:
0;
border-top:
1px solid
rgba(68, 132, 26, .10);
}
.vlm-page .vlm-video-item,
.vlm-page button.vlm-video-item {
grid-template-columns:
75px minmax(0, 1fr) !important;
min-height:
56px !important;
padding:
6px 7px !important;
border-radius:
6px !important;
}
.vlm-video-item img {
width:
75px !important;
max-width:
75px !important;
height:
44px !important;
}
.vlm-video-item strong {
font-size:
10px;
line-height:
1.22;
}
/* ========================================================
CAJA HERRAMIENTAS MÓVIL
======================================================== */
.vlm-tool-feature {
display:
flex !important;
flex-direction:
column;
width:
100% !important;
min-height:
auto !important;
border-radius:
18px;
}
.vlm-tool-feature__copy {
width:
100%;
padding:
27px 23px 12px !important;
}
.vlm-tool-feature h3 {
width:
100%;
max-width:
100%;
font-size:
clamp(30px, 9vw, 40px) !important;
line-height:
.93 !important;
white-space:
normal !important;
}
.vlm-tool-feature p {
font-size:
15px !important;
line-height:
1.55;
}
.vlm-tool-feature__media {
width:
100%;
height:
auto;
padding:
8px 18px 17px !important;
}
.vlm-tool-feature__media img {
width:
100% !important;
max-width:
430px !important;
max-height:
270px !important;
}
/* ========================================================
PODCAST
======================================================== */
.vlm-podcast {
gap:
27px;
}
.vlm-podcast__copy h2 {
font-size:
clamp(34px, 9.3vw, 43px);
}
.vlm-podcast__copy p {
font-size:
16px;
}
.vlm-podcast__player {
width:
100%;
border-radius:
14px;
}
/* ========================================================
GALERÍA
======================================================== */
.vlm-gallery__grid {
grid-template-columns:
repeat(2, 1fr);
grid-auto-rows:
130px;
gap:
5px;
}
.vlm-gallery__item:nth-child(9n + 3) {
grid-column:
span 1;
}
.vlm-gallery__item:nth-child(6n + 1) {
grid-row:
span 2;
}
.vlm-gallery__item::after {
display:
none;
}
}
/* ==========================================================
20. MÓVILES PEQUEÑOS
========================================================== */
@media (max-width: 420px) {
.vlm-section {
padding:
37px 17px;
}
.vlm-quick-nav__item {
min-height:
96px;
padding:
12px;
}
.vlm-quick-nav__text strong {
font-size:
12px;
}
.vlm-quick-nav__text small {
font-size:
8.5px;
}
.vlm-section-heading h1 {
font-size:
34px;
}
.vlm-section-bar h2 {
font-size:
23px;
}
.vlm-video-list {
max-height:
295px !important;
}
.vlm-page .vlm-video-item,
.vlm-page button.vlm-video-item {
grid-template-columns:
66px minmax(0, 1fr) !important;
min-height:
52px !important;
padding:
5px 6px !important;
}
.vlm-video-item img {
width:
66px !important;
max-width:
66px !important;
height:
40px !important;
}
.vlm-video-item strong {
font-size:
9.5px;
}
.vlm-tool-feature__copy {
padding:
23px 19px 10px !important;
}
.vlm-tool-feature h3 {
font-size:
clamp(28px, 8.5vw, 34px) !important;
}
.vlm-tool-feature p {
font-size:
14.5px !important;
}
.vlm-tool-feature__media {
padding:
5px 13px 14px !important;
}
.vlm-tool-feature__media img {
max-height:
235px !important;
}
.vlm-podcast__copy h2 {
font-size:
clamp(31px, 8.8vw, 38px);
}
.vlm-gallery__grid {
grid-auto-rows:
112px;
}
}
/* ==========================================================
21. PROTECCIÓN CONTRA DESBORDAMIENTOS
========================================================== */
.vlm-page,
.vlm-page section,
.vlm-page nav,
.vlm-page article,
.vlm-page div,
.vlm-page a,
.vlm-page button {
max-width: 100%;
}
.vlm-page button {
font-family:
"T-StarPro",
"T-Star Pro",
"Roboto",
Arial,
sans-serif;
}
/* ==========================================================
22. ACCESIBILIDAD
========================================================== */
@media (prefers-reduced-motion: reduce) {
.vlm-page *,
.vlm-page *::before,
.vlm-page *::after {
animation:
none !important;
transition:
none !important;
scroll-behavior:
auto !important;
}
}/* End custom CSS */