a.areas__item p {
    transition: color .3s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}

a.areas__item:hover .areas__icono,
a.areas__item:focus-visible .areas__icono {
    stroke: #fff;
    transform: translateY(calc(-10 * var(--u))) scale(1.06);
}

a.areas__item:hover p,
a.areas__item:focus-visible p {
    color: var(--dorado-claro);
    transform: translateY(calc(-4 * var(--u)));
}

/* quien pida menos movimiento solo ve el cambio de color */
@media (prefers-reduced-motion: reduce) {
    a.areas__item:hover .areas__icono,
    a.areas__item:hover p { transform: none; }
}

/* Línea legal bajo el pie. No viene del .ai: la política de privacidad tiene
   que estar a un clic desde cualquier página y el pie del diseño son cuatro
   celdas con medidas exactas, donde no cabe una quinta. */
.legal {
    background: #29384B;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, calc(28 * var(--u)), 28px);
    flex-wrap: wrap;
    padding: clamp(14px, calc(20 * var(--u)), 20px) 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: clamp(12px, calc(13 * var(--u)), 13px);
    letter-spacing: clamp(0.4px, calc(0.8 * var(--u)), 0.8px);
    color: rgba(255, 255, 255, 0.45);
}

.legal a { color: rgba(255, 255, 255, 0.62); text-decoration: none; border: 0; }
.legal a:hover { color: #BDAD9A; }

/* ------------------------------------------------------------------ pie ----
   Las mesas interiores del .ai terminan sin pie y en pantalla la página
   quedaba cortada de golpe. Se repiten las mismas celdas del pie de la portada,
   sin el formulario. */
.pie {
    display: flex;
    align-items: stretch;
    background: #29384B;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.pie a {
    display: flex;
    align-items: center;
    height: clamp(60px, calc(163 * var(--u)), 163px);
    padding: 0 clamp(16px, calc(34 * var(--u)), 34px);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
    font-family: 'TT Hoves', sans-serif;
    font-weight: 300;
    font-size: clamp(12px, calc(15.5 * var(--u)), 15.5px);
    letter-spacing: clamp(0.8px, calc(1.7 * var(--u)), 1.7px);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .25s ease;
}

.pie__menu { display: flex; align-items: stretch; }
.pie a:hover { color: var(--dorado-claro); }

@media (max-width: 900px) {
    .pie__menu { flex-wrap: wrap; justify-content: center; width: 100%; }
    .pie a {
        height: 44px;
        padding: 0 14px;
        border-right: 0;
        font-size: 12px;
    }
}

/* El logo del tema queda en opacity 0 (viene así desde la configuración de
   Salient Redux). En escritorio no se notaba porque manda la cabecera del
   diseño, pero en móvil la del tema es la que se ve —trae el menú
   desplegable— y ahí quedaba solo la hamburguesa, sin marca. */
/* La causa: la imagen del logo lleva a la vez las clases `stnd` y
   `dark-version`. Salient espera dos imágenes distintas y esconde la versión
   oscura mientras la cabecera es transparente, así que apagaba la única que
   hay. Se repite su mismo selector, palabra por palabra, porque el suyo lleva
   !important y solo se le gana igualando la especificidad y cargando después.
   El arreglo de fondo es dejar vacía la ranura del logo oscuro en Salient
   Redux; esto lo tapa mientras tanto. */
html body #logo img,
html body #logo img.stnd,
html body #logo img.dark-version,
html body #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent.dark-slide #logo img:not(.dark-version),
html body #header-outer[data-permanent-transparent="1"][data-transparent-header="true"].transparent:not(.dark-slide) #logo img.dark-version {
    opacity: 1 !important;
}

@media (max-width: 900px) {
    /* En móvil manda la cabecera del tema, que trae el menú desplegable, y su
       logo es el SVG antiguo (con barra vertical y sin "DE FERARI - CORREA").
       Se sustituye por el del diseño sin tocar la configuración del tema: la
       imagen queda oculta —no quitada, para no perder el enlace ni el texto
       alternativo— y el logo bueno se pinta de fondo. */
    /* 176 y no los 152 originales: el estudio pidió el 25-ago-2026 que el logo
       se notara más, y en el teléfono es el único que se ve. El alto sigue la
       proporción del logo definitivo (3,81 a 1). La imagen de adentro se mide
       igual, porque es la que estira la caja. */
    html body #logo {
        display: block;
        width: 176px;
        height: 46px;
        background: url('https://dfyc.cl/wp-content/themes/salient-child/img/logo.png') left center / contain no-repeat;
    }
    html body #logo img {
        visibility: hidden !important;
        width: 176px !important;
        height: 46px !important;
    }

    /* La cabecera del tema va fija y transparente: al bajar quedaba flotando
       encima de las fotos del equipo y de la franja de oficina, con el logo
       blanco ilegible sobre fondo claro. (Lo que el estudio vio en el teléfono
       el 25-ago-2026.)

       Va con fondo SIEMPRE, no solo con la clase `scrolled-down` que agrega
       Salient: esa clase depende de que el navegador registre un scroll normal
       y no aparece cuando se salta de golpe —al volver a una página con la
       posición guardada, por ejemplo—, y ahí la cabecera queda otra vez encima
       de una foto. El fondo permanente es el único que no falla. */
    html body #header-outer,
    html body #header-outer.transparent,
    html body #header-outer #top,
    html body #header-outer.transparent #top {
        background-color: #101821 !important;
    }

    /* El que pinta de verdad es #top —Salient le gana en especificidad al de
       afuera— y #top mide EXACTAMENTE lo que mide el logo: la línea dorada de
       arriba del lockup asomaba por encima de la barra y el "DE FERARI -
       CORREA" quedaba cortado por el borde de abajo. Se ve en Safari de iPhone,
       no en Chromium. El aire va aquí, para que la franja oscura envuelva el
       logo entero. (31-ago-2026.) */
    html body #header-outer #top {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    html body #header-outer {
        border-bottom: 1px solid rgba(255, 255, 255, .22);
        box-shadow: 0 2px 14px rgba(16, 24, 33, .35);
    }
}

