/* PÁGINA ABOUT: diseño propio; la base está en common.css. */
body {
    background-image: url('../assets/about-vectors.svg?v=20261026-alignment');
}

/* Coordenadas proporcionales del apartado Nosotros. */
.page_main {
    height: 209.25rem;
}

.page_heading {
    position: absolute;
    left: 7.1875rem;
    top: 16.3125rem;
    width: 68.75rem;
    font-size: 4.375rem;
}

.page_heading span:nth-child(2) {
    color: white;
    padding-left: 1.25rem;
}

.page_heading span:nth-child(3) {
    margin-top: -0.25rem;
}

.future_heading {
    position: absolute;
    left: 11.14375rem;
    top: 73.94375rem;
    width: 40.625rem;
    font-size: 3.125rem;
}

.story {
    position: absolute;
    left: 7.1625rem;
    top: 82.63125rem;
    width: 49.6875rem;
}

.story p {
    margin-bottom: 2.38125rem;
}

.learning_words {
    position: absolute;
    left: 79.75rem;
    top: 76rem;
    width: 20.625rem;
    font-size: 2.8125rem;
}

.learning_words span {
    position: absolute;
    color: white;
    font-family: 'Fredoka One', sans-serif;
    transform: rotate(-4.18deg);
    transform-origin: left top;
    line-height: 1.21;
    white-space: nowrap;
}

.learning_words span:nth-child(1) {
    left: 2.3rem;
    top: 0.9rem;
}

.learning_words span:nth-child(2) {
    left: 4.4rem;
    top: 11.1rem;
    transform: rotate(2.93deg);
}

.learning_words span:nth-child(3) {
    transform: rotate(-10deg);
    top: 24.35rem;
}

.enrollment_link {
    position: absolute;
    left: 29.485001rem;
    top: 128.636871rem;
    width: 48.858749rem;
    font-size: 3.51313rem;
}

.school_year {
    position: absolute;
    left: 64.757996rem;
    top: 136.23103rem;
    width: 19.70813rem;
    font-size: 2.8125rem;
    --year-angle: -7.35deg;
}

.contact_section {
    /* Permite mostrar completos el contorno de foco y los bordes del formulario. */
    overflow: visible;
    position: absolute;
    left: 7.09375rem;
    top: 149.625rem;
    width: 41.985rem;
}

.contact_section h2 {
    font-size: 2.8125rem;
    margin-bottom: 0.9rem;
}

.contact_section > p {
    margin-bottom: 2.229rem;
}

.contact_form {
    display: grid;
    gap: 1.1rem;
}

.contact_form input {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 4rem;
    height: 4.25rem;
    padding: 0 2rem;
    background: #54b2ff42;
    color: var(--ink);
    font-size: 1.4075rem;
}

.phone_fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
}

.send_button {
    justify-self: center;
    border: 0;
    border-radius: 1.5rem;
    background: #fd990242;
    width: 16.275rem;
    height: 5.1rem;
    color: var(--ink);
}

.form_status {
    font-size: 1rem;
}

.page_footer {
    top: 210.81195rem;
}

