/* ==========================================================================
   GIG · Go Investments Group
   Raíces y horizonte

   IDEA
   El lema convertido en imágenes. «Visión sin límites» es el horizonte de
   volcanes sobre las nubes (portada, a color). «Capital con raíces» son las
   raíces de la ceiba (segundo acto, en blanco y negro). La página abre arriba
   de las nubes y cierra con una sola palabra, «Hablemos.», sobre la sala de
   juntas con el Valle Central de noche. El jaguar de bronce sale del verde de
   la casa y vigila los principios.

   Desde el 12-oct-2026 la portada lleva adentro la visión y la calculadora
   (una sola página), y desde el 14-oct-2026 cada empresa del grupo tiene su
   página. Esta hoja es la base de todas las páginas (index, gracias, 404 y
   las de las empresas): cabecera, pie, botones y los bloques de siempre.
   Lo propio de la página principal que no es de la portada de siempre («Cómo
   lo vemos», «La primera apuesta», las fichas del portafolio, las cuatro
   reglas del fundador, el expediente para inversionistas) y las costuras
   entre bloques están en vision.css; la calculadora, en calculadora.css.
   Aquí solo hay de ella el fondo y el aire de su sección (.calc-sitio), y
   del expediente, el enlace «Pedir el expediente» del contacto.

   PALETA
   --selva        #0F2A22  verde selva profundo: el color de la casa
   --selva-hondo  #0A1D18  pie y velos sobre foto
   --marfil       #F4EFE4  papel de la página
   --oro          #B8975A  oro viejo: filetes, botón, detalles (nunca texto
                           chico sobre marfil)
   --oro-claro    #D2B77F  oro para texto sobre verde (7,9:1)
   --oro-tinta    #7A5C26  oro para texto sobre marfil (5,4:1)
   --tinta        #121A16  texto sobre marfil
   --tinta-suave  #45514B  texto secundario sobre marfil (7:1)

   TIPOGRAFÍA (dos familias)
   Newsreader, corte de exhibición (eje óptico en 72): lema, declaraciones,
   títulos, nombres de marca. Pesos 420 a 500, nunca negrita. Las máximas van
   en su cursiva y en oro.
   Inter 400 / 500 / 600: texto e interfaz. Inter 900: solo el logotipo «GIG.»

   ESCALA (fluida, de 360 a 1920 px)
   Lema             clamp(2.375rem, 7.4vw, 7.25rem)    interlínea .98
   «Hablemos.»      clamp(3.5rem, 9.2vw, 8.75rem)      interlínea .92
   Título sección   clamp(2.375rem, 4.8vw, 4.5rem)     interlínea 1.02
   Declaración      clamp(1.875rem, 4.1vw, 3.875rem)   interlínea 1.08
   Principio        clamp(1.625rem, 2.6vw, 2.375rem)   peso 500
   Máxima           clamp(1.3125rem, 1.95vw, 1.75rem)  cursiva y oro
   Entrada          clamp(1.0625rem, 1.45vw, 1.3125rem)
   Texto            1.0625rem / 1.65
   Rótulo           .75rem, peso 600, versales, tracking .2em

   RETÍCULA
   Caja de 1320 px como máximo, 12 columnas, medianil de 32 px,
   margen lateral clamp(20px, 5vw, 72px). Aire vertical entre secciones
   clamp(72px, 10vw, 160px). Jaguar y retrato rompen la caja y llegan
   al borde de la pantalla; quedan fijos mientras corre el texto de al lado.
   Dos verticales para la mitad derecha: los registros arrancan en la
   columna 6 (portafolio, correos) y las declaraciones en la 7 (remate del
   grupo, carta del fundador, lema del pie).

   PRINCIPIOS, CON O SIN JAGUAR
   Por omisión la sección lleva el jaguar de bronce a la derecha. Para
   quitarlo basta añadir una clase a la sección en index.html:
     <section class="principios principios--sin-emblema" ...>
   Sin jaguar, cada lema pasa a las columnas 7 a 12 y crece a la escala de
   la carta. La foto no se descarga.

   FILETES
   De 1 px. Oro para abrir o cerrar un bloque; tinta entera para encabezar una
   lista; tinta al 14 % (marfil al 16 % sobre verde) entre filas.

   BOTONES
   Rectos, sin radio. Alto 52 px. Oro lleno con texto verde hondo en Inter
   600 versales; el secundario es un enlace con filete de oro debajo. El
   único botón que va sobre marfil (el del expediente, en vision.css) es
   verde de la casa con la letra en marfil: el oro no se despega del papel.

   MOVIMIENTO
   Solo dos: la foto de portada se asienta muy despacio al cargar y el lema
   sube una vez. Nada aparece al hacer scroll. Se anula con
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --selva: #0F2A22;
  --selva-hondo: #0A1D18;
  --marfil: #F4EFE4;
  --oro: #B8975A;
  --oro-claro: #D2B77F;
  --oro-tinta: #7A5C26;
  --tinta: #121A16;
  --tinta-suave: #45514B;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --margen: clamp(1.25rem, 5vw, 4.5rem);
  --ancho: 82.5rem;
  --medianil: 2rem;
  --seccion: clamp(4.5rem, 10vw, 10rem);
  --cabecera: 5.25rem;
  --cabecera-fija: 4.25rem;
  --foco: var(--oro-claro);
}

/* Base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--cabecera-fija);
}

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

img, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p, dd, li { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 4px;
}

.caja {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
}

.salto {
  position: absolute;
  left: var(--margen);
  top: -6rem;
  z-index: 100;
  padding: .9rem 1.25rem;
  background: var(--marfil);
  color: var(--tinta);
  font-weight: 600;
  font-size: .875rem;
}
.salto:focus { top: 1rem; }

/* La serif de la casa: siempre en su corte de exhibición */
.lema,
.declaracion,
.grupo__remate,
.datos dd,
.principios h2,
.portafolio h2,
.lista-principios h3,
.marca,
.fundador h2,
.carta__apertura,
.carta__cierre,
.sala h2,
.directorio__oficina p,
.pie__lema,
.aviso h1 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

