:root {
    --color_principal21: #6da1d-3; /*color del evento*/
    --color_principal: #124857; /*color del evento*/
    --color_contraste: #ffffff;
    --color_complementario: #124857;
    --color_fondo_body: #ffffff;
    --color_fondo_bloques: #f1f1f1;
    --color_fondo_footer: #124857;
    --color_texto_footer: #ffffff;

    --color_transparente: #ffffff00;
    --color_principal_transparente: #27a3c346;
    --color_sombras_principal: #808080;

    --color_fondo_titulo_evento: #124857;
    --color_texto_titulo_evento: #ffffff;
    --color_sombra_titulo_evento: #000000;

    --color_texto_general: #5c5c5c;
    --color_texto_resaltado: #434343;
    --fuente_especial: 'PT Sans', sans-serif;
    --fuente_general: 'Open Sans', sans-serif;

    --color_span_titulo_seccion: #124857;
    --color_fondo_titulo_evento: #124857;
    --color_fondo_caja_afiche: #124857;
    --color_fondo_svg_item_fecha_lugar: #124857;
    --color_svg_item_fecha_lugar: #ffffff;
    --color_cajas_temporizador: #124857;
    --color_border_caja_conferencista: #124857;
    --color_celda_horario: #124857;
    --color_celda_actividad: #124857;
    --color_celda_encargado: #124857;
    --color_borde_caja_dia: #124857;
    --color_fondo_caja_publico: #124857;
    --color_fondo_pie_pagina: #124857;
    --color_icono_conferencista: #124857;
    --color_icono_detalles: #124857;
    --color_icono_descripcion: #124857;
    --color_titulo_dia: #124857;
    --color_titulo_descripcion: #124857;
    --color_subtitulo_descripcion: #124857;
    --color_titulo_detalles: #124857;
    --color_titulo_conferencista: #124857;
    --color_texto_resaltado_detalles: #124857;

    --color_texto_titulo_evento: #ffffff;
    --color_icono_boton: #ffffff;
    --color_fondo_caja_texto_temporizador: #ffffff;
    --color_fondo_conferencista: #ffffff;
    --color_texto_celda_horario: #ffffff;
    --color_texto_pie_pagina: #ffffff;
    --color_texto_boton_registro: #ffffff;

    --color_fondo_boton_registro: #124857;
    --color_sombra_boton_registro: black;
    --color_fondo_mix_boton_registro: white;
    --color_fondo_span_cargo: #1a416a14; /*con transparencia*/
    --color_icono_publico: #385187;
    --color_numerico_temporizador: #ffffff;;


    --color_fondo_section_afiche: #ffffff00;
    --color_fondo_section_temporizador: color-mix(in srgb, var(--color_principal), white 80%);
    --color_fondo_section_descripcion_evento: #e4ecf500;
    --color_fondo_section_detalles: color-mix(in srgb, var(--color_principal), white 80%);
    --color_fondo_section_cronograma: #e4ecf5;
    --color_fondo_section_patrocinadores: #f1f1f100;

    --color_fondo_section_fecha_lugar: #5888c300;
    --color_fondo_section_conferencistas: #ffffff00;
    --color_fondo_section_publico: #f1f1f100;
    --color_fondo_wrapper_section : #e7f9f8;

    --color_fondo_item_fecha_lugar: #124857; /*#124857;*/
    
    
    --color_texto_general_fecha_lugar: #d0dadd;
    --color_texto_caja_registro_fecha_lugar: #124857;
    --color_texto_general_temporizador: #124857;
    --color_iconos_temporizador: #124857;
    --color_texto_general_descripcion: #808080;
    --color_texto_general_publico: #124857;
    --color_texto_general_detalles: #434343;

    --color_texto_resaltado_publico: #124857;
    --color_texto_resaltado_fecha_lugar: #ffffff;
    --color_texto_resaltado_temporizador: #434343;

    --color_fondo_caja_conferencista: #124857;
    --color_nombre_conferencistas: #ffffff;
    --color_texto_span_cargos: #e7f9f8;
    --color_texto_conferencista: #434343;

    --color_caja_transmision: #124857;
    --color_texto_caja_transmision: #ffffff;
    --color_fondo_boton_transmision: #124857;
    --color_texto_boton_transmision: #ffffff;



    --color_titulo_cronograma: #124857;
    --color_fondo_dia_cronograma: #e4ecf5;
    --color_bordes_dia_cronograma: #124857;
    --color_texto_titulo_dia_cronograma: #124857;
    --color_fondo_celda_horario_cronograma: #124857; /*#12485782;*/
    --color_texto_celda_horario_cronograma: #ffffff;
    --color_fondo_celda_actividad_cronograma: #124857; /*color-mix(in srgb, var(--color_fondo_celda_horario_cronograma), #124857 100%);*/
    --color_texto_celda_actividad_cronograma: #43435e;
    --color_fondo_celda_encargado_cronograma: color-mix(in srgb, #124857, white 60%);
    --color_texto_celda_encargado_cronograma: #434343;
    --color_fondo_fila_especial_cronograma: color-mix(in srgb, #124857, #124857 5%);

    --color_titulo_patrocinadores: #124857;

    --color_fondo_section_perfil_empresa: #ffffff00;
    --color_texto_organiza: #124857;
    --color_texto_nombre_empresa: #124857;
    --color_texto_descripcion_empresa: #434343;
    --color_fondo_boton_perfil_empresa: #124857;
    --color_texto_boton_perfil_empresa: #ffffff;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1 rem = 10px */    
}
*, *:before, *:after {
    box-sizing: inherit;
}


body{
    width: 100%;
    margin:0;
    padding:0;
    font-size: 1.5rem;
    font-family: var(--fuente_general);

    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color_fondo_body);

}

@keyframes palpitar{
    0%, 100% {
      transform: scale(1);
      opacity: 1;


    }
    50% {
      transform: scale(1.02);
      opacity: 0.95;
    }
}

/*para el editor*/
@keyframes blinkBorder{
    0%, 100% {
      border-color: transparent;
      box-shadow: none;
    }
    50% {
      border-color: #42f3de;
      /* box-shadow: 0 0 10px #0d0d0d, 1px 1px 5px inset black;  */
    }
}

.section{
    position: relative;
}

.section.active::before{
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 10px dashed transparent;
    border-radius: 8px;
    pointer-events: none;
    animation: blinkBorder 3s infinite;
    z-index: 100;
  }

.etiqueta_ref{
    display: none !important;
    padding:0px;
    margin:0px
}
/*fin css editor*/



/******************************Genericos**************************/

    .resaltar{
        font-size: 1.7rem;
        font-weight:bolder;
    }
    .subtitulo{
        color: var(--color_principal);
        font-size: 20px;
        font-weight:bold;
        padding: 1rem;
        text-shadow: 1px 1px 2px color-mix(in srgb, var(--color_principal), var(--color_sombras_principal) 50%);
        text-align: center;
        position: relative;
        .burbuja{
            position: absolute;
            top: 10px;
            left: -5%;
            width: 110%;
            height: 60px;

            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.391), rgba(255, 255, 255, 0.214),  rgba(255, 255, 255, 0.58) );
            border-radius: 6px;
            box-shadow: 1px 1px 3px gray ;

        }
    }
    .salto_linea-1{
        width: 100%;
        height: 2rem
    }
    .salto_linea-2{
        width: 100%;
        height: 5rem;
    }

    .svg_dinamic{
        fill: rgba(255, 255, 255, 0);         /* Color de relleno de las formas */
        background-color: #ffffff00; /* Fondo del contenedor SVG (visible si defines width/height) */
        stroke: var(--color_complementario);        /* Color del trazo de las líneas */
        stroke-width: 2px;     /* Ancho del trazo */
    }

    .boton_red_social{
        border: 2px outset rgba(192, 192, 192, 0.555);
        padding: 0.4rem;
        border-radius: 4px;
        display:flex;
        justify-content: center;
        text-decoration: none;
        width: 35px;
        background-color:#f1f1f1; 
        border: 2px outset rgba(192, 192, 192, 0.363);
        box-shadow: 2px 2px 4px gray, 2px 2px 5px 2px white inset;
        /*
        border: 1px inset rgba(192, 192, 192, 0.555);
        box-shadow: 2px 2px 2px gray, 2px 2px 5px 5px white inset;
        */

        svg{
            fill: #ffffff;         /* Color de relleno de las formas */
            background-color: #f1f1f1; /* Fondo del contenedor SVG (visible si defines width/height) */
            stroke: var(--color_principal);        /* Color del trazo de las líneas */
            stroke-width: 2px;     /* Ancho del trazo */
            width: 20px;
            height: 20px;
        }

        &:hover{
            border: 1px inset rgba(192, 192, 192, 0.363);
            box-shadow: 2px 2px 2px gray, 2px 2px 5px 5px white inset;
        }
    }
