@use "../configuraciones/variables";
@use "../herramientas/mixins";

.g-header {
    & {
        @include mixins.centradoVertical;
        width: 100vw;
        height: variables.$height-movil-header-l;
        background-color: variables.$color-principal;
    }

    &__titulo {
        color: variables.$color-background;
    }

    &__titulo--error {
        text-align: center;
        font-size: calc(variables.$fs-tablet-title-m + 1rem);
        color: variables.$color-principal;
        margin-bottom: 4rem;
        margin-top: 2rem;
    }

    &__numero-error {
        text-align: center;
        font-family: variables.$font-family-numerica;
        font-size: calc(variables.$fs-tablet-numero-s + 1rem);
        letter-spacing: 2.5rem;
        padding-left: 2rem;
    }

    &__contenedor-svg {
        position: absolute;
        top: 164px;
        z-index: -10;
        width: 100vw;
        text-align: center;
    }

    &--error {
        overflow-x: hidden;
    }

    @media screen and (max-width: 883px) and (orientation: landscape){
        height: variables.$height-movil-header-s;
    }
}