body {
    margin: 0;
    /* Elimina el margen */
    padding: 0;
    /* Elimina el relleno */
    font-family: 'Nunito', sans-serif;
    background-color: #F8F5F4;
    color: #333;
    text-align: left;
    line-height: 1.4;

}
/* Centrar y alinear los títulos h1, h2 y h3 al nivel de los párrafos */
h1:not(.imagen-container h1),
h2:not(.imagen-container h2),
h3:not(.imagen-container h3) {
    margin-left: 10%;
    margin-right: 10%;
}
ul {
    font-family: var(--font-base, 'sans-serif', sans-serif);
    font-size: 1.15rem; /* Ajusta según el tamaño de fuente general */
    color: var(--color-texto, #333);
    margin-left: 10%; /* Alinea la lista con el resto del texto */
    margin-right: 10%; /* Alinea la lista con el resto del texto */
    line-height: 1.4; /* Espaciado entre líneas para mejorar la legibilidad */
}

ul li {
    margin-bottom: 10px; /* Espacio entre cada elemento de la lista */
    padding-left: 1rem; /* Espaciado entre la viñeta y el texto */
    list-style-type: disc; /* Tipo de viñeta estándar, ajustable según preferencia */
}




h1,
h2 {
    color: #333;
    /* Cambia el color de los títulos */
    font-weight: bold;
    /* Añade un poco de peso a los títulos */
    margin-bottom: 20px;
    /* Añade espacio inferior para separar los títulos del contenido */
    margin-top:50px;
}


/* Estilos adicionales para el formulario */
form {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    align-items: flex-start;
    /* Alinea los elementos del formulario a la izquierda */
    margin-left: 15%;
    /* Margen izquierdo para separar el formulario del borde */
    margin-right: 15%;
    /*margen derecho*/
    width: 250px;
    /* Ajusta el ancho según sea necesario */
}


.required {
  color: red; /* Cambia el color a rojo, por ejemplo */
  margin-left: 5px; /* Ajusta el espaciado entre el texto del label y el asterisco */
}

/* Estilos para el contenedor de la imagen y el texto de información */
.info-image-container {
    position: relative; /* Establece una posición relativa para poder posicionar el texto de información de forma absoluta */
    display: inline-block; /* Permite que el contenedor se ajuste al tamaño de su contenido */
    padding-left: 0.1px; /* Añade un espacio a la izquierda del contenedor para separar la imagen del texto */
}

/* Estilos para la imagen de información */
.info-image {
    width: 10px; /* Establece el ancho de la imagen */
    height: 10px; /* Establece la altura de la imagen */
    vertical-align: top; /* Alinea verticalmente la imagen dentro del contenedor */
}


/* Estilos para el texto de información */
.info-text {
    cursor: pointer; /* Cambia el cursor a un puntero para indicar que el elemento es interactivo */
    color: white; /* Utiliza el color de información definido en tu CSS */
    text-decoration: none;
    /* No es necesario establecer margen izquierdo aquí */
}

/* Estilos para el texto de información que se muestra al pasar el cursor sobre el contenedor */
.info-image-container:hover abbr::after {
    content: attr(title); /* Muestra el texto del atributo title como un pseudo-elemento después del elemento abbr */
    display: block; /* Muestra el texto al pasar el cursor sobre el icono */
    position: absolute; /* Posiciona el texto de información */
    left: calc(100% + 5px); /* Ajusta la posición del texto a la derecha de la imagen */
    top: 50%; /* Alinea verticalmente el texto al centro */
    transform: translateY(-50%); /* Alinea verticalmente el texto al centro */
    background-color: #133FC2; /* Color de fondo para el texto de información */
    border: 1px solid var(--bs-info-border-subtle); /* Añade un borde al texto de información */
    padding: 5px; /* Ajusta el espacio alrededor del texto de información */
    width: 150px; /* Ancho del texto de información */
    z-index: 1; /* Asegura que el texto de información esté sobre otros elementos */
    font-size: 0.8em; /* Ajusta el tamaño de fuente */
}




/* Estilo para el contenedor del formulario y la imagen */
.formulario-imagen-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;

}

