.contacto {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100 * var(--vh-estable, 1vh));
    min-height: calc(100 * var(--svh-estable, 1svh));
    padding-block: clamp(3.25rem, calc(7 * var(--vh-estable, 1vh)), 5.5rem) clamp(1.25rem, calc(4 * var(--vh-estable, 1vh)), 2.5rem);
    overflow: hidden;
    background-color: var(--color-blanco);
}

.contacto__contenedor {
    position: relative;
    z-index: 1;
    --ancho-contenedor: 1720px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: ". formulario";
    align-items: center;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: clamp(2.5rem, calc(6 * var(--vh-estable, 1vh)), 4rem);
}

@media (min-width: 1101px) {
    .contacto__contenedor {
        --margen-contenedor-base: max(calc(var(--margen-lateral) + 4rem), 11rem);
    }

    .contacto .contacto__columna-figura {
        left: var(--reserva-navegacion);
        width: calc(45.6% - var(--reserva-navegacion));
    }
}

@media (min-width: 1101px) and (max-width: 1512px) {
    .contacto__contenedor {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
        column-gap: clamp(2rem, 3vw, 3rem);
    }

    .contacto .contacto__columna-figura {
        width: calc(42% - var(--reserva-navegacion));
    }
}

.contacto__columna-figura {
    --presencia-david: 0.92;

    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 45.6%;
    pointer-events: none;
}

.contacto__figura {
    width: auto;
    max-width: 100%;
    height: 88%;
    object-fit: contain;
    opacity: var(--presencia-david);
    mix-blend-mode: screen;
    filter: saturate(1.5) contrast(1.05);
    -webkit-mask-image:
        radial-gradient(82% 78% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.95) 48%, rgba(0, 0, 0, 0.55) 74%, transparent 100%),
        linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.35) 78%, transparent 96%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(82% 78% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.95) 48%, rgba(0, 0, 0, 0.55) 74%, transparent 100%),
        linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.35) 78%, transparent 96%);
    mask-composite: intersect;
}

.contacto__datos {
    position: absolute;
    left: var(--datos-x, 50%);
    top: var(--datos-y, 50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, calc(2.4 * var(--vh-estable, 1vh)), 1.4rem);
    width: max-content;
    max-width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    translate: 0 -50%;
}

.contacto__dato {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(0.8125rem, 1vw, 1.0625rem);
    line-height: 1.3;
    color: rgba(28, 28, 28, 0.78);
    text-decoration: none;
    transition: color 0.3s var(--curva-suave);
}

.contacto__icono {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--color-naranja);
    transition: color 0.3s var(--curva-suave);
}

a.contacto__dato:hover,
a.contacto__dato:focus-visible {
    color: var(--color-carbon);
}

a.contacto__dato:hover .contacto__icono,
a.contacto__dato:focus-visible .contacto__icono {
    color: var(--color-eucalipto);
}

.contacto__columna-formulario {
    grid-area: formulario;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.1rem, calc(3 * var(--vh-estable, 1vh)), 2rem);
}

.contacto__titulo {
    max-width: 20ch;
    text-align: center;
    font-family: var(--fuente-serif);
    font-size: clamp(1.9rem, 0.9rem + 2.1vw, 3.1rem);
    font-weight: 500;
    line-height: 1.05;
    text-wrap: balance;
    color: var(--color-carbon);
}

.animar .contacto__figura {
    opacity: 0;
    translate: -38% 0;
    transition:
        opacity 0.9s var(--curva-suave),
        translate 1.2s var(--curva-entrada);
}

.animar .contacto.figura-visible .contacto__figura {
    opacity: var(--presencia-david, 0.75);
    translate: 0 0;
}

.animar .contacto__columna-formulario,
.animar .contacto__datos {
    opacity: 0;
    scale: 0.93;
    transition:
        opacity 0.7s var(--curva-suave),
        scale 0.9s var(--curva-resorte);
}

.animar .contacto.formulario-visible .contacto__columna-formulario,
.animar .contacto.formulario-visible .contacto__datos {
    opacity: 1;
    scale: 1;
}

@media (prefers-reduced-motion: reduce) {
    .animar .contacto__figura {
        translate: 0 0;
    }

    .animar .contacto__columna-formulario,
    .animar .contacto__datos {
        scale: 1;
    }
}

@media (max-width: 1100px) {
    /* Visible desde el primer pintado, incluso antes de ejecutar JavaScript. */
    .animar .contacto .contacto__figura {
        opacity: var(--presencia-david);
        translate: none;
        transition: none;
    }

    .animar .contacto .contacto__columna-formulario,
    .animar .contacto .contacto__datos {
        opacity: 1;
        scale: none;
        transition: none;
    }

    .contacto {
        padding-top: calc(76px + clamp(2rem, calc(5 * var(--vh-estable, 1vh)), 3.5rem));
    }

    .contacto__contenedor {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "formulario";
        justify-items: center;
    }

    .contacto__datos {
        display: none;
    }

    .contacto__columna-figura {
        --presencia-david: 0.28;

        inset: 0;
        width: 100%;
        justify-content: center;
    }

    .contacto__figura {
        object-position: center;
    }

    .formulario {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .formulario__opciones {
        grid-template-columns: minmax(0, 1fr);
    }

    .formulario__campo--servicios .formulario__opcion:last-child:nth-child(odd) {
        width: 100%;
    }
}

/* Los rótulos acompañan al campo: arrancan donde arranca lo que se escribe */
.contacto .formulario__etiqueta {
    text-align: left;
}