/* ==========================================================================
   CONNEXA LEGAL — HOJA DE ESTILOS ÚNICA
   Tax & Legal Advisory · Práctica colombo-americana
   --------------------------------------------------------------------------
   Este archivo lo comparten las seis páginas del sitio.
   Todo lo editable (colores, tipografías, tamaños, espacios, curvas de
   movimiento) está en el bloque :root de la sección 01.
   NO hay ningún color escrito por fuera de :root. Si necesita cambiar un
   color en todo el sitio, cámbielo una sola vez allá.

   ÍNDICE
   01 · Variables editables (:root)
   02 · Reinicio y base
   03 · Tipografía
   04 · Retícula, contenedores y bloques con rótulo al margen
   05 · Rótulos, numeración y notas al pie
   06 · Filetes
   07 · Enlaces y botones
   08 · Cabecera y menú
   09 · Barra de acción persistente
   10 · Botón flotante de WhatsApp
   11 · Secciones y encabezados de página
   12 · Líneas de servicio
   13 · Red de aliados (lista técnica a dos columnas)
   14 · Imágenes y marcadores de imagen
   15 · Formulario
   16 · Acordeón · qué pasa después · contacto directo · socios
   17 · Metodología (línea de pilares) y cruce de la X
   18 · Bloque de cierre
   19 · Pie de página
   20 · Movimiento
   21 · Movimiento reducido (accesibilidad)
   22 · Utilidades
   ========================================================================== */


/* ==========================================================================
   01 · VARIABLES EDITABLES
   ========================================================================== */

:root {

  /* --- COLORES OFICIALES DE MARCA -------------------------------------
     Los cinco de la guía. No agregar colores nuevos sin revisar la guía. */
  --azul:            #1B2A4A;   /* Azul marino. Color base y texto principal */
  --oro:             #9C7B3F;   /* Oro. Acento, filetes, detalles */
  --fondo-oscuro:    #10202E;   /* Fondo oscuro (gracias.html, cierres) */
  --crema:           #F2EEE2;   /* Texto y símbolo sobre fondo oscuro */
  --oro-claro:       #C9A24B;   /* Oro sobre fondo oscuro */

  /* --- NEUTROS DE SOPORTE ---------------------------------------------
     Definidos para este sitio. Gris frío, nunca crema cálido: el crema
     está reservado para los fondos oscuros. */
  --blanco:          #FCFCFD;   /* Fondo general del sitio */
  --papel:           #F3F4F7;   /* Fondo alterno, apenas distinto, para
                                   diferenciar bloques SIN usar bordes */
  --papel-hondo:     #E9EBF0;   /* Tercer nivel. Uso escaso */

  /* --- COLORES DERIVADOS DE TEXTO --------------------------------------
     Calculados para cumplir contraste AAA (7:1) sobre --blanco Y sobre
     --papel, que es el fondo más claro con el que compiten.
     --azul sobre --blanco = 14.0:1
     --texto-suave = 7.8:1 sobre --blanco y 7.2:1 sobre --papel
     --oro-texto = 5.9:1 (solo microtextos y rótulos, nunca párrafos)
     --oro puro = 3.9:1 (solo filetes y elementos no textuales) */
  --texto:           var(--azul);
  --texto-suave:     #46516A;   /* Texto secundario. Sigue siendo AAA */
  --azul-medio:      #35507F;   /* Línea de promesa de los servicios.
                                   Entre --azul y --texto-suave: pesa menos
                                   que un titular y más que el cuerpo.
                                   8.0:1 sobre blanco, 7.4:1 sobre papel */
  --oro-texto:       #7A5F2E;   /* Oro oscurecido, apto para texto pequeño */

  /* --- COLORES SOBRE FONDO OSCURO -------------------------------------- */
  --texto-oscuro-fondo:       var(--crema);
  --texto-suave-oscuro-fondo: #B9C2CE;   /* 8.4:1 sobre --fondo-oscuro */
  --oro-cuerpo-oscuro:        #CBA551;   /* 7.1:1 sobre --fondo-oscuro.

     Color DERIVADO, igual que --texto-suave y --oro-texto: mismo matiz
     que --oro-claro, 1.6% más claro. Existe porque --oro-claro #C9A24B
     da 6.9:1 y este sitio le exige 7:1 al cuerpo. A 14px en versalitas
     6.9 cumple AA y se usa para rótulos; para una línea de texto de 20px
     no alcanza.
     ÚNICO USO: texto de cuerpo en oro sobre --fondo-oscuro. Los rótulos
     siguen con --oro-claro, que es el acento de marca. */

  /* El relleno del panel elegido del selector de jurisdicción, desde el
     20/09/2026. Es el MISMO valor de arriba, y no por casualidad: aquel
     existe porque --oro-claro no llega a 7:1 contra --fondo-oscuro, y
     acá el par es exactamente el mismo dado vuelta (oro de fondo, azul
     profundo de texto). Por eso se declara como referencia y no como un
     hex repetido: si alguna vez se corrige uno, se corrigen los dos.
     MEDIDO: 7.1:1. Con --oro-claro, que es el dorado del botón, daría
     6.9:1, y una nota de panel es texto de lectura. */
  --oro-relleno: var(--oro-cuerpo-oscuro);

  /* --- CONTROLES DESACTIVADOS -------------------------------------------
     No son texto de lectura sino un control apagado a propósito, así que
     no se les exige el 7:1 del cuerpo. Se usan únicamente en el enlace EN
     del selector de idioma mientras la versión en inglés no exista. */
  --apagado:              #8A93A6;   /* 4.6:1 sobre --blanco */
  --oro-apagado:          rgba(201, 162, 75, 0.45);  /* filete del panel no elegido */
  --oro-filete:           rgba(156, 123, 63, 0.35);  /* separador entre servicios */
  --apagado-oscuro-fondo: #6E7A8A;   /* 4.5:1 sobre --fondo-oscuro */
  --filete-oscuro-fondo:  rgba(242, 238, 226, 0.22);

  /* --- TIPOGRAFÍAS -----------------------------------------------------
     Se cargan desde Google Fonts en el <head> de cada página.
     Display  : Libre Caslon Text. Caslon es históricamente la tipografía
                de los documentos legales y oficiales, que es justo el
                concepto del sitio. Se eligió el corte TEXT y no el DISPLAY:
                medido a 40px, el trazo fino del Display mide 0.42px y el
                del Text 1.75px. Por debajo de 1px el navegador no puede
                pintar un píxel completo y lo resuelve en gris; con brillo
                bajo, que es el escenario real de nuestro lector, se
                desvanece. Bodoni Moda tenía el mismo problema (0.75px).
     Cuerpo   : Spectral, serif diseñada para pantalla.
     Rótulo   : Jost, la misma familia del logotipo. */
  --tipo-display: 'Libre Caslon Text', 'Newsreader', Georgia, 'Times New Roman', serif;
  --tipo-cuerpo:  'Spectral', Georgia, 'Times New Roman', serif;
  --tipo-rotulo:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* --- ESCALA TIPOGRÁFICA ----------------------------------------------
     Fluida: el primer valor es el mínimo en móvil, el último el máximo en
     escritorio. El contraste de escala es deliberado y es lo que separa
     esto de una página tímida. */
  /* El hero completo tiene que caber sin scroll. Un titular de 52px que se
     lee de un golpe vale más que uno de 76px que hay que recorrer: el
     contraste de escala se mantiene igual contra el cuerpo de 18px. */
  --t-hero:      clamp(2.25rem, 1.4rem + 3.4vw, 3.25rem);    /*  36 → 52 px */
  --t-titulo:    clamp(2.25rem, 1.65rem + 3vw,    3.5rem);   /*  36 → 56 px */
  --t-seccion:   clamp(2rem,    1.6rem + 2vw,     3rem);     /*  32 → 48 px */
  --t-sub:       clamp(1.5rem,  1.35rem + 0.75vw, 1.875rem); /*  24 → 30 px */
  --t-sub-menor: clamp(1.25rem, 1.18rem + 0.35vw, 1.4375rem);/*  20 → 23 px */
  --t-bajada:    clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); /*  19 → 22 px */
  --t-cuerpo:    clamp(1.125rem, 1.09rem + 0.2vw, 1.1875rem);/*  18 → 19 px
                    MÍNIMO ABSOLUTO 18px. El lector tiene presbicia. */
  --t-rotulo:    0.875rem;                                   /*  14 px */
  --t-micro:     1rem;                                       /*  16 px. Letra
                    chica legal y notas. Sube de 15 a 16 porque el lector
                    tiene presbicia y estas notas sí se leen. */

  /* --- PESOS Y ESPACIADO DE LETRA -------------------------------------- */
  --peso-display: 400;
  --peso-cuerpo:  400;
  --peso-medio:   500;
  --peso-rotulo:  400;   /* Jost 300 se rompe a 14px. En el logotipo, que va
                            en tamaño grande, sí se usa 300. */
  --peso-rotulo-grande: 300;

  --track-display: -0.03em;  /* Tracking negativo en display */
  --track-rotulo:   0.18em;  /* Tracking positivo en mayúsculas */
  --track-logo:     0.26em;  /* Tracking del logotipo */

  /* 1.15 es el mínimo. Con 1.08 la caja de línea quedaba más baja que el
     alto real de la Libre Caslon y los descendentes de g, j, p, q, y se
     salían de ella. Medido en píxeles, no a ojo: a 45.6px había 147
     píxeles de tinta tocando el borde inferior del recorte. */
  --interlinea-titulo: 1.15;
  --interlinea-sub:    1.25;
  --interlinea-cuerpo: 1.7;   /* Mínimo 1.65. Aquí va con holgura */

  /* --- ESPACIADO -------------------------------------------------------- */
  --e-2xs: 0.25rem;   /*  4 px */
  --e-xs:  0.5rem;    /*  8 px */
  --e-s:   1rem;      /* 16 px */
  --e-m:   1.5rem;    /* 24 px */
  --e-l:   2.5rem;    /* 40 px */
  --e-xl:  4rem;      /* 64 px */
  --e-2xl: 6rem;      /* 96 px */

  /* Aire vertical entre secciones. Es la señal número uno de presupuesto. */
  --seccion-y:       clamp(4.5rem, 2.5rem + 9vw, 10rem);   /*  72 → 160 px */
  --seccion-y-corta: clamp(3rem,   2rem + 4.5vw, 5.5rem);  /*  48 →  88 px */

  /* --- RETÍCULA --------------------------------------------------------- */
  --ancho-max:      78rem;    /* 1248 px */
  /* Medida de línea: 60–70 caracteres. Se define en rem y no en ch porque
     el ancho del carácter cambia entre Spectral y la fuente de respaldo,
     y la medida se descuadraría mientras las fuentes cargan. */
  --ancho-texto:    36rem;
  --ancho-texto-corto: 28rem;
  --margen-lateral: clamp(1.25rem, 0.5rem + 3.5vw, 5rem);
  --col-rotulo:     9.5rem;   /* Ancho de la columna de rótulos al margen */
  --salto-marginal: var(--e-xl);

  --alto-menu:       4.5rem;   /* Móvil */
  --alto-menu-esc:   5.5rem;   /* Escritorio */
  --alto-barra:      4rem;     /* Máximo 64px en móvil. No negociable */

  /* --- BORDES Y RADIOS --------------------------------------------------
     Criterio: si el botón es píldora, las tarjetas y los campos NO lo son.

     --radio-panel es la excepción, pedida por Juan Ma el 20/09/2026 para
     los dos paneles del selector de jurisdicción. Son las únicas cajas
     del sitio que se comportan como un control grande (se pulsan enteras
     y cambian de estado), y la esquina redondeada es lo que las delata
     como pulsables. Si algún día se usa en otra caja, que sea por la
     misma razón y con este mismo valor: dos radios distintos en un sitio
     de esquinas rectas se notan más que uno. */
  --radio-boton:  999px;
  --radio-caja:   0;
  --radio-panel:  0.75rem;   /* 12px. Con 8px la esquina casi no se leía */
  --grosor-filete: 1px;
  --grosor-filete-grueso: 2px;

  /* --- MOVIMIENTO -------------------------------------------------------
     UNA sola curva en todo el sitio. La consistencia es lo que se percibe
     como calidad. */
  --curva:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-corta:    300ms;   /* Enlaces, botones, campos */
  --dur-media:    500ms;   /* Transición entre páginas */
  --dur-filete:   800ms;   /* Filetes que se trazan, imágenes */
  --dur-larga:    900ms;   /* Revelado de titulares */
  --desfase:       70ms;   /* Entre líneas de un mismo titular */

  /* --- CAPAS ------------------------------------------------------------- */
  --z-menu:      100;
  --z-barra:      90;
  --z-whatsapp:   95;
  --z-aviso:     150;   /* Aviso de cookies: por encima de todo salvo el salto */
  --z-salto:     200;

  /* Alto real del aviso de cookies. Lo mide scripts.js y lo escribe acá,
     porque el texto es del cliente y su alto cambia con el ancho de
     pantalla. De este valor dependen el botón de WhatsApp y la barra. */
  --alto-aviso: 0px;
}


/* ==========================================================================
   02 · REINICIO Y BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;          /* Nativo del navegador, no por JS */
  scroll-padding-top: calc(var(--alto-menu) + var(--e-m));
}

@media (min-width: 60rem) {
  html { scroll-padding-top: calc(var(--alto-menu-esc) + var(--e-l)); }
}

