/* ═══════════════════════════════════════════════════════════════════════════
   CARO & ASOCIADOS — Hoja pública
   Depende de tokens.css. No declara colores ni fuentes literales.

   ÍNDICE
     01  Reset y base
     02  Tipografía
     03  Layout y contenedores
     04  Utilidades de revelado (scroll storytelling)
     05  Botones y enlaces
     06  Cabecera y navegación
     07  Menú móvil a pantalla completa
     08  Hero
     09  Bloques editoriales
     10  Áreas de práctica
     11  Abogados
     12  Casos
     13  Métricas
     14  Insights
     15  Instagram
     16  CTA
     17  Pie de página
     18  Formularios
     19  Accesibilidad y movimiento reducido
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · RESET Y BASE ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Compensa la cabecera fija al saltar a un ancla */
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    background-color: var(--ink-900);
    color: var(--ivory);
    font-family: var(--font-sans);
    font-size: var(--t-body);
    line-height: var(--lh-relaxed);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

/* Bloquea el scroll cuando el menú móvil está abierto */
body.is-locked { overflow: hidden; }

/* ── 02 · TIPOGRAFÍA ───────────────────────────────────────────────────── */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
}

.display-1 {
    font-family: var(--font-display);
    font-size: var(--t-display-1);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    font-weight: 400;
    text-wrap: balance;
}

.display-2 {
    font-family: var(--font-display);
    font-size: var(--t-display-2);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    font-weight: 400;
    text-wrap: balance;
}

.display-3 {
    font-family: var(--font-display);
    font-size: var(--t-display-3);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    font-weight: 400;
    text-wrap: balance;
}

.display-4 {
    font-family: var(--font-display);
    font-size: var(--t-display-4);
    line-height: var(--lh-snug);
    font-weight: 400;
}

/* Cursiva serif para el énfasis retórico de los titulares.
   Es el único recurso "decorativo" del sistema tipográfico.

   Usa Newsreader y NO la Marcellus del resto del titular: Marcellus no tiene
   cursiva, y sin una real el navegador la falsifica inclinando los trazos
   rectos. En una serif lapidaria eso se nota inmediatamente: las curvas
   quedan deformadas y el remate se tuerce. El contraste entre las dos serifs
   es además deliberado — el énfasis debe distinguirse.                       */
.display-1 em, .display-2 em, .display-3 em {
    font-family: var(--font-display-alt);
    font-style: italic;
    font-weight: 300;
    color: var(--gold-warm);
}

.lead {
    font-size: var(--t-lead);
    line-height: var(--lh-normal);
    color: var(--ivory-mute);
    max-width: 34em;
    text-wrap: pretty;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-sans);
    font-size: var(--t-eyebrow);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gold);
}

/*
 * Adorno del antetítulo: filete + rombo.
 *
 * Procounsel pone aquí un mazo de juez. Se descarta a propósito: el mazo es
 * el cliché exacto que el brief (§29) pedía evitar, y además ni siquiera es
 * un símbolo del derecho colombiano —es de tribunal anglosajón—. El rombo
 * viene del propio lenguaje de la marca y no dice nada que el texto no diga.
 *
 * Va en un pseudo-elemento y no en el marcado porque es decoración pura: así
 * no existe para un lector de pantalla, que es lo correcto. Un SVG en data URI
 * en vez de dos pseudo-elementos porque ::after ya está libre pero quedaría
 * DESPUÉS del texto, y el adorno va delante.
 */
.eyebrow::before {
    content: '';
    flex: none;
    width: 2.75rem;
    height: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 8'%3E%3Cpath d='M0 4h28' stroke='%23B69566' stroke-width='1'/%3E%3Cpath d='M37 1.2 39.8 4 37 6.8 34.2 4Z' fill='%23B69566'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 2.75rem 0.5rem;
}

.prose { max-width: var(--container-text); }
.prose p + p { margin-top: var(--s-5); }
.prose p { color: var(--ivory-mute); text-wrap: pretty; }

.text-muted { color: var(--ivory-mute); }
.text-dim   { color: var(--ivory-dim); }
.text-gold  { color: var(--gold-warm); }

/* Variantes sobre superficie clara. Sin estas reglas, .text-dim caía a
   3.65:1 sobre papel y .text-muted a 1.98:1 — ambos por debajo de AA. */
.section--paper .text-muted { color: var(--graphite-mute); }
.section--paper .text-dim   { color: var(--graphite-dim); }
.section--paper .text-gold  { color: var(--gold-deep); }

.meta {
    font-size: var(--t-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--ivory-dim);
}

/* ── 03 · LAYOUT ───────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }

/* Bandas de superficie: el ritmo claro/oscuro es lo que da respiración
   editorial y evita la sensación de "una sola página larga y negra".        */
