:root {
--navbar-height: 88px; /* Valor por defecto */
--alto-seccion: calc(100vh - var(--navbar-height));
--color-azul: #181f4b;
--color-naranja: #fe6915;
--color-contraste: #f0f0f0;
}

@font-face {
  font-family: 'caveat';
  src: url('fonts/caveat-bold.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
}

html {
  scrollbar-gutter: stable; /* Previene saltos de layout */
  font-size: 16px;
}
body {
    margin: 0;
    font-family: 'Times New Roman', sans-serif;
    background-color: var(--color-contraste);
}

main {
  height: calc(100dvh - var(--navbar-height));
  overflow-y: auto;
}

nav {
    height: var(--navbar-height);
    z-index: 1000;
}
.sombra-nav {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
p {
    font-size: 16px;
    text-align: justify;
    padding-left: 2dvw;
    padding-right: 2dvw;
}

section {
    height: var(--alto-seccion);
    width: 100%;
}
.azul {
    background-color: var(--color-azul);
    color: var(--color-naranja);
    border-color: var(--color-azul);
    font-size: 1.2em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    transition: box-shadow 0.5s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.60);
    
}
.blanco {
    background-color: var(--color-contraste);
    color: var(--color-azul);
    border-color: var(--color-contraste);
    font-size: 1.2em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    transition: box-shadow 0.5s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.60);
}
.caja-edd {
    background-color: #181f4b55;
    margin: 2em;
    align-items: center;
    justify-content: center;
    border-radius: 0.5em;
    padding: 0 2em 0.5em 2em;
    vertical-align: bottom;
}
.logo_grande {
    width:50dvw;
    height: auto;
}
.naranja {
    background-color: var(--color-naranja);
    color: var(--color-azul);
    border-color: var(--color-naranja);
    font-size: 1.2em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    transition: box-shadow 0.5s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.separacion_menu {
    padding-top: 80px;
}

.separacion_menu_segundo {
    padding-top: 80px;
}

.texto-azul {
    color: #181f4b;
    background-color: var(--azul);
    font-weight: bolder;
    box-shadow: 2 8px 16px 0 rgba(24, 31, 75, 0.3), 0 4px 8px 0 rgba(254, 105, 21, 0.15);
}

.titulo {
    font-size: 4.5em;
    color:var(--color-azul);
    text-align: left;
    font-weight: bolder;
}

.scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.titulo-azul {
    color: var(--color-contraste);
    font-family: 'Caveat', cursive;
    display: inline-block;
    font-weight: bolder;
    font-size: 2em;
    text-align: center;
    padding: 0.3em;
    background-color: var(--color-azul);
    transform: rotate(-6deg);
    margin-top: 0;
    margin-bottom: -3em;
}
.texto-naranja {
    background-color: var(--color-naranja);
    /* display:inline-block; */
    /* width: 100%; */
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 1.2em;
    font-weight: bolder;
    color: var(--color-azul);
    padding: 0.6em;
    transform: rotate(-4deg);
    margin-top: 0;
    margin-bottom: 2em;
}

.titulo-azul-inclinado {
    color: var(--color-contraste);
    font-family: 'Caveat', cursive;
    display: inline-block;
    font-weight: bolder;
    font-size: 2em;
    text-align: center;
    padding: 0.3em;
    background-color: var(--color-azul);
    transform: rotate(1deg);
    margin-bottom: 10px;
}
.texto-naranja-inclinado {
    background-color: var(--color-naranja);
    display:inline-block;
    width: 100%;
    font-family: 'Caveat', cursive;
    font-size: 1.2em;
    font-weight: bolder;
    color: var(--color-azul);
    padding: 0.6em;
    transform: rotate(1deg);
}

#s_portada {
        background-image:url('../img/fondo-blanco.jpg');
        background-size: cover;
        background-position: center;
}
.div_edd_izquierda {
    /* height: 100vh; */
    color:#181f4b
}
.div_edd_derecha {
    color:#181f4b;
    height: 100%;
    width: 100%;
    background-image: url('../img/eddchaze.png');
    background-size: cover;
    vertical-align: bottom;
}
.edd-sueno {
    text-align: center;
    font-size: 3em;
    margin: 0;
}
.edd-sueno-texto {
    font-size: 1.8em;
}
.imagen-edd {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.seccion-edd {
    background: linear-gradient(var(--color-contraste),rgba(45, 3, 197, 0.816)), url('../img/fondo-blanco-y-negro.jpg');
    background-size: cover;
    background-position: center;
}
.sombra-3d {
  text-shadow: 1px 1px 0 #999,
               2px 2px 0 #888,
               3px 3px 0 #777;
}
.titulo-edd {
    font-family: 'caveat', cursive;
    font-size: 1.5em;
    color: var(--color-contraste);
    text-align: right;
    padding: 0;
}



#s_cursos {
    background-image: url('../img/fondo-blanco-y-amarillo.jpg');
    background-size: cover;
    vertical-align: bottom;
}
.curso {
    padding: 1em;
    height: 100%;
    width: 100%;
    background-size: cover;
    font-family: 'caveat', cursive;
    color: var(--color-contraste);
    border-radius: 0.5em;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
    text-align: center;
}
.curso div {
    text-align: center;
    vertical-align: bottom;
    padding: 1em;
    border-radius: 0.5em;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    position: absolute; bottom: 1em;
    left: 1em;
    right: 1em;
}
.curso p {
    text-align: center;;
}
.curso-basico {
    background-image: url('../img/curso_basico.jpg');
    background-position: center center;
}
.curso-conversacional {
    background-image: url('../img/curso_conversacional.jpg');
    background-position: center center;
}
.curso-avanzado {
    background-image: url('../img/curso_avanzado.jpg');
    background-position: center center;
}
.curso-callcenter {
    background-image: url('../img/curso_callcenter.jpg');
    background-position: center center;
}
.curso-vocabulary {
    background-image: url('../img/curso_vocabulary.jpg');
    background-position: center center;
}

