@charset "utf-8";
/* ==========================================================================
   NewCo Legal — hoja de estilos única
   Tokens heredados del design system de NewCo Capital y Desarrollo.
   Los estilos que estaban inline en los artboards viven ahora aquí.
   ========================================================================== */

/* ---------- 1. Tipografía autohospedada ---------------------------------- */
/* Subconjunto latin. Los .woff2 se generan en el paso de assets (T1c). */
/* Instrument Sans es la compañera de Instrument Serif: mismo taller, mismo
   esqueleto y una caja más estrecha que la de Montserrat, que con su ojo
   geométrico y redondo peleaba contra la serifa condensada en cada tamaño.
   Es variable, así que un solo fichero de 30 KB cubre de 400 a 700 y
   sustituye a los cuatro estáticos anteriores (66 KB). */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ---------- 2. Tokens ----------------------------------------------------- */
:root {
  /* Marca */
  --verde: #41a62a;
  --verde-claro: #86b07a; /* acento sobre tinta: 6,7:1 */
  --verde-oscuro: #348721;
  --azul: #1f5b92;
  --azul-oscuro: #184974;
  /* Azul aclarado para fondo tinta: el de marca ahí queda por debajo de AA. */
  --azul-claro: #6ea8dc;
  /* Tercer color, y solo para el código de familia de las herramientas.
     5,5:1 sobre papel y 7,2:1 sobre tinta. */
  --naranja: #a1560d;
  --naranja-claro: #d9a067;
  /* Único color de enlace del sitio. 5,3:1 sobre blanco y 5,0:1 sobre
     --papel-2. El azul de marca queda reservado a su papel semántico:
     marcar el lado inversor. */
  --verde-enlace: #46733e; /* acento sobre papel: 5,5:1 */

  /* Neutros */
  --tinta: #1f1f1f;
  --tinta-2: #3a3a3a;
  --tinta-3: #4a4a4a;
  /* #6b6b6b sobre blanco = 5.3:1. El #9a9a9a del artboard daba 2.6:1 y no pasaba AA. */
  --gris: #6b6b6b;
  --gris-suave: #757575;
  /* Un único gris de filete: dos tonos casi iguales solo se notaban como
     descuido. */
  --linea: #e3e1dd;
  --linea-fuerte: #e3e1dd;
  /* Un solo papel con tres profundidades, todas de la misma familia cálida.
     Con el blanco puro, el crema del despacho era el único tono templado de la
     página y esa sección parecía traída de otro sitio. */
  --papel: #fdfcfa;
  --papel-2: #f8f6f3;
  --papel-3: #f3f1ec;

  /* Sobre fondo oscuro. Mínimo .62 de opacidad para cumplir AA en texto. */
  --sobre-oscuro-1: rgba(255, 255, 255, 1);
  --sobre-oscuro-2: rgba(255, 255, 255, 0.78);
  --sobre-oscuro-3: rgba(255, 255, 255, 0.64);
  --borde-oscuro: rgba(255, 255, 255, 0.18);

  /* Tipos */
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Medidas */
  --ancho: 1280px;
  --ancho-texto: 760px;
  --alto-nav: 58px;
  --pad-x: 40px;
  /* Un único radio. La esquina «hoja» del isotipo se retiró: convivía con
     tres radios distintos y ninguna superficie de la home la justificaba. */
  --radio: 3px;
  --radio-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 720px) {
  :root {
    --pad-x: 20px;
  }
}

/* ---------- 3. Base ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--linea-fuerte);
}
a:hover {
  color: var(--tinta);
  text-decoration-color: currentColor;
}
.seccion-oscura a,
.pie a {
  color: var(--sobre-oscuro-2);
  text-decoration-color: rgba(255, 255, 255, 0.28);
}
.seccion-oscura a:hover,
.pie a:hover {
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3,
h4 {
  color: var(--tinta);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinta);
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

.contenedor {
  max-width: calc(var(--ancho) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.contenedor-texto {
  max-width: calc(var(--ancho-texto) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Etiqueta monoespaciada de sección */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.eyebrow-verde {
  color: var(--verde-enlace);
}

/* ---------- 4. Navegación ------------------------------------------------- */
/* Tinta plena, sin filete: con el 94 % de opacidad se veía una costura de
   medio tono justo donde la barra toca la portada. */
.nav-wrap {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--tinta);
}

/* Antes: `max-width: var(--ancho)` más padding, o sea 80 px menos que
   `.contenedor`. El logotipo caía en x=120 y la página en x=80. */
.nav {
  max-width: calc(var(--ancho) + var(--pad-x) * 2);
  margin-inline: auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex: none;
}
/* Versión en negativo generada del lockup original: «new» en blanco y
   «co», la hoja y «legal» en el verde de marca. El `brightness(0) invert(1)`
   que había antes aplanaba también el verde y dejaba «legal» como una
   mancha blanca de 5 px. Pendiente de sustituir por el SVG de marca. */
.nav-logo img {
  height: 34px;
  width: auto;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-menu a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--sobre-oscuro-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav-menu a:hover {
  color: #fff;
  text-decoration: none;
  border-bottom-color: var(--verde);
}
.nav-menu a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--verde);
}

.nav-toggle {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--borde-oscuro);
  border-radius: 6px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #fff;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav {
    flex-wrap: wrap;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--borde-oscuro);
  }
  .nav-menu.abierto {
    display: flex;
  }
  .nav-menu a {
    display: block;
    padding: 13px 2px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-menu li:last-child a {
    border-bottom: 0;
  }
}

/* ---------- 5. Secciones -------------------------------------------------- */
.seccion {
  padding: 112px 0;
  scroll-margin-top: var(--alto-nav);
}
.seccion-oscura {
  background: var(--tinta);
  color: var(--sobre-oscuro-3);
}
.seccion-oscura h2,
.seccion-oscura h3 {
  color: #fff;
}
.seccion-suave {
  background: var(--papel-2);
  border-block: 1px solid var(--linea);
}
/* Los tramos claros consecutivos se separan con un filete, no con un cambio
   de fondo: la página tiene dos tonos —tinta arriba y abajo, papel en medio—
   y el ritmo lo pone la estructura de cada sección. */
/* El filete divisorio va al ancho del contenedor, como todas las demás
   reglas de la página: a sangre entera desentonaba. */
.seccion-filete {
  border-top: 0;
  padding-top: 0;
}
.seccion-filete > .contenedor {
  border-top: 1px solid var(--linea);
  padding-top: 112px;
}
/* La habitación de papel cálido: el despacho. El cambio de tono ya separa;
   no necesita filete. */
.seccion-papel {
  background: var(--papel-3);
}

@media (max-width: 720px) {
  .seccion {
    padding: 64px 0;
  }
}

/* Una sola caja de etiqueta en versal para toda la página: 11 px, 600, .14
   de tracking. Con el ordinal se va también la tercera familia. */
.seccion-cabecera {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.seccion-num {
  color: var(--verde-enlace);
}
.seccion-kicker {
  text-transform: uppercase;
  color: var(--gris);
}
.seccion-oscura .seccion-num {
  color: var(--verde-claro);
}
.seccion-oscura .seccion-kicker {
  color: var(--sobre-oscuro-3);
}

/* Sin ligar a la etiqueta: la usan tanto h1 (páginas interiores) como h2
   (secciones de la home). Con `h2.titular` los nueve h1 caían al Montserrat
   del body. */
.titular {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.008em;
  margin: 0 0 14px;
  /* El ancho decide dónde parte la frase, y en el original cambia en cada
     sección. Se expone como variable para poder afinarlo sección a sección
     en el repaso final de diseño. */
  max-width: var(--titular-ancho, 18ch);
}

.entradilla {
  margin: 0 0 48px;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gris);
}
.seccion-oscura .entradilla {
  color: var(--sobre-oscuro-3);
}

/* ---------- 6. Portada ---------------------------------------------------- */
/* Portada tipográfica. Antes vivía aquí un isotipo de 330 px con halo verde
   que era el objeto más claro de la pantalla y se llevaba la mirada por
   delante del titular. Se retiró: la frase es la portada. */
