.qs__texto b {
    font-weight: 500;
}

/* ======================= ÁREAS DE PRÁCTICA ======================= */

.areas__titulo {
    letter-spacing: clamp(2px, calc(4.6 * var(--u)), 4.6px);
    padding: calc(31 * var(--u)) clamp(2px, calc(4.6 * var(--u)), 4.6px) calc(30 * var(--u)) 0;
    background: #fff;
    text-align: center;
}

.areas__banda {
    display: flex;
    align-items: stretch;
    height: calc(366 * var(--u));
    min-height: 200px;
    background: #151F2B;
}

/* anchos de celda medidos del diseño: 427 · 344 · 334 · 401 · 414 */
.areas__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: calc(64 * var(--u));
    text-align: center;
    border-left: 1px solid #947E58;
}

.areas__item:first-child { border-left: 0; }
.areas__item:nth-child(1) { width: calc(427 * var(--u)); }
.areas__item:nth-child(2) { width: calc(344 * var(--u)); }
.areas__item:nth-child(3) { width: calc(334 * var(--u)); }
.areas__item:nth-child(4) { width: calc(401 * var(--u)); }
.areas__item:nth-child(5) { width: calc(414 * var(--u)); }

.areas__icono {
    width: calc(141 * var(--u));
    height: calc(142 * var(--u));
    fill: none;
    stroke: #BDAD9A;
    stroke-width: 1.4;
}

.areas__item--ancho .areas__icono {
    width: calc(191 * var(--u));
}

.areas__item p {
    margin: calc(56 * var(--u)) 0 0;
    font-size: clamp(11px, calc(17 * var(--u)), 17px);
    line-height: calc(24 * var(--u));
    font-weight: 300;
    letter-spacing: clamp(0.6px, calc(1.4 * var(--u)), 1.4px);
    margin-right: clamp(-1.4px, calc(-1.4 * var(--u)), -0.6px);
    color: #BDAD9A;
}


/* ======================= AMPERSAND + FOTO CIUDAD ======================= */

/* Medidas del PDF final: tarjeta 743x578 en x=44 · foto 1038,5x578 en x=807 ·
   margen derecho 74,5. (El diseño anterior tenía 711x554 en x=82.) */
.amp {
    display: flex;
    align-items: stretch;
    gap: calc(20 * var(--u));
    padding: calc(33 * var(--u)) 0 calc(20 * var(--u));
    background: #fff;
    padding-left: calc(44 * var(--u));
    padding-right: calc(74.5 * var(--u));
}

/* La tarjeta crece si el texto necesita más renglones, en vez de recortarlo.
   A 1920 mide los 578px del diseño clavados (125,5 + 24,74 del & + 51 + 4x55 de
   texto + 156,76 abajo = 578). Más abajo de ~1400px el cuerpo del texto llega a
   su piso de 12px, la caja se estrecha y el párrafo pasa a 5, 7 y hasta 8
   líneas: con alto fijo el texto se salía sobre el fondo blanco —15px a 1100 y
   48px a 950— y así se vio en producción el 17-ago-2026. */
.amp__card {
    flex: 0 0 calc(743 * var(--u));
    min-height: calc(578 * var(--u));
    background: #151F2B;
    padding: calc(125.5 * var(--u)) calc(125 * var(--u)) calc(156.76 * var(--u));
    text-align: center;
}

/* El "&" del diseño no es de ninguna tipografía: va como trazo. */
.amp__signo {
    margin: 0;
    line-height: 0;
    color: #BDAD9A;
}

.amp__signo svg {
    display: inline-block;
    width: calc(20.02 * var(--u));
    height: calc(24.74 * var(--u));
    min-width: 14px;
    min-height: 17.3px;
}