.section--paper { background-color: var(--paper); color: var(--graphite); }
.section--paper .lead,
.section--paper .prose p { color: var(--graphite-mute); }
.section--paper .eyebrow { color: var(--gold-deep); }
.section--paper .eyebrow::before { background-color: var(--gold-deep); opacity: .5; }
.section--paper .meta { color: var(--graphite-dim); }
.section--paper .display-1 em,
.section--paper .display-2 em,
.section--paper .display-3 em { color: var(--gold-deep); }

.section--alt { background-color: var(--ink-850); }

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    gap: var(--grid-gap);
}

/* Cabecera de sección: título a la izquierda, texto de apoyo desplazado.
   La asimetría es deliberada (brief §29: "asimetría controlada").           */
.section-head {
    display: grid;
    gap: var(--s-5);
    margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

@media (min-width: 60rem) {
    .section-head {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--s-8);
        align-items: end;
    }
    .section-head__aside { padding-bottom: .35rem; }
}

.rule {
    height: 1px;
    background-color: var(--line-dark);
    border: 0;
    width: 100%;
}
.section--paper .rule { background-color: var(--line-light); }

/* ── 04 · REVELADO AL SCROLL ───────────────────────────────────────────── */
/* Aplicado por IntersectionObserver en site.js. Sin JS, el contenido se ve
   igualmente: la clase .is-visible se añade, no se quita.                   */

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
    transition:
        opacity var(--d-reveal) var(--ease-out),
        transform var(--d-reveal) var(--ease-out);
    /* will-change solo mientras se anima; se limpia en JS al terminar */
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Escalonado: cada hijo entra 90ms después del anterior. */
[data-reveal-group] > * {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    transition:
        opacity var(--d-slow) var(--ease-out),
        transform var(--d-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }

/* Revelado por línea para titulares grandes: cada línea sube desde su
   propia máscara. Es el gesto más "editorial" del sistema.                  */
.reveal-lines { display: block; }
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span {
    display: block;
    transform: translate3d(0, 105%, 0);
    transition: transform var(--d-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal-lines.is-visible .line > span { transform: none; }

/* ── 05 · BOTONES Y ENLACES ────────────────────────────────────────────── */

.btn {
    --btn-fg: var(--ink-900);
    --btn-bg: var(--ivory);
    --btn-bd: var(--ivory);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: 0.9rem 1.75rem;
    font-family: var(--font-sans);
    font-size: var(--t-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--btn-fg);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        color var(--d-fast) var(--ease-out),
        background-color var(--d-fast) var(--ease-out),
        border-color var(--d-fast) var(--ease-out);
    text-align: center;
}

/* Barrido de relleno desde abajo. Sustituye al típico cambio brusco de color. */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--gold);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--d-base) var(--ease-out);
    z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { color: var(--ink-900); border-color: var(--gold); }

.btn--ghost {
    --btn-fg: var(--ivory);
    --btn-bg: transparent;
    --btn-bd: var(--line-dark-2);
}

.btn--gold {
    --btn-fg: var(--ink-900);
    --btn-bg: var(--gold);
    --btn-bd: var(--gold);
}
.btn--gold::after { background-color: var(--ivory); }

.section--paper .btn {
    --btn-fg: var(--paper);
    --btn-bg: var(--graphite);
    --btn-bd: var(--graphite);
}
.section--paper .btn--ghost {
    --btn-fg: var(--graphite);
    --btn-bg: transparent;
    --btn-bd: var(--line-light-2);
}

/* El oro debe sobrevivir a las bandas claras.
   `.section--paper .btn` tiene especificidad (0,2,0) y `.btn--gold` (0,1,0),
   así que sin esta regla un botón dorado dentro de una banda de papel se
   volvía gris sin que nadie lo pidiera. */
.section--paper .btn--gold {
    --btn-fg: var(--ink-900);
    --btn-bg: var(--gold);
    --btn-bd: var(--gold);
}
.section--paper .btn--gold:hover,
.section--paper .btn--gold:focus-visible { color: var(--ink-900); }
.section--paper .btn:hover,
.section--paper .btn:focus-visible { color: var(--graphite); }

.btn--sm { padding: 0.65rem 1.15rem; font-size: var(--t-micro); }

/* Enlace de texto con subrayado que crece desde la izquierda. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--gold-warm);
    position: relative;
    padding-bottom: 2px;
    transition: color var(--d-fast) var(--ease-out);
}
.link-arrow::before {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--d-base) var(--ease-out);
}
.link-arrow:hover::before,
.link-arrow:focus-visible::before { transform: scaleX(1); }
.link-arrow .arw {
    transition: transform var(--d-base) var(--ease-out);
    display: inline-block;
}
.link-arrow:hover .arw { transform: translateX(4px); }
.section--paper .link-arrow { color: var(--gold-deep); }

/* ── 06 · CABECERA ─────────────────────────────────────────────────────── */

.header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition:
        background-color var(--d-base) var(--ease-out),
        border-color var(--d-base) var(--ease-out),
        height var(--d-base) var(--ease-out);
    border-bottom: 1px solid transparent;
}

