/* ADMISIONES 2027: diseño específico, sin cargar los estilos de Niveles. */

/* Coordenadas del marco de Admisiones de 1728 × 5745 px. */
.admissions_page {
    background: var(--cream) url('../assets/admissions-vectors.svg?v=20261026-campus-corrected')
        no-repeat 0 0 / 108rem auto;
}
.admissions_page .page_main {
    height: 359.0625rem;
}
.admissions_header {
    position: absolute;
    top: 2.6875rem;
    left: 8.4375rem;
    z-index: 2;
    width: 15.1875rem;
}
.admissions_header img {
    width: 100%;
}
/* 1. Portada: título, año, texto y accesos principales. */
.admissions_title {
    position: absolute;
    left: 8.4375rem;
    top: 20rem;
    font-size: 6.25rem;
}
.admissions_page .admissions_year {
    position: absolute;
    left: 11.75rem;
    top: 28.6875rem;
    color: white;
    font:
        7.1875rem/1 'Fredoka One',
        sans-serif;
}
.admissions_page .hero_description {
    position: absolute;
    left: 8.4375rem;
    top: 39.0625rem;
    width: 39.75rem;
    font:
        300 1.5625rem/1.52 'Poppins',
        sans-serif;
    color: #282828;
}
.hero_actions {
    position: absolute;
    left: 8.4375rem;
    top: 49.625rem;
    display: flex;
    gap: 2.1875rem;
}
.hero_actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    padding: 0.875rem 2rem;
    border-radius: 4rem;
    background: #ffa6b8;
    color: #282828;
    font-size: 1.5rem;
    font-weight: 600;
}
.hero_actions a:last-child {
    border: 0.125rem solid var(--ink);
    background: transparent;
}
.admissions_hero_art,
.admissions_portraits {
    display: none;
}
/* 2. Presentación del proceso y fotografías de los alumnos. */
.admissions_intro {
    position: absolute;
    left: 8.4375rem;
    top: 73rem;
    width: 45.6875rem;
    overflow: visible;
}
.admissions_intro h2 {
    width: 32.25rem;
    font-size: 3.6953rem;
}
.admissions_intro p {
    margin-top: 3.6875rem;
    font:
        300 1.5625rem/1.52 'Poppins',
        sans-serif;
    color: #282828;
}
.admissions_intro p + p {
    margin-top: 1.5rem;
}
/* 3. Cuatro pasos para completar la inscripción. */
.admissions_steps {
    position: absolute;
    left: 10.3125rem;
    top: 115.5rem;
    width: 87.375rem;
    overflow: visible;
}
.admissions_steps h2 {
    width: 79.25rem;
    margin: 0 auto;
    text-align: center;
    color: black;
    font:
        700 4rem/1.29 'Poppins',
        sans-serif;
}
.admissions_steps ol {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.6875rem;
    margin: 5.5rem 0 0;
    padding: 0;
    list-style: none;
}
.step_number {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12.8125rem;
    color: white;
    font:
        700 4rem/1 'Poppins',
        sans-serif;
}
.admissions_steps h3 {
    margin-top: 3.375rem;
    color: black;
    font:
        600 1.5625rem/1.4 'Poppins',
        sans-serif;
}
.admissions_steps p {
    margin-top: 2rem;
    color: black;
    font:
        400 1.07rem/1.5 'Poppins',
        sans-serif;
}
/* 4. Beneficios y enlaces a las páginas del colegio. */
.admissions_benefits {
    position: absolute;
    left: 6.5625rem;
    top: 165.5rem;
    width: 94.8125rem;
    overflow: visible;
}
.admissions_benefits h2 {
    max-width: 60.0625rem;
    margin: 0 auto;
    text-align: center;
    color: black;
    font:
        700 4rem/1.29 'Poppins',
        sans-serif;
}
.benefit_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.09375rem;
    margin-top: 8.875rem;
}
.benefit_grid a {
    position: relative;
    display: block;
    min-height: 22.565rem;
}
.benefit_grid img {
    display: none;
}
.benefit_grid h3 {
    position: absolute;
    left: 2.0625rem;
    top: 16.244rem;
    width: 18rem;
    color: white;
    font:
        400 2rem/1.2 'Fredoka One',
        sans-serif;
}
.benefit_grid a:last-child h3 {
    width: 22rem;
}
/* 5. Formulario de admisión y mensajes de estado. */
.admissions_contact {
    position: absolute;
    left: 11.5rem;
    top: 232.25rem;
    width: 85rem;
    overflow: visible;
    scroll-margin-top: 2rem;
}
.admissions_contact h2 {
    font-size: 5.50375rem;
}
.admissions_contact > p {
    width: 53.125rem;
    margin-top: 4.1rem;
    font:
        300 1.5625rem/1.52 'Poppins',
        sans-serif;
}
.admissions_form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4.3125rem;
    row-gap: 5.9375rem;
    width: 74.6875rem;
    margin: 7.625rem 0 0 4.375rem;
}
.admissions_form .form_field {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    color: black;
    font-size: 1.5rem;
    font-weight: 600;
}
.admissions_form input,
.admissions_form select {
    width: 100%;
    min-width: 0;
    height: 6rem;
    border: 0.125rem solid transparent;
    border-radius: 4.5rem;
    padding: 0 1.75rem;
    background: #c7e0f4;
    color: #282828;
    font:
        300 1.5rem 'Poppins',
        sans-serif;
}
.admissions_form input:focus-visible,
.admissions_form select:focus-visible {
    outline: 0.2rem solid #12477f;
    outline-offset: 0.2rem;
}