/* Rótulo: la única etiqueta en versales del sistema */
.rotulo {
  display: flex;
  align-items: center;
  gap: .9rem;
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.rotulo::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: var(--oro);
}
.rotulo--tinta { color: var(--oro-tinta); }

/* Botones --------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0 2rem;
  background: var(--oro);
  color: var(--selva-hondo);
  font: 600 .8125rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color .25s ease;
}
.boton:hover { background: var(--oro-claro); }

.enlace {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  font: 500 1rem/1.2 var(--sans);
  border-bottom: 1px solid var(--oro);
  transition: border-color .25s ease, color .25s ease;
}
.enlace:hover { color: var(--oro-claro); border-color: var(--oro-claro); }

/* Zona de toque de 44 px para los enlaces de texto, sin mover nada a la vista */
.enlace::after,
.correo::after,
a.marca::after {
  content: "";
  position: absolute;
}
.enlace::after { inset: -.5rem -.75rem; }
.correo::after { inset: -.75rem 0; }
a.marca::after { inset: -.6rem -.5rem; }

/* Cabecera -------------------------------------------------------------- */

.cabecera {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--marfil);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.js .cabecera { position: fixed; }

.cabecera__fila {
  width: min(100% - 2 * var(--margen), var(--ancho));
  height: var(--cabecera);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: height .35s ease;
}

.cabecera.es-solida {
  background: var(--selva);
  box-shadow: 0 1px 0 rgba(184, 151, 90, .4);
}
.cabecera.es-solida .cabecera__fila { height: var(--cabecera-fija); }
/* Sobre la foto, el anillo de foco va en marfil: el oro no se despega del cielo */
.cabecera:not(.es-solida) { --foco: var(--marfil); }

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font: 900 1.875rem/1 var(--sans);
  letter-spacing: -.04em;
  color: var(--marfil);
}

/* Siete entradas en un renglón desde 901 px (también con la barra de desplazamiento de Windows) */
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.3vw, 2.5rem);
}
.nav a { white-space: nowrap; }
.nav a {
  position: relative;
  display: inline-block;
  padding: .95rem 0;
  font: 500 .875rem/1 var(--sans);
  letter-spacing: .02em;
}
.nav a:not(.nav__contacto)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .35rem;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
/* El mismo filete marca la sección en la que está el lector */
.nav a:not(.nav__contacto):hover::after,
.nav a[aria-current]:not(.nav__contacto)::after { transform: scaleX(1); }
.nav .nav__contacto {
  padding: .9rem 1.25rem;
  border: 1px solid rgba(244, 239, 228, .6);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.nav .nav__contacto[aria-current] { border-color: var(--oro); }
.nav .nav__contacto:hover {
  background: var(--marfil);
  border-color: var(--marfil);
  color: var(--selva);
}

.menu-boton {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: none;
  border: 1px solid rgba(244, 239, 228, .6);
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Portada --------------------------------------------------------------- */

.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--selva-hondo);
  color: var(--marfil);
}

.portada__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 22%;
  animation: asentar 16s cubic-bezier(.2, .6, .2, 1) both;
}

/* Velo: arriba para la cabecera, abajo para el lema. Verde de la casa, no negro. */
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10, 29, 24, .74) 0, rgba(10, 29, 24, .56) 9%, rgba(10, 29, 24, .12) 18%, rgba(10, 29, 24, 0) 26%),
    linear-gradient(to top, rgba(10, 29, 24, .96) 0, rgba(10, 29, 24, .84) 26%, rgba(10, 29, 24, .46) 52%, rgba(10, 29, 24, 0) 76%);
}

.portada__contenido {
  padding-top: calc(var(--cabecera) + 3rem);
  padding-bottom: clamp(2.25rem, 6vh, 4.5rem);
}

/* Cada renglón del lema cabe entero en todos los anchos; si el lector fuerza
   el espaciado del texto, parte en vez de cortarse. */
.lema {
  font-weight: 440;
  font-size: clamp(2.375rem, 7.4vw, 7.25rem);
  line-height: .98;
  letter-spacing: -.024em;
}
.lema span {
  display: block;
  animation: subir 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
.lema span + span { animation-delay: .16s; }

.portada__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 4rem;
  margin-top: clamp(1.5rem, 3.6vh, 2.5rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid rgba(184, 151, 90, .8);
}

.bajada {
  max-width: 39rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  line-height: 1.55;
  color: rgba(244, 239, 228, .95);
}

/* Tres acciones: el botón y dos enlaces de texto */
.portada__acciones {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem clamp(1.5rem, 2.2vw, 2rem);
}

@keyframes asentar {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(.35em); }
  to { opacity: 1; transform: none; }
}