body {
  margin: 0;
  background-color: var(--blanco);
  color: var(--texto);
  font-family: var(--tipo-cuerpo);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-cuerpo);
  line-height: var(--interlinea-cuerpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
legend { padding: 0; }

/* Foco de teclado visible en dorado, en todo elemento interactivo. */
:focus-visible {
  outline: var(--grosor-filete-grueso) solid var(--oro);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Enlace de salto al contenido principal */
.salto-contenido {
  position: absolute;
  left: var(--e-s);
  top: var(--e-s);
  z-index: var(--z-salto);
  transform: translateY(-200%);
  background-color: var(--azul);
  color: var(--crema);
  padding: var(--e-s) var(--e-m);
  border-radius: var(--radio-boton);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-corta) var(--curva);
}
.salto-contenido:focus { transform: translateY(0); }

::selection { background-color: var(--azul); color: var(--crema); }


/* ==========================================================================
   03 · TIPOGRAFÍA
   ========================================================================== */

/* Display. Solo de 32px para arriba. Ya no es una limitación técnica de la
   fuente —Libre Caslon Text aguanta tamaños chicos— sino una regla de
   composición: el contraste de escala entre titular y cuerpo es lo que
   separa esto de una página tímida. */
.display-hero,
.display-titulo,
.display-seccion {
  font-family: var(--tipo-display);
  font-weight: var(--peso-display);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  color: var(--texto);
}

.display-hero    { font-size: var(--t-hero); }
.display-titulo  { font-size: var(--t-titulo); }
.display-seccion { font-size: var(--t-seccion); }

/* De 30px para abajo se usa la serif de cuerpo en peso medio, para que el
   salto entre niveles se lea. Se ve compuesto, no improvisado. */
.sub-titulo,
.sub-titulo-menor {
  font-family: var(--tipo-cuerpo);
  font-weight: var(--peso-medio);
  line-height: var(--interlinea-sub);
  letter-spacing: -0.01em;
  color: var(--texto);
  text-wrap: balance;
}
.sub-titulo       { font-size: var(--t-sub); }
.sub-titulo-menor { font-size: var(--t-sub-menor); }

/* Bajada bajo un titular */
.bajada {
  font-size: var(--t-bajada);
  line-height: 1.55;
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}

p { max-width: var(--ancho-texto); }
p + p { margin-top: var(--e-m); }

.texto-suave { color: var(--texto-suave); }
.texto-corto { max-width: var(--ancho-texto-corto); }

em, i { font-style: italic; }
strong, b { font-weight: var(--peso-medio); }


/* ==========================================================================
   04 · RETÍCULA, CONTENEDORES Y BLOQUES CON RÓTULO AL MARGEN
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

/* Bloque con rótulo al margen izquierdo, como marginalia jurídica.
   En móvil el rótulo se apila encima. En escritorio sale a la izquierda. */
.bloque-marginal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-m);
}

@media (min-width: 60rem) {
  .bloque-marginal {
    grid-template-columns: var(--col-rotulo) minmax(0, 1fr);
    column-gap: var(--salto-marginal);
    row-gap: var(--e-m);
  }
  .bloque-marginal > .rotulo { grid-column: 1; margin-top: 0.6em; }
  .bloque-marginal > .numero-grande { grid-column: 1; }
  .bloque-marginal > *:not(.rotulo):not(.numero-grande) { grid-column: 2; }
}

/* Los márgenes no son simétricos: el texto no vive centrado. */
@media (min-width: 76rem) {
  .contenedor--desplazado { padding-right: calc(var(--margen-lateral) + 8vw); }
}


/* ==========================================================================
   05 · RÓTULOS, NUMERACIÓN Y NOTAS AL PIE
   ========================================================================== */

.rotulo {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--oro-texto);
  margin: 0;
}

.rotulo--azul  { color: var(--texto-suave); }
.rotulo--claro { color: var(--oro-claro); }

/* Numeración de sección, como en un contrato: 01, 02, 1.1, 1.2 */
.numero {
  font-family: var(--tipo-rotulo);
  font-weight: var(--peso-rotulo-grande);
  font-size: var(--t-sub-menor);
  letter-spacing: 0.08em;
  color: var(--oro-texto);
  font-variant-numeric: tabular-nums;
  display: block;
}
.numero--grande { font-size: var(--t-sub); }

/* Nota al pie real, con asterisco */
.nota-pie {
  display: flex;
  gap: var(--e-xs);
  margin-top: var(--e-l);
  padding-top: var(--e-m);
  border-top: var(--grosor-filete) solid var(--papel-hondo);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}
.nota-pie__marca { color: var(--oro-texto); flex: none; }



/* ==========================================================================
   05b · RECURSOS GRÁFICOS
   El sitio es casi todo texto y sin esto se siente plano. Cuatro recursos
   que dan respiro sin meter una sola foto: numerales a gran escala, la
   marca de agua del símbolo, citas tipográficas y los filetes de la 06.
   ========================================================================== */

/* --- Numerales -------------------------------------------------------
   Hubo un numeral decorativo gigante de fondo (.numero-fondo) detrás de
   cada bloque. Se retiró de todo el sitio. La regla que lo mató: solo tenía
   sentido donde estuviera SOLO, sin cifra pequeña al lado y sin filete
   cerca, y ninguna de sus ubicaciones cumplía las dos condiciones. En
   servicios y metodología convivía con la cifra pequeña y se leía como la
   misma cifra impresa dos veces; en equipo lo cruzaba el filete divisorio.

   Queda la cifra pequeña informativa, en .rotulo: sólida, con contraste AA
   y con la numeración de contrato que pide el concepto del sitio. */

/* --- Marca de agua: el símbolo C+X a gran escala ----------------------
   Es decoración: va con aria-hidden y NUNCA detrás de texto de cuerpo,
   solo detrás del aire de la derecha. Si un bloque llena todo el ancho,
   no se usa. */
.seccion-con-marca { position: relative; overflow: hidden; }
.seccion-con-marca > .contenedor { position: relative; z-index: 1; }
/* Va COMPLETA dentro del bloque. Sangrada por el borde solo se ve la C y se
   lee como un círculo gris suelto, no como el símbolo de la marca. */
.marca-agua {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: min(30rem, 42%);
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.seccion--oscura .marca-agua { opacity: 0.1; }
@media (max-width: 47.9375rem) { .marca-agua { display: none; } }

/* --- Cita tipográfica a tamaño display --------------------------------
   Sacada del propio copy. Sin comillas gigantes ni adornos. */
.cita {
  margin: 0;
  font-family: var(--tipo-display);
  font-weight: var(--peso-display);
  font-size: var(--t-seccion);
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--oro);
  max-width: 22ch;
  text-wrap: balance;
}
.seccion--oscura .cita { color: var(--oro-claro); }
.cita__origen {
  display: block;
  margin-top: var(--e-m);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.seccion--oscura .cita__origen { color: var(--texto-suave-oscuro-fondo); }

/* ==========================================================================
   05c · BLOQUES DE INICIO
   Franja de credenciales, las seis razones, los resúmenes de servicios y
   pilares, y los socios en versión corta.
   ========================================================================== */

/* --- Franja de credenciales -------------------------------------------- */
.credenciales {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: var(--grosor-filete) solid var(--oro);
}
@media (min-width: 48rem) {
  .credenciales { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-xl); }
}
.credencial {
  padding-block: var(--e-l);
  border-bottom: var(--grosor-filete) solid var(--papel-hondo);
}
@media (min-width: 48rem) { .credencial { border-bottom: 0; } }
.credencial__dato { margin-bottom: var(--e-xs); }
.credencial p { color: var(--texto-suave); max-width: none; }

/* --- Las seis razones ---------------------------------------------------
   Sin filete por bloque: con seis, la sección se veía enrejada. La
   separación la dan el espacio y la retícula. */
.razones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--e-2xl);
}
@media (min-width: 60rem) {
  .razones { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-2xl); }
  /* El séptimo motivo (19/09/2026, DECISIONES 35) cruza las dos columnas
     y cierra la sección: siete en retícula de dos dejaban un hueco. El
     párrafo conserva su medida de lectura por el max-width global. */
  .razon--ancha { grid-column: 1 / -1; }
}
.razon { position: relative; }
.razon__numero { margin-bottom: var(--e-s); }
/* Título corto: el lector escanea los seis y se reconoce sin leer los
   párrafos. Tamaño intermedio entre el H2 y el cuerpo. */
.razon__titulo {
  font-family: var(--tipo-display);
  font-weight: var(--peso-display);
  font-size: var(--t-sub);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--texto);
  margin-bottom: var(--e-s);
  text-wrap: balance;
}
.razon p { color: var(--texto-suave); }

/* --- Resumen de servicios y de pilares --------------------------------- */
.resumen { display: grid; gap: 0; }
.resumen__item {
  padding-block: var(--e-l);
  border-top: var(--grosor-filete) solid var(--papel-hondo);
}
.resumen__item:first-child { border-top-color: var(--oro); }
.resumen__titulo { margin-bottom: var(--e-xs); }
.resumen__item p { color: var(--texto-suave); }

/* --- Los socios en versión corta --------------------------------------- */
.socios-breve { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 48rem) {
  .socios-breve { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-xl); }
}
.socio-breve {
  padding-block: var(--e-l);
  border-top: var(--grosor-filete) solid var(--oro);
}

/* Los títulos enlazados son botones de verdad: piso de 48px de toque, con
   el filete a la altura del texto y no al fondo de la caja. */
.resumen__titulo .enlace,
.socio-breve .enlace {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
}
.resumen__titulo .enlace::after,
.socio-breve .enlace::after { bottom: 0.55rem; }


/* ==========================================================================
   06 · FILETES
   Filetes de cabello en oro. Nunca cajas con sombra.
   ========================================================================== */

.filete {
  display: block;
  width: 100%;
  height: var(--grosor-filete);
  background-color: var(--oro);
  border: 0;
  transform-origin: left center;
}

.filete--suave { background-color: var(--papel-hondo); }
.filete--claro { background-color: var(--oro-claro); }

.filete-v {
  width: var(--grosor-filete);
  height: 100%;
  background-color: var(--oro);
  transform-origin: center top;
}


/* ==========================================================================
   07 · ENLACES Y BOTONES
   ========================================================================== */

a { color: var(--texto); text-decoration: none; }

/* Enlace de texto: filete dorado que se traza debajo en 300ms */
.enlace {
  position: relative;
  color: var(--texto);
  font-weight: var(--peso-medio);
  display: inline-block;
  padding-bottom: 2px;
}
.enlace::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--grosor-filete);
  background-color: var(--oro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-corta) var(--curva);
}
.enlace:hover::after,
.enlace:focus-visible::after { transform: scaleX(1); }

/* Enlace de continuación entre páginas: “Ver el alcance completo →” */
.enlace-avance {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  min-height: 3rem;                 /* Área de toque */
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-texto);
  position: relative;
}
.enlace-avance::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.6rem;
  height: var(--grosor-filete);
  background-color: var(--oro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-corta) var(--curva);
}
.enlace-avance:hover::after,
.enlace-avance:focus-visible::after { transform: scaleX(1); }
.enlace-avance__flecha {
  transition: transform var(--dur-corta) var(--curva);
}
.enlace-avance:hover .enlace-avance__flecha { transform: translateX(5px); }

/* --- Botones. Píldora, por decisión de dirección de arte. -------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-xs);
  min-height: 3rem;                 /* 48px de área de toque */
  padding: 0.85rem 1.75rem;
  border: var(--grosor-filete) solid transparent;
  border-radius: var(--radio-boton);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--dur-corta) var(--curva),
              color var(--dur-corta) var(--curva),
              border-color var(--dur-corta) var(--curva);
}

.boton__flecha { transition: transform var(--dur-corta) var(--curva); }
.boton:hover .boton__flecha { transform: translateX(5px); }

/* Principal: azul sólido. El oro nunca llena la superficie de un botón. */
.boton--principal {
  background-color: var(--azul);
  color: var(--crema);
  border-color: var(--azul);
}
.boton--principal:hover { background-color: var(--fondo-oscuro); border-color: var(--fondo-oscuro); }

/* Secundario: contorno */
.boton--secundario {
  background-color: transparent;
  color: var(--texto);
  border-color: var(--texto-suave);
}
.boton--secundario:hover { border-color: var(--oro); color: var(--oro-texto); }

/* Sobre fondo oscuro */
.boton--claro {
  background-color: var(--crema);
  color: var(--azul);
  border-color: var(--crema);
}
.boton--claro:hover { background-color: var(--oro-claro); border-color: var(--oro-claro); color: var(--fondo-oscuro); }

.boton--contorno-claro {
  background-color: transparent;
  color: var(--crema);
  border-color: var(--texto-suave-oscuro-fondo);
}
.boton--contorno-claro:hover { border-color: var(--oro-claro); color: var(--oro-claro); }

/* Compacto es más angosto, nunca más bajo: 48px de alto es el piso de toque
   en todo el sitio y no se negocia por estética. */
.boton--compacto { min-height: 3rem; padding: 0.6rem 1.25rem; }

/* Fila de botones con separación real entre áreas tocables */
.fila-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-s);
  align-items: center;
}

.microtexto-boton {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  margin-top: var(--e-s);
}


/* ==========================================================================
   08 · CABECERA Y MENÚ
   ========================================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-menu);
  background-color: var(--blanco);
  border-bottom: var(--grosor-filete) solid var(--papel-hondo);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-m);
  min-height: var(--alto-menu);
}

/* La cabecera tiene su propio tope, más ancho que --ancho-max.
   El tope de .contenedor (78rem) está para proteger la MEDIDA DE LECTURA
   del cuerpo, y aplicárselo a una barra de navegación no protege nada:
   en 1920px dejaba 1098px de útil para una fila que pide 1132, y el botón
   «Solicitar diagnóstico» se salía de la pantalla. Medido, no supuesto.
   Además la separación entre los cuatro bloques baja a --e-s en
   escritorio: el selector de idioma ya trae su propio filete y su propio
   aire, y 24px más al lado se leían como un hueco. */
@media (min-width: 76rem) {
  .cabecera__interior {
    max-width: 86rem;          /* 1376 px */
    gap: var(--e-s);
  }
}

@media (min-width: 60rem) {
  .cabecera__interior { min-height: var(--alto-menu-esc); }
}

/* --- Logotipo: símbolo en SVG + nombre en Jost, la misma fuente del logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  flex: none;
}
.logo__simbolo { width: 2.6rem; height: auto; flex: none; }
/* Los colores del símbolo se controlan desde acá, no desde el atributo del
   SVG, para que la variante oscura de la cabecera pueda cambiarlos.
   OJO: las reglas van sobre las clases del propio símbolo, NO scopeadas a
   .logo__simbolo. Estuvieron scopeadas y la marca de agua —que usa el mismo
   dibujo pero otra clase contenedora— se quedó sin color de trazo: solo se
   veía el nodo, un punto gris suelto en medio de la página. */
.simbolo-c    { stroke: var(--azul); }
.simbolo-x    { stroke: var(--oro); }
.simbolo-nodo { fill: var(--oro); }
.logo__texto { display: flex; flex-direction: column; gap: 0.15rem; }
.logo__nombre {
  font-family: var(--tipo-rotulo);
  font-weight: var(--peso-rotulo-grande);
  font-size: 1.0625rem;
  letter-spacing: var(--track-logo);
  text-transform: uppercase;
  color: var(--azul);
  line-height: 1;
}
.logo__bajada {
  font-family: var(--tipo-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro-texto);
  line-height: 1;
}
@media (max-width: 26rem) {
  .logo__bajada { display: none; }
}

