/* ==========================================================================
   GIG · Páginas de las empresas del grupo
   go-truck.html, go-cash.html, go-track.html, don-arnoldo.html y go-ship.html
   (direcciones/CONTENIDO.md, sección 13.6, decisión del dueño del 14-oct-2026)

   UNA SOLA PLANTILLA. Las cinco páginas cargan estilos.css (cabecera, pie,
   botones, rótulos, registro de marcas) y esta hoja, que solo añade: no
   cambia ninguna regla de estilos.css. No cargan vision.css ni calculadora.css.

   PARTES, EN ESTE ORDEN
     .empresa-cabeza      Cabeza: rótulo «Empresa del grupo GIG», nombre (h1),
                          y bajo un filete de oro la frase y la ficha (rubro,
                          estado). Va sobre el verde de la casa. Si lleva foto
                          (un <figure class="empresa-cabeza__foto"> dentro de la
                          sección), la foto va a sangre con velo, como la
                          portada; la hoja lo detecta sola (:has), no hay que
                          añadir ninguna clase.
     .empresa-seccion     Bloques de contenido, alternando marfil y verde
                          (--marfil, --verde). Dentro, cada apartado
                          (.empresa-apartado) lleva el rótulo a la izquierda,
                          en las columnas 1 a 4, y el texto desde la columna 6,
                          la vertical de los registros de la portada.
     .empresa-cifras      Las cifras, grandes, en numerales de la casa. Sin
                          contadores animados ni iconos.
     .empresa-tira        Franja de tres: los años de Go Truck, los pasos de
                          Go Cash. Un filete de tinta y una pieza de oro donde
                          empieza cada uno (la misma franja de «De dónde
                          venimos» de la portada).
     .producto            Don Arnoldo: imagen del producto y su ficha.
     .empresa-grupo       Al final: «Volver al grupo» y «Otras empresas del
                          grupo», con el registro de marcas de la portada.

   Regla de la casa: verde y marfil se alternan; donde quedan dos marfiles
   seguidos (el último bloque y «Otras empresas del grupo»), los separa un
   filete de oro a ancho de caja.

   Contrastes: sobre verde, marfil 13,3:1, marfil al 90 % 11:1, oro claro
   7,9:1; sobre marfil, tinta 15:1, tinta suave 7:1, oro tinta 5,4:1.
   ========================================================================== */

/* La serif de la casa, siempre en su corte de exhibición */
.empresa-cabeza__nombre,
.empresa-cabeza__ficha dd,
.empresa-texto,
.empresa-cifra__valor,
.empresa-tira__clave,
.empresa-tira h3,
.empresa-tira__texto,
.producto h3,
.producto__tabla tbody th {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums;
}

/* Cabeza ------------------------------------------------------------------ */

.empresa-cabeza {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(66vh, 42rem);
  min-height: min(66svh, 42rem);
  background: var(--selva);
  color: var(--marfil);
}

.empresa-cabeza__contenido {
  position: relative;
  padding-block: calc(var(--cabecera) + clamp(3rem, 9vh, 7rem)) clamp(2.5rem, 6vh, 4.5rem);
}

.empresa-cabeza__nombre {
  margin-top: clamp(1.25rem, 2.6vh, 2rem);
  font-weight: 440;
  font-size: clamp(3rem, 8.4vw, 8rem);
  line-height: .95;
  letter-spacing: -.028em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Bajo el nombre, un filete de oro: la frase a la izquierda y la ficha desde la columna 7 */
.empresa-cabeza__pie {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: end;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid rgba(184, 151, 90, .8);
}
.empresa-cabeza__dichos { grid-column: 1 / span 6; }
.empresa-cabeza__frase {
  max-width: 34rem;
  font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
  line-height: 1.5;
  color: rgba(244, 239, 228, .95);
  text-wrap: balance;
}
/* Don Arnoldo: «Venta solo a mayores de edad.», a la vista desde la primera pantalla */
.empresa-cabeza__aviso {
  margin-top: 1rem;
  font: 600 .9375rem/1.4 var(--sans);
  letter-spacing: .02em;
  color: var(--oro-claro);
}

.empresa-cabeza__ficha {
  grid-column: 7 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem clamp(2.5rem, 5vw, 4.5rem);
}
.empresa-cabeza__ficha dt {
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.empresa-cabeza__ficha dd {
  margin-top: .7rem;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* Con foto: a sangre, con el velo verde de la portada (arriba para la cabecera, abajo para el texto) */
.empresa-cabeza__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
.empresa-cabeza__foto picture { position: absolute; inset: 0; }
.empresa-cabeza__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.empresa-cabeza__foto picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 29, 24, .78) 0, rgba(10, 29, 24, .5) 10%, rgba(10, 29, 24, 0) 24%),
    linear-gradient(to top, rgba(10, 29, 24, .97) 0, rgba(10, 29, 24, .88) 24%, rgba(10, 29, 24, .5) 48%, rgba(10, 29, 24, 0) 70%);
}
.empresa-cabeza:has(.empresa-cabeza__foto) {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--selva-hondo);
}

