:root {
    --color_principal: #124857; /*color del evento*/
    --color_contraste: #ffffff;
    --color_complementario: #995c44; /*color contrario*/
    --color_fondo_body: #ffffff;
    --color_fondo_main: #ffffff00;
    --color_texto_general: #f1f1f1;
    --color_texto_resaltado: #3e3e3e;
    /* --fuente_especial: 'PT Sans', sans-serif; */
    --fuente_especial: 'Arial', 'Helvetica', sans-serif;
    --fuente_general: 'Arial', 'Helvetica', sans-serif;

    /*seccion_empresa*/
    --color_fondo_seccion_empresa: #ffffff;
    --color_fondo_titulo: #124857;
    --color_texto_titulo: #ffffff;
    --color_sombra_texto_titulo_empresa: #000000;
    --color_relleno_afiche: #124857;
    --color_fondo_presentacion: #f1f1f1;
    --color_marco_presentacion: #124857;
    --color_texto_presentacion: #555555;
    --color_texto_encabezado: #ffffff;

    --color_texto_boton_flotante: #ffffff;
    --color_fondo_boton_flotante: #1aaea7;

    /*eventos*/
    --color_fondo_seccion_eventos: color-mix(in srgb, var(--color_principal), white 80%);
    --color_fondo_contenedor_eventos: #124857;
    --color_texto_general_eventos: #ffffff;
    --color_sombra_titulo_eventos: #000000;
    --color_fondo_boton_evento: #1aaea7;
    --color_icono_boton_evento: #ffffff;
    --color_texto_boton_evento: #ffffff;
    --color_bordes_boton_evento: #1aaea7;
    --color_sombra_boton_evento: #abfffe;
    --color_sombra_texto_boton_evento: #000000;
    --color_bordes_afiche_evento: #ffffff;
    /*contacto*/
    --color_fondo_seccion_contacto : color-mix(in srgb, var(--color_principal), black 20%);
    --color_texto_seccion_contacto: #ffffff;
    --color_fondo_caja_certificados: #ffffff;
    --color_texto_caja_certificados: color-mix(in srgb, var(--color_principal), black 40%);
    --color_fondo_boton_certificados: color-mix(in srgb, var(--color_principal), black 20%);
    --color_sombra_boton_certificados: color-mix(in srgb, var(--color_principal), white 0.5%);
    --color_texto_boton_certificados: #ffffff;
    --color_icono_boton_certificados: #ffffff;
    --color_iconos_seccion_contacto: #ffffff;
    --color_fondo_redes_sociales: #ffffff;
    --color_botones_redes_sociales: #373737;
    --color_texto_redes_sociales: #ffffff;
    /*footer*/
    --color_olas_footer: #ffffff;
    --color_fondo_footer: #124857;
    --color_texto_footer: #ffffff;
    /*espcializados*/
}

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


    }
    50% {
      transform: scale(1.08);
      opacity: 0.95;
    }
}
/*CSS 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;
    }
/*fin css editor*/

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);
    background-color: var(--color_fondo_body);
    display:flex;
    flex-direction: column;
    align-items: center;
}