.amp__texto {
    /* 15,3px con 1,9px entre letras e interlínea 55: ajustado palabra por
       palabra contra el PDF (la mayúscula mide 11px de alto). Antes 15/2,4/62. */
    margin: calc(51 * var(--u)) 0 0;
    font-size: clamp(12px, calc(15.3 * var(--u)), 15.3px);
    line-height: clamp(16px, calc(55 * var(--u)), 55px);
    letter-spacing: clamp(0.8px, calc(1.83 * var(--u)), 1.83px);
    text-transform: uppercase;
    /* El diseño justifica TODAS las líneas, la última incluida: por eso los
       cuatro renglones terminan a ras en x=661. */
    text-align: justify;
    /* `manual`, no `auto`: Chromium partía "si-tuación", que no es una división
       válida en español y además metía una sílaba más en la primera línea. El
       único corte del diseño es "solucio-nes" y va como guion blando (U+00AD)
       dentro del texto. Si el cliente cambia la frase, deja de partir y ya. */
    hyphens: manual;
    color: #BDAD9A;
    font-weight: 300;
}

/* El diseño justifica también el ÚLTIMO renglón: los cuatro terminan a ras en
   x=661. Pero eso solo se ve bien mientras el último renglón vaya lleno, y va
   lleno únicamente cuando el texto está a su tamaño de diseño, o sea sobre los
   ~1506px (15,3 x ancho/1920 = 12, su piso). Más abajo el párrafo pasa a 5, 6 y
   7 líneas y la última queda con dos palabras: justificarla dejaba "EN" pegado
   a la izquierda y "NOSOTROS." al otro extremo, con un hueco enorme en medio.
   Es lo que vio la clienta el 18-ago-2026. */
@media (min-width: 1510px) {
    .amp__texto { text-align-last: justify; }
}

/* La primera frase va en Medium, como en el diseño. */
.amp__texto b {
    font-weight: 500;
}

.amp__foto {
    flex: 1 1 auto;
    min-height: calc(578 * var(--u));
    background: #151F2B;
    position: relative;
    overflow: hidden;
}

/* Salient le pone padding-bottom a TODOS los <p> (21px en el signo y 23px en el
   párrafo de la tarjeta). En el build local eso no existe, así que el descuadre
   solo aparecía en producción: 44px de más en la tarjeta del &, que con el alto
   fijo quedaban escondidos y al pasar a alto flexible se hicieron visibles.
   Se anula en los párrafos cuya caja está medida del diseño. */
html body .hero__frase,
html body .amp__signo,
html body .amp__texto,
html body .areas__item p,
html body .eq__nota p {
    padding-bottom: 0 !important;
}

/* ======================= BANNER EL PLOMO ======================= */

.plomo {
    position: relative;
    height: calc(846 * var(--u));
    min-height: 260px;
    background: #29384B;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plomo__logo {
    position: absolute;
    /* la regla dorada del logo cae a 497px del inicio de la banda en el PDF
       final; el padding-top de 22 era para el logo viejo, hecho de texto */
    top: calc(497 * var(--u));
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
}

.plomo__linea {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(463 * var(--u));
    height: 1px;
    background: #BDAD9A;
}

.plomo__nombre {
    font-size: clamp(18px, calc(50 * var(--u)), 50px);
    font-weight: 300;
    letter-spacing: clamp(1px, calc(4 * var(--u)), 4px);
    word-spacing: clamp(8px, calc(34 * var(--u)), 34px);
    margin-right: clamp(-4px, calc(-4 * var(--u)), -1px);
    line-height: 1.1;
    white-space: nowrap;
}

.plomo__nombre b { font-weight: 500; letter-spacing: clamp(1px, calc(6 * var(--u)), 6px); }

.plomo__sub {
    margin-top: calc(8 * var(--u));
    font-size: clamp(7px, calc(18 * var(--u)), 18px);
    letter-spacing: clamp(2px, calc(15 * var(--u)), 15px);
    margin-right: clamp(-15px, calc(-15 * var(--u)), -2px);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}


/* ======================= MOVIMIENTO ======================= */

/* Las capas de foto son más altas que su marco para que quede recorrido al
   desplazarlas; el marco recorta con overflow:hidden. */
/* Cada capa se agranda SOLO lo necesario para su recorrido: como la foto se
   ajusta con `cover`, todo alto extra la acerca y cambia el encuadre del diseño.
   Hero y foto de ciudad tienen casi la misma proporción que su marco, así que
   ahí el margen va corto; el banner tolera más porque ya viene muy recortado. */