/* El grupo: raíces ------------------------------------------------------ */

.raices {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(calc(100vh - var(--cabecera-fija)), 58rem);
  background: #0b0f0d;
  color: var(--marfil);
}
.raices__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.raices__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* El velo cubre solo la mitad del texto; el tronco queda limpio a la derecha.
   La esquina de arriba a la derecha (follaje desenfocado) se hunde en sombra
   para que la luz caiga sobre las raíces. */
.raices::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(6, 13, 11, .5) 0, rgba(6, 13, 11, 0) 26%),
    radial-gradient(ellipse 30% 78% at 100% 0, rgba(6, 13, 11, .94) 0, rgba(6, 13, 11, .86) 46%, rgba(6, 13, 11, 0) 100%),
    linear-gradient(to right, rgba(6, 13, 11, .93) 0, rgba(6, 13, 11, .86) 32%, rgba(6, 13, 11, .62) 47%, rgba(6, 13, 11, .2) 60%, rgba(6, 13, 11, 0) 74%);
}

.raices__contenido { padding-block: clamp(6rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem); }

.declaracion {
  max-width: 10.4em;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  font-weight: 420;
  font-size: clamp(1.875rem, 4.1vw, 3.875rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: wrap;
}
.declaracion span,
.declaracion strong { display: block; }
.declaracion strong {
  margin-top: .32em;
  font-weight: 420;
  color: var(--oro-claro);
  text-wrap: balance;
}

.grupo__cuerpo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  padding-block: var(--seccion);
}

/* El párrafo arranca a la altura del texto del remate, no de su filete */
.grupo__parrafo {
  grid-column: 1 / span 5;
  padding-top: calc(1.5rem + 1px);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.62;
  text-wrap: balance;
}

.grupo__remate {
  grid-column: 7 / -1;
  padding-top: 1.5rem;
  border-top: 1px solid var(--oro);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.9vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.grupo__remate span { display: block; }

/* «Región» cae en la columna 7, la misma vertical del remate */
.datos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: calc(50% - var(--medianil) / 2) minmax(0, 3fr) minmax(0, 4fr);
  column-gap: var(--medianil);
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
}
.datos > div {
  padding-top: 1.25rem;
  border-top: 1px solid var(--tinta);
}
.datos dt {
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}
.datos dd {
  margin-top: 1rem;
  max-width: 14em;
  font-weight: 500;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: wrap;
}

/* Principios ------------------------------------------------------------ */

.principios {
  display: grid;
  grid-template-columns:
    minmax(var(--margen), 1fr)
    minmax(0, calc(var(--ancho) * .53))
    minmax(0, calc(var(--ancho) * .47))
    minmax(var(--margen), 1fr);
  /* El verde de la casa tal como sale en el fondo de la foto del jaguar (un punto de azul
     más que --selva), para que la escultura no deje costura contra la sección. */
  background: #0F2A23;
  color: var(--marfil);
}

.principios__texto {
  grid-column: 2;
  padding-block: var(--seccion);
  padding-right: clamp(0rem, 3vw, 3rem);
}

