:root {
    --bg: #f4f1ec;
    --card: #ffffff;
    --accent: #2d5a4a;
    --accent-light: #3d7a62;
    --text: #1a1a1a;
    --muted: #5c5c5c;
    --border: #d8d4cd;
    --error: #b42318;
    --radius: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
}

/* Fondo en index.php y detalles.php: imagen a tamaño cover en todo el documento */
body.formulario-audicion-fondo {
    min-height: 100vh;
    background-color: var(--bg);
    background-image: url(../img/fondo.jpg);
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.fondo-landing {
    background-color: var(--bg);
    background-image: url(../img/fondolanding.jpg);
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.floatbar {
    float: left;
    position: absolute;
    bottom: 0;
    width: 10vw;
    display: inline-flex;
    margin-left: 6vw;
    margin-bottom: 20px;
}

.botonpostular {
    float: left;
    position: absolute;
    /* width: 100%; */
    /* height: 65px; */
    /* display: inline-flex; */
    margin-left: 68vw;
    margin-top: 87vh;
}

.icono {
    width: 40px;
    height: 40px;
    margin: 0.5rem;
}

.page-size {
    width: 100vw;
    height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
}

.site-brand-bar {
    width: 100%;
    text-align: left;
    margin: 0 0 0.35rem;
    padding: 0;
}

.site-brand-logo {
    display: block;
    max-height: 56px;
    width: auto;
    height: auto;
}

.page-wrap {
    width: 56vw;
    padding: 1.25rem max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    min-width: 0;
    float: left;
    margin-top: 28vh;
    margin-left: 55px;
}

h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 0.35rem;
}

.subtitle {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 1rem;
}

.intro-formulario-audicion {
    background: var(--card, #fff);
    border: 1px solid var(--border, #d8d4cd);
    border-radius: var(--radius, 10px);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.intro-formulario-audicion h1 {
    margin: 0 0 0.35rem;
}

.intro-formulario-audicion .subtitle {
    margin: 0;
}

.form-scroll {
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    padding-right: 0.35rem;
    margin-bottom: 1rem;
    min-height: 0;
    height: 48vh;
}

.form-scroll::-webkit-scrollbar {
    width: 8px;
}

.form-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

fieldset {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    /* Espacio superior para que el título (legend) quede dentro del recuadro blanco */
    padding: 2.5rem 1.1rem 1rem 1.1rem;
    margin: 0 0 1rem;
}

legend {
    position: absolute;
    top: 0.9rem;
    left: 1.1rem;
    right: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    padding: 0;
    margin: 0;
    line-height: 1.35;
}

label {
    display: block;
    font-size: 0.9rem;
    margin: 0.65rem 0 0.25rem;
}

label.inline,
.checkbox-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.4rem 1rem 0.4rem 0;
    font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
}

textarea {
    min-height: 88px;
    resize: vertical;
}

.checkbox-group {
    margin-top: 0.35rem;
}

.field-error {
    color: var(--error);
    font-size: 0.8rem;
    margin-top: 0.2rem;
    display: none;
}

.field-error.visible {
    display: block;
}

input.invalid,
select.invalid,
textarea.invalid {
    border-color: var(--error);
}

.actions {
    display: block;
    /*   flex-wrap: wrap;*/
    gap: 0.75rem;
    align-items: center;
    position: sticky;
    bottom: 0;
    background: linear-gradient(transparent, var(--bg) 12%);
    padding-top: 0.5rem;
    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
    border-radius: 0.5em;
    padding-left: 2%;
}

.btn {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-light);
}

.btn-secondary {
    background: var(--border);
    color: var(--text);
}

.btn-secondary:hover {
    filter: brightness(0.95);
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.alert-success {
    background: #d1fae0;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.alert-error {
    background: #fee4e2;
    color: var(--error);
    border: 1px solid #fecdca;
}

.cat-block {
    display: none;
}

.cat-block.active {
    display: block;
}

.hint {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.15rem 0 0;
}

/* Párrafo largo (certificación legal): justificado con última línea natural */
.hint--justificado {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-character: '-';
    line-height: 1.55;
    margin-top: 0.75rem;
    overflow-wrap: break-word;
}

.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 520px) {
    .row-2 {
        grid-template-columns: 1fr;
    }

    .form-scroll {
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px);
    }

    h1 {
        font-size: 1.15rem;
    }

    .subtitle {
        font-size: 0.88rem;
    }

    fieldset {
        padding: 2.65rem 0.75rem 0.85rem 0.75rem;
    }

    legend {
        left: 0.75rem;
        right: 0.75rem;
        top: 0.75rem;
    }

    .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions .btn {
        width: 100%;
        text-align: center;
    }

    .hint--justificado {
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
    }
}

@media (max-width: 380px) {
    .site-brand-logo {
        max-height: 48px;
    }

    h1 {
        font-size: 1.05rem;
    }
}

@media (max-width: 767px) {
    .page-wrap{
        margin-top: 3vh;
        margin-left: 7px;
        width: 96vw;
    }
    .actions{
        height: 153px;
        padding: 24px
    }
    .actions .btn {
        float: left;
        margin-top: 12px;
    }
    .botonpostular{
        margin-left: 45vw;
    }
    .floatbar{
        width: 80vw;
    }
}
.desktopcontent{
    display: block;
}
.mobilecontent{
    display: none;
}
@media (max-width: 767px) {
    .desktopcontent{
        display: none;
    }
    .mobilecontent{
        display: block;
    }    
    body {
        background-color: var(--bg);
        background-image: url(../img/fondolandingmobile.jpg) !important;
        background-size: cover;
        background-position: left top;
        background-repeat: repeat-y;
        background-attachment: scroll;
    }
    .fondo-landing {
        background-color: transparent !important;
        background-image: none !important;
    }    
    .cuadro{
        text-align: center;
        width: 100%;
        padding-left:1%;
    }
    .iconomobile{
        display: inline-flex;
        width: auto;
        text-align: center;
        margin: 10px;
    }
    .socialbar{
        width: 100%;
        text-align: center;
    }
    .botonpostularmobile{
        width: 100%;
        padding: 10%
    }
    .logomobile{
        margin-top:3%;
        padding-left: 5%;
        padding-right: 5%;
    }
    .logomobilemiddle{
        margin-top:3%;
        padding-left: 5%;
        display: inline-flex;
        width: 45vw;
    }   
}