:root
{
    --ancho-de-boton: 7rem;
    --ancho-de-boton-de-carrusel-de-imagenes: 15rem;
    --ancho-de-icono-de-portada: 5rem;
    --ancho-de-imagen-de-carrusel-de-imagenes: 35vw;
    --ancho-de-imagen-de-entrada: 30vw;
    --ancho-de-imagen-de-portada: 35rem;
    --ancho-de-imagen-de-seccion-de-pie-de-pagina: 7rem;
    --ancho-de-seccion: 100%;    
    --ancho-de-seccion-de-cabecera: 100%;
    --ancho-de-seccion-de-pie-de-pagina: 100%;
    --ancho-de-seccion-lateral: 100%;
    --ancho-de-selector-de-idioma: 50%;
    --ancho-de-selector-de-tema: 50%;
    --ancho-de-silueta-de-entrada: 1px;

    --alto-de-contenedor-de-enlace-de-imagen-de-portada: 100%;
    --alto-de-imagen-de-carrusel-de-imagenes: calc(var(--ancho-de-imagen-de-carrusel-de-imagenes)/2);
    --alto-de-imagen-de-entrada: calc(var(--ancho-de-imagen-de-entrada)/2);

    --radio-de-entrada: 1.2rem;
    --radio-de-borde-de-imagen-de-portada: 8px;
    --radio-de-borde-de-imagen-de-seccion-de-pie-de-pagina: 3vh;
    --radio-de-borde-de-item-de-seccion-lateral: 5%;
    --radio-de-borde-de-items: 25px;
    --radio-de-contenedor-de-item: 1rem;
    --radio-de-imagen-de-entrada: 25px;
    --radio-de-item-de-carrusel-de-imagenes: 25px;
    --radio-de-seccion-de-cabecera: 1rem;

    --tamano-de-letra-normal: 1.1em;
    --tamano-de-letra-pequena: 0.875em;
    --tamano-de-letra-de-titulo: 2.5em;
    --tamano-de-letra-de-titulo-de-visualizador: 1.7em;

    --margen-de-abajo-de-item-de-seccion-lateral: 10%;
    --margen-de-arriba-de-seccion-de-pie-de-pagina:10vh;
    --margen-de-arriba-de-seccion-lateral: 1.5rem;
    --margen-de-arriba-de-item-de-seccion-lateral: 10%;
    --margen-de-boton:  0.5rem 0.1rem 0.5rem 0.1rem;
    --margen-de-contenido-de-visualizador: 1.1rem;
    --margen-de-derecha-de-contenedor-de-imagen: 10%;
    --margen-de-derecha-de-seccion-lateral: 2%;
    --margen-de-izquierda-de-contenedor-de-imagen: 5%;
    --margen-de-izquierda-de-icono-de-portada: 5%;
    --margen-doble-de-contenido-de-visualizador: calc(var(--margen-de-contenido-de-visualizador)*2);

    --relleno-de-abajo-de-boton: 1rem;
    --relleno-de-abajo-de-item-de-seccion-lateral: 5%;
    --relleno-de-arriba-de-boton: 1rem;
    --relleno-de-arriba-de-item-de-seccion-lateral: 5%;
    --relleno-de-contenedor-de-imagen-de-seccion-de-pie-de-pagina: 3vh;    
    --relleno-de-contenedor-de-lista-de-seccion-de-pie-de-pagina: 3vh;
    --relleno-de-contenido-de-visualizador: 0.5rem;
    --relleno-de-derecha-de-boton: 2rem;
    --relleno-de-derecha-de-item-de-seccion-lateral: 5%;
    --relleno-de-izquierda-de-boton: 2rem;
    --relleno-de-izquierda-de-item-de-seccion-lateral: 5%;
    --relleno-de-izquierda-de-titulo-de-seccion-de-cabecera: 2.5vw;
    --relleno-de-seccion-de-pie-de-pagina: 5vh;
    --relleno-de-seccion-lateral: 3%;

    --dimensiones-de-sombra-generica: 10px 4px 4px;

    --zoom-de-item-de-seccion-lateral: scale(1.05);
}
@media only screen and (max-width: 400px) {
    :root {
        /**************** VARIALBES ***************/
        /*boton*/
        --ancho-de-boton: 7rem;
        --ancho-de-boton-de-carrusel-de-imagenes: 5rem;
        --ancho-de-seccion: 100%;
        --ancho-de-seccion-lateral: 100%;
        --ancho-de-selector-de-idioma: 100%;
        --ancho-de-selector-de-tema: 100%;
        --margen-de-izquierda-de-contenedor-de-imagen: 5%;
    }
}
@media only screen and (min-width: 401px) and (max-width: 700px) {
    :root {
        --ancho-de-boton: 8rem;
        --ancho-de-boton-de-carrusel-de-imagenes: 7.5rem;
        --ancho-de-seccion-lateral: 100%;
        --ancho-de-seccion: 100%;
        --ancho-de-selector-de-idioma: 100%;
        --ancho-de-selector-de-tema: 100%;
        --margen-de-izquierda-de-contenedor-de-imagen: 5%;
    }
}
@media only screen and (min-width: 701px) and (max-width: 1000px) {
    :root {
        --ancho-de-boton: 8rem;
        --ancho-de-boton-de-carrusel-de-imagenes: 10rem;
        --ancho-de-seccion: 100%;
        --ancho-de-seccion-lateral: 100%;
        --margen-de-izquierda-de-contenedor-de-imagen: 5%;
    }
}

@media only screen and (min-width: 1001px) and (max-width: 1300px) {
    :root {
        --ancho-de-boton: 9rem;
        --ancho-de-boton-de-carrusel-de-imagenes: 10rem;
        --ancho-de-seccion: 72%;
        --ancho-de-seccion-lateral: 25%;
        --margen-de-izquierda-de-contenedor-de-imagen: auto;
    }
}
@media only screen and (min-width: 1301px) {
    :root {
        --ancho-de-boton: 10rem;
        --ancho-de-boton-de-carrusel-de-imagenes: 12.5rem;
        --ancho-de-seccion: 72%;
        --ancho-de-seccion-lateral: 25%;
        --margen-de-izquierda-de-contenedor-de-imagen: auto;
    }
}