.principios__cabeza { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.principios h2,
.portafolio h2 {
  font-weight: 420;
  font-size: clamp(2.375rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}

.entrada {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  line-height: 1.5;
  color: rgba(244, 239, 228, .84);
  text-wrap: balance;
}

.lista-principios li {
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
  border-top: 1px solid rgba(244, 239, 228, .16);
}
.lista-principios li:last-child { padding-bottom: 0; }

.lista-principios h3 {
  font-weight: 500;
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -.012em;
}
.lista-principios p {
  max-width: 33rem;
  margin-top: .85rem;
  color: rgba(244, 239, 228, .86);
  text-wrap: balance;
}
.lista-principios .maxima {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3125rem, 1.95vw, 1.75rem);
  line-height: 1.2;
  color: var(--oro-claro);
}

/* El jaguar sale del verde: la cabeza entera, con su oreja, en todos los anchos
   (el alto se limita por el ancho de su columna) y el cuello se pierde hacia la
   derecha. La foto se recorta a lo alto, así que la posición de la oreja depende
   del alto de la caja: por eso el velo horizontal se mide con --alto y no en %. */
.principios__emblema {
  grid-column: 3 / 5;
  min-width: 0;
  container-type: inline-size;
}
.principios__emblema picture {
  --alto: min(100vh - var(--cabecera-fija), 58rem);
  position: sticky;
  top: calc(var(--cabecera-fija) + (100vh - var(--cabecera-fija) - var(--alto)) / 2);
  height: var(--alto);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 4%, #000 20%, #000 80%, transparent 97%),
    linear-gradient(to right, transparent 0, #000 8%, #000 calc(var(--alto) * .87), transparent min(var(--alto), 100%));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 4%, #000 20%, #000 80%, transparent 97%),
    linear-gradient(to right, transparent 0, #000 8%, #000 calc(var(--alto) * .87), transparent min(var(--alto), 100%));
  mask-composite: intersect;
}
@supports (height: 1cqw) {
  .principios__emblema picture { --alto: min(100vh - var(--cabecera-fija), 58rem, 104cqw); }
}
.principios__emblema img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
}

/* Principios sin jaguar (clase «principios--sin-emblema» en la sección):
   nombre y explicación en las columnas 1 a 5, el lema en las columnas 7 a 12
   a la escala de la apertura de la carta. */
.principios--sin-emblema { display: block; }
.principios--sin-emblema .principios__emblema { display: none; }
.principios--sin-emblema .principios__texto {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
  padding-right: 0;
}
.principios--sin-emblema .principios__cabeza,
.principios--sin-emblema .lista-principios li {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: baseline;
}
.principios--sin-emblema .principios__cabeza h2 { grid-column: 1 / span 6; }
.principios--sin-emblema .principios__cabeza .entrada { grid-column: 7 / -1; margin-top: 0; }
.principios--sin-emblema .lista-principios li { padding-block: clamp(2rem, 3.6vw, 3.25rem); }
.principios--sin-emblema .lista-principios li:last-child { padding-bottom: 0; }
.principios--sin-emblema .lista-principios h3 { grid-column: 1 / span 5; grid-row: 1; }
.principios--sin-emblema .lista-principios p:not(.maxima) { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
.principios--sin-emblema .lista-principios .maxima {
  grid-column: 7 / -1;
  grid-row: 1 / span 2;
  max-width: none;
  margin-top: 0;
  font-size: clamp(1.875rem, 3.3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.012em;
}

/* Portafolio ------------------------------------------------------------ */

.portafolio {
  --foco: var(--tinta);
  padding-block: var(--seccion);
}

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

.portafolio__cabeza {
  grid-column: 1 / span 5;
  align-self: start;
  position: sticky;
  top: 7rem;
}
.portafolio h2 span { display: block; }

.estado {
  max-width: 22rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--oro);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--tinta-suave);
}

.portafolio__indice { grid-column: 6 / -1; }

.linea + .linea { margin-top: clamp(2.75rem, 5vw, 4rem); }

.linea__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  flex-wrap: wrap;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--tinta);
}
.linea__cabeza h3 {
  font: 600 .75rem/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.linea__cabeza p {
  font-size: .875rem;
  line-height: 1.3;
  color: var(--tinta-suave);
}

.indice li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 4fr);
  align-items: baseline;
  column-gap: 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid rgba(18, 26, 22, .14);
}
.marca {
  font-weight: 500;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.rubro {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.nota {
  text-align: right;
  font: 600 .75rem/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}
/* La marca que tiene sitio propio es el enlace: el filete de oro lo dice */
a.marca {
  position: relative;
  justify-self: start;
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color .25s ease;
}
a.marca:hover { text-decoration-color: var(--tinta); }

.sectores {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .9rem 2.75rem;
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--oro);
}
.sectores__rotulo {
  flex: none;
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}
.sectores ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.55vw, 1.4375rem);
  line-height: 1.3;
}
.sectores li:not(:last-child)::after {
  content: "·";
  margin-inline: .5em;
  font-style: normal;
  color: var(--oro-tinta);
}

/* Fundador -------------------------------------------------------------- */

/* Las mismas 12 columnas de la página, con un margen a cada lado: el retrato
   va del borde de la pantalla a la columna 5 y la carta ocupa de la 7 a la 12.
   El aire de abajo separa el retrato del marfil del contacto. */
.fundador {
  display: grid;
  grid-template-columns:
    minmax(calc(var(--margen) - var(--medianil)), 1fr)
    repeat(12, minmax(0, calc((var(--ancho) - 11 * var(--medianil)) / 12)))
    minmax(calc(var(--margen) - var(--medianil)), 1fr);
  column-gap: var(--medianil);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
  background: var(--selva);
  color: var(--marfil);
}

.fundador__retrato {
  grid-column: 1 / 7;
  min-width: 0;
}
.fundador__retrato picture {
  position: sticky;
  top: var(--cabecera-fija);
  height: calc(100vh - var(--cabecera-fija));
  max-height: 60rem;
}
.fundador__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.fundador__texto {
  grid-column: 8 / 14;
  min-width: 0;
  padding-block: clamp(4.5rem, 9vw, 8.5rem) clamp(2rem, 4vw, 3.5rem);
}

.fundador h2 {
  margin-top: 1.25rem;
  font-weight: 420;
  font-size: clamp(2.25rem, 3.8vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.fundador__linea {
  max-width: 30rem;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(244, 239, 228, .8);
  text-wrap: balance;
}

.carta {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  padding-top: clamp(2.5rem, 4.5vw, 4rem);
  border-top: 1px solid rgba(244, 239, 228, .16);
}

.carta__apertura {
  font-weight: 420;
  font-size: clamp(1.875rem, 3.3vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.018em;
}
/* Dos frases, dos golpes: cada una en su bloque */
.carta__apertura span { display: block; }
.carta__apertura span + span { margin-top: .18em; }
.carta p:not([class]) {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(244, 239, 228, .88);
  text-wrap: balance;
}
.carta__cierre {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}
.carta__cierre span { display: block; }

.firma {
  display: inline-block;
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--oro);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.75vw, 1.5625rem);
  line-height: 1.2;
  color: var(--oro-claro);
}

/* Calculadora (sección #calculadora de la portada) ----------------------- */

/* Aquí solo el plano: verde hondo, a todo el ancho, con el aire de una sección. Lo de adentro (el tablero,
   el aviso, el formulario) lo pone calculadora.css. El título lleva la escala «Título sección» con
   especificidad mínima (:where), para que cualquier regla de esa hoja mande sobre esta. */
.calc-sitio {
  padding-block: var(--seccion);
  background: var(--selva-hondo);
  color: var(--marfil);
}
:where(.calc-sitio) h2 {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums;
  font-weight: 420;
  font-size: clamp(2.375rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* Contacto -------------------------------------------------------------- */

/* «Hablemos.» va sobre la foto de la sala de juntas con el Valle Central de noche
   (la foto la eligió el dueño; sustituye a la anterior, que mostraba volcanes en punta). */
.sala {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(100vh - var(--cabecera-fija)), 60rem);
  background: var(--selva-hondo);
  color: var(--marfil);
}
.sala__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.sala__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 42%;
}
.sala::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 20, 16, .95) 0, rgba(8, 20, 16, .78) 24%, rgba(8, 20, 16, .28) 46%, rgba(8, 20, 16, 0) 60%);
}
.sala__contenido { padding-block: 6rem clamp(2.25rem, 6vh, 4rem); }