/* Bloques ------------------------------------------------------------------ */

.empresa-seccion { padding-block: var(--seccion); }
.empresa-seccion--marfil {
  --foco: var(--tinta);
  background: var(--marfil);
  color: var(--tinta);
}
.empresa-seccion--verde {
  background: var(--selva);
  color: var(--marfil);
}

/* Un apartado: rótulo a la izquierda (columnas 1 a 4), texto desde la columna 6 */
.empresa-apartado {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: baseline;
}
.empresa-apartado + .empresa-apartado {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid rgba(18, 26, 22, .14);
}
.empresa-seccion--verde .empresa-apartado + .empresa-apartado { border-top-color: rgba(244, 239, 228, .16); }
.empresa-apartado > .rotulo {
  grid-column: 1 / span 4;
  line-height: 1.35;
}
.empresa-apartado__cuerpo {
  grid-column: 6 / -1;
  min-width: 0;
}
/* Lo que va a todo el ancho de la caja, debajo del rótulo y del texto (franjas, producto) */
.empresa-apartado__ancho {
  grid-column: 1 / -1;
  min-width: 0;
}

.empresa-texto {
  max-width: 22em;
  font-weight: 420;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
/* El primer apartado de cada página, un punto más grande */
.empresa-texto--abre {
  max-width: 19em;
  font-size: clamp(1.75rem, 3.1vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -.018em;
}
.empresa-texto + .empresa-texto { margin-top: .5em; }

/* Los nombres de las otras empresas del grupo, dentro del texto, enlazan a su página */
.empresa-texto a {
  text-decoration: underline;
  text-decoration-color: var(--oro-tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  transition: text-decoration-color .25s ease;
}
.empresa-texto a:hover { text-decoration-color: currentColor; }
.empresa-seccion--verde .empresa-texto a { text-decoration-color: var(--oro); }

/* La fila del enlace al sitio de la empresa: sin rótulo, con menos aire que un apartado */
.empresa-apartado.empresa-apartado--accion {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: 0;
  border-top: 0;
}
.empresa-apartado--accion .empresa-apartado__cuerpo { grid-column: 1 / -1; }
.empresa-apartado--accion .empresa-acciones { margin-top: 0; }

.empresa-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
/* El botón sobre marfil: verde de la casa con la letra en marfil (el oro no se despega del papel) */
.empresa-boton--verde {
  background: var(--selva);
  color: var(--marfil);
}
.empresa-boton--verde:hover { background: var(--selva-hondo); }

/* Go Track: lugar para dos o tres capturas reales de la plataforma (hoy comentado en go-track.html) */
.empresa-capturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--medianil);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.empresa-capturas figure {
  margin: 0;
  border: 1px solid rgba(18, 26, 22, .14);
  background: var(--selva-hondo);
}
.empresa-capturas img { width: 100%; height: auto; }

/* Cifras ------------------------------------------------------------------- */

/* El rótulo «En cifras» arranca a la altura de la cifra, no de su línea de base */
.empresa-apartado--cifras { align-items: start; }
.empresa-apartado--cifras > .rotulo { padding-top: calc(clamp(1.5rem, 2.6vw, 2.25rem) + 1px); }

.empresa-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  column-gap: var(--medianil);
}
.empresa-cifra {
  min-width: 0;
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--oro);
}
.empresa-cifra__valor {
  font-weight: 420;
  font-size: clamp(3.25rem, 8vw, 7.5rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.empresa-cifra__menor {
  font-size: .34em;
  letter-spacing: -.01em;
}
.empresa-cifra__leyenda {
  max-width: 24rem;
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.45;
  color: rgba(244, 239, 228, .9);
  text-wrap: balance;
}

/* Franja de tres (años de Go Truck, pasos de Go Cash) -------------------------- */

.empresa-tira {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--tinta);
}
.empresa-tira li {
  position: relative;
  min-width: 0;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) var(--medianil) 0 0;
}
.empresa-tira li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 2.5rem;
  height: 3px;
  background: var(--oro);
}
.empresa-tira__clave {
  font-weight: 420;
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: .92;
  letter-spacing: -.035em;
}
.empresa-tira h3 {
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.empresa-tira h3 + p {
  margin-top: .55rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.empresa-tira__texto {
  max-width: 14em;
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 460;
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  text-wrap: balance;
}

/* Producto (Don Arnoldo), sobre verde --------------------------------------------- */

/* Imagen de la columna 1 a la 7 y su ficha de la 9 a la 12; el segundo bloque, al revés */
.producto {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.producto + .producto { margin-top: clamp(4rem, 8vw, 7rem); }
.producto__foto {
  grid-column: 1 / span 7;
  grid-row: 1;
  margin: 0;
  background: var(--selva-hondo);
}
.producto__foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.producto__ficha {
  grid-column: 9 / -1;
  grid-row: 1;
  min-width: 0;
}
.producto--invertido .producto__foto { grid-column: 6 / -1; }
.producto--invertido .producto__ficha { grid-column: 1 / span 4; }

.producto h3 {
  font-weight: 420;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}

.producto__tabla {
  width: 100%;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.producto__tabla th,
.producto__tabla td {
  padding: .8rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid rgba(244, 239, 228, .16);
}
.producto__tabla th + th,
.producto__tabla td { padding-left: 1rem; text-align: right; }
.producto__tabla thead th {
  padding-top: 0;
  font: 600 .75rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
  border-bottom-color: var(--oro);
}
.producto__tabla tbody th {
  font-weight: 500;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.producto__tabla td {
  white-space: nowrap;
  color: rgba(244, 239, 228, .9);
}

.producto__lista {
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  border-top: 1px solid var(--oro);
}
.producto__lista > div {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1rem;
  padding-block: .8rem;
  border-bottom: 1px solid rgba(244, 239, 228, .16);
}
.producto__lista dt {
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.producto__lista dd {
  line-height: 1.45;
  color: rgba(244, 239, 228, .92);
}

/* Al final: volver al grupo y las otras cuatro empresas ------------------------------ */

.empresa-grupo {
  --foco: var(--tinta);
  padding-block: var(--seccion);
  background: var(--marfil);
  color: var(--tinta);
}
/* Dos marfiles seguidos: no se suma el aire de los dos; los separa el filete de oro */
.empresa-seccion--marfil + .empresa-grupo { padding-top: 0; }

.empresa-grupo__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: start;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--oro);
}
.empresa-grupo__cabeza { grid-column: 1 / span 4; }
.empresa-grupo__cabeza .enlace { margin-top: 1.5rem; }
.empresa-grupo .enlace { border-bottom-color: var(--oro-tinta); }
.empresa-grupo .enlace:hover { color: var(--tinta); border-color: var(--tinta); }
.empresa-grupo__indice {
  grid-column: 6 / -1;
  border-top: 1px solid var(--tinta);
}

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

@media (max-width: 900px) {
  .empresa-cabeza { min-height: min(62vh, 36rem); min-height: min(62svh, 36rem); }
  .empresa-cabeza__pie,
  .empresa-apartado,
  .producto,
  .empresa-grupo__rejilla { grid-template-columns: minmax(0, 1fr); }
  .empresa-cabeza__pie > *,
  .empresa-apartado > *,
  .empresa-apartado > .rotulo,
  .empresa-apartado--accion .empresa-apartado__cuerpo,
  .empresa-grupo__rejilla > * { grid-column: 1; }

  .empresa-cabeza__ficha { margin-top: 1.75rem; }

  .empresa-apartado > .rotulo { margin-bottom: 1.5rem; }

  .producto__foto,
  .producto--invertido .producto__foto { grid-column: 1; grid-row: 1; }
  .producto__ficha,
  .producto--invertido .producto__ficha { grid-column: 1; grid-row: 2; margin-top: 2rem; }

  .empresa-grupo__cabeza { margin-bottom: 2.5rem; }
}

@media (max-width: 700px) {
  /* Con foto: la foto arriba, entera, y el texto debajo sobre el verde hondo */
  .empresa-cabeza:has(.empresa-cabeza__foto) { min-height: 0; }
  .empresa-cabeza__foto {
    position: relative;
    inset: auto;
    z-index: 0;
  }
  .empresa-cabeza__foto picture { position: relative; inset: auto; }
  .empresa-cabeza__foto img {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 74svh;
  }
  .empresa-cabeza__foto picture::after {
    background:
      linear-gradient(to bottom, rgba(10, 29, 24, .78) 0, rgba(10, 29, 24, .4) 12%, rgba(10, 29, 24, 0) 26%),
      linear-gradient(to top, rgba(10, 29, 24, 1) 0, rgba(10, 29, 24, .86) 14%, rgba(10, 29, 24, .4) 28%, rgba(10, 29, 24, 0) 42%);
  }
  .empresa-cabeza__foto + .empresa-cabeza__contenido { margin-top: -3.5rem; padding-top: 0; }

  .empresa-tira { grid-template-columns: minmax(0, 1fr); }
  .empresa-tira li { padding-right: 0; padding-bottom: 1.75rem; }
  .empresa-tira li + li { border-top: 1px solid rgba(18, 26, 22, .14); }
  .empresa-tira__clave { font-size: clamp(2.75rem, 13vw, 3.5rem); }
  .empresa-tira__texto { max-width: none; }

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

  .empresa-acciones .boton { width: 100%; justify-content: center; }
}