main{
    width: 80%;
    background-color: var(--color_fondo_main);
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 5rem;

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

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

    max-width: 1400px;

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




.section_perfil_empresa{
    margin-top: 4rem;
    background-color: var(--color_fondo_seccion_empresa);
    width: 80%;
    max-width: 1400px;
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    .titulo_empresa{
        position: relative;
        width: 100%;
        background-color: var(--color_fondo_titulo);
        padding: 1rem;
        display:flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;

        .icono_svg{
            width: 80px;
            fill: var(--color_contraste);         /* Color de relleno de las formas */
            background-color: var(--color_contraste); /* 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 */
            border-radius: 4px;

            border: 2px outset var(--color_principal);
        }
        h1{
            color: var(--color_texto_titulo);
            font-family: var(--fuente_general);
            text-transform: uppercase;
            text-align: left;
            text-shadow: 2px 2px 2px var(--color_sombra_texto_titulo_empresa);
        }
        .boton_flotante{
            /*
            position: absolute;
            bottom: 10%;
            left: 10%;
            */
            text-decoration:none;
            color: var(--color_texto_boton_flotante);
            background-color: var(--color_fondo_boton_flotante);
            border: 2px outset var(--color_fondo_boton_flotante);
            padding: 1rem;
            border-radius: 4px;
            animation: palpitar 1.5s infinite ease-in-out;
            font-weight: bolder;
            text-shadow: 1px 1px black;
            box-shadow: 1px 1px 6px white;
        }


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

                .icono_svg{
                    width: 60px;
                    /* height: 60px; */
                }
            }
        }
    }

    .body_perfil_empresa{
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 10px;

        .caja_afiche{
            position: relative;
            width: 70%;
            background-color: var(--color_relleno_afiche);
            display:flex;
            justify-content: center;
            align-items: center;
            padding:5px 0px;
            border: 2px solid var(--color_relleno_afiche);
            border-radius: 2px;
            position: relative;
            img{
                width: 100%;
                height: auto;
                max-height: 400px;
                /* opacity: 0.6; */
            }

        }
        .caja_presentacion{
            width: 40%;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border: 4px solid var(--color_marco_presentacion);
            border-radius: 4px;
            background-color: var(--color_fondo_presentacion);


            .titulo{
                background-color: var(--color_marco_presentacion);
                color: var(--color_texto_encabezado);
                text-transform: uppercase;
                text-align:center;
                padding: 3rem 1rem;
                width: 100%;
                display:flex;
                align-items: center;
                justify-content: left;
                gap: 2rem;


                .icono_svg{
                    
                    fill: var(--color_contraste);
                    background-color: var(--color_contraste);
                    stroke: var(--color_principal);        /* Color del trazo de las líneas */
                    stroke-width: 2px;     /* Ancho del trazo */
                    border-radius: 4px;

                }
            }
            .contenido{
                padding: 2rem;
                flex: 1;
                display :flex;
                align-items: center;
                color: var(--color_texto_general);

                p{
                    font-size: 1.6rem;
                    line-height: 1.6;          /* Espaciado entre líneas para mejor lectura */
                    text-align: justify;       
                    word-wrap: break-word;   /* Evita que palabras largas rompan el diseño */
                    padding: 0rem 1rem;
                    color: var(--color_texto_presentacion);
                }
            }

        }

        @media(max-width: 768px){
            &{
                font-size: 12px;
                flex-direction:column;
                justify-content: center;
                align-items: center;
                gap: 3px;

                .caja_afiche{
                    width:100%;
                }

                .caja_presentacion{
                    width: 100%;
                    align-items: flex-start;
                    gap: 1rem;
                    .titulo{
                        padding: 1rem;
                        width: auto;
                        border-bottom-right-radius: 4px;
                    }
                    .contenido{
                        padding: 1rem;
                        p{
                            font-size: 12px;
                            padding: 0.5rem 1rem;
                            margin: 0rem;
                        }
                    }
                }
            }
        }
    }

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