/* Reorganiza los textos y las ilustraciones sin desbordamientos en teléfonos. */
@media (max-width: 40rem) {
    :root {
        font-size: 1rem;
    }

    body {
        background: var(--cream);
    }

    .site_header {
        height: 5.5rem;
        padding: 0.6rem 1.5rem;
        justify-content: space-between;
    }

    .brand {
        position: static;
        width: 4rem;
        height: auto;
    }

    .menu_toggle {
        display: block;
        border: 0;
        border-radius: 2rem;
        padding: 0.6rem 1rem;
        background: var(--yellow);
    }

    .main_navigation {
        display: none;
        left: 1rem;
        right: 1rem;
        top: 5rem;
        padding: 1rem;
        background: var(--cream);
        border-radius: 1rem;
        flex-wrap: wrap;
        gap: 0.7rem;
        box-shadow: 0 0.5rem 1.5rem #0002;
    }

    .main_navigation.is_open {
        display: flex;
    }

    .nav_link {
        font-size: 0.85rem;
    }

    .page_main {
        height: auto;
        padding: 2rem 1.5rem;
    }

    .page_main .page_heading,
    .page_main .page_subtitle,
    .page_main .future_heading,
    .page_main .story,
    .page_main .learning_words,
    .page_main .enrollment_link,
    .page_main .school_year,
    .page_main .contact_section,
    .page_main .level_grid,
    .page_main .video_frame {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 0 1.5rem;
    }

    .page_main .page_heading {
        font-size: clamp(2rem, 7vw, 3rem);
    }

    .page_main .page_heading span {
        padding: 0.2rem 0;
        overflow-wrap: anywhere;
    }

    .page_main .page_subtitle {
        font-size: 1.1rem;
    }

    .page_main .future_heading {
        font-size: 1.5rem;
    }

    .page_main p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .mobile_art,
    .mobile_logo {
        display: block;
        width: 100%;
        margin: 1.5rem 0;
    }

    .mobile_logo {
        width: 13rem;
        margin: 0 auto 2rem;
    }

    .page_main .enrollment_link {
        padding: 0.6rem 1rem;
        border-radius: 3rem;
        background: var(--pink);
        font-size: 1.15rem;
    }

    .page_main .school_year {
        width: max-content;
        max-width: 100%;
        margin: 0 auto 3rem;
        padding: 0.3rem 1rem;
        border-radius: 3rem;
        background: var(--red);
        font-size: 1.1rem;
    }

    .page_footer {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        padding: 2rem 1.5rem;
        gap: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .page_footer p {
        font-size: 0.75rem;
    }
}

/* Respeta la preferencia de reducir el movimiento. */

/* Ajusta el relato y el formulario de Nosotros en pantallas pequeñas. */
@media (max-width: 40rem) {
    .page_heading span:nth-child(2) {
        padding: 0.35rem;
        background: var(--red);
        color: white;
        border-radius: 1rem;
    }

    .story p {
        margin-bottom: 1.5rem;
    }

    .learning_words {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .learning_words span,
    .learning_words span:nth-child(1),
    .learning_words span:nth-child(2),
    .learning_words span:nth-child(3) {
        position: static;
        padding: 0.3rem 0.8rem;
        border-radius: 2rem;
        background: var(--blue);
        font-size: 1rem;
        transform: none;
    }

    .learning_words span:nth-child(2) {
        background: var(--yellow);
    }

    .learning_words span:nth-child(3) {
        background: var(--red);
    }

    .contact_section h2 {
        font-size: 1.75rem;
    }

    .contact_form input {
        height: 3rem;
        padding: 0 1rem;
        font-size: 1rem;
    }

    .send_button {
        width: 10rem;
        height: 3rem;
    }
}

/* Campos y botón con las dimensiones originales del formulario. */
.contact_form {
    gap: 1.63rem;
}

.contact_form input {
    height: 3.72875rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.phone_fields {
    margin-top: -0.646rem;
}

.send_button {
    height: 4.7244rem;
    margin-top: -0.075rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 1.4075rem;
}

/* Mantiene campos y separación cómodos en el teléfono. */
@media (max-width: 40rem) {
    .contact_form {
        gap: 1rem;
    }

    .contact_form input {
        height: 3rem;
    }

    .phone_fields,
    .send_button {
        margin-top: 0;
    }

    .send_button {
        height: 3rem;
        font-size: 1rem;
    }
}

/* Tamaño de los iconos oficiales del pie de página. */

/* Conserva la mascota asomada junto al pie en teléfonos. */
@media (max-width: 40rem) {
    .footer_mascot {
        display: block;
        position: absolute;
        left: -0.7rem;
        bottom: 1.5rem;
        width: 3.5rem;
    }

    .page_footer {
        padding-left: 4rem;
    }
}

/* Amplía la ilustración central y oculta sus extremos en teléfonos. */
@media (max-width: 40rem) {
    .page_main > .mobile_art {
        width: calc(120% + 3.6rem);
        max-width: none;
        margin-left: calc(-10% - 1.8rem);
        margin-right: calc(-10% - 1.8rem);
    }
}

.hp_field {
    position: absolute;
    left: -10000px;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
}

.updated_contact_form .form_privacy {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #4a5a61;
    text-align: left;
}

.text_link {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.text_link:hover {
    color: var(--red);
}

.admissions_link {
    background: var(--yellow);
    border-color: var(--yellow);
}
.admissions_link:hover,
.admissions_link:focus-visible {
    background: var(--orange);
    border-color: var(--orange);
}

@media (min-width: 40.001rem) {
    .main_navigation {
        gap: 0.7rem;
    }
    .nav_link {
        padding: 0.2rem 0.6rem;
        font-size: 1.05rem;
    }
}

/* Formulario de admisión actualizado según Figma. */
.contact_form.updated_contact_form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
.updated_contact_form .form_field { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.updated_contact_form .form_field label { font: 600 1rem/1.5 'Poppins', sans-serif; color: #282828; }
.updated_contact_form .form_field input, .updated_contact_form .form_field select { width: 100%; min-width: 0; height: 3.75rem; border: 2px solid transparent; border-radius: 3rem; padding: 0 1.1rem; background: #c7e0f4; color: #282828; font: 400 1rem 'Poppins', sans-serif; }
.updated_contact_form input:focus-visible, .updated_contact_form select:focus-visible { outline: 3px solid #12477f; outline-offset: 3px; }
.updated_contact_form .send_button { justify-self: end; margin-top: 0; }
.updated_contact_form .form_status { grid-column: 1 / -1; }
@media (width > 40rem) {
    .updated_contact_form .form_privacy {
        align-self: start;
        margin: -1rem -4rem 0 0;
    }
}
@media (max-width: 40rem) { .contact_form.updated_contact_form { grid-template-columns: 1fr; gap: 1rem; } }