.sala h2 {
  font-weight: 420;
  font-size: clamp(3.5rem, 9.2vw, 8.75rem);
  line-height: .92;
  letter-spacing: -.03em;
  overflow-wrap: break-word;
}
.sala p {
  margin-top: 1.1rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  color: rgba(244, 239, 228, .95);
}
@media (max-width: 900px) {
  .sala { min-height: min(76vh, 40rem); }
}
@media (max-width: 700px) {
  .sala__foto img { object-position: 74% 50%; }
}

.contacto { --foco: var(--tinta); }
.contacto .sala { --foco: var(--oro-claro); }

.directorio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

.directorio__oficina { grid-column: 1 / span 4; }
.directorio__oficina p {
  max-width: 9.5em;
  margin-top: 1.5rem;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: wrap;
}

.directorio__correos { grid-column: 6 / -1; }
.indice--correos {
  margin-top: 1.5rem;
  border-top: 1px solid var(--tinta);
}
.indice--correos li {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  padding-block: 1.25rem;
}
.correo {
  position: relative;
  justify-self: end;
  text-align: right;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.75vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--oro-tinta), var(--oro-tinta)) 0 100% / 0 1px no-repeat;
  transition: background-size .3s ease;
}
.correo:hover { background-size: 100% 1px; }

/* Pie ------------------------------------------------------------------- */

.pie {
  padding-block: clamp(4rem, 8vw, 7rem) 2.25rem;
  background: var(--selva-hondo);
  color: var(--marfil);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: start;
}