/******************************Genericos**************************/

header{
    width: 100%;
    height: auto;
    padding:0px;
    background-color: rgb(255, 255, 255);
    border: 1px outset white;

    nav{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .logo_medio{
            display:inline-block;
            width: 6rem;
            height: 6rem;
        }
    
    }
}

.section_titulo_afiche{
    display:flex;
    justify-content: center;
    align-items:top;
    width:100%;
    gap: 2px;
    background-color: var(--color_fondo_section_afiche);

    .contenedor_afiche{
        display:flex;
        flex-direction: column;
        justify-content: top;
        align-items: center;
        width: 80%;
        padding: 0rem 0rem;
        gap: 3px;

        .caja_afiche{
            position: relative;
            display:flex;
            justify-content: left;
            align-items: center;
            flex-grow: 1;
            background-color: var(--color_fondo_titulo_evento);
            width: 100%;
            padding: 4rem;
            padding-left: 12rem;
            .titulo_evento{
                color: var(--color_texto_titulo_evento);
                font-size: 5rem;
                text-shadow: 1px 3px 1px var(--color_sombra_titulo_evento);
                width: 50%;
                max-width: 350px;
                font-weight: bolder;

                .estilo_especial{
                    font-size: 8.5rem;

                }
            }
            .logo_empresa{
                position: absolute;
                top: 10px;
                right: 10px;
                width: 20%;
                max-width: 120px;
                height: auto;
                background-color: rgba(255, 255, 255, 0.456);
                background-color: white;
                border-radius: 4px;
                padding: 1rem;
            }
        }

        @media(max-width: 768px){
            &{/*contenedor_afiche*/
                width: 90%;

                .caja_afiche{
                    padding-left: 4rem;

                    .titulo_evento{
                        font-size: 3rem;
                    }
                }
            }
        }
    }
}