.portada {
  position: relative;
  background: var(--tinta);
  color: #fff;
  /* El aire de abajo evita que el medianil de la mesa muera contra el borde
     de la ventana: la sección cierra, no se corta. */
  padding: calc(var(--alto-nav) + 56px) 0 46px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* `margin-inline: auto` de `.contenedor` desactiva el estirado del flex y
   deja la caja al ancho del contenido. Sin este `width` el titular se
   quedaba en 950 px y centrado en vez de ocupar la medida. */
.portada > .contenedor {
  width: 100%;
}

.portada-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 44px;
}

h1.portada-titulo {
  /* La «D» de la Instrument Serif entra unos 4 px respecto al margen; se
     saca para que el titular, el cuerpo y el botón compartan borde. */
  margin-left: -0.03em;
  font-family: var(--serif);
  font-weight: 400;
  /* El tope lo fija la línea más larga («para quien levanta capital»), que a
     este tamaño llena la caja de 1.280 px sin llegar a tocarla. */
  /* Ocho columnas de doce: el titular cede sitio a la cláusula, que ocupa
     las otras cuatro y la misma altura. */
  /* La segunda línea tiene que terminar antes de la columna donde arranca la
     cláusula, que ahora empieza en 732 px. El titular cede cuerpo para que la
     cláusula deje de ser una nota al margen. */
  font-size: clamp(36px, 5.4vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0;
  max-width: none;
  text-wrap: initial; /* los saltos van a mano; balance los desharía */
}
/* Los tres tramos son líneas completas en pantalla ancha y texto corrido
   en móvil, donde no caben. */
@media (min-width: 900px) {
  h1.portada-titulo .portada-linea {
    display: block;
  }
}
h1.portada-titulo em {
  font-style: italic;
  color: var(--verde-claro);
}
@media (min-width: 900px) {
  /* La «y» cursiva de Instrument Serif vuela a la izquierda del margen; se
     compensa para que las tres líneas alineen a la vista. */
  .portada-cursiva {
    margin-left: 0.06em;
  }
}

/* La frase que diferencia al despacho manda; la descripción la acompaña en
   voz baja. Antes iban las dos al mismo cuerpo y al mismo gris, y la más
   fuerte era la menos visible. */
/* El lema es la bajada del titular y la llamada su consecuencia: van uno bajo
   otro y en el margen. Repartidos a los extremos quedaban 600 px de nada; en
   una sola fila invadían la columna de la cláusula. */
.portada-pie {
  margin: 40px 0 0;
}
.portada-acciones {
  margin: 26px 0 0;
}
.portada-lema {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}
.portada-glosa {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sobre-oscuro-3);
}
.portada-acciones {
  margin: 0;
}

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}

/* ---------- 6b. La mesa: los dos lados ----------------------------------- */
/* Dos listas independientes que solo comparten la medianil. Resueltas como
   una sola rejilla, las filas de un lado se alineaban con las del otro y
   sugerían parejas —«Phantom Shares» frente a «Seguimiento de portfolio»—
   que no existen. La medianil va en verde: es la mesa. */
.mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px 0;
  align-items: start;
}
/* Seis y seis de las doce columnas, con su calle: así el eje cae en una línea
   de la retícula (732 px) y no en el centro geométrico (720), que no era línea
   de nada y montaba una segunda retícula en la página. */
@media (min-width: 820px) {
  .mesa {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
  }
  .mesa > .mesa-lado {
    grid-column: span 6;
  }
  .mesa > .mesa-lado:first-child {
    padding-right: 44px;
  }
  .mesa > .mesa-lado + .mesa-lado {
    padding-left: 44px;
    border-left: 1px solid var(--linea);
  }
}
.mesa-rol {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
/* Las dos cabeceras de columna de la página —los lados de la mesa y las
   familias de herramientas— comparten papel: la serifa del titular a cuerpo
   pequeño. Es un rol, no un cuarto tipo suelto. */
.mesa-quien {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.mesa-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mesa-lista > li {
  border-top: 1px solid var(--linea);
}
.mesa-lista a {
  display: grid;
  gap: 5px;
  padding: 18px 0 20px;
  color: inherit;
  text-decoration: none;
}
.mesa-lista a:hover {
  color: inherit;
  text-decoration: none;
}
.mesa-titulo {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--tinta);
  transition: color 160ms var(--ease);
}
.mesa-lista a:hover .mesa-titulo {
  color: var(--gris);
}
.mesa-resumen {
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gris);
}

/* ---------- 7. Botones ---------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.boton:hover {
  text-decoration: none;
}
/* Relleno de tinta sobre claro y de blanco sobre tinta. El verde se reserva
   a la cursiva del titular y a los ordinales de sección. */
.boton-primario {
  background: var(--tinta);
  color: #fff;
}
.boton-primario:hover {
  background: var(--tinta-2);
  color: #fff;
}
.seccion-oscura .boton-primario,
.portada .boton-primario {
  background: #fff;
  color: var(--tinta);
}
.seccion-oscura .boton-primario:hover,
.portada .boton-primario:hover {
  background: var(--sobre-oscuro-2);
  color: var(--tinta);
}
.boton-fantasma {
  background: transparent;
  border-color: var(--borde-oscuro);
  color: #fff;
}
.boton-fantasma:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.boton-linea {
  background: transparent;
  border-color: var(--linea-fuerte);
  color: var(--tinta);
}
.boton-linea:hover {
  background: var(--papel-2);
  border-color: var(--gris-suave);
  color: var(--tinta);
}

/* ---------- 8. Índice de servicios --------------------------------------- */
.indice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 56px;
}

.indice-col > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tinta);
}
/* El código verde/azul de audiencia se retiró del sitio: el lado lo dicen
   la posición y el rótulo. */
.indice-col > h2 {
  border-bottom-color: var(--tinta);
}

.indice-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.indice-lista > li {
  border-bottom: 1px solid var(--linea);
}

.indice-fila {
  display: flex;
  gap: 20px;
  padding: 20px 12px;
  color: inherit;
  text-decoration: none;
}
.indice-fila:hover {
  background: var(--papel-2);
  color: inherit;
  text-decoration: none;
}
.indice-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris);
  padding-top: 5px;
  flex: none;
}
.indice-titulo {
  display: block;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -0.01em;
}
.indice-resumen {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris);
}

/* ---------- 9. Tarjetas --------------------------------------------------- */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 26px 22px;
}
.tarjeta h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}
.tarjeta p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris);
}
.tarjeta-paso {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--verde-oscuro);
  margin-bottom: 16px;
}

/* ---------- 10. Migas de pan ---------------------------------------------- */
.migas {
  padding-top: calc(var(--alto-nav) + 28px);
}
.migas-nav ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}
.migas-nav li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--linea-fuerte);
}

/* ---------- 11. Página de servicio ---------------------------------------- */
.servicio-cabecera {
  background: var(--tinta);
  color: var(--sobre-oscuro-3);
  padding: calc(var(--alto-nav) + 60px) 0 56px;
}
.servicio-cabecera .migas-nav ol {
  color: var(--sobre-oscuro-3);
}
.servicio-cabecera .migas-nav a {
  color: var(--sobre-oscuro-2);
}
.servicio-cabecera .migas-nav li + li::before {
  color: rgba(255, 255, 255, 0.3);
}
h1.servicio-titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 22px 0 20px;
  max-width: 18ch;
}
.servicio-sub {
  margin: 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--sobre-oscuro-3);
}

/* Cuerpo editorial: sirve tanto a servicios como a artículos */
.prosa {
  font-size: 18px;
  line-height: 1.72;
  color: var(--tinta-2);
}
.prosa > * {
  max-width: 68ch;
}
.prosa h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
}
.prosa h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 32px 0 10px;
}
.prosa p,
.prosa ul,
.prosa ol {
  margin: 0 0 24px;
}
.prosa ul,
.prosa ol {
  padding-left: 22px;
}
.prosa li {
  margin-bottom: 8px;
}
.prosa blockquote {
  margin: 36px 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid var(--verde);
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.35;
  color: var(--tinta);
}
.prosa a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 12. FAQ ------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--linea);
}
.faq-item {
  border-bottom: 1px solid var(--linea);
  padding: 22px 0;
}