.pie__marca { grid-column: 1 / span 5; }
.logo--pie {
  display: inline-block;
  font-size: clamp(3rem, 6vw, 5rem);
}
.pie__marca p {
  margin-top: .9rem;
  font: 600 .75rem/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

.pie__lema {
  grid-column: 7 / -1;
  font-weight: 420;
  font-size: clamp(1.75rem, 3.3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.018em;
}
.pie__lema span { display: block; }

.pie__nav,
.pie__legal {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(184, 151, 90, .45);
  font-size: .875rem;
  line-height: 1.5;
}
.pie__nav { grid-column: 1 / span 6; padding-top: .75rem; }
.pie__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}
.pie__nav a {
  display: inline-block;
  padding-block: .75rem;
  color: rgba(244, 239, 228, .88);
  transition: color .25s ease;
}
.pie__nav a:hover { color: var(--oro-claro); }
.pie__legal {
  grid-column: 7 / -1;
  text-align: right;
  color: rgba(244, 239, 228, .76);
}
.pie__legal span::before { content: "· "; }

/* Página que no existe (404.html) ---------------------------------------- */

.aviso {
  display: flex;
  align-items: flex-end;
  min-height: 76vh;
  min-height: 76svh;
  background: var(--selva);
  color: var(--marfil);
}
.aviso__contenido { padding-block: calc(var(--cabecera) + 4rem) clamp(3.5rem, 9vh, 6.5rem); }
.aviso h1 {
  font-weight: 420;
  font-size: clamp(2.375rem, 6.2vw, 5.75rem);
  line-height: 1;
  letter-spacing: -.022em;
}
.aviso p {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  color: rgba(244, 239, 228, .86);
}
.aviso .boton { margin-top: clamp(2rem, 4vh, 3rem); }

/* Tableta --------------------------------------------------------------- */

@media (max-width: 1100px) {
  .datos { grid-template-columns: 5fr 3fr 4fr; }

  /* El rubro se queda con el ancho que sobra: ninguna fila del registro parte en dos */
  .indice li { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 7.25rem; column-gap: 1rem; }
  .indice--correos li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

  .pie__legal span { display: block; }
  .pie__legal span::before { content: none; }
}

/* Teléfono y tableta vertical ------------------------------------------- */

@media (max-width: 900px) {
  :root { --cabecera: 4.25rem; }

  /* Menú */
  .js .menu-boton { display: inline-flex; justify-content: center; min-width: 6rem; position: relative; z-index: 2; }
  .js .logo { position: relative; z-index: 2; }
  .js .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 6rem var(--margen) 3rem;
    background: var(--selva);
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
    overflow-y: auto;
  }
  .js.menu-abierto .nav {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s ease;
  }
  .js.menu-abierto { overflow: hidden; }
  /* Centrada cuando cabe; cuando no (teléfono apaisado), arranca bajo la cabecera y se desplaza */
  .js .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-block: auto;
    border-top: 1px solid rgba(184, 151, 90, .5);
  }
  .js .nav li { border-bottom: 1px solid rgba(244, 239, 228, .16); }
  .js .nav a,
  .js .nav .nav__contacto {
    display: block;
    padding: 1.1rem 0;
    border: 0;
    font: 420 2rem/1.1 var(--serif);
    font-variation-settings: "opsz" 72;
    letter-spacing: -.015em;
  }
  .js .nav a::after { display: none; }
  .js .nav .nav__contacto:hover { background: none; color: var(--oro-claro); }
  /* En la lista del teléfono no hay filete: la sección en la que va el lector se marca en oro */
  .js .nav a[aria-current] { color: var(--oro-claro); }

  /* Sin guion: la navegación queda a la vista, en dos o tres renglones, sobre verde. Con siete entradas ya no
     cabe encima de la portada sin pisar el lema en un teléfono chico: la cabecera deja de flotar y la página
     empieza debajo de ella. */
  html:not(.js) .cabecera { position: static; background: var(--selva); }
  html:not(.js) .cabecera__fila { height: auto; padding-block: .75rem; flex-wrap: wrap; gap: .25rem 1.5rem; }
  html:not(.js) .nav ul { flex-wrap: wrap; gap: .25rem 1.25rem; }
  html:not(.js) .nav a,
  html:not(.js) .nav .nav__contacto { padding: .6rem 0; border: 0; }
  html:not(.js) .nav a:not(.nav__contacto)::after { bottom: 0; }

  /* Rejillas de una sola columna */
  .grupo__cuerpo,
  .portafolio__rejilla,
  .directorio,
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
  .grupo__cuerpo > *,
  .portafolio__rejilla > *,
  .directorio > *,
  .pie__rejilla > * { grid-column: 1; }

  /* Portada: en tableta vertical el encuadre busca el volcán entero bajo el sol.
     El lema también mira el alto, para que en un teléfono apaisado quepa con su bajada. */
  .portada__foto img { object-position: 75% 22%; }
  .portada__pie { flex-direction: column; align-items: flex-start; }
  .bajada { text-wrap: balance; }
  .lema { font-size: clamp(2.25rem, min(9.4vw, 14vh), 5.5rem); }

  /* Grupo */
  .raices { min-height: min(88vh, 48rem); align-items: flex-end; }
  .raices::after {
    background: linear-gradient(to top, rgba(6, 13, 11, .96) 0, rgba(6, 13, 11, .88) 40%, rgba(6, 13, 11, .3) 72%, rgba(6, 13, 11, .05) 100%);
  }
  .raices__contenido { padding-block: 6rem 3rem; }
  .declaracion { max-width: 13em; font-size: clamp(1.875rem, 6.6vw, 3.25rem); text-wrap: balance; }

  .grupo__parrafo { padding-top: 0; }
  .grupo__remate { margin-top: 2.5rem; }
  .datos { grid-template-columns: 1fr; row-gap: 2rem; }
  .datos dd { max-width: none; }

  /* Principios */
  .principios h2,
  .portafolio h2 { font-size: clamp(2.375rem, 7vw, 3.75rem); }
  .principios { grid-template-columns: var(--margen) minmax(0, 1fr) var(--margen); }
  .principios__texto { grid-column: 2; padding-top: 0; padding-right: 0; }
  .principios__emblema { grid-column: 1 / -1; order: -1; }
  /* El jaguar nunca es lo más grande de la pantalla: en tableta queda a la derecha, a media columna */
  .principios__emblema picture {
    position: static;
    width: min(100%, 30rem);
    height: auto;
    max-height: none;
    margin-left: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to right, transparent 0, #000 clamp(0px, 100vw - 30rem, 2rem));
    mask-image: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to right, transparent 0, #000 clamp(0px, 100vw - 30rem, 2rem));
  }
  .principios__emblema img {
    aspect-ratio: 5 / 4;
    height: auto;
    object-position: 22% 50%;
  }

  /* Principios sin jaguar: una columna, con el lema debajo y más grande */
  .principios--sin-emblema .principios__texto { padding-top: var(--seccion); }
  .principios--sin-emblema .principios__cabeza,
  .principios--sin-emblema .lista-principios li { display: block; }
  .principios--sin-emblema .principios__cabeza .entrada { margin-top: 1.25rem; }
  .principios--sin-emblema .lista-principios li { padding-block: clamp(1.75rem, 3.2vw, 2.75rem); }
  .principios--sin-emblema .lista-principios li:last-child { padding-bottom: 0; }
  .principios--sin-emblema .lista-principios .maxima { margin-top: 1rem; font-size: clamp(1.5rem, 6.4vw, 2rem); }

  /* Portafolio */
  .portafolio__cabeza { position: static; margin-bottom: 3rem; }
  .indice li { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) minmax(0, 4fr); }
  .indice--correos li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

  /* Sectores: renglones parejos, sin un rubro suelto al final. El punto va delante de cada
     rubro y el del inicio de renglón queda recortado, así ningún renglón termina en un punto. */
  .sectores { overflow-x: hidden; overflow-x: clip; }
  .sectores ul { display: block; margin-left: -1.3em; line-height: 1.55; text-wrap: balance; }
  .sectores li { display: inline; white-space: nowrap; }
  .sectores li::before {
    content: "·";
    display: inline-block;
    width: 1.3em;
    text-align: center;
    font-style: normal;
    color: var(--oro-tinta);
  }
  .sectores li:not(:last-child)::after { content: none; }

  /* Fundador: retrato cuadrado, con la cabeza entera y el aire de arriba del original */
  .fundador { grid-template-columns: var(--margen) minmax(0, 1fr) var(--margen); column-gap: 0; }
  .fundador__retrato { grid-column: 1 / -1; }
  .fundador__retrato picture { position: static; height: auto; max-height: none; }
  .fundador__retrato img { aspect-ratio: 1 / 1; height: auto; object-position: 50% 0; }
  .fundador__texto { grid-column: 2; padding-top: 3rem; }

  /* Contacto */
  .directorio { row-gap: 3rem; }
  .directorio__oficina p { max-width: none; }

  /* Pie */
  .pie__lema { margin-top: 2.5rem; }
  .pie__legal { margin-top: .75rem; padding-top: 0; border-top: 0; text-align: left; }
  .pie__nav { margin-top: 3rem; }
}

