plandecenal.com · Guía de implementación
Kit global de Elementor
Valores exactos para configurar Sitio › Ajustes del sitio en Elementor para cada opción de línea gráfica. Los nombres de cada bloque siguen el orden del panel de Elementor.
01 · Ajustes del sitio › Colores globales
Colores del sistema
Los cuatro colores de sistema de Elementor. Iguales en ambas opciones; lo que cambia es la tipografía, las formas y los espaciados.
Primary
#0E496C
Petróleo
Títulos, encabezado, fondos institucionales
Secondary
#1C76A1
Celeste texto
Enlaces, botones secundarios, iconos
Text
#35505F
Pizarra
Texto corrido
Accent
#FFCA41
Amarillo
Botón principal, destacados, foco
Colores personalizados
Celeste
#1D9CD3
Fondos y acentos (no para texto)
Cielo
#37C4F0
Acentos sobre petróleo
Rojo
#FF4340
Acentos y chulo de marca
Rojo texto
#AD2728
Alertas y errores
Tinta
#0E2A3D
Texto sobre amarillo, pie oscuro
Azul profundo
#113868
Bandas de cifras
Hielo
#F1FBFE
Fondos de sección
Borde
#D5E0E7
Bordes y divisores
Gris medio
#5D7B90
Texto secundario, pies de foto
GOV.CO
#3366CC
Solo barras GOV.CO
Colores de líneas estratégicas
(agregar como colores personalizados «Línea 01»…«Línea 10»)
Línea 01
Desarrollo integral y competencias
#0E496C · texto #FFFFFF
Línea 02
Bienestar socioemocional
#1D9CD3 · texto #062536
Línea 03
Labor docente
#7AD0CD · texto #0E2A3D
Línea 04
Innovación y transformación digital
#3FAE6A · texto #062A1A
Línea 05
Equidad territorial e inclusión rural
#FFCA41 · texto #0E2A3D
Línea 06
Educación inicial
#F79A3E · texto #2A1500
Línea 07
Permanencia y trayectorias
#FF6D5E · texto #1A0707
Línea 08
Educación media y tránsito
#DB322E · texto #FFFFFF
Línea 09
Educación ambiental
#AD2728 · texto #FFFFFF
Línea 10
Multilingüismo
#7B3FA0 · texto #FFFFFF
02 · Ajustes del sitio › Fuentes globales
Fuentes globales
Todas en Google Fonts: Geologica, Poppins y Roboto (las mismas de la cartilla).
Primary
Sistema
Plan Decenal de Educación
Poppins · 700 · títulos H1–H3
Secondary
Sistema
Líneas estratégicas
Poppins · 600 · H4–H6, menú
Text
Sistema
La educación es el corazón de toda transformación social.
Roboto · 400 · 17px · 1.6
Accent
Sistema
Conoce el Plan →
Poppins · 600 · 15px · botones
Antetítulo
Personalizada
Arquitectura estratégica
Poppins · 600 · 14px · MAYÚS · 0.16em
Número de línea
Personalizada
05
Poppins · 800 · 54px · 0.82 · -0.03em
Cifra
Personalizada
200.446
Poppins · 700 · 40px · 1
Pie de foto
Personalizada
SIMAT, corte mayo de 2026
Roboto · 400 · 13px · #5D7B90
03 · Ajustes del sitio › Tipografía
Cuerpo, enlaces y encabezados
Tamaños en px para Escritorio / Tableta / Móvil. Interlineado en em.
Elemento
Familia
Peso
Tamaño D / T / M
Interl.
Espaciado
Color / Nota
H1
Poppins
700
50 / 40 / 32
1.08
0
Primary · uno por página
H2
Poppins
700
38 / 32 / 26
1.15
0
Primary
H3
Poppins
700
28 / 24 / 22
1.2
0
Primary
H4
Poppins
600
22 / 20 / 18
1.3
0
Primary
H5
Poppins
600
18 / 18 / 16
1.35
0
Primary
H6
Poppins
600
14 / 14 / 13
1.4
0.16em
Secondary · MAYÚSCULAS (antetítulo)
Cuerpo
Roboto
400
17 / 16 / 16
1.6
0
Text #35505F
Enlace
Roboto
500
hereda
hereda
0
#1C76A1 → hover #0E496C + subrayado
Párrafo
—
—
—
—
—
Espaciado entre párrafos 16 px
Vista previa
Cundinamarca aprende, lidera, sueña y evoluciona
Las 10 líneas estratégicas
Encabezado H6 · antetítulo
Texto de cuerpo en Roboto 17 px con interlineado 1.6 y ancho máximo de 72 caracteres por línea. Así se ve un enlace dentro de un párrafo.
04 · Ajustes del sitio › Botones
Botones
Elementor admite un estilo global de botón; las variantes se aplican con clases CSS (ver sección 10).
Principal (global)
Poppins 600 15 · pad 14/24 · radio 3 · bg #FFCA41 → #F5B800
Secundario · .btn-sec
bg #1C76A1 → #0E496C · texto #FFF
Contorno · .btn-outline
borde 1.5 #1C76A1 · hover fondo #F1FBFE
Sobre oscuro · .btn-inv
borde 1.5 #FFF · hover fondo #FFF, texto #0E496C
05 · Ajustes del sitio › Campos de formulario
Formularios
Etiqueta
Poppins 500 · 14px · #0E496C
Campo
Roboto 400 · 16px · #0E2A3D
Fondo
#FFFFFF
Borde
1px · #C9D7E0
Radio
3px
Relleno
12px 14px
Foco
borde 1.5px #1C76A1 + sombra 0 0 0 3px rgba(29,156,211,.3)
Error
borde #AD2728 · mensaje Roboto 13 #AD2728
Vista previa · Formulario de participación
Nombre completo
Escribe tu nombre
Municipio
Fusagasugá
(foco)
Correo electrónico
correo@
Ingresa un correo válido.
06 · Ajustes del sitio › Imágenes + estilos de contenedor
Imágenes y tarjetas
Imagen de contenido
radio 4px (destacadas 16px) · hover opacidad 1 · sin filtro
Tarjeta
Contenedor con borde y sombra al pasar el cursor.
Tarjeta / contenedor
borde 1px #D5E0E7 · radio 4px · hover: borde #1D9CD3 + sombra 0 8 24 rgba(14,73,108,.1)
Foto duotono (como la cartilla)
fondo: color de línea · img: filter grayscale(1) contrast(1.1); mix-blend-mode: multiply
07 · Ajustes del sitio › Diseño
Diseño, espaciado y breakpoints
Ancho de contenido
1312 px
Contenedor «En caja»; página a ancho completo
Relleno del contenedor
64 / 32 / 20
Escritorio / Tableta / Móvil (px)
Espacio entre secciones
88 / 64 / 48
Relleno vertical de cada sección
Espacio entre widgets
20 px
Gap por defecto en contenedores flex
Breakpoint móvil
767 px
Valor por defecto de Elementor
Breakpoint tableta
1024 px
Valor por defecto de Elementor
Breakpoint portátil
1366 px
Activar: ajusta titulares grandes
Selector título de página
h1.entry-title
Ocultar: el H1 va en el hero
08 · Identidad del sitio + Fondo
Identidad
Nombre del sitio
Plan Decenal de Educación de Cundinamarca 2026–2036
Descripción
Cundinamarca aprende, lidera, sueña y evoluciona
Logo del sitio
Marca «Plan decenal» en SVG (pendiente archivo oficial)
Favicon
PNG 512×512, chulo rojo sobre fondo blanco
Fondo
Tipo clásico · #FFFFFF
·
Caja de luz y transiciones
Fondo lightbox
rgba(14,42,61,.92)
Color UI
#FFFFFF · hover #FFCA41
Transición hover
0.2 s ease-out · desplazamiento -4 px en tarjetas
Animaciones de entrada
Solo «Fade In» sutil; respetar prefers-reduced-motion
09 · Theme Builder › Encabezado y pie
GOV.CO y accesibilidad (Res. MinTIC 1519 de 2020)
A− A A+ · Contraste
Barra superior
Alto 44 px · fondo #3366CC · logo GOV.CO blanco 24–26 px de alto, enlazado a gov.co · a la derecha: tamaño de texto, contraste, idioma. Siempre visible, sin modificar colores.
Última actualización
Pie de página
Logo Gobernación (fondo claro) · entidad, dirección, horario, teléfono, correo de notificaciones judiciales · enlaces: PQRSD, Transparencia, datos personales, términos, mapa del sitio, accesibilidad · barra inferior GOV.CO de 52 px.
Accesibilidad WCAG 2.1 AA
· Contraste de texto ≥ 4.5:1 (celeste y rojo puros solo como fondo o en títulos grandes; para texto usar #1C76A1 y #AD2728)
· Foco visible: contorno de 3 px #FFCA41 con separación de 2 px
· Áreas táctiles de 44 px como mínimo · texto alternativo en todas las imágenes
· Jerarquía H1–H6 real, un solo H1 por página · enlace «Saltar al contenido»
10 · Ajustes del sitio › CSS personalizado
CSS personalizado
Variables de línea, variantes de botón y foco accesible. Añade la clase linea-5 al contenedor de una página de línea para heredar su color.
/* Foco accesible */
:focus-visible{outline:3px solid #FFCA41;outline-offset:2px}
/* Colores de líneas estratégicas */
.linea-1{–linea:#0E496C;–linea-txt:#FFFFFF}
.linea-2{–linea:#1D9CD3;–linea-txt:#062536}
.linea-3{–linea:#7AD0CD;–linea-txt:#0E2A3D}
.linea-4{–linea:#3FAE6A;–linea-txt:#062A1A}
.linea-5{–linea:#FFCA41;–linea-txt:#0E2A3D}
.linea-6{–linea:#F79A3E;–linea-txt:#2A1500}
.linea-7{–linea:#FF6D5E;–linea-txt:#1A0707}
.linea-8{–linea:#DB322E;–linea-txt:#FFFFFF}
.linea-9{–linea:#AD2728;–linea-txt:#FFFFFF}
.linea-10{–linea:#7B3FA0;–linea-txt:#FFFFFF}
.linea-bg{background:var(–linea);color:var(–linea-txt)}
.linea-borde{border-top:6px solid var(–linea)}
/* Variantes de botón (añadir clase al widget Botón) */
.btn-sec .elementor-button{background:#1C76A1;color:#fff}
.btn-sec .elementor-button:hover{background:#0E496C}
.btn-outline .elementor-button{background:transparent;border:1.5px solid currentColor}
/* Antetítulo */
.antetitulo{font:600 14px/1.4 Poppins;letter-spacing:.16em;text-transform:uppercase;color:#1C76A1}
/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:3px solid #FFCA41;outline-offset:2px}
/* Colores de líneas estratégicas */
.linea-1{–linea:#0E496C;–linea-txt:#FFFFFF}
.linea-2{–linea:#1D9CD3;–linea-txt:#062536}
.linea-3{–linea:#7AD0CD;–linea-txt:#0E2A3D}
.linea-4{–linea:#3FAE6A;–linea-txt:#062A1A}
.linea-5{–linea:#FFCA41;–linea-txt:#0E2A3D}
.linea-6{–linea:#F79A3E;–linea-txt:#2A1500}
.linea-7{–linea:#FF6D5E;–linea-txt:#1A0707}
.linea-8{–linea:#DB322E;–linea-txt:#FFFFFF}
.linea-9{–linea:#AD2728;–linea-txt:#FFFFFF}
.linea-10{–linea:#7B3FA0;–linea-txt:#FFFFFF}
.linea-bg{background:var(–linea);color:var(–linea-txt)}
.linea-borde{border-top:6px solid var(–linea)}
/* Variantes de botón (añadir clase al widget Botón) */
.btn-sec .elementor-button{background:#1C76A1;color:#fff}
.btn-sec .elementor-button:hover{background:#0E496C}
.btn-outline .elementor-button{background:transparent;border:1.5px solid currentColor}
/* Antetítulo */
.antetitulo{font:600 14px/1.4 Poppins;letter-spacing:.16em;text-transform:uppercase;color:#1C76A1}
/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
01 · Ajustes del sitio › Colores globales
Colores del sistema
Los cuatro colores de sistema de Elementor. Iguales en ambas opciones; lo que cambia es la tipografía, las formas y los espaciados.
Primary
#0E496C
Petróleo
Títulos, encabezado, fondos institucionales
Secondary
#1C76A1
Celeste texto
Enlaces, botones secundarios, iconos
Text
#35505F
Pizarra
Texto corrido
Accent
#FFCA41
Amarillo
Botón principal, destacados, foco
Colores personalizados
Celeste
#1D9CD3
Fondos y acentos (no para texto)
Cielo
#37C4F0
Acentos sobre petróleo
Rojo
#FF4340
Acentos y chulo de marca
Rojo texto
#AD2728
Alertas y errores
Tinta
#0E2A3D
Texto sobre amarillo, pie oscuro
Azul profundo
#113868
Bandas de cifras
Hielo
#F1FBFE
Fondos de sección
Borde
#D5E0E7
Bordes y divisores
Gris medio
#5D7B90
Texto secundario, pies de foto
GOV.CO
#3366CC
Solo barras GOV.CO
Colores de líneas estratégicas
(agregar como colores personalizados «Línea 01»…«Línea 10»)
Línea 01
Desarrollo integral y competencias
#0E496C · texto #FFFFFF
Línea 02
Bienestar socioemocional
#1D9CD3 · texto #062536
Línea 03
Labor docente
#7AD0CD · texto #0E2A3D
Línea 04
Innovación y transformación digital
#3FAE6A · texto #062A1A
Línea 05
Equidad territorial e inclusión rural
#FFCA41 · texto #0E2A3D
Línea 06
Educación inicial
#F79A3E · texto #2A1500
Línea 07
Permanencia y trayectorias
#FF6D5E · texto #1A0707
Línea 08
Educación media y tránsito
#DB322E · texto #FFFFFF
Línea 09
Educación ambiental
#AD2728 · texto #FFFFFF
Línea 10
Multilingüismo
#7B3FA0 · texto #FFFFFF
02 · Ajustes del sitio › Fuentes globales
Fuentes globales
Todas en Google Fonts: Geologica, Poppins y Roboto (las mismas de la cartilla).
Primary
Sistema
Plan Decenal de Educación
Geologica · 800 · -0.02em · H1–H3
Secondary
Sistema
Líneas estratégicas
Poppins · 600 · H4–H6, menú
Text
Sistema
La educación es el corazón de toda transformación social.
Roboto · 400 · 17px · 1.6
Accent
Sistema
Participa →
Poppins · 600 · 15px · botones
Antetítulo
Personalizada
Marco conceptual
Poppins · 600 · 14px · MAYÚS · 0.16em
Número de línea
Personalizada
05
Geologica · 800 · 56px · 0.85
Cifra
Personalizada
200.446
Geologica · 800 · 56px · 1
Pie de foto
Personalizada
SIMAT, corte mayo de 2026
Roboto · 400 · 13px · #5D7B90
03 · Ajustes del sitio › Tipografía
Cuerpo, enlaces y encabezados
Tamaños en px para Escritorio / Tableta / Móvil. Interlineado en em.
Elemento
Familia
Peso
Tamaño D / T / M
Interl.
Espaciado
Color / Nota
H1
Geologica
800
60 / 46 / 36
0.98
-0.02em
Primary · uno por página
H2
Geologica
800
52 / 40 / 30
1.0
-0.02em
Primary
H3
Geologica
800
36 / 30 / 24
1.05
-0.01em
Primary
H4
Poppins
700
22 / 20 / 18
1.3
0
Primary
H5
Poppins
600
18 / 17 / 16
1.35
0
Primary
H6
Poppins
600
14 / 14 / 13
1.4
0.16em
Secondary · MAYÚSCULAS (antetítulo)
Cuerpo
Roboto
400
17 / 16 / 16
1.6
0
Text #35505F
Enlace
Roboto
500
hereda
hereda
0
#1C76A1 → hover #0E496C + subrayado
Párrafo
—
—
—
—
—
Espaciado entre párrafos 16 px
Vista previa
Cundinamarca aprende, lidera, sueña y evoluciona
Las 10 líneas estratégicas
Encabezado H6 · antetítulo
Texto de cuerpo en Roboto 17 px con interlineado 1.6 y ancho máximo de 72 caracteres por línea. Así se ve un enlace dentro de un párrafo.
04 · Ajustes del sitio › Botones
Botones
Elementor admite un estilo global de botón; las variantes se aplican con clases CSS (ver sección 10).
Principal (global)
Poppins 600 15 · pad 14/26 · radio 40 (píldora) · bg #0E496C → #1C76A1
Destacado · .btn-acc
bg #FFCA41 → #F5B800 · texto #0E2A3D
Sobre color · .btn-inv
bg #FFF · texto #0E496C · hover invertido
05 · Ajustes del sitio › Campos de formulario
Formularios
Etiqueta
Poppins 500 · 14px · #0E496C
Campo
Roboto 400 · 16px · #0E2A3D
Fondo
#FFFFFF
Borde
1px · #C9D7E0
Radio
12px
Relleno
12px 16px
Foco
borde 1.5px #1C76A1 + sombra 0 0 0 3px rgba(29,156,211,.3)
Error
borde #AD2728 · mensaje Roboto 13 #AD2728
Vista previa · Formulario de participación
Nombre completo
Escribe tu nombre
Municipio
Fusagasugá
(foco)
Correo electrónico
correo@
Ingresa un correo válido.
06 · Ajustes del sitio › Imágenes + estilos de contenedor
Imágenes y tarjetas
Imagen de contenido
radio 20px (hero: 24px solo esquinas superiores) · sin filtro
Tarjeta
Contenedor con borde y sombra al pasar el cursor.
Tarjeta / contenedor
sin borde · radio 20px · fondo de color de línea o #F1FBFE · hover -4px + sombra 0 14 30 rgba(14,42,61,.25)
Foto duotono (como la cartilla)
fondo: color de línea · img: filter grayscale(1) contrast(1.1); mix-blend-mode: multiply
07 · Ajustes del sitio › Diseño
Diseño, espaciado y breakpoints
Ancho de contenido
1312 px
Contenedor «En caja»; página a ancho completo
Relleno del contenedor
64 / 32 / 20
Escritorio / Tableta / Móvil (px)
Espacio entre secciones
96 / 72 / 56
Más aire para titulares grandes
Espacio entre widgets
16 px
Gap por defecto en contenedores flex
Breakpoint móvil
767 px
Valor por defecto de Elementor
Breakpoint tableta
1024 px
Valor por defecto de Elementor
Breakpoint portátil
1366 px
Activar: ajusta titulares grandes
Selector título de página
h1.entry-title
Ocultar: el H1 va en el hero
08 · Identidad del sitio + Fondo
Identidad
Nombre del sitio
Plan Decenal de Educación de Cundinamarca 2026–2036
Descripción
Cundinamarca aprende, lidera, sueña y evoluciona
Logo del sitio
Marca «Plan decenal» en SVG (pendiente archivo oficial)
Favicon
PNG 512×512, chulo rojo sobre fondo blanco
Fondo
Tipo clásico · #FFFFFF
·
Caja de luz y transiciones
Fondo lightbox
rgba(14,42,61,.92)
Color UI
#FFFFFF · hover #FFCA41
Transición hover
0.2 s ease-out · desplazamiento -4 px en tarjetas
Animaciones de entrada
Solo «Fade In» sutil; respetar prefers-reduced-motion
09 · Theme Builder › Encabezado y pie
GOV.CO y accesibilidad (Res. MinTIC 1519 de 2020)
A− A A+ · Contraste
Barra superior
Alto 44 px · fondo #3366CC · logo GOV.CO blanco 24–26 px de alto, enlazado a gov.co · a la derecha: tamaño de texto, contraste, idioma. Siempre visible, sin modificar colores.
Última actualización
Pie de página
Logo Gobernación (fondo claro) · entidad, dirección, horario, teléfono, correo de notificaciones judiciales · enlaces: PQRSD, Transparencia, datos personales, términos, mapa del sitio, accesibilidad · barra inferior GOV.CO de 52 px.
Accesibilidad WCAG 2.1 AA
· Contraste de texto ≥ 4.5:1 (celeste y rojo puros solo como fondo o en títulos grandes; para texto usar #1C76A1 y #AD2728)
· Foco visible: contorno de 3 px #FFCA41 con separación de 2 px
· Áreas táctiles de 44 px como mínimo · texto alternativo en todas las imágenes
· Jerarquía H1–H6 real, un solo H1 por página · enlace «Saltar al contenido»
10 · Ajustes del sitio › CSS personalizado
CSS personalizado
Variables de línea, variantes de botón y foco accesible. Añade la clase linea-5 al contenedor de una página de línea para heredar su color.
/* Foco accesible */
:focus-visible{outline:3px solid #FFCA41;outline-offset:2px}
/* Colores de líneas estratégicas */
.linea-1{–linea:#0E496C;–linea-txt:#FFFFFF}
.linea-2{–linea:#1D9CD3;–linea-txt:#062536}
.linea-3{–linea:#7AD0CD;–linea-txt:#0E2A3D}
.linea-4{–linea:#3FAE6A;–linea-txt:#062A1A}
.linea-5{–linea:#FFCA41;–linea-txt:#0E2A3D}
.linea-6{–linea:#F79A3E;–linea-txt:#2A1500}
.linea-7{–linea:#FF6D5E;–linea-txt:#1A0707}
.linea-8{–linea:#DB322E;–linea-txt:#FFFFFF}
.linea-9{–linea:#AD2728;–linea-txt:#FFFFFF}
.linea-10{–linea:#7B3FA0;–linea-txt:#FFFFFF}
.linea-bg{background:var(–linea);color:var(–linea-txt)}
.linea-borde{border-top:6px solid var(–linea)}
/* Variantes de botón (añadir clase al widget Botón) */
.btn-sec .elementor-button{background:#1C76A1;color:#fff}
.btn-sec .elementor-button:hover{background:#0E496C}
.btn-outline .elementor-button{background:transparent;border:1.5px solid currentColor}
/* Antetítulo */
.antetitulo{font:600 14px/1.4 Poppins;letter-spacing:.16em;text-transform:uppercase;color:#1C76A1}
/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:3px solid #FFCA41;outline-offset:2px}
/* Colores de líneas estratégicas */
.linea-1{–linea:#0E496C;–linea-txt:#FFFFFF}
.linea-2{–linea:#1D9CD3;–linea-txt:#062536}
.linea-3{–linea:#7AD0CD;–linea-txt:#0E2A3D}
.linea-4{–linea:#3FAE6A;–linea-txt:#062A1A}
.linea-5{–linea:#FFCA41;–linea-txt:#0E2A3D}
.linea-6{–linea:#F79A3E;–linea-txt:#2A1500}
.linea-7{–linea:#FF6D5E;–linea-txt:#1A0707}
.linea-8{–linea:#DB322E;–linea-txt:#FFFFFF}
.linea-9{–linea:#AD2728;–linea-txt:#FFFFFF}
.linea-10{–linea:#7B3FA0;–linea-txt:#FFFFFF}
.linea-bg{background:var(–linea);color:var(–linea-txt)}
.linea-borde{border-top:6px solid var(–linea)}
/* Variantes de botón (añadir clase al widget Botón) */
.btn-sec .elementor-button{background:#1C76A1;color:#fff}
.btn-sec .elementor-button:hover{background:#0E496C}
.btn-outline .elementor-button{background:transparent;border:1.5px solid currentColor}
/* Antetítulo */
.antetitulo{font:600 14px/1.4 Poppins;letter-spacing:.16em;text-transform:uppercase;color:#1C76A1}
/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}