.section_eventos{
    margin-top: 2rem; 
    padding: 2rem 1rem;
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    max-width: 1600px;
    background-color: var(--color_fondo_seccion_eventos);



    .caja_nav{
        margin-top: 2rem;
        width: 100%;
        display:flex;
        justify-content: right;
        gap: 2rem;
        
        button{
            padding: 2rem;
            border: 2px outset var(--color_fondo_contenedor_eventos);
            border-bottom: none;
            cursor: pointer;
            background-color: var(--color_fondo_contenedor_eventos);
            color: var(--color_texto_general_eventos);
            box-shadow: none;
            font-weight: bolder;
            text-shadow: 1px 1px rgb(0, 0, 0);
            font-size: 18px;
        }

        @media(max-width: 768px){
            button{
                padding:1.2rem;
                font-size: 12px;

            }
        }
    }
    .caja_contenido{
        width: 100%;
        height: auto;
        /*
        max-height: 45rem;
        overflow-y: auto;
        */
        padding: 5px;
        border: 4px solid rgba(241, 241, 241, 0.3);
        border-top: 4px solid var(--color_fondo_contenedor_eventos);
        position: relative;

        .grupo_eventos{
            width: 100%;
            padding: 2rem 1rem;
            display: none;
            flex-wrap: wrap;
            justify-content: space-between;
            justify-content: center;
            gap: 4rem;
        }
        .grupo_eventos.active{
            display:flex;
        }
        .caja_evento{
            width: 300px;
            height: 330px;
            border: 3px solid var(--color_fondo_contenedor_eventos);
            border-radius: 24px;
            overflow: hidden;
            background-color: var(--color_fondo_contenedor_eventos);
            display:flex;
            flex-direction: column;
            justify-content: space-around;
            box-shadow: 1px 1px 4px black;

            .titulo_evento{
                padding: 0.5rem 1rem;
                background-color: var(--color_fondo_contenedor_eventos);
                color: var(--color_texto_general_eventos);
                display: flex;
                align-items: center;
                text-align: center;
                height: 48px;

                .texto_titulo{
                    width: 100%;
                    font-size: 16px;
                    font-weight:bold;
                    text-shadow: 1px 1px var(--color_sombra_titulo_eventos);
                    .palabra_resaltada{
                        font-size: 18px; font-weight: bolder;
                    }
                }
            }
            .afiche_evento{
                width: 100%;
                height: 165px;
                border: 2px solid var(--color_bordes_afiche_evento);
                border-radius: 16px;
                background-size: 100% auto;   /* La imagen se ajusta al ancho completo */
                background-position: top;     /* Se muestra la parte superior */
                background-repeat: no-repeat; /* Evita que se repita */
            }

            img{
                width: 100%;
                height: 165px;
            }
            .caja_info{
                background-color: var(--color_fondo_contenedor_eventos);

                font-size: 12px;
                display: flex;
                flex-direction: column;
                flex:1;
                gap: 3px;

                .datos{
                    display: flex;
                    flex-direction: column;
                    padding: 5px;
                    color: var(--color_texto_general_eventos);
                    gap: 8px;
                    .renglon{
                        display:flex;
                        align-items: center;
                        gap:5px;
                        .span1{
                            text-shadow: 1px 1px 1px black;
                            min-width: 48px;
                            font-weight: bolder;
                        }
                        .span2{
    
                        }
                    }


                }

                .caja_boton{
                    width: 100%;
                    display:flex;
                    justify-content: center;
                    .boton_evento{
                        padding: 6px 6px;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        gap: 3px;
                        background-color: var(--color_fondo_boton_evento);
                        border: 2px outset var(--color_bordes_boton_evento);
                        color: var(--color_texto_boton_evento);
                        border-radius: 8px;
                        cursor: pointer;
                        text-decoration: none;
                        font-size: 16px;

                        box-shadow: 1px 1px 3px rgb(135, 221, 233) inset, 1px 1px 3px var(--color_sombra_boton_evento);
                        /*

                        text-shadow: 1px 1px var(--color_sombra_texto_boton_evento);
                        */
                        transition: transform 0.3s ease;


                        svg{
                            stroke: var(--color_icono_boton_evento);
                            width: 20px;
                        }

                        &:hover{
                            border: 1px outset var(--color_fondo_boton_evento);
                            background-color: var(--color_fondo_boton_evento);
                            transform: scale(1.05);
                        }
                    }
                }
            }

        }
    }
}