/* Seccion horarios y precios */
#s_acerca {
    
    background-image: url('../img/fondo-negro.jpg');
    padding: 0;
    font-size: 16px;
}


@media (min-width: 300px) {
    :root {
    --navbar-height: 88px; /* Valor por defecto */
    --alto-seccion: calc(100vh - var(--navbar-height));
    }

    html {
        scrollbar-gutter: stable; /* Previene saltos de layout */
    }
    body {
        margin: 0;
        /* padding: 0; */
        padding-top: var(--navbar-height);
        font-family: 'Times New Roman', sans-serif;
        background-color: #f0f0f0;
    }

    nav {
        height: var(--navbar-height);
        z-index: 1000;
    }


    section {
        height: var(--alto-seccion);
        
        display: inline-block;
    }
    li {
        font-size: 18px;
    }

    .altura-edd-1 {
        height: 50%;
    }
    .altura-edd-2 {
        height: 50%;
    }
    .logo_grande {
        width: auto;
        height: 80%;
    }
    .titulo {
        font-size: 1.5em;
        color: var(--color-azul);
        text-align: center;
    }
    #div_logo_dark {
        display: none;
    }
    .separacion_menu_segundo {
        padding: 0px;
    }

    
    .titulo-edd {
        font-family: 'caveat', cursive;
        font-size: 1.0em;
        color: var(--color-contraste);
        text-align: right;
        padding: 0;
    }

    .nombre-edd {
        font-family: 'caveat', cursive;
        font-size: 1.2em;
        color: var(--color-naranja);
        text-align: right;
        font-weight: bolder;
        margin-top: 0em;
        padding: 0;
        text-shadow: 3px 3px 0 rgba(50, 48, 48, 0.1),
                4px 4px 0 rgba(27, 26, 26, 0.2),
                8px 5px 0 rgba(21, 19, 19, 0.3);
    }
    #div_inicio_izquierda {
        height: calc(0.3*var(--alto-seccion));
        /* background-color: #001086dc; */
        color: var(--color-azul);
        background-image: url('../img/naranja.jpg');
    }
    #div_inicio_derecha {
        height: calc(0.7*var(--alto-seccion));
        background-color: white;
    }
    #div_inicio_derecha h2 {
        padding: 0;
    }
    #div_inicio_derecha h2 span {
        font-size: 0.8em;
        padding: 0;
    }
    #div_inicio_derecha ul {
        display: none;
    }


    .edd-sueno {
        text-align: center;
        font-size: 1.5em;
        margin: 0;
    }
    .edd-sueno-texto {
        font-size: 1.0em;
    }
    
    
    #s_cursos {
        background-image: url('../img/fondo-blanco-y-negro.jpg');
        background-size: cover;
        vertical-align: bottom;
        padding: 0;
    }
    .cursos-fondo {
        background-color: #f0f0f0f6;
    }
    .titulo-azul-inclinado {
        color: var(--color-contraste);
        font-family: 'Caveat', cursive;
        display: inline-block;
        font-weight: bolder;
        font-size: 1.4em;
        text-align: center;
        padding: 0.3em;
        background-color: var(--color-azul);
        transform: rotate(1deg);
        margin-bottom: 10px;
    }
    .texto-naranja-inclinado {
        background-color: var(--color-naranja);
        display:inline-block;
        width: 100%;
        font-family: 'Caveat', cursive;
        font-size: 0.8em;
        font-weight: bolder;
        color: var(--color-azul);
        padding: 0.6em;
        transform: rotate(1deg);
    }
    .cursos-titulo {
        /* display: flex; */
        height: 20%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cursos-contenido {
        /* display: flex; */
        font-size: 0.5em;
        height: 80%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .titulo-cursos {
        font-family: 'caveat', cursive;
        font-size: 1em;
        color: var(--color-contraste);
        text-align: right;
        padding: 0;
    }

    .nombre-cursos {
        font-family: 'caveat', cursive;
        font-size: 1em;
        color: var(--color-naranja);
        text-align: right;
        font-weight: bolder;
        margin-top: 0em;
        padding: 0;
        text-shadow: 3px 3px 0 rgba(50, 48, 48, 0.1),
                4px 4px 0 rgba(27, 26, 26, 0.2),
                8px 5px 0 rgba(21, 19, 19, 0.3);
    }




    /* =================================================================== */
    /* Seccion horarios y precios */
    #s_acerca div {
        background-color: rgba(13, 0, 111, 0.544);
        font-size: 10px;
    }
    #acerca_titulo {
        /* width: 100%; */
        text-align: right;
        padding: 1em;
        height: 7%;
        margin: 0;

    }
    #acerca_titulo h2 {
        color: var(--color-naranja);
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-weight: bolder;
        font-size: 3em;
    }
    #acerca_contenido {
        height: 93%;
        font-size: 1.1em;
        padding: 0;
    }
    #acerca_contenido div {
        padding: 0em 0.5em 0em 0.5em;
        height: 100%;
        text-align: left;
        margin-bottom: 0.5em;
    }
    #acerca_contenido hr {
        display: none;
    }
    #acerca_contenido div div div {
        height: 100%;
        border-radius: 0.8em;
        padding: 1em 2em 1em 2em;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
       
        background-color: rgba(255, 255, 255, 0);
    }
    #acerca_contenido div div div h3 {
        font-size: 2em;
        font-weight: bolder;

    }
    #acerca_contenido div div div h4 {
        font-size: 1.5em;
        text-align: center;
    } 
   
    

    #acerca_contenido div div div .tabla-naranja {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0;
        text-align: center;
        height: auto;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0);
    }
    #acerca_contenido div div div .tabla-naranja div{
        margin: 0;
        padding: 0.5em;
        text-align: center;
    }

    #acerca_contenido div div div .tabla-naranja div div {
        box-shadow: 0 4px 8px rgb(238, 194, 0);
        border-radius: 0;
        padding: 1em;
    }
    #acerca_contenido div div div .tabla-naranja div .encabezado {
        font-weight: bolder;
        background-color: var(--color-naranja);
        border-radius: 0.5em 0.5em 0 0;
        color: var(--color-contraste);
        padding: 0.1em;
        font-size: 1.2em;
    }

    #acerca_contenido div div div .tabla-naranja div .cuerpo {
        font-weight: bolder;
        background-color: var(--color-contraste);
        border-radius: 0 0 0.5em 0.5em;
        color: var(--color-azul);
        padding: 0.2em;
        font-size: 1.5em;
        height: auto;
    } 

    .acerca p {
        font-size: 1.2em;
    }
    
    #acerca_contenido div div div ul li {
        font-size: 1.1em;
    }
    #acerca_contenido div div div div p a {
        font-size: 1em;
    }
    .acerca-fondo {
        height: 100%;
        background-color:rgba(0, 0, 0, 0.581);
        padding: 0;
    }
    .acerca-izquierda {
        background-image: url('../img/azul.jpg');
        color: var(--color-contraste);
        height: 20%;
    }
    .acerca-derecha {
        background-image: url('../img/naranja.jpg');
        color: var(--color-azul);
        height: 80%;
    }
    .acerca-derecha p {
        font-size: 1.2em;
    }
    .acerca-derecha h4 {
        color: var(--color-contraste);
        font-weight: bolder;
        text-shadow: 3px 3px 0 rgba(50, 48, 48, 0.1);
    }
    .acerca-derecha div p a {
        font-size: 1em;
    }

}