.section_fecha_lugar{
    display: flex;
    width: 80%;
    background-color: var(--color_fondo_section_fecha_lugar);
    padding: 2rem 0.5rem 3rem 2rem;
    gap: 0.5rem;
    .caja_info{
        display:flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        width: 65%;
        /* margin-right:1rem; */
        .caja_item{
            display:flex;
            align-items: center;
            gap: 4px;
            background-color: var(--color_fondo_item_fecha_lugar);
            padding: 1rem;
            border-radius: 8px;
            padding-left: 2rem;
        }
        .svg_item{
            fill: #ffffff00;  
            background-color: var(--color_fondo_svg_item_fecha_lugar);/*se requiere SIN transparencia*/
            stroke: var(--color_svg_item_fecha_lugar);
            stroke-width: 2px;     
            width: 30px;
            height: 30px;
            min-width: 30px;
            padding: 3px;
            border-radius: 6px;
            /* margin-right: 1rem; */
        }
        .resaltar{
            font-weight: bold;
            color: var(--color_texto_resaltado_fecha_lugar);
            text-shadow: 1px 1px 3px black;
        }
        span{
            color: var(--color_texto_general_fecha_lugar);
        }
    }
    .caja2{
        width: 35%;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;

        .caja_registro{
            display:flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding :1rem;
            text-align:center;

            span{
                color: var(--color_texto_caja_registro_fecha_lugar);
                font-weight: bolder;
                font-size: 30px;
            }
            button{
                padding: 1rem 2rem;
                width: 200px;
                color: var(--color_texto_boton_registro);
                text-shadow: 1px 1px 1px black;
                cursor: pointer;
                display:flex;
                justify-content: center;
                align-items:center;
                gap: 2rem;
                font-size: 18px;
                font-weight:bold;
                background-image: linear-gradient(
                    to right,
                    color-mix(in srgb, var(--color_fondo_boton_registro), var(--color_fondo_mix_boton_registro) 0%),
                    var(--color_fondo_boton_registro),
                    color-mix(in srgb, var(--color_fondo_boton_registro), var(--color_fondo_mix_boton_registro) 0%)
                );
                animation: palpitar 1.5s infinite ease-in-out;
                border-radius: 3px;
                /* border: 1px outset var(--color_fondo_boton_registro); */

                box-shadow: 1px 1px 3px inset color-mix(in srgb, var(--color_fondo_boton_registro), white 30%), 
                2px 2px 8px color-mix(in srgb, var(--color_fondo_boton_registro), black 40%);


                .svg_item{
                    stroke: var(--color_texto_boton_registro);
                }
    
                &:hover{
                    animation:none;

                    transform: scale(1.02);
                    background-image: linear-gradient(
                        to right,
                        var(--color_fondo_boton_registro),
                        color-mix(in srgb, var(--color_fondo_boton_registro), black 0%)
                    );
                }
            }
        }
    }
    @media(max-width: 920px){
        &{/*section_fecha_lugar*/
            width:90%;
        }
    }
    @media(max-width: 768px){
        &{ /*section_fecha_lugar*/
            width:90%;
            flex-direction: column;
            gap: 2rem;
            padding-left: 0px;
            padding: 1rem;
            align-items: center;

            .caja_info{
                width: 100%;
                font-size: 12px;
                .caja_item{
                    padding-left: 0px;
                    padding: 1rem 0.5rem;

                }
            }
            .caja2{
                width: 90%;
                align-items: center;
            }
        }
    }
}

main{
    width: 90%;
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 0rem;
    background-color: #ffffff00;  /*Transparencia*/

    &{
        @media(max-width: 768px){
            width: 90%;
            width: 100%;
        }
    }
}

