.cto__campo input,
.cto__campo textarea {
    display: block;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    background: #fff;
    border: 0;
    border-radius: 0;
    padding: 0 calc(14 * var(--u));
    font-family: 'TT Hoves', sans-serif;
    font-size: clamp(13px, calc(17 * var(--u)), 17px);
    color: #101821;
}

.cto__campo input { height: calc(40 * var(--u)); }
.cto__campo textarea { height: calc(150 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); resize: vertical; }

.cto__consentimiento {
    margin: calc(18 * var(--u)) 0 0;
    font-size: clamp(12px, calc(14 * var(--u)), 14px);
    line-height: 1.5;
}

.cto__consentimiento label {
    display: flex;
    gap: max(10px, calc(12 * var(--u)));
    align-items: flex-start;
    cursor: pointer;
}

/* Salient fuerza color negro en los <label> y su azul en los enlaces; sobre el
   fondo azul oscuro quedaban ilegibles. Se marca la cadena completa que arma
   Contact Form 7. */
html body .cto__consentimiento,
html body .cto__consentimiento label,
html body .cto__consentimiento span,
html body .cto__consentimiento .wpcf7-list-item-label {
    color: rgba(255, 255, 255, 0.78);
}

html body .cto__consentimiento a {
    color: #BDAD9A;
    text-decoration: underline;
    text-underline-offset: 2px;
    border: 0;
}