/* Sobre el hero la cabecera es transparente; al hacer scroll se asienta. */
.header.is-stuck {
    background-color: rgba(10, 11, 12, 0.86);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom-color: var(--line-dark);
    height: 4.25rem;
}

/* La cabecera NO se oculta al bajar: queda fija y visible siempre.
   Antes desaparecía al hacer scroll hacia abajo para devolver espacio a la
   lectura. Se descartó: la cabecera lleva el botón de contacto, y esconderlo
   justo cuando alguien lleva medio artículo leído —el momento en que más
   cerca está de escribir— es quitarle la puerta de salida. La barra son 68
   px de 900; el espacio que ahorraba no compensaba. */

.header__inner {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
}

/* Logotipo tipográfico: el brief pide identidad basada en tipografía y
   espacio, no en un símbolo complicado.                                     */
.logo {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    color: var(--ivory);
    flex: none;
}
.logo__name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.logo__sub {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 0.32rem;
}

/* ── Logotipo en imagen ───────────────────────────────────────────────────
   La imagen sustituye al bloque tipográfico cuando existe. El texto NO se
   borra del HTML: si el archivo falta o no carga, el nombre de la firma
   sigue ahí. Un `alt` vacío en la imagen y el nombre real en el
   `aria-label` del enlace evitan que un lector de pantalla lo anuncie dos
   veces. */
.logo__img {
    display: block;
    height: 2.45rem;
    width: auto;
    max-width: min(58vw, 15rem);
}
.logo:has(.logo__img) .logo__text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* Sin :has() (navegadores antiguos) se ve el texto y la imagen no se
   carga: el bloque tipográfico solo, que es exactamente el estado previo. */
@supports not selector(:has(*)) {
    .logo__img { display: none; }
}
.footer .logo__img { height: 2.6rem; }

@media (min-width: 60em) {
    .logo__img { height: 3rem; }
    .footer .logo__img { height: 3rem; }
}

.nav { display: none; }

@media (min-width: 64rem) {
    .nav {
        display: flex;
        align-items: center;
        gap: clamp(1.25rem, 0.4rem + 1.7vw, 2.4rem);
    }
}

.nav__link {
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ivory-mute);
    position: relative;
    padding-block: 0.4rem;
    transition: color var(--d-fast) var(--ease-out);
    white-space: nowrap;
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background-color: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--d-base) var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible,
.nav__link[aria-current="page"] { color: var(--ivory); }
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header__actions { display: flex; align-items: center; gap: var(--s-4); flex: none; }

.lang {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    color: var(--ivory-dim);
}
@media (min-width: 64rem) { .lang { display: flex; } }
/* --ivory-mute y no --ivory-dim: sobre el hero la cabecera es transparente y
   se apoya en una fotografía, donde el contraste real depende del píxel que
   quede debajo. --ivory-dim daba 4.94:1 sobre el fondo base (pasa AA por
   0.44) pero podía caer por debajo sobre una zona clara de la imagen.
   --ivory-mute da 9.11:1 y aguanta cualquier fondo. */
.lang a { color: var(--ivory-mute); transition: color var(--d-fast) var(--ease-out); }
.lang a:hover { color: var(--ivory); }
.lang [aria-current="true"] { color: var(--gold); font-weight: 600; }
.lang__sep { opacity: .4; }

.header__cta { display: none; }
@media (min-width: 64rem) { .header__cta { display: inline-flex; } }

/* Botón hamburguesa: dos filetes que se cruzan. */
.burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 2.75rem;
    height: 2.75rem;
    align-items: flex-end;
    flex: none;
}
@media (min-width: 64rem) { .burger { display: none; } }
.burger span {
    display: block;
    height: 1px;
    background-color: var(--ivory);
    transition: transform var(--d-base) var(--ease-out),
                opacity var(--d-fast) var(--ease-out),
                width var(--d-base) var(--ease-out);
}
.burger span:nth-child(1) { width: 26px; }
.burger span:nth-child(2) { width: 18px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { width: 26px; transform: translateY(-3.5px) rotate(-45deg); }

/* ── 07 · MENÚ MÓVIL ───────────────────────────────────────────────────── */

.menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    background-color: var(--ink-900);
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + 2rem) var(--gutter) var(--s-7);
    /* clip-path da una entrada más sofisticada que un simple fade */
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--d-slow) var(--ease-out);
    visibility: hidden;
    overflow-y: auto;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.menu__list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; }

