/* =========================================================
   ROCK & BLUES CAFÉ ZARAGOZA
   TRABAJO
   Mobile-first
========================================================= */


/* =========================================================
   ACCESIBILIDAD
========================================================= */

.rb-sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;

}


/* =========================================================
   CABECERA
========================================================= */

.rb-work-header {

    max-width:
        820px;

    margin:
        0
        auto
        38px;

    text-align:
        center;

}


.rb-work-kicker {

    display:
        inline-block;

    margin-bottom:
        9px;

    color:
        var(--rb-red);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1.6px;

}


.rb-work-header .rb-page-title,
.rb-work-header .rb-page-subtitle {

    text-align:
        center;

}


.rb-work-header .rb-page-subtitle {

    justify-content:
        center;

    margin-left:
        auto;

    margin-right:
        auto;

}


.rb-work-intro {

    max-width:
        760px;

    margin:
        0
        auto;

    color:
        #c6c6c6;

    font-size:
        15px;

    line-height:
        1.75;

}


/* =========================================================
   CABECERAS DE BLOQUE
========================================================= */

.rb-work-section-heading {

    margin-bottom:
        18px;

    text-align:
        center;

}


.rb-work-section-heading > span {

    display:
        inline-block;

    margin-bottom:
        3px;

    color:
        var(--rb-red);

    font-size:
        9px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

}


.rb-work-section-heading h2 {

    margin:
        0;

    color:
        #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        34px;

    line-height:
        1;

    font-weight:
        900;

    text-transform:
        uppercase;

}


.rb-work-section-heading p {

    max-width:
        650px;

    margin:
        9px
        auto
        0;

    color:
        var(--rb-muted);

    font-size:
        13px;

    line-height:
        1.6;

}


/* =========================================================
   QUÉ VALORAMOS
========================================================= */

.rb-work-values {

    margin-bottom:
        48px;

}


.rb-work-values-grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        8px;

}


.rb-work-value {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        54px;

    padding:
        0
        15px;

    color:
        #e9e9e9;

    background:
        #121212;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        12px;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .55px;

}


.rb-work-value i {

    width:
        18px;

    color:
        var(--rb-red);

    font-size:
        14px;

    text-align:
        center;

}


/* =========================================================
   FORMULARIO
========================================================= */

.rb-work-application {

    width:
        100%;

    max-width:
        none;

}


.rb-work-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

}


/* =========================================================
   FIELDSET
========================================================= */

.rb-work-fieldset {

    min-width:
        0;

    margin:
        0;

    padding:
        17px;

    background:
        #111;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius:
        14px;

}


.rb-work-fieldset legend {

    padding:
        0
        7px;

    color:
        #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        20px;

    line-height:
        1;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .25px;

}


.rb-work-fieldset-help {

    margin:
        0
        0
        12px;

    color:
        #888;

    font-size:
        11px;

}


/* =========================================================
   CAMPOS
========================================================= */

.rb-work-fields-grid {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        14px;

}


.rb-work-field {

    min-width:
        0;

}


.rb-work-field label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #dadada;

    font-size:
        11px;

    font-weight:
        800;

}


.rb-work-field input,
.rb-work-field textarea {

    width:
        100%;

    margin:
        0;

    color:
        #fff;

    background:
        #080808;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        10px;

    outline:
        none;

    transition:
        border-color .18s ease,
        background .18s ease;

}


.rb-work-field input {

    height:
        52px;

    padding:
        0
        14px;

}


.rb-work-field textarea {

    min-height:
        140px;

    padding:
        13px
        14px;

    resize:
        vertical;

    font:
        inherit;

    line-height:
        1.55;

}


.rb-work-field input:hover,
.rb-work-field textarea:hover {

    background:
        #0b0b0b;

}


.rb-work-field input:focus,
.rb-work-field textarea:focus {

    border-color:
        var(--rb-red);

}


.rb-work-field textarea::placeholder {

    color:
        #777;

}


.rb-work-help {

    margin-top:
        6px;

    color:
        #777;

    font-size:
        10px;

}


/* =========================================================
   OPCIONES RADIO / CHECK
========================================================= */

.rb-work-options {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        8px;

}


.rb-work-option {

    position:
        relative;

    display:
        block;

    cursor:
        pointer;

}


.rb-work-option input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;

}


.rb-work-option > span {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-height:
        54px;

    padding:
        10px
        13px;

    color:
        #c8c8c8;

    background:
        #080808;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        10px;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;

}


.rb-work-option strong {

    font-size:
        11px;

    line-height:
        1.25;

    font-weight:
        800;

}


.rb-work-option small {

    display:
        block;

    margin-top:
        3px;

    color:
        #777;

    font-size:
        9px;

    line-height:
        1.25;

}


.rb-work-option:hover > span {

    color:
        #fff;

    border-color:
        rgba(255,255,255,.22);

}


.rb-work-option input:checked + span {

    color:
        #fff;

    background:
        #171717;

    border-color:
        var(--rb-red);

}


.rb-work-option input:checked + span::before {

    content:
        "";

    display:
        block;

    width:
        7px;

    height:
        7px;

    margin-bottom:
        7px;

    background:
        var(--rb-red);

    border-radius:
        50%;

}