.wrapper_sections{ /*contiene la 'sección temporizador' y la 'sección empresa'*/
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 5rem 2rem;
    gap: 4rem;
    background-color: var(--color_fondo_section_temporizador);
    
    .wrapper_son{
        width:auto;
        display:flex;
        flex-wrap:wrap;
        justify-content: space-evenly;
        align-items: center;
        gap: 4rem;
        width:100%;
    }

    .celda_transmision{
        max-height: 200px;
        display:flex;
        flex-direction: column;
        justify-content:space-between; 
        align-items: center;
        gap: 2rem;
        border: 3px solid var(--color_caja_transmision); 
        padding:0px; 
        padding-bottom: 2rem;
        border-radius: 8px;
        .span_transmision{
            color: var(--color_texto_caja_transmision);
            font-weight: bolder;
            font-size: 20px;
            max-width: 300px;
            text-align: center;
            width: 100%;
            padding:2rem 0rem;
            background-color: var(--color_caja_transmision);
        }
        button{
            padding: 1rem 2rem;
            width: 200px;
            border: 1px outset var(--color_fondo_boton_transmision);
            color: var(--color_texto_boton_transmision);
            cursor: pointer;
            display:flex;
            justify-content: center;
            align-items:center;
            gap: 2rem;
            font-size: 18px;
            font-weight:bold;
            background-color: var(--color_fondo_boton_transmision);

            box-shadow: 1px 1px 8px inset color-mix(in srgb, var(--color_fondo_boton_transmision), black 40%), 1px 1px 3px color-mix(in srgb, var(--color_fondo_boton_transmision), black 60%);
            border-radius: 3px;
            animation: palpitar 1.5s infinite ease-in-out;
            transition: transform 0.4s ease-in-out;

            .svg_item{
                stroke: var(--color_texto_boton_transmision);
            }

            &:hover{
                animation: none;
                transform: scale(1.02);
                background-image: linear-gradient(
                    to right,
                    var(--color_fondo_boton_transmision),
                    color-mix(in srgb, var(--color_fondo_boton_transmision), var(--color_sombras_principal) 10%)
                    );
            }
        }
    }

    .section_empresa{
        background-color: var(--color_fondo_section_perfil_empresa);
        display: flex;
        justify-content: center;
        padding-bottom: 2rem;

        .contenedor_detalles_empresa{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            min-width: 280px;
            width: 100%;
            max-width: 400px;
        
            .titulo{
                display:flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-weight: bolder;
    
                .wrapper{
                    width: 100%;
                    font-size: 12px;
                    display:flex;
                    flex-direction: row;
                    justify-content: left;
                    align-items: center;
    
                    span{
                        color: var(--color_texto_organiza);
                        font-weight: bolder;
                    }
                }
                .renglon_titulo{
                    font-size: 18px;
                    width: 100%;
    
                    h2{
                        padding:0px;
                        margin: 0px;
                        text-align: left;
                        color: var(--color_texto_nombre_empresa);
                        text-shadow: 1px 1px 2px black;

                        @media(max-width: 768px){
                            &{
                                font-size: 16px;
                            }

                        }
                    }

                }
            }
    
            .descripcion_empresa{
                display:flex;
                flex-direction: column;
                justify-content: left;
                align-items: center;
    
                .contenido_descripcion{
                    padding-right: 2rem;
                    text-align: justify;
                    color: var(--color_texto_descripcion_empresa);
                    font-size: 12px;
                    margin: 0px;
                    margin-top: 1rem;
                    margin-bottom: 1rem;
                    b{
                        font-size: 14px;
                        font-weight: 600;
                        color: var(--color_texto_resaltado);

                    }

                }
                .texto_pie{
                    width: 100%;
                    text-align: left;
                    font-size: 12px;
                    color: var(--color_texto_descripcion_empresa);
                    font-weight: bold;
                    padding: 5px;
                }
            }
    
            .caja_perfil_empresa{
                width: 100%;
                margin: 0 auto;
                height: auto;
                margin-top: 1rem;
                display:flex;
                flex-wrap: wrap;
                justify-content: left;
                align-items: stretch;
                padding: 5px;
                gap: 2rem;
    
                .btn_web_empresa{
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    gap: 1rem;
                    text-decoration: none;
                    color: var(--color_texto_boton_perfil_empresa);
                    font-weight: bolder;
                    padding: 0.5rem 1rem;
                    background-color: var(--color_fondo_boton_perfil_empresa);
                    box-shadow: 1px 2px 4px black;
                    border: 2px outset var(--color_fondo_boton_perfil_empresa);
                    border-radius: 8px;
                    transition: transform 0.5s ease-in-out;
                    animation: palpitar 1.5s infinite ease-in-out;
                    text-shadow: 1px 1px 3px black;
                    
                    .svg_dinamic{
                        width: 20%;
                        fill: #ffffff00;        /* Color de relleno de las formas */
                        background-color: #f0f0f000; /* Fondo del contenedor SVG (visible si defines width/height) */
                        stroke: var(--color_texto_boton_perfil_empresa);       /* Color del trazo de las líneas */
                        stroke-width: 2px;     /* Ancho del trazo */
                    }
    
                    &:hover{
                        animation:none;
                        transform: scale(1.01);
                    }
                }
    
                .btn_perfil_empresa{
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: var(--color_texto_nombre_empresa);
                    padding: 0.5rem 1rem;
                    gap: 1rem;
                    font-weight: bold;
        
                    border: 1px outset rgba(192, 192, 192, 0.555);
                    border-radius: 8px;
                    background-color:#f3f3f3; 
                    box-shadow: 1px 1px 4px rgb(49, 49, 49), 2px 2px 5px 2px white inset;
                    transition: transform 0.4s ease-in-out;
        
        
                    &:hover{
                    border: 1px outset rgba(192, 192, 192, 0.466);
                    box-shadow: 1px 1px 5px gray;
                    transform: scale(1.08);
                    }
                    svg{
                        width: 20px;
                        height: 20px;
                    }
                }
            } 
        }
    }

    .section_temporizador{
        width: 100%;
        max-width: 500px;
        display:flex; 
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;

        .span_titulo_temporizador{
            color: var(--color_texto_general_temporizador);
            font-weight: bolder;
            font-size: 24px;
            display:flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }
    
        .caja_temporizador{
            display: flex;
            justify-content: center;
            gap: 1rem;
    
            .caja{
                width: 100px;
                height: 100px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                border-radius: 4px;
                box-shadow: 3px 6px 8px 1px var(--color_sombras_principal);
                .texto{
                    width: 100%;
                    background-color: var(--color_fondo_caja_texto_temporizador);
                    color: var(--color_texto_resaltado_temporizador);
                    text-align: center;
                    border-bottom-left-radius: 4px;
                    border-bottom-right-radius: 4px;
                    padding: 0.5rem;
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    flex:1;
                }
                .numerico{
                    width: 100%;
                    font-size: 30px;
                    font-weight: bolder;
                    text-align: center;
                    padding: 2rem 1.5rem;
                    color: var(--color_numerico_temporizador);
                    border-radius:0;
                    background-color: var(--color_cajas_temporizador);
                    text-shadow: 1px 1px 2px black;
                }
            }
            @media(max-width: 768px){
                .caja{
                    width: 70px;
                    span{
                        font-size: 10px;
                        font-weight: bold;
                    }
                    .numerico{
                        font-size: 24px;
                        padding: 2rem 0.5rem;
                    }
                }
            }
        }
    }
}