.admissions_form input[type='date'] {
    cursor: pointer;
}
.admissions_form .send_button {
    grid-column: 1 / -1;
    justify-self: center;
    width: 20.25rem;
    min-height: 6.0625rem;
    margin-top: 0.5rem;
    border: 0;
    border-radius: 4rem;
    background: #ff5253;
    color: white;
    font-size: 1.875rem;
    font-weight: 700;
}
.admissions_form .send_button:disabled {
    opacity: 0.6;
    cursor: wait;
}
.admissions_form .form_privacy,
.admissions_form .form_status {
    grid-column: 1 / -1;
    max-width: 45rem;
    margin: -4.25rem 0 0;
    font:
        300 1rem/1.5 'Poppins',
        sans-serif;
}
.admissions_form .form_status {
    margin-top: -5rem;
}
.admissions_form .form_status:empty {
    display: none;
}
.admissions_page .page_footer {
    top: 352.125rem;
    left: 6.8375rem;
    right: 8.375rem;
}
.hp_field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

@media (max-width: 40rem) {
    :root {
        font-size: 1rem;
    }
    .admissions_page {
        background: var(--cream);
    }
    .admissions_header {
        position: static;
        width: 10rem;
        margin: 1.5rem;
    }
    .admissions_page .page_main {
        height: auto;
        padding: 1rem 1.5rem 3rem;
    }
    .admissions_title,
    .admissions_year,
    .admissions_page .hero_description,
    .hero_actions,
    .admissions_intro,
    .admissions_steps,
    .admissions_benefits,
    .admissions_contact {
        position: static;
        width: auto;
    }
    .admissions_title {
        font-size: clamp(2.6rem, 10vw, 4rem);
    }
    .admissions_page .admissions_year {
        position: static;
        width: fit-content;
        margin: 0.5rem 0 1.5rem;
        padding: 0.3rem 1rem;
        background: var(--yellow);
        font-size: 3.5rem;
    }
    .admissions_page .hero_description,
    .admissions_intro p {
        font-size: 1rem;
        line-height: 1.7;
    }
    .hero_actions {
        flex-direction: column;
        gap: 0.75rem;
        margin: 1.5rem 0;
    }
    .hero_actions a {
        min-height: 2.75rem;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    .admissions_hero_art {
        display: block;
        width: 85%;
        max-width: 25rem;
        margin: 1rem auto 3rem;
    }
    .admissions_intro h2 {
        width: auto;
        font-size: 2rem;
    }
    .admissions_intro p {
        margin-top: 1.5rem;
    }
    .admissions_portraits {
        display: block;
        width: 100%;
        max-width: 30rem;
        margin: 2rem auto;
    }
    .admissions_steps,
    .admissions_benefits,
    .admissions_contact {
        margin-top: 4rem;
    }
    .admissions_steps h2,
    .admissions_benefits h2 {
        width: auto;
        font-size: 1.7rem;
    }
    .admissions_steps ol {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }
    .step_number {
        width: 5rem;
        height: 5rem;
        margin: 0 auto;
        background: url('../assets/flower-blue.svg?v=20261026-optimized') center / contain no-repeat;
        font-size: 2rem;
    }
    .admissions_steps li:nth-child(2) .step_number {
        background-image: url('../assets/flower-orange.svg?v=20261026-optimized');
    }
    .admissions_steps li:nth-child(3) .step_number {
        background-image: url('../assets/flower-yellow.svg?v=20261026-optimized');
    }
    .admissions_steps li:nth-child(4) .step_number {
        background-image: url('../assets/flower-orange.svg?v=20261026-optimized');
    }
    .admissions_steps h3 {
        margin-top: 1rem;
        text-align: center;
        font-size: 1.1rem;
    }
    .admissions_steps p {
        margin-top: 0.5rem;
        text-align: center;
        font-size: 1rem;
    }
    .benefit_grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2rem;
    }
    .benefit_grid a {
        min-height: 0;
        overflow: hidden;
        border-radius: 1.5rem;
        background: var(--yellow);
    }
    .benefit_grid a:nth-child(2) {
        background: var(--blue);
    }
    .benefit_grid a:nth-child(3) {
        background: var(--red);
    }
    .benefit_grid img {
        display: block;
        width: 100%;
        height: 14rem;
        object-fit: cover;
    }
    .benefit_grid h3 {
        position: static;
        width: auto;
        padding: 1rem;
        font-size: 1.4rem;
    }
    .benefit_grid a:last-child h3 {
        width: auto;
    }
    .admissions_contact h2 {
        font-size: 2.4rem;
    }
    .admissions_contact > p {
        width: auto;
        margin-top: 1rem;
        font-size: 1rem;
    }
    .admissions_form {
        grid-template-columns: 1fr;
        width: auto;
        gap: 1.5rem;
        margin: 2rem 0 0;
    }
    .admissions_form .form_field {
        gap: 0.5rem;
        font-size: 0.9rem;
    }
    .admissions_form input,
    .admissions_form select {
        height: 3.5rem;
        padding: 0 1rem;
        font-size: 1rem;
    }
    .admissions_form .send_button {
        width: 100%;
        min-height: 3.5rem;
        font-size: 1.1rem;
    }
    .admissions_form .form_privacy,
    .admissions_form .form_status {
        margin: 0;
        font-size: 0.8rem;
    }
    .admissions_page .page_footer {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        padding: 2rem 1.5rem 2rem 4rem;
        gap: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .admissions_page .page_footer p {
        font-size: 0.75rem;
    }
    .admissions_page .footer_mascot {
        display: block;
        position: absolute;
        left: -0.7rem;
        bottom: 1.5rem;
        width: 3.5rem;
    }
}