.rb-work-option input:focus-visible + span {

    outline:
        2px solid
        #fff;

    outline-offset:
        2px;

}


/* =========================================================
   CV
========================================================= */

.rb-work-file {

    display:
        grid;

    gap:
        12px;

}


.rb-work-file label {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        72px;

    padding:
        14px;

    color:
        #fff;

    background:
        #080808;

    border:
        1px dashed
        rgba(255,255,255,.22);

    border-radius:
        10px;

    cursor:
        pointer;

}


.rb-work-file label:hover {

    border-color:
        var(--rb-red);

}


.rb-work-file label i {

    color:
        var(--rb-red);

    font-size:
        21px;

}


.rb-work-file label span {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.rb-work-file label strong {

    font-size:
        12px;

}


.rb-work-file label small {

    color:
        #888;

    font-size:
        10px;

}


.rb-work-file input[type="file"] {

    max-width:
        100%;

    color:
        #aaa;

    font-size:
        11px;

}


.rb-work-file input[type="file"]::file-selector-button {

    min-height:
        40px;

    margin-right:
        10px;

    padding:
        0
        13px;

    color:
        #fff;

    background:
        #232323;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        8px;

    font-weight:
        800;

    cursor:
        pointer;

}


/* =========================================================
   PRIVACIDAD
========================================================= */

.rb-work-privacy {

    padding:
        4px
        2px;

}


.rb-work-privacy label {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    color:
        #aaa;

    font-size:
        11px;

    line-height:
        1.55;

    cursor:
        pointer;

}


.rb-work-privacy input {

    width:
        18px;

    height:
        18px;

    margin:
        1px
        0
        0;

    flex:
        0 0
        auto;

    accent-color:
        var(--rb-red);

}


.rb-work-privacy a {

    color:
        #fff;

    text-decoration:
        underline;

    text-decoration-color:
        var(--rb-red);

    text-underline-offset:
        3px;

}


/* =========================================================
   HONEYPOT
========================================================= */

.rb-work-honeypot {

    position:
        absolute;

    left:
        -9999px;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

}


/* =========================================================
   ENVÍO
========================================================= */

.rb-work-submit-row {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        10px;

    padding-top:
        4px;

}


.rb-work-submit {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    width:
        100%;

    min-height:
        52px;

    padding:
        0
        20px;

    color:
        #fff;

    background:
        var(--rb-red);

    border:
        1px solid
        var(--rb-red);

    border-radius:
        10px;

    font-size:
        11px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;

    cursor:
        pointer;

    transition:
        background .18s ease,
        border-color .18s ease;

}


.rb-work-submit:hover {

    background:
        var(--rb-red-light);

    border-color:
        var(--rb-red-light);

}


.rb-work-submit-row p {

    margin:
        0;

    color:
        #666;

    font-size:
        9px;

    line-height:
        1.45;

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 620px) {

    .rb-work-values-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .rb-work-options {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 820px) {

    .rb-work-header {

        margin-bottom:
            48px;

    }


    .rb-work-intro {

        font-size:
            16px;

    }


    .rb-work-values {

        margin-bottom:
            58px;

    }


    .rb-work-values-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .rb-work-fieldset {

        padding:
            21px;

        border-radius:
            16px;

    }


    .rb-work-fields-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .rb-work-options {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

    }


    .rb-work-submit-row {

        align-items:
            flex-start;

    }


    .rb-work-submit {

        width:
            auto;

        min-width:
            240px;

    }

}
/* =========================================================
   MENSAJES DE FORMULARIO
========================================================= */

.rb-work-alert {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-bottom:
        18px;

    padding:
        15px
        16px;

    background:
        #111;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        12px;

}


.rb-work-alert > i {

    margin-top:
        2px;

    font-size:
        18px;

}


.rb-work-alert strong {

    display:
        block;

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;

}


.rb-work-alert p {

    margin:
        4px
        0
        0;

    color:
        #aaa;

    font-size:
        11px;

    line-height:
        1.5;

}


.rb-work-alert--success {

    border-color:
        rgba(64, 184, 107, .38);

}


.rb-work-alert--success > i {

    color:
        #40b86b;

}


.rb-work-alert--error {

    border-color:
        rgba(215, 25, 32, .48);

}


.rb-work-alert--error > i {

    color:
        var(--rb-red);

}


/* =========================================================
   ERRORES
========================================================= */

.rb-work-field input[aria-invalid="true"],
.rb-work-field textarea[aria-invalid="true"],
.rb-work-file input[aria-invalid="true"] {

    border-color:
        var(--rb-red);

}


.rb-work-error {

    display:
        block;

    margin-top:
        7px;

    color:
        #ff6b70;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.4;

}


.rb-work-inline-error {

    padding:
        12px
        14px;

    color:
        #ffd7d8;

    background:
        rgba(215, 25, 32, .10);

    border:
        1px solid
        rgba(215, 25, 32, .42);

    border-radius:
        10px;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.5;

}


/* =========================================================
   PRIVACIDAD - INFORMACIÓN BÁSICA
========================================================= */

.rb-work-privacy-info {

    margin:
        9px
        0
        0
        28px;

    color:
        #666;

    font-size:
        9px;

    line-height:
        1.5;

}