.section_descripcion_evento{
    background-color: var(--color_fondo_section_descripcion_evento);
    padding: 3rem 6rem 0rem 6rem; 
    font-size: 20px;
    .caja_titulo_seccion{
        .span_titulo{ 
            display: inline-flex;
            justify-content: center;
            align-items:center;
            gap: 1rem;
            width:auto;
            border-bottom: 2px solid var(--color_titulo_descripcion);
            margin-bottom: 2rem;
            color: var(--color_titulo_descripcion);
        }

        .svg_dinamic{
            fill: #ffffff00;         /* Color de relleno de las formas */
            background-color: #f0f0f000; /* Fondo del contenedor SVG (visible si defines width/height) */
            /* stroke: var(--color_icono_descripcion);         */
            stroke: var(--color_titulo_descripcion);        
            stroke-width: 2px;     /* Ancho del trazo */
            width: 30px;
            height: 30px;
        }

    }
    img{
        width: 100%; max-width: 800px;
    }

    @media(max-width: 768px){
        &{
            padding: 4rem 1.5rem 1rem 1.5rem;
            font-size: 18px;
        }

    }
}

.section_detalles{
    background-color: var(--color_fondo_section_detalles);
    padding: 4rem 6rem;
    font-size: 20px;

    .caja_titulo_seccion{
        text-align: center;

        .span_titulo_seccion{
            display: inline-flex;
            justify-content: center;
            align-items:center;
            width:auto;
            padding: 1rem 1rem;
            border-bottom: 2px solid var(--color_titulo_detalles);
            margin-bottom: 2rem;
            color: var(--color_titulo_detalles);
            gap: 1rem;
        }
        .svg_dinamic{
            fill: #ffffff00;         /* Color de relleno de las formas */
            background-color: rgba(240, 240, 240, 0); /* Fondo del contenedor SVG (visible si defines width/height) */
            stroke: var(--color_titulo_detalles);        /* Color del trazo de las líneas */
            stroke-width: 2px;     /* Ancho del trazo */
        }
    }

    .caja_contenido_detalles{
        display:flex;
        flex-direction: column;
        gap: 3rem;
        padding: 1rem 2rem 1rem 0.2rem;
        
        font-size: 18px;
        width: 85%;

        .caja_detalle{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items:baseline;
            padding-left: 20px;
            color: var(--color_texto_general_detalles);
            gap: 1rem;
            

            .subtitulo_detalle{
                font-weight: bold;
                color: var(--color_texto_resaltado_detalles);
                text-shadow: 1px 1px 1px rgb(56, 56, 56);
            }

            span{
                text-align: justify;
            }
            .especial{
                font-style: italic;
                font-weight: bolder;
            }
            .item{
                position: relative;
                padding-left:5px;
                text-align: justify;
                display:flex;
                align-items: center;
                gap: 0.5rem;

                .svg_point{
                    stroke: var(--color_principal);
                    fill: rgba(255, 255, 255, 0);
                    width: 18px;
                    height: 18px;
                    min-width: 18px;
                    margin-left: 0.4rem;
                    stroke-width: 4;
                    
                }
            }
        }
    }
    
    @media(max-width: 768px){
        &{/*section_Detalles*/
            padding: 3rem 1.5rem; 
            font-size: 14px;
            .caja_contenido_detalles{
                width: 100%;

            }
        }
    }
}