/* --- PUNTO DE CORTE DE LA CABECERA: 76rem (1216px), no 60rem ---------------------
   Con cuatro enlaces la barra cabía a 960px. Con CINCO más el selector de
   idioma, no: medido a 960px la fila pedía 1191px contra 877px de ancho
   útil, y a 1280px seguía pasada por 49px. Se hicieron dos cosas, ninguna
   de ellas quitar un enlace:
     1 · El menú de escritorio empieza a 76rem (1216px). Entre 960 y 1216
         se queda el botón de menú, que es lo normal en tableta apaisada.
     2 · El menú va con separación --e-s y tracking 0.12em en TODO el
         escritorio, no solo en un tramo: el ancho útil no crece con la
         pantalla porque .contenedor tiene tope.
   Si algún día entra un sexto enlace, hay que rehacer esta cuenta. */
.menu { display: none; }

@media (min-width: 76rem) {
  .menu {
    display: flex;
    align-items: center;
    gap: var(--e-l);
  }
  .menu__enlace {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    font-family: var(--tipo-rotulo);
    font-size: var(--t-rotulo);
    font-weight: var(--peso-rotulo);
    letter-spacing: var(--track-rotulo);
    text-transform: uppercase;
    color: var(--texto);
    /* «La firma» se partía en dos líneas. Un enlace de menú nunca se
       parte. El botón de acción SÍ puede: con nowrap pasaba de 168 a
       270px y rompía la fila entre 1200 y 1280. Medido. */
    white-space: nowrap;
  }
  .menu__enlace::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.7rem;
    height: var(--grosor-filete);
    background-color: var(--oro);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-corta) var(--curva);
  }
  .menu__enlace:hover::after,
  .menu__enlace:focus-visible::after { transform: scaleX(1); }
  /* Página activa: filete dorado permanente */
  .menu__enlace[aria-current="page"] { color: var(--oro-texto); }
  .menu__enlace[aria-current="page"]::after { transform: scaleX(1); }
}

/* Espaciado definitivo del menú de escritorio.
   OJO: esto NO es un ajuste solo para pantallas medianas. El ancho útil no
   crece con la pantalla porque .contenedor tiene tope, y medido es incluso
   MENOR a 1920px (1098px de útil) que a 1280px (1142px). Con la separación
   original de --e-l el menú de cinco pedía 653px y no cabía en ningún
   ancho. Con --e-s y tracking 0.12em pide 521px y cabe en todos.
   Se recortó separación y tracking, nunca el tamaño de letra: bajar de
   14px en mayúsculas es lo primero que pierde un lector de 55 años. */
@media (min-width: 76rem) {
  .menu { gap: var(--e-s); }
  .menu__enlace { letter-spacing: 0.12em; }
  .idioma { margin-left: var(--e-s); padding-left: var(--e-s); }
  .idioma__enlace { min-width: 2.25rem; letter-spacing: 0.12em; }
}

/* --- Botón de menú en móvil ------------------------------------------ */
.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  min-height: 3rem;
  min-width: 3rem;
  padding: 0 var(--e-xs);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto);
}
.menu-boton__trazos { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.menu-boton__trazos span {
  display: block;
  height: var(--grosor-filete);
  background-color: var(--azul);
  transition: transform var(--dur-corta) var(--curva),
              opacity var(--dur-corta) var(--curva);
}
.menu-boton[aria-expanded="true"] .menu-boton__trazos span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__trazos span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] .menu-boton__trazos span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 76rem) { .menu-boton { display: none; } }

/* --- Panel de menú en móvil ------------------------------------------ */
.menu-movil {
  border-top: var(--grosor-filete) solid var(--papel-hondo);
  background-color: var(--blanco);
}
.menu-movil[hidden] { display: none; }
.menu-movil__lista { padding: var(--e-s) 0 var(--e-m); }
.menu-movil__enlace {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-family: var(--tipo-rotulo);
  font-size: 1.0625rem;
  font-weight: var(--peso-rotulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto);
  border-bottom: var(--grosor-filete) solid var(--papel-hondo);
}
.menu-movil__enlace[aria-current="page"] {
  color: var(--oro-texto);
  border-bottom-color: var(--oro);
}
.menu-movil .boton { margin-top: var(--e-m); width: 100%; }

@media (min-width: 76rem) { .menu-movil { display: none; } }

/* El botón fijo del menú en escritorio */
.cabecera__accion { display: none; }
@media (min-width: 76rem) { .cabecera__accion { display: inline-flex; } }

/* --- Variante oscura de la cabecera -----------------------------------
   Se usa solo en gracias.html, que va oscura de arriba abajo. El menú es
   exactamente el mismo de las otras páginas: solo cambia el color. */
.cabecera--oscura {
  background-color: var(--fondo-oscuro);
  border-bottom-color: color-mix(in srgb, var(--oro-claro) 40%, transparent);
}
.cabecera--oscura .logo__nombre { color: var(--crema); }
.cabecera--oscura .logo__bajada { color: var(--oro-claro); }
.cabecera--oscura .logo__simbolo .simbolo-c    { stroke: var(--crema); }
.cabecera--oscura .logo__simbolo .simbolo-x    { stroke: var(--oro-claro); }
.cabecera--oscura .logo__simbolo .simbolo-nodo { fill: var(--oro-claro); }
.cabecera--oscura .menu__enlace { color: var(--texto-oscuro-fondo); }
.cabecera--oscura .menu__enlace::after { background-color: var(--oro-claro); }
.cabecera--oscura .menu__enlace[aria-current="page"] { color: var(--oro-claro); }
.cabecera--oscura .menu-boton { color: var(--texto-oscuro-fondo); }
.cabecera--oscura .menu-boton__trazos span { background-color: var(--crema); }
.cabecera--oscura .menu-movil {
  background-color: var(--fondo-oscuro);
  border-top-color: color-mix(in srgb, var(--crema) 20%, transparent);
}
.cabecera--oscura .menu-movil__enlace {
  color: var(--texto-oscuro-fondo);
  border-bottom-color: color-mix(in srgb, var(--crema) 20%, transparent);
}

/* Página completa sobre fondo oscuro */
body.pagina-oscura { background-color: var(--fondo-oscuro); color: var(--texto-oscuro-fondo); }


/* ==========================================================================
   09 · BARRA DE ACCIÓN PERSISTENTE
   Aparece al pasar el hero (~15% de la página). Se oculta cuando la sección
   del formulario está visible. Nunca tapa el botón de WhatsApp.
   ========================================================================== */

.barra-accion {
  position: fixed;
  left: 0;
  right: 0;
  z-index: var(--z-barra);
  background-color: var(--azul);
  color: var(--crema);
  transition: transform var(--dur-media) var(--curva);
  will-change: transform;
}

.barra-accion__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-s);
  min-height: var(--alto-barra);
  max-height: var(--alto-barra);
}

.barra-accion__texto {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: 0.08em;
  color: var(--texto-suave-oscuro-fondo);
  margin: 0;
  max-width: none;
}

/* Móvil: anclada abajo */
.barra-accion { bottom: 0; transform: translateY(110%); }
.barra-accion.es-visible { transform: translateY(0); }
@media (max-width: 37.4375rem) {
  .barra-accion__texto { display: none; }
  .barra-accion__interior { justify-content: center; }
  .barra-accion .boton { width: 100%; }
}

/* Escritorio: integrada arriba, justo bajo el menú */
@media (min-width: 60rem) {
  .barra-accion {
    bottom: auto;
    top: var(--alto-menu-esc);
    transform: translateY(-110%);
    border-bottom: var(--grosor-filete) solid var(--oro);
  }
  .barra-accion.es-visible { transform: translateY(0); }
}


/* ==========================================================================
   10 · BOTÓN FLOTANTE DE WHATSAPP
   Glifo oficial en SVG dibujado en línea. Blanco sobre azul de marca:
   el verde de WhatsApp rompería la paleta.
   ========================================================================== */

.whatsapp {
  position: fixed;
  right: var(--e-s);
  bottom: calc(var(--e-s) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-whatsapp);
  display: grid;
  place-items: center;
  width: 3.5rem;              /* 56px de diámetro */
  height: 3.5rem;
  padding: 2px;               /* Área de toque efectiva ≥ 60px con el borde */
  border-radius: 50%;
  background-color: var(--azul);
  border: var(--grosor-filete) solid var(--oro);
  color: var(--crema);
  transition: transform var(--dur-media) var(--curva),
              background-color var(--dur-corta) var(--curva);
}
.whatsapp:hover { background-color: var(--fondo-oscuro); }
.whatsapp svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }

/* Cuando la barra de acción está abajo en móvil, el botón sube.
   La clase la pone scripts.js sobre <body>. */
@media (max-width: 59.9375rem) {
  body.barra-abajo-visible .whatsapp {
    transform: translateY(calc(-1 * var(--alto-barra) - var(--e-s)));
  }
}


/* ==========================================================================
   11 · SECCIONES Y ENCABEZADOS DE PÁGINA
   ========================================================================== */

.seccion { padding-block: var(--seccion-y); }
.seccion--corta { padding-block: var(--seccion-y-corta); }
.seccion--papel { background-color: var(--papel); }
.seccion--oscura {
  background-color: var(--fondo-oscuro);
  color: var(--texto-oscuro-fondo);
}
.seccion--oscura .display-hero,
.seccion--oscura .display-titulo,
.seccion--oscura .display-seccion,
.seccion--oscura .sub-titulo,
.seccion--oscura .sub-titulo-menor { color: var(--texto-oscuro-fondo); }
.seccion--oscura .bajada,
.seccion--oscura .texto-suave,
.seccion--oscura p { color: var(--texto-suave-oscuro-fondo); }
.seccion--oscura .rotulo,
.seccion--oscura .numero { color: var(--oro-claro); }

/* Enlaces de texto sobre fondo oscuro. Se listan uno por uno a propósito:
   una regla suelta tipo «.seccion--oscura a» le ganaría por especificidad al
   color de los botones y los dejaría ilegibles. */
.seccion--oscura .enlace,
.seccion--oscura .dato__valor a,
.seccion--oscura .cierre__nota a { color: var(--texto-oscuro-fondo); }
.seccion--oscura .enlace-avance { color: var(--oro-claro); }
.seccion--oscura .enlace::after,
.seccion--oscura .enlace-avance::after,
.seccion--oscura .dato__valor a::after { background-color: var(--oro-claro); }

/* Encabezado propio de cada página interior */
.encabezado-pagina { padding-block: var(--seccion-y) var(--seccion-y-corta); }
/* El hero de inicio va más apretado arriba y abajo para caber en pantalla. */
.encabezado-pagina--hero { padding-block: var(--seccion-y-corta); }
/* En el hero el rótulo cruza todo el ancho por encima del titular, como el
   antetítulo de un periódico. En la columna del margen se partía en cinco
   líneas y quedaba en una mancha alta y estrecha. */
@media (min-width: 60rem) {
  .encabezado-pagina--hero .bloque-marginal > .rotulo {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: var(--e-s);
  }
}

/* Entradilla: la segunda frase del titular. Va en display serif, en un
   tamaño claramente menor que el H1 y en oro, para que se lea como
   continuación del titular y no como cuerpo. */
.entradilla {
  font-family: var(--tipo-display);
  font-weight: var(--peso-display);
  /* Nunca baja de 24px. El oro da 5.9:1: por encima de 24px eso es texto
     grande y sobra para AA, pero entre 18 y 23px entraría en el rango del
     cuerpo, donde este sitio exige 7:1. El tamaño es lo que lo mantiene
     del lado correcto de la regla. */
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.875rem);    /* 24 → 30 px */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--oro-texto);
  max-width: 30ch;
  margin: 0;
}
.encabezado-pagina__rotulo { margin-bottom: var(--e-m); }
.encabezado-pagina .display-titulo { margin-bottom: var(--e-m); }

/* Encabezado de sección dentro de una página */
.encabezado-seccion { margin-bottom: var(--e-xl); }
.encabezado-seccion .display-seccion { margin-block: var(--e-s) var(--e-m); }


/* ==========================================================================
   12 · LÍNEAS DE SERVICIO
   Los tres primeros con más peso visual que los tres últimos.
   Sin tarjetas, sin sombras, sin retícula de tres columnas repetida.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   LA NUMERACIÓN SE RECALCULA SOLA — 20/09/2026

   Los «1.1, 1.2, 1.3…» NO están escritos en el HTML. Los pone un contador
   de CSS, y por una razón concreta: al filtrar por jurisdicción, el
   reparto esconde líneas y la numeración escrita a mano quedaba con
   huecos. Eligiendo Colombia se veía 1.1, 1.3, 1.4, 1.5, 1.6, y el
   visitante no tiene cómo saber que falta la 1.2 porque es de la otra
   sociedad: parece un error de la página.

   Un elemento con display:none NO incrementa el contador, así que las
   líneas que quedan se numeran seguidas sin una sola línea de JavaScript,
   igual que el filtro. Sin filtro da exactamente 1.1 a 1.6, como antes.

   OJO: el número que ve el visitante ya no es fijo. Con Estados Unidos
   elegido, la «1.3» en pantalla es Inversión extranjera, no Régimen
   cambiario. Para hablar entre nosotros y con el cliente, la referencia
   estable es el id del bloque (#regimen-cambiario), no el numeral.

   Y OJO CON DÓNDE SE REINICIA. Las seis líneas NO viven en un solo
   contenedor: hay un `.servicios` con las tres principales, el espacio de
   imagen en medio, y un `.servicios--corte` con las tres
   complementarias. Reiniciando el contador en `.servicios`, la cuarta
   línea volvía a decir «1.1». Se reinicia una sola vez, en la sección que
   las contiene a todas.
   ══════════════════════════════════════════════════════════════════════════ */
.seccion[aria-labelledby="titulo-servicios"] { counter-reset: linea; }
.servicios { display: grid; gap: 0; }
.servicio  { counter-increment: linea; }
.servicio__numero::before { content: "1." counter(linea); }

.servicio {
  padding-block: var(--e-xl);
  border-top: var(--grosor-filete) solid var(--papel-hondo);
  scroll-margin-top: calc(var(--alto-menu) + var(--e-l));
}
.servicio:first-child { border-top: 0; padding-top: 0; }

/* El aire entre número, titular y texto lo da el row-gap de
   .bloque-marginal. No se le suman márgenes propios: se duplicaría. */