/* El acordeón es un <details> nativo: sin JavaScript y accesible con teclado
   de serie. `display: flex` en el summary quita de paso el triángulo por
   defecto, que en Safari y Firefox no se puede estilar; el signo lo pinta
   ::after. La respuesta sigue en el HTML aunque esté plegada. */
.faq-item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-item > summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1;
  color: var(--gris);
  transition: color 160ms var(--ease);
}
.faq-item[open] > summary::after {
  content: "–";
}
.faq-item > summary:hover::after,
.faq-item > summary:focus-visible::after {
  color: var(--tinta);
}
.faq-item h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.faq-item p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--tinta-3);
  max-width: 68ch;
}

/* ---------- 13. Actualidad ------------------------------------------------ */
/* Rejilla de entradas.
   Las separaciones son bordes de cada tarjeta, NO un fondo de la rejilla
   asomando por un hueco de 1 px. Con el fondo, cualquier celda vacía de la
   última fila —y toda tarjeta más corta que su fila— dejaba ver un bloque
   gris. Con bordes no hay nada detrás que pueda asomar.

   El número de columnas es explícito por tramo en lugar de auto-fit: así se
   sabe cuántas entradas llenan una fila completa, que es lo que fija el
   tamaño de página en 12 (divisible por 4, 3, 2 y 1). */
.rejilla-entradas {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
}
@media (min-width: 620px) {
  .rejilla-entradas { --cols: 2; }
}
@media (min-width: 940px) {
  .rejilla-entradas { --cols: 3; }
}
@media (min-width: 1200px) {
  .rejilla-entradas { --cols: var(--cols-max, 4); }
}

/* El artículo es la celda; el enlace debe llenarla entera para que no quede
   fondo visible cuando el texto es más corto que el de sus vecinos. */
.rejilla-entradas > article {
  display: flex;
  min-width: 0;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.rejilla-entradas > article > .entrada-tarjeta {
  flex: 1;
}

.seccion-oscura .rejilla-entradas,
.seccion-oscura .rejilla-entradas > article {
  border-color: var(--borde-oscuro);
}
/* En la home solo hay tres entradas: con cuatro columnas quedaría un hueco. */
.rejilla-entradas-3 {
  --cols-max: 3;
}

.entrada-tarjeta {
  background: var(--papel);
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.entrada-tarjeta:hover {
  background: var(--papel-2);
  color: inherit;
  text-decoration: none;
}
.seccion-oscura .entrada-tarjeta {
  background: var(--tinta);
}
.seccion-oscura .entrada-tarjeta:hover {
  background: #262626;
}
.entrada-meta {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gris);
}
.seccion-oscura .entrada-meta {
  color: var(--sobre-oscuro-3);
}
.entrada-titulo {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin: 0;
}
.seccion-oscura .entrada-titulo {
  color: #fff;
}
.entrada-resumen {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris);
}
.seccion-oscura .entrada-resumen {
  color: var(--sobre-oscuro-3);
}

/* ---------- 14. Formulario ------------------------------------------------ */
/* Sin caja: el formulario vive sobre el fondo de la sección, con los campos
   subrayados por un filete. La tarjeta redondeada con inputs rellenos era lo
   único de la página que no estaba hecho de reglas y tipografía. */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.campo > span,
.campo > label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--linea-fuerte);
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--tinta);
}
/* Sin agarradera de redimensión: era el único píxel de cromo del navegador
   que quedaba, y justo en el bloque de conversión. */
.campo textarea {
  resize: none;
  min-height: 108px;
}
.campo-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 18px;
}
/* `.campo` es flex en columna; sin volver a `row` la casilla caía encima de
   su etiqueta en vez de a su lado. */
.campo-consentimiento {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gris);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.campo-consentimiento input {
  width: auto;
  margin-top: 3px;
  flex: none;
}
/* Trampa antispam: invisible para personas, rellenada por bots */
.trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 15. Pie ------------------------------------------------------- */
.pie {
  background: var(--tinta);
  color: var(--sobre-oscuro-3);
  padding: 56px 0 32px;
  font-size: 14px;
}
.pie a {
  color: var(--sobre-oscuro-2);
}
.pie a:hover {
  color: #fff;
}
.pie-grid {
  display: grid;
  /* Mezclar una pista fija con repeat(auto-fit) desbordaba por debajo de 420 px:
     el mínimo de la primera pista más el de la primera automática superaba el
     ancho disponible. Con una sola regla auto-fit el colapso es limpio. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--borde-oscuro);
}
.pie-grid > * {
  min-width: 0;
}
@media (min-width: 940px) {
  .pie-grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}
.pie-marca img {
  height: 34px;
  width: auto;
  margin-bottom: 18px;
}
.pie-marca p {
  margin: 0;
  max-width: 34ch;
  line-height: 1.6;
}
.pie-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radio);
  color: var(--sobre-oscuro-2);
}
.pie-social:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.pie-titulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sobre-oscuro-3);
  margin: 0 0 12px;
}
.pie-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pie-dir {
  margin-top: 0;
  font-style: normal;
  line-height: 1.6;
}
.pie-base {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 13px;
}
.pie-base a {
  color: var(--verde-claro);
  font-weight: 600;
}
.pie-copy {
  color: var(--sobre-oscuro-3);
}

/* ---------- 16. Movimiento ------------------------------------------------ */
@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;
  }
}

/* ---------- 17. Bloques de dos columnas ----------------------------------- */
/* Patrón repetido: enunciado a la izquierda, contenido a la derecha.
   Colapsa a una sola columna por debajo de 860 px. */
.bloque-dos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}
@media (min-width: 860px) {
  .bloque-dos {
    /* 5/7: el formulario necesita el ancho; el enunciado, no. */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .bloque-dos > *:first-child {
    grid-column: span 5;
  }
  .bloque-dos > *:nth-child(2) {
    grid-column: span 7;
  }
  /* 7/5 en el despacho: manda el texto y el retrato acompaña. */
  .bloque-dos-ancho > *:first-child {
    grid-column: span 7;
  }
  .bloque-dos-ancho > *:nth-child(2) {
    grid-column: span 5;
  }
}
.bloque-dos > * {
  min-width: 0;
}

.cabecera-partida {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.cabecera-partida .titular {
  margin-bottom: 0;
}
.cabecera-partida .seccion-cabecera {
  margin-bottom: 0;
}
.enlace-todas {
  font-size: 14px;
  font-weight: 600;
  color: var(--sobre-oscuro-2);
  white-space: nowrap;
}
.enlace-todas:hover {
  color: #fff;
}

.indice-pie {
  margin: 32px 0 0;
}

.parrafo-grande {
  margin: 0 0 18px;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-3);
}
.parrafo-menor {
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris);
}

/* ---------- 18. Pasos ------------------------------------------------------ */
ol.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

/* ---------- 19. Cifras del despacho --------------------------------------- */
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--linea);
}
.cifras > div {
  display: flex;
  flex-direction: column-reverse; /* el dato arriba, el rótulo debajo */
}
/* Tinta, no verde: sobre fondo claro el verde ya lo llevan los enlaces y el
   botón, y tres verdes distintos en una misma pantalla no se leen como uno. */
.cifras dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--tinta);
}
.cifras dt {
  margin-top: 6px;
  font-size: 13px;
  color: var(--gris);
}