.section_conferencistas{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color_fondo_section_conferencistas);
    padding: 3rem 1rem;
    padding-bottom: 5rem;
    width: 100%;

    .caja_titulo_seccion{
        .span_titulo_seccion{
            display: inline-flex;
            justify-content: center;
            align-items:center;
            width:auto;
            padding: 1rem;
            border-bottom: 2px solid var(--color_titulo_conferencista);
            margin-bottom: 4rem;
            color: var(--color_titulo_conferencista);
            gap: 1rem;
        }
        .svg_dinamic{
            fill: #fff;         /* Color de relleno de las formas */
            background-color: #ffffff00; /* Fondo del contenedor SVG (visible si defines width/height) */
            stroke: var(--color_titulo_conferencista);        /* Color del trazo de las líneas */
            stroke-width: 2px;     /* Ancho del trazo */
        }
    }

    .wrapper_invitado_especial{
        display:flex;
        flex-wrap: wrap;
        gap: 6rem;
        padding: 4rem;
        .caja_conferencista.especial{
            display:flex;
            flex-direction: column;
            justify-content: center;
            background-color: var(--color_fondo_caja_conferencista);
            /* border: 4px solid var(--color_border_caja_conferencista); */
            border-radius: 10px;
            min-height: 200px;
            width: 250px;
            position: relative;
    
            .contenido{
                width: 100%;
                height: 100%;
                display:flex;
                flex-direction: column;
                justify-content: space-between;
                margin-top: 6.5rem;
                font-size: 18px;

    
                .renglon{
                    display:flex;
                    justify-content: center;
                }
                .icono_conferencista{
                    display:block;
                    fill: rgba(255, 255, 255, 0);    /* Color de relleno de las formas */
                    background-color: white;
                    stroke: var(--color_icono_conferencista);        /* Color del trazo de las líneas */
                    stroke-width: 1.2;     /* Ancho del trazo (en % o algo asi :v) */
                    width: 120px;
                    height: 120px;
                    position: absolute;
                    top: -50px;
                    left: 50%;
                    transform: translateX(-50%);
                    border: 4px solid white;
                    border-radius: 25%;
                }
    
                .span_nombre_conferencista{
                    color: var(--color_nombre_conferencistas);
                    max-width: 165px;
                    text-shadow: 1px 1px 2px black;
                    font-weight: bolder;
                    text-transform: capitalize;
                    text-align: center;
                    padding: 0.2rem 0.5rem;
                    padding-top: 1rem;
                }

                
                .span_cargo{
                    color: var(--color_texto_span_cargos);
                    text-transform: capitalize;
                    text-align: center;
                    padding:1rem;
                    border-radius: 4px;
                    background-color: var(--color_fondo_span_cargo);
                    max-width: 180px;
                    font-size: 14px;
                }
                .span_trayectoria{
                    font-size: 12px;
                    text-align: justify;
                    color: var(--color_texto_span_cargos);
                    padding: 1rem 2rem;
                }
            }

            @media(max-width: 768px){
                &{
                    .contenido{

                        .icono_conferencista{
                            width: 100px;
                            height: 100px;
                            top: -42px;

                        }
                        .span_nombre_conferencista{
                            font-size: 14px;
                        }
        
                        
                        .span_cargo{
                            font-size: 14px;
                        }
                        .span_trayectoria{
                            font-size: 12px;
                            padding: 5px 10px;
                        }
                    }
                }

            }
        }
    }

    .contenido_conferencistas{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 6rem;
        width:90%;
    
        .caja_conferencista{
            display:flex;
            flex-direction: column;
            justify-content: center;
            background-color: var(--color_fondo_caja_conferencista);
            /* border: 4px solid var(--color_border_caja_conferencista); */
            border-radius: 10px;
            min-height: 80px;
            width: 210px;
            position: relative;
    
            .contenido{
                width: 100%;
                height: 100%;
                display:flex;
                flex-direction: column;
                justify-content: space-between;
                padding-left: 30px;

    
                .renglon{
                    display:flex;
                    justify-content: center;
                }
                .icono_conferencista{
                    display:block;
                    fill: rgba(255, 255, 255, 0);    /* Color de relleno de las formas */
                    background-color: white;
                    stroke: var(--color_icono_conferencista);        /* Color del trazo de las líneas */
                    stroke-width: 1.2;     /* Ancho del trazo (en % o algo asi :v) */
                    width: 80px;
                    height: 80px;
                    position: absolute;
                    top: -15px;
                    left: -40px;
                    border: 4px solid white;
                    border-radius: 25%;
                    /* box-shadow: 1px 1px 3px black; */
                }
    
                .span_nombre_conferencista{
                    color: var(--color_nombre_conferencistas);
                    max-width: 165px;
                    text-shadow: 1px 1px 2px black;
                    font-weight: bolder;
                    text-transform: capitalize;
                    text-align: center;
                    padding: 0.2rem 0.5rem;
                    padding-top: 1rem;
                }

                
                .span_cargo{
                    color: var(--color_texto_span_cargos);
                    text-transform: capitalize;
                    text-align: center;
                    padding:1rem;
                    border-radius: 4px;
                    background-color: var(--color_fondo_span_cargo);
                    max-width: 180px;
                    font-size: 14px;
                }
                .span_trayectoria{
                    font-size: 12px;
                    padding: 5px 10px;
                    text-align: justify;
                    color: var(--color_texto_conferencista);
                }
            }

            @media(max-width: 768px){
                &{
                    .contenido{

                        .icono_conferencista{
                            width:68px;
                            height:68px;
                            top: -12px;
                            left: -32px;

                        }
                        .span_nombre_conferencista{
                            font-size: 14px;
                        }
        
                        
                        .span_cargo{
                            font-size: 14px;
                        }
                        .span_trayectoria{
                            font-size: 12px;
                            padding: 5px 10px;
                        }
                    }
                }

            }
        }
    }

    .wrapper{
        display:flex; justify-content: space-around; flex-wrap: wrap; margin-top: 6rem; 
        width: 100%;
        row-gap: 8rem;
        /* border: 1px dotted red; */

        .celda1{
             min-width: 350px; max-width: 768px;
            /* border: 1px solid silver; */
            .caja_titulo_seccion{
                display: flex;
                justify-content: center;
                .span_titulo_seccion{
                    margin-bottom: 3rem;
                }
            }
            .contenido_conferencistas{
                display:flex;
                flex-wrap: wrap;
                justify-content:center;
            }
        }
        .celda2{
             min-width: 350px; max-width: 768px;

            .caja_titulo_seccion{
                display: flex;
                justify-content: center;
                .span_titulo_seccion{
                    margin-bottom: 3rem;
                }
            }
            .contenido_conferencistas{
                display:flex;
                flex-wrap: wrap;
                justify-content:flex-end;
            }
            /* border: 1px solid silver; */

        }
        @media(max-width: 768px){
            &{
                .celda1{
                    padding-left: 3rem;
                    .caja_titulo_seccion{
                        justify-content: flex-start;
                    }
                    .contenido_conferencistas{
                        justify-content: flex-start;
                    }
                }
                    .celda2{
                        padding-right: 1rem;

                        .caja_titulo_seccion{
                            justify-content: flex-end;
                            padding-right: 3.5rem;

                        }
                        .contenido_conferencistas{
                            justify-content: flex-end;
                        }

                    }
            }
        }
    }
}