.menu__item { overflow: hidden; }
.menu__link {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.2rem + 4.6vw, 3.4rem);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    line-height: 1.28;
    color: var(--ivory);
    transform: translate3d(0, 110%, 0);
    transition: transform var(--d-slow) var(--ease-out), color var(--d-fast) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms);
}
.menu.is-open .menu__link { transform: none; }
.menu__link:hover, .menu__link:focus-visible { color: var(--gold-warm); }

.menu__foot {
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-dark);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

/* ── 08 · HERO ─────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-top: calc(var(--header-h) + var(--s-7));
    padding-bottom: clamp(3rem, 2rem + 5vw, 7rem);
    overflow: hidden;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Parallax sutil: lo mueve site.js con transform, no con background-attachment
       (que rompe en iOS y fuerza repaints costosos).                         */
    will-change: transform;
}

/* Velo doble: vertical para legibilidad del texto, radial para foco. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(10,11,12,.78) 0%,
            rgba(10,11,12,.44) 32%,
            rgba(10,11,12,.72) 74%,
            var(--ink-900) 100%),
        radial-gradient(120% 85% at 22% 78%, rgba(10,11,12,.62) 0%, transparent 62%);
}

.hero__inner { width: 100%; }

.hero__title { margin-bottom: var(--s-5); max-width: 15ch; }

.hero__lead { margin-bottom: var(--s-6); max-width: 42ch; color: var(--ivory-mute); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Indicador de scroll: línea que recorre y se reinicia. */
.hero__scroll {
    position: absolute;
    left: var(--gutter);
    bottom: var(--s-5);
    display: none;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--t-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ivory-dim);
}
@media (min-width: 64rem) { .hero__scroll { display: flex; } }
.hero__scroll-line {
    display: block;
    width: 3.5rem;
    height: 1px;
    background-color: var(--line-dark-2);
    position: relative;
    overflow: hidden;
}
.hero__scroll-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--gold);
    transform: translateX(-100%);
    animation: scrollHint 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollHint {
    0%   { transform: translateX(-100%); }
    55%  { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

/* ── 09 · BLOQUES EDITORIALES ──────────────────────────────────────────── */

/* Cita a gran tamaño: el recurso de "storytelling" principal. */
.statement {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1rem + 3.4vw, 3.4rem);
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: var(--ls-tight);
    max-width: 20ch;
    text-wrap: balance;
}

/* Lista de promesas de la filosofía: cada línea entra por separado. */
.creed { display: flex; flex-direction: column; }
.creed__item {
    padding-block: clamp(1rem, .6rem + 1.1vw, 1.5rem);
    border-top: 1px solid var(--line-light);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, .9rem + 1.5vw, 1.9rem);
    font-weight: 400;
    line-height: 1.35;
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
}
.creed__item:last-child { border-bottom: 1px solid var(--line-light); }
.creed__num {
    font-family: var(--font-sans);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--gold-deep);
    flex: none;
    width: 2.5rem;
}

/* Valores: pares título/frase en dos columnas asimétricas, sin iconos. */
.values { display: grid; gap: 0; }
.value {
    display: grid;
    gap: var(--s-3);
    padding-block: clamp(1.75rem, 1rem + 2.4vw, 3rem);
    border-top: 1px solid var(--line-dark);
    align-items: start;
}
.value:last-child { border-bottom: 1px solid var(--line-dark); }
@media (min-width: 52rem) {
    .value { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); }
}
.value__label {
    font-family: var(--font-sans);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gold);
}
.value__text {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1rem + 1.5vw, 2.05rem);
    font-weight: 400;
    line-height: 1.32;
    letter-spacing: var(--ls-tight);
    color: var(--ivory);
    text-wrap: pretty;
}

/* Retrato con texto al lado, sticky en desktop. */
.split {
    display: grid;
    gap: var(--s-7);
    align-items: start;
}
@media (min-width: 64rem) {
    .split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(3rem, 1rem + 5vw, 7rem); }
    .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 2.5rem); }
    .split--reverse > :first-child { order: 2; }
}

.figure { position: relative; overflow: hidden; background-color: var(--ink-800); }
.figure img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform var(--d-slow) var(--ease-out);
}
.figure--wide img { aspect-ratio: 16 / 10; }
.figure__caption {
    margin-top: var(--s-3);
    font-size: var(--t-micro);
    color: var(--ivory-dim);
    letter-spacing: .02em;
}

