/* =========================================================================
   DF&C Abogados — portada
   Las medidas salen de HOME vf.pdf (lienzo 1920), que es el diseño final: el
   que revisó el cliente. Hasta el 17-ago-2026 salían de HOME copia.ai, que es
   una versión anterior del mismo diseño; las 11 notas de Catalina de ese día
   eran justamente los sitios donde la web seguía al archivo viejo.
   Se escriben en vw con tope para que a 1920 calce exacto con el diseño y en
   pantallas menores baje en la misma proporción: 1px del diseño = 1/19.2 vw.
   ========================================================================= */

/* Minion Pro ya no se declara: se usaba solo para los tres "&" (hero, tarjeta y
   ficha) y los tres pasaron al trazo del diseño. Eran 218 KB de tipografía que
   el navegador ya no baja. */

:root {
    /* colores tomados del AI */
    --dorado: #967E58;
    --dorado-claro: #BDAD9A;
    --azul-oscuro: #101821;
    --azul-medio: #203B4D;
    --blanco: #ffffff;

    /* 1 px del diseño, para que todo escale igual */
    --u: 0.0520833vw;      /* 1/1920 */
}

* { box-sizing: border-box; }

/* Sin scroll-behavior: smooth. Salient carga nectar-smooth-scroll.js y las dos
   animaciones a la vez producían una pausa y luego un salto. */

.qs, .areas, .eq, .cto {
    scroll-margin-top: calc(137 * var(--u));
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'TT Hoves', sans-serif;
    font-weight: 300;
    color: var(--blanco);
    background: var(--azul-oscuro);
    -webkit-font-smoothing: antialiased;
}

/* ============================ HEADER ============================ */

.hdr {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    /* 130px: en el PDF final la línea fina de abajo cae en y=129,5 (antes 137). */
    height: clamp(74px, calc(130 * var(--u)), 130px);
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

/* ---- logo ---- */
.hdr__logo {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Centrado, no anclado arriba con un padding fijo: esa medida (y=33,6) era
       del lockup viejo, y con el definitivo —más alto en proporción— el
       "DE FERARI - CORREA" quedaba pegado a la línea de abajo de la cabecera.
       Centrando, el aire se reparte solo y no depende de un número que hay que
       recalcular cada vez que cambia el logo. (1-sep-2026.) */
    justify-content: center;
    /* El SVG empieza justo en la regla dorada, que en el diseño cae en x=74,5. */
    padding-left: clamp(20px, calc(74.5 * var(--u)), 74.5px);
    text-decoration: none;
    color: var(--blanco);
    width: calc(737 * var(--u));
    min-width: 200px;
}

.hdr__logo-linea {
    position: absolute;
    top: clamp(18px, calc(32 * var(--u)), 32px);
    left: clamp(20px, calc(100 * var(--u)), 100px);
    width: clamp(150px, calc(303 * var(--u)), 303px);
    height: 1px;
    background: var(--dorado-claro);
}

.hdr__logo-nombre {
    font-size: clamp(17px, calc(30 * var(--u)), 30px);
    font-weight: 300;
    letter-spacing: clamp(1px, calc(3 * var(--u)), 3px);
    word-spacing: clamp(8px, calc(25 * var(--u)), 25px);
    line-height: 1.1;
    white-space: nowrap;
}

.hdr__logo-nombre b {
    font-weight: 500;
    letter-spacing: clamp(0.5px, calc(1.5 * var(--u)), 1.5px);
}

.hdr__logo-sub {
    margin-top: clamp(3px, calc(7 * var(--u)), 7px);
    font-size: clamp(7px, calc(11.5 * var(--u)), 11.5px);
    font-weight: 300;
    letter-spacing: clamp(2px, calc(6.4 * var(--u)), 6.4px);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* ---- menú ---- */
.hdr__nav {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
}

/* Separadores del PDF final: 737 · 957 · 1177,5 · 1410 · 1631.
   (El diseño anterior los tenía en 593 · 789 · 1006 · 1220 · 1414, porque
   llevaba un "ESP - ENG" al final que se dio de baja.) */
.hdr__nav > a:nth-child(1),
.hdr__nav > a:nth-child(2),
.hdr__nav > a:nth-child(3),
.hdr__nav > a:nth-child(4),
.hdr__nav > .hdr__cta-celda {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.55);
    text-decoration: none;
    color: var(--blanco);
    /* Alta y baja, no versales: el PDF final lo tiene así. Cuerpo 17,2px con
       1,5px entre letras — ajustado contra el ancho de tinta de cada palabra
       en el PDF ("Contacto" 79,9px, "Quiénes Somos" 137,6px). */
    font-size: clamp(11px, calc(17.2 * var(--u)), 17.2px);
    font-weight: 300;
    letter-spacing: 0.087em;
    white-space: nowrap;
    /* En el diseño la fila de texto no queda al centro exacto de la cabecera:
       cae 4px más arriba. El padding de abajo lo sube sin mover la celda. */
    padding-bottom: calc(8 * var(--u));
}

.hdr__nav > a:nth-child(1) { width: calc(220 * var(--u)); }     /* 737→957    */
.hdr__nav > a:nth-child(2) { width: calc(220.5 * var(--u)); }   /* 957→1177,5 */
.hdr__nav > a:nth-child(3) { width: calc(232.5 * var(--u)); }   /* 1177,5→1410 */
.hdr__nav > a:nth-child(4) { width: calc(221 * var(--u)); }     /* 1410→1631  */
/* La celda del botón no lleva el ajuste óptico: el botón va en su sitio y el
   corrimiento se hace dentro, en .hdr__cta. */
.hdr__nav > .hdr__cta-celda { flex: 1 1 auto; justify-content: flex-start; padding-left: calc(56 * var(--u)); padding-bottom: 0; }

.hdr__nav > a:hover { color: var(--dorado-claro); }

/* los separadores del diseño no llegan al borde inferior */
.hdr__nav > a,
.hdr__nav > .hdr__cta-celda {
    position: relative;
}

.hdr__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Botón del PDF final: 181x41 en x=1687 (antes 181x35). */
    width: clamp(120px, calc(181 * var(--u)), 181px);
    height: clamp(30px, calc(41 * var(--u)), 41px);
    border-radius: 999px;
    background: var(--dorado);
    color: var(--blanco);
    text-decoration: none;
    font-size: clamp(11px, calc(17.2 * var(--u)), 17.2px);
    letter-spacing: 0.087em;
    padding-bottom: calc(6 * var(--u));   /* mismo ajuste óptico que el menú */
    transition: background .25s ease;
}

