/* F02.2-R9 — compact public contact page. */
body.ts-r9-contact-page {
    color: var(--ts-brand-ink, #172018);
    background: #fff;
}

body.ts-r9-contact-page .ts-public-shell,
body.ts-r9-contact-page main#public-main {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

body.ts-r9-contact-page .ts-contact-page__main {
    border: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.36), rgba(239, 249, 242, 0.62)),
        url('/ts-recursos-graficos/Technological%20Seed/colorful_vector_fluid_design_background_1.jpg') center / cover no-repeat;
}
body.ts-r9-contact-page .ts-public-page-hero {
    border: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.74), rgba(239, 249, 242, 0.67)),
        url('/ts-recursos-graficos/Technological%20Seed/educacion-estilos-de-vida-relajacion-madera-teclado-del-ordenador.jpg') center / cover no-repeat;
}
body.ts-r9-contact-page .ts-public-page-hero__inner,
body.ts-r9-contact-page .ts-contact-page__content {
    width: min(1140px, calc(100% - 64px));
    margin-right: auto;
    margin-left: auto;
}
body.ts-r9-contact-page .ts-public-page-hero__inner {
    min-height: 10rem;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}
body.ts-r9-contact-page .ts-public-page-hero h1 {
    color: var(--ts-brand-deep, #36594f);
    font-family: TSOutfit, sans-serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    letter-spacing: -.035em;
}
body.ts-r9-contact-page .ts-public-page-hero p:last-child {
    max-width: 42rem;
    margin-top: .65rem;
    color: var(--ts-public-muted);
    font-size: 1rem;
}

body.ts-r9-contact-page .ts-contact-page__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 2rem;
    padding-top: 2.25rem;
    padding-bottom: 3rem;
}
body.ts-r9-contact-page .ts-contact-page__form,
body.ts-r9-contact-page .ts-contact-page__illustration {
    min-width: 0;
    box-shadow: 0 .45rem 1.1rem rgba(54, 89, 79, .055);
}
body.ts-r9-contact-page .ts-contact-page__form {
    border: 1px solid var(--ts-public-theme-page-line, var(--ts-public-line));
    border-radius: 1.2rem;
    background: #fff;
}
body.ts-r9-contact-page .ts-contact-page__form {
    grid-column: 2;
    grid-row: 1;
    padding: 1.5rem;
}
body.ts-r9-contact-page .ts-contact-page__fields { gap: .85rem; }
body.ts-r9-contact-page .ts-contact-page__field label { color: var(--ts-brand-deep, #36594f); }
body.ts-r9-contact-page .ts-contact-page__field input,
body.ts-r9-contact-page .ts-contact-page__field select,
body.ts-r9-contact-page .ts-contact-page__field textarea {
    border-color: var(--ts-public-theme-page-line, var(--ts-public-line));
    border-radius: .65rem;
    background: #fcfefd;
}
body.ts-r9-contact-page .ts-contact-page__field textarea { min-height: 8rem; }
body.ts-r9-contact-page .ts-contact-page__form > .ts-public-button {
    min-height: 2.8rem;
    background: var(--ts-public-theme-accent-strong, #58a673);
    color: #fff;
}
body.ts-r9-contact-page .ts-contact-page__form > .ts-public-button:hover,
body.ts-r9-contact-page .ts-contact-page__form > .ts-public-button:focus-visible {
    background: var(--ts-public-green-800, #34794c);
}
body.ts-r9-contact-page .ts-contact-page__side {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
body.ts-r9-contact-page .ts-contact-page__illustration {
    display: grid;
    margin: 0;
    overflow: hidden;
    border: 0;
    background: none;
    box-shadow: none;
}
body.ts-r9-contact-page .ts-contact-page__illustration img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
body.ts-r9-contact-page .ts-contact-page__illustration figcaption {
    padding: .85rem 1rem 1rem;
    color: var(--ts-brand-deep, #36594f);
    font-size: .9rem;
    font-weight: 800;
    text-align: center;
}
body.ts-r9-contact-page .ts-contact-page__feedback { margin-top: 1rem; }
body.ts-r9-contact-page .ts-contact-page__honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
body.ts-r9-contact-page .ts-contact-page__field input:focus,
body.ts-r9-contact-page .ts-contact-page__field select:focus,
body.ts-r9-contact-page .ts-contact-page__field textarea:focus,
body.ts-r9-contact-page a:focus-visible,
body.ts-r9-contact-page button:focus-visible { outline: 3px solid rgba(88, 166, 115, .3); outline-offset: 2px; }

@media (max-width: 760px) {
    body.ts-r9-contact-page .ts-public-page-hero__inner,
    body.ts-r9-contact-page .ts-contact-page__content { width: calc(100% - 40px); }
    body.ts-r9-contact-page .ts-contact-page__content { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.5rem; padding-bottom: 2.5rem; }
    body.ts-r9-contact-page .ts-contact-page__side { grid-column: 1; grid-row: 1; }
    body.ts-r9-contact-page .ts-contact-page__form { grid-column: 1; grid-row: 2; padding: 1.15rem; }
    body.ts-r9-contact-page .ts-contact-page__fields { grid-template-columns: 1fr; }
    body.ts-r9-contact-page .ts-contact-page__field--wide { grid-column: auto; }
    body.ts-r9-contact-page .ts-contact-page__field textarea { min-height: 7rem; }
    body.ts-r9-contact-page .ts-public-page-hero__inner { min-height: 9rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
}

@media (max-width: 420px) {
    body.ts-r9-contact-page .ts-public-page-hero__inner,
    body.ts-r9-contact-page .ts-contact-page__content { width: calc(100% - 24px); }
    body.ts-r9-contact-page .ts-public-page-hero h1 { font-size: 2rem; }
    body.ts-r9-contact-page .ts-public-page-hero p:last-child { font-size: .92rem; }
}