/* ---------- 20. Ficha de autor -------------------------------------------- */
.ficha-autor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ficha-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 14px;
}
.ficha-nombre strong {
  color: var(--tinta);
}
.ficha-nombre span {
  color: var(--gris);
}
.ficha-bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris);
}
.ficha-autor > p:last-of-type {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- 21. Datos de contacto ----------------------------------------- */
.datos-contacto {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--linea-fuerte);
}
.datos-contacto dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 6px;
}
.datos-contacto dd {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--tinta);
}
.datos-contacto dd a {
  color: var(--tinta);
}
.datos-contacto dd a:hover {
  color: var(--verde-oscuro);
}
.datos-contacto address {
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- 22. Botón de área de cliente ---------------------------------- */
/* `.nav-menu a` (0,1,1) ganaba a `.nav-boton` (0,1,0) y dejaba el botón con
   `padding: 6px 0` y sin borde. Se sube la especificidad. */
.nav-menu .nav-boton {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radio);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.nav-menu .nav-boton:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.nav-menu .nav-boton[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 860px) {
  .nav-area {
    padding: 14px 0 4px;
  }
  .nav-menu .nav-boton {
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ---------- 23. Alto de la portada --------------------------------------- */
/* Ocupa la ventana entera con tope: por encima de 900 px el titular se
   quedaría solo en medio de un campo de negro. */
.portada {
  min-height: min(92svh, 820px);
}

/* ---------- 24. (libre) --------------------------------------------------- */
/* Aquí vivían cuatro adornos de fondo —dos hojas en marca de agua, un aro y
   un halo verde— que no argumentaban nada y delataban plantilla. Retirados.
   `.seccion-con-hoja` y `.hoja-fondo` siguen definidos porque los usan
   páginas interiores; en la home ya no se aplican. */
.seccion-con-hoja {
  position: relative;
  overflow: hidden;
}
.seccion-con-hoja > .contenedor {
  position: relative;
}

/* ---------- 25. Índice de servicios: anchos ------------------------------ */
/* Dos columnas antes: con minmax(340px) no aparecían hasta 1.100 px */
.indice {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px 48px;
}

/* ---------- 26. Hueco de imagen pendiente --------------------------------- */
/* Marca dónde va una foto que todavía no existe, en vez de dejar el bloque
   vacío o servir una imagen rota. Se borra solo al rellenar el dato. */
.hueco-foto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: 20px;
  text-align: center;
  background: var(--papel-2);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--gris);
}
.hueco-foto span {
  font-size: 14px;
  font-weight: 600;
}
.hueco-foto small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ---------- 27. Formulario: perfil, etiquetas y pie ----------------------- */
.perfil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  border: 0;
}
.perfil legend {
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
/* Chips visuales sobre radios reales: mantiene teclado, lectores de pantalla
   y envío sin JavaScript, con el aspecto de píldora del diseño original. */
.perfil label {
  cursor: pointer;
}
.perfil input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.perfil span {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-3);
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.perfil label:hover span {
  border-color: var(--gris-suave);
}
.perfil input:checked + span {
  background: var(--tinta);
  color: #fff;
}
.perfil input:focus-visible + span {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

.campo {
  margin: 0;
}
.campo label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.campo input:focus-visible,
.campo textarea:focus-visible {
  border-bottom-color: var(--verde);
  box-shadow: 0 1px 0 0 var(--verde);
  outline: none;
}
.campo-consentimiento {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.campo-consentimiento label {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gris);
}
.campo-consentimiento input {
  width: auto;
  margin-top: 2px;
  flex: none;
  accent-color: var(--verde);
}

.formulario-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 6px 0 0;
}
.formulario-pie span {
  font-size: 12.5px;
  color: var(--gris);
}

/* ---------- 28. Ancho de titular por sección ------------------------------
   Valores tomados uno a uno del diseño original: cada sección parte la frase
   en un punto distinto y eso es intencionado. */
#servicios { --titular-ancho: 15ch; }
#despacho { --titular-ancho: 17ch; }
#actualidad { --titular-ancho: 22ch; }
#contacto { --titular-ancho: 14ch; }


/* ---------- 29. Páginas legales ------------------------------------------- */
.legal-cabecera {
  background: var(--tinta);
  color: var(--sobre-oscuro-3);
  padding: calc(var(--alto-nav) + 56px) 0 44px;
}
.legal-cabecera .migas-nav ol {
  color: var(--sobre-oscuro-3);
}
.legal-cabecera .migas-nav a {
  color: var(--sobre-oscuro-2);
}
.legal-cabecera .migas-nav li + li::before {
  color: rgba(255, 255, 255, 0.3);
}
h1.legal-titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 22px 0 12px;
}
.legal-fecha {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sobre-oscuro-3);
}

/* Pestañas entre los tres documentos legales */
.legal-tabs {
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
}
.legal-tabs > div {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-block: 18px;
}
.legal-tabs a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gris);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.legal-tabs a:hover {
  color: var(--tinta);
  text-decoration: none;
}
.legal-tabs a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--verde);
}

.prosa-legal {
  font-size: 16px;
  line-height: 1.7;
}
.prosa-legal h2 {
  font-size: clamp(23px, 2.6vw, 28px);
  margin: 40px 0 12px;
}

/* Pares clave-valor de los documentos legales */
.datos-legales {
  display: grid;
  gap: 1px;
  margin: 0 0 28px;
  padding: 0;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  max-width: 100%;
}
.datos-legales > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 14px 18px;
  background: var(--papel);
}
@media (min-width: 620px) {
  .datos-legales > div {
    grid-template-columns: 160px 1fr;
    gap: 20px;
    align-items: baseline;
  }
}
.datos-legales dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.datos-legales dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-2);
}

/* ---------- 30. Rejilla de herramientas ----------------------------------- */
.rejilla-herramientas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.tarjeta-enlace {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 26px 24px 28px;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.tarjeta-enlace:hover {
  background: var(--papel-2);
  border-color: var(--gris-suave);
  color: inherit;
  text-decoration: none;
}
/* La flecha va pegada al título, no flotando en la esquina inferior. */
.tarjeta-enlace h2,
.tarjeta-enlace h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tarjeta-enlace h2::after,
.tarjeta-enlace h3::after {
  content: " →";
  color: var(--verde-enlace);
  transition: opacity 160ms var(--ease);
  opacity: 0.55;
}
.tarjeta-enlace:hover h2::after,
.tarjeta-enlace:hover h3::after {
  opacity: 1;
}
.tarjeta-enlace p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gris);
}
/* ---------- 31. Estados vacíos y páginas cortas --------------------------- */
.aviso-vacio {
  max-width: 62ch;
  padding: 34px 32px;
  background: var(--papel-2);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
}
.aviso-vacio p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gris);
}
.aviso-vacio p:last-child {
  margin-bottom: 0;
}
.aviso-vacio strong {
  color: var(--tinta);
}

/* Páginas cortas: sin esto el pie sube demasiado en pantallas altas */
.pagina-estrecha {
  min-height: 52vh;
  padding-top: calc(var(--alto-nav) + 72px);
}

/* ---------- 32. Artículo -------------------------------------------------- */
.articulo-cabecera {
  background: var(--tinta);
  color: var(--sobre-oscuro-3);
  padding: calc(var(--alto-nav) + 56px) 0 52px;
}
.articulo-cabecera .migas-nav ol {
  color: var(--sobre-oscuro-3);
}
.articulo-cabecera .migas-nav a {
  color: var(--sobre-oscuro-2);
}
.articulo-cabecera .migas-nav li + li::before {
  color: rgba(255, 255, 255, 0.3);
}

.articulo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sobre-oscuro-3);
}
.articulo-categoria {
  color: var(--verde-claro);
}

h1.articulo-titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 22px;
}
.articulo-entradilla {
  margin: 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--sobre-oscuro-3);
}
.articulo-firma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--borde-oscuro);
  font-size: 13px;
}
.articulo-firma a {
  font-weight: 700;
  color: #fff;
}
.articulo-firma span {
  color: var(--sobre-oscuro-3);
}

/* Elementos que llegan del markdown de Notion */
.prosa img {
  border-radius: var(--radio);
  margin: 32px 0;
}
.prosa figure {
  margin: 32px 0;
  max-width: 100%;
}
.prosa figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--gris);
}
.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 0 28px;
}
.prosa th,
.prosa td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
}
.prosa th {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}
.prosa pre {
  overflow-x: auto;
  padding: 18px 20px;
  background: var(--papel-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-size: 13.5px;
}
.prosa hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--linea);
}
/* Las tablas anchas hacen scroll dentro de su caja, nunca la página */
.prosa .tabla-scroll {
  overflow-x: auto;
}

