/* ==========================================================================
   GIG · Lo propio de la página principal (index.html)

   Se carga después de estilos.css y solo añade: usa sus variables, la caja,
   los rótulos, los botones, los enlaces, la firma y el registro del
   portafolio (.marca, .rubro, .nota, .estado). Solo la carga index.html.

   DE DÓNDE VIENE
   La visión tuvo página propia; el 12-oct-2026 el dueño la quiso dentro de la
   portada y el 13-oct-2026 pidió el expediente para inversionistas. El
   14-oct-2026 (CONTENIDO.md, sección 13) la principal volvió a hablar del
   grupo: cada empresa tiene su página, con sus cifras, y aquí se habla un
   poco de cada una. Salieron la apertura con foto, la apuesta larga, los
   bloques alternos, la energía de ahora, las cifras de Go Truck, la franja
   de años y el relato de lo aprendido; las fotos rechazadas, también.

   LAS PIEZAS, EN EL ORDEN EN QUE SALEN
   .grupo__proposito   (en «El grupo») Qué es GIG y el propósito, sobre el
                       marfil, debajo de los datos. La frase del propósito es
                       el remate del bloque: grande, con el segundo renglón
                       en oro.
   .vision-vemos       (#vision) «Cómo lo vemos». Abre con un filete de oro
                       (sigue el marfil del grupo). Cabeza: rótulo, titular en
                       las columnas 1 a 6 y entrada desde la 7. Cuatro
                       tarjetas (.tarjetas / .tarjeta) en fila: categoría
                       sobre un filete de tinta con su pieza de oro, frase en
                       dos golpes (el segundo en oro) y texto. Las cuatro
                       comparten filas (subgrid): las frases y los textos
                       arrancan a la misma altura. Van sin foto; el lugar
                       está preparado (.tarjeta__foto, más abajo).
   .vision-apuesta     (#apuesta) «La primera apuesta». Una pantalla sobre
                       verde hondo, solo con letra: titular en las columnas
                       1 a 8 y párrafo en las 9 a 12; abajo, las dos piezas
                       bajo su filete de oro y, en la columna del párrafo, la
                       línea de las empresas; al pie, el botón a la izquierda
                       y la firma a la derecha. El lugar de la foto está
                       preparado (.vision-apuesta__foto).
   .vision-criterios   (tras «Principios») «Qué entra al grupo»: titular y
                       entrada en dos columnas, la foto de la puerta a todo
                       el ancho de la caja y las cuatro preguntas de dos en
                       dos.
   .portafolio__fichas (en «Portafolio», 13.5) Las cinco empresas con página
                       propia, en la columna derecha, antes del registro: el
                       nombre grande, el estado, el rubro, su frase y
                       «Conocer …». La cabeza sigue fija a la izquierda.
   .expediente         (13-oct-2026) «Expediente para inversionistas»: sobre
                       marfil, el titular a la izquierda y el formulario a la
                       derecha. Está al final de la hoja, antes de las
                       costuras, con todo lo suyo.
   .fundador__reglas   (en «Fundador», después de la carta) Las cuatro
                       reglas: la línea que las presenta, las reglas grandes
                       entre filetes y el cierre en cursiva y oro.
   Al final de la hoja, COSTURAS: lo que hace falta donde se tocan dos bloques.

   LUGARES DE IMAGEN
   Las fotos nuevas las entrega el dueño (14-oct-2026: las cuatro tarjetas,
   la estación de la apuesta y la puerta de «Qué entra al grupo»). Salen de
   imagenes/gemini/ con scripts/montar-fotos.mjs, que las trata y las
   recorta con el nombre fijo de cada lugar; esta hoja no pide ninguna
   imagen, solo da forma a .tarjeta__foto, .vision-apuesta__foto y
   .vision-criterios__foto.

   IMÁGENES DE INFRAESTRUCTURA
   Van sin pie a la vista: decisión del dueño del
   14-oct-2026. Su alt sigue empezando por «Ilustración:».

   ESCALAS (las de estilos.css, más tres)
   Titular de la apuesta clamp(2.25rem, min(3.6vw, 6.8vh), 3.875rem)
   Frase de tarjeta      clamp(1.375rem, 1.9vw, 1.75rem)
   Regla                 clamp(1.625rem, 2.6vw, 2.375rem)   la de «Principio»

   MOVIMIENTO
   Ninguno al cargar (los dos de la casa siguen siendo de la portada del
   horizonte).
   ========================================================================== */