@media (min-width: 600px) {
    p {
        font-size: 16px;
    }
    .altura-edd-1 {
        height: 40%;
    }
    .altura-edd-2 {
        height: 60%;
    }
    .separacion_menu {
        padding-top: 0;
    }
    
    .separacion_menu_segundo {
        padding-top: 0;
    }

    #div_logo_dark {
        display: block;

    }
    .titulo {
        font-size: 3em;
        color: var(--color-azul);
    }
    .logo_grande {
        width: 50vw;
        height: auto;
    }

    #div_inicio_izquierda {
        height: 100%;
        /* background: #001086dc; */
        background-image: url('../img/naranja.jpg');
    }
    #div_inicio_derecha {
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .div_edd_derecha {
        height: 100%;
        width: 100%;
        background-image: url('../img/eddchaze.png');
        background-size: cover;
        vertical-align: bottom;
    }
    .edd-sueno {
        font-size: 2em;
    }
    .edd-sueno-texto {
        font-size: 1.4em;
        padding: 0.5em;
    }
    .titulo-edd {
        font-family: 'caveat', cursive;
        font-size: 1.5em;
        color: var(--color-contraste);
        text-align: right;
        padding: 0;
    }

    .nombre-edd {
        font-family: 'caveat', cursive;
        font-size: 3em;
        color: var(--color-naranja);
        text-align: right;
        font-weight: bolder;
        margin-top: 0em;
        padding: 0;
        text-shadow: 3px 3px 0 rgba(50, 48, 48, 0.1),
                4px 4px 0 rgba(27, 26, 26, 0.2),
                8px 5px 0 rgba(21, 19, 19, 0.3);
    }




    /* =================================================================== */
    /* Seccion horarios y precios */
    #s_acerca div {
        background-color: rgba(13, 0, 111, 0.544);
        font-size: 16px;
    }
    #acerca_titulo {
        /* width: 100%; */
        text-align: right;
        padding: 1em;
        height: 10%;
        margin: 0;

    }
    #acerca_titulo h2 {
        color: var(--color-naranja);
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-weight: bolder;
        font-size: 3em;
    }
    #acerca_contenido {
        height: 90%;
        font-size: 1.1em;
    }
    #acerca_contenido div {
        padding: 0 1.5em 0 1.5em;
        height: 100%;
        text-align: left;
        margin-bottom: 0.5em;
    }
    #acerca_contenido div div div {
        height: 100%;
        border-radius: 0.8em;
        padding: 1em 2em 1em 2em;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
       
        background-color: rgba(255, 255, 255, 0);
    }
    #acerca_contenido div div div h3 {
        font-size: 2em;
        font-weight: bolder;

    }
    #acerca_contenido div div div h4 {
        font-size: 1.5em;
        text-align: center;
    } 
   
    

    #acerca_contenido div div div .tabla-naranja {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0;
        text-align: center;
        height: auto;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0);
    }
    #acerca_contenido div div div .tabla-naranja div{
        margin: 0;
        padding: 0.5em;
        text-align: center;
    }

    #acerca_contenido div div div .tabla-naranja div div {
        box-shadow: 0 4px 8px rgb(238, 194, 0);
        border-radius: 0;
        padding: 1em;
    }
    #acerca_contenido div div div .tabla-naranja div .encabezado {
        font-weight: bolder;
        background-color: var(--color-naranja);
        border-radius: 0.5em 0.5em 0 0;
        color: var(--color-contraste);
        padding: 0.1em;
        font-size: 1.2em;
    }

    #acerca_contenido div div div .tabla-naranja div .cuerpo {
        font-weight: bolder;
        background-color: var(--color-contraste);
        border-radius: 0 0 0.5em 0.5em;
        color: var(--color-azul);
        padding: 0.2em;
        font-size: 1.5em;
        height: auto;
    } 

    .acerca p {
        font-size: 1.2em;
    }
    
    #acerca_contenido div div div ul li {
        font-size: 1.1em;
    }
    #acerca_contenido div div div div p a {
        font-size: 1em;
    }
    .acerca-fondo {
        height: 100%;
        background-color:rgba(0, 0, 0, 0.581);
        padding: 0;
    }
    .acerca-izquierda {
        background-image: url('../img/azul.jpg');
        color: var(--color-contraste);
    }
    .acerca-derecha {
        background-image: url('../img/naranja.jpg');
        color: var(--color-azul);
    }
    .acerca-derecha h4 {
        color: var(--color-contraste);
        font-weight: bolder;
        text-shadow: 3px 3px 0 rgba(50, 48, 48, 0.1);
    }

}