.hdr__cta:hover {
    background: #7d6845;
}

/* El logo es el lockup del PDF final en SVG, sacado en vectorial del propio
   documento. Van marcados porque Salient fuerza `width:auto` en las imágenes. */
.hdr__logo img,
.plomo__logo img,
.cto__logo img {
    display: block;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Anchos del lockup. Las medidas del PDF final eran 301,5 en la cabecera · 328
   en el banner del Plomo · 216 en contacto, pero en pantalla el "DE FERARI ·
   CORREA" quedaba ilegible: el estudio pidió el 25-ago-2026 que el logo se
   notara más.

   El 31-ago-2026 llegó el logo definitivo del estudio, que ya trae ese renglón
   mucho más grande —y sin la barra antes de "Abogados"—. Es más alto en
   proporción que el anterior (3,81 de ancho por 1 de alto, contra 4,16), así
   que los anchos bajan un poco: con los de antes el lockup rozaba la línea
   inferior de la cabecera. En pantalla se nota MÁS que el anterior, porque lo
   que creció es el renglón que costaba leer. */
.hdr__logo img  { width: clamp(175px, calc(325 * var(--u)), 325px) !important; }
.plomo__logo img { width: clamp(225px, calc(380 * var(--u)), 380px) !important; }
.cto__logo img  { width: clamp(180px, calc(250 * var(--u)), 250px) !important; }

/* ============================ HERO ============================ */

.hero {
    position: relative;
    height: 100vh;
    min-height: 520px;
    background: var(--azul-medio);
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.hero__texto {
    position: relative;
    z-index: 2;
    padding-left: clamp(18px, calc(92 * var(--u)), 92px);
    padding-top: clamp(138px, calc(246 * var(--u)), 246px);
}

/* El interletrado va en la frase completa, no solo en el título: en el diseño
   las tres líneas llevan el mismo tracking (la línea 3 mide 611px de ancho a
   1920; sin él quedaba en 574). Corrección de Catalina, 17-ago-2026. */
.hero__frase {
    margin: 0;
    font-size: clamp(22px, calc(41 * var(--u)), 41px);
    line-height: clamp(35px, calc(60 * var(--u)), 60px);
    font-weight: 300;
    letter-spacing: 0.03em;
}

.hero__titulo {
    line-height: inherit;
}

.hero__titulo em {
    font-style: normal;
    font-weight: 500;
    color: var(--dorado-claro);
}

/* El "&" del hero es EL MISMO dibujo que el de la tarjeta: en el PDF los dos
   contornos son el mismo punto por punto, solo que el del hero va 1,389 veces
   más grande (27,8x34,4 contra 20x24,7). Antes era el de Minion Pro y en blanco
   translúcido, o sea otro glifo y otro color: en el diseño va en el mismo dorado
   que "Compromiso" y "Excelencia". Lo pidió Dala el 18-ago-2026.
   line-height 0 para que el glifo, más alto que las mayúsculas, no estire la
   primera línea. */
.hero__amp {
    line-height: 0;
    color: var(--dorado-claro);
}

.hero__amp svg {
    display: inline-block;
    width: clamp(15px, calc(27.8 * var(--u)), 27.8px);
    height: clamp(18.6px, calc(34.4 * var(--u)), 34.4px);
    /* la base del glifo se apoya en la línea base del texto, como en el diseño */
    vertical-align: baseline;
    /* el aire a los lados que tiene en el diseño: 15px antes y 17px después */
    margin: 0 calc(6.5 * var(--u)) 0 calc(3.5 * var(--u));
}

/* rectángulos decorativos de líneas finas */
.hero__deco span {
    position: absolute;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.hero__deco span:nth-child(1) { left: calc(-260 * var(--u)); top: calc(687 * var(--u)); width: calc(818 * var(--u)); height: calc(520 * var(--u)); }
.hero__deco span:nth-child(2) { left: calc(50 * var(--u));   top: calc(904 * var(--u)); width: calc(801 * var(--u)); height: calc(420 * var(--u)); }
.hero__deco span:nth-child(3) { left: calc(1156 * var(--u)); top: calc(370 * var(--u)); width: calc(602 * var(--u)); height: calc(540 * var(--u)); }
.hero__deco span:nth-child(4) { left: calc(1233 * var(--u)); top: calc(618 * var(--u)); width: calc(572 * var(--u)); height: calc(366 * var(--u)); }
.hero__deco span:nth-child(5) { left: calc(1580 * var(--u)); top: calc(278 * var(--u)); width: calc(440 * var(--u)); height: calc(673 * var(--u)); }
.hero__deco span:nth-child(6) { left: calc(1683 * var(--u)); top: calc(587 * var(--u)); width: calc(420 * var(--u)); height: calc(456 * var(--u)); }


/* ======================= QUIÉNES SOMOS ======================= */

.qs {
    background: #E9EBEC;
    border-top: calc(18 * var(--u)) solid #fff;
    padding: calc(35 * var(--u)) calc(80 * var(--u)) calc(36 * var(--u));
    text-align: center;
    color: #000;
}

.qs__titulo,
.areas__titulo {
    margin: 0;
    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;
}

/* 27px con 55px de interlínea: son los valores literales del texto vivo del PDF
   final (el único texto que no viene vectorizado). Estaba en 31/58, que es la
   nota de Catalina "mantener tamaño y grosor". El grosor de la negrita es
   Medium (500), nunca Bold. */
.qs__texto {
    max-width: calc(1640 * var(--u));
    margin: calc(32 * var(--u)) auto 0;
    font-size: clamp(13px, calc(27 * var(--u)), 27px);
    line-height: clamp(20px, calc(55 * var(--u)), 55px);
    /* El PDF trae este párrafo como texto vivo: 27px con 1,35px entre letras,
       o sea el tracking 50 de Illustrator = 0.05em. */
    letter-spacing: 0.05em;
    font-weight: 300;
    color: #000;
}