/* ---------- 33. Pie del artículo ------------------------------------------ */
.articulo-pie {
  padding: 0 0 96px;
}
.articulo-cta {
  padding: 34px 32px;
  background: var(--papel-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
}
.articulo-cta .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.articulo-cta p:not(.eyebrow) {
  margin: 0 0 20px;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta-2);
}

.articulo-relacionadas {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
}
.articulo-relacionadas .eyebrow {
  display: block;
  margin-bottom: 16px;
}
.articulo-relacionadas ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.articulo-relacionadas li {
  border-bottom: 1px solid var(--linea);
}
.articulo-relacionadas a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  color: inherit;
  text-decoration: none;
}
.articulo-relacionadas a:hover {
  color: inherit;
  text-decoration: none;
}
.articulo-relacionadas a:hover .entrada-titulo {
  color: var(--azul);
}
.articulo-relacionadas .entrada-titulo {
  font-size: 18px;
}

/* ---------- 34. Paginador ------------------------------------------------- */
/* Sin «anterior» ni «siguiente»: el número de página es lo que le dice al
   lector dónde está y a dónde va. */
.paginador {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
}
.paginador ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.paginador a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 11px 18px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--gris);
  text-decoration: none;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.paginador a:hover {
  background: var(--papel-2);
  border-color: var(--gris-suave);
  color: var(--tinta);
  text-decoration: none;
}
.paginador-etiqueta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.paginador-numero {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: var(--tinta);
}
.paginador a[aria-current="page"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: rgba(255, 255, 255, 0.7);
}
.paginador a[aria-current="page"] .paginador-numero {
  color: #fff;
}
.paginador a[aria-current="page"]:hover {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- 35. Enlace de texto ------------------------------------------ */
/* Un único enlace de texto para toda la página: el que cierra una sección,
   el que abre una herramienta y el de la ficha. Antes convivían tres —una
   serifa a 30 px, una sans en negrita y una sans normal— más dos botones. */
.enlace {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--tinta);
  padding-bottom: 3px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.enlace:hover {
  color: var(--gris);
  border-bottom-color: var(--gris);
  text-decoration: none;
}
.seccion-oscura .enlace,
.portada .enlace {
  color: #fff;
  border-bottom-color: #fff;
}
.seccion-oscura .enlace:hover,
.portada .enlace:hover {
  color: var(--sobre-oscuro-2);
  border-bottom-color: var(--sobre-oscuro-2);
}

/* El pie del índice cierra las dos columnas con un filete a todo lo ancho:
   así la asimetría de alturas se lee como remate y no como descuadre. */
.indice-pie {
  margin: 0;
  padding-top: 30px;
  border-top: 1px solid var(--linea);
}
.indice + .indice-pie,
.rejilla-herramientas + .indice-pie {
  margin-top: 44px;
}

/* ---------- 37. Nota de ecosistema ---------------------------------------- */
/* Era una caja gris con borde alrededor de una sola frase. Ahora es lo que
   siempre fue: una nota al pie de la sección. */
.nota-ecosistema {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 20px;
  padding-top: 26px;
  border-top: 1px solid var(--linea);
}
@media (min-width: 860px) {
  .nota-ecosistema {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .nota-ecosistema > .etiqueta {
    grid-column: span 2;
  }
  .nota-ecosistema > p:last-child {
    grid-column: span 10;
  }
}
.nota-ecosistema .etiqueta {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.nota-ecosistema p:last-child {
  margin: 0;
  max-width: 74ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tinta-3);
}
.nota-ecosistema a {
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 38. Cierre oscuro: contacto contra el pie --------------------- */
/* La página abre y cierra en tinta; entre medias todo es papel. El contacto
   deja de ser «una sección más» y pasa a ser el destino. */
/* El pie viene justo detrás y en el mismo tono: más de esto era hueco muerto,
   el mayor de la página. */
.seccion-cierre {
  padding-bottom: 72px;
}
.seccion-oscura .parrafo-grande {
  color: var(--sobre-oscuro-2);
}
.seccion-oscura .datos-contacto {
  border-top-color: var(--borde-oscuro);
}
.seccion-oscura .datos-contacto dt {
  color: var(--sobre-oscuro-3);
}
.seccion-oscura .datos-contacto dd,
.seccion-oscura .datos-contacto dd a {
  color: #fff;
}
.seccion-oscura .datos-contacto dd a:hover {
  color: var(--verde-claro);
}

.seccion-oscura .formulario {
  background: transparent;
}
.seccion-oscura .campo label,
.seccion-oscura .perfil legend {
  color: var(--sobre-oscuro-3);
}
.seccion-oscura .campo input,
.seccion-oscura .campo textarea {
  background: transparent;
  border-bottom-color: var(--borde-oscuro);
  color: #fff;
}
.seccion-oscura .campo input:focus-visible,
.seccion-oscura .campo textarea:focus-visible {
  border-bottom-color: var(--verde-claro);
  box-shadow: 0 1px 0 0 var(--verde-claro);
}
.seccion-oscura .campo input::placeholder,
.seccion-oscura .campo textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.seccion-oscura .perfil span {
  background: transparent;
  border-color: var(--borde-oscuro);
  color: var(--sobre-oscuro-2);
}
.seccion-oscura .perfil label:hover span {
  border-color: rgba(255, 255, 255, 0.45);
}
.seccion-oscura .perfil input:checked + span {
  background: #fff;
  color: var(--tinta);
}
.seccion-oscura .campo-consentimiento label {
  color: var(--sobre-oscuro-3);
}

/* ---------- 39. Apertura de sección --------------------------------------- */
/* El rótulo, el titular y la entradilla ocupaban siempre la misma columna
   izquierda y dejaban vacía la mitad derecha, sección tras sección. Aquí
   reparten: enunciado a un lado, entradilla al otro, con la variante espejo
   para romper la cadencia a media página. */
.apertura {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 56px;
  margin-bottom: 52px;
}
@media (min-width: 900px) {
  .apertura {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* La glosa se apoya en la última línea base del titular, no en el pie de
       la caja: flotando a media altura no se alineaba con nada. */
    align-items: last baseline;
    column-gap: 24px;
  }
  .apertura > div:first-child {
    grid-column: span 7;
  }
  .apertura > .entradilla {
    grid-column: span 5;
  }
  .apertura-espejo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}
.apertura .titular {
  margin-bottom: 0;
  max-width: var(--titular-ancho, 16ch);
}
.apertura .entradilla {
  margin: 0;
  max-width: 46ch;
}
.apertura-espejo .entradilla {
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .apertura-espejo > div {
    order: 1;
  }
  .apertura-espejo > .titular {
    order: 2;
    justify-self: end;
    text-align: left;
  }
}

/* ---------- 46. El dato del despacho -------------------------------------- */
/* Una cifra sola bajo un filete con pie de 12 px se lee como un bloque de
   tres estadísticas al que le han borrado dos. Aquí es una sola y grande. */
.dato {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 22px 0 30px;
}
.dato-cifra {
  font-family: var(--serif);
  font-size: clamp(48px, 5vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.012em;
  color: var(--verde-enlace);
}
.dato-pie {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- 47. Perfil: control segmentado -------------------------------- */
/* Los dos chips sueltos se confundían con los botones secundarios. Un solo
   marco partido en dos se lee como lo que es: un interruptor. */
/* Sin marco alrededor: la leyenda pegada al borde interior parecía un
   error de maquetación. Etiqueta arriba, como en cualquier otro campo, y
   los dos chips en línea. */
.perfil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.perfil legend {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}


.perfil span {
  padding: 9px 20px;
}

/* ---------- 48. Casilla de consentimiento --------------------------------- */
/* La casilla nativa sobre tinta era un cuadro blanco de sistema. */
.campo-consentimiento input[type="checkbox"] {
  appearance: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.seccion-oscura .campo-consentimiento input[type="checkbox"] {
  border-color: rgba(255, 255, 255, 0.45);
}
.campo-consentimiento input[type="checkbox"]:checked {
  background: #fff;
  border-color: #fff;
  /* La marca va dibujada, no con una fuente de iconos. */
  background-image: linear-gradient(45deg, transparent 42%, var(--tinta) 42%, var(--tinta) 52%, transparent 52%),
    linear-gradient(-45deg, transparent 56%, var(--tinta) 56%, var(--tinta) 66%, transparent 66%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 1px 2px, -1px 0;
}

/* ---------- 49. Filas: la gramática de ledger del resto de la página ------ */
/* Herramientas y actualidad usan la misma fila: título en serifa contra el
   margen izquierdo y apunte —resumen o fecha— contra el derecho. Antes eran
   tres tarjetas con medianiles y una lista con rail de fechas: dos patrones
   distintos para lo mismo. */
.lista-filas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tinta);
}
.lista-filas > li {
  border-bottom: 1px solid var(--linea);
}
.fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 24px 0 26px;
  color: inherit;
  text-decoration: none;
}
@media (min-width: 820px) {
  .fila {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: baseline;
    column-gap: 24px;
  }
  .fila-titulo {
    grid-column: span 7;
  }
  .fila-apunte {
    grid-column: span 5;
  }
}
.fila:hover {
  color: inherit;
  text-decoration: none;
}
.fila-titulo {
  font-family: var(--serif);
  font-size: clamp(23px, 2.4vw, 31px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--tinta);
  transition: color 160ms var(--ease);
}
.fila:hover .fila-titulo {
  color: var(--gris);
}
.fila-apunte {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gris);
}

/* ---------- 50. Rejilla de doce columnas ---------------------------------- */
/* Todas las divisiones de la página caen sobre estas líneas. Antes cada
   sección inventaba su propio reparto —1,15fr/1fr aquí, 170 px allá— y las
   columnas de la derecha arrancaban en tres sitios distintos. */
.rejilla-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 28px;
}
.col-2,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-10 {
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .col-2 { grid-column: span 2; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-10 { grid-column: span 10; }
}

/* ---------- 52. La marca --------------------------------------------------- */
/* «newco» recortado del lockup original, monocromo para que no compita con
   el acento, y el descriptor compuesto con la tipografía del sitio. */
.marca {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  text-decoration: none;
}
.marca:hover {
  text-decoration: none;
}
.marca img {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
}
.marca span {
  align-self: stretch;
  padding-left: 11px;
  border-left: 1px solid var(--borde-oscuro);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sobre-oscuro-2);
}

.pie .marca {
  text-decoration: none;
}
.pie .marca span {
  color: var(--sobre-oscuro-3);
}

/* ---------- 53. Titular a la medida completa ------------------------------ */
/* Para las secciones sin glosa a la derecha: el titular ocupa la medida en
   vez de quedarse en la columna de la izquierda. */
.titular-ancho {
  max-width: 26ch;
  margin-bottom: 48px;
}


/* ---------- 55. Los dos asientos de la portada ---------------------------- */
/* La premisa, a tamaño de titular y en el sitio donde se decide: quien
   levanta capital en una columna, quien lo pone en la otra. Cada asiento cae
   sobre la misma columna que su lista de servicios de más abajo, así que el
   filete superior lo lleva cada uno y llega justo hasta el margen del
   contenedor, no cuarenta píxeles más allá. */
.asiento {
  display: grid;
  align-content: end;
  justify-items: start;
  padding: 26px 0 6px;
  border-top: 1px solid var(--borde-oscuro);
  color: inherit;
  text-decoration: none;
}
/* La caja se ciñe al texto y es la que se coloca; dentro, el rótulo y el
   nombre comparten borde izquierdo aunque el bloque vaya contra el eje. */
.asiento-caja {
  display: grid;
  justify-items: start;
  gap: 8px;
}
.asiento:hover {
  color: inherit;
  text-decoration: none;
}
.asiento-rol {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sobre-oscuro-3);
}
.asiento-quien {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  color: #fff;
  transition: color 160ms var(--ease);
}
.asiento:hover .asiento-quien {
  color: var(--verde-claro);
}
/* Los dos asientos heredan las líneas de la página: uno en el margen y otro
   en el eje, bajo un solo filete a todo lo ancho. Antes arrancaban a mitad de
   camino y se apiñaban contra el medianil. */
/* El filete lo lleva cada asiento, no el contenedor: sobre el contenedor
   incluiría su relleno y se pasaría 40 px del margen a cada lado. */
@media (min-width: 820px) {
  .portada-mesa {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .portada-mesa > .asiento {
    grid-column: span 6;
  }
}

/* ---------- 57. Despacho: el retrato a sangre ---------------------------- */
/* La única imagen de la página va contra el borde de la ventana y sostiene
   la composición, en vez de quedarse dentro de la caja como una ficha. */
.despacho-caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
@media (min-width: 900px) {
  .despacho-caja {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .despacho-texto {
    grid-column: span 7;
  }
  .despacho-retrato {
    grid-column: span 5;
  }
  /* A sangre contra el borde de la ventana: se sale de la caja justo lo que
     mide el margen exterior del contenedor en cada ancho. */
  .despacho-retrato {
    margin-right: min(calc(-1 * var(--pad-x)), calc((var(--ancho) - 100vw) / 2));
  }
}
.despacho-texto .ficha-nombre {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
}
.despacho-retrato img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.08);
}

/* ---------- 58. Sección corta -------------------------------------------- */
.seccion-corta {
  padding-bottom: 92px;
}
.seccion-corta > .contenedor {
  padding-top: 92px;
}

/* ---------- 59. La cláusula de la portada --------------------------------- */
/* El único elemento gráfico de la portada es el trabajo mismo: un pacto de
   socios con sus correcciones. Ocupa cuatro de las doce columnas y la misma
   altura que el titular, y sangra contra el borde de la ventana.
   Lo que lo hace deliberado y no un fallo de composición es el borde
   izquierdo duro con la numeración colgando: un documento con su articulado
   y su margen es un documento; uno con el margen difuminado y media palabra
   cortada es una filtración. */
/* La cláusula va a la derecha del titular y sin solaparlo. Superpuesta, la
   segunda línea del titular la borraba entera; pequeña y al lado, se leía como
   textura. Ni una cosa ni la otra: columna propia, cuerpo de lectura, borde
   izquierdo duro y la numeración colgando, que es lo que la hace leer como
   documento en vez de como papel pintado. */
.portada-cabeza {
  position: relative;
}
.portada-titulo {
  position: relative;
  max-width: 62%;
}
.portada-clausula {
  position: absolute;
  /* El borde izquierdo va anclado a la retícula —la medianil de la página, el
     mismo eje que parte la mesa de servicios— y el derecho a la ventana. Con
     la caja anclada solo a la derecha, en pantallas anchas se despegaba del
     titular: a 2.000 px quedaban 285 px de hueco entre los dos. */
  top: 0;
  bottom: -190px;
  left: 51%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  /* Se desvanece arriba y abajo —es una ventana por la que pasa el
     documento— y nunca por la izquierda. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
@media (min-width: 900px) {
  .portada-clausula {
    /* A sangre contra el borde de la ventana. */
    right: min(calc(-1 * var(--pad-x)), calc((var(--ancho) - 100vw) / 2));
  }
}
/* Se desvanece también por la izquierda, que es por donde se cruza con el
   titular: así el blanco de la serifa gana sin necesidad de veladuras. */