@media (min-width: 900px) {
    .sombra-nav {
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0);
    }
    p {
        font-size: 16px;
    }
    .separacion_menu {
        padding-top: 0;
    }
    
    .separacion_menu_segundo {
        padding-top: 0;
    }

    #div_logo_dark {
        display: block;

    }
    .titulo {
        font-size: 4.5em;
        color: var(--color-azul);
    }
    .logo_grande {
        width: 50vw;
        height: auto;
    }

    #div_inicio_izquierda {
        height: var(--alto-seccion);
        /* background: #001086dc; */
        background-image: url('../img/naranja.jpg');
    }
    #div_inicio_derecha {
        height: var(--alto-seccion);
        background-color: rgba(255, 255, 255, 0.5);
    }
    .altura-edd-1 {
        height: 100%;
    }
    .altura-edd-2 {
        height: 100%;
    }
    .nombre-edd {
        font-family: 'caveat', cursive;
        font-size: 3.5em;
        color: var(--color-naranja);
        text-align: right;
        font-weight: bolder;
        margin-top: 0em;
        padding: 0;
        text-shadow: 3px 3px 0 rgba(50, 48, 48, 0.1),
                4px 4px 0 rgba(27, 26, 26, 0.2),
                8px 5px 0 rgba(21, 19, 19, 0.3);
    }



    .cursos-titulo {
        /* display: flex; */
        height: 30%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cursos-contenido {
        /* display: flex; */
        height: 70%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .titulo-cursos {
        font-family: 'caveat', cursive;
        font-size: 1.5em;
        color: var(--color-contraste);
        text-align: right;
        padding: 0;
    }

    .nombre-cursos {
        font-family: 'caveat', cursive;
        font-size: 4em;
        color: var(--color-naranja);
        text-align: right;
        font-weight: bolder;
        margin-top: 0em;
        padding: 0;
        text-shadow: 3px 3px 0 rgba(50, 48, 48, 0.1),
                4px 4px 0 rgba(27, 26, 26, 0.2),
                8px 5px 0 rgba(21, 19, 19, 0.3);
    }



    /* =================================================================== */
    /* Seccion horarios y precios */
    #s_acerca div {
        background-color: rgba(13, 0, 111, 0.544);
        font-size: 16px;
    }
    #acerca_titulo {
        /* width: 100%; */
        text-align: right;
        padding: 1em;
        height: 15%;
        margin: 0;

    }
    #acerca_titulo h2 {
        color: var(--color-naranja);
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-weight: bolder;
        font-size: 3em;
    }
    #acerca_contenido {
        height: 85%;
        font-size: 1.1em;
    }
    #acerca_contenido div {
        padding: 0 1.5em 0 1.5em;
        margin: 0;
        height: 100%;
        text-align: left;
    }
    #acerca_contenido div div div {
        height: 100%;
        border-radius: 0.8em;
        padding: 1em 2em 1em 2em;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
       
        background-color: rgba(255, 255, 255, 0);
    }
    #acerca_contenido div div div h3 {
        font-size: 2em;
        font-weight: bolder;

    }
    #acerca_contenido div div div h4 {
        font-size: 1.5em;
        text-align: center;
    } 
   
    

    #acerca_contenido div div div .tabla-naranja {
        /* width: 100%; */
        margin: 0;
        padding: 0;
        border-radius: 0;
        text-align: center;
        height: auto;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0);
    }
    #acerca_contenido div div div .tabla-naranja div{
        margin: 0;
        padding: 0.5em;
        text-align: center;
    }

    #acerca_contenido div div div .tabla-naranja div div {
        box-shadow: 0 4px 8px rgb(238, 194, 0);
        border-radius: 0;
        padding: 1em;
    }
    #acerca_contenido div div div .tabla-naranja div .encabezado {
        font-weight: bolder;
        background-color: var(--color-naranja);
        border-radius: 0.5em 0.5em 0 0;
        color: var(--color-contraste);
        padding: 0.1em;
        font-size: 1.2em;
    }

    #acerca_contenido div div div .tabla-naranja div .cuerpo {
        font-weight: bolder;
        background-color: var(--color-contraste);
        border-radius: 0 0 0.5em 0.5em;
        color: var(--color-azul);
        padding: 0.2em;
        font-size: 1.5em;
        height: auto;
    } 

    .acerca p {
        font-size: 1.2em;
    }
    
    #acerca_contenido div div div ul li {
        font-size: 1.1em;
    }
    #acerca_contenido div div div div p a {
        font-size: 1em;
    }
    .acerca-fondo {
        height: 100%;
        background-color:rgba(0, 0, 0, 0.581);
        padding: 0;
    }
    .acerca-izquierda {
        background-image: url('../img/azul.jpg');
        color: var(--color-contraste);
    }
    .acerca-derecha {
        background-image: url('../img/naranja.jpg');
        color: var(--color-azul);
    }
    .acerca-derecha h4 {
        color: var(--color-contraste);
        font-weight: bolder;
        text-shadow: 3px 3px 0 rgba(50, 48, 48, 0.1);
    }
    
}