html body .cto__consentimiento a:hover { color: #fff; }

.cto__consentimiento input {
    flex: 0 0 auto;
    /* nunca por debajo de 16px: es la casilla de consentimiento que exige la
       ley 21.719, tiene que verse y poder tocarse en un teléfono */
    width: max(16px, calc(16 * var(--u)));
    height: max(16px, calc(16 * var(--u)));
    margin-top: 3px;
    accent-color: #967E58;
}

.cto__enviar { text-align: right; margin-top: calc(22 * var(--u)); }

html body .cto .cto__enviar button {
    min-width: calc(143 * var(--u));
    height: calc(36 * var(--u));
    background: #967E58 !important;
    border: 0 !important;
    border-radius: calc(20 * var(--u)) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: 'TT Hoves', sans-serif;
    font-size: clamp(11px, calc(16 * var(--u)), 16px);
    letter-spacing: clamp(0.8px, calc(1.6 * var(--u)), 1.6px);
    cursor: pointer;
    transition: background .25s ease;
}

html body .cto .cto__enviar button:hover { background: #7d6845 !important; }

/* fila de menú al pie del bloque de contacto */
/* Franja final: a la izquierda el menú con los separadores del diseño
   (x = 513 · 733 · 954) y a la derecha el botón, centrado en vertical. */
.cto__pie {
    position: relative;   /* el botón Enviar se ancla aquí, no a la sección */
    display: flex;
    align-items: stretch;
    height: calc(163 * var(--u));
    margin-top: calc(42 * var(--u));
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.cto__pie-menu {
    display: flex;
    align-items: center;
    width: calc(954 * var(--u));
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.cto__pie a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 calc(34 * var(--u));
    font-size: clamp(10px, calc(15 * var(--u)), 15px);
    letter-spacing: clamp(0.8px, calc(1.7 * var(--u)), 1.7px);
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.cto__pie a:first-child { border-left: 0; }
.cto__pie a:last-child { border-right: 0; }
.cto__pie a:hover { color: #BDAD9A; }

.cto__pie .cto__enviar {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: calc(116 * var(--u));
    margin: 0;
    text-align: right;
}

@media (max-width: 900px) {
    .cto__pie { flex-wrap: wrap; }
    .cto__pie a { padding: 14px 18px; border: 0; }
    .cto__pie a:first-child { border-left: 0; }
}


/* ---- formulario de Contact Form 7 dentro del bloque de contacto ---- */
.cto { position: relative; }

.cto__form .wpcf7-form p { margin: 0; }

.cto .cto__enviar {
    position: absolute;
    right: calc(116 * var(--u));
    bottom: calc(63 * var(--u));
    margin: 0;
    padding: 0;
    z-index: 3;
}

html body .cto .cto__enviar input[type="submit"] {
    min-width: calc(143 * var(--u));
    height: calc(36 * var(--u));
    background: #967E58 !important;
    border: 0 !important;
    border-radius: calc(18 * var(--u)) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: 'TT Hoves', sans-serif;
    font-size: clamp(11px, calc(16 * var(--u)), 16px);
    letter-spacing: clamp(0.8px, calc(1.6 * var(--u)), 1.6px);
    cursor: pointer;
    transition: background .25s ease;
}

html body .cto .cto__enviar input[type="submit"]:hover { background: #7d6845 !important; }

.cto .wpcf7-spinner { display: none; }

.cto .wpcf7-not-valid-tip {
    font-family: 'TT Norms', sans-serif;
    font-size: clamp(12px, calc(14 * var(--u)), 14px);
    color: #E7B7B7;
    margin-top: calc(5 * var(--u));
}

.cto .wpcf7-response-output {
    margin: calc(18 * var(--u)) 0 0 !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    border-radius: 4px;
    font-family: 'TT Norms', sans-serif;
    font-size: clamp(11px, calc(15 * var(--u)), 15px);
    color: #fff;
    padding: calc(12 * var(--u)) calc(16 * var(--u)) !important;
}

@media (max-width: 900px) {
    .cto .cto__enviar { position: static; margin-top: 22px; text-align: center; }
    html body .cto .cto__enviar input[type="submit"] { width: 100%; height: 46px; border-radius: 23px !important; }
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 900px) {
    .hdr {
        height: 74px;
        padding-right: 16px;
    }
    .hdr__logo {
        width: auto;
        flex: 1 1 auto;
    }
    .hdr__nav {
        display: none;   /* el menú móvil se resuelve en WordPress con el del theme */
    }
    .hero__texto {
        padding-top: 140px;
        padding-right: 24px;
    }
    .hero__deco {
        display: none;
    }
    .qs {
        padding: 40px 22px 44px;
    }
    .qs__texto br { display: none; }
    .qs__texto {
        font-size: 15px;
        line-height: 26px;
        margin-top: 24px;
    }
    .areas__banda {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 0 30px;
    }
    .areas__item,
    .areas__item:nth-child(1),
    .areas__item:nth-child(2),
    .areas__item:nth-child(3),
    .areas__item:nth-child(4),
    .areas__item:nth-child(5) {
        width: 50%;
        border-left: 0;
        padding: 30px 10px 0;
    }
    .areas__icono,
    .areas__item--ancho .areas__icono { width: 90px; height: 90px; }
    .areas__item p { margin-top: 18px; font-size: 13px; line-height: 18px; }
    .amp {
        display: block;
        padding: 26px 22px;
    }
    .amp__card {
        height: auto;
        padding: 34px 26px 36px;
    }
    .amp__texto {
        font-size: 11px;
        line-height: 26px;
        margin-top: 22px;
        /* justificado en 300px de ancho y en mayúsculas: quedaban tres o cuatro
           espacios entre palabra y palabra */
        text-align: left;
    }
    .amp__foto {
        height: 220px;
        margin-top: 16px;
    }
    .plomo { height: 300px; }
    .plomo__logo { margin-top: 40px; }
    .plomo__logo img { width: 210px !important; }
    /* Equipo. En el diseño de computador las tres fotos van en una fila y los
       tres nombres en una barra debajo. En un teléfono eso deja el nombre a
       DOS PANTALLAS de su foto: no hay forma de saber quién es quién —lo que
       vio el estudio el 31-ago-2026—, y la tercera persona quedaba con su
       nombre en un bloque aparte.

       Aquí cada nombre va PEGADO a su foto. No hace falta tocar el HTML ni el
       computador: los dos contenedores se disuelven con `display: contents` y
       sus hijos entran en la misma grilla de dos columnas, donde a cada uno se
       le dice en qué fila y columna va. La foto 1 arriba a la izquierda, su
       nombre justo debajo, y así. */
    .eq { padding: 40px 16px 44px; }
    .eq__fila {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        text-align: left;
    }
    .eq__fotos,
    .eq__barra { display: contents; }

    .eq__foto:nth-child(1)  { grid-column: 1; grid-row: 1; }
    .eq__celda:nth-child(1) { grid-column: 1; grid-row: 2; }
    .eq__foto:nth-child(2)  { grid-column: 2; grid-row: 1; }
    .eq__celda:nth-child(2) { grid-column: 2; grid-row: 2; }
    .eq__foto:nth-child(3)  { grid-column: 1; grid-row: 3; }
    .eq__celda:nth-child(3) { grid-column: 1; grid-row: 4; }

    .eq__foto { width: auto; height: auto; aspect-ratio: 334 / 460; }

    /* la nota no es un retrato: cierra la última fila a lo ancho */
    .eq__nota {
        grid-column: 1 / -1;
        grid-row: 5;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        padding: 20px 18px;
        margin-top: 14px;
    }
    .eq__nota p { font-size: 13px; line-height: 21px; }

    /* la barra oscura ya no existe como bloque: el fondo lo lleva cada nombre */
    .eq__celda {
        background: #151F2B;
        padding: 12px 14px 16px;
        border-left: 0;
        text-align: left;
        margin-bottom: 14px;
    }
    /* el nombre iba a la izquierda y el cargo salía centrado: el bloque hereda
       el centrado de la sección y cada uno lo resolvía distinto */
    .eq__celda .eq__vinculo,
    .eq__celda a { align-items: flex-start; }
    .eq__nombre, .eq__cargo { display: block; text-align: left; width: 100%; }

    /* Franja de oficina. Llevaba los tres anchos del diseño (731 · 837 · 343) y
       en un teléfono quedaban tres fotos de tamaños distintos, la tercera sola
       abajo y medio ancho de página en blanco. Van apiladas, a lo ancho. */
    .oficina {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        padding-top: 24px;
    }
    .oficina img,
    .oficina img:nth-child(1),
    .oficina img:nth-child(2),
    .oficina img:nth-child(3) {
        width: 100% !important;
        height: 190px !important;
    }
    .cto__cuerpo { display: block; }
    .cto__datos { padding: 30px 22px 0; border-right: 0; min-height: 0; }
    .cto__form { padding: 30px 22px 0; }
    .cto__lista li { font-size: 14px; gap: 14px; margin-bottom: 20px; }
    /* los iconos se miden en unidades del lienzo de 1920: en un móvil quedan
       de menos de un píxel, así que acá van en px fijos */
    .cto__ico { flex: 0 0 20px; width: 20px; height: 20px; }
    /* el pie se apila: en una columna el menú y el botón no caben lado a lado */
    .cto__pie {
        display: block;
        height: auto;
        margin-top: 26px;
        padding-bottom: 26px;
    }
    .cto__pie-menu {
        width: 100%;
        border-right: 0;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cto__pie a { height: 40px; padding: 0 14px; font-size: 12px; }
    .cto__campo input { height: 42px; }
    .cto__campo textarea { height: 130px; }
    .cto__consentimiento { font-size: 12px; margin-top: 16px; }
    .cto__enviar { text-align: center; }
    html body .cto .cto__enviar button { width: 100%; height: 46px; border-radius: 23px; }
}

/* Los iconos de áreas llevan a su página. Al pasar el cursor el dibujo sube un
   poco y se abre, y la línea pasa de dorado a blanco: el mismo gesto que hacen
   los rectángulos del fondo, sin sacar al icono de su celda.
   La transición va sobre el <a> y no sobre :hover, para que la vuelta sea tan
   suave como la ida. */
a.areas__item { text-decoration: none; color: inherit; }

a.areas__item .areas__icono {
    transition: stroke .3s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
    transform-origin: center;
}