/* ── 10 · ÁREAS DE PRÁCTICA ────────────────────────────────────────────── */
/* Filas, no tarjetas. El brief prohíbe explícitamente "cajas aburridas".
   Una lista de filas con numeración y línea fina se lee como un índice
   editorial y aguanta cualquier número de áreas desde la base de datos.     */

.areas { border-top: 1px solid var(--line-dark); }

.area {
    display: block;
    position: relative;
    border-bottom: 1px solid var(--line-dark);
    padding-block: clamp(1.5rem, 1rem + 2vw, 2.6rem);
    transition: padding-inline var(--d-base) var(--ease-out);
}

.area__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
}
@media (min-width: 60rem) {
    .area__row { grid-template-columns: 4rem minmax(0,5fr) minmax(0,5fr) auto; gap: var(--s-6); }
}

.area__num {
    font-family: var(--font-sans);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--ivory-dim);
    transition: color var(--d-base) var(--ease-out);
}

.area__name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1rem + 1.7vw, 2.3rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: var(--ls-tight);
    transition: color var(--d-base) var(--ease-out);
}

.area__summary {
    display: none;
    font-size: var(--t-small);
    color: var(--ivory-dim);
    line-height: var(--lh-normal);
    max-width: 44ch;
}
@media (min-width: 60rem) { .area__summary { display: block; } }

.area__arrow {
    font-size: 1.1rem;
    color: var(--ivory-dim);
    transition: transform var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}

/* Barrido de fondo en oro al pasar por encima: sustituye a la sombra. */
.area::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline: calc(var(--gutter) * -1);
    background-color: var(--ink-800);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--d-base) var(--ease-out);
    z-index: -1;
}
.area:hover::before, .area:focus-visible::before { transform: scaleX(1); }
.area:hover .area__name, .area:focus-visible .area__name { color: var(--gold-warm); }
.area:hover .area__num,  .area:focus-visible .area__num  { color: var(--gold); }
.area:hover .area__arrow { transform: translateX(6px); color: var(--gold); }
@media (min-width: 60rem) {
    .area:hover, .area:focus-visible { padding-inline: var(--s-5); }
}

/* ── 11 · ABOGADOS ─────────────────────────────────────────────────────── */

.people {
    display: grid;
    gap: var(--grid-gap) clamp(1rem, .5rem + 1.5vw, 2rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.person { display: block; position: relative; }

.person__media {
    position: relative;
    overflow: hidden;
    background-color: var(--ink-800);
    margin-bottom: var(--s-4);
}
.person__media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: grayscale(1) contrast(1.04);
    transition: transform var(--d-slow) var(--ease-out), filter var(--d-slow) var(--ease-out);
}
/* El color aparece solo al interactuar: mantiene la página sobria y hace
   que el retrato "responda" sin animaciones llamativas.                     */
.person:hover .person__media img,
.person:focus-visible .person__media img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.035);
}

.person__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(10,11,12,.55) 100%);
    opacity: 0;
    transition: opacity var(--d-base) var(--ease-out);
}
.person:hover .person__media::after { opacity: 1; }

.person__name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    transition: color var(--d-fast) var(--ease-out);
}
.person:hover .person__name { color: var(--gold-warm); }

.person__role {
    font-size: var(--t-micro);
    letter-spacing: .06em;
    color: var(--ivory-dim);
    margin-top: 0.3rem;
}

.person__spec {
    font-size: var(--t-micro);
    color: var(--gold);
    margin-top: 0.45rem;
    letter-spacing: .02em;
}

/* ── 12 · CASOS ────────────────────────────────────────────────────────── */

.cases { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 60rem) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La primera pieza ocupa el ancho completo: rompe la retícula a propósito. */
@media (min-width: 60rem) { .case--lead { grid-column: 1 / -1; } }

.case { display: block; position: relative; }
.case__media { overflow: hidden; background-color: var(--ink-800); margin-bottom: var(--s-4); }
.case__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--d-slow) var(--ease-out);
}
.case--lead .case__media img { aspect-ratio: 21 / 9; }
.case:hover .case__media img { transform: scale(1.03); }

.case__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--t-micro);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    margin-bottom: var(--s-3);
}
.case__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }
.case__meta .tag-area { color: var(--gold); }

.case__title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1rem + 1.2vw, 1.95rem);
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: var(--ls-tight);
    max-width: 26ch;
    transition: color var(--d-fast) var(--ease-out);
}
.case--lead .case__title { max-width: 20ch; font-size: clamp(1.6rem, 1rem + 2.2vw, 2.8rem); }
.case:hover .case__title { color: var(--gold-warm); }

.case__outcome {
    margin-top: var(--s-3);
    font-size: var(--t-small);
    color: var(--ivory-mute);
    max-width: 46ch;
}