.servicio__numero { margin-bottom: 0; }
.servicio__titulo { margin-bottom: 0; }
.servicio__texto { color: var(--texto-suave); }

/* --- CAPA 2 · la línea de promesa ---------------------------------------
   Va entre el título y el detalle técnico, en tamaño intermedio y en azul
   medio. Es la capa que permite escanear los seis servicios sin leer un
   párrafo: antes solo funcionaba para el lector experto. */
.servicio__promesa {
  margin: var(--e-s) 0 var(--e-m);
  max-width: 42ch;
  font-family: var(--tipo-cuerpo);
  font-size: var(--t-bajada);
  line-height: 1.45;
  color: var(--azul-medio);
}

/* --- CAPA 3 · el vocabulario técnico ------------------------------------
   Lista de términos, a dos columnas en escritorio. El experto ve el
   alcance completo de un vistazo; el lector rápido ya se quedó con la
   promesa y no se estrella contra siete líneas seguidas. */
.servicio__terminos { margin-top: 0; }
@media (min-width: 48rem) {
  .lista-tecnica--dos { columns: 2; max-width: none; }
}

/* Los tres principales */
.servicio--principal .servicio__titulo { font-size: var(--t-sub); }
.servicio--principal .servicio__texto  { font-size: var(--t-bajada); color: var(--texto); }

/* Los tres complementarios: mismo sistema, menos peso */
.servicio--complementario { padding-block: var(--e-l); }
.servicio--complementario .servicio__titulo { font-size: var(--t-sub-menor); }

@media (min-width: 60rem) {
  .servicio { scroll-margin-top: calc(var(--alto-menu-esc) + var(--e-xl)); }
}

/* Separador entre el grupo principal y el complementario.
   El margen superior lo pone el bloque de imagen que va encima; sumar otro
   acá producía 370px de vacío entre la foto y el servicio 1.4. */
.servicios__corte {
  margin-block: 0;
  padding-top: var(--e-l);
  border-top: var(--grosor-filete) solid var(--oro);
}


/* ==========================================================================
   13 · RED DE ALIADOS — lista técnica a dos columnas
   La densidad de términos ES el argumento. Nada de tarjetas con íconos.
   ========================================================================== */

.grupo-aliados + .grupo-aliados { margin-top: var(--e-xl); }
.grupo-aliados__titulo { margin-bottom: var(--e-m); }

.lista-tecnica {
  columns: 1;
  column-gap: var(--e-xl);
  max-width: var(--ancho-texto);
}
@media (min-width: 48rem) {
  .lista-tecnica { columns: 2; max-width: none; }
}

/* El filete de viñeta va posicionado, no como elemento de una caja flex:
   con flex, un <em> o un <strong> dentro del ítem se volvería un elemento
   aparte y aparecería un hueco en mitad de la frase. */
.lista-tecnica li {
  break-inside: avoid;
  position: relative;
  padding: 0.7rem 0 0.7rem 1.5rem;
  border-bottom: var(--grosor-filete) solid var(--papel-hondo);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
}
.lista-tecnica li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45rem;
  width: 0.5rem;
  height: var(--grosor-filete);
  background-color: var(--oro);
}


/* ==========================================================================
   14 · IMÁGENES Y MARCADORES DE IMAGEN
   Prohibido el banco de imágenes. Mientras no lleguen las fotos propias,
   el marcador va compuesto, no roto.
   -------------------------------------------------------------------------
   CÓMO REEMPLAZAR UN MARCADOR POR UNA FOTO REAL:
   Cambie el bloque
       <div class="marco-imagen" style="--proporcion: 3/2"> … </div>
   por
       <figure class="marco-imagen foto-ciudad" style="--proporcion: 3/2">
         <img src="imagenes/medellin.jpg" alt="Descripción real de la foto">
       </figure>
   La proporción y el recorte se mantienen solos.
   ========================================================================== */

.marco-imagen {
  position: relative;
  aspect-ratio: var(--proporcion, 3 / 2);
  background-color: var(--papel);
  border: var(--grosor-filete) solid var(--oro);
  border-radius: var(--radio-caja);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: 0;
}

/* display: contents hace que la <img> siga siendo el elemento de la
   cuadrícula aunque vaya envuelta en <picture> para servir WebP. */
.marco-imagen picture { display: contents; }

.marco-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marco-imagen__etiqueta {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-texto);
  text-align: center;
  padding: var(--e-s);
  max-width: 22rem;
}

/* Tratamientos. Ningún retrato en color saturado. */
.foto-retrato img { filter: grayscale(0.65) contrast(1.04) brightness(1.02); }
.foto-retrato::after,
.foto-detalle::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--azul);
  opacity: 0.14;
  mix-blend-mode: color;
  pointer-events: none;
}
/* Pensada para tomas aéreas: contraste alto y sombras profundas, con un
   degradado arriba que impide que el cielo se queme. */
.foto-ciudad img { filter: grayscale(0.3) contrast(1.18) brightness(0.94) saturate(0.85); }
.foto-ciudad::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
              color-mix(in srgb, var(--azul) 30%, transparent) 0%,
              transparent 45%);
}
.foto-detalle img { filter: grayscale(0.5) contrast(1.06); }

/* Proporciones. Están fijas con aspect-ratio + object-fit: cover para que
   cambiar el archivo de la foto nunca rompa la composición. */
.proporcion-retrato    { --proporcion: 3 / 4;  }  /* retratos de los socios */
.proporcion-diptico    { --proporcion: 16 / 9; }  /* díptico Colombia / EE.UU. */
.proporcion-panoramica { --proporcion: 21 / 9; }  /* detalle ancho y bajo */
.proporcion-media      { --proporcion: 3 / 2;  }


/* --- Díptico Colombia / Estados Unidos (index.html) -------------------
   Dos imágenes lado a lado. Es la única imagen conceptual del sitio: no
   decora, dice el argumento de la marca. En móvil se apilan.
   LLEVABA UNA DIAGONAL DORADA ENCIMA, el motivo de la X, retirada el
   20/09/2026 a pedido de Juan Ma junto con la del selector de
   jurisdicción. Ver DECISIONES sección 33. `position: relative` se queda:
   lo usa el revelado. */
.diptico {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-m);
}
@media (min-width: 48rem) {
  .diptico { grid-template-columns: 1fr 1fr; gap: var(--e-l); }
}
.diptico__pie {
  grid-column: 1 / -1;
  margin-top: var(--e-s);
}


/* ==========================================================================
   15 · FORMULARIO
   Campos con línea inferior, sin cajas. Nunca píldora.
   ========================================================================== */

.formulario { max-width: 40rem; }

.campo { margin-bottom: var(--e-l); }

.campo__etiqueta {
  display: block;
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e-xs);
}

.campo__control {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0;
  background-color: transparent;
  border: 0;
  border-bottom: var(--grosor-filete) solid var(--texto-suave);
  border-radius: var(--radio-caja);
  font-family: var(--tipo-cuerpo);
  font-size: var(--t-cuerpo);
  color: var(--texto);
  transition: border-color var(--dur-corta) var(--curva);
}
.campo__control::placeholder { color: var(--texto-suave); opacity: 0.75; }
textarea.campo__control { min-height: 8rem; resize: vertical; line-height: 1.6; }

select.campo__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--oro-texto) 50%),
                    linear-gradient(135deg, var(--oro-texto) 50%, transparent 50%);
  background-position: right 0.9rem center, right 0.5rem center;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

/* Filete inferior que se engruesa desde el centro hacia afuera al enfocar */
.campo__filete {
  display: block;
  height: var(--grosor-filete-grueso);
  background-color: var(--oro);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-corta) var(--curva);
  margin-top: calc(-1 * var(--grosor-filete-grueso));
}
.campo__control:focus + .campo__filete { transform: scaleX(1); }
.campo__control:focus { outline: none; }
.campo:focus-within .campo__etiqueta { color: var(--oro-texto); }

/* Selección múltiple de jurisdicciones */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-s);
  margin-top: var(--e-xs);
}
.opcion { position: relative; }
.opcion input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--e-m);
  border: var(--grosor-filete) solid var(--texto-suave);
  border-radius: var(--radio-caja);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: border-color var(--dur-corta) var(--curva),
              color var(--dur-corta) var(--curva);
}
/* Seleccionado: azul sólido, texto crema y borde dorado. Se distingue a un
   metro. El estado NO se comunica solo con color: es un <input type=
   "checkbox"> nativo, así que el navegador ya anuncia «casilla marcada».
   Añadir aria-checked encima sería redundante y en algunos lectores rompe
   el estado nativo. */
.opcion input:checked + span {
  background-color: var(--azul);
  border-color: var(--oro);
  color: var(--crema);
  font-weight: var(--peso-medio);
}
.opcion input:focus-visible + span { outline: var(--grosor-filete-grueso) solid var(--oro); outline-offset: 3px; }

/* Casilla de autorización */
.casilla {
  display: flex;
  gap: var(--e-s);
  align-items: flex-start;
  padding-block: var(--e-xs);
  cursor: pointer;
  max-width: var(--ancho-texto);
}
/* La casilla en sí mide 28px, pero el área tocable es TODA la etiqueta:
   el <label> envuelve al input, así que se activa tocando el texto. */
.casilla input {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.15rem 0 0;
  accent-color: var(--azul);
}
.casilla span { font-size: var(--t-micro); line-height: 1.6; color: var(--texto-suave); }

/* Microtextos de estado, en la voz de la firma */
.campo__aviso {
  display: block;
  margin-top: var(--e-xs);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: 0.04em;
  color: var(--oro-texto);
}
.campo__aviso[hidden] { display: none; }

/* Trampa antispam. Fuera de pantalla, nunca display:none. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   16 · ACORDEÓN — preguntas frecuentes
   Se toca en TODO el ancho de la fila, no solo en el ícono.
   ========================================================================== */

.acordeon { max-width: var(--ancho-texto); }
.acordeon__item { border-top: var(--grosor-filete) solid var(--papel-hondo); }
.acordeon__item:last-child { border-bottom: var(--grosor-filete) solid var(--papel-hondo); }

.acordeon__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-m);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--e-m) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--tipo-cuerpo);
  font-size: var(--t-sub-menor);
  font-weight: var(--peso-medio);
  line-height: var(--interlinea-sub);
  color: var(--texto);
}
.acordeon__signo {
  flex: none;
  position: relative;
  width: 1rem;
  height: 1rem;
}
.acordeon__signo::before,
.acordeon__signo::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: var(--grosor-filete);
  background-color: var(--oro);
  transition: transform var(--dur-corta) var(--curva);
}
.acordeon__signo::after { transform: rotate(90deg); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after { transform: rotate(0deg); }

.acordeon__panel { padding-bottom: var(--e-l); }
.acordeon__panel[hidden] { display: none; }
.acordeon__panel p { color: var(--texto-suave); }
.seccion--oscura .acordeon__item { border-top-color: color-mix(in srgb, var(--crema) 20%, transparent); }
.seccion--oscura .acordeon__item:last-child { border-bottom-color: color-mix(in srgb, var(--crema) 20%, transparent); }
.seccion--oscura .acordeon__boton { color: var(--texto-oscuro-fondo); }
.seccion--oscura .acordeon__signo::before,
.seccion--oscura .acordeon__signo::after { background-color: var(--oro-claro); }


/* ==========================================================================
   16b · QUÉ PASA DESPUÉS — secuencia de momentos
   El rótulo al margen ES el momento ("Primero", "Menos de 24 horas
   hábiles"). Sin números inventados ni barras de progreso.
   ========================================================================== */

.pasos { border-top: var(--grosor-filete) solid var(--oro); }

.paso {
  padding-block: var(--e-l);
  border-bottom: var(--grosor-filete) solid var(--papel-hondo);
}
.paso p { color: var(--texto-suave); }

.seccion--oscura .pasos { border-top-color: var(--oro-claro); }
.seccion--oscura .paso { border-bottom-color: color-mix(in srgb, var(--crema) 20%, transparent); }
/* Esta regla es obligatoria y va DESPUÉS de «.paso p». Las dos tienen la
   misma especificidad, así que gana la última: sin ella el texto de los
   pasos queda azul oscuro sobre fondo oscuro (2:1, ilegible). */
.seccion--oscura .paso p { color: var(--texto-suave-oscuro-fondo); }


/* ==========================================================================
   16c · DATOS DE CONTACTO DIRECTO
   Teléfono y WhatsApp como enlaces tocables, nunca como texto plano.
   ========================================================================== */

.datos-contacto { display: grid; gap: var(--e-l); }
@media (min-width: 48rem) {
  .datos-contacto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-xl); }
}

.dato__rotulo { margin-bottom: var(--e-xs); }
.dato__valor {
  font-size: var(--t-sub-menor);
  line-height: 1.4;
  max-width: none;
}
.dato__valor a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  position: relative;
}
.dato__valor a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.7rem;
  height: var(--grosor-filete);
  background-color: var(--oro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-corta) var(--curva);
}
.dato__valor a:hover::after,
.dato__valor a:focus-visible::after { transform: scaleX(1); }



/* ==========================================================================
   16d · SOCIOS (equipo.html)
   Retrato vertical 3:4 a un lado y credenciales al otro, alternando lado.
   No se usó una retícula de tres columnas: las universidades son el activo
   más fuerte de la página y en tres columnas angostas quedan apretadas.
   ========================================================================== */

.socios { display: grid; gap: var(--seccion-y-corta); }

.socio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-l);
  padding-top: var(--seccion-y-corta);
  border-top: var(--grosor-filete) solid var(--papel-hondo);
}
.socio:first-child { padding-top: 0; border-top: 0; }

/* Se pasa a dos columnas desde 48rem y no desde 60rem. A 768px en una sola
   columna el retrato ocupaba todo el ancho: 698px de ancho son 930px de alto
   en proporción 3:4, una franja enorme de scroll con una sola imagen. */
@media (min-width: 48rem) {
  .socio {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    column-gap: var(--e-xl);
    align-items: start;
  }
  .socio--invertido { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); }
  .socio--invertido .socio__retrato { grid-column: 2; grid-row: 1; }
  .socio--invertido .socio__ficha  { grid-column: 1; grid-row: 1; }
}