/* ==================== AJUSTES DE MÓVIL ====================
   Las medidas del diseño están en unidades del lienzo de 1920: al bajar a un
   teléfono varios textos caían a 8 y 9 px, ilegibles. Aquí se les pone un piso
   en píxeles. Se revisó con un iPhone simulado, no midiendo. */
@media (max-width: 900px) {
    .eq__nombre,
    .ficha__nombre {
        font-size: 13px;
        letter-spacing: 1.1px;
        line-height: 1.3;
    }

    .eq__cargo,
    .ficha__cargo {
        font-size: 12px;
        letter-spacing: .6px;
    }

    .amp__texto { font-size: 13px; line-height: 24px; }
    .eq__nota p { font-size: 13px; line-height: 21px; }
    .legal { font-size: 12px; }

    .ficha__volver,
    .area__volver { font-size: 13px; letter-spacing: 1.4px; }

    /* la tarjeta oscura de la ficha: el teléfono y el correo quedaban en 9px y
       con 10px de alto, imposibles de tocar */
    .ficha__contacto p { font-size: 14px; line-height: 1.8; letter-spacing: .8px; }
    .ficha__contacto a { display: inline-block; padding: 5px 4px; }

    /* los títulos llevan letter-spacing y el hueco del último carácter los
       empujaba unos píxeles fuera del borde derecho */
    /* El margen negativo compensa el hueco que el letter-spacing deja
       después del último carácter, para que el título quede ópticamente
       centrado. En un teléfono ese ajuste vale 2 o 3 px y empujaba la caja
       fuera del borde derecho, así que aquí se anula: a este tamaño el
       descentrado no se ve, el desborde sí. */
    .qs__titulo,
    .areas__titulo,
    .eq__titulo,
    .oficina__titulo,
    .cto__titulo {
        padding-left: 16px;
        padding-right: 16px;
        margin-right: 0;
        letter-spacing: 2px;
    }

    /* alto de dedo en los datos de contacto y en el enlace de la política */
    .cto__lista a { display: inline-block; padding: 6px 0; }
    html body .cto__consentimiento a { display: inline-block; padding: 4px 0; }

    /* el nombre bajo cada foto del equipo también es un enlace */
    .eq__celda a { min-height: 44px; display: flex; align-items: center; }

    /* consentimiento: la casilla que exige la ley tiene que poder tocarse */
    html body .cto__consentimiento { font-size: 13px; line-height: 1.55; }
    html body .cto__consentimiento input { width: 20px; height: 20px; }
    html body .cto__consentimiento label { padding: 6px 0; }

    /* enlaces del pie y de la línea legal: alto de dedo */
    .legal a { display: inline-block; padding: 6px 0; }
}

@media (max-width: 900px) {
    /* La hamburguesa del tema mide 22×20: es el dibujo, no una zona tocable.
       Se le da alrededor el espacio de un dedo sin moverla de sitio. */
    html body #toggle-nav,
    html body .slide-out-widget-area-toggle a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        min-height: 48px;
    }

    /* renglones del menú desplegable */
    html body #slide-out-widget-area .menu a,
    html body .slide-out-widget-area .menu a {
        min-height: 46px;
        display: flex;
        align-items: center;
    }
}

/* ============ MENÚ DESPLEGABLE DE MÓVIL ============
   Salient lo pinta con su color de acento de demostración: azul eléctrico,
   tipografía serif y una X roja. Se lleva a la paleta del estudio. Es la única
   pantalla del sitio que el cliente ve en su teléfono para navegar, así que no
   puede quedar fuera de marca. */
/* El azul no lo pinta el panel sino una capa aparte, #slide-out-widget-area-bg,
   que ocupa la pantalla entera. */
html body #slide-out-widget-area-bg,
html body #slide-out-widget-area-bg.slide-out-from-right,
html body #slide-out-widget-area {
    background-color: #101821 !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

html body #slide-out-widget-area .off-canvas-menu-container li a,
html body #slide-out-widget-area .menu a,
html body .slide-out-widget-area .menu a {
    font-family: 'TT Hoves', sans-serif !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    color: #fff !important;
}

html body #slide-out-widget-area .menu a:hover,
html body #slide-out-widget-area .menu .current-menu-item > a {
    color: var(--dorado-claro) !important;
}

/* el botón "Contacto" conserva su píldora dorada */
html body #slide-out-widget-area .menu .menu-button > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--dorado) !important;
    font-size: 15px !important;
}

html body #slide-out-widget-area .menu .menu-button > a:hover {
    background: #7d6845 !important;
    color: #fff !important;
}

/* La X de cerrar viene dentro de un círculo rojo (#FF1053, el "color extra" de
   la demostración de Salient), pintado con un ::before. */
html body a.slide_out_area_close::before {
    background-color: rgba(255, 255, 255, .12) !important;
}

html body a.slide_out_area_close:hover::before {
    background-color: rgba(150, 126, 88, .55) !important;
}

html body .slide_out_area_close .close-line,
html body #slide-out-widget-area .close-line,
html body .close-wrap .close-line {
    background-color: #fff !important;
}