/* ── 13 · MÉTRICAS ─────────────────────────────────────────────────────── */

.metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line-light);
}
@media (min-width: 60rem) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.metric {
    padding: clamp(1.75rem, 1rem + 2.4vw, 3rem) var(--s-4);
    border-bottom: 1px solid var(--line-light);
    border-right: 1px solid var(--line-light);
}
.metric:nth-child(2n) { border-right: 0; }
@media (min-width: 60rem) {
    .metric:nth-child(2n) { border-right: 1px solid var(--line-light); }
    .metric:nth-child(4n) { border-right: 0; }
}

.metric__value {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--ls-display);
    color: var(--graphite);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 0.08em;
}
.metric__suffix { font-size: .48em; color: var(--gold-deep); }

.metric__label {
    margin-top: var(--s-3);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--graphite-dim);
    max-width: 18ch;
}

/* ── 14 · INSIGHTS ─────────────────────────────────────────────────────── */

.articles { display: grid; gap: clamp(1.75rem, 1rem + 2.4vw, 3rem); }
@media (min-width: 48rem) { .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .articles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.article { display: flex; flex-direction: column; height: 100%; }

.article__media { overflow: hidden; background-color: var(--ink-800); margin-bottom: var(--s-4); }
.article__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--d-slow) var(--ease-out);
}
.article:hover .article__media img { transform: scale(1.035); }

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    margin-bottom: var(--s-3);
}
.article__cat { color: var(--gold); }

.article__title {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: var(--ls-tight);
    text-wrap: pretty;
    transition: color var(--d-fast) var(--ease-out);
}
.article:hover .article__title { color: var(--gold-warm); }

.article__excerpt {
    margin-top: var(--s-3);
    font-size: var(--t-small);
    color: var(--ivory-mute);
    line-height: var(--lh-normal);
}

.article__foot {
    margin-top: auto;
    padding-top: var(--s-4);
    font-size: var(--t-micro);
    color: var(--ivory-dim);
}

/* ── 15 · INSTAGRAM ────────────────────────────────────────────────────── */
/* Rejilla editorial, no widget. Sin marcos, sin sombras, sin logotipo
   gigante: las imágenes se comportan igual que el resto de medios del sitio. */

.ig-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.5rem, .25rem + 1vw, 1rem);
}
@media (min-width: 48rem) { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .ig-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.ig-item {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--ink-800);
    aspect-ratio: 1;
}
.ig-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--d-slow) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.ig-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,11,12,.1) 0%, rgba(10,11,12,.78) 100%);
    opacity: 0;
    transition: opacity var(--d-base) var(--ease-out);
}
.ig-item:hover img, .ig-item:focus-visible img { transform: scale(1.05); }
.ig-item:hover::after, .ig-item:focus-visible::after { opacity: 1; }

.ig-item__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--s-3);
    z-index: 1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.ig-item:hover .ig-item__body, .ig-item:focus-visible .ig-item__body { opacity: 1; transform: none; }

.ig-item__date { font-size: var(--t-micro); color: var(--gold-warm); letter-spacing: .06em; }
.ig-item__cap {
    font-size: var(--t-micro);
    color: var(--ivory);
    line-height: 1.4;
    margin-top: .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ig-item__icon {
    position: absolute;
    top: var(--s-3); right: var(--s-3);
    z-index: 1;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
    color: var(--ivory);
}
.ig-item:hover .ig-item__icon, .ig-item:focus-visible .ig-item__icon { opacity: 1; transform: none; }

/* Estado de reserva cuando la API no responde. Debe verse intencional,
   no como un error.                                                         */
.ig-fallback {
    border: 1px solid var(--line-dark);
    padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--gutter);
    text-align: center;
}
.ig-fallback__handle {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    margin-block: var(--s-3) var(--s-5);
}

/* ── 16 · CTA ──────────────────────────────────────────────────────────── */

.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta__inner {
    display: grid;
    gap: var(--s-6);
    align-items: end;
}
@media (min-width: 60rem) {
    .cta__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
    .cta__aside { justify-self: end; text-align: right; }
}

/* ── 17 · PIE ──────────────────────────────────────────────────────────── */

.footer {
    background-color: var(--ink-850);
    border-top: 1px solid var(--line-dark);
    padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--s-6);
}