@media (min-width: 900px) {
  .portada-clausula {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent),
      linear-gradient(90deg, transparent, #000 56%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent),
      linear-gradient(90deg, transparent, #000 56%);
    mask-composite: intersect;
  }
}
@media (max-width: 899px) {
  .portada-clausula {
    display: none;
  }
}
.clausula-cinta {
  /* Fuera del flujo: si contase para el alto, la cinta entera —diez
     artículos— marcaría la altura de la fila en vez del titular. */
  position: absolute;
  top: 0;
  left: 0;
  /* Del ancho de la ventana: las líneas se completan dentro de ella. Más
     anchas se cortaban a media palabra contra el borde y eso no se lee como
     un recorte deliberado, se lee como un fallo. */
  width: 100%;
  /* Continua y despacio: se ve pasar el documento sin competir con el
     titular. Solo vertical: en horizontal se movería el borde izquierdo, que
     es lo único deliberado. */
  animation: deriva 56s linear infinite;
}
.clausula-cinta p {
  /* La numeración va en columna propia: con sangría francesa negativa el
     ordinal se salía de la caja y se recortaba contra el borde. */
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  margin: 0 0 30px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 34px;
  color: rgba(255, 255, 255, 0.34);
}
.clausula-cinta b {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
.clausula-cinta del {
  color: rgba(255, 255, 255, 0.22);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-decoration-thickness: 1px;
}
.clausula-cinta ins {
  /* Mismo tono que la cursiva del titular, un paso más oscuro: la corrección
     aceptada y «y para quien lo pone» son la misma idea. */
  text-decoration: none;
  color: var(--verde-claro);
}
@keyframes deriva {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* ---------- 60. Los asientos, accionables -------------------------------- */
/* Antes eran dos rótulos y nada decía que se pudiera pinchar. Ahora llevan
   subrayado, flecha y un pie que dice a dónde van. */
.asiento-quien {
  display: inline-flex;
  align-items: baseline;
  justify-self: start;
  gap: 14px;
}
/* El subrayado se ciñe al nombre: antes pasaba por debajo de la flecha. */
.asiento-nombre {
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 6px;
}
.asiento-flecha {
  position: relative;
  /* La base de la sans queda por debajo del centro óptico de la serifa. */
  top: -0.16em;
  font-family: var(--sans);
  font-size: 0.4em;
  font-weight: 500;
  color: var(--sobre-oscuro-3);
  transition: transform 220ms var(--ease), color 220ms var(--ease);
}
.asiento:hover .asiento-quien {
  color: var(--verde-claro);
}
.asiento:hover .asiento-nombre {
  border-bottom-color: var(--verde-claro);
}
.asiento:hover .asiento-flecha {
  transform: translateX(6px);
  color: var(--verde-claro);
}



/* ---------- 61. La hoja --------------------------------------------------- */
/* La hoja del isotipo, recuperada del diseño original. Va como máscara y no
   como PNG de color: así toma el verde que le corresponda a cada fondo y no
   se queda desfasada si el acento cambia. */
/* Mismo verde que las correcciones aceptadas de la portada: a este tamaño
   el tono de enlace pesa demasiado. */
.hoja {
  display: block;
  background: #5e8a5c;
  -webkit-mask-image: url("/assets/img/hoja-mascara.png");
  mask-image: url("/assets/img/hoja-mascara.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.apertura-figura {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  /* Misma geometría que el índice de servicios de abajo —dos columnas
     iguales con 48 px de calle—, para que la hoja caiga centrada sobre la
     segunda columna y no flotando contra el margen. */
  .apertura-figura {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }
}
.hoja-servicios {
  width: 208px;
  aspect-ratio: 735 / 1340;
  justify-self: center;
  opacity: 0.5;
  transform: rotate(-8deg);
}
@media (max-width: 899px) {
  .hoja-servicios {
    display: none;
  }
}

/* ---------- 63. Contacto sin formulario ----------------------------------- */
/* Los tres datos, compuestos como los demás índices de la página: el correo
   a cuerpo de titular es un cierre más firme que una caja de campos. */
.lista-contacto .fila-titulo {
  font-size: clamp(26px, 3.2vw, 42px);
}
.seccion-oscura .lista-filas {
  border-top-color: var(--borde-oscuro);
}
.seccion-oscura .lista-filas > li {
  border-bottom-color: var(--borde-oscuro);
}
.seccion-oscura .fila-titulo {
  color: #fff;
}
.seccion-oscura .fila:hover .fila-titulo {
  color: var(--verde-claro);
}
.seccion-oscura .fila-apunte {
  color: var(--sobre-oscuro-3);
}
/* La etiqueta va encima del dato, no a novecientos píxeles de él: el correo y
   su rótulo tienen que leerse como una pieza. */
.lista-contacto .fila {
  display: block;
}
.lista-contacto .fila-apunte {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- 64. Oficina en la página de contacto -------------------------- */
/* La lista de arriba ya cierra con su filete: otro encima serían dos. */
.datos-oficina {
  margin-top: 40px;
}

/* ---------- 65. Catálogo de herramientas ---------------------------------- */
/* Tres familias, una por columna: lo que se le dicta a un asistente, lo que
   corre en la web y lo que te llevas en un fichero. Cada una abre con su
   icono a trazo y cierra con el enlace a su parte del catálogo. */
.catalogo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px 24px;
  /* Las columnas no tienen el mismo número de piezas; con `stretch` y el
     `margin-top: auto` del pie, los tres enlaces cierran a la misma altura. */
  align-items: stretch;
}
.catalogo > * {
  display: flex;
}
.familia {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Cuatro columnas de doce por familia: así los tres arranques (80, 515 y 949)
   son líneas de la misma retícula que todo lo demás. */
@media (min-width: 900px) {
  .catalogo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .catalogo > * {
    grid-column: span 4;
  }
}
/* Mismo papel que las cabeceras del índice de servicios: la serifa del
   titular a cuerpo pequeño. */
.familia-cabecera {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tinta);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.familia-lista {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
/* Tarjeta por pieza: título, descripción y, abajo, la familia a la que
   pertenece en vez del precio. Es lo único de la página que tiene caja; se
   sostiene porque el catálogo es lo más cercano a un producto que hay aquí. */
.familia-lista a {
  display: grid;
  gap: 8px;
  padding: 18px 18px 16px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--papel);
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.familia-lista a:hover {
  background: var(--papel-2);
  border-color: var(--gris-suave);
  color: inherit;
  text-decoration: none;
}
.pieza-nombre {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}
.pieza-pitch {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gris);
}
.pieza-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
/* Código de color por familia: verde las skills, azul las aplicaciones y
   naranja las plantillas. Es el único sitio del sitio donde hay tres tonos, y
   se sostiene porque cada uno significa una cosa y solo aparece aquí. Todos
   los pares texto/fondo pasan AA. */
.pieza-tipo {
  padding: 4px 10px 5px;
  border-radius: var(--radio-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.pieza-tipo-skills {
  background: rgba(70, 115, 62, 0.1);
  color: var(--verde-enlace);
}
.pieza-tipo-aplicaciones {
  background: rgba(31, 91, 146, 0.1);
  color: var(--azul);
}
.pieza-tipo-descargables {
  background: rgba(161, 86, 13, 0.1);
  color: var(--naranja);
}

.familia-pie {
  margin: 24px 0 0;
  padding-top: 0;
  margin-top: auto;
}
/* En el propio catálogo el enlace a cada familia sobra: ya estás en ella. */
.catalogo-completo .familia-pie {
  display: none;
}

/* ---------- 67. La banda de herramientas --------------------------------- */
/* Tinta, como la portada y el pie. El cambio de fondo es el separador: no
   lleva filete ni arriba ni abajo. El verde aparece en cuatro sitios contados
   —la cursiva del titular, los tres iconos, los tres enlaces y el estado de
   paso por encima— y en ninguno más. */
.seccion-herramientas {
  padding: 112px 0 120px;
}
.seccion-herramientas .familia-cabecera {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.seccion-herramientas .familia-lista a {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.seccion-herramientas .familia-lista a:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(134, 176, 122, 0.55);
}
.seccion-herramientas .pieza-nombre {
  font-weight: 500;
  color: #fff;
}
.seccion-herramientas .pieza-pitch {
  color: var(--sobre-oscuro-3);
}
/* Sobre tinta, los mismos tres tonos aclarados. */
.seccion-herramientas .pieza-tipo-skills {
  background: rgba(134, 176, 122, 0.15);
  color: var(--verde-claro);
}
.seccion-herramientas .pieza-tipo-aplicaciones {
  background: rgba(110, 168, 220, 0.15);
  color: var(--azul-claro);
}
.seccion-herramientas .pieza-tipo-descargables {
  background: rgba(217, 160, 103, 0.15);
  color: var(--naranja-claro);
}
.seccion-herramientas .familia-lista a:hover .pieza-nombre {
  color: var(--verde-claro);
}
/* Los enlaces de familia usan el blanco de cualquier otro enlace sobre tinta:
   en verde eran los únicos enlaces de color de la página. */

/* ---------- 68. Titular con saltos marcados ------------------------------- */
/* Como el de la portada: los tramos son líneas completas en pantalla ancha y
   texto corrido por debajo, donde no caben. */
.titular-lineas {
  text-wrap: initial;
  max-width: none;
}
@media (min-width: 900px) {
  .titular-lineas .linea {
    display: block;
  }
}
.titular-lineas em {
  font-style: italic;
  color: var(--verde-claro);
}

/* En el catálogo sobre papel el verde marca lo mismo que en la banda: el
   icono de familia, la cursiva del titular y el estado de paso por encima. */
.catalogo-completo .familia-lista a:hover {
  border-color: rgba(70, 115, 62, 0.45);
}
.catalogo-completo .familia-lista a:hover .pieza-nombre {
  color: var(--verde-enlace);
}
.titular-lineas em {
  color: var(--verde-enlace);
}
.seccion-oscura .titular-lineas em {
  color: var(--verde-claro);
}


/* ---------- 69. Apertura corrida ------------------------------------------ */
/* Tercera forma de abrir una sección: el titular corre a la medida y la glosa
   va debajo, en vez de repartirse en dos columnas. Con cinco secciones
   abriendo igual, el ritmo de la página era un metrónomo. */
.apertura-corrida {
  display: block;
}
.apertura-corrida .titular {
  max-width: 24ch;
  margin-bottom: 20px;
}
.apertura-corrida .entradilla {
  max-width: 52ch;
  margin-bottom: 0;
}

/* ---------- 70. Ajustes de alineación ------------------------------------- */
/* El retrato empieza en la línea de mayúsculas del titular, no en el borde
   de su caja. */
@media (min-width: 900px) {
  .despacho-caja {
    align-items: start;
  }
  .despacho-retrato {
    margin-top: 16px;
  }
}
.titular-despacho {
  margin-top: 0;
}
/* Correo y teléfono: la etiqueta se apoya en la misma línea base que la
   cifra, no unos píxeles por encima. */

/* ---------- 71. El peso de la cursiva ------------------------------------- */
/* Tiene más altura de x y más ancho que la redonda: al mismo cuerpo el bloque
   del titular quedaba de culo. Un escalón menos y vuelve a ser el remate de la
   frase en vez de un salto de tamaño. */
.portada-cursiva {
  font-size: 0.95em;
}

/* ---------- 72. Cierre de /servicios/: argumento, itinerario y FAQ -------
   Cierra las tres páginas de índice de servicio: /servicios/,
   /servicios-startups/ y /servicios-para-inversores/. El texto que había
   debajo del índice era una columna de 64ch pegada al margen izquierdo, con
   h2 del mismo peso —incluido el de las preguntas frecuentes— y sin apoyo en
   ninguna línea de la retícula de arriba.

   Aquí el texto cae sobre la MISMA mesa de dos columnas del índice: a la
   izquierda el argumento, a la derecha el itinerario. Por eso las tres
   rejillas repiten literalmente la declaración de `.indice` (apartado 25) en
   vez de fijar anchos propios: si el índice cambia de medida, el cierre lo
   sigue solo.

   Con las tres páginas convertidas, `.prosa-indice` (apartado 12 bis) se
   quedó sin markup y se ha retirado de la hoja. */

.cierre {
  margin-top: 100px;
  border-top: 1px solid var(--tinta);
  padding-top: 44px;
}

/* La misma geometría que `.indice`. No duplicar los valores a mano. */
.cierre-mesa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px 48px;
  align-items: start;
}

/* Entradilla: la tesis en serifa, en la columna izquierda de la mesa. Es lo
   único que se lee antes de decidir si se sigue. */
.cierre-lede {
  margin-bottom: 64px;
}
/* La tesis es hija única de la mesa, y con `auto-fit` una pista vacía se
   colapsa: el párrafo se quedaba con los 1.200 px enteros, que a 38 px de
   serifa es una línea de noventa caracteres. Se fijan las dos pistas para que
   se quede en la columna izquierda, con la misma calle de 48 px que el resto.
   El corte son los 728 px a los que la mesa deja de tener dos columnas:
   2 × 300 de pista mínima + 48 de calle + los 40 de `--pad-x` a cada lado. */
@media (min-width: 728px) {
  .cierre-lede {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cierre-tesis {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin: 0;
}
.cierre-tesis em {
  font-style: italic;
  font-size: 0.95em; /* la cursiva de Instrument Serif tiene más ojo */
  color: var(--verde-enlace);
}
@media (max-width: 899px) {
  .cierre-lede {
    margin-bottom: 44px;
  }
}

/* Bloque de texto. El filete y la etiqueta hacen el trabajo que antes hacía
   un h2 más grande. */
.cierre-bloque {
  border-top: 1px solid var(--linea);
  padding-top: 26px;
}
.cierre-bloque + .cierre-bloque {
  margin-top: 44px;
}
.cierre-etiqueta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 12px;
}
.cierre-etiqueta .num {
  color: var(--verde-enlace);
}
.cierre-bloque > h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
/* Los dos `p` con papel propio del bloque —la etiqueta y el pie de botón— se
   excluyen a mano: `.cierre-bloque > p` es (0,1,1) y les ganaba a
   `.cierre-etiqueta` y `.cierre-cta`, que son (0,1,0). La etiqueta salía a
   16 px en tinta-2 en vez de 11 px en gris, y el botón perdía sus 32 px de
   aire. Mismo recurso que usa `.cierre-rutas p:not(.cierre-clave)` más abajo. */
.cierre-bloque > p:not(.cierre-etiqueta):not(.cierre-cta) {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--tinta-2);
  max-width: 64ch;
}
.cierre-bloque > p:not(.cierre-etiqueta):not(.cierre-cta):last-child {
  margin-bottom: 0;
}

/* Itinerario: tres filas de clave y frase, en vez de tres párrafos que
   empiezan igual («Si estás…», «Si vas a…», «Y si lo que hay…»). La clave va
   en el verde de acento para el lado fundador y en el azul de marca para el
   lado inversor: el azul solo marca eso en todo el sitio. */
.cierre-rutas {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 24px;
}
.cierre-rutas > * {
  border-top: 1px solid var(--linea);
  margin: 0;
  padding: 16px 0 22px;
}
.cierre-rutas > :nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--linea);
}
.cierre-clave {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.cierre-clave-startup {
  color: var(--verde-enlace);
}
.cierre-clave-inversor {
  color: var(--azul);
}
.cierre-rutas p:not(.cierre-clave) {
  font-size: 16px;
  line-height: 1.68;
  color: var(--tinta-2);
}
@media (max-width: 560px) {
  /* Con 120 px de clave la frase se queda en 30ch y parte por todas partes. */
  .cierre-rutas {
    grid-template-columns: minmax(0, 1fr);
  }
  .cierre-rutas > * {
    border-top: 0;
    padding: 0 0 20px;
  }
  .cierre-rutas > .cierre-clave {
    border-top: 1px solid var(--linea);
    padding: 16px 0 6px;
  }
  .cierre-rutas > :nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .cierre-rutas > :last-child {
    border-bottom: 1px solid var(--linea);
  }
}

/* Los dos hubs de audiencia cierran con dos botones. En flex con gap caen a
   dos líneas cuando la columna se estrecha, en vez de desbordarla; en
   /servicios/, con un solo botón, no cambia nada. */
.cierre-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 0;
}

/* Preguntas frecuentes: sección propia, no un h2 más de la prosa. A dos
   columnas porque cuatro acordeones apilados a 1.280 px dejan una fila de
   plegados sueltos al final de la página. */
.cierre-faq {
  margin-top: 80px;
  border-top: 1px solid var(--tinta);
  padding-top: 26px;
}
.cierre-faq > h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
}
/* `.faq` trae su propio border-top: en dos columnas serían dos filetes a la
   misma altura, así que el de arriba lo pone ya `.cierre-faq`. */
.cierre-faq .faq {
  border-top: 0;
}
.cierre-faq .faq > .faq-item:first-child {
  border-top: 1px solid var(--linea);
}