.section_contacto{
    color: var(--color_texto_seccion_contacto);
    margin-top: 4rem;
    margin-bottom: 2rem;
    width: 90%;
    min-width: 300px;
    max-width: 1000px;
    display:flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    border-radius: 8px;
    padding: 1rem;
    background-color: var(--color_fondo_seccion_contacto);

        .caja_canales_atencion{
            flex: 1;
            width: 400px;
            min-width: 300px;
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding: 2rem 1rem;
            text-shadow: none;

            .caja_titulo{
                width: 100%;
                max-width: 350px;
                padding: 2rem 0rem;
                text-align: left;
                color: var(--color_texto_seccion_contacto);
                display:flex;
                align-items: center;
                gap: 0.5rem;
                h2{
                    margin: 0;
                    width: auto;
                    font-size: 18px;
                    font-weight: bold;
                    border-bottom: 2px solid var(--color_texto_seccion_contacto);
                    padding: 0rem 4px;
                    display: inline;
                    background: rgba(255, 255, 255, 0.183); 
                    backdrop-filter: blur(10px);       
                    -webkit-backdrop-filter: blur(10px);  
                    border-radius: 12px;
                    padding: 1rem;
                    border: 1px solid rgba(255, 255, 255, 0.3);
                    display:flex;
                    align-items: center;

                    svg{
                        width: 30px;
                        stroke: var(--color_texto_seccion_contacto);
                        border-radius: 4px;
                    }
                }
        
                @media(max-width:768px){
                    &{
        
                    }
                }
            }
            .wrapper{
                display:flex;
                flex-direction: column;
                gap: 1rem;
            }
            .caja_canal{
                min-width: 60%;
                width: 100%;
                margin-bottom: 3px;
                display:flex;
                align-items: center;
                justify-content: left;
                gap: 1.5rem;
                color: var(--color_texto_seccion_contacto);
                font-size: 14px;
                svg{
                    width: 20px;
                    height: 20px;
                    min-width:20px;
                    stroke: var(--color_texto_seccion_contacto);
                }

                a{
                    color: var(--color_texto_seccion_contacto);
                }
            }
            @media(max-width:768px){
                &{/*caja_canales_atencion*/
                    width: 100%;
                    min-width: 100%;
                    max-width: 100%;
                    padding: 0rem 0.5rem;

                    .caja_canal{
                        width: 100%;

                    }
                }
            }
        }

        .caja_certificados{
            width: 50%;
            min-width: 250px;
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: right;
            border-radius: 4px;
            align-items: center;
            gap: 2rem;
            padding: 2rem;
            text-shadow: none;
            background-color: var(--color_fondo_caja_certificados);

            span{
                color: var(--color_texto_caja_certificados);
                font-weight: bolder;
                font-size: 20px;
                text-align:center;
            }
            .boton_certificados{
                width: 150px;
                text-decoration: none;
                color: var(--color_texto_boton_certificados);
                display:flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                padding: 1rem;
                border-radius: 4px;
                border: 1px outset var(--color_fondo_boton_certificados); 
                background-color: var(--color_fondo_boton_certificados);
                box-shadow: 1px 1px 4px inset var(--color_sombra_boton_certificados),
                1px 1px 5px rgb(60, 59, 59);
                transition: transform 0.5s ease;

                .svg_boton_certificados{
                    width: 25px;
                    height: 25px;
                    stroke: var(--color_icono_boton_certificados);
                }

                &:hover{
                    transform: scale(1.08);
                }
            }
        }
    @media(max-width:768px){
        &{/*section_contacto*/
            width: 100%;
            gap: 1rem;
            .caja_canales_atencion{
            width: 100%;
            }
            .caja_canal{
                width: 100%;
            }
        }
    }

    
}

/*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;
                }
            }

        }
    }

    /*
    @media(min-width: 768px){
        .footer__caja {
            display: grid;
            grid-template-columns: 1fr 1fr;

            .footer__resena {
                width: 70%;
                justify-self: center;

                .footer__logo_empresa {
                    width: 60px;
                    height: 60px;
                }
            }
            hr{
                display: none;
            }

            .footer__redes {
                justify-content: center;
                text-align: center;

                .div__redes {
                    display: flex;
                    justify-content: center;
    
                    .redes__logo {
                        margin-right: 15px;
                    }
                }
            }

            .footer__pie {
                grid-column: 1 / 3;
                justify-self: center;
                border-top: 1px solid var(--color_texto_footer);
                padding-top: 1rem;
                width: 60%;
            }

        }
    }
    */
}