/* Estilo para el contenedor de la imagen */
.imagen-container {
    width: 50%;
    /* Ajusta el ancho de la imagen */
    float: right;
    /* Alinea la imagen a la izquierda */
    box-sizing: border-box;
    /* Incluye el padding y el borde en el ancho */
    margin-right: auto;
    margin-right: 100px;
}


/* Estilo para limitar el tamaño máximo de la imagen dentro del contenedor */
.imagen-container>img {
    max-width: 210px;
    /* Ajusta el tamaño máximo según lo necesites */
    height: auto;
    /* Altura ajustada automáticamente para mantener la proporción */
}


input[type="text"],
input[type="file"],
button {
    margin: 5px 0;
    padding: 8px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #FF7A3D;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #ccc;
}

nav {
    background-color: blue;
    color: #fff;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 99, 99%;
    /* Añade un ancho del 100% */
    /* Elimina el margen izquierdo */
    margin-right: 0;
    /* Elimina el margen derecho */
}


nav .logo-container {
    float: left;
    /* Alinea el logo a la izquierda */
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}

.logo-container {
    float: left;
    margin-right: 10px;
}

.logo-container img {
    width: 20px;
    /* Ancho deseado para el logo */
    height: auto;
    /* Altura ajustada automáticamente para mantener la proporción */
}

.container {
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 20px;
    max-width: calc(100% - 40px);
    /* Reduce el ancho máximo del contenedor */

}

/* Estilos para el párrafo lspon */
#lspon {
    text-align: justify;
    /* Ajustar texto justificado */
    margin-bottom: -px;
    /* Espacio entre el párrafo y el formulario */
  margin-left: 10%;
    /* Margen izquierdo */
      margin-right: 10%;
    /* Margen derecho */
  
}

.logo-container img {
    width: 150px;
    /* Ancho deseado para el logo */
    height: auto;
    /* Altura ajustada automáticamente para mantener la proporción */
}

/* Ajustes para el contenedor de la imagen generada y el botón de descarga */
#imagenJpg {
    margin-top: 10px;
    /* Reducir el margen superior */
    margin-bottom: 10px;
    /* Reducir el margen inferior */
    margin-left: 15%;
    margin-right:85%;
    text-align:center;
  
}


#downloadPDF {
    margin-top: 5px;
    /* Agregar un margen superior al botón */
   margin-left: 15%;
    /* Margen izquierdo para separar el formulario del borde */
    margin-right: 15%;
    /*margen derecho*/
    text-align: center;
    /* Centrar el texto */
    max-width: 300px;
    /* Limitar el ancho máximo del botón */
    display: none;
    /* Cambiar a block para que ocupe todo el ancho disponible */
}


