/* ========================================================
       TOKENS
    ======================================================== */
    :root {
      --orange:    #E87820;
      --orange-h:  #CC6510;
      --orange-50: #FDECD9;
      /* --ink es el negro de MARCA: se usa para texto y para el pie, que
         hace de cierre de la página. Los módulos de contenido con fondo
         oscuro NO lo usan desde el 21-sep-2026: iban en #0F0F0F y se leían
         como un negro plano y duro (Víctor), así que pasaron todos a --dark.
         Excepciones a propósito: pie, preencabezado, botón flotante y las
         barras de la hamburguesa, que son cromo del sitio y no módulos. */
      --ink:       #0F0F0F;
      --dark:      #1a1a1a;
      --text:      #444444;
      --text-2:    #6b6b6b;
      --white:     #ffffff;
      --cream:     #FAF7F2;
      --line:      rgba(0,0,0,0.08);
      --line-d:    rgba(255,255,255,0.1);
      --serif:     'Newsreader', Georgia, 'Times New Roman', serif;
      --sans:      'Montserrat', system-ui, sans-serif;
      --mono:      'Montserrat', system-ui, sans-serif;
      --ease:      cubic-bezier(.2,.7,.2,1);
      --ease-out:  cubic-bezier(.16,1,.3,1);
    }

    /* ========================================================
       RESET
    ======================================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-family: var(--sans); font-size: 16px; color: var(--text); background: var(--cream); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
    h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 500; }
    body { overflow-x: hidden; }
    img  { max-width: 100%; display: block; }
    a    { text-decoration: none; color: inherit; }
    button { border: none; background: none; font: inherit; cursor: pointer; }

    /* ========================================================
       SCROLL REVEAL
    ======================================================== */
    .rv { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
    .rv.in { opacity: 1; transform: none; }
    .d1 { transition-delay: .1s; }
    .d2 { transition-delay: .2s; }
    .d3 { transition-delay: .3s; }
    .d4 { transition-delay: .4s; }

    /* ========================================================
       UTILS
    ======================================================== */
    .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }

    /* ========================================================
       BUTTONS
    ======================================================== */
    .btn-p {
      background: var(--orange); color: #fff; padding: 16px 26px; border-radius: 2px;
      font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
      transition: background .25s, transform .25s, box-shadow .25s;
    }
    .btn-p:hover { background: var(--orange-h); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(232,120,32,.28); }
    .btn-p svg { transition: transform .3s; }
    .btn-p:hover svg { transform: translateX(4px); }

    .btn-g {
      color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--ink);
      padding-bottom: 2px; cursor: pointer; transition: color .2s, border-color .2s;
    }
    .btn-g:hover { color: var(--orange); border-color: var(--orange); }
    .btn-w { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.4); }
    .btn-w:hover { color: #fff; border-color: #fff; }

    .btn-outline {
      border: 1.5px solid var(--orange); color: var(--orange); padding: 14px 24px; border-radius: 2px;
      font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
      transition: background .2s, color .2s;
    }
    .btn-outline:hover { background: var(--orange); color: #fff; }

    /* ========================================================
       FOUNDER QUOTE — editorial pull-quote (orange)
    ======================================================== */
    .fq { background: var(--orange); color: #fff; padding: 110px 40px; position: relative; overflow: hidden; }
    .fq__i { max-width: 1440px; margin: 0 auto; position: relative; }
    .fq__top { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 80px; align-items: stretch; }
    .fq__photo { position: relative; overflow: hidden; background: rgba(0,0,0,.2); border-radius: 2px; min-height: 460px; }
    .fq__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.15) contrast(1.02); }
    .fq__body { position: relative; padding-left: 4px; display: flex; flex-direction: column; justify-content: center; }
    .fq__mark { font-family: var(--serif); font-size: 240px; line-height: 0.7; color: rgba(255,255,255,.16); font-style: italic; position: absolute; left: -32px; top: -42px; user-select: none; pointer-events: none; }
    .fq__q { font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 1.18; letter-spacing: -.018em; color: #fff; margin-bottom: 42px; text-wrap: pretty; position: relative; }
    .fq__q em { color: #fff; font-style: italic; font-weight: 500; }
    .fq__sign { display: flex; align-items: center; gap: 18px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.25); }
    .fq__sign-name { font-family: var(--serif); font-size: 22px; font-weight: 400; color: #fff; letter-spacing: -.01em; font-style: italic; line-height: 1.1; }
    .fq__sign-role { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 5px; }
    .fq__sign-divider { width: 1px; height: 36px; background: rgba(255,255,255,.25); }
    .fq__sign-meta { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); line-height: 1.6; }
    .fq__sign-meta a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; }
    .fq__sign-meta a:hover { border-color: #fff; }

    /* testimonials row */
    .fq__voices { margin-top: 72px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.22); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
    .fq__voice { padding: 8px 28px 8px 0; border-right: 1px solid rgba(255,255,255,.18); background: transparent; border-radius: 0; }
    .fq__voice:first-child { padding-left: 0; }
    .fq__voice:last-child { border-right: 0; padding-right: 0; }
    .fq__voice + .fq__voice { padding-left: 28px; }
    .fq__voice:hover { border-color: rgba(255,255,255,.18); background: transparent; }
    .fq__voice-mark { font-family: var(--serif); font-size: 28px; font-style: italic; color: rgba(255,255,255,.45); line-height: 0; margin-bottom: 16px; display: inline-block; position: static; }
    .fq__voice-q { font-family: var(--serif); font-size: 16px; font-weight: 400; font-style: italic; line-height: 1.45; color: #fff; margin-bottom: 16px; }
    .fq__voice-by { font-family: var(--sans); font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); line-height: 1.7; padding-top: 0; border-top: 0; }
    .fq__voice-by strong { font-weight: 600; color: #fff; font-family: var(--sans); display: inline; margin: 0; letter-spacing: .16em; }

    /* ========================================================
       PREHEADER
    ======================================================== */
    /* z-index por encima del header sticky (100): sin esto, el desplegable de
       idiomas se abre DEBAJO del botón naranja de contacto. */
    .ph { position: relative; z-index: 101; background: var(--ink); color: rgba(255,255,255,.65); padding: 9px 40px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; }
    .ph a { color: rgba(255,255,255,.65); transition: color .2s; }
    .ph a:hover { color: var(--orange); }
    .ph__award { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s; }
    .ph__award:hover { color: var(--orange); }
    .ph__award svg { width: 13px; height: 13px; color: var(--orange); flex-shrink: 0; transition: transform .25s var(--ease); }
    .ph__award:hover svg { transform: translateX(3px); }
    .ph__langs { display: flex; gap: 12px; }
    .ph__langs a.on { color: var(--orange); }

    /* Selector de idioma del preheader: contorno blanco, bandera y nombre del
       idioma actual. El desplegable se abre con el ratón y con clic, y lleva el
       puente de 8px sobre el hueco: sin él se cierra al bajar a la lista, que
       es el fallo clásico de estos menús. */
    .lsw { position: relative; }
    /* Tipografía del menú principal (Montserrat 13/500, sin versalitas ni
       tracking), no la del preheader: el selector se lee como parte del nav. */
    .lsw__btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #fff; border-radius: 2px; background: none; color: #fff; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: normal; line-height: 1.2; cursor: pointer; transition: background .25s var(--ease); }
    /* En hover se queda blanco: nada de naranja aquí. */
    .lsw__btn:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
    .lsw__flag { display: block; width: 18px; height: 13px; border-radius: 1px; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
    .lsw__flag svg { display: block; width: 100%; height: 100%; }
    .lsw__caret { width: 11px; height: 11px; opacity: .75; transition: transform .25s var(--ease); }
    .lsw[data-open="true"] .lsw__caret { transform: rotate(180deg); }
    .lsw__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; min-width: 100%; margin: 0; padding: 4px; list-style: none; background: var(--ink); border: 1px solid rgba(255,255,255,.35); border-radius: 2px; box-shadow: 0 16px 38px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
    .lsw:hover .lsw__menu, .lsw[data-open="true"] .lsw__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .lsw:hover::after { content: ''; position: absolute; top: 100%; right: 0; width: 100%; height: 10px; }
    .lsw__menu a, .lsw__menu .lsw__off { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 1px; color: #fff; white-space: nowrap; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: normal; transition: background .2s var(--ease); }
    .lsw__menu a:hover { background: rgba(255,255,255,.14); color: #fff; }
    /* Idiomas todavía sin traducir: se enseñan pero no llevan a ninguna parte. */
    .lsw__menu .lsw__off { opacity: .5; cursor: not-allowed; }

    /* ========================================================
       HEADER
    ======================================================== */
    .hdr { position: sticky; top: 0; z-index: 100; background: rgba(250,247,242,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: box-shadow .3s; padding: 0 40px; }
    .hdr.sc { box-shadow: 0 4px 32px rgba(0,0,0,.08); }
    /* El header va a sangre y con la misma caja en TODAS las páginas: antes la
       portada lo sacaba a todo el ancho y las internas lo encajaban en 1440,
       y al navegar el menú cambiaba de sitio como si fueran dos webs. */
    .hdr__i { max-width: none; margin: 0 auto; height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .hdr__logo { display: flex; align-items: center; }
    .hdr__logo img { height: 48px; width: auto; display: block; }
    .hdr__brand { font-family: var(--serif); font-size: 21px; color: var(--ink); letter-spacing: -.02em; font-weight: 400; }
    .hdr__brand em { font-style: italic; color: var(--orange); }
    .hdr__sub { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); border-left: 1px solid var(--line); padding-left: 12px; }
    .hdr__nav { display: flex; gap: 30px; }
    .hdr__nav > .nav-item { position: relative; padding: 26px 0; }
    .hdr__nav .nav-trigger { font-size: 14px; font-weight: 500; color: var(--text); position: relative; padding: 4px 0; transition: color .2s; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
    .hdr__nav .nav-trigger::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--orange); transition: width .3s var(--ease); }
    .hdr__nav .nav-item:hover .nav-trigger,
    .hdr__nav .nav-item:focus-within .nav-trigger { color: var(--ink); }
    .hdr__nav .nav-item:hover .nav-trigger::after,
    .hdr__nav .nav-item:focus-within .nav-trigger::after { width: 100%; }
    /* Menú principal en mayúsculas, a petición de Víctor (28-sep-2026). Solo el
       primer nivel; los desplegables siguen en caja normal. La versalita pide
       un punto menos de cuerpo y algo de aire entre letras para no apelmazarse. */
    .hdr__nav .nav-trigger { text-transform: uppercase; font-size: 13px; letter-spacing: .06em; line-height: 1.25; }
    /* Con seis títulos largos en mayúsculas el menú no cabe en una línea: los
       títulos van a dos, y el logo no puede ser lo que ceda (a 1181px desaparecía). */
    .hdr__nav { gap: 24px; }
    .hdr__logo { flex-shrink: 0; }
    .nav-trigger__caret { width: 9px; height: 9px; transition: transform .25s var(--ease); opacity: .6; }
    .nav-item:hover .nav-trigger__caret,
    .nav-item:focus-within .nav-trigger__caret { transform: rotate(180deg); opacity: 1; color: var(--orange); }
    /* dropdown */
    .nav-dd {
      position: absolute; top: calc(100% - 4px); left: -18px; min-width: 240px;
      background: var(--white); border: 1px solid var(--line); border-radius: 2px;
      box-shadow: 0 16px 40px rgba(0,0,0,.10); padding: 8px;
      opacity: 0; visibility: hidden; transform: translateY(6px);
      transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
      z-index: 50;
    }
    .nav-item:hover .nav-dd,
    .nav-item:focus-within .nav-dd { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-dd::before {
      content: ''; position: absolute; top: 12px; left: 28px;
      width: 8px; height: 8px; background: var(--white);
      border-top: 1px solid var(--line); border-left: 1px solid var(--line);
      transform: rotate(45deg) translateY(-8px);
    }
    .nav-dd a {
      display: flex; align-items: center; gap: 10px; padding: 11px 14px;
      font-size: 13px; font-weight: 500; color: var(--text);
      border-radius: 2px; transition: background .15s, color .15s;
      position: static; white-space: nowrap;
    }
    .nav-dd a::before {
      content: ''; width: 4px; height: 4px; border-radius: 50%;
      background: var(--line); transition: background .15s, transform .15s;
      flex-shrink: 0;
    }
    .nav-dd a:hover { background: var(--cream); color: var(--ink); }
    .nav-dd a:hover::before { background: var(--orange); transform: scale(1.4); }
    .nav-dd a::after { display: none; }
    /* Desplegable en COLUMNAS (tercer nivel): una columna por grupo, con el
       grupo como cabecera y sus páginas debajo. Lo usa "Casos que atendemos",
       donde los tres perfiles llevan tres casos cada uno. */
    .nav-dd:has(.nav-col) { display: flex; gap: 4px; padding: 14px; left: -24px; }
    .nav-col { display: flex; flex-direction: column; min-width: 208px; }
    .nav-col + .nav-col { border-left: 1px solid var(--line); padding-left: 10px; margin-left: 6px; }
    .nav-col__t { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 2px; }
    .nav-col__t::before { display: none; }
    .nav-col__t:hover { background: transparent; color: var(--orange); }
    .hdr__r { display: flex; align-items: center; gap: 18px; }
    .hdr__phone { font-family: var(--mono); font-weight: 600; font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: .02em; }
    .btn-cta { background: var(--orange); color: #fff; padding: 11px 20px; border-radius: 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .2s; }
    .btn-cta:hover { background: var(--orange-h); transform: translateY(-1px); }

    /* ========================================================
       HERO
    ======================================================== */
    /* ========================================================
       HERO — full-bleed image with overlay text (home-2)
    ======================================================== */
    .hero { max-width: none; margin: 0; padding: 0; position: relative; background: var(--dark); overflow: hidden; border-bottom: 1px solid var(--line); }
    .hero__bg { position: absolute; inset: 0; z-index: 0; }
    .hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.12) contrast(1.05) saturate(.9); }
    .hero__bg::after {
      content: ''; position: absolute; inset: 0;
      background:
        linear-gradient(180deg, rgba(15,15,15,.16) 0%, rgba(15,15,15,.05) 35%, rgba(15,15,15,.26) 100%),
        linear-gradient(95deg, rgba(15,15,15,.26) 0%, rgba(15,15,15,.04) 55%, rgba(232,120,32,.06) 100%);
      pointer-events: none;
    }
    .hero__inner {
      position: relative; z-index: 1;
      max-width: 1440px;
      margin: 0 auto;
      padding: 140px 40px 160px;
      min-height: min(82vh, 760px);
      display: flex; align-items: center;
    }
    .hero__text { max-width: 720px; color: #fff; }
    .hero__eye { display: inline-block; margin-bottom: 28px; color: var(--orange); }
    .hero__h1 { font-family: var(--serif); font-size: 96px; font-weight: 500; line-height: .94; letter-spacing: -.03em; color: #fff; margin-bottom: 32px; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
    .hero__h1 em { font-style: italic; color: var(--orange); }
    .hero__sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 560px; margin-bottom: 44px; }
    .hero__ctas { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
    .hero__ctas .btn-g { color: #fff; border-color: rgba(255,255,255,.6); }
    .hero__ctas .btn-g:hover { color: var(--orange); border-color: var(--orange); }

    .wr { display: inline-block; position: relative; overflow-y: visible; vertical-align: bottom; min-width: 300px; height: 1.18em; }
    .wr span { position: absolute; left: 0; font-family: var(--serif); font-style: italic; color: var(--orange); font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(105%); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
    .wr span.wra { opacity: 1; transform: translateY(0); }
    .wr span.wrp { opacity: 0; transform: translateY(-105%); }

    /* Palabra que se alterna al final de la línea 1 del H1 de portada.
       El contenedor es inline y de ancho cero, y las palabras van en absoluto
       desde su posición estática: la baseline cuadra sola y el titular no
       cambia de ancho al entrar y salir. Funciona porque va al final de la
       línea y no tiene nada a la derecha que empujar. El recorrido es corto
       (.34em) a propósito: con el 105% del rotativo de tres líneas la palabra
       se cruzaría con el remate naranja de abajo. */
    .hrot { position: relative; display: inline; white-space: nowrap; }
    .hrot > span { position: absolute; left: 0; padding-left: .26em; white-space: nowrap; opacity: 0; transform: translateY(.34em); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
    /* La palabra la escribe el CSS, no el DOM: así el H1 se extrae como
       "Abogados con buen criterio." tanto en el fuente como una vez rodado el
       JS. El texto de un pseudo-elemento no cuenta como contenido del H1. */
    .hrot > span::before { content: attr(data-w); }
    .hrot > span.is-in { opacity: 1; transform: none; }
    .hrot > span.is-out { opacity: 0; transform: translateY(-.34em); }
    /* En móvil la palabra baja a su propia línea: a 40px no cabe detrás de
       "Abogados" y el titular pasa a tres líneas. Como el hueco ya está
       reservado, aquí se arranca con la primera palabra puesta (.is-first) en
       vez de con el hueco vacío, que se vería como una línea en blanco. El JS
       le quita .is-first al empezar a girar. */
    @media (max-width: 767px) {
      .hero__h1--faro br { display: none; }
      .hrot { display: block; height: .98em; }
      /* Sin palabras (las pinta el JS desde data-words) no se reserva la línea,
         o quedaría un hueco en blanco bajo el titular. */
      .hrot:empty { display: none; }
      .hrot > span { padding-left: 0; }
      .hrot > span.is-first { opacity: 1; transform: none; }
    }

    /* Hero media legacy block removed */

    /* ========================================================
       METRICS — dark, compact (home-2)
    ======================================================== */
    .metrics { border: 0; padding: 28px 40px; background: var(--dark); }
    .metrics__i { max-width: 1440px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; }
    .metric { padding: 0 56px; border-right: 1px solid rgba(255,255,255,.22); display: flex; align-items: baseline; gap: 14px; }
    .metric:first-child { padding-left: 0; }
    .metric:last-child  { border-right: none; padding-right: 0; }
    .metric__n { font-family: var(--serif); font-size: 44px; font-weight: 500; color: #fff; line-height: 1; letter-spacing: -.025em; margin: 0; }
    .metric__n .sf { color: #fff; font-size: .75em; vertical-align: super; line-height: 1; margin-left: 4px; font-weight: 600; }
    .metric__l { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
    .metrics__cta { max-width: 1440px; margin: 0 auto; padding: 36px 0 0; text-align: center; }

    /* ========================================================
       SERVICES — Card grid 3×2
    ======================================================== */
    .svcs { padding: 120px 40px; background: var(--white); border-top: 1px solid var(--line); }
    .svcs__inner { max-width: 1440px; margin: 0 auto; }
    .svcs__head { margin-bottom: 64px; }
    .svcs__meta { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); padding-top: 6px; line-height: 1.8; }
    .svcs__title { font-family: var(--serif); font-size: 48px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
    .svcs__title em { color: var(--orange); font-style: italic; }
    .svcs__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
    .scard {
      background: var(--cream); padding: 0; display: flex; flex-direction: column;
      position: relative; overflow: hidden; text-decoration: none; color: inherit; cursor: pointer;
      transition: transform .3s var(--ease), box-shadow .3s;
      border-radius: 2px;
    }
    .scard:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.10); }
    .scard__media {
      position: relative; aspect-ratio: 4/3; overflow: hidden;
      background: var(--dark); display: grid; place-items: center;
    }
    .scard__media::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 20% 25%, rgba(232,120,32,.18), transparent 55%),
        radial-gradient(circle at 80% 75%, rgba(255,255,255,.06), transparent 60%);
    }
    .scard__media::after {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .scard__media-mark {
      position: relative; z-index: 1;
      font-family: var(--serif); font-style: italic; font-weight: 500;
      font-size: 72px; color: rgba(255,255,255,.18); line-height: 1;
      
      transition: color .3s, transform .6s var(--ease-out);
    }
    .scard:hover .scard__media-mark { color: rgba(232,120,32,.55); transform: scale(1.06); }
    .scard__media-tag {
      position: absolute; left: 14px; top: 14px; z-index: 2;
      font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
    /* photo variant — hide placeholder ornaments */
    .scard__media--photo::before,
    .scard__media--photo::after { display: none; }
    .scard__media--photo img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform .8s var(--ease-out);
    }
    .scard:hover .scard__media--photo img { transform: scale(1.04); }
    /* per-card accent tones */
    .scard--a .scard__media { background: #1a1a1a; }
    .scard--b .scard__media { background: #2a221b; }
    .scard--c .scard__media { background: #1e2222; }
    .scard--d .scard__media { background: #221a1a; }
    .scard__body { padding: 26px 24px 30px; display: flex; flex-direction: column; flex: 1; }
    .scard__title { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; margin-bottom: 12px; }
    .scard__desc { font-size: 14px; color: var(--text-2); line-height: 1.65; flex: 1; margin-bottom: 24px; }
    .scard__cta { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 8px; transition: gap .3s; margin-top: auto; }
    .scard:hover .scard__cta { gap: 12px; }
    .svcs__bottom { text-align: center; margin-top: 52px; display: flex; gap: 36px; justify-content: center; align-items: center; flex-wrap: wrap; }

    /* ========================================================
       MARQUEE
    ======================================================== */
    .mq { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; overflow: hidden; background: var(--cream); }
    .mq__track { display: flex; gap: 72px; animation: marquee 34s linear infinite; white-space: nowrap; }
    .mq__item { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; font-style: italic; opacity: .4; flex-shrink: 0; transition: opacity .3s; }
    .mq__item::after { content: '\00B7'; margin-left: 72px; color: var(--orange); font-style: normal; }
    .mq__item:hover { opacity: .8; }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ========================================================
       OTRAS ÁREAS (más allá de lo fiscal)
       Bloque secundario tras las 6 áreas: fondo bone, tarjetas
       pequeñas, sin credenciales — se lee "esto también lo hacemos".
    ======================================================== */
    .oareas { padding: 104px 40px; background: #ECE8DF; }
    .oareas__i { max-width: 1440px; margin: 0 auto; }
    /* Cabecera a 2 columnas iguales con el gap de la rejilla: la entradilla
       arranca alineada con la 3.ª tarjeta */
    .oareas__head { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; margin-bottom: 52px; }
    .oareas__title { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin-top: 16px; }
    .oareas__title em { color: var(--orange); font-style: italic; }
    .oareas__intro { font-size: 16px; line-height: 1.7; color: var(--text); max-width: 52ch; }
    .oareas__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
    /* Las tarjetas son enunciado, no enlaces: las cuatro materias viven en una
       sola página de área, así que el bloque cierra con un CTA único. Sin
       hover de elevación, que insinuaba que eran clicables. */
    .oacard { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 30px 26px; display: flex; flex-direction: column; }
    .oacard__t { font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
    .oacard__d { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 10px 0 0; flex: 1; }
    .oareas__bottom { display: flex; justify-content: center; margin-top: 40px; }
    @media (max-width: 1080px) {
      .oareas__grid { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width: 900px) {
      .oareas { padding: 72px 24px; }
      .oareas__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
      .oareas__title { font-size: 30px; }
    }
    @media (max-width: 640px) {
      .oareas__grid { grid-template-columns: 1fr; }
    }

    /* ========================================================
       NICHE SEGMENTATION
    ======================================================== */
    .nicho { padding: 120px 40px; background: var(--dark); }
    .nicho__i { max-width: 1440px; margin: 0 auto; }
    .nicho__h { display: flex; justify-content: center; margin-bottom: 56px; }
    .nicho__h > div { text-align: center; }
    .nicho__h .eyebrow { margin-bottom: 14px; }
    /* Cuerpo por debajo del de las áreas (48px): esta sección es un atajo por
       perfil, no una segunda taxonomía, y antes con 52px le ganaba la jerarquía. */
    .nicho__ht { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-align: center; }
    .nicho__ht em { color: var(--orange); font-style: italic; }
    .nicho__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }

    .ncard { background: var(--dark); padding: 48px 40px; cursor: pointer; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: background .4s var(--ease-out); text-decoration: none; color: inherit; }
    .ncard::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
    .ncard:hover { background: #232323; }
    .ncard:hover::after { transform: scaleX(1); }
    .ncard__n { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 32px; }
    .ncard__t { font-family: var(--serif); font-size: 26px; font-weight: 500; color: #fff; letter-spacing: -.02em; margin-bottom: 14px; line-height: 1.1; }
    .ncard__d { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.65; margin-bottom: 28px; flex: 1; }
    .ncard__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
    .ncard__tag { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 2px; color: rgba(255,255,255,.55); }
    .ncard__cta { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 8px; transition: gap .3s; }
    .ncard:hover .ncard__cta { gap: 14px; }
    .nicho__bottom { text-align: center; margin-top: 52px; }

    /* ========================================================
       TESTIMONIAL
    ======================================================== */
    .testi { background: var(--orange); padding: 130px 40px; position: relative; overflow: hidden; }
    .testi__bg { position: absolute; left: -16px; top: -100px; font-family: var(--serif); font-size: 520px; color: rgba(255,255,255,.09); line-height: 1; font-weight: 500; pointer-events: none; font-style: italic; user-select: none; }
    .testi__i { max-width: 1440px; margin: 0 auto; position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center; }
    .testi__photo { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; background: rgba(0,0,0,.2); box-shadow: 0 30px 60px rgba(0,0,0,.18); }
    .testi__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .testi__photo-tag {
      position: absolute; left: 20px; top: 20px;
      background: var(--dark); color: #fff;
      padding: 8px 12px; border-radius: 2px;
      font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .testi__photo-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
    .testi__meta { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .72; margin-bottom: 28px; color: #fff; }
    .testi__q { font-family: var(--serif); font-size: 52px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: #fff; margin-bottom: 52px; }
    .testi__q em { font-style: italic; }
    .testi__auth { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
    .testi__av { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-family: var(--serif); font-size: 22px; font-style: italic; color: #fff; }
    .testi__name { font-family: var(--serif); font-size: 20px; font-style: italic; color: #fff; }
    .testi__role { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 3px; }
    .testi__cta { display: inline-flex; gap: 14px; align-items: center; }
    .btn-p-inv { background: #fff; color: var(--orange); padding: 16px 26px; border-radius: 2px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: background .25s, transform .25s; }
    .btn-p-inv:hover { background: rgba(255,255,255,.9); transform: translateY(-2px); }
    .btn-ghost-inv { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; border-bottom: 1.5px solid rgba(255,255,255,.5); padding-bottom: 2px; cursor: pointer; transition: opacity .2s; }
    .btn-ghost-inv:hover { opacity: .75; }

    /* ========================================================
       ABOUT + PROCESS
    ======================================================== */
    .about { padding: 120px 40px; max-width: 1440px; margin: 0 auto; }
    .about__top { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
    .about__col { display: flex; flex-direction: column; }
    .about__col > .about__memberships { margin-top: auto; }
    /* Columna de imagen: dos fotos apiladas. Con una sola, tan alta como la
       columna de texto, el recorte sale casi vertical y se pierde el equipo;
       partida en dos, cada foto queda horizontal. --single = bloques con foto
       elegida a mano que siguen a una imagen.

       La galería va FUERA DEL FLUJO (absolute) a propósito. Mientras estuvo
       dentro, la altura de la fila la acababa marcando ella misma: las imágenes
       aportaban su alto natural y con una foto vertical (1200x1500) eso daba
       825 px, con la columna de imagen disparada respecto a la de texto. Ni
       `height: 100%` ni `flex: 1 1 auto` lo arreglan, porque la base sigue
       siendo el contenido. Sacándola del flujo, la fila la define solo la
       columna de texto y las dos filas `1fr` se reparten esa altura: las fotos
       salen horizontales sea cual sea la proporción del original. */
    .about__col--media { position: relative; min-height: 440px; }
    .about__gallery { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
    .about__gallery--single { grid-template-rows: 1fr; }
    .about__photo { width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: 2px; background: var(--dark); }
    .about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .about__title { font-family: var(--serif); font-size: 52px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); margin-bottom: 28px; }
    .about__title em { color: var(--orange); font-style: italic; }
    .about__title, .about__p { max-width: 560px; }
    /* Título del módulo de pasos: siempre en una línea (no cae a 2ª línea) */
    .about__title--steps { max-width: none; white-space: nowrap; }
    .about__p { font-size: 17px; line-height: 1.7; color: var(--text); margin-bottom: 24px; max-width: 100%; }
    .about__p em { color: var(--orange); font-style: italic; }
    .about__p strong { color: var(--ink); font-weight: 600; }
    .about__p + .about__p { margin-top: 8px; }
    .about__ul { list-style: none; display: grid; gap: 14px; margin-top: 28px; margin-bottom: 36px; }
    .about__li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text); line-height: 1.5; }
    .about__li svg { flex-shrink: 0; margin-top: 2px; }
    .about__col > .btn-p { align-self: flex-start; }
    .about__memberships { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
    .about__memberships-lbl { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
    .about__memberships img { height: 56px; width: auto; display: block; }

    /* horizontal process strip */
    .process { margin-top: 56px; padding-top: 36px; }
    .process__h { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); margin-bottom: 24px; }
    .process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .pstep { display: block; padding: 22px 0 0; border: 0; border-top: 2px solid var(--text); }
    .pstep__n { font-family: var(--serif); font-size: 46px; font-weight: 400; font-style: italic; color: var(--orange); line-height: .9; letter-spacing: -.01em; margin-bottom: 16px; }
    .pstep__t { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
    .pstep__d { font-size: 13px; color: var(--text-2); line-height: 1.55; }
    .process__cta { margin-top: 48px; }

    /* ========================================================
       TIMELINE
    ======================================================== */
    .tl { background: var(--dark); color: #fff; padding: 140px 0 120px; position: relative; }
    .tl__head { max-width: 1440px; margin: 0 auto 80px; padding: 0 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
    .tl__h2 { font-family: var(--serif); font-size: 60px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: #fff; margin: 0; }
    .tl__h2 em { font-style: italic; color: var(--orange); font-weight: 500; }
    .tl__sub { color: rgba(255,255,255,.6); font-size: 14px; max-width: 320px; margin: 0; line-height: 1.6; font-family: var(--mono); letter-spacing: .04em; }
    .tl__scroll { overflow-x: auto; padding: 0 40px 40px; scrollbar-width: thin; scrollbar-color: var(--orange) rgba(255,255,255,.08); }
    .tl__scroll::-webkit-scrollbar { height: 4px; }
    .tl__scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.08); }
    .tl__scroll::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }
    .tl__track { display: flex; position: relative; padding-top: 80px; min-width: max-content; }
    .tl__line { position: absolute; top: 130px; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.15); }
    .tl__item { width: 280px; flex-shrink: 0; padding: 0 32px; position: relative; border-left: 1px solid rgba(255,255,255,.08); }
    .tl__item::before { content: ''; position: absolute; top: 130px; left: -5px; width: 10px; height: 10px; border-radius: 999px; background: var(--dark); border: 2px solid var(--orange); transform: translateY(-50%); z-index: 1; }
    .tl__item.is-major::before { background: var(--orange); width: 14px; height: 14px; left: -7px; box-shadow: 0 0 0 4px rgba(232,120,32,.2); }
    .tl__year { font-family: var(--serif); font-size: 72px; font-weight: 500; color: var(--orange); margin-bottom: 40px; line-height: 1; letter-spacing: -.02em; }
    .tl__item.is-major .tl__year { font-weight: 500; }
    .tl__body { padding-top: 40px; }
    .tl__title { font-family: var(--serif); font-size: 20px; font-weight: 400; color: #fff; margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.2; }
    .tl__desc { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.6; margin: 0; }

    /* ========================================================
       MAP — coverage strip (home-2)
    ======================================================== */
    .mapw { padding: 80px 40px; background: var(--white); border-top: 1px solid var(--line); }
    .mapw__i { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; }
    .mapw__text { max-width: 720px; flex: 1; }
    .map__t { font-family: var(--serif); font-size: 48px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); margin: 0 0 18px; }
    .map__t em { color: var(--orange); font-style: italic; }
    .map__p { font-size: 16px; line-height: 1.65; color: var(--text); max-width: 560px; margin: 0; }

    /* ========================================================
       BLOG
    ======================================================== */
    section.blog { padding: 120px 40px; max-width: 1440px; margin: 0 auto; }
    .blog__h { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; }
    .blog__t { font-family: var(--serif); font-size: 52px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
    .blog__t em { color: var(--orange); font-style: italic; }
    .blog__more { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 8px; cursor: pointer; transition: gap .3s; }
    .blog__more:hover { gap: 14px; }
    .blog__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .bcard { background: var(--white); border: 1px solid var(--line); padding: 36px; cursor: pointer; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; text-decoration: none; color: inherit; }
    .bcard:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 14px 40px rgba(0,0,0,.07); }
    .bcard__t { transition: color .25s; }
    .bcard:hover .bcard__t { color: var(--orange); }
    .bcard__cat { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
    .bcard__t { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; flex: 1; }
    .bcard__ex { font-size: 14px; color: var(--text-2); line-height: 1.6; }
    .bcard__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--text-2); padding-top: 16px; border-top: 1px solid var(--line); text-transform: uppercase; }
    .bcard__read { color: var(--orange); display: inline-flex; align-items: center; gap: 8px; transition: gap .3s; }
    .bcard:hover .bcard__read { gap: 12px; }
    .blog__bottom { text-align: center; margin-top: 52px; display: none; }

    /* ========================================================
       PRESS — fondo negro
    ======================================================== */
    .press { background: var(--dark); color: #fff; padding: 64px 40px; }
    .press__i { max-width: 1440px; margin: 0 auto; }
    .press__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; gap: 24px; }
    .press__t { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.01em; color: #fff; font-style: italic; }
    .press__t em { color: var(--orange); font-style: italic; }
    .press__eyebrow { font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: -.01em; color: #fff; line-height: 1.2; }
    .press__eyebrow em { color: var(--orange); font-style: italic; }
    .press__more { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: gap .3s; }
    .press__more:hover { gap: 12px; }
    .press__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.1); }
    .pcard { padding: 22px 20px 22px 0; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; cursor: pointer; border-right: 1px solid rgba(255,255,255,.1); transition: opacity .2s; }
    .pcard:last-child { border-right: 0; padding-right: 0; }
    .pcard + .pcard { padding-left: 20px; }
    .pcard:hover { opacity: .7; }
    .pcard__src { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--orange); letter-spacing: -.01em; line-height: 1; }
    .pcard__t { font-family: var(--serif); font-size: 14px; font-weight: 400; color: #fff; letter-spacing: -.005em; line-height: 1.35; }
    .pcard__date { font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: auto; padding-top: 8px; }

    /* ========================================================
       FAQs
    ======================================================== */
    .faqs { padding: 120px 40px; background: var(--white); border-top: 1px solid var(--line); }
    .faqs__i { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
    .faqs__photo { position: sticky; top: 100px; aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; background: var(--dark); }
    .faqs__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .faqs__photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; background: linear-gradient(180deg, transparent 0%, rgba(15,15,15,.85) 100%); color: #fff; }
    .faqs__photo-l { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 6px; }
    .faqs__photo-t { font-family: var(--serif); font-size: 20px; font-weight: 400; font-style: italic; line-height: 1.25; }
    .faqs__photo-t em { color: var(--orange); }
    .faqs__t { font-family: var(--serif); font-size: 52px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); margin-bottom: 52px; }
    .faqs__t em { color: var(--orange); font-style: italic; }
    .faq { border-bottom: 1px solid var(--line); }
    .faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0; text-align: left; transition: color .2s; }
    .faq__q:hover { color: var(--orange); }
    .faq__ic { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; display: grid; place-items: center; transition: transform .3s, background .3s, border-color .3s; color: var(--text-2); }
    .faq__ic svg { width: 11px; height: 11px; }
    .faq.open .faq__ic { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: #fff; }
    .faq__a { overflow: hidden; max-height: 0; transition: max-height .4s var(--ease-out), padding .4s; font-size: 14px; line-height: 1.7; color: var(--text-2); }
    .faq.open .faq__a { max-height: 400px; padding-bottom: 22px; }

    /* ========================================================
       FINAL CTA
    ======================================================== */
    /* ========================================================
       FINAL CTA — split, editorial (home-2)
    ======================================================== */
    .fcta { padding: 0; max-width: none; margin: 0; background: var(--cream); color: var(--ink); border-top: 1px solid var(--line); }
    .fcta__i { max-width: 1440px; margin: 0 auto; padding: 110px 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
    .fcta__t { font-family: var(--serif); font-size: 72px; font-weight: 500; line-height: 1.02; letter-spacing: -.025em; color: var(--ink); margin-bottom: 0; text-wrap: pretty; }
    .fcta__t em { color: var(--orange); font-style: italic; }
    .fcta__right { display: flex; flex-direction: column; gap: 28px; padding-left: 40px; border-left: 1px solid var(--line); }
    .fcta__s { font-size: 17px; color: var(--text); line-height: 1.65; margin: 0; max-width: 420px; }
    .fcta__s strong { color: var(--ink); font-weight: 600; }
    .fcta__btns { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
    .fcta__meta { display: flex; gap: 36px; padding-top: 22px; border-top: 1px solid var(--line); margin-top: 4px; }
    .fcta__meta-item { display: flex; flex-direction: column; gap: 4px; }
    .fcta__meta-l { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
    .fcta__meta-v { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--ink); line-height: 1.2; }

    /* ========================================================
       CONTACT FORM
    ======================================================== */
    .cform-section { background: var(--dark); padding: 100px 40px; }
    .cform-section__i { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
    .cform__left { }
    .cform__title { font-family: var(--serif); font-size: 52px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: #fff; margin-bottom: 20px; }
    .cform__title em { color: var(--orange); font-style: italic; }
    .cform__sub { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.65; margin-bottom: 40px; max-width: 380px; }
    .cform__info { display: grid; gap: 20px; }
    .cform__info-item { display: flex; flex-direction: column; gap: 4px; }
    .cform__info-lbl { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); }
    .cform__info-val { font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.55; color: #fff; }
    .cform__info-val a { color: var(--orange); }

    .cform { display: grid; gap: 16px; }
    .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .cform__field { display: flex; flex-direction: column; gap: 8px; }
    .cform__field label { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
    .cform__input, .cform__select, .cform__textarea {
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 2px;
      color: #fff; font-family: var(--sans); font-size: 15px; padding: 14px 16px;
      outline: none; transition: border-color .2s, background .2s; width: 100%;
    }
    .cform__input::placeholder, .cform__textarea::placeholder { color: rgba(255,255,255,.3); }
    .cform__input:focus, .cform__select:focus, .cform__textarea:focus { border-color: var(--orange); background: rgba(255,255,255,.09); }
    .cform__select {
      -webkit-appearance: none; appearance: none; cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E87820' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 44px;
    }
    .cform__select option { background: #1a1a1a; color: #fff; }
    .cform__textarea { resize: vertical; min-height: 120px; font-family: var(--sans); }
    .cform__check { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.5; }
    .cform__check input { margin-top: 2px; accent-color: var(--orange); flex-shrink: 0; cursor: pointer; }
    .cform__check a { color: var(--orange); }
    .cform__submit { margin-top: 4px; display: flex; }

    /* ========================================================
       FOOTER
    ======================================================== */
    .ftr { background: var(--ink); color: rgba(255,255,255,.65); padding: 48px 40px 24px; }
    .ftr__i { max-width: 1440px; margin: 0 auto; }
    .ftr__brand { display: inline-block; margin-bottom: 36px; line-height: 0; }
    .ftr__brand img { height: 56px; width: auto; display: block; filter: brightness(0) invert(1); }
    .ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.09); }
    .ftr__ch { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 14px; }
    .ftr__contact { font-family: var(--sans); font-size: 14px; font-weight: 500; color: #fff; line-height: 1.55; }
    .ftr__contact span, .ftr__contact a { color: var(--orange); transition: color .2s; }
    .ftr__contact a:hover { color: #fff; }
    .ftr__ul { list-style: none; display: grid; gap: 8px; }
    .ftr__ul a { font-size: 13px; color: rgba(255,255,255,.65); transition: color .2s; }
    .ftr__ul a:hover { color: var(--orange); }
    .ftr__bot { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.3); text-transform: uppercase; }
    .ftr__bot { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.3); text-transform: uppercase; }
    .ftr__bot a { color: inherit; transition: color .2s; }
    .ftr__bot a:hover { color: var(--orange); }

    /* ========================================================
       WHATSAPP FLOAT
    ======================================================== */
    .wa { position: fixed; bottom: 24px; right: 24px; z-index: 500; background: var(--ink); color: var(--orange); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.30); transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s; cursor: pointer; }
    .wa:hover { transform: scale(1.08); background: var(--orange); color: #fff; box-shadow: 0 10px 30px rgba(232,120,32,.4); }
    .wa svg { width: 22px; height: 22px; }
    .wa__pulse { position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(232,120,32,.4); animation: wap 2.5s ease infinite; }
    @keyframes wap { 0%,100%{transform:scale(1);opacity:.7} 60%{transform:scale(1.3);opacity:0} }

    /* ========================================================
       RESPONSIVE
    ======================================================== */
    @media (max-width: 1180px) {
      /* Header */
      .ph { display: none; }
      .hdr__nav { display: none; }
      .hdr__phone { display: none; }
      /* Opaco en cuanto sale el burger: translúcido sobre el hero y las fotos
         se veía pasar el contenido por detrás de la barra. */
      .hdr { padding: 0 20px; background: var(--cream); backdrop-filter: none; }
      .hdr__i { padding: 0; height: 76px; }   /* en móvil el header no necesita tanto alto */

      /* Hero */
      .hero__inner { padding: 90px 24px 100px; min-height: 0; }
      .hero__h1 { font-size: 52px; }
      .hero__sub { font-size: 16px; }
      .hero__ctas { flex-direction: column; align-items: flex-start; gap: 16px; }

      /* Metrics — carrusel horizontal (uno a uno) en móvil con scroll-snap */
      .metrics { padding: 22px 0; }
      .metrics__i { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .metrics__i::-webkit-scrollbar { display: none; }
      .metric { flex: 0 0 100%; scroll-snap-align: center; justify-content: center; border-right: 0; padding: 14px 24px; }
      .metric:first-child, .metric:last-child { padding: 14px 24px; }

      /* Services */
      .svcs { padding: 80px 24px; }
      .svcs__head { grid-template-columns: 1fr; }
      .svcs__title { font-size: 32px; white-space: normal; }
      .svcs__grid { grid-template-columns: 1fr; }
      .svcs__bottom { flex-direction: column; align-items: center; gap: 16px; }

      /* Nicho */
      .nicho { padding: 80px 24px; }
      .nicho__h { grid-template-columns: 1fr; }
      .nicho__ht { font-size: 26px; }
      .nicho__grid { grid-template-columns: 1fr; }

      /* Testimonial */
      .testi { padding: 80px 24px; }
      .testi__i { grid-template-columns: 1fr; gap: 48px; }
      .testi__photo { aspect-ratio: 4/3; max-width: 480px; }
      .testi__q { font-size: 32px; }
      .testi__cta { flex-direction: column; align-items: flex-start; gap: 16px; }

      /* About */
      .about { padding: 80px 24px; }
      .about__top { grid-template-columns: 1fr; gap: 48px; }
      /* En móvil vuelve al flujo: no hay dos columnas que igualar, así que cada
         foto manda su proporción. */
      .about__col--media { position: static; min-height: 0; }
      .about__gallery { position: static; display: flex; flex-direction: column; gap: 14px; }
      .about__photo { min-height: 0; aspect-ratio: 3/2; }
      .about__title--steps { white-space: normal; }
      .process__grid { grid-template-columns: 1fr 1fr; gap: 24px; }

      /* Timeline */
      .tl { padding: 80px 0 80px; }
      .tl__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 48px; padding: 0 24px; }
      .tl__h2 { font-size: 40px; }
      .tl__scroll { padding: 0 24px 32px; }
      .tl__item { width: 240px; }

      /* Map */
      .mapw { padding: 56px 24px; }
      .mapw__i { flex-direction: column; align-items: flex-start; gap: 28px; }
      .map__t { font-size: 32px; }

      /* Founder quote */
      .fq { padding: 80px 24px; }
      .fq__top { grid-template-columns: 1fr; gap: 40px; }
      .fq__photo { min-height: 0; aspect-ratio: 4/3; }
      .fq__q { font-size: 28px; }
      .fq__mark { font-size: 140px; left: -8px; top: -22px; }
      .fq__voices { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; padding-top: 28px; }
      .fq__voice { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); padding: 0 0 24px 0 !important; }
      .fq__voice:last-child { border-bottom: 0; padding-bottom: 0 !important; }

      /* Blog */
      section.blog { padding: 80px 24px; }
      .blog__h { flex-direction: column; align-items: flex-start; gap: 0; }
      .blog__more { display: none; }
      .blog__grid { grid-template-columns: 1fr; }
      .bcard { padding: 24px; border: 1px solid var(--line); }
      .blog__bottom { display: block; }

      /* Press */
      .press { padding: 48px 24px; }
      .press__h { flex-direction: column; align-items: flex-start; gap: 8px; }
      .press__grid { grid-template-columns: 1fr; }
      .pcard { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 18px 0; }
      .pcard:last-child { border-bottom: 0; }
      .pcard + .pcard { padding-left: 0; }

      /* FAQs / CTA / Form */
      .faqs { padding: 80px 24px; }
      .faqs__i { grid-template-columns: 1fr; gap: 48px; }
      .faqs__photo { position: relative; top: 0; aspect-ratio: 4/3; max-width: 100%; }
      .fcta { padding: 0; }
      .fcta__i { padding: 80px 24px; grid-template-columns: 1fr; gap: 48px; }
      .fcta__t { font-size: 42px; }
      .fcta__right { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 32px; }
      .fcta__meta { flex-direction: column; gap: 18px; }
      .cform-section { padding: 80px 24px; }
      .cform-section__i { grid-template-columns: 1fr; gap: 48px; }
      .cform__row { grid-template-columns: 1fr; }

      /* Footer */
      .ftr { padding: 48px 24px 24px; }
      .ftr__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
      .ftr__brand { margin-bottom: 28px; }
      .ftr__brand img { height: 44px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .rv { opacity: 1; transform: none; transition: none; }
      .mq__track { animation: none; }
      .wa__pulse { animation: none; }
      /* Las palabras del hero siguen rotando, pero solo con fundido: sin subir ni bajar. */
      .hrot > span, .hrot > span.is-out { transform: none; transition: opacity .6s ease; }
      .mnav__overlay, .mnav__panel, .mnav__sub, .mnav__caret, .hdr__burger span { transition: none; }
    }

    /* ========================================================
       MOBILE NAV — burger + drawer (<=1180px)
    ======================================================== */
    .hdr__burger { display: none; width: 42px; height: 42px; padding: 0; background: none; border: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
    .hdr__burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
    .hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mnav { position: fixed; inset: 0; z-index: 600; visibility: hidden; pointer-events: none; }
    .mnav.open { visibility: visible; pointer-events: auto; }
    .mnav__overlay { position: absolute; inset: 0; background: rgba(15,15,15,.5); opacity: 0; transition: opacity .3s var(--ease); }
    .mnav.open .mnav__overlay { opacity: 1; }
    .mnav__panel {
      position: absolute; top: 0; right: 0; height: 100%; width: min(88vw, 420px);
      background: var(--cream); box-shadow: -16px 0 48px rgba(0,0,0,.18);
      display: flex; flex-direction: column; padding: 18px 24px 28px;
      transform: translateX(100%); transition: transform .34s var(--ease-out);
      overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .mnav.open .mnav__panel { transform: translateX(0); }

    .mnav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
    .mnav__langs { display: flex; gap: 14px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; }
    .mnav__langs a, .mnav__langs span { color: var(--text-2); transition: color .2s; }
    .mnav__langs .on { color: var(--orange); }
    .mnav__langs a:hover { color: var(--ink); }
    /* Idiomas sin traducir todavía: se ven, no llevan a ninguna parte. */
    .mnav__langs .lsw__off { opacity: .5; cursor: not-allowed; }
    .mnav__close { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink); cursor: pointer; }
    .mnav__close svg { width: 22px; height: 22px; }

    .mnav__nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 10px; }
    .mnav__sect { border-bottom: 1px solid var(--line); }
    .mnav__trigger {
      width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 16px 2px; background: none; border: 0; cursor: pointer; text-align: left;
      font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
    }
    .mnav__caret { width: 16px; height: 16px; flex-shrink: 0; opacity: .55; transition: transform .25s var(--ease); }
    .mnav__trigger[aria-expanded="true"] .mnav__caret { transform: rotate(180deg); color: var(--orange); opacity: 1; }
    .mnav__sub { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
    /* Da para los 12 enlaces de "Casos que atendemos" (3 grupos × 3 casos). */
    .mnav__trigger[aria-expanded="true"] + .mnav__sub { max-height: 640px; }
    /* Cabecera de grupo del tercer nivel: sin acordeón anidado, solo jerarquía. */
    .mnav__sub .mnav__grp { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-left-color: var(--orange); margin-top: 10px; }
    .mnav__sub a { display: block; padding: 11px 2px 11px 16px; font-size: 14px; color: var(--text); border-left: 2px solid var(--line); margin: 0 0 0 2px; transition: color .15s, border-color .15s; }
    .mnav__sub a:first-child { padding-top: 2px; }
    .mnav__sub a:last-child { padding-bottom: 16px; }
    .mnav__sub a:hover { color: var(--orange); border-color: var(--orange); }
    .mnav__link { display: block; padding: 16px 2px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--ink); transition: color .15s; }
    .mnav__link:hover { color: var(--orange); }
    /* Mismo criterio en el drawer: mayúsculas solo en el primer nivel. */
    .mnav__trigger, .mnav__nav > .mnav__link { text-transform: uppercase; font-size: 14px; letter-spacing: .06em; }

    .mnav__foot { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 12px; }
    .mnav__contact { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--text); transition: color .2s; }
    .mnav__contact:hover { color: var(--orange); }
    .mnav__cta { text-align: center; margin-top: 8px; }

    body.no-scroll { overflow: hidden; }

    @media (max-width: 1180px) {
      .hdr__burger { display: flex; }
    }

    /* ========================================================
       PHONE (<=480px) — topes de tamaño
    ======================================================== */
    @media (max-width: 480px) {
      .hdr__r .btn-cta { display: none; }   /* CTA vive en el drawer */
      .hero__h1 { font-size: 40px; }
      .hero__inner { padding: 72px 20px 84px; }
      .svcs__title, .testi__q, .map__t { font-size: 26px; }
      .fcta__t { font-size: 32px; }
      .nicho__ht { font-size: 24px; }
      .tl__h2 { font-size: 30px; }
      .fq__q { font-size: 24px; }
      .fq__mark { font-size: 110px; }
    }

    /* ========================================================
       EQUIPO — Página Nosotros › Equipo (6 módulos)
       namespaces: .tintro .socios/.fcard .tadv .creds .victor
                   .team/.tcard/.tfilter
    ======================================================== */

    /* 1 · INTRO trato directo (hero con imagen de fondo + capa) */
    .tintro { position: relative; padding: 150px 40px 130px; overflow: hidden; background: var(--dark); }
    .tintro__bg { position: absolute; inset: 0; z-index: 0; }
    .tintro__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .tintro::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.6) 45%, rgba(10,10,10,.82) 100%); }
    .tintro__i { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; text-align: center; }
    .tintro__eyebrow { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin-bottom: 22px; }
    .tintro__h { font-family: var(--serif); font-size: 56px; font-weight: 500; line-height: 1.04; letter-spacing: -.025em; color: #fff; margin-bottom: 28px; }
    .tintro__h em { color: var(--orange); font-style: italic; }
    .tintro__lead { font-size: 19px; line-height: 1.7; color: rgba(255,255,255,.78); max-width: 760px; margin: 0 auto; }
    .tintro__stats { display: flex; justify-content: center; gap: 64px; margin-top: 64px; flex-wrap: wrap; }
    .tintro__stat { text-align: center; }
    .tintro__sn { font-family: var(--serif); font-size: 52px; font-weight: 500; color: #fff; line-height: 1; }
    .tintro__sn em { color: var(--orange); font-style: italic; }
    .tintro__sl { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 12px; }

    /* 2 · SOCIOS FUNDADORES */
    .socios { padding: 110px 40px; background: var(--cream); border-top: 1px solid var(--line); }
    .socios__i { max-width: 1440px; margin: 0 auto; }
    .socios__h { font-family: var(--serif); font-size: 40px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; margin-bottom: 14px; }
    .socios__sub { font-size: 16px; color: var(--text-2); margin-bottom: 56px; max-width: 640px; line-height: 1.6; }
    .socios__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
    .fcard { display: grid; grid-template-columns: 200px 1fr; background: var(--white); border-radius: 2px; overflow: hidden; box-shadow: 0 1px 0 var(--line); text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s; }
    .fcard:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.08); }
    .fcard__media { position: relative; background: var(--dark); display: grid; place-items: center; }
    .fcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .fcard__ph { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 52px; color: rgba(232,120,32,.5); }
    .fcard__body { padding: 30px 30px 28px; display: flex; flex-direction: column; }
    .fcard__tag { font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
    .fcard__name { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; line-height: 1.1; margin-bottom: 6px; }
    .fcard__role { font-size: 13px; color: var(--text-2); margin-bottom: 16px; }
    .fcard__bio { font-size: 14px; color: var(--text-2); line-height: 1.6; flex: 1; margin-bottom: 20px; }
    .fcard__cta { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 8px; transition: gap .3s; }
    .fcard:hover .fcard__cta { gap: 12px; }

    /* 3 · ASESOR ESTRATÉGICO (banda oscura) */
    .tadv { padding: 110px 40px; background: var(--dark); }
    .tadv__i { max-width: 1440px; margin: 0 auto; }
    .tadv__h { font-family: var(--serif); font-size: 44px; font-weight: 500; color: #fff; letter-spacing: -.02em; line-height: 1.08; margin-bottom: 18px; max-width: 820px; }
    .tadv__h em { color: var(--orange); font-style: italic; }
    .tadv__lead { font-size: 17px; color: rgba(255,255,255,.65); line-height: 1.7; max-width: 720px; margin-bottom: 64px; }
    .tadv__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
    .tadv__cell { background: var(--dark); padding: 44px 36px; }
    .tadv__n { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 24px; }
    .tadv__ct { font-family: var(--serif); font-size: 22px; font-weight: 400; color: #fff; margin-bottom: 12px; letter-spacing: -.01em; }
    .tadv__cd { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.65; }

    /* 4 · CREDENCIALES */
    .creds { padding: 110px 40px; background: var(--white); border-top: 1px solid var(--line); }
    .creds__i { max-width: 1440px; margin: 0 auto; }
    .creds__h { font-family: var(--serif); font-size: 40px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; margin-bottom: 56px; }
    .creds__h em { color: var(--orange); font-style: italic; }
    .creds__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
    .cred { background: var(--white); padding: 38px 34px; display: flex; flex-direction: column; }
    .cred__yr { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--orange); margin-bottom: 16px; }
    .cred__t { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--ink); line-height: 1.2; margin-bottom: 10px; letter-spacing: -.01em; }
    .cred__d { font-size: 14px; color: var(--text-2); line-height: 1.6; }

    /* 5 · VÍCTOR (feature → página propia) */
    .victor { padding: 90px 40px; background: var(--cream); border-top: 1px solid var(--line); }
    .victor__i { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch; gap: 56px; }
    .victor__media { position: relative; background: var(--dark); min-height: 520px; display: grid; place-items: center; border-radius: 2px; overflow: hidden; }
    .victor__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .victor__ph { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 96px; color: rgba(232,120,32,.45); }
    .victor__body { padding: 20px 40px; align-self: center; }
    .victor__tag { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin-bottom: 22px; }
    .victor__name { font-family: var(--serif); font-size: 46px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; line-height: 1.05; margin-bottom: 10px; }
    .victor__role { font-size: 15px; color: var(--text-2); margin-bottom: 26px; }
    .victor__bio { font-size: 16px; color: var(--text-2); line-height: 1.7; margin-bottom: 24px; }
    .victor__creds { list-style: none; padding: 0; margin: 0 0 32px; }
    .victor__creds li { font-size: 14px; color: var(--ink); line-height: 1.5; padding-left: 22px; position: relative; margin-bottom: 10px; }
    .victor__creds li::before { content: '\2013'; position: absolute; left: 0; color: var(--orange); }

    /* 6 · EQUIPO GRID + FILTRO */
    .team { padding: 120px 40px; background: var(--white); border-top: 1px solid var(--line); }
    .team__inner { max-width: 1440px; margin: 0 auto; }
    .team__head { margin-bottom: 40px; }
    .team__eyebrow { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
    .team__title { font-family: var(--serif); font-size: 48px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
    .team__title em { color: var(--orange); font-style: italic; }
    .tfilter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; border-top: 1px solid var(--line); padding-top: 28px; }
    .tfilter__btn { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 10px 18px; cursor: pointer; transition: color .25s, border-color .25s, background .25s; }
    .tfilter__btn:hover { color: var(--ink); border-color: var(--ink); }
    .tfilter__btn.is-active { color: #fff; background: var(--orange); border-color: var(--orange); }
    .team__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
    .tcard { background: var(--cream); display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none; color: inherit; border-radius: 2px; transition: transform .3s var(--ease), box-shadow .3s; }
    .tcard:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.10); }
    .tcard__media { position: relative; aspect-ratio: 5/6; overflow: hidden; background: var(--dark); display: grid; place-items: center; }
    .tcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
    .tcard:hover .tcard__media img { transform: scale(1.04); }
    .tcard__ph { position: relative; z-index: 1; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 56px; color: rgba(255,255,255,.22); line-height: 1; transition: color .3s, transform .6s var(--ease-out); }
    .tcard:hover .tcard__ph { color: rgba(232,120,32,.55); transform: scale(1.06); }
    .tcard__media::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 20%, rgba(232,120,32,.16), transparent 55%), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 100% 100%, 24px 24px, 24px 24px; }
    .tcard__media--photo::before { display: none; }
    .tcard__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
    .tcard__cat { font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
    .tcard__name { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; line-height: 1.15; margin-bottom: 6px; }
    .tcard__role { font-size: 13px; color: var(--text-2); line-height: 1.5; flex: 1; margin-bottom: 20px; }
    .tcard__cta { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 8px; transition: gap .3s; margin-top: auto; }
    .tcard:hover .tcard__cta { gap: 12px; }
    .tcard.is-hidden { display: none; }

    @media (max-width: 1180px) {
      .tintro { padding: 110px 24px 90px; }
      .socios, .tadv, .creds, .team { padding-left: 24px; padding-right: 24px; }
      .tintro__h { font-size: 40px; }
      .victor { padding: 56px 24px; }
      .victor__name { font-size: 36px; }
      .socios__grid { grid-template-columns: 1fr; }
      .tadv__grid, .creds__grid { grid-template-columns: 1fr; }
      .victor__i { grid-template-columns: 1fr; gap: 32px; }
      .victor__media { min-height: 340px; }
      .victor__body { padding: 0; }
      .team__grid { grid-template-columns: repeat(2,1fr); }
      .team__title { font-size: 36px; }
    }
    @media (max-width: 480px) {
      .tintro__stats { gap: 36px; }
      .fcard { grid-template-columns: 1fr; }
      .fcard__media { aspect-ratio: 16/10; min-height: 180px; }
      .team__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .tcard__body { padding: 16px 14px 18px; }
      .tcard__name { font-size: 17px; }
    }

    /* ========================================================
       SINGLE EQUIPO — perfil de miembro (namespace .prof)
    ======================================================== */
    /* HERO claro (cream) */
    .prof-hero { background: var(--cream); padding: 36px 40px 70px; }
    .prof-bc { margin: 0 0 22px; font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
    .prof-bc a { color: var(--text-2); text-decoration: none; }
    .prof-bc a:hover { color: var(--orange); }
    .prof-bc span { color: var(--orange); }
    .prof-hero__i { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 45fr 55fr; gap: 56px; align-items: center; }
    .prof-hero__media { position: relative; background: var(--dark); border-radius: 2px; overflow: hidden; height: clamp(470px, 54vh, 640px); width: 100%; display: grid; place-items: center; }
    .prof-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
    .prof-hero__ph { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 96px; color: rgba(232,120,32,.5); }
    .prof-name { font-family: var(--serif); font-size: 54px; font-weight: 500; color: var(--ink); letter-spacing: -.025em; line-height: 1.02; margin-bottom: 12px; }
    .prof-role { font-size: 16px; color: var(--text-2); line-height: 1.6; margin-bottom: 34px; max-width: 560px; }
    .prof-actions { display: flex; gap: 16px; flex-wrap: wrap; }
    .prof-actions .btn-p { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--orange); color: #fff; padding: 16px 28px; border-radius: 2px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: background .25s; }
    .prof-actions .btn-p:hover { background: #cc6510; }
    .prof-actions .btn-g { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: 16px 24px; border: 1px solid var(--line); border-radius: 2px; text-decoration: none; transition: border-color .25s; }
    .prof-actions .btn-g:hover { border-color: var(--ink); }

    /* TRAYECTORIA — bio + ficha lateral */
    .prof-body { padding: 90px 40px; background: var(--white); }
    .prof-body__i { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center; }
    .prof-body__eyebrow { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 24px; }
    .prof-prose { font-size: 17px; line-height: 1.78; color: #2a2a2a; max-width: none; }
    .prof-prose p { margin-bottom: 22px; }
    .prof-prose p:last-child { margin-bottom: 0; }
    .prof-aside { position: sticky; top: 32px; background: var(--cream); border-radius: 2px; padding: 36px 32px; }
    .prof-aside__grp + .prof-aside__grp { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
    .prof-aside__h { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
    .prof-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
    .prof-contact li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
    .prof-contact svg { flex-shrink: 0; color: var(--orange); }
    .prof-contact a { color: var(--ink); text-decoration: none; word-break: break-word; }
    .prof-contact a:hover { color: var(--orange); }
    .prof-langs { font-family: var(--serif); font-size: 18px; color: var(--ink); }
    .prof-areas { display: flex; flex-wrap: wrap; gap: 8px; }
    .prof-area { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--line); border-radius: 2px; color: var(--orange); }

    /* FORM (Fluent id 3) — encabezado centrado dentro de .cform-section */
    .prof-form__i { max-width: 760px; margin: 0 auto; text-align: center; }
    .prof-form__eyebrow { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
    .prof-form__t { font-family: var(--serif); font-size: 40px; font-weight: 500; color: #fff; letter-spacing: -.02em; margin-bottom: 14px; }
    .prof-form__sub { font-size: 16px; color: rgba(255,255,255,.65); margin-bottom: 44px; }
    .prof-form__i .fluentform { text-align: left; }

    @media (max-width: 1180px) {
      .prof-hero { padding: 24px 24px 56px; }
      .prof-hero__i { grid-template-columns: 1fr; gap: 32px; max-width: 600px; }
      .prof-hero__media { height: clamp(400px, 62vw, 520px); }
      .prof-name { font-size: 40px; }
      .prof-body { padding: 64px 24px; }
      .prof-body__i { grid-template-columns: 1fr; gap: 40px; }
      .prof-aside { position: static; }
    }

    /* ========================================================
       BLOG — listado / archive (home.php, category.php)
       namespaces: .bhero .bfilter .barchive .bcta (+ .bcard ya existe)
    ======================================================== */
    .bhero { background: var(--orange); padding: 70px 40px 56px; }
    .bhero__i { max-width: 1400px; margin: 0 auto; }
    .bhero__eyebrow { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 18px; }
    .bhero__t { font-family: var(--serif); font-size: 56px; font-weight: 500; letter-spacing: -.025em; color: #fff; line-height: 1.03; margin-bottom: 18px; }
    .bhero__t em { color: var(--ink); font-style: italic; }
    .bhero__sub { font-size: 17px; color: rgba(255,255,255,.9); line-height: 1.6; max-width: 620px; }

    .barchive { padding: 56px 40px 120px; max-width: 1400px; margin: 0 auto; }
    .bfilter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
    .bfilter__btn { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 10px 18px; cursor: pointer; transition: color .25s, border-color .25s, background .25s; }
    .bfilter__btn:hover { color: var(--ink); border-color: var(--ink); }
    .bfilter__btn.is-active { color: #fff; background: var(--orange); border-color: var(--orange); }
    .barchive__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .bcard.is-hidden { display: none; }

    /* paginación nativa WP (the_posts_pagination) */
    .barchive .pagination { margin-top: 64px; }
    .barchive .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
    .barchive .page-numbers { font-family: var(--mono); font-weight: 600; font-size: 12px; min-width: 42px; height: 42px; padding: 0 12px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 2px; color: var(--text-2); text-decoration: none; transition: border-color .25s, color .25s; }
    .barchive a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
    .barchive .page-numbers.current { background: var(--orange); color: #fff; border-color: var(--orange); }

    /* CTA final */
    .bcta { background: var(--dark); padding: 80px 40px; text-align: center; }
    .bcta__i { max-width: 1400px; margin: 0 auto; }
    .bcta__t { font-family: var(--serif); font-size: 40px; font-weight: 500; color: #fff; letter-spacing: -.02em; margin-bottom: 14px; }
    .bcta__sub { font-size: 16px; color: rgba(255,255,255,.85); margin-bottom: 32px; }
    .bcta .btn-p-inv { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: #fff; color: var(--ink); padding: 16px 30px; border-radius: 2px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }

    @media (max-width: 1180px) {
      .bhero { padding: 56px 24px 44px; }
      .bhero__t { font-size: 38px; }
      .barchive { padding: 44px 24px 80px; }
      .barchive__grid { grid-template-columns: 1fr; }
      .bcta { padding: 64px 24px; }
      .bcta__t { font-size: 30px; }
    }

    /* ========================================================
       PUBLICACIONES · archive-prensa.php
       Banda oscura a sangre con una caja por aparición. El módulo .press de
       la portada es un resumen de cuatro con separadores; aquí cada una es
       una tarjeta con su enlace al medio, que es lo que se viene a buscar.
    ======================================================== */
    .pubs { background: var(--dark); padding: 88px 40px; }
    .pubs__i { max-width: 1440px; margin: 0 auto; }
    .pubs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
    .pubs__vacio { color: rgba(255,255,255,.65); text-align: center; }
    .pubcard { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 3px; transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
    .pubcard:hover { transform: translateY(-3px); border-color: rgba(232,120,32,.55); background: rgba(255,255,255,.07); }
    .pubcard__medio { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--orange); }
    .pubcard__t { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: #fff; text-wrap: pretty; }
    .pubcard__fecha { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
    .pubcard__cta { margin-top: auto; padding-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #fff; border-bottom: 1.5px solid rgba(255,255,255,.35); padding-bottom: 3px; transition: color .25s var(--ease), border-color .25s var(--ease); }
    .pubcard__cta:hover { color: var(--orange); border-color: var(--orange); }

    @media (max-width: 1180px) {
      .pubs { padding: 56px 24px 72px; }
      .pubs__grid { grid-template-columns: 1fr; gap: 16px; }
      .pubcard { padding: 24px 22px; }
      .pubcard__t { font-size: 20px; }
    }
    /* ========================================================
       H1 SIN CURSIVA · pedido por Víctor el 21-sep-2026
       Con Newsreader la cursiva funciona en los H2 y en las citas, pero
       en el titular grande de portada y de las cabeceras internas queda
       rara. Aquí sólo se apaga en los H1, el resto de la web la conserva.
       Los selectores llevan `h1[class]` a propósito: cada componente fija
       la cursiva desde su clase y con `h1 em` a secas perdería por
       especificidad. Así gana sin recurrir a !important.
    ======================================================== */
    h1 em, h1 i,
    h1[class] em, h1[class] i,
    h1[class] .wr span,
    .hero__h1 em, .hero__h1 .wr span,
    .ss-hero__h1 em, .ct-hero__h1 em, .bhero__t em,
    .gracias__t em, .e404__t em, .lpage__t em, .post-title em {
      font-style: normal;
    }

    /* ========================================================
       ESCALA DE TITULARES · 21-sep-2026
       Antes de esto había veintitantos tamaños sueltos repartidos por
       tres hojas: 96, 84, 72, 60, 58, 52, 48, 46, 44, 42, 40, 38, 34…
       puestos componente a componente. Con Newsreader eso se notaba
       todavía más: el CTA final del pie (72px) pesaba más que el título
       de sección (48px) y casi tanto como el H1 de portada, y al lado
       había fichas a 21px que se quedaban en nada.

       La escala es una progresión de razón ~1,33 con seis escalones y
       cada uno responde a un nivel de jerarquía, no a un componente.
       Todo va en `clamp()`, así que el tamaño se interpola con el ancho
       de pantalla y ya no hacen falta parches por media query.

         hero   76  →  H1 de portada, uno por web
         h1     56  →  H1 de cabecera interna
         h2     42  →  título de sección
         h2s    32  →  título secundario (CTA de cierre, newsletter)
         h3     24  →  título de tarjeta grande y de artículo
         h4     19  →  título de tarjeta pequeña y de prensa

       Las citas y las cifras van en su propia línea porque no son
       encabezados: compiten con el titular de la sección donde viven y
       tienen que quedar por debajo.

       Los pesos siguen el criterio de Víctor: H2 en 600, el resto en
       500, que es donde Newsreader tiene el color justo.
    ======================================================== */
    :root {
      --t-hero:  clamp(40px, 5.4vw, 76px);
      --t-h1:    clamp(34px, 4.2vw, 56px);
      --t-h2:    clamp(27px, 3.1vw, 42px);
      --t-h2s:   clamp(24px, 2.4vw, 32px);
      --t-h3:    clamp(20px, 1.7vw, 24px);
      --t-h4:    19px;
      --t-quote: clamp(26px, 2.8vw, 38px);
      --t-num:   clamp(34px, 3.4vw, 46px);
    }

    /* 1 · H1 de portada */
    .hero__h1, .hero__h1--faro {
      font-size: var(--t-hero); font-weight: 500; line-height: .98; letter-spacing: -.03em;
    }

    /* 2 · H1 de cabecera interna */
    .ss-hero__h1, .ct-hero__h1, .bhero__t, .lpage__t, .post-title,
    .gracias__t, .e404__t, .prof-name, .about__title {
      font-size: var(--t-h1); font-weight: 500; line-height: 1.02; letter-spacing: -.03em;
    }

    /* 3 · Título de sección (H2) */
    .svcs__title, .oareas__title, .nicho__ht, .map__t, .blog__t, .faqs__t,
    .cform__title, .tl__h2, .team__title, .tintro__h, .creds__h, .tadv__h,
    .socios__h, .press__t, .post-prose h2 {
      font-size: var(--t-h2); font-weight: 600; line-height: 1.05; letter-spacing: -.03em;
    }

    /* 4 · Título secundario (H3 de cierre de página) */
    .fcta__t, .bcta__t, .prof-form__t {
      font-size: var(--t-h2s); font-weight: 600; line-height: 1.1; letter-spacing: -.025em;
    }

    /* 5 · Título de tarjeta grande y de artículo */
    .ncard__t, .bcard__t, .post-prose h3 {
      font-size: var(--t-h3); font-weight: 500; line-height: 1.18; letter-spacing: -.02em;
    }

    /* 6 · Título de tarjeta pequeña */
    .scard__title, .oacard__t, .pcard__t, .fcard__n, .tcard__n, .victor__name {
      font-size: var(--t-h4); font-weight: 500; line-height: 1.22; letter-spacing: -.015em;
    }

    /* Citas: por debajo del título de la sección en la que viven */
    .testi__q, .fq__q {
      font-size: var(--t-quote); font-weight: 500; line-height: 1.22; letter-spacing: -.02em;
    }

    /* Cifras destacadas */
    .metric__n, .hf-elevate .hf-kpis__n {
      font-size: var(--t-num); font-weight: 500; line-height: 1; letter-spacing: -.025em;
    }

    /* ========================================================
       PORTAL DEL CLIENTE · 21-sep-2026
       Acceso al área privada del despacho, que vive fuera de esta web
       (Kabiku). Va junto al botón naranja pero en tono secundario: es
       para quien YA es cliente, y no debe competir con la llamada a la
       acción comercial. El icono de persona va al mismo grosor de trazo
       (1,6) que el resto de iconos del tema para que no desentone.
       Por debajo de 1180 el header colapsa en hamburguesa, así que el
       enlace se oculta ahí y reaparece dentro del cajón móvil.
    ======================================================== */
    .hdr__portal {
      /* El margen extra lo separa del botón naranja: pegados parecían un
         grupo de dos acciones del mismo peso, y no lo son. */
      display: inline-flex; align-items: center; gap: 8px; margin-right: 14px;
      font-family: var(--mono); font-weight: 600; font-size: 11px;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--text-2); padding: 10px 0;
      transition: color .25s var(--ease-out);
    }
    .hdr__portal:hover { color: var(--orange); }
    .hdr__portal .portal__ico { flex-shrink: 0; transition: transform .25s var(--ease-out); }
    .hdr__portal:hover .portal__ico { transform: translateY(-1px); }

    .mnav__portal {
      display: inline-flex; align-items: center; gap: 9px;
      font-family: var(--mono); font-weight: 600; font-size: 12px;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--ink); margin-bottom: 18px;
    }
    .mnav__portal:hover { color: var(--orange); }

    @media (max-width: 1180px) {
      .hdr__portal { display: none; }
    }

    /* Tramo 1181-1360: con el menú en mayúsculas el header medía 1336px y
       desbordaba la página en horizontal. Se compacta: logo algo menor, menos
       aire, texto a 12px y el portal solo con su icono (el texto se oculta
       a la vista pero sigue siendo el nombre accesible del enlace). */
    @media (min-width: 1181px) and (max-width: 1360px) {
      .hdr__i { gap: 16px; }
      .hdr__logo img { height: 40px; }
      .hdr__nav { gap: 16px; }
      .hdr__nav .nav-trigger { font-size: 12px; letter-spacing: .05em; }
      .hdr__portal { margin-right: 4px; padding: 10px 4px; }
      .hdr__portal span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    }