@media (min-width: 60rem) {
  .socio {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: var(--e-2xl);
    align-items: start;
  }
  /* El segundo socio invierte el LADO del retrato, nunca su TAMAÑO.
     Antes esto se hacía con «order: 2», y ahí estaba el error: order cambia
     el orden de colocación, así que el retrato caía en la columna 1fr y
     salía más del doble de ancho que los otros dos. Se invierte declarando
     las columnas y la posición de cada elemento, no el orden. */
  .socio--invertido { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .socio--invertido .socio__retrato { grid-column: 2; grid-row: 1; }
  .socio--invertido .socio__ficha  { grid-column: 1; grid-row: 1; }
}

.socio__nombre { margin-bottom: var(--e-2xs); }
.socio__cargo { margin-bottom: var(--e-l); }

/* --- Formación académica ---------------------------------------------
   Va a tamaño de cuerpo, nunca en letra chica: las universidades son
   la credencial que más pesa en esta página. */
.formacion { margin-bottom: var(--e-l); }
.formacion li {
  padding-block: var(--e-s);
  border-bottom: var(--grosor-filete) solid var(--papel-hondo);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--texto-suave);
}
.formacion li:first-child { border-top: var(--grosor-filete) solid var(--oro); }
.formacion .casa {
  display: block;
  font-weight: var(--peso-medio);
  color: var(--texto);
}

/* --- Bloque de contenido pendiente ------------------------------------
   Mismo lenguaje que los marcadores de imagen: se ve intencional, no roto.
   Para reemplazarlo, borre el <div> entero y ponga el contenido real. */
.bloque-pendiente {
  padding: var(--e-xl) var(--e-l);
  background-color: var(--papel);
  border: var(--grosor-filete) solid var(--oro);
  border-radius: var(--radio-caja);
  text-align: center;
}
.bloque-pendiente__titulo {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-texto);
  margin-bottom: var(--e-s);
}
.bloque-pendiente p { margin-inline: auto; color: var(--texto-suave); }

/* --- Declaración: el argumento más fuerte de la firma ------------------
   La primera frase va como cita a tamaño display en oro y hace de titular;
   el resto del párrafo va debajo, desplazado a la derecha. Esa asimetría es
   la que usa el ancho: antes el bloque vivía en una columna angosta con la
   mitad derecha vacía y se leía como una nota al pie.
   La cita NO lleva la medida de línea del cuerpo: a tamaño display, 26ch
   dejaba un cuarto de la fila en blanco y estiraba la frase a nueve líneas. */
.declaracion__cita { max-width: none; }
.declaracion__cuerpo {
  margin-top: var(--e-xl);
  padding-top: var(--e-l);
  border-top: var(--grosor-filete) solid var(--oro-claro);
  max-width: var(--ancho-texto);
}
@media (min-width: 60rem) {
  .declaracion__cuerpo { margin-left: auto; }
}


/* --- Cinta de testimonios ----------------------------------------------
   Excepción deliberada a la regla de que nada se mueve solo. Se justifica
   porque es un patrón reconocido en la categoría y porque se detiene ante
   cualquier interacción: cursor encima, foco de teclado o preferencia de
   movimiento reducido.
   El conjunto de tarjetas va DUPLICADO en el HTML y la animación desplaza
   exactamente el 50%: así el bucle no tiene corte ni salto. El duplicado
   va con aria-hidden para que no se lea dos veces. */
.cinta {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-xs);
  /* Sangra hasta los bordes de la pantalla. Dentro de la columna de texto,
     las tarjetas se cortaban contra el margen y parecía un recorte, no una
     cinta que sigue de largo. */
  margin-inline: calc(-1 * var(--margen-lateral));
  padding-inline: var(--margen-lateral);
}
.cinta:focus-visible { outline: var(--grosor-filete-grueso) solid var(--oro); outline-offset: 4px; }

.cinta__pista {
  display: flex;
  gap: var(--e-l);
  width: max-content;
  animation: cinta-desplazar 72s linear infinite;
}
.cinta:hover .cinta__pista,
.cinta:focus-within .cinta__pista,
.cinta:focus .cinta__pista { animation-play-state: paused; }

@keyframes cinta-desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testimonio {
  flex: 0 0 min(24rem, 78vw);
  padding: var(--e-l);
  background-color: var(--papel);
  border-left: var(--grosor-filete) solid var(--oro);
  border-radius: var(--radio-caja);
}

/* Sobre una sección en tono papel, la tarjeta en papel desaparece: es el
   mismo color y lo único que queda es el filete dorado suelto. En el
   inicio los testimonios van en sección papel, así que ahí la tarjeta se
   pone en blanco y vuelve a leerse como un objeto. */
.seccion--papel .testimonio { background-color: var(--blanco); }
.seccion--oscura .testimonio {
  background-color: color-mix(in srgb, var(--crema) 8%, transparent);
  border-left-color: var(--oro-claro);
}
.seccion--oscura .testimonio__cita  { color: var(--texto-oscuro-fondo); }
.seccion--oscura .testimonio__autor { color: var(--oro-claro); }
.testimonio__cita {
  font-family: var(--tipo-display);
  font-weight: var(--peso-display);
  font-size: var(--t-sub-menor);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--texto);
  margin: 0 0 var(--e-m);
  max-width: none;
}
.testimonio__autor {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-texto);
  margin: 0;
  max-width: none;
}

/* Sin movimiento: deja de ser cinta y pasa a ser una lista que se arrastra
   con el dedo. Es una versión válida, no una degradada. */
@media (prefers-reduced-motion: reduce) {
  .cinta { overflow-x: auto; scroll-snap-type: x mandatory; }
  .cinta__pista { animation: none; }
  .testimonio { scroll-snap-align: start; }
  .cinta__pista > [aria-hidden="true"] { display: none; }
}


/* --- Los cuatro principios del enfoque -------------------------------- */
.principios { display: grid; gap: 0; }
.principio {
  padding-block: var(--e-l);
  border-bottom: var(--grosor-filete) solid var(--papel-hondo);
}
.principio:first-child { border-top: var(--grosor-filete) solid var(--oro); }
.principio__titulo { margin-bottom: var(--e-s); }


/* ==========================================================================
   17 · METODOLOGÍA Y CRUCE DE LA X
   La línea vertical avanza con el scroll. La X aparece UNA sola vez en
   todo el sitio, en el criterio de admisión.
   ========================================================================== */

.pilares { position: relative; }

/* En escritorio la línea de tiempo comparte la fila con un índice fijo a la
   derecha. Antes esa mitad quedaba en blanco durante todo el recorrido: no
   era aire, era espacio desocupado. */
@media (min-width: 60rem) {
  .pilares {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    column-gap: var(--e-2xl);
    align-items: start;
  }
}
.pilares__lista { position: relative; }

/* --- Índice de progreso ------------------------------------------------
   Dice dónde va la persona y cuánto falta. En móvil se omite: no hay ancho
   y la línea de la izquierda ya cumple esa función. */
.indice-pilares { display: none; }
@media (min-width: 60rem) {
  .indice-pilares {
    display: block;
    position: sticky;
    top: calc(var(--alto-menu-esc) + var(--e-2xl));
    padding-left: var(--e-m);
    border-left: var(--grosor-filete) solid var(--papel-hondo);
  }
}
.indice-pilares__titulo { margin-bottom: var(--e-m); }
.indice-pilares__lista { counter-reset: none; }
.indice-pilares__item { border-top: var(--grosor-filete) solid var(--papel-hondo); }
.indice-pilares__item:first-child { border-top: var(--grosor-filete) solid var(--oro); }
.indice-pilares__enlace {
  display: flex;
  gap: var(--e-s);
  align-items: baseline;
  min-height: 3rem;
  padding-block: var(--e-s);
  color: var(--texto-suave);
  transition: color var(--dur-corta) var(--curva);
}
.indice-pilares__num {
  flex: none;
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.indice-pilares__texto { font-size: var(--t-micro); line-height: 1.4; }
.indice-pilares__item.es-activo .indice-pilares__enlace {
  color: var(--oro-texto);
  font-weight: var(--peso-medio);
}
.indice-pilares__enlace:hover { color: var(--texto); }
.indice-pilares__conteo {
  margin-top: var(--e-m);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: var(--track-rotulo);
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.indice-pilares__conteo b { color: var(--oro-texto); font-weight: var(--peso-medio); }

.pilares__riel {
  position: absolute;
  left: 0.55rem;
  top: 0;
  bottom: 0;
  width: var(--grosor-filete);
  background-color: var(--papel-hondo);
}
.pilares__riel::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background-color: var(--oro);
  transform: scaleY(var(--avance, 0));
  transform-origin: center top;
}

.pilar {
  position: relative;
  padding-left: 2.5rem;
  padding-block: var(--e-xl);
  opacity: 0.55;
  transition: opacity var(--dur-media) var(--curva);
}
.pilar.es-activo { opacity: 1; }
.pilar::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--e-xl) + 1.4rem);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: var(--grosor-filete) solid var(--oro);
  background-color: var(--blanco);
  transition: background-color var(--dur-media) var(--curva);
}
.pilar.es-activo::before { background-color: var(--oro); }

/* El numeral fantasma del pilar arranca donde arranca el texto: si nace en
   el borde del bloque queda montado sobre la línea vertical de la izquierda. */
/* En el pilar el fantasma va a la derecha, donde no hay nada: así no se
   monta sobre la línea vertical ni repite la cifra pequeña. */
.pilar .numero-fondo { left: auto; right: 0; }

.pilar__entrega {
  margin-top: var(--e-m);
  padding-left: var(--e-m);
  border-left: var(--grosor-filete) solid var(--oro);
  font-size: var(--t-cuerpo);
}

@media (min-width: 60rem) {
  .pilar { padding-left: 4rem; }
  .pilares__riel { left: 0.55rem; }
}

/* --- La ruptura: el cruce de la X -------------------------------------
   Única aparición mayor en todo el sitio. Va en una banda propia ENTRE el
   encabezado y las dos columnas enfrentadas: los dos trazos bajan desde
   esquinas opuestas, se cruzan en el centro y de ahí las dos columnas
   cuelgan a lado y lado. No pasa por encima del texto.

   Se dibuja con transform sobre dos barras, no con stroke-dasharray en un
   SVG: `pathLength` y `vector-effect: non-scaling-stroke` no se componen
   (el navegador calcula los guiones en pixeles y la línea sale partida en
   pedacitos), y con preserveAspectRatio="none" el trazo se deforma.
   Como la banda tiene proporción fija, el ángulo y el largo son conocidos
   y se declaran acá. Si cambia la proporción, hay que recalcular los dos:
     angulo = atan(alto / ancho)      largo = hipotenusa / ancho          */
.cruce {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  --angulo: 26.565deg;   /* proporción 2:1 */
  --largo:  1.118;
  margin-bottom: var(--e-2xl);
}
@media (min-width: 48rem) {
  .cruce {
    aspect-ratio: 4 / 1;
    --angulo: 14.036deg; /* proporción 4:1 */
    --largo:  1.0308;
  }
}

.cruce__trazo {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--oro);
  /* Estado por defecto: dibujado. Si el script falla, la X se ve completa. */
}
.cruce__trazo--a {
  left: 0;
  transform-origin: left center;
  transform: rotate(var(--angulo)) scaleX(var(--largo));
}
.cruce__trazo--b {
  right: 0;
  transform-origin: right center;
  transform: rotate(calc(-1 * var(--angulo))) scaleX(var(--largo));
}
/* Con movimiento activo, el avance lo manda el scroll desde scripts.js */
.js-movimiento .cruce__trazo--a {
  transform: rotate(var(--angulo)) scaleX(calc(var(--largo) * var(--avance, 0)));
}
.js-movimiento .cruce__trazo--b {
  transform: rotate(calc(-1 * var(--angulo))) scaleX(calc(var(--largo) * var(--avance, 0)));
}

.cruce__nodo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  border-radius: 50%;
  background-color: var(--oro);
  opacity: var(--destello, 0);
  pointer-events: none;
  transition: opacity var(--dur-corta) var(--curva);
}

.criterio {
  position: relative;
  display: grid;
  gap: var(--e-xl);
}
@media (min-width: 60rem) {
  .criterio { grid-template-columns: 1fr 1fr; gap: var(--e-2xl); }
}
.criterio__lista li {
  position: relative;
  padding: var(--e-s) 0 var(--e-s) 1.75rem;
  border-bottom: var(--grosor-filete) solid var(--papel-hondo);
  line-height: 1.55;
}
.criterio__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.75rem;
  width: 0.75rem;
  height: var(--grosor-filete);
  background-color: var(--oro);
}


/* ==========================================================================
   18 · BLOQUE DE CIERRE
   Mismo diseño en las cinco páginas, titular distinto en cada una.
   ========================================================================== */

.cierre { background-color: var(--fondo-oscuro); color: var(--texto-oscuro-fondo); }
.cierre__interior { padding-block: var(--seccion-y); text-align: left; }
.cierre .display-seccion { color: var(--texto-oscuro-fondo); margin-block: var(--e-s) var(--e-m); }
.cierre .rotulo { color: var(--oro-claro); }
.cierre__nota {
  margin-top: var(--e-s);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: 0.06em;
  color: var(--texto-suave-oscuro-fondo);
}


/* ==========================================================================
   19 · PIE DE PÁGINA
   ========================================================================== */

.pie {
  background-color: var(--azul);
  color: var(--texto-oscuro-fondo);
  padding-block: var(--seccion-y-corta) var(--e-xl);
}
.pie a { color: var(--texto-oscuro-fondo); }

.pie__cuadricula {
  display: grid;
  gap: var(--e-xl);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .pie__cuadricula { grid-template-columns: 1.4fr 1fr 1fr; }
}

.pie__titulo {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-claro);
  margin-bottom: var(--e-m);
}
.pie__lista li { padding-block: 0.15rem; }
.pie__lista a,
.pie__boton-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;          /* 48px de área de toque, también en el pie */
  font-size: var(--t-cuerpo);
}

/* «Preferencias de cookies» es un <button> y no un <a> porque ejecuta una
   acción y no navega a ninguna parte. Se viste igual que sus vecinos para
   que la columna se lea como una sola lista. */
.pie__boton-enlace {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--tipo-cuerpo);
  color: var(--texto-suave-oscuro-fondo);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-corta) var(--curva);
}
.pie__boton-enlace:hover { color: var(--oro-claro); }
.pie__lista a:hover { color: var(--oro-claro); }

.pie__datos { font-size: var(--t-micro); line-height: 1.75; color: var(--texto-suave-oscuro-fondo); }
.pie__datos strong { color: var(--texto-oscuro-fondo); font-weight: var(--peso-medio); }
/* El correo y el teléfono del pie son botones de verdad: la gente los toca
   para llamar o escribir. Van con los mismos 48px de piso. */