.footer__grid {
    display: grid;
    gap: var(--s-7) var(--grid-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

.footer__brand { grid-column: 1 / -1; }
@media (min-width: 72rem) { .footer__brand { grid-column: auto; } }

.footer__heading {
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--s-4);
}

.footer__list { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__list a {
    font-size: var(--t-small);
    color: var(--ivory-mute);
    transition: color var(--d-fast) var(--ease-out);
    display: inline-block;
}
.footer__list a:hover, .footer__list a:focus-visible { color: var(--gold-warm); }

.footer__statement {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, .9rem + 1.1vw, 1.7rem);
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: var(--ls-tight);
    color: var(--ivory);
    max-width: 24ch;
    margin-top: var(--s-5);
}

.socials { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--line-dark);
    color: var(--ivory-mute);
    transition: color var(--d-fast) var(--ease-out),
                border-color var(--d-fast) var(--ease-out),
                background-color var(--d-fast) var(--ease-out);
}
.social:hover, .social:focus-visible {
    color: var(--ink-900);
    background-color: var(--gold);
    border-color: var(--gold);
}

.footer__bottom {
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-dark);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    align-items: center;
    justify-content: space-between;
    font-size: var(--t-micro);
    color: var(--ivory-dim);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer__legal a { transition: color var(--d-fast) var(--ease-out); }
.footer__legal a:hover { color: var(--ivory); }

/* Aviso obligatorio: el contenido del sitio no es asesoría legal. */
.footer__disclaimer {
    margin-top: var(--s-5);
    font-size: var(--t-micro);
    line-height: 1.6;
    color: var(--ivory-dim);
    max-width: 70ch;
}

/* ── 18 · FORMULARIOS ──────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field__label {
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ivory-dim);
}
.field__label .req { color: var(--gold); }

.input, .textarea, .select {
    width: 100%;
    padding: 0.85rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-dark-2);
    color: var(--ivory);
    font-size: var(--t-body);
    border-radius: 0;
    transition: border-color var(--d-fast) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-bottom-color: var(--gold);
}
.textarea { resize: vertical; min-height: 8rem; }
.select { appearance: none; cursor: pointer; }
.select option { background-color: var(--ink-800); color: var(--ivory); }

.input::placeholder, .textarea::placeholder { color: var(--ivory-dim); opacity: .7; }

.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
    border-bottom-color: var(--danger);
}

.field__error {
    font-size: var(--t-micro);
    color: var(--danger);
}

.checkbox { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.checkbox input {
    appearance: none;
    width: 1.05rem; height: 1.05rem;
    border: 1px solid var(--line-dark-2);
    flex: none;
    margin-top: .28rem;
    position: relative;
    cursor: pointer;
    transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.checkbox input:checked { background-color: var(--gold); border-color: var(--gold); }
.checkbox input:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 9px;
    border: solid var(--ink-900);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.checkbox span { font-size: var(--t-small); color: var(--ivory-mute); line-height: 1.5; }

.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grid .span-2 { grid-column: 1 / -1; }

/* Trampa anti-spam: invisible para personas, tentadora para bots.
   Se oculta sin display:none para que los bots la "vean" en el DOM.         */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.alert {
    padding: var(--s-4) var(--s-5);
    border-left: 2px solid var(--gold);
    background-color: var(--ink-800);
    font-size: var(--t-small);
    color: var(--ivory-mute);
}
.alert--error   { border-left-color: var(--danger); }
.alert--success { border-left-color: var(--success); }

/* ── 19 · ACCESIBILIDAD Y MOVIMIENTO ───────────────────────────────────── */

/* Foco visible y consistente en todo el sitio. Nunca se elimina el outline
   sin sustituirlo (WCAG 2.4.7).                                             */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 1px;
}
.section--paper :focus-visible { outline-color: var(--navy); }