.section_cronograma{ /*revisar que a algunas celdas seles aplica un fondo con % blanco/negro 2 veces*/
    width: 100%;
    display:flex;
    flex-direction:column;
    align-items: center;
    background-color: var(--color_fondo_section_cronograma);
    padding: 3rem 0rem 4rem 0rem;
    .caja_titulo_seccion{
        .span_titulo_seccion{
            display: inline-flex;
            justify-content: center;
            align-items:center;
            width:auto;
            padding: 1rem;
            border-bottom: 2px solid var(--color_titulo_cronograma);
            color: var(--color_titulo_cronograma);
            gap: 1rem;
        }
    }
    .contenido{
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        gap: 4rem;

        .titulo_contenido_cronograma{
            font-size: 25px;
            font-weight: bold;
            color: var(--color_subtitulo_descripcion);
            text-shadow: 1px 1px 2px black;
            width: 100%;
            text-align:center;
            margin-top: 2rem;
            margin-bottom: 2rem;
            z-index: 1;
            margin-top: 4rem;
        }
        .caja_dia{
            width: 95%;
            max-width: 900px;
            height: auto;
            background-color: var(--color_fondo_dia_cronograma);
            border-radius: 4px;
            border: 2px solid var(--color_bordes_dia_cronograma);
            padding: 2rem;
            /* background-image: url("./afiche_cerebro.png"); */
            background-repeat: no-repeat;
            background-position: center;
            background-size:contain;
            .titulo_dia{
                text-align:center;
                padding: 0.5rem;
                border-radius: 12px;
                background-color: var(--color_complementario);
                max-width: 200px;
                /* box-shadow: 1px 1px 4px black; */
                text-shadow: 1px 1px 1px black;
                span{
                    color: var(--color_texto_titulo_dia_cronograma);
                    color: white;
                    font-weight: bold;
                    font-size: 24px;
                    text-align:center;
                    text-transform: capitalize;
                }
            }

            .caja_item{
                border-radius: 6px;
                margin-top: 0.8rem;
                display: flex;
                flex-direction: row;
                align-items: stretch; /* Esta es la clave */
                gap: 0rem;
                font-size: 12px;
                box-shadow: 1px 1px 3px black;

                .celda_horario{
                    width: 25%;
                    padding:1rem;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    background-color: var(--color_fondo_celda_horario_cronograma);
                    color: var(--color_texto_celda_horario_cronograma);
                    font-weight: bolder;
                    border-top-left-radius: 6px;
                    border-bottom-left-radius: 6px;
                    display:flex; 
                    flex-direction: column;
                    gap: 6px;
                    font-size: 16px;

                }
                .celda_actividad{
                    width: 35%;
                    padding: 1.5rem 1.8rem;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    background-color: var(--color_fondo_celda_actividad_cronograma);
                    font-weight: bold;
                    color: var(--color_texto_celda_actividad_cronograma);
                    text-align: left;
                    border-radius: 0px;

                }
                .celda_encargado{
                    width: 40%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding:1rem;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    background-color: var(--color_fondo_celda_encargado_cronograma);
                    text-align:center;
                    color: var(--color_texto_celda_encargado_cronograma);
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;



                    .span_nombre_conferencista{
                        font-weight: bolder;

                    }
                    .span_rol_conferencista{
                        font-style: italic;
                        /* color: color-mix(in srgb, var(--color_contraste), black 30%); */

                    }

                }
            }
            .caja_item.item_especial{
                background-color: var(--color_fondo_fila_especial_cronograma);
                padding: 0.6rem 0.3rem;
                font-size: 20px;
                div{
                    background-color: rgba(255, 255, 255, 0);
                    border: none;
                    box-shadow: none;
                    color: white;
                    text-shadow: 1px 1px 2px black;
                }
            }

            @media(max-width:768px){
                &{
                    .caja_item{
                        width:100%;
                        display: grid;
                        grid-template-columns: 40% 60%;
                        grid-template-rows: auto auto;
                        grid-template-areas:
                        "celda1 celda2"
                        "celda1 celda3";
                        width: 100%;   /* ocupa todo el ancho disponible */

                        .celda_horario{
                            grid-area: celda1;
                            width: 100%;
                            display:flex; 
                            flex-direction: column;
                        }
                        .celda_actividad{
                            grid-area: celda2;
                            width: 100%;
                            border-top-right-radius: 6px;
                            width: 100%;
                            display:flex; 
                            flex-direction: column;
                            .small_letters{
                                font-size: 10px
                            }
                        }
                        .celda_encargado{
                            grid-area: celda3;
                            width: 100%;
                            border-top-right-radius: 0px;
                            border-bottom-right-radius: 6px;
                            width: 100%;
                            display:flex; 
                            flex-direction: column;

                        }
                    }
                }
            }
            @media(max-width: 450px){
                &{
                    .titulo_dia{
                        span{
                            font-size: 20px;
                            font-weight: bold;
                        }
                    }
                }
            }

        }

    }
}

.section_cronograma2{
    width: 90%;
    min-width: 340px;
    max-width: 340px;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color_fondo_section_cronograma);
    background-color: white;
    border: 4px solid var(--color_principal);
    border-radius: 12px;
    padding: 2rem;

    .caja_titulo_seccion{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        max-width: 300px;
        .span_titulo_seccion{
            display: inline-flex;
            justify-content: center;
            align-items:center;
            width:auto;
            padding: 1rem;
            color: var(--color_titulo_cronograma);
            gap: 1rem;
        }
        .btn_ver_cronograma{
            padding: 1rem 2rem;
            display:flex;
            align-items: center;
            gap: 1rem;
            font-size: 18px;
            font-weight: bolder;
            text-shadow: 1px 1px 1px black;
            color: white;
            background-color: var(--color_principal);
            border: 2px outset var(--color_principal);
            border-radius: 6px;
            box-shadow: -1px -1px 2px silver, 1px 1px 5px black;
            cursor: pointer;
            

            svg{
                width: 40px;
                height: 40px;
                stroke: var(--color_contraste);
                stroke-width: 2px;
            }

            &:hover{
                box-shadow: -1px -1px 2px gray, 1px 1px 3px black;
                text-shadow: 1px 1px black;

            }

            @media(max-width: 768px){
                &{
                    padding: 1rem;
                    font-size: 14px;
                    svg{
                        width: 26px;
                        height: 26px;

                    }
                }
            }
        }
    }

    @media(max-width: 360px){
        &{
            max-width: 320px;
            .caja_titulo_seccion{
                padding-bottom: 1rem;
            }
        }
    }
}