.pie__datos a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  color: var(--texto-oscuro-fondo);
}
.pie__datos a:hover { color: var(--oro-claro); }

/* --- Redes sociales del pie ---------------------------------------------
   Escrito el 20/09/2026 y listo; el bloque del HTML está COMENTADO hasta
   que lleguen los enlaces oficiales de Instagram y Facebook.

   POR QUÉ SOLO EN EL PIE Y NO EN LA CABECERA. Arriba compiten con
   «Solicitar diagnóstico», que es la única acción que esa barra tiene que
   empujar, y son dos enlaces que sacan a la persona del sitio antes de
   que lea nada. En una firma de servicios profesionales las redes no son
   el producto: son una comprobación que el visitante hace DESPUÉS de
   leer, y por eso se buscan abajo. Tampoco van en el menú de móvil, que
   es una lista de destinos dentro del sitio.

   Área de toque de 48px como el correo y el teléfono de al lado. El
   icono mide 24 y el resto es aire, así que la lista se corre media
   caja a la izquierda para que el primer icono quede a ras del texto de
   arriba. */
.redes {
  display: flex;
  gap: var(--e-2xs);
  list-style: none;
  margin: 0;
  margin-inline-start: -0.75rem;
  padding: 0;
}
.redes__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--texto-oscuro-fondo);
  transition: color var(--dur-corta) var(--curva);
}
.redes__enlace:hover { color: var(--oro-claro); }
.redes__enlace svg { width: 1.5rem; height: 1.5rem; display: block; }


/* Marcador de dato pendiente de confirmar con el cliente. Visible a
   propósito: para que no se publique por accidente. */
.pendiente {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: 0.06em;
  color: var(--oro-claro);
  border-bottom: var(--grosor-filete) dashed var(--oro-claro);
}

/* El filete de cierre cruza todo el ancho, como la raya de una nota al pie
   en un documento. El texto sí queda con medida de línea. */
.pie__aviso {
  margin-top: var(--e-xl);
  padding-top: var(--e-m);
  border-top: var(--grosor-filete) solid var(--oro-claro);
}
.pie__aviso p {
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--texto-suave-oscuro-fondo);
  max-width: var(--ancho-texto);
}


/* ==========================================================================
   20 · MOVIMIENTO
   Regla dura: ningún texto depende de JavaScript para ser visible.
   Los estados iniciales solo se aplican cuando scripts.js pone la clase
   .js-movimiento en <html>. Si el script falla, todo el contenido se ve.
   Se animan únicamente transform, opacity y clip-path.
   ========================================================================== */

/* --- Revelado de titulares por máscara -------------------------------- */
/* SANGRE PARA LOS DESCENDENTES
   .linea-mascara lleva overflow:hidden porque es lo que esconde la línea
   antes de que suba. El problema: el descendente de la Caslon cae FUERA
   de la caja de línea, y overflow:hidden lo corta. Se le da aire abajo a
   la caja y se compensa con margen negativo, así el descendente cabe sin
   que cambie el espaciado entre líneas.

   OJO: la animación también tiene que bajar esa misma cantidad. Con
   translateY(105%) a secas y la caja más alta, el borde superior de las
   letras asomaba por abajo antes de revelarse. Por eso --sangre entra en
   las dos reglas. */
.linea-mascara {
  --sangre: 0.2em;
  display: block;
  overflow: hidden;
  padding-bottom: var(--sangre);
  margin-bottom: calc(-1 * var(--sangre));
}

.js-movimiento .linea-mascara > span {
  display: block;
  transform: translateY(calc(105% + var(--sangre)));
  transition: transform var(--dur-larga) var(--curva);
  transition-delay: calc(var(--indice, 0) * var(--desfase));
}
.js-movimiento .es-revelado .linea-mascara > span,
.js-movimiento .linea-mascara.es-revelado > span { transform: translateY(0); }

/* --- Revelado general de bloques -------------------------------------- */
.js-movimiento .revelar {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--dur-larga) var(--curva),
              transform var(--dur-larga) var(--curva);
  transition-delay: calc(var(--indice, 0) * var(--desfase));
}
.js-movimiento .revelar.es-revelado { opacity: 1; transform: translateY(0); }

/* --- Filetes que se trazan -------------------------------------------- */
.js-movimiento .filete-traza {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-filete) var(--curva);
}
.js-movimiento .filete-traza.es-revelado { transform: scaleX(1); }

.js-movimiento .filete-traza-v {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform var(--dur-filete) var(--curva);
}
.js-movimiento .filete-traza-v.es-revelado { transform: scaleY(1); }

/* --- Revelado de imágenes: barrido de máscara -------------------------- */
.js-movimiento .imagen-barrido { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-filete) var(--curva); }
.js-movimiento .imagen-barrido img { transform: scale(1.06); transition: transform var(--dur-filete) var(--curva); }
.js-movimiento .imagen-barrido.es-revelado { clip-path: inset(0 0 0 0); }
.js-movimiento .imagen-barrido.es-revelado img { transform: scale(1); }

/* --- Rótulo persistente al margen -------------------------------------
   Se queda quieto en la columna del margen mientras su sección se
   desplaza, y se va cuando la sección termina. Va pegado a la retícula,
   no flotando sobre la página: así nunca se cruza con otro rótulo.
   Aplíquelo al .rotulo de un bloque largo: class="rotulo rotulo--persistente"
   En móvil no aplica: el rótulo se apila encima del texto y se va con él. */
@media (min-width: 60rem) {
  .rotulo--persistente {
    position: sticky;
    top: calc(var(--alto-menu-esc) + var(--e-xl));
    align-self: start;
  }
}

/* --- Transición entre páginas ------------------------------------------
   El menú, el logo y el botón de WhatsApp NO se mueven. Ese contraste
   entre lo que permanece y lo que cambia produce la continuidad. */
@media (prefers-reduced-motion: no-preference) {
  /* Activa la transición nativa entre documentos. Los navegadores que no
     la soportan simplemente navegan como siempre. */
  @view-transition { navigation: auto; }

  ::view-transition-old(contenido) {
    animation: sale-arriba var(--dur-media) var(--curva) both;
  }
  ::view-transition-new(contenido) {
    animation: entra-abajo var(--dur-media) var(--curva) both;
  }
  ::view-transition-old(permanente),
  ::view-transition-new(permanente) { animation: none; mix-blend-mode: normal; }
}

.cabecera  { view-transition-name: permanente; }
.whatsapp  { view-transition-name: whatsapp; }
main       { view-transition-name: contenido; }

@keyframes sale-arriba {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-1.5rem); }
}
@keyframes entra-abajo {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Filete dorado que barre durante la transición, como línea de corte */
.linea-corte {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  width: 100%;
  height: var(--grosor-filete);
  background-color: var(--oro);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.linea-corte.esta-barriendo {
  animation: barre-corte var(--dur-media) var(--curva) both;
}
@keyframes barre-corte {
  0%   { transform: scaleX(0); transform-origin: left center; }
  50%  { transform: scaleX(1); transform-origin: left center; }
  51%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}


/* ==========================================================================
   21 · MOVIMIENTO REDUCIDO
   Es una versión válida del sitio, no una versión degradada.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .js-movimiento .revelar,
  .js-movimiento .linea-mascara > span,
  .js-movimiento .filete-traza,
  .js-movimiento .filete-traza-v,
  .js-movimiento .imagen-barrido,
  .js-movimiento .imagen-barrido img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .pilar { opacity: 1; }
  .cruce__trazo--a { transform: rotate(var(--angulo)) scaleX(var(--largo)) !important; }
  .cruce__trazo--b { transform: rotate(calc(-1 * var(--angulo))) scaleX(var(--largo)) !important; }
  .cruce__nodo { opacity: 1; }
  .linea-corte { display: none; }
}


/* ==========================================================================
   22 · UTILIDADES
   ========================================================================== */

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mt-xs { margin-top: var(--e-xs); }
.mt-s  { margin-top: var(--e-s); }
.mt-m  { margin-top: var(--e-m); }
.mt-l  { margin-top: var(--e-l); }
.mt-xl { margin-top: var(--e-xl); }

.mb-s  { margin-bottom: var(--e-s); }
.mb-m  { margin-bottom: var(--e-m); }
.mb-l  { margin-bottom: var(--e-l); }
.mb-xl { margin-bottom: var(--e-xl); }

.ancho-completo { max-width: none; }


/* ==========================================================================
   20 · AVISO DE COOKIES
   --------------------------------------------------------------------------
   Barra anclada abajo, no ventana modal: la persona puede seguir leyendo
   mientras decide. Y no atrapa el foco, por lo mismo.

   REGLA DURA: «Aceptar» y «Rechazar» tienen el MISMO tamaño, el mismo peso
   tipográfico y la misma altura. Lo único que los distingue es el relleno,
   y ninguno de los dos está tipográficamente por encima del otro. Hacer
   que rechazar cueste más trabajo que aceptar es un patrón oscuro, y el
   cliente es una firma de abogados: es justo lo que no puede permitirse.
   ========================================================================== */

.aviso-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-aviso);
  background-color: color-mix(in srgb, var(--fondo-oscuro) 92%, transparent);
  border-top: var(--grosor-filete) solid var(--oro-claro);
  color: var(--texto-oscuro-fondo);
  padding-block: var(--e-m);
  padding-bottom: calc(var(--e-m) + env(safe-area-inset-bottom, 0px));
  /* Sin JS este bloque nunca se muestra: lo destapa scripts.js, y solo
     cuando no hay decisión guardada. */
}

/* El desenfoque va aparte: si el navegador no lo soporta, el color de
   arriba ya garantiza el contraste por sí solo. */
@supports (backdrop-filter: blur(1px)) {
  .aviso-cookies {
    background-color: color-mix(in srgb, var(--fondo-oscuro) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* Entrada: 400ms deslizando desde abajo, con 1s de retraso.
   El retraso lo aplica scripts.js, no el CSS, para no animar algo que
   quizá nunca se muestre. */
.aviso-cookies {
  transform: translateY(100%);
  transition: transform 400ms var(--curva);
}
.aviso-cookies.es-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .aviso-cookies { transition: none; }
}

.aviso-cookies__interior {
  display: grid;
  gap: var(--e-m);
  align-items: start;
  position: relative;
}

.aviso-cookies__texto {
  /* 16px es el mínimo que pidió el encargo. El cuerpo del sitio va en 18,
     pero este bloque compite con el contenido y 16 lo asienta sin gritar. */
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto-oscuro-fondo);   /* crema sobre azul profundo: 13.9:1 */
  max-width: 60ch;
  margin: 0;
}
.aviso-cookies__texto + .aviso-cookies__texto { margin-top: var(--e-xs); }

.aviso-cookies__enlace {
  color: var(--oro-claro);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: var(--grosor-filete);
}
.aviso-cookies__enlace:hover { color: var(--crema); }

/* --- Los dos botones ---------------------------------------------------
   Mismo tamaño, mismo peso, misma altura. Ver la regla de arriba. */
.aviso-cookies__acciones {
  display: grid;
  gap: var(--e-xs);
}

.aviso-cookies__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;                    /* 48px */
  padding-inline: var(--e-m);
  border-radius: var(--radio-boton);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);     /* IDÉNTICO en los dos */
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--curva),
              color var(--dur-corta) var(--curva);
}

.aviso-cookies__boton--aceptar {
  background-color: var(--crema);
  border: var(--grosor-filete) solid var(--crema);
  color: var(--azul);
}
.aviso-cookies__boton--aceptar:hover { background-color: var(--blanco); }

.aviso-cookies__boton--rechazar {
  background-color: transparent;
  border: var(--grosor-filete) solid var(--oro-claro);
  color: var(--crema);
}
.aviso-cookies__boton--rechazar:hover {
  background-color: var(--oro-claro);
  color: var(--fondo-oscuro);
}

/* --- La equis ----------------------------------------------------------
   Equivale a rechazar, y así lo dice su nombre accesible. No es un
   «cerrar sin decidir»: cerrar sin decidir dejaría el sitio preguntando
   en cada página. */
.aviso-cookies__cerrar {
  position: absolute;
  top: 0; right: 0;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;           /* 48 x 48 */
  border: 0;
  background: none;
  color: var(--texto-suave-oscuro-fondo);
  cursor: pointer;
  transition: color var(--dur-corta) var(--curva);
}
.aviso-cookies__cerrar:hover { color: var(--crema); }
.aviso-cookies__cerrar svg { width: 1rem; height: 1rem; }

/* --- Móvil: los dos botones al ancho completo, apilados --------------- */
@media (max-width: 47.9375rem) {
  .aviso-cookies__interior { padding-right: 3rem; }   /* deja sitio a la equis */
  .aviso-cookies__acciones { grid-template-columns: 1fr; }
  .aviso-cookies__boton { width: 100%; }
  .aviso-cookies__texto { font-size: 1rem; }

  /* El texto es del cliente y son dos párrafos largos: medido a 390px, el
     aviso tapaba dos tercios de la pantalla y la persona no podía leer
     nada de la página mientras decidía.
     No se recorta el texto (no es nuestro) ni se esconde tras un «leer
     más» (esconder lo que se está consintiendo es justo lo que no se
     puede hacer): se le pone tope de alto al bloque de texto y se deja
     desplazar por dentro. Los dos botones quedan SIEMPRE a la vista, que
     es lo que importa.
     overscroll-behavior evita que al llegar al final del texto el gesto
     siga arrastrando la página de atrás. */
  .aviso-cookies__cuerpo {
    max-height: 32vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--e-xs);
  }
}

/* --- Escritorio: texto a la izquierda, botones a la derecha ----------- */
@media (min-width: 48rem) {
  .aviso-cookies__interior {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e-l);
    align-items: center;
    padding-right: 3rem;
  }
  .aviso-cookies__acciones {
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
    gap: var(--e-s);
  }
}

/* --- Coordinación con lo que ya vive abajo ----------------------------
   El botón de WhatsApp sube el alto real del aviso. La barra de acción
   NO se apila encima: mientras el aviso está, la barra no se muestra.
   Se decidió así (y no apilando tres cosas) porque en 390px tres barras
   superpuestas dejan la página sin sitio para leer, y porque el momento
   del aviso es un momento de decisión: dos llamados a la acción
   compitiendo lo ensucian. Lo hace scripts.js en evaluarBarra(). */
body.aviso-cookies-visible .whatsapp {
  transform: translateY(calc(-1 * var(--alto-aviso) - var(--e-s)));
}