.hero__bg,
.amp__foto-img,
.plomo__bg {
    position: absolute;
    left: 0;
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    will-change: transform;
    z-index: 0;
}

.hero__bg { background-image: url('https://dfyc.cl/wp-content/uploads/2026/08/dfyc-home-hero.jpg'); top: 0; height: 100%; }
.amp__foto-img { background-image: url('https://dfyc.cl/wp-content/uploads/2026/08/dfyc-home-ciudad.jpg'); top: 0; height: 100%; }
/* Anclada arriba: el recorrido del parallax sube la capa por encima del marco
   y con el encuadre centrado la cumbre quedaba cortada (pedido del estudio,
   25-ago-2026). La foto lleva cielo extendido para que quede aire sobre la
   cima en todo el recorrido. */
.plomo__bg { background-image: url('https://dfyc.cl/wp-content/uploads/2026/08/dfyc-home-plomo-cima.jpg'); top: -8%; height: 116%;
             background-position: center top; }

.hero__deco,
.hero__texto { z-index: 2; will-change: transform; }

.plomo__logo { z-index: 2; }

/* El logo es blanco y la foto, al reencuadrarla para que se viera la cima, dejó
   nieve justo detrás en parte del recorrido del parallax: "Abogados" se perdía.
   Una sombra muy difusa —sin bordes, centrada en el logo— le devuelve el
   contraste sin oscurecer la foto ni verse como una mancha. */
.plomo__logo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1200px, 92%);
    height: calc(340 * var(--u));
    min-height: 190px;
    background: radial-gradient(ellipse at center,
        rgba(16, 24, 33, .70) 0%,
        rgba(16, 24, 33, .52) 38%,
        rgba(16, 24, 33, .22) 62%,
        rgba(16, 24, 33, 0) 78%);
    pointer-events: none;
    z-index: -1;
}

/* Aparición de los textos: solo se activa si el JS está vivo, así sin JS el
   contenido se ve igual y no queda invisible. */
.con-movimiento [data-revelar] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .3, 1);
}

.con-movimiento [data-revelar].esta-visible {
    opacity: 1;
    transform: none;
}

/* las tarjetas de áreas entran escalonadas */
.con-movimiento .areas__item:nth-child(2) { transition-delay: .08s; }
.con-movimiento .areas__item:nth-child(3) { transition-delay: .16s; }
.con-movimiento .areas__item:nth-child(4) { transition-delay: .24s; }
.con-movimiento .areas__item:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .con-movimiento [data-revelar] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hero__bg,
    .amp__foto-img,
    .plomo__bg {
        transform: none !important;
    }
}


/* ======================= EQUIPO ======================= */

.eq {
    background: #fff;
    padding: calc(60 * var(--u)) 0 calc(70 * var(--u));
    text-align: center;
}

.eq__titulo {
    margin: 0 0 calc(32 * var(--u));
    font-size: clamp(16px, calc(30 * var(--u)), 30px);
    font-weight: 300;
    letter-spacing: clamp(3px, calc(7.6 * var(--u)), 7.6px);
    /* compensa el hueco que el letter-spacing deja tras el último carácter.
       Va en padding y no en margen negativo: el margen ensanchaba la caja por
       encima del ancho de la ventana y aparecía scroll horizontal. */
    padding-right: clamp(3px, calc(7.6 * var(--u)), 7.6px);
    text-transform: uppercase;
    color: #203B4D;
    line-height: 1;
}

.eq__fila { margin-bottom: calc(48 * var(--u)); }

.eq__fotos {
    display: flex;
    justify-content: center;
    gap: calc(96 * var(--u));
}

.eq__foto {
    width: calc(334 * var(--u));
    height: calc(460 * var(--u));
    overflow: hidden;
    background: #E9EBEC;
}

.eq__foto a,
.eq__foto .eq__vinculo {
    display: block;
    width: 100%;
    height: 100%;
}