.tarjeta__frase,
.vision-vemos h2,
.vision-apuesta h2,
.piezas h3,
.esencia__frase,
.mision__frase,
.vision-criterios h2,
.criterios h3,
.portafolio__nombre,
.reglas li,
.fundador__reglas-cierre {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
/* Si el lector fuerza el espaciado del texto, las palabras largas parten en vez de salirse */
.vision-apuesta h2,
.mision__frase,
.reglas li { overflow-wrap: break-word; }

/* Títulos de sección: la escala «Título sección» de la casa */
.vision-vemos h2,
.vision-criterios h2 {
  font-weight: 420;
  font-size: clamp(2.375rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}

/* Enlace secundario sobre marfil: el filete y el paso del cursor en tinta, no en oro claro */
.enlace--tinta { border-bottom-color: var(--oro-tinta); }
.enlace--tinta:hover {
  color: var(--tinta);
  border-color: var(--tinta);
}

/* Fotos (para los lugares de imagen) ------------------------------------------ */

.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--selva-hondo);
}
.foto picture,
.foto img {
  display: block;
  width: 100%;
  height: 100%;
}
.foto img { object-fit: cover; }

/* Cómo lo vemos (#vision) ----------------------------------------------------- */

.vision-vemos,
.vision-criterios { --foco: var(--tinta); }

/* Sigue el marfil de «El grupo»: un filete de oro a ancho de caja dice dónde empieza la visión */
.vision-vemos { padding-bottom: var(--seccion); }
.vision-vemos__caja {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  border-top: 1px solid var(--oro);
}

.vision-vemos__cabeza,
.vision-criterios__cabeza {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.vision-vemos__cabeza .rotulo {
  grid-column: 1 / -1;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
}
.vision-vemos__cabeza h2,
.vision-criterios__cabeza h2 { grid-column: 1 / span 6; }
.vision-vemos__cabeza .entrada,
.vision-criterios__cabeza .entrada {
  grid-column: 7 / -1;
  max-width: 33rem;
  margin-top: 0;
  padding-bottom: .3em;
  color: var(--tinta-suave);
}
/* Cada frase de esta entrada en su renglón (en teléfono corren seguidas) */
.vision-vemos__cabeza .entrada span { display: block; }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2.75rem, 5vw, 3.5rem) var(--medianil);
}
/* Cada tarjeta corre en una columna: foto (cuando llegue), categoría, frase, texto y, en la última, el enlace */
.tarjeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* La categoría va sobre un filete de tinta; una pieza de oro marca dónde empieza cada tarjeta */
.tarjeta__categoria {
  position: relative;
  padding-top: 1.35rem;
  border-top: 1px solid var(--tinta);
  font: 600 .75rem/1.3 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}
.tarjeta__categoria::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 2.5rem;
  height: 3px;
  background: var(--oro);
}
/* Dos golpes, como la declaración de la portada: el segundo en oro */
.tarjeta__frase {
  margin-top: 1.1rem;
  font-weight: 460;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -.012em;
}
.tarjeta__frase span,
.tarjeta__frase strong { display: block; }
.tarjeta__frase strong {
  margin-top: .14em;
  font-weight: inherit;
  color: var(--oro-tinta);
}
.tarjeta__texto {
  max-width: 26rem;
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}
/* «Go Cash», dentro del texto: subrayado de oro, como las marcas que enlazan en el registro */
.tarjeta__marca {
  color: var(--tinta);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color .25s ease;
}
.tarjeta__marca:hover { text-decoration-color: var(--tinta); }
.tarjeta__enlace {
  align-self: flex-start;
  justify-self: start;
  margin-top: 1.1rem;
}

/* LUGAR DE IMAGEN de las tarjetas (13.3): la foto, cuando llegue, va arriba, a todo el ancho, en 4:3 */
.tarjeta__foto {
  aspect-ratio: 4 / 3;
  margin-bottom: 1.25rem;
}

/* En escritorio, con las cuatro en fila, las tarjetas comparten filas: las frases arrancan a la misma altura y
   los textos también, aunque una frase tome más renglones que otra. Cada pieza tiene su fila; la de la foto
   queda en cero mientras no haya foto. */