/* ==========================================================================
   21 · SELECTOR DE IDIOMA
   --------------------------------------------------------------------------
   Discreto a propósito: va después del menú, separado por un filete
   vertical. El idioma activo lleva filete dorado debajo, el mismo recurso
   que marca la página activa en el menú. No es un desplegable: con dos
   idiomas, un desplegable es un clic de más para nada.
   ========================================================================== */

.idioma {
  display: flex;
  align-items: center;
  gap: var(--e-2xs);
  margin-left: var(--e-m);
  padding-left: var(--e-m);
  border-left: var(--grosor-filete) solid var(--papel-hondo);
}

/* En móvil el selector vive dentro del panel desplegable, no en la barra:
   en 390px no cabe junto al logotipo y al botón de menú. */
.cabecera__interior > .idioma { display: none; }
@media (min-width: 76rem) {
  .cabecera__interior > .idioma { display: flex; }
}

.idioma__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 3rem;                    /* 48px de área de toque */
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.idioma__enlace:hover { color: var(--texto); }

/* Idioma activo: filete dorado permanente, igual que la página activa. */
.idioma__enlace[aria-current="true"] { color: var(--oro-texto); }
.idioma__enlace[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0.4rem; right: 0.4rem; bottom: 0.7rem;
  height: var(--grosor-filete);
  background-color: var(--oro);
}

/* Desactivado mientras no exista el inglés. Va SIN href: un <a> sin href
   no es enfocable ni pulsable, que es exactamente lo que queremos, y no
   depende de JavaScript para no llevar a ningún lado. scripts.js le pone
   el href cuando se activa el interruptor. */
.idioma__enlace[aria-disabled="true"] {
  color: var(--apagado);
  cursor: not-allowed;
}
.idioma__enlace[aria-disabled="true"]:hover { color: var(--apagado); }

.cabecera--oscura .idioma { border-left-color: var(--filete-oscuro-fondo); }
.cabecera--oscura .idioma__enlace { color: var(--texto-suave-oscuro-fondo); }
.cabecera--oscura .idioma__enlace:hover { color: var(--crema); }
.cabecera--oscura .idioma__enlace[aria-current="true"] { color: var(--oro-claro); }
.cabecera--oscura .idioma__enlace[aria-current="true"]::after { background-color: var(--oro-claro); }
.cabecera--oscura .idioma__enlace[aria-disabled="true"] { color: var(--apagado-oscuro-fondo); }

/* En el panel móvil el selector va al final, con su propio filete arriba. */
.menu-movil .idioma {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  border-top: var(--grosor-filete) solid var(--papel-hondo);
  margin-top: var(--e-s);
  padding-top: var(--e-s);
}


/* ==========================================================================
   22 · DOCUMENTO LEGAL
   --------------------------------------------------------------------------
   Una sola columna, medida corta, mucho aire. Sin numerales decorativos,
   sin marca de agua, sin imágenes: es un documento que puede terminar
   impreso o citado, y todo lo demás estorba.

   La medida se fija en 66 caracteres (dentro del rango 60-70 que se pidió)
   con la unidad ch, que se calcula sobre el ancho del cero de la fuente
   real y no sobre una estimación en rem.
   ========================================================================== */

.documento {
  --ancho-documento: 66ch;
  max-width: var(--ancho-documento);
  margin-inline: auto;
}

.documento > * + * { margin-top: var(--e-m); }

.documento p,
.documento li {
  font-size: var(--t-cuerpo);
  line-height: var(--interlinea-cuerpo);
  color: var(--texto);
  max-width: none;
}

/* Una dirección web completa es una sola «palabra» que no se parte. La
   del punto 11 de cookies medía 371px en un espacio de 346 a 390, pero
   solo con la fuente de respaldo, antes de que cargue la web: el
   desborde salía y no salía según la red (DECISIONES 36). Medido con
   Google Fonts bloqueado; con esto no se sale en ningún estado. */
.documento a { overflow-wrap: anywhere; }

/* Jerarquía: h2 para los numerales de primer nivel, h3 para las letras.
   El aire de arriba es mayor que el de abajo para que cada bloque se lea
   pegado a su propio título y no al párrafo anterior. */
.documento h2 {
  margin-top: var(--e-2xl);
  margin-bottom: var(--e-s);
  font-family: var(--tipo-display);
  font-size: var(--t-sub);
  font-weight: 400;
  line-height: 1.25;
  color: var(--azul);
}
.documento h2:first-child { margin-top: 0; }

.documento h3 {
  margin-top: var(--e-l);
  margin-bottom: var(--e-xs);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-texto);
}

/* Filete dorado bajo cada numeral de primer nivel: el mismo recurso del
   resto del sitio, que acá además separa visualmente las secciones. */
.documento h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: var(--grosor-filete);
  margin-top: var(--e-xs);
  background-color: var(--oro);
}

.documento ul { list-style: none; padding: 0; }
.documento ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: var(--e-2xs);
}
/* El marcador va posicionado y NO con display:flex en el <li>: con flex,
   un <em> o un <strong> dentro se convierte en otro elemento flex y abre
   un hueco a mitad de frase. Ya pasó una vez en este sitio. */
.documento ul li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.85em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background-color: var(--oro);
}

.documento__vigencia {
  margin-top: var(--e-2xl);
  padding-top: var(--e-m);
  border-top: var(--grosor-filete) solid var(--papel-hondo);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Índice de secciones al principio: ayuda en un documento de trece puntos
   y en móvil evita el desplazamiento a ciegas. */
.documento__indice {
  margin-bottom: var(--e-2xl);
  padding: var(--e-m);
  background-color: var(--papel);
  border-left: var(--grosor-filete-grueso) solid var(--oro);
}
.documento__indice ol {
  list-style: none;
  padding: 0;
  margin: var(--e-xs) 0 0;
  columns: 2;
  column-gap: var(--e-l);
}
@media (max-width: 37.4375rem) { .documento__indice ol { columns: 1; } }
.documento__indice li { margin-top: 0; break-inside: avoid; }
.documento__indice a {
  display: flex;
  align-items: center;
  min-height: 3rem;          /* 48px. Medido, antes eran 17 */
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--texto-suave);
  text-decoration: none;
}
.documento__indice a:hover { color: var(--oro-texto); text-decoration: underline; }


/* ==========================================================================
   23 · FRANJA OSCURA CONTINUA
   --------------------------------------------------------------------------
   Dos secciones seguidas que comparten fondo oscuro y se leen como UNA
   sola franja: sin el corte de aire que normalmente las separa.
   Se usa en el inicio para que las seis razones cierren con el lema de la
   firma sin que aparezca una costura entre los dos bloques.
   ========================================================================== */

.seccion--sin-cierre  { padding-bottom: 0; }
.seccion--sin-apertura { padding-top: 0; }


/* ==========================================================================
   24 · LAS SEIS RAZONES SOBRE FONDO OSCURO
   --------------------------------------------------------------------------
   OJO, ESTA ES LA TRAMPA DE ESPECIFICIDAD DE SIEMPRE.
   .razon__titulo tiene especificidad (0,1,0) y no existe ninguna regla
   .seccion--oscura h3 que la gane: sin este bloque, los seis títulos
   quedaban en azul marino sobre azul marino. Ya pasó una vez con .paso p,
   que daba 2.09:1.
   Van con .seccion--oscura por delante y DESPUÉS de la regla original.
   ========================================================================== */

.seccion--oscura .razon__titulo { color: var(--texto-oscuro-fondo); }
.seccion--oscura .razon p       { color: var(--texto-suave-oscuro-fondo); }
.seccion--oscura .razon__numero { color: var(--oro-claro); }


/* ==========================================================================
   25 · MARCA DE ESPACIO EN CONSTRUCCIÓN
   --------------------------------------------------------------------------
   Para los bloques que están armados y esperando contenido del cliente:
   los testimonios y los logos. Deja claro de un vistazo que es un espacio
   preparado a propósito y no un error de la página.
   Se quita borrando la etiqueta; no hay nada más que limpiar.
   ========================================================================== */

.marca-obra {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border: var(--grosor-filete) solid var(--oro);
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-texto);
}
.marca-obra::before {
  content: "";
  width: 6px; height: 6px;
  background-color: var(--oro);
  flex: none;
}
.seccion--oscura .marca-obra,
.cierre .marca-obra {
  border-color: var(--oro-claro);
  color: var(--oro-claro);
}
.seccion--oscura .marca-obra::before { background-color: var(--oro-claro); }


/* ==========================================================================
   26 · FRANJA DE LOGOS DE CLIENTES
   --------------------------------------------------------------------------
   Escala de grises y opacidad reducida: los logos ajenos no pueden
   competir con la paleta de la firma. Suben a color y opacidad plena al
   pasar el cursor, uno a uno.

   SI EL CLIENTE NO PUEDE MOSTRAR LOGOS POR CONFIDENCIALIDAD, la sección
   se borra entera en index.html: está marcada con un comentario de
   apertura y otro de cierre, y no hay nada más que tocar. Estas reglas se
   pueden quedar sin usar, no estorban.
   ========================================================================== */

.logos {
  /* Fila única, juntos y centrados, como una franja de prensa (pedido
     de Juan Ma del 18/09 con referencia visual): flex y no retícula,
     así los logos se agrupan en vez de repartirse por todo el ancho, y
     la misma estructura sirve el día que esto se vuelva cinta en
     movimiento. En móvil la fila se parte sola en dos. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e-m) clamp(1.5rem, 5vw, 3.5rem);
}

.logo-cliente {
  display: grid;
  place-items: center;
  /* SIN CAJA y SIN celda de proporción fija desde el 18/09/2026, a
     pedido de Juan Ma: el logo va suelto, dimensionado por la regla de
     la imagen de abajo. Si algún día vuelve la caja del andamio (para
     espacios vacíos), era: aspect-ratio 5/2 + padding e-xs + fondo
     papel + filete oro. */
  transition: transform var(--dur-corta) var(--curva);
}

/* A TODO COLOR, desde el 20/09/2026 y a pedido de Juan Ma.

   Antes iban en escala de grises al 55% y recuperaban el color al pasar
   el mouse. Se veía bien, pero escondía el logo de quien confió en la
   firma detrás de un efecto, y en un teléfono —donde no hay mouse— no se
   recuperaba nunca: la mitad de los visitantes veía cuatro manchas
   grises. Ahora se ven como son.

   Lo que queda al pasar el mouse es el crecimiento, y solo eso. Va con
   tres condiciones:
     · @media (hover: hover) → en un teléfono un :hover se queda pegado
       después de tocar, y un logo agrandado que no se desagranda parece
       un error.
     · :focus-within → quien navegue con tabulador ve lo mismo. Hoy los
       logos no son enlaces y no reciben foco, pero el día que lo sean ya
       está resuelto.
     · prefers-reduced-motion → sin movimiento no crece. No se pierde
       nada: el logo no es un control y el crecimiento no informa de
       nada, es gusto.

   El carrusel infinito en móvil se decidió el 20/09 y NO se hizo: con
   cuatro logos el bucle repite el mismo cada pocos segundos y se lee
   como error. Se monta cuando el cliente mande seis u ocho, a una vuelta
   cada 40 segundos. Ver DECISIONES sección 34. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .logo-cliente:has(img):hover,
  .logo-cliente:has(img):focus-within {
    transform: scale(1.08);
  }
}

/* Los PNG van recortados al contenido (sin lienzo común), así que la
   alineación la da la ALTURA: tope de 4.5rem para todos, y el ancho se
   acomoda solo guardando la proporción. Así un logo cuadrado (el sello
   del Colegio Médico) y uno apaisado (AV Wellness) pesan parecido a la
   vista. El tope de ancho frena a los apaisados en pantallas chicas. */
.logo-cliente img {
  width: auto;
  height: auto;
  max-width: min(42vw, 14rem);
  max-height: 3.75rem;
}

/* Etiqueta del espacio vacío. Desaparece sola en cuanto se pone un <img>:
   se borra la etiqueta junto con el marcador. */
.logo-cliente__etiqueta {
  font-family: var(--tipo-rotulo);
  font-size: 0.6875rem;              /* 11px. Es una etiqueta de andamio */
  font-weight: var(--peso-rotulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro-texto);
  text-align: center;
  margin: 0;
  max-width: none;
}


/* ==========================================================================
   27 · SELECTOR DE JURISDICCIÓN (servicios.html)
   --------------------------------------------------------------------------
   Esto NO es un filtro de utilidad: es el momento más fuerte de la página.
   Dos ordenamientos que se cruzan, que es el concepto de la X del logotipo
   y el mismo eje dorado del díptico del inicio.

   Y nombra las dos sociedades, que era la preocupación real del cliente:
   que un empresario colombiano no supiera cuál de las dos lo atiende.

   FILTRA SIN JAVASCRIPT: dos casillas nativas y :has(). Si el navegador no
   soporta :has() (anterior a 2023), no filtra y se ven todos los
   servicios, que es el estado correcto por defecto.
   ========================================================================== */

.jurisdicciones {
  /* Franja oscura de ancho completo: sangra fuera del contenedor por los
     dos lados para que el bloque pese lo que tiene que pesar. */
  position: relative;
  margin-inline: calc(-1 * var(--margen-lateral));
  margin-bottom: var(--e-2xl);
  padding: var(--seccion-y-corta) var(--margen-lateral);
  background-color: var(--fondo-oscuro);
  color: var(--texto-oscuro-fondo);
}

/* Lleva también la clase .rotulo: ES un rótulo —14px, versalitas, mismo
   tracking— y decirlo en el marcado evita repetir sus seis declaraciones
   acá y lo deja dentro de la categoría que el sistema ya tiene definida
   para el microtexto en oro. */
.jurisdicciones__pregunta {
  margin: 0 0 var(--e-l);
  max-width: none;
  color: var(--oro-claro);
}

/* --- Los dos paneles --------------------------------------------------- */
.jurisdicciones__panes {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-s);
}
@media (min-width: 48rem) {
  .jurisdicciones__panes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-l); }
}


/* El área seleccionable es el panel ENTERO, no un botón dentro de él. */
.jurisdiccion { position: relative; display: block; cursor: pointer; }
.jurisdiccion input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}