footer {
    -webkit-text-size-adjust: 100%;
    --ast-container-default-xlg-padding: 6.67em;
    --ast-container-default-lg-padding: 5.67em;
    --ast-container-default-slg-padding: 4.34em;
    --ast-container-default-md-padding: 3.34em;
    --ast-container-default-sm-padding: 6.67em;
    --ast-container-default-xs-padding: 2.4em;
    --ast-container-default-xxs-padding: 1.4em;
    --ast-code-block-background: #EEEEEE;
    --ast-comment-inputs-background: #FAFAFA;
    --ast-global-color-0: #FF7A3D;
    --ast-global-color-1: #FF5100;
    --ast-global-color-2: #1E1810;
    --ast-global-color-3: #575250;
    --ast-global-color-4: #F8F5F4;
    --ast-global-color-5: #FFFFFF;
    --ast-global-color-6: #000000;
    --ast-global-color-7: #4B4F58;
    --ast-global-color-8: #F6F7F8;
    --ast-border-color: #dddddd;
    --e-global-color-astglobalcolor0: #FF7A3D;
    --e-global-color-astglobalcolor1: #FF5100;
    --e-global-color-astglobalcolor2: #1E1810;
    --e-global-color-astglobalcolor3: #575250;
    --e-global-color-astglobalcolor4: #F8F5F4;
    --e-global-color-astglobalcolor5: #FFFFFF;
    --e-global-color-astglobalcolor6: #000000;
    --e-global-color-astglobalcolor7: #4B4F58;
    --e-global-color-astglobalcolor8: #F6F7F8;
    --page-title-display: block;
    --cmplz_banner_width: 480px;
    --cmplz_banner_background_color: #ffffff;
    --cmplz_banner_border_color: #ffffff;
    --cmplz_banner_border_width: 0px 0px 0px 0px;
    --cmplz_banner_border_radius: 12px 12px 12px 12px;
    --cmplz_banner_margin: 10px;
    --cmplz_categories-height: 163px;
    --cmplz_title_font_size: 15px;
    --cmplz_text_line_height: calc(var(--cmplz_text_font_size) * 1.5);
    --cmplz_text_color: #081735;
    --cmplz_hyperlink_color: #6bcdcc;
    --cmplz_text_font_size: 16px;
    --cmplz_link_font_size: 16px;
    --cmplz_category_body_font_size: 16px;
    --cmplz_button_accept_background_color: #6bcdcc;
    --cmplz_button_accept_border_color: #6bcdcc;
    --cmplz_button_accept_text_color: #081735;
    --cmplz_button_deny_background_color: #eff3f9;
    --cmplz_button_deny_border_color: #eff3f9;
    --cmplz_button_deny_text_color: #081735;
    --cmplz_button_settings_background_color: #ffffff;
    --cmplz_button_settings_border_color: #081735;
    --cmplz_button_settings_text_color: #081735;
    --cmplz_button_border_radius: 7px 7px 7px 7px;
    --cmplz_button_font_size: 15px;
    --cmplz_category_header_always_active_color: green;
    --cmplz_category_header_title_font_size: 14px;
    --cmplz_category_header_active_font_size: 12px;
    --cmplz-manage-consent-height: 50px;
    --cmplz-manage-consent-offset: -35px;
    --cmplz_slider_active_color: #21759b;
    --cmplz_slider_inactive_color: #F56E28;
    --cmplz_slider_bullet_color: #ffffff;
    --altumcode-spacing: 20px;
    --global-palette1: #6bcdcc;
    --global-palette2: #193653;
    --global-palette3: #010b2a;
    --global-palette4: #081735;
    --global-palette5: #0e2341;
    --global-palette6: #132c49;
    --global-palette7: #eff3f9;
    --global-palette8: #e6f7ff;
    --global-palette9: #ffffff;
    --global-palette9rgb: 255, 255, 255;
    --global-palette-highlight: var(--global-palette1);
    --global-palette-highlight-alt: var(--global-palette2);
    --global-palette-highlight-alt2: var(--global-palette9);
    --global-palette-btn-bg: var(--global-palette1);
    --global-palette-btn-bg-hover: var(--global-palette2);
    --global-palette-btn: var(--global-palette2);
    --global-palette-btn-hover: var(--global-palette1);
    --global-body-font-family: Hind, sans-serif;
    --global-heading-font-family: Ariata;
    --global-primary-nav-font-family: inherit;
    --global-fallback-font: sans-serif;
    --global-display-fallback-font: sans-serif;
    --global-content-width: 1600px;
    --global-content-narrow-width: 860px;
    --global-content-edge-padding: 80px;
    --global-calc-content-width: calc(1600px - var(--global-content-edge-padding) - var(--global-content-edge-padding));
    --global-gray-400: #CBD5E0;
    --global-gray-500: #A0AEC0;
    --global-xs-spacing: 1em;
    --global-sm-spacing: 1.5rem;
    --global-md-spacing: 2rem;
    --global-lg-spacing: 2.5em;
    --global-xl-spacing: 3.5em;
    --global-xxl-spacing: 5rem;
    --global-edge-spacing: 1.5rem;
    --global-boxed-spacing: 2rem;
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color--rgb: 0, 124, 186;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
    --wp-admin-theme-color-darker-20: #005a87;
    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
    --wp-admin-border-width-focus: 2px;
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--huge: 42px;
    --eplusicon-asterisk: "";
    --eplusicon-plus1: "";
    --eplusicon-question1: "";
    --eplusicon-minus1: "";
    --eplusicon-glass1: "";
    --eplusicon-music1: "";
    --eplusicon-search1: "";
    --eplusicon-envelope-o: "";
    --eplusicon-heart1: "";
    --eplusicon-star: "";
    --eplusicon-star-o: "";
    --eplusicon-user1: "";
    --eplusicon-film1: "";
    --eplusicon-th-large: "";
    --eplusicon-th: "";
    --eplusicon-th-list: "";
    --eplusicon-check: "";
    --eplusicon-search-plus: "";
    --eplusicon-search-minus: "";
    --eplusicon-power-off: "";
    --eplusicon-signal: "";
    --eplusicon-trash-o: "";
    --eplusicon-home1: "";
    --eplusicon-file-o: "";
    --eplusicon-clock-o: "";
    --eplusicon-road1: "";
    --eplusicon-download1: "";
    --eplusicon-arrow-circle-o-down: "";
    --eplusicon-arrow-circle-o-up: "";
    --eplusicon-inbox: "";
    --eplusicon-play-circle-o: "";
    --eplusicon-refresh: "";
    --eplusicon-list-alt: "";
    --eplusicon-lock1: "";
    --eplusicon-flag1: "";
    --eplusicon-headphones1: "";
    --eplusicon-volume-off: "";
    --eplusicon-volume-down: "";
    --eplusicon-volume-up: "";
    --eplusicon-qrcode1: "";
    --eplusicon-barcode1: "";
    --eplusicon-tag: "";
    --eplusicon-tags: "";
    --eplusicon-book1: "";
    --eplusicon-bookmark1: "";
    --eplusicon-print: "";
    --eplusicon-camera1: "";
    --eplusicon-font1: "";
    --eplusicon-bold1: "";
    --eplusicon-italic1: "";
    -webkit-font-smoothing: antialiased;
    --wp--preset--color--ast-global-color-0: var(--ast-global-color-0);
    --wp--preset--color--ast-global-color-1: var(--ast-global-color-1);
    --wp--preset--color--ast-global-color-2: var(--ast-global-color-2);
    --wp--preset--color--ast-global-color-3: var(--ast-global-color-3);
    --wp--preset--color--ast-global-color-4: var(--ast-global-color-4);
    --wp--preset--color--ast-global-color-5: var(--ast-global-color-5);
    --wp--preset--color--ast-global-color-6: var(--ast-global-color-6);
    --wp--preset--color--ast-global-color-7: var(--ast-global-color-7);
    --wp--preset--color--ast-global-color-8: var(--ast-global-color-8);
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
    --wp--style--global--content-size: var(--wp--custom--ast-content-width-size);
    --wp--style--global--wide-size: var(--wp--custom--ast-wide-width-size);
    --wp--style--block-gap: 24px;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.8em;
    font-family: var(--global-body-font-family);
    color: var(--global-palette4);
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--color--theme-palette-1: #6bcdcc;
    --wp--preset--color--theme-palette-2: #193653;
    --wp--preset--color--theme-palette-3: #010b2a;
    --wp--preset--color--theme-palette-4: #081735;
    --wp--preset--color--theme-palette-5: #0e2341;
    --wp--preset--color--theme-palette-6: #132c49;
    --wp--preset--color--theme-palette-7: #eff3f9;
    --wp--preset--color--theme-palette-8: #e6f7ff;
    --wp--preset--color--theme-palette-9: #ffffff;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --wp--preset--duotone--dark-grayscale: url(#wp-duotone-dark-grayscale);
    --wp--preset--duotone--grayscale: url(#wp-duotone-grayscale);
    --wp--preset--duotone--purple-yellow: url(#wp-duotone-purple-yellow);
    --wp--preset--duotone--blue-red: url(#wp-duotone-blue-red);
    --wp--preset--duotone--midnight: url(#wp-duotone-midnight);
    --wp--preset--duotone--magenta-yellow: url(#wp-duotone-magenta-yellow);
    --wp--preset--duotone--purple-green: url(#wp-duotone-purple-green);
    --wp--preset--duotone--blue-orange: url(#wp-duotone-blue-orange);
    --wp--preset--font-size--small: 14px;
    --wp--preset--font-size--medium: 24px;
    --wp--preset--font-size--large: 32px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--font-size--larger: 40px;
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --e-global-color-primary: #6EC1E4;
    --e-global-color-secondary: #54595F;
    --e-global-color-text: #7A7A7A;
    --e-global-color-accent: #61CE70;
    --e-global-typography-primary-font-family: "Roboto";
    --e-global-typography-primary-font-weight: 600;
    --e-global-typography-secondary-font-family: "Roboto Slab";
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: "Roboto";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Roboto";
    --e-global-typography-accent-font-weight: 500;
    box-sizing: inherit;
    background-color: #ececec;
    background-image: none;
}

.site-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 15vh;
    flex-direction: column;
    width: 100%;
    /* Añade un ancho del 100% */

}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        margin-left: 50px;
    }

    .menu.show-menu {
        display: flex;
    }

    .menu-toggle img {
        width: 30px;
        height: auto;
        cursor: pointer;
    }

    .menu-container {
        display: flex;
        flex-direction: column;
        /* Mostrar los enlaces en columna */
        align-items: center;
        /* Centrar los enlaces horizontalmente */
        background-color: #333;
        /* Agregar un color de fondo */
        width: 100%;
        /* Ajustar el ancho al 100% */
    }

    .menu-container a {
        padding: 10px 0;
        /* Ajustar el relleno vertical */
        color: white;
        text-align: center;
        /* Centrar el texto horizontalmente */
        width: 100%;
        /* Ajustar el ancho al 100% */
    }
}


/* Estilos para dispositivos de pantalla más grandes */
@media screen and (min-width: 769px) {
    .menu {
        display: flex;
        /* Mostrar el menú principal en dispositivos de pantalla más grandes */
    }

    .menu-toggle {
        display: none;
        /* Oculta el icono de hamburguesa en dispositivos de pantalla más grandes */
    }
}

/* Estilos para el menú en la barra de navegación */
nav .menu-container {
    display: flex;
}

nav .menu-container a {
    padding: 10px 15px;
    text-decoration: none;
    color: white;
}

@media screen and (max-width: 768px) {
    nav .menu-container {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .menu {
        /* Mantén el contenedor del menú siempre visible */
        flex-direction: column;
        margin-left: 50px;
        /* No es necesario ocultar el menú aquí */
    }

    .menu-toggle img {
        width: 30px;
        height: auto;
        cursor: pointer;
    }

    .menu-container {
        display: none;
        /* Oculta los enlaces del menú por defecto */
        flex-direction: column;
        align-items: center;
    }

    .menu.show-menu .menu-container {
        display: flex;
        /* Muestra los enlaces del menú cuando el menú está activo */
    }

    .menu-container a {
        padding: 10px 0;
        color: white;
        text-align: center;
        width: 100%;
    }
}


.article-container {
    display: flex;
    justify-content: flex-start; /* Centra el contenido horizontalmente */

}

.article-container p {
    text-align: justify; /* Justificar el texto */
  margin-left: 10%;
    /* Margen izquierdo */
      margin-right: 10%;
    /* Margen derecho */

}