/* Salto al contenido para usuarios de teclado y lector de pantalla. */
.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -6rem;
    z-index: calc(var(--z-menu) + 10);
    padding: 0.75rem 1.25rem;
    background-color: var(--gold);
    color: var(--ink-900);
    font-size: var(--t-small);
    font-weight: 600;
    transition: top var(--d-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Anulación total del movimiento. Se declara al final para ganar en cascada
   a cualquier regla anterior.                                               */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* El contenido debe quedar visible, no atrapado en su estado inicial. */
    [data-reveal],
    [data-reveal-group] > *,
    .reveal-lines .line > span,
    .menu__link {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__media img { transform: none !important; }
    .hero__scroll-line::after { animation: none; transform: translateX(0); }
}

/* Modo de alto contraste del sistema */
@media (prefers-contrast: more) {
    :root {
        --ivory-mute: #DAD7D0;
        --ivory-dim:  #B9B5AD;
        --line-dark:  rgba(237, 234, 227, 0.3);
        --line-light: rgba(20, 23, 26, 0.35);
    }
}

/* Impresión: el sitio debe poder imprimirse legible (perfiles, artículos). */
@media print {
    .header, .menu, .hero__scroll, .socials, .btn, .ig-grid { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ── 20 · UTILIDADES ───────────────────────────────────────────────────── */
/* Existen para NO necesitar atributos style="" en las vistas.
   Sin ellas haría falta relajar la CSP con style-src 'unsafe-inline',
   que es exactamente lo que este proyecto quiere evitar.                    */

.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-6 { margin-bottom: var(--s-6); }

.stack-h {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
}

.is-italic { font-style: italic; }
.not-italic { font-style: normal; }
.text-micro { font-size: var(--t-micro); }

.center-screen {
    min-height: 70svh;
    display: flex;
    align-items: center;
}

/* Marcador de imagen pendiente. El aspect-ratio se pasa por variable CSS
   desde una clase generada, no por atributo style.                          */
.img-placeholder {
    background-color: var(--ink-800);
    aspect-ratio: var(--ph-ratio, 3 / 2);
    width: 100%;
}
.ratio-4-5  { --ph-ratio: 4 / 5;   aspect-ratio: 4 / 5; }
.ratio-3-4  { --ph-ratio: 3 / 4;   aspect-ratio: 3 / 4; }
.ratio-3-2  { --ph-ratio: 3 / 2;   aspect-ratio: 3 / 2; }
.ratio-16-10{ --ph-ratio: 16 / 10; aspect-ratio: 16 / 10; }
.ratio-21-9 { --ph-ratio: 21 / 9;  aspect-ratio: 21 / 9; }
.ratio-1-1  { --ph-ratio: 1 / 1;   aspect-ratio: 1 / 1; }

/* El selector de idioma está oculto en la cabecera móvil, pero SÍ debe verse
   dentro del menú a pantalla completa. */
.lang--visible { display: flex; }

/* ── Aviso de página sin traducir ─────────────────────────────────────────
   Solo aparece bajo /en cuando el contenido todavía está en español.

   Va en PALETA OSCURA, no en un tono claro de aviso. Motivo concreto: el
   encabezado es `position: fixed` y transparente hasta que se hace scroll,
   contando con tener debajo el hero oscuro. El aviso se inserta justo en esa
   franja, así que un fondo claro dejaba el logotipo en marfil sobre claro y
   el contraste caía por debajo de AA — axe lo detectó en las dos únicas
   páginas donde el aviso aparece. Reservar espacio con padding no bastaba:
   el fondo del aviso seguía pintándose detrás del encabezado.

   Además encaja con el lenguaje del sitio: la franja superior es oscura en
   todas las páginas.

   El enlace va SUBRAYADO: distinguirlo solo por color deja fuera a quien no
   percibe esa diferencia (WCAG 1.4.1, «El uso del color»). */
.lang-notice {
    padding: calc(var(--header-h) + .9rem) 0 1rem;
    background-color: var(--ink-850);
    border-bottom: 1px solid var(--line-dark);
}
.lang-notice__title {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-warm);
}
.lang-notice__text {
    margin: .35rem 0 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ivory-mute);
}
.lang-notice__text a {
    color: var(--ivory);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: .18em;
}
.lang-notice__text a:hover { text-decoration-thickness: 2px; }

/* El aviso ya ocupa la franja del encabezado, así que el hero que va debajo
   no debe volver a reservarla. */
.lang-notice + main .page-hero { padding-top: 2rem; }

/* ── Filete dorado ────────────────────────────────────────────────────────
   Marco de hilo de oro para bloques de contenido, tomado de Procounsel.

   Se implementa como una CLASE APARTE y no reescribiendo `.area`, `.case` o
   `.article`: esas son filas de lista con separador inferior, y convertirlas
   en cajas cambiaría la composición editorial que el brief pedía conservar.
   Así el filete se aplica donde suma —un bloque de declaración, una ficha
   destacada— sin arrastrar a todo lo demás.

   El marco es de 1px y NO transporta información: si el navegador no lo
   pinta, no se pierde nada. Por eso puede ser sutil sin problema de
   contraste; la regla de 3:1 aplica a los elementos de interfaz que
   comunican estado, no a la ornamentación.                                  */
.filet {
    position: relative;
    border: 1px solid var(--line-gold);
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

/* Escuadra maciza en la esquina superior izquierda: es el detalle que hace
   que el marco se lea como intencionado y no como un borde por defecto. */
.filet::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: clamp(1.75rem, 3vw, 3rem);
    height: clamp(1.75rem, 3vw, 3rem);
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
    pointer-events: none;
}

/* Sobre banda clara el hilo necesita algo más de cuerpo para no desaparecer. */
.section--paper .filet { border-color: var(--gold-soft); }

/* En pantallas estrechas el marco roba ancho al texto, que es lo único que
   de verdad importa. Se reduce el acolchado antes que sacrificar la medida
   de línea. */
@media (max-width: 40rem) {
    .filet { padding: 1.25rem; }
}