.jurisdiccion__cara {
  display: flex;
  flex-direction: column;
  gap: var(--e-2xs);
  min-height: 5.5rem;              /* 88px en móvil, como pide el encargo */
  padding: var(--e-m);
  background-color: var(--papel);
  border: var(--grosor-filete) solid var(--oro);
  /* La esquina redondeada la pidió Juan Ma el 20/09/2026. No hay que
     repetirla en el anillo del elegido ni en el foco: el box-shadow y el
     outline siguen el radio de la caja por su cuenta, y el anillo queda
     concéntrico porque suma su propio desplazamiento al radio. */
  border-radius: var(--radio-panel);
  transition: background-color var(--dur-corta) var(--curva),
              border-color var(--dur-corta) var(--curva),
              transform var(--dur-corta) var(--curva),
              opacity var(--dur-corta) var(--curva);
}

/* El color lo ponen los hijos, así que la transición va en los hijos: una
   transición de color en la cara no alcanza a un <span> que declara el
   suyo. Sin esto, el relleno se funde en 200ms y el texto salta de golpe. */
.jurisdiccion__rotulo,
.jurisdiccion__entidad,
.jurisdiccion__nota { transition: color var(--dur-corta) var(--curva); }
@media (min-width: 48rem) {
  .jurisdiccion__cara { min-height: 11rem; padding: var(--e-l); justify-content: center; }
}

.jurisdiccion__rotulo {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-texto);
}

/* El nombre de la sociedad en display serif: es el dato que el cliente
   necesitaba que se viera. */
.jurisdiccion__entidad {
  font-family: var(--tipo-display);
  font-weight: var(--peso-display);
  font-size: var(--t-sub);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--azul);
}

.jurisdiccion__nota {
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--texto-suave);
  max-width: 34ch;
}

/* --- Estado activo -----------------------------------------------------
   REHECHO el 18/09/2026 a pedido de Juan Ma (DECISIONES sección 33).
   La versión anterior ponía el panel elegido en azul sólido, y sobre la
   banda azul profundo el elegido quedaba casi del color del fondo: el
   cambio no se apreciaba. Ahora es al revés y la distinción es de
   RELLENO contra CONTORNO, que sí se ve a un metro:

     · elegido    → conserva el relleno claro (papel), con un marco
                    dorado doble (el anillo va en box-shadow para no
                    mover el layout ni un píxel);
     · no elegido → pierde el relleno: fondo transparente y filete
                    dorado apagado (la regla de abajo, que ya existía).

   SEGUNDA VUELTA, 20/09/2026, también a pedido de Juan Ma: que el panel
   elegido se llene de dorado y crezca un poco, como el botón «Solicitar
   diagnóstico» al pasarle el mouse. Se conserva el anillo, que es lo que
   despega el panel del fondo.

   El dorado NO es el del botón. El botón se llena con --oro-claro y pone
   el texto en azul profundo: 6.9:1, que en un botón cumple (es un rótulo
   de 14px en versalitas) pero en un panel no, porque acá hay una nota de
   texto de lectura. El relleno va con --oro-relleno, que es el mismo
   dorado 1.6% más claro que el sitio ya tenía para este problema
   exacto. MEDIDO sobre ese relleno, los tres textos en --fondo-oscuro:
   7.1:1.

   El crecimiento es de 1.5%, y es transform: no mueve el layout ni
   empuja a nadie. A 390 el panel crece 2.5px por lado y el bloque tiene
   20px de margen lateral, así que no puede desbordar. Medido, y
   `filtro.py` lo comprueba en los cuatro estados.

   Con «reducir movimiento» activado no crece: el relleno dorado y el
   anillo ya dicen cuál está elegido, así que la animación es lo único
   que sobra. */
.jurisdiccion input:checked + .jurisdiccion__cara {
  background-color: var(--oro-relleno);
  border-color: var(--oro-relleno);
  box-shadow: 0 0 0 4px var(--fondo-oscuro), 0 0 0 5px var(--oro-claro);
}

/* Los tres textos pasan al azul profundo. Se pierde el color como
   jerarquía (rótulo dorado, nombre azul, nota gris) y la sostienen el
   tamaño y el peso, que es como debe ser sobre un fondo de acento. */
.jurisdiccion input:checked + .jurisdiccion__cara .jurisdiccion__rotulo,
.jurisdiccion input:checked + .jurisdiccion__cara .jurisdiccion__entidad,
.jurisdiccion input:checked + .jurisdiccion__cara .jurisdiccion__nota {
  color: var(--fondo-oscuro);
}

@media (prefers-reduced-motion: no-preference) {
  .jurisdiccion input:checked + .jurisdiccion__cara { transform: scale(1.015); }
}

/* El foco va más afuera que el anillo de selección (que llega a 5px),
   para que un panel elegido Y enfocado muestre las dos cosas. */
.jurisdiccion input:focus-visible + .jurisdiccion__cara {
  outline: var(--grosor-filete-grueso) solid var(--oro-claro);
  outline-offset: 8px;
}

/* --- El panel NO elegido -----------------------------------------------
   El encargo pedía opacidad 0.45. Se probó y NO sirve acá: sobre la banda
   azul profundo, un panel en tono papel al 45% se convierte en gris
   sucio y el texto baja de 3:1. Sería un panel que no se puede leer, no
   un panel secundario.

   Se consigue lo mismo de otra forma: el panel no elegido pasa a la
   superficie de la banda —fondo transparente y filete dorado apagado—
   mientras el elegido queda en azul sólido. Relleno contra contorno es
   una distinción fuerte y no cuesta ni un punto de contraste.

   TAMPOCO se le bajó la opacidad al texto. Se probó con 0.75 y la línea
   de contexto caía a 5.8:1, por debajo del 7:1 que este sitio le exige
   al cuerpo. Un panel secundario se puede leer; uno ilegible no es
   secundario, es un error.
   Solo aplica cuando hay EXACTAMENTE uno elegido: con los dos marcados
   no se apaga ninguno. */
.jurisdicciones__panes:has(input:checked) .jurisdiccion:not(:has(input:checked)) .jurisdiccion__cara {
  background-color: transparent;
  border-color: var(--oro-apagado);
}
.jurisdicciones__panes:has(input:checked) .jurisdiccion:not(:has(input:checked)) .jurisdiccion__rotulo { color: var(--oro-claro); }
.jurisdicciones__panes:has(input:checked) .jurisdiccion:not(:has(input:checked)) .jurisdiccion__entidad { color: var(--crema); }
.jurisdicciones__panes:has(input:checked) .jurisdiccion:not(:has(input:checked)) .jurisdiccion__nota { color: var(--texto-suave-oscuro-fondo); }
/* Con los dos marcados no hay «no elegido»: la regla de arriba no entra. */

/* --- Franja de estado ---------------------------------------------------
   Oculta por defecto. CSS muestra la que corresponde según la casilla
   marcada. Las dos versiones viven en el HTML porque sin JavaScript no
   hay otra forma de cambiar un texto. */
.jurisdicciones__estado { display: none; }

/* Las cuatro combinaciones posibles, y siempre hay UNA franja visible:
     ninguna marcada ...... «todo»   (el estado de salida)
     solo Colombia ........ «co»
     solo Estados Unidos .. «us»
     las dos marcadas ..... «todo»   (se ve lo mismo que sin marcar nada)
   Las dos últimas líneas se añadieron el 20/09/2026 con la franja de
   «todo». Ver la nota del HTML. */
.jurisdicciones:has(#jur-co:checked):not(:has(#jur-us:checked)) [data-estado="co"],
.jurisdicciones:has(#jur-us:checked):not(:has(#jur-co:checked)) [data-estado="us"],
.jurisdicciones:not(:has(input:checked)) [data-estado="todo"],
.jurisdicciones:has(#jur-co:checked):has(#jur-us:checked) [data-estado="todo"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-xs) var(--e-m);
  margin: var(--e-l) 0 0;
  padding-top: var(--e-m);
  border-top: var(--grosor-filete) solid var(--oro-claro);
  max-width: none;
  font-size: var(--t-micro);
  color: var(--texto-suave-oscuro-fondo);
}
.jurisdicciones__estado strong { color: var(--crema); font-weight: var(--peso-medio); }

.jurisdicciones__conteo {
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--oro-claro);
}

/* La ayuda del estado «todo». No es un enlace y no debe parecerlo: se
   queda en el color de la franja, mientras «Ver todos los servicios» va
   en crema y subrayado. Y ocupa su propia línea en cualquier ancho: es
   una instrucción, no otro dato de la franja. Sin esto, a 1920 se
   acomodaba al lado del conteo y se leía como parte de él. */
.jurisdicciones__ayuda { flex-basis: 100%; }

/* «Ver todos los servicios» es un <label for> y no un botón: sin
   JavaScript un botón no puede desmarcar una casilla. Se viste como
   enlace y se le da área de toque. */
.jurisdicciones__volver {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-family: var(--tipo-rotulo);
  font-size: var(--t-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--crema);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--oro-claro);
  cursor: pointer;
}
.jurisdicciones__volver:hover { color: var(--oro-claro); }


/* ══════════════════════════════════════════════════════════════════════════
   EL REPARTO — ESTE ES EL ÚNICO LUGAR QUE SE TOCA

   ⚠ PROVISIONAL, POR CONFIRMAR CON EL CLIENTE.

   Cómo leerlo: cada lista contiene lo que se ESCONDE cuando la persona
   elige la OTRA jurisdicción. Un servicio que no aparezca en ninguna de
   las dos listas se ve siempre, en las dos.

     1.1 Estructuración internacional ......... las dos
     1.2 Tributación internacional y de EE.UU.  solo Estados Unidos  (LLC)
     1.3 Régimen cambiario .................... solo Colombia        (SAS)
     1.4 Tributación en Colombia .............. solo Colombia        (SAS)
     1.5 Inversión extranjera ................. las dos
     1.6 Coordinación internacional ........... las dos
     Red de aliados ........................... solo Colombia        (SAS)

   SI CAMBIA EL REPARTO, CAMBIE TAMBIÉN EL CONTEO de la franja de estado
   en servicios.html: hoy dice «Cinco líneas» para Colombia y «Cuatro»
   para Estados Unidos. Es texto, no se calcula solo.
   ══════════════════════════════════════════════════════════════════════════ */

/* SOLO COLOMBIA — se esconde cuando la persona elige únicamente EE.UU. */
body:has(#jur-us:checked):not(:has(#jur-co:checked)) :is(
  #regimen-cambiario,
  #tributacion-colombia,
  #red-aliados
) { display: none; }

/* SOLO ESTADOS UNIDOS — se esconde cuando elige únicamente Colombia. */
body:has(#jur-co:checked):not(:has(#jur-us:checked)) :is(
  #tributacion-estados-unidos
) { display: none; }


/* ==========================================================================
   28 · RITMO DE FONDOS DENTRO DE LA LISTA DE SERVICIOS
   --------------------------------------------------------------------------
   La página era clara de arriba abajo y se sentía plana. Los servicios
   alternan claro, papel y oscuro, y 1.2 —el más denso y el más
   impresionante técnicamente— va sobre fondo oscuro y se convierte en el
   bloque protagonista.

   Cada servicio sangra fuera del contenedor para que su fondo llegue a los
   bordes de la pantalla. Es la misma técnica de .jurisdicciones.
   ========================================================================== */

.servicio--papel,
.servicio--oscuro {
  margin-inline: calc(-1 * var(--margen-lateral));
  padding-inline: var(--margen-lateral);
  border-top: 0;
}
.servicio--papel  { background-color: var(--papel); }
.servicio--oscuro {
  background-color: var(--fondo-oscuro);
  color: var(--texto-oscuro-fondo);
  padding-block: var(--seccion-y-corta);
}

/* OJO · LA TRAMPA DE ESPECIFICIDAD, OTRA VEZ.
   .servicio__titulo, .servicio__promesa y .lista-tecnica li tienen todos
   especificidad de clase y NO existe ninguna regla .seccion--oscura que
   los gane. Sin este bloque, el servicio 1.2 quedaba en azul marino
   sobre azul marino. Es el cuarto componente al que le pasa: .paso p,
   .razon__titulo, .testimonio y ahora este.
   Regla: todo componente que pueda ir sobre fondo oscuro necesita su
   variante escrita a mano, y hay que medirla. */
.servicio--oscuro .servicio__titulo  { color: var(--texto-oscuro-fondo); }
.servicio--oscuro .servicio__promesa { color: var(--oro-cuerpo-oscuro); }
.servicio--oscuro .servicio__numero  { color: var(--oro-claro); }
.servicio--oscuro .lista-tecnica li {
  color: var(--texto-oscuro-fondo);
  border-bottom-color: var(--filete-oscuro-fondo);
}
.servicio--oscuro .lista-tecnica li::before { background-color: var(--oro-claro); }
.servicio--oscuro .servicio__texto   { color: var(--texto-suave-oscuro-fondo); }


/* ==========================================================================
   29 · MÁS PESO AL ORO DONDE ES ACENTO REAL
   --------------------------------------------------------------------------
   El oro estaba usado con demasiada timidez: filetes de un píxel que no
   se veían y numerales del tamaño de un rótulo cualquiera. Sube donde de
   verdad marca jerarquía, y en ningún otro lado.
   No se inventó ningún color: es la misma paleta.
   ========================================================================== */

/* Los numerales de sección y de servicio, más grandes y en oro.
   Los de servicio los escribe un contador desde el 20/09/2026 (ver «LA
   NUMERACIÓN SE RECALCULA SOLA»): siguen siendo contenido que el lector
   de pantalla anuncia, no una imagen ni un adorno detrás, pero ya no son
   texto del HTML. Por eso tampoco entran a la tabla de traducción, que es
   lo correcto: un número no se traduce. */
.servicio__numero {
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  color: var(--oro-texto);
}

/* El filete que separa un servicio de otro: de un píxel casi invisible a
   un filete dorado tenue. Marca el cambio de bloque sin gritar. */
.servicio { border-top-color: var(--oro-filete); }

/* Rótulos al margen: oro sobre claro, oro claro sobre oscuro. Ya era así
   en la mayoría de los casos; acá se cierra el que faltaba. */
.seccion--papel .rotulo { color: var(--oro-texto); }


/* La red de aliados pasó a fondo oscuro. Mismas variantes que el
   servicio 1.2, por la misma trampa de especificidad. */
.seccion--oscura .grupo-aliados__titulo { color: var(--texto-oscuro-fondo); }
.seccion--oscura .lista-tecnica li {
  color: var(--texto-oscuro-fondo);
  border-bottom-color: var(--filete-oscuro-fondo);
}
.seccion--oscura .lista-tecnica li::before { background-color: var(--oro-claro); }
.seccion--oscura .lista-tecnica li em { color: var(--oro-claro); }