@media (max-width: 700px) {
  /* La foto ocupa los tres cuartos de arriba y muestra el cono entero, las nubes y el sol;
     el cuarto de abajo es el verde hondo de la casa, donde va el texto. */
  .portada__foto { bottom: 24%; }
  .portada__foto img { object-position: 50% 0; }
  .portada::after {
    background:
      linear-gradient(to bottom, rgba(10, 29, 24, .74) 0, rgba(10, 29, 24, .46) 10%, rgba(10, 29, 24, 0) 26%),
      linear-gradient(to top, rgba(10, 29, 24, 1) 0, rgba(10, 29, 24, 1) 24%, rgba(10, 29, 24, .9) 38%, rgba(10, 29, 24, .5) 56%, rgba(10, 29, 24, 0) 76%);
  }
  .lema { font-size: clamp(2.125rem, min(11vw, 14vh), 4rem); }
  /* Las tres acciones no caben en un renglón: el botón arriba y los dos enlaces debajo */
  .portada__acciones {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 1rem 1.75rem;
  }
  .portada__acciones .boton { grid-column: 1 / -1; justify-self: start; }

  .fundador__retrato img { aspect-ratio: 4 / 5; }

  .linea__cabeza { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .indice li {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .25rem;
    padding-block: .95rem;
  }
  .indice .rubro { grid-column: 1; grid-row: 2; font-size: .9375rem; }
  .indice .nota { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .indice--correos li { grid-template-columns: 1fr; row-gap: .35rem; }
  .indice--correos .rubro { grid-row: auto; }
  .correo { justify-self: start; text-align: left; font-size: clamp(1.125rem, 5.2vw, 1.5rem); }

  .pie__nav ul { display: grid; grid-template-columns: repeat(3, max-content); }
}

/* Movimiento reducido ---------------------------------------------------- */

/* El desplazamiento suave se activa con la página ya asentada (guion.js pone la clase cuando cargaron las
   tipografías): al llegar por un enlace con ancla (/#calculadora, /#vision) el salto es directo y la sección
   no queda corrida cuando la letra termina de llegar. */
@media (prefers-reduced-motion: no-preference) {
  html.asentada { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Páginas de texto (aviso-legal.html y privacidad.html)

   Solo añade; no cambia ninguna regla de arriba. El <body> de estas páginas
   lleva la clase «pagina-texto» y el <main> la clase «texto».

   Banda de título en el verde de la casa, como la página 404, para que la
   cabecera transparente se comporte igual que en el inicio. Debajo, sobre
   marfil, cada apartado usa las 12 columnas de la página: el título en las
   columnas 1 a 4 (se queda fijo mientras corre su texto, como la cabeza del
   portafolio) y el texto desde la columna 6, la vertical de los registros.

   Escalas tomadas de la tabla de arriba: el título de página es un «Título
   sección» y el de cada apartado un «Principio».

   .borrador   nota de borrador sobre el título. Se quita al publicar.
   .pendiente  dato que falta. Se resuelven todos antes de publicar.
   .ficha      filas de datos, con los filetes del registro de marcas.
   .pasos      pasos numerados.
   ========================================================================== */

.texto h1,
.texto h2,
.texto h3,
.pasos > li::before {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

.texto__cabeza {
  padding-block: calc(var(--cabecera) + clamp(3rem, 7vw, 6rem)) clamp(2.75rem, 5vw, 4.5rem);
  background: var(--selva);
  color: var(--marfil);
}
.texto h1 {
  font-weight: 420;
  font-size: clamp(2.375rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.texto__cabeza .entrada {
  max-width: 38rem;
  margin-top: 1.5rem;
}

.borrador {
  display: inline-block;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  padding: .7rem 1.1rem;
  border: 1px solid var(--oro);
  font: 600 .9375rem/1.3 var(--sans);
  color: var(--oro-claro);
}

.texto__cuerpo {
  --foco: var(--tinta);
  padding-block: clamp(.5rem, 2vw, 1.5rem) var(--seccion);
}

.apartado {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(18, 26, 22, .14);
}
.apartado:first-child { border-top: 0; }

.apartado > h2 {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: 7rem;
  font-weight: 500;
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -.012em;
}

.apartado__texto { grid-column: 6 / -1; }
.apartado__texto > * + * { margin-top: 1.1rem; }
.apartado__texto > p,
.apartado__texto > ul { max-width: 40rem; }

.apartado__texto > h3 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.apartado__texto > h3:first-child { margin-top: 0; }

.apartado__texto a {
  text-decoration: underline;
  text-decoration-color: var(--oro-tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: break-word;
  transition: text-decoration-color .25s ease;
}
.apartado__texto a:hover { text-decoration-color: var(--tinta); }

/* Listas: un punto de oro, como el que separa los sectores del portafolio */
.apartado__texto ul > li {
  position: relative;
  padding-left: 1.25rem;
}
.apartado__texto ul > li + li { margin-top: .55rem; }
.apartado__texto ul > li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .72em;
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: var(--oro-tinta);
}

/* Filas de datos */
.ficha { border-top: 1px solid var(--tinta); }
.apartado__texto > .ficha,
.apartado__texto > .pasos { margin-top: 1.5rem; }
.apartado__texto > .ficha + p,
.apartado__texto > .pasos + p { margin-top: 1.5rem; }
.apartado__texto > .ficha:first-child { margin-top: 0; }
.ficha > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: baseline;
  column-gap: 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(18, 26, 22, .14);
}
.ficha dt {
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}
.ficha dd {
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Pasos numerados */
.pasos {
  counter-reset: paso;
  border-top: 1px solid var(--tinta);
}
.pasos > li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: 1.25rem;
  border-bottom: 1px solid rgba(18, 26, 22, .14);
}
.pasos > li::before {
  content: counter(paso);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--oro-tinta);
}
.pasos strong {
  display: block;
  font-weight: 600;
}
.pasos p {
  max-width: 36rem;
  margin-top: .3rem;
}

/* Un número de cédula no se parte en dos renglones */
.texto .junto { white-space: nowrap; }

/* Dato pendiente: se ve a propósito */
.pendiente {
  padding: .1em .35em;
  background: rgba(184, 151, 90, .32);
  color: var(--tinta);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 900px) {
  .apartado { grid-template-columns: minmax(0, 1fr); }
  .apartado > h2,
  .apartado > .apartado__texto { grid-column: 1; }
  .apartado > h2 {
    position: static;
    margin-bottom: 1.5rem;
    font-size: clamp(1.625rem, 5.4vw, 2.125rem);
  }
  .apartado__texto { max-width: 40rem; }

  /* Sin guion la navegación ocupa dos o tres renglones: en estas páginas la cabecera
     deja de flotar y la banda de título empieza debajo de ella, sin taparse. */
  html:not(.js) .pagina-texto .cabecera { position: static; }
  html:not(.js) .texto__cabeza { padding-top: 2.25rem; }
}

@media (max-width: 700px) {
  .ficha > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .2rem;
  }
}

/* La copia en papel que revisa el abogado: sin cabecera ni pie, en negro sobre blanco */
@media print {
  .pagina-texto { background: #fff; }
  .pagina-texto .salto,
  .pagina-texto .cabecera,
  .pagina-texto .pie { display: none; }
  .texto__cabeza {
    padding-block: 0 1.25rem;
    background: none;
    color: #000;
  }
  .texto__cabeza .entrada { color: #000; }
  .borrador {
    border-color: #000;
    color: #000;
  }
  .texto__cuerpo { padding-block: 0; }
  .apartado {
    display: block;
    padding-block: 1.25rem;
  }
  .apartado > h2 {
    position: static;
    margin-bottom: .75rem;
    break-after: avoid;
  }
  .apartado__texto,
  .apartado__texto > p,
  .apartado__texto > ul,
  .pasos p { max-width: none; }
  .ficha > div,
  .pasos > li { break-inside: avoid; }
  .pendiente {
    background: none;
    outline: 1px solid #000;
  }
}

/* ==========================================================================
   Enlaces hacia la calculadora (sección #calculadora de la página principal)
   y hacia el expediente para inversionistas (#expediente, desde el 13-oct-2026).
   Los estilos de la calculadora están en calculadora.css; los del expediente,
   en vision.css.
   ========================================================================== */

/* En la fila «Inversionistas» del contacto, debajo del correo: primero la calculadora y debajo el expediente */
.enlace-calculadora,
.enlace-expediente {
  position: relative;
  grid-column: 2;
  justify-self: end;
  margin-top: .5rem;
  padding: .2rem 0 .25rem;
  font: 500 .9375rem/1.3 var(--sans);
  border-bottom: 1px solid var(--oro-tinta);
  transition: border-color .25s ease;
}
.enlace-calculadora:hover,
.enlace-expediente:hover { border-color: var(--tinta); }
/* La zona de toque crece solo hacia abajo: hacia arriba pisaría la del correo */
.enlace-calculadora::after,
.enlace-expediente::after {
  content: "";
  position: absolute;
  inset: 0 0 -.7rem;
}
/* El segundo enlace deja libre la zona de toque del primero */
.enlace-expediente { margin-top: .85rem; }

/* En el pie, en su propio renglón debajo de las secciones */
.pie__nav .pie__calculadora { flex-basis: 100%; }

/* Lo que solo oyen los lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 700px) {
  .enlace-calculadora,
  .enlace-expediente {
    grid-column: 1;
    justify-self: start;
    margin-top: .4rem;
  }
  .enlace-expediente { margin-top: .85rem; }
  .pie__nav .pie__calculadora { grid-column: 1 / -1; }
}