@media (min-width: 1101px) {
  .tarjeta {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
  .tarjeta__foto { grid-row: 1; }
  .tarjeta__categoria { grid-row: 2; }
  .tarjeta__frase { grid-row: 3; }
  .tarjeta__texto { grid-row: 4; }
  .tarjeta__enlace { grid-row: 5; }
}

/* La primera apuesta (#apuesta) ------------------------------------------------- */

/* Una pantalla menos la cabecera fija: al llegar por «Ver la apuesta» se ve entera. Arriba la cabeza; abajo, las
   piezas y el pie, apoyados en el borde de la pantalla. */
.vision-apuesta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(33rem, calc(100vh - var(--cabecera-fija)), 64rem);
  min-height: clamp(33rem, calc(100svh - var(--cabecera-fija)), 64rem);
  padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(2rem, 5vh, 3.25rem);
  background: var(--selva-hondo);
  color: var(--marfil);
}
.vision-apuesta__cabeza,
.vision-apuesta__cuerpo,
.vision-apuesta__pie {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
}
.vision-apuesta__cabeza { align-items: start; }
.vision-apuesta .rotulo { grid-column: 1 / -1; }

/* Sin foto, la letra es la imagen: el titular es el más grande de la página después del lema. Mira también el
   alto, para que en un portátil de 680 px la sección quepa entera bajo la cabecera. */
.vision-apuesta h2 {
  grid-column: 1 / span 8;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-weight: 430;
  font-size: clamp(2.25rem, min(4.6vw, 7.4vh), 4.5rem);
  line-height: 1.02;
  letter-spacing: -.026em;
}
/* El párrafo, en primera persona, a la altura del primer renglón del titular */
.vision-apuesta__parrafo {
  grid-column: 9 / -1;
  margin-top: calc(clamp(1.25rem, 3vh, 2rem) + .55rem);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.58;
  color: rgba(244, 239, 228, .9);
}
/* Aquí la página dice, con todas las letras, que todavía no hay nada construido */
.vision-apuesta__parrafo strong {
  font-weight: 600;
  color: var(--marfil);
}

.vision-apuesta__cuerpo {
  align-items: start;
  margin-top: auto;
  padding-top: clamp(2.5rem, 6vh, 4.5rem);
}
/* Las dos piezas, cada una bajo su filete de oro */
.piezas {
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--medianil);
}
.piezas li {
  padding-top: clamp(1.1rem, 2.4vh, 1.5rem);
  border-top: 1px solid var(--oro);
}
.piezas h3 {
  font-weight: 500;
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.012em;
}
.piezas p {
  max-width: 25rem;
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(244, 239, 228, .86);
  text-wrap: balance;
}
/* Quién la lleva: en la columna del párrafo, bajo un filete más tenue que el de las piezas */
.vision-apuesta__empresas {
  grid-column: 9 / -1;
  padding-top: clamp(1.1rem, 2.4vh, 1.5rem);
  border-top: 1px solid rgba(244, 239, 228, .16);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(244, 239, 228, .9);
}
/* Los tres nombres llevan a su página. El filete de oro va como borde, por debajo de la letra (no como subrayado
   que la cruce): el oro sobre la letra marfil no se lee. */
.vision-apuesta__empresas a {
  color: var(--marfil);
  font-weight: 500;
  padding-bottom: .12em;
  border-bottom: 1px solid var(--oro);
  transition: color .25s ease, border-color .25s ease;
}
.vision-apuesta__empresas a:hover {
  color: var(--oro-claro);
  border-color: var(--oro-claro);
}

/* Al pie: el botón a la izquierda y la firma a la derecha, en la columna del párrafo */
.vision-apuesta__pie {
  align-items: end;
  margin-top: clamp(1.75rem, 4.5vh, 3rem);
}
.vision-apuesta .firma {
  grid-column: 9 / -1;
  grid-row: 1;
  justify-self: start;
  margin: 0;
}
.vision-apuesta__acciones {
  grid-column: 1 / span 8;
  grid-row: 1;
}

/* LUGAR DE IMAGEN de la apuesta (13.4): la foto va a sangre detrás del texto, con un velo verde que deja leer
   todo. Sin pie. */
.vision-apuesta__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  background: var(--selva-hondo);
}
.vision-apuesta__foto picture,
.vision-apuesta__foto img {
  display: block;
  width: 100%;
  height: 100%;
}
.vision-apuesta__foto img { object-fit: cover; }
.vision-apuesta__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 29, 24, .9) 0, rgba(10, 29, 24, .74) 30%, rgba(10, 29, 24, .5) 50%, rgba(10, 29, 24, .74) 70%, rgba(10, 29, 24, .93) 100%);
}

/* Qué entra al grupo (tras «Principios») ------------------------------------------ */

/* La cabeza en dos columnas, la foto de la puerta a todo el ancho de la caja (apaisada y baja, para que no se
   coma la sección) y las cuatro preguntas de dos en dos */
.vision-criterios { padding-top: var(--seccion); }