.section_patrocinadores{
    width: 100%;
    padding: 3rem 2rem 4rem 2rem;
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 2rem;
    background-color: var(--color_fondo_section_patrocinadores);

    span{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: auto;
        padding: 1rem;
        border-bottom: 2px solid var(--color_titulo_patrocinadores);
        margin-bottom: 2rem;
        color: var(--color_titulo_patrocinadores);
        gap: 1rem;
        font-size: 20px;
        font-weight: bold;
        text-shadow: 1px 1px 2px 
        color-mix(in srgb, var(--color_titulo_patrocinadores), black 50%);
           text-align: center;
    }
    .body{
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 80%;
        gap: 1rem;

        .logo{
            width: auto;
            height: 100px;
        }
    }
    @media(max-width: 768px){
        &{/*section_patrocinadores*/
            .body{
                width: 90%;
                

                .logo{
                    /* width: 160px; */
                    width: 90%;
                    height: auto;
                    margin-bottom: 2rem;
                }
            }
        }
    }
}

/*FOOTER*/
footer{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    background-color: var(--color_fondo_footer);
    width: 100%;
    padding: 2rem 0rem 0rem 0rem;

    .footer__caja{
        color: var(--color_texto_footer);
        font-weight: 400;
        font-family: "panton-bold", sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 2rem;
        width: 100%;
        height: auto;
        padding: 0px;

        .footer__resena{
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            font-size: 1.2rem;


            .footer__resena__div {
                border-radius: 4px;
                height: auto;
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 2px 10px;


                span{
                    flex-grow: 1;
                    padding-left: 10px;
                }
            }
        }

        hr {
            margin-top: 0;
            width: 60%;
            border-top: 1px solid var(--color_texto_footer);
        }

        .footer__redes{
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .div__redes{
                display: flex;
                justify-content: space-evenly;

                .redes__logo{
                    padding: 0.2rem;
                    /* border: 3px solid #00d9fb; */
                    border: 3px solid var(--color_texto_footer);
                    border-radius: 20%;
                    transition: transform 0.8s;
                    width: 35px;
                    height: 35px;

                    .footer__svg{
                        background-color: transparent;
                        /* stroke: #00d9fb; */
                        stroke: var(--color_texto_footer);
                        stroke-width: 1.5;
                        width: 2.5rem;
                        height: 2.5rem;
                    }
                }
            }
        }

        .footer__pie {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
            gap: 1rem;
            padding: 0px 0px 1rem 0px;

            .footer__logo_empresa {
                width: 40px;
                height: 40px;
                border-radius: 5px;
                padding: 3px;
                background-color: #ffffff;
                box-shadow: 1px 1px rgb(52, 53, 72), -1px -1px rgb(78, 77, 77);
            }
            .sub_caja{
                display: flex;
                flex-direction: column;
                gap: 3px;

                h3{
                    margin: 0;
                }
            }

        }
    }

}

.modal_estandar{
    display:none;
    flex-direction: column;
    width:100%;
    height:100%;
    position: absolute;
    top:0; left:0;
    background-color: rgba(73, 70, 70, 0.975);
    z-index: 501;

    .btn_cerrar_modal{
        color: white;
        text-shadow: 1px 2px rgb(0, 0, 0);
        font-weight: bold;
        font-size: 20px;
        background-color:rgb(107, 16, 16);
        box-shadow: 2px 2px 1px black;
        border:1px outset rgb(143, 75, 15);
        border-radius: 5px;
        position: absolute;
        top: 15px;
        right: 10px;
        padding: 10px 15px;
        cursor:pointer;
        transition: transform 0.3s ease;
        z-index:5;
    }
    .btn_cerrar_modal:hover{
        background-color:rgb(142, 30, 30);
        transform: scale(1.1);
    }

    .body_modal{
        height: 90dvh;
        min-width: 320px;
        width: 80%;
        max-width: 890px;
        background-color: #f1f1f1;
        border: 2px outset #f1f1f1;
        border-radius: 4px;
        padding: 1rem;
        color: var(--azul);

        iframe{
            width:100%;
            height:auto;
            height: 89dvh;

        }
    }

    &.active{
        display:flex;
        flex-direction: column;
    
        align-items: center;
        justify-content: center;
        position:fixed;
    }
}

.ventana_flotante{
    position: fixed;
    width: 100%;
    height: 100dvh;
    background-color: #030518c0;
    display:none;
    align-items: center;
    justify-content: center;

    .body{
        position: relative;
        width: 100%;
        max-width: 1000px;
        height: 90dvh;
        display:flex;
        align-items:center;
        justify-content: center;
        padding-top: 4rem;
        overflow: hidden;

        .btn_cerrar{
            position: absolute;
            top: 0px;
            right: 0px;
            background-color:brown;
            border: 3px outset brown;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            padding: 0.8rem 1rem ;
            cursor: pointer;
            font-weight: bolder;
        }
        .iframe_emergente{
            background-color: white;
            width: 100%;
            height: 90dvh;
            border: none;
        }
    }

    &.activar{
        display:flex;
    }
}