.vision-criterios__foto {
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--selva-hondo);
}
.vision-criterios__foto picture,
.vision-criterios__foto img {
  display: block;
  width: 100%;
  height: 100%;
}
.vision-criterios__foto img {
  object-fit: cover;
  object-position: 40% 62%;
}
@media (max-width: 700px) {
  .vision-criterios__foto { aspect-ratio: 4 / 5; }
  .vision-criterios__foto img { object-position: 50% 50%; }
}

.criterios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem var(--medianil);
}
.criterios li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--tinta);
}
.criterios h3 {
  font-weight: 500;
  font-size: clamp(1.375rem, 2.05vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -.012em;
}
.criterios p {
  max-width: 33rem;
  margin-top: .9rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  text-wrap: balance;
}

/* Qué es GIG y el propósito (dentro de «El grupo») ------------------------------ */

/* Van sobre el marfil, debajo de los datos, sin foto: las raíces ya salieron al abrir el bloque. Cada uno abre
   con su rótulo. En «Qué es GIG» la frase va a la izquierda y su texto a la derecha, en la vertical del remate
   (columna 7). El propósito cierra el bloque: es la frase más grande del marfil, con el segundo renglón en
   oro, y su nota vuelve a la columna 7. El aire de abajo es el de una costura (ver COSTURAS). */
.grupo__proposito {
  --foco: var(--tinta);
  display: grid;
  row-gap: clamp(3.5rem, 7vw, 6.5rem);
}
.esencia,
.mision {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: end;
}
.esencia .rotulo,
.mision .rotulo { grid-column: 1 / -1; }

.esencia__frase {
  grid-column: 1 / span 6;
  max-width: 12em;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 420;
  font-size: clamp(1.75rem, 3.1vw, 2.875rem);
  line-height: 1.07;
  letter-spacing: -.018em;
}
.esencia__texto {
  grid-column: 7 / -1;
  max-width: 31rem;
  padding-bottom: .3em;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--tinta-suave);
  text-wrap: balance;
}

.mision__frase {
  grid-column: 1 / span 10;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 420;
  font-size: clamp(2.25rem, 4.7vw, 4.5rem);
  line-height: 1.01;
  letter-spacing: -.026em;
}
.mision__frase span,
.mision__frase strong { display: block; }
.mision__frase strong {
  margin-top: .08em;
  font-weight: inherit;
  color: var(--oro-tinta);
}
.mision__nota {
  grid-column: 7 / -1;
  max-width: 31rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--tinta-suave);
  text-wrap: balance;
}

/* Portafolio: la línea de la cabeza y las cinco fichas (13.5) ----------------------- */

/* Bajo el titular, la línea nueva; debajo, el estado de siempre con su filete de oro */
.portafolio__linea {
  max-width: 22rem;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  line-height: 1.5;
  text-wrap: balance;
}

/* A la derecha, primero las fichas y después el registro; la cabeza ocupa las dos filas y queda fija */
@media (min-width: 901px) {
  .portafolio__cabeza { grid-row: 1 / span 2; }
  .portafolio__fichas { grid-column: 6 / -1; grid-row: 1; }
  .portafolio__indice { grid-row: 2; }
}
.portafolio__indice { margin-top: clamp(3.5rem, 6vw, 5rem); }

.portafolio__fichas { border-top: 1px solid var(--tinta); }
.portafolio__ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.5rem;
  padding-block: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.5rem, 2.6vw, 2.1rem);
  border-bottom: 1px solid rgba(18, 26, 22, .14);
}
.portafolio__nombre {
  grid-column: 1;
  grid-row: 1;
  font-weight: 500;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -.014em;
}
.portafolio__ficha .nota {
  grid-column: 2;
  grid-row: 1;
}
.portafolio__rubro {
  grid-column: 1 / -1;
  margin-top: .3rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}
.portafolio__frase {
  grid-column: 1 / -1;
  max-width: 34rem;
  margin-top: .85rem;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
}
.portafolio__conocer {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 1rem;
}
/* En escritorio cada ficha es un renglón ancho, con el mismo compás que el registro de abajo: nombre y rubro a
   la izquierda, la frase y «Conocer …» en el centro, el estado a la derecha. La frase arranca a la altura de
   la línea de base del nombre. */
@media (min-width: 1101px) {
  .portafolio__ficha {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 2.4vw, 2.25rem);
    align-items: start;
  }
  .portafolio__nombre { font-size: clamp(1.75rem, 2.2vw, 2.125rem); }
  .portafolio__rubro { grid-column: 1; grid-row: 2; }
  .portafolio__frase {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: .45rem;
  }
  .portafolio__conocer {
    grid-column: 2;
    grid-row: 3;
    margin-top: .9rem;
  }
  .portafolio__ficha .nota {
    grid-column: 3;
    grid-row: 1;
    margin-top: .7rem;
  }
}

/* Fundador: las cuatro reglas, después de la carta (13.2) ------------------------------ */

/* Sobre el verde del fundador, en la columna de la carta y con el retrato fijo al lado: la línea que las
   presenta, las cuatro reglas grandes entre filetes (la primera bajo uno de oro) y el cierre en cursiva y oro. */
.fundador__reglas {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 4.5vw, 4rem);
  border-top: 1px solid rgba(244, 239, 228, .16);
}
.fundador__reglas-entrada {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(244, 239, 228, .88);
}
.reglas {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid rgba(244, 239, 228, .16);
}
.reglas li {
  padding-block: clamp(.9rem, 1.7vw, 1.3rem);
  border-top: 1px solid rgba(244, 239, 228, .16);
  font-weight: 420;
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -.018em;
}
.reglas li:first-child { border-top-color: var(--oro); }
.fundador__reglas-cierre {
  max-width: 19em;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.2;
  color: var(--oro-claro);
}

/* Tableta y portátil angosto ---------------------------------------------------------- */

@media (max-width: 1100px) {
  /* Tarjetas: dos por fila */
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* La apuesta, en una columna: titular, párrafo, las dos piezas lado a lado, la línea de las empresas y el pie */
  .vision-apuesta__cabeza,
  .vision-apuesta__cuerpo,
  .vision-apuesta__pie { display: block; }
  .vision-apuesta h2 {
    max-width: 18em;
    font-size: clamp(2.125rem, 5.6vw, 3.5rem);
  }
  .vision-apuesta__parrafo {
    max-width: 40rem;
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
    font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  }
  .vision-apuesta__empresas {
    max-width: 40rem;
    margin-top: clamp(2rem, 5vw, 2.75rem);
  }
  .vision-apuesta .firma { margin-top: 0; }
  .vision-apuesta__acciones { margin-top: clamp(1.5rem, 4vw, 2rem); }
}

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

@media (max-width: 900px) {
  /* Las rejillas de 12 columnas se deshacen: todo corre en una sola */
  .vision-vemos__cabeza,
  .vision-criterios__cabeza,
  .esencia,
  .mision { display: block; }

  .vision-vemos h2,
  .vision-criterios h2 { font-size: clamp(2.375rem, 7vw, 3.75rem); }
  .vision-vemos__cabeza .entrada,
  .vision-criterios__cabeza .entrada { margin-top: 1.25rem; padding-bottom: 0; }
  .vision-vemos__cabeza .entrada span { display: inline; }

  /* La apuesta: sin alto de pantalla; corre entera, sin apretarse */
  .vision-apuesta {
    min-height: 0;
    padding-block: clamp(3.5rem, 10vw, 5rem) clamp(3rem, 9vw, 4.5rem);
  }
  .vision-apuesta__cuerpo { padding-top: clamp(2.25rem, 6vw, 3rem); }
  /* Con foto: la foto es una banda arriba, a sangre, y el texto sigue debajo sobre el verde hondo */
  .vision-apuesta:has(> .vision-apuesta__foto) { padding-top: 0; }
  .vision-apuesta__foto {
    position: relative;
    inset: auto;
    height: clamp(15rem, 48vh, 28rem);
    height: clamp(15rem, 48svh, 28rem);
    margin-bottom: clamp(2.25rem, 6vw, 3rem);
  }
  .vision-apuesta__foto::after { background: linear-gradient(to top, rgba(10, 29, 24, .55) 0, rgba(10, 29, 24, 0) 40%); }

  /* Qué es GIG y el propósito: una columna, el texto debajo de su frase */
  .grupo__proposito { row-gap: clamp(3.5rem, 9vw, 5rem); }
  .esencia__frase { font-size: clamp(1.75rem, 6vw, 2.75rem); }
  .esencia__texto {
    margin-top: clamp(1.1rem, 3vw, 1.6rem);
    padding-bottom: 0;
  }
  .mision__frase { font-size: clamp(2.125rem, 7.6vw, 4rem); }

  /* Las reglas, a la escala del teléfono */
  .reglas li { font-size: clamp(1.5rem, 6.4vw, 2.25rem); }
}

@media (max-width: 700px) {
  /* Tarjetas: una por renglón, cada una bajo su filete */
  .tarjetas {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  .tarjeta__frase { font-size: clamp(1.375rem, 6vw, 1.625rem); }
  /* Con foto, en teléfono: una miniatura cuadrada a la izquierda y el texto a la derecha (nada de cuatro fotos
     grandes apiladas) */
  .tarjeta:has(> .tarjeta__foto) {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: start;
  }
  .tarjeta:has(> .tarjeta__foto) > * { grid-column: 2; }
  .tarjeta:has(> .tarjeta__foto) > .tarjeta__foto {
    grid-column: 1;
    grid-row: 1 / span 4;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
  }

  /* La apuesta: las dos piezas, una bajo otra */
  .piezas { display: block; }
  .piezas li + li { margin-top: 1.75rem; }

  .criterios { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }

  /* Las fichas del portafolio: el estado baja junto al rubro si el nombre es largo */
  .portafolio__ficha { column-gap: 1rem; }
}

/* ==========================================================================
   EXPEDIENTE PARA INVERSIONISTAS (13-oct-2026, CONTENIDO.md 12.2)
   Desde el 14-oct-2026 va después del portafolio, sobre el mismo marfil: lo
   abre un filete de oro (ver COSTURAS).

   .expediente   Como el portafolio: el titular en las columnas 1 a 5 y,
                 desde la 7, el formulario. El mismo oficio que el de la
                 calculadora (campos sin caja, con un filete debajo; rótulos
                 en versales; lo que se escribe, en Newsreader), pero sobre
                 marfil: tinta y oro tinta en vez de marfil y oro claro. Nada
                 de aquí depende de .calc-sitio ni comparte clases con ella.
                 Sobre marfil el botón va en el verde de la casa con la letra
                 en marfil (13,3:1): el oro lleno, que es el botón de los
                 planos verdes, no se despega del papel (2,4:1).
                 El foco se ve con el anillo de la casa, en tinta, también en
                 los campos y en la casilla (que es la del navegador, vestida).
   Contrastes sobre marfil: tinta 15:1; tinta suave 7:1; oro tinta 5,4:1; el
   filete de los campos (tinta al 55 %) 3,7:1, que para un borde pide 3:1.
   ========================================================================== */

.expediente h2,
.expediente__entrada,
.expediente__recibido-frase {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums tabular-nums;
}
.expediente h2 {
  font-weight: 420;
  font-size: clamp(2.375rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* Expediente para inversionistas ---------------------------------------------------- */

.expediente {
  --foco: var(--tinta);
  padding-block: var(--seccion);
  background: var(--marfil);
  color: var(--tinta);
}
.expediente [hidden] { display: none !important; }

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

.expediente__forma {
  position: relative;
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--medianil);
  row-gap: 1.5rem;
  padding-top: .35rem;
}
.expediente__ancho { grid-column: 1 / -1; }

/* Los rótulos arrancan a la misma altura y cada campo se apoya en el fondo de su celda: si un rótulo parte en
   dos renglones («Empresa o fondo Opcional», en pantallas justas), su filete queda a la altura del de al lado. */
.expediente__dato {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.expediente__rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .6em;
  padding-bottom: .3rem;
  font: 600 .75rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}
.expediente__opcional {
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--tinta-suave);
}
/* El campo: sin caja, con un filete debajo. Por dentro lleva medio rem de aire a cada lado, que se devuelve con
   el margen: lo escrito y el filete quedan a plomo con el rótulo, y el anillo de foco no se pega a la letra.
   El filete es un fondo de 1 px (2 px con el foco o con un aviso), no un borde, para que no se salga del plomo. */
.expediente__entrada {
  display: block;
  width: calc(100% + 1rem);
  height: 3.25rem;
  margin: auto -.5rem 0;
  padding: 0 .5rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(rgba(18, 26, 22, .55), rgba(18, 26, 22, .55)) .5rem 100% / calc(100% - 1rem) 1px no-repeat;
  color: var(--tinta);
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.2;
  caret-color: var(--oro-tinta);
  outline-offset: 0;
}
.expediente__entrada:focus {
  background-image: linear-gradient(var(--tinta), var(--tinta));
  background-size: calc(100% - 1rem) 2px;
}
.expediente__entrada[aria-invalid="true"] {
  background-image: linear-gradient(var(--oro-tinta), var(--oro-tinta));
  background-size: calc(100% - 1rem) 2px;
}
.expediente__entrada::selection {
  background: var(--selva);
  color: var(--marfil);
}
/* Lo que el navegador rellena solo: sin su fondo de color, en los de la casa. Ahí el navegador tapa el fondo
   del campo, y con él el filete: lo repone la primera sombra. */
.expediente__entrada:-webkit-autofill,
.expediente__entrada:-webkit-autofill:hover,
.expediente__entrada:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  caret-color: var(--oro-tinta);
  box-shadow: inset 0 -1px 0 rgba(18, 26, 22, .55), inset 0 0 0 100rem var(--marfil);
  transition: background-color 100000s ease 0s;
}

/* El aviso de cada campo obligatorio: un renglón reservado, para que nada salte al aparecer */
.expediente__error {
  min-height: 1.4em;
  margin-top: .4rem;
  font-weight: 500;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--oro-tinta);
}
/* Los campos opcionales no llevan aviso: guardan el mismo renglón, para que todos queden a la misma distancia */
.expediente__entrada:last-child { margin-bottom: 1.625rem; }

/* La casilla de consentimiento es la del navegador (espacio, lectores de pantalla), vestida: cuadrada, sin
   radio; marcada, en el verde de la casa. Recibe ella misma el anillo de foco. */
.expediente__casilla {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  cursor: pointer;
}
.expediente__marca {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid rgba(18, 26, 22, .6);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.expediente__marca::before {
  content: "";
  width: .42rem;
  height: .8rem;
  margin-top: -.2rem;
  border: solid var(--marfil);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.expediente__casilla:hover .expediente__marca { border-color: var(--tinta); }
.expediente__marca:checked {
  background: var(--selva);
  border-color: var(--selva);
}
.expediente__marca:checked::before { opacity: 1; }
.expediente__marca[aria-invalid="true"] {
  border-color: var(--oro-tinta);
  box-shadow: inset 0 0 0 1px var(--oro-tinta);
}
.expediente__casilla-texto {
  font-size: 1rem;
  line-height: 1.5;
}
/* Bajo la casilla, el aviso se alinea con su texto */
.expediente__casilla + .expediente__error { padding-left: 2.4rem; }

.expediente__envio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--oro);
}
/* Sobre marfil, el botón va en el verde de la casa */
.expediente__enviar {
  justify-content: center;
  min-width: 14.5rem;
  border: 0;
  border-radius: 0;
  background: var(--selva);
  color: var(--marfil);
  cursor: pointer;
}
.expediente__enviar:hover { background: var(--selva-hondo); }
.es-enviando .expediente__enviar,
.es-enviando .expediente__enviar:hover {
  background: var(--tinta-suave);
  cursor: progress;
}
.expediente__nota {
  flex: 1 1 12rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
/* La sociedad que responde por los datos (14-oct-2026), debajo del botón, a lo ancho del formulario */
.expediente__responsable { margin-top: .75rem; }
.expediente__estado {
  min-height: 1.5em;
  margin-top: .9rem;
  /* Si el envío falla, expediente.js trae este renglón a la vista: que no quede pegado al borde */
  scroll-margin-bottom: 1.25rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.expediente__estado.es-error {
  font-weight: 500;
  color: var(--tinta);
}
.expediente__estado a {
  border-bottom: 1px solid var(--oro-tinta);
  overflow-wrap: anywhere;
}

/* La trampa para robots: en su sitio, pero en una caja de 1 px que la recorta. Fuera de la vista y del teclado. */
.expediente__trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* «Recibido»: ocupa el lugar del formulario. Recibe el foco al llegar, pero no es un control: sin anillo. */
.expediente__recibido {
  grid-column: 7 / -1;
  padding-top: 1.75rem;
  border-top: 1px solid var(--oro);
}
.expediente__recibido-frase {
  font-weight: 420;
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.expediente__recibido-frase:focus { outline: none; }
/* Dos frases, dos golpes: cada una en su renglón */
.expediente__recibido-frase span { display: block; }

/* El expediente en tableta y teléfono */
@media (max-width: 900px) {
  .expediente__rejilla { display: block; }
  .expediente h2 { font-size: clamp(2.375rem, 7vw, 3.75rem); }
  .expediente__forma,
  .expediente__recibido { margin-top: clamp(2.5rem, 7vw, 3.5rem); }
}
@media (max-width: 700px) {
  .expediente__forma { grid-template-columns: minmax(0, 1fr); }
  .expediente__forma > * { grid-column: 1; }
  .expediente__enviar { width: 100%; }
  .expediente__nota { flex-basis: 100%; }
}

/* ==========================================================================
   COSTURAS
   Lo que hace falta donde se tocan dos bloques, para que la página sea una
   sola. Regla de la casa: verde y marfil se alternan; donde quedan dos
   planos del mismo color seguidos, los separa una foto a sangre o un filete
   de oro. Desde el 14-oct-2026 los planos son: portada y raíces (fotos), el
   grupo y «Cómo lo vemos» (marfil), la apuesta (verde hondo), los principios
   (verde), «Qué entra al grupo», el portafolio y el expediente (marfil), el
   fundador (verde), la calculadora (verde hondo) y la sala (foto).
   ========================================================================== */

/* El grupo: los datos, «Qué es GIG» y el propósito van a la misma distancia uno de otro. Entre el propósito y
   «Cómo lo vemos», los dos sobre marfil, un solo aire y el filete de oro que abre la visión (.vision-vemos__caja). */
.grupo__cuerpo { padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.grupo__proposito { padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }

/* «La primera apuesta» (verde hondo) y los principios (verde): dos planos oscuros seguidos. Los separa un filete
   de oro en el borde de la apuesta. */
.vision-apuesta { border-bottom: 1px solid rgba(184, 151, 90, .4); }

/* «Qué entra al grupo» y el portafolio van los dos sobre marfil. Un solo aire entre ellos, no dos, y un
   filete de oro que abre el portafolio. */
.vision-criterios { padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.portafolio { padding-top: 0; }
.portafolio__rejilla {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  border-top: 1px solid var(--oro);
}

/* El portafolio y el expediente, también los dos sobre marfil: lo mismo, un solo aire y un filete de oro que
   abre el expediente. */
.portafolio { padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.expediente { padding-top: 0; }
.expediente__rejilla {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  border-top: 1px solid var(--oro);
}

/* El expediente (marfil) y el fundador (verde) alternan solos: corte limpio. El fundador (verde) y la
   calculadora (verde hondo) son dos planos oscuros seguidos: los separa un filete de oro puesto en el borde del
   fundador, para no depender de lo que la calculadora traiga. Lo mismo entre la calculadora y la foto de la
   sala, con el filete en el borde de la sala. */
.fundador { border-bottom: 1px solid rgba(184, 151, 90, .4); }
.contacto .sala { border-top: 1px solid rgba(184, 151, 90, .4); }

/* Remate del 13-oct-2026 (verificación de oficio del expediente) */
/* El campo con foco: marco de 2 px en oro tinta en vez del recuadro negro, que pesaba más que el propio campo.
   Son 2 px y no 1 porque la casa exige un anillo de al menos 2 px en cada parada del teclado. */
.expediente .expediente__entrada:focus-visible { outline: 2px solid var(--oro-tinta); }
/* La casilla: sin la palabra «responderme.» sola en el segundo renglón */
.expediente .expediente__casilla-texto { text-wrap: balance; }
/* Entre 901 y 1160 px los campos van en una sola columna: «Empresa o fondo Opcional» ya no se parte */
@media (min-width: 901px) and (max-width: 1160px) {
  .expediente .expediente__forma { grid-template-columns: minmax(0, 1fr); }
  .expediente .expediente__forma > * { grid-column: 1; }
}


/* Remate del 14-oct-2026, tras la verificación
   1 · «La primera apuesta» sin foto: el aire sobrante se reparte arriba y abajo, no queda un hueco en medio que se
       lea como una imagen que falta. Con la foto puesta, sigue como estaba. */
.vision-apuesta:not(:has(.vision-apuesta__foto)) { justify-content: center; }
.vision-apuesta:not(:has(.vision-apuesta__foto)) .vision-apuesta__cuerpo { margin-top: 0; }

/* 2 · Las fichas del portafolio, distintas del registro que viene después: la ficha entera es el enlace, el
       filete inferior pasa a oro al pasar el ratón, y el registro arranca con más aire y un filete de oro. */
.portafolio__ficha { position: relative; }
.portafolio__conocer::after { content: ""; position: absolute; inset: 0; }
.portafolio__ficha:hover { border-bottom-color: var(--oro); }
.portafolio__indice { margin-top: clamp(5rem, 9vw, 8rem); padding-top: clamp(2rem, 3vw, 2.5rem); border-top: 1px solid var(--oro); }

/* 3 · Tarjetas con foto en teléfonos angostos (hasta 420 px): la miniatura al lado dejaba la frase sin sitio y a
       320 px se salía de la pantalla. Ahí la foto va arriba, apaisada y a todo el ancho, y el texto debajo. */
@media (max-width: 420px) {
  .tarjeta:has(> .tarjeta__foto) { display: block; }
  .tarjeta:has(> .tarjeta__foto) > .tarjeta__foto {
    aspect-ratio: 4 / 3;
    margin-bottom: 1.25rem;
  }
}