/* ══════════════════════════════════════════════════════════════════════
   GRIBOLT — el alza
   ══════════════════════════════════════════════════════════════════════
   Va DESPUÉS de app.css y no reemplaza nada: sube de nivel lo que ya
   existe. Quitar esta hoja del encolado devuelve el sitio anterior.

   Tres decisiones que gobiernan todo lo de abajo:

   1. LA LUZ. El negro deja de ser plano: un campo de oro entra por dos
      esquinas y un grano finísimo lo asienta. Es lo que separa una página
      oscura de una página con atmósfera, y no cuesta un solo archivo.
   2. EL CHAFLÁN. La casa acuña, y una pieza acuñada tiene la esquina
      CORTADA, no redondeada. Sale del hexágono de la propia marca, y es
      la forma propia de esta casa: no hay radio en ningún sitio.
   3. EL ORO SE DEGRADA, LA TINTA NO. El acento pasa a ser una escala
      —alto, medio, bajo— y el titular se rellena con un degradado que
      va de la crema al oro. La tinta de lectura sigue siendo plana.

   ── INVENTARIO ────────────────────────────────────────────────────────
   ANTES DE ESCRIBIR UNA PIEZA NUEVA, BÚSCALA AQUÍ. Toda la página se arma
   con estas, y cada una está declarada UNA sola vez.

   Primitivas (§2) — no se usan solas; las visten las piezas:
     · el chaflán   la esquina cortada. Una declaración, un `--c` por pieza
     · el filete    anillo de 1 px en degradado, ya cortado en chaflán
     · el grano     la tesela de ruido, en `soft-light` o en `multiply`

   Piezas:
     · .gb-eyebrow    rótulo de oro con filete       — cospel (§3)
     · .gb-pasos__n   el mismo cospel, con numeral   — cospel (§3)
     · .gb-placa svg  el mismo cospel, con icono     — cospel (§3)
     · .gb-btn        botón; variantes abajo         (§4)
     · .gb-placa      tarjeta con lustre y filete    (§8)
     · .gb-pasos li   celda de paso                  (§9)
     · .gb-resta li   renglón de resta               (§10)
     · .gb-plato      la placa de la cifra           (§11)
     · .gb-avales     fila de garantías con icono    (§12)
     · .gb-cinta-r    la cinta de oro que corre      (§13)
     · .gb-cierre     la placa grande de cierre      (§14)
     · .gb-marco      marco de imagen                (§15)
     · .gb-dos        bloque de texto + figura       (§15)

   Botones — SIETE variantes y ninguna más. No se inventa un botón nuevo:
     .gb-btn                base: filete tenue, tinta clara
     .gb-btn--solid         principal: oro en degradado, halo y flecha
     .gb-btn--linea         acompaña al principal: contorno y flecha
     .gb-btn--ghost         terciario: sin filete (ya en app.css)
     .gb-btn--quiet         de texto, compacto (ya en app.css)
     .gb-btn--danger        destructivo (ya en app.css)
     .gb-btn--lg / --wide   modificadores de tamaño y ancho
   La flecha la ponen SÓLO `--solid` y `--linea`, y se retira sola en los
   botones que envían un formulario: ahí no se va a ninguna parte.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 0 · La cara de reserva ════════════════════════════════════════════
   Mientras Unbounded carga, el titular se compone con la cara de reserva.
   Unbounded es MUY ancha, así que cualquier sans de sistema compone la
   misma frase mucho más corta, el titular cae en menos renglones y todo lo
   de abajo salta cuando llega la buena. Medido en la portada: CLS 0,034,
   con las imágenes ya declaradas — no eran ellas.

   Compuesta «Tu acceso directo a USDT» a 100 px en peso 700:

     Unbounded .................. 1.595,61 px
     Arial Black ................ 1.425,30  →  111,95 %
     Verdana .................... 1.418,47  →  112,49 %
     Arial ...................... 1.226,28  →  130,12 %
     system-ui .................. 1.153,69  →  138,30 %

   Arial Black es además la que más se acerca en PESO, que es lo que pide
   una cara de titulares que aquí va en 700 y 800. La diferencia con
   Verdana —medio punto— no se ve. Los `override` cuadran la caja de
   renglón en 1,23 em, la de Unbounded medida en el navegador. */
@font-face{
  font-family:"GB reserva";
  src:local("Arial Black"),local("Verdana"),local("DejaVu Sans Bold");
  size-adjust:111.95%;
  ascent-override:98%;
  descent-override:25%;
  line-gap-override:0%;
  font-weight:400 900;
  font-style:normal;
}

/* ══ 1 · Tokens ════════════════════════════════════════════════════════ */
:root{
  /* la reserva va DESPUÉS de la buena y ANTES de la sans de sistema */
  --fd:"Unbounded","GB reserva","Onest",system-ui,sans-serif;
  /* — el chaflán — dos esquinas cortadas, no cuatro: la pieza tiene arriba
       y abajo, y cortar las cuatro la vuelve una etiqueta — */
  --cut:14px;
  --cut-lg:24px;
  --cut-sm:9px;
  --cut-xs:6px;

  /* — la escala del oro — */
  --oro-alto:#EFD26A;
  --oro:#C9A227;
  --oro-bajo:#A8811A;
  --oro-humo:rgba(201,162,39,.26);
  --oro-brasa:rgba(255,176,58,.16);

  /* — materia levantada — */
  --card:#14110B;
  --card-2:#1B1710;
  --borde:#332C1E;          /* filete cálido de placa */
  --borde-vivo:rgba(201,162,39,.42);

  /* — los dos degradados de filete: tenue el de las tarjetas, encendido
       el de la pieza que lleva la cifra — */
  --filete:linear-gradient(155deg,var(--borde) 0%,rgba(201,162,39,.34) 46%,var(--borde) 100%);
  --filete-vivo:linear-gradient(150deg,rgba(201,162,39,.50) 0%,var(--borde) 42%,rgba(201,162,39,.30) 100%);

  /* — el grano: una sola tesela de 240 px que se repite — */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ══ 2 · Las tres primitivas ═══════════════════════════════════════════ */

/* — el chaflán — El polígono se escribe UNA vez. Cada pieza sólo declara
     cuánto corta, en `--c`. */
.gb-chaflan,
.gb-placa,.gb-plato,.gb-cierre,.gb-marco,.gb-pasos li,
.gb-btn--solid,.gb-btn--linea,
.gb-eyebrow,.gb-pasos__n,.gb-placa svg,.gb-sec h2::before{
  --c:var(--cut);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.gb-cierre{--c:var(--cut-lg)}
.gb-btn--solid,.gb-btn--linea{--c:var(--cut-sm)}
.gb-eyebrow,.gb-pasos__n,.gb-placa svg,.gb-sec h2::before{--c:var(--cut-xs)}

/* — el canto — DOS siluetas cortadas, no un anillo.
     Una pieza con `clip-path` no puede llevar `border`: el recorte se lo
     come y las dos diagonales del chaflán quedan SIN TRAZO —la esquina se
     lee arrancada, no cortada a propósito—. Y un anillo dibujado con
     `mask-composite` tampoco vale, aunque lo parezca: ese anillo es
     RECTANGULAR, y el recorte se lleva sus esquinas igual. Se comprobó a
     dpr 5: el filete superior termina de golpe y la diagonal está desnuda.

     Lo que sí funciona: el fondo del PROPIO elemento hace de canto y ocupa
     la silueta entera; encima, un pseudoelemento un píxel más adentro
     lleva el relleno con su propia silueta. Dos formas cortadas, una
     dentro de la otra, y el píxel que sobra por los seis lados es el canto.

     El corte de la interior NO es `--c`. La diagonal de fuera es la recta
     x+y=c; la de dentro, con 1 px de sangrado, es x+y=2+c'. Dos rectas
     paralelas así distan (2+c'−c)/√2, y para que disten UN píxel hace
     falta c' = c − 0,586. Con `--c` a secas la diagonal saldría a 1,4 px
     y las rectas a 1: un canto que cambia de grosor en las esquinas. */
.gb-placa,.gb-pasos li,.gb-plato,.gb-btn--linea,.gb-marco{
  --ci:calc(var(--c) - .586px);
  position:relative;isolation:isolate;border:0;
  background:var(--canto)}
.gb-placa::before,.gb-pasos li::after,.gb-plato::before,.gb-btn--linea::before{
  content:"";position:absolute;inset:1px;z-index:-1;pointer-events:none;
  background:var(--relleno);
  clip-path:polygon(var(--ci) 0, 100% 0, 100% calc(100% - var(--ci)), calc(100% - var(--ci)) 100%, 0 100%, 0 var(--ci))}

/* — el grano — La misma tesela en tres sitios. Sobre negro va en
     `soft-light`, que no aclara; sobre el oro en `multiply`, que sí
     ensucia, que es lo que ahí hace falta. */
.gb-amb::after,.gb-cinta-r::before,.gb-cierre::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grano);background-size:240px 240px}
.gb-amb::after{opacity:.16;mix-blend-mode:soft-light}
.gb-cierre::after{opacity:.14;mix-blend-mode:soft-light}
.gb-cinta-r::before{opacity:.20;mix-blend-mode:multiply;z-index:1}

/* ══ 3 · El cospel ═════════════════════════════════════════════════════
   Un rótulo de oro con filete y esquina cortada. Es LA MISMA pieza en tres
   sitios —el rótulo de zona, el numeral de un paso y la teja del icono—,
   así que su color, su fondo y su filete se declaran una vez y cada uso
   pone sólo su tamaño. `.gb-eyebrow` era texto suelto; sube en la portada
   y en las cinco interiores a la vez, porque todas lo usan. */
/* El cospel va SIN filete, y no por descuido: es una etiqueta pequeña, y
   una etiqueta pequeña no puede llevar las dos siluetas del canto —el
   numeral de zona ES un pseudoelemento y no puede tener otro dentro, y la
   teja del icono es un <svg>, que tampoco los admite—. Con el relleno un
   poco más presente, la forma la define el propio relleno y el corte se
   lee entero. El canto queda para las PLACAS, que es lo que separa una
   pieza contenedora de un sello impreso encima. */
.gb-eyebrow,.gb-pasos__n,.gb-placa svg,.gb-sec h2::before{
  color:var(--oro-alto);
  background:rgba(201,162,39,.15);
  border:0;
  /* ── la geometría del cospel, homologada ──────────────────────────
     Las tres piezas comparten la misma cuenta y ninguna la escribe por
     su cuenta: `line-height:1` para que el alto sea `font-size` más el
     relleno y no dependa del interlineado que herede, y relleno en `em`
     para que crezca con la letra.
     Antes iban con el interlineado por omisión —1,55— y el relleno en
     .42em: la caja medía 2,3 veces el cuerpo de la letra y 3,2 veces la
     altura de mayúscula. Ahora mide 2,0 cuerpos, que es lo que mide un
     rótulo micro que no parece hinchado. */
  line-height:1;
  padding:.5em .72em;
  /* y NUNCA se estira: en la lista larga de pasos el numeral es una celda
     de rejilla de 4rem y se estiraba a llenarla —64 px de fondo para 20
     de tinta—. `max-content` lo ata a su contenido en cualquier contexto. */
  width:max-content;max-width:100%;justify-self:start}
.gb-eyebrow{display:inline-flex;align-items:center;gap:.6em;
  margin:0 0 var(--e4);
  font-size:.6875rem;font-weight:600;letter-spacing:.14em}
.gb-eyebrow::before{content:"";width:.44em;height:.44em;flex:none;
  background:var(--oro);transform:rotate(45deg)}
.gb-pasos__n{display:block;margin-bottom:var(--e5);
  font-size:.75rem;letter-spacing:.06em}
/* La teja del icono no lleva texto, así que su relleno NO puede salir de
   `em`: se mide contra el dibujo. 9 px por lado sobre 20 de icono da una
   teja de 38, que es 1,9 veces el icono — la misma proporción que el
   rótulo guarda con su mayúscula. */
.gb-placa svg{width:20px;height:20px;box-sizing:content-box;padding:9px;
  line-height:0;margin-bottom:var(--e5)}
/* El numeral de zona: el mismo cospel, en línea con el encabezado. Sólo
   desde 760 px, que es donde app.css enciende el contador. */
@media (min-width:760px){
  .gb-sec h2::before{content:counter(zona,decimal-leading-zero);
    display:inline-block;margin-right:.5em;
    font-size:.34em;letter-spacing:.1em;vertical-align:.62em;
    -webkit-text-fill-color:var(--oro-alto)}
}

/* ══ 4 · Botones ═══════════════════════════════════════════════════════
   El sólido deja de ser una mancha de oro plana: degradado en diagonal,
   halo corto por debajo y una flecha que avanza al pasar. La flecha va
   con máscara y no con imagen de fondo, para que herede el color. */
.gb-btn{font-weight:600;letter-spacing:-.005em;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),
             color var(--t) var(--ease),transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease),filter var(--t) var(--ease)}
.gb-btn--solid{
  background:linear-gradient(104deg,var(--oro-alto) 0%,var(--oro) 52%,var(--oro-bajo) 100%);
  border-color:transparent;color:var(--accent-ink);
  box-shadow:0 10px 30px -14px rgba(201,162,39,.75)}
.gb-btn--solid:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 16px 36px -14px rgba(201,162,39,.85)}
.gb-btn--solid:active{transform:translateY(0)}
/* El contorno NO puede ser un `border`: `clip-path` lo recorta, y en las dos
   diagonales del chaflán el trazo desaparecía —la esquina se leía cortada a
   medias, no cortada a propósito—. Lleva el filete de §2, que hereda el
   chaflán y lo recorre entero. El pseudoelemento va en `position:absolute`,
   así que no entra en el flex y no abre un hueco de más. */
.gb-btn--linea{color:var(--ink);
  --canto:linear-gradient(160deg,var(--borde) 0%,rgba(201,162,39,.34) 55%,var(--borde) 100%);
  --relleno:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),var(--card)}
.gb-btn--linea:hover{color:var(--oro-alto);transform:translateY(-1px);
  --canto:linear-gradient(160deg,var(--borde-vivo) 0%,rgba(239,210,106,.62) 55%,var(--borde-vivo) 100%)}
.gb-btn--solid::after,.gb-btn--linea::after{content:"";width:1.05em;height:1.05em;
  flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.6 20.6 12l-7.4 7.4-1.5-1.5 4.9-4.9H3v-2h13.6l-4.9-4.9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.6 20.6 12l-7.4 7.4-1.5-1.5 4.9-4.9H3v-2h13.6l-4.9-4.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--t) var(--ease)}
.gb-btn--solid:hover::after,.gb-btn--linea:hover::after{transform:translateX(.22em)}
/* El botón que envía un formulario no lleva flecha: no lleva a otra parte. */
.gb-btn--wide::after,button.gb-btn--solid::after{content:none}
.gb-btn--lg{font-size:1rem}

/* ── la costura del canto derecho ──────────────────────────────────────
   `background-origin` se queda en `padding-box` —el valor por omisión— y el
   fondo se pinta hasta el `border-box`. Con el filete de 1 px que lleva
   `.gb-btn`, el degradado se dibuja DOS píxeles más estrecho que la caja y
   se repite: por el canto derecho asomaban 2 px del PRINCIPIO del degradado
   —el oro claro, `#EFD26A`— y por el izquierdo 2 px del final. Una línea
   amarilla vertical a lo largo del borde derecho que parecía un error de
   pintado, y que el chaflán inferior atravesaba en diagonal.
   Con `border-box` el degradado mide lo que mide la caja y no hay segunda
   tesela que asomar. */
.gb-btn--solid,.gb-btn--linea{background-origin:border-box}

/* ── un botón macizo no se subraya ─────────────────────────────────────
   El subrayado es del enlace de texto —«Entrar», los del pie, los de
   cierre de zona—, y ahí se queda. Sobre el oro macizo era una raya negra
   bajo la palabra. */
.gb-btn--solid,.gb-btn--linea{text-decoration:none}

/* ── el relleno del botón sale de un token PROPIO ──────────────────────
   La escala general está CRUZADA: app.css declara `--e6:1rem` y
   `--e7:1.25rem` en su primer bloque de `:root` y, más abajo, un segundo
   bloque redefine `--e1..--e6` dejando `--e7..--e12` con los valores del
   primero. Resultado: `--e6` vale 2,5rem y `--e7` sólo 1,25.

   `.gb-btn` pedía su relleno lateral a `--e6` —40 px, casi el alto del
   propio botón— y la variante grande a `--e7`, es decir MENOS que la
   normal. Por eso «Abrir mi cuenta» medía 214,4 px de ancho para 107 de
   texto: 40 de relleno a cada lado.

   Aquí el relleno no se pide a esa escala. Va contra el alto del propio
   botón, que es lo que gobierna su proporción: 0,44 del alto en el normal
   (42 px → 18,4) y 0,50 en el grande (50 px → 24,8). Si cambia `--h-ctrl`,
   estos dos números se rehacen. */
:root{--btn-x:1.15rem;--btn-x-lg:1.55rem}
.gb-btn{padding-inline:var(--btn-x)}
.gb-btn--lg{padding-inline:var(--btn-x-lg)}
.gb-btn--quiet{padding-inline:var(--e1)}
/* Los enlaces sueltos de cierre de zona, en el mismo idioma. */
.gb-sec__pie a:not(.gb-btn){text-decoration-color:rgba(201,162,39,.45);
  text-underline-offset:.24em}
.gb-sec__pie a:not(.gb-btn):hover{text-decoration-color:var(--oro-alto)}

/* ══ 5 · Tipografía de gran formato ════════════════════════════════════
   El titular se rellena con un degradado que arranca en crema y termina
   en oro. El `color` declarado NO sobra: es lo que se ve si el navegador
   no recorta el fondo al texto, y es lo que mide una auditoría de
   contraste cuando muestrea la caja. */
h1,h2{letter-spacing:-.03em;line-height:1.02}
.gb-hero h1{
  font-size:clamp(2.4rem,1.2rem + 4.1vw,4.25rem);
  line-height:.98;letter-spacing:-.035em;color:#F7F3E7}
/* El relleno va en degradado VERTICAL, no radial: un radial se centra en
   la CAJA del elemento, y un <h2> ocupa todo el ancho del contenedor
   aunque su texto sea corto —el texto caería en el borde del degradado y
   saldría entero de oro—. En vertical, cada renglón recibe el mismo tramo
   mida lo que mida. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gb-hero h1,.gb-sec h2,.gb-cierre h2{
    background-image:linear-gradient(178deg,#FBF8EE 4%,#F2E7C6 54%,#D9B742 118%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  .gb-hero h1{background-image:linear-gradient(176deg,#FDFBF4 6%,#F0E3BC 58%,var(--oro-alto) 116%)}
}
.gb-hero__d{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.62;
  color:var(--ink-2);max-width:48ch}
.gb-sec__d{font-size:1.0625rem;line-height:1.62}

/* ══ 6 · El ambiente ═══════════════════════════════════════════════════
   Dos capas fijas detrás de todo: el campo de luz y el grano. Van en un
   elemento propio y no en `body::before` porque el fondo del body las
   taparía; con `z-index:-1` quedan por delante de ese fondo y por detrás
   de cualquier contenido. */
.gb-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.gb-amb__a,.gb-amb__b{position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.9}
/* la brasa alta, por donde entra la marca */
.gb-amb__a{top:-28vmax;right:-18vmax;width:62vmax;height:62vmax;
  background:radial-gradient(circle at 50% 50%,var(--oro-humo) 0%,rgba(201,162,39,.06) 45%,transparent 70%)}
/* el rescoldo bajo, que sostiene el pie */
.gb-amb__b{bottom:-34vmax;left:-22vmax;width:66vmax;height:66vmax;
  background:radial-gradient(circle at 50% 50%,var(--oro-brasa) 0%,rgba(201,162,39,.05) 48%,transparent 72%)}

/* ══ 7 · La barra ══════════════════════════════════════════════════════
   Quieta es la de siempre. En cuanto la página se mueve se vuelve vidrio:
   el fondo se translucida, el filete se enciende y aparece una sombra
   corta. Es el único momento en que la barra se anuncia. */
.gb-bar{transition:background var(--paso) var(--ease),border-color var(--paso) var(--ease),
        box-shadow var(--paso) var(--ease)}
.gb-bar.is-fija{background:rgba(12,11,8,.78);border-bottom-color:var(--borde);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.9)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .gb-bar.is-fija{-webkit-backdrop-filter:blur(14px) saturate(1.3);
                          backdrop-filter:blur(14px) saturate(1.3)}
}
/* El menú: el subrayado crece desde la izquierda, no aparece de golpe.
   El filete va FUERA de la caja del enlace, con `bottom` negativo, y no
   con relleno: con `padding-block:.35em` el renglón engordaba 10 px y la
   barra pegajosa pasaba de 143 a 153 px de alto en cuanto el menú se
   mostraba. Medido a 861, 864, 866, 870 y 900 px. */
.gb-nav a{position:relative}
.gb-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.34em;height:1px;
  background:var(--oro);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease)}
.gb-nav a:hover::after,.gb-nav a[aria-current]::after{transform:scaleX(1)}

/* ══ 8 · Placas ════════════════════════════════════════════════════════
   La placa gana tres cosas: el chaflán (§2), un lustre corto que baja
   desde el borde superior —lo que hace que no se lea como un rectángulo
   pintado— y el filete degradado (§2). El halo del hover va en
   `drop-shadow` y no en `box-shadow`: la sombra sigue la silueta cortada,
   la caja no. */
.gb-placa{padding:var(--e7) var(--e7) var(--e8);
  --canto:var(--filete);
  /* el lustre viaja DENTRO del relleno: es la primera capa de su fondo */
  --relleno:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 38%),var(--card);
  transition:transform var(--paso) var(--ease),background var(--paso) var(--ease)}
.gb-placa>*{position:relative}
/* Al pasar por encima se enciende el CANTO y sube la placa. El halo que
   había aquí iba en `filter` sobre la placa entera, y un filtro cambia el
   suavizado del texto que hay dentro: la letra engordaba al pasar el ratón. */
.gb-placa:hover{transform:translateY(-3px);
  --canto:linear-gradient(155deg,var(--borde-vivo) 0%,rgba(239,210,106,.62) 46%,var(--borde-vivo) 100%);
  --relleno:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%),var(--card-2)}
.gb-placa h3{font-size:1.1875rem;letter-spacing:-.02em}
.gb-d3{gap:var(--e7)}

/* ══ 9 · Los pasos ═════════════════════════════════════════════════════
   Eran celdas de una rejilla con filete de un píxel entre ellas. Pasan a
   ser piezas sueltas con chaflán y numeral acuñado; el hueco de un píxel
   se abre a hueco de verdad. La variante `--largo` de las interiores
   conserva su fila corrida y sólo hereda el numeral. */
.gb-pasos{background:transparent;border:0;gap:var(--e6)}
.gb-pasos li{padding:var(--e7);--canto:var(--filete);--relleno:var(--card)}
.gb-pasos li>*{position:relative}
.gb-pasos h3{font-size:1.125rem;letter-spacing:-.02em}
.gb-pasos li:hover{--relleno:var(--card-2)}
.gb-pasos--largo{gap:0}
.gb-pasos--largo li{--c:0px;--canto:transparent;--relleno:transparent;
  padding:var(--e7) 0;border-bottom:1px solid var(--line)}
.gb-pasos--largo li::after{content:none}
.gb-pasos--largo li:last-child{border-bottom:0}

/* ══ 10 · La resta ═════════════════════════════════════════════════════
   Las cuatro cosas que no se cobran. El renglón se enciende al pasar y el
   guion del margen crece: es lo único que se mueve. */
.gb-resta li{transition:background var(--t) var(--ease),padding-left var(--t) var(--ease)}
.gb-resta li::before{transition:width var(--t) var(--ease),background var(--t) var(--ease)}
.gb-resta li:hover{background:rgba(201,162,39,.035)}
.gb-resta li:hover::before{width:20px;background:var(--oro-alto)}
.gb-resta__k{font-size:1.0625rem;letter-spacing:-.02em}

/* ══ 11 · El plato: la cifra, acuñada ══════════════════════════════════
   La paridad deja de ser un renglón de texto y pasa a ser una pieza:
   chaflán, lustre, filete encendido y un barrido de luz que la cruza cada
   nueve segundos. El barrido va dentro del `overflow:hidden`; sin él se
   sale por la esquina cortada. */
.gb-plato{overflow:hidden;padding:var(--e8) var(--e7) var(--e7);
  --canto:var(--filete-vivo);
  --relleno:linear-gradient(158deg,var(--card-2) 0%,var(--card) 58%,#100E09 100%)}
/* el barrido pasa a `::after`: `::before` lo necesita el relleno */
.gb-plato::after{content:"";position:absolute;top:1px;left:-60%;width:45%;height:calc(100% - 2px);
  background:linear-gradient(100deg,transparent,rgba(255,236,180,.10),transparent);
  transform:skewX(-18deg);animation:gb-barrido 9s var(--ease) infinite;z-index:1;
  pointer-events:none}
@keyframes gb-barrido{
  0%,72%{left:-60%}
  92%,100%{left:120%}
}
.gb-plato>*{position:relative;z-index:2}
.gb-plato__k{display:flex;align-items:center;gap:.55em;margin:0 0 var(--e5);
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute)}
/* el punto que late: dice que la cifra es de hoy */
.gb-plato__k::before{content:"";width:.5em;height:.5em;flex:none;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 0 rgba(127,163,90,.55);
  animation:gb-latido 2.6s var(--ease) infinite}
@keyframes gb-latido{
  0%{box-shadow:0 0 0 0 rgba(127,163,90,.5)}
  70%,100%{box-shadow:0 0 0 .55em rgba(127,163,90,0)}
}
.gb-troquel{margin-top:0;border-bottom:0;padding-bottom:0;display:block;
  font-size:clamp(2rem,1.1rem + 3.6vw,3.5rem);letter-spacing:-.04em;color:#F7F3E7}
.gb-troquel b{font-weight:800}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gb-troquel{background:linear-gradient(96deg,#FBF8EE 0%,#F0E3BC 44%,var(--oro-alto) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  .gb-troquel b{-webkit-text-fill-color:transparent}
}
/* El «=» va a la mitad de cuerpo y levantado: a tamaño completo es una
   mancha del ancho de una sílaba y compite con la cifra. En `--mute-2`
   medía 3,40:1 sobre la placa; en `--mute` mide 4,82 y pasa. */
.gb-troquel span{color:var(--mute);-webkit-text-fill-color:var(--mute);
  font-size:.46em;vertical-align:.42em;font-weight:600;margin-inline:.12em}
/* el filete de oro, como canto de la pieza y no como subrayado */
.gb-plato .gb-troquel{padding-bottom:var(--e4);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--oro) 0%,rgba(201,162,39,.12) 100%) 1}
.gb-troquel__pie{margin-top:var(--e4);font-size:.9375rem;color:var(--mute)}
/* las tres condiciones, dentro del plato */
.gb-plato__l{list-style:none;margin:var(--e6) 0 0;padding:var(--e6) 0 0;
  border-top:1px solid var(--line);display:grid;gap:var(--e3);font-size:.875rem;
  color:var(--ink-2)}
.gb-plato__l li{display:flex;align-items:center;gap:var(--e3)}
.gb-plato__l li::before{content:"";width:14px;height:14px;flex:none;background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.6 16.2-4.2-4.2-1.4 1.4 5.6 5.6L20.6 8 19.2 6.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.6 16.2-4.2-4.2-1.4 1.4 5.6 5.6L20.6 8 19.2 6.6z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ══ 12 · La portada ═══════════════════════════════════════════════════
   El texto a la izquierda y la pieza a la derecha. Por debajo de 1000 px
   la pieza baja: en una columna estrecha una placa de cifra al lado del
   titular no cabe sin encoger la cifra, y la cifra es el argumento. */
.gb-hero--portada{padding-top:clamp(3rem,7vw,6rem)}
.gb-hero__txt{min-width:0}
@media (min-width:1000px){
  /* 1,18 contra 0,82, y no 1,12/0,88: a 1440 la columna de texto medía 587
     px y «directo a USDT» pide 578 a 68 px, así que el titular caía en
     TRES renglones con «a USDT» colgando. Con 1,18 la columna sube a 618 y
     entra en dos. Al plato le quedan 430 px y su cifra pide 419 con el
     relleno: cabe, pero no admite otra décima. */
  .gb-hero--portada .gb-hero__in{display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
    gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
  .gb-hero--portada h1{max-width:15ch}
}
@media (max-width:999px){
  .gb-plato{margin-top:var(--e9)}
}
.gb-hero__cta{display:flex;flex-wrap:wrap;gap:var(--e4);margin:var(--e8) 0 0}
/* Los avales: lo que la casa ya declara, dicho en una línea y con su
   icono. No es adorno: es la prueba que el visitante busca antes de dar
   un documento. */
.gb-avales{list-style:none;margin:var(--e8) 0 0;padding:var(--e7) 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--e4) var(--e7);
  font-size:.8125rem;color:var(--mute)}
.gb-avales li{display:flex;align-items:center;gap:var(--e3)}
.gb-avales svg{width:15px;height:15px;flex:none;color:var(--oro)}
/* El campo de la portada. app.css pinta aquí una retícula de
   circunferencias con `repeating-radial-gradient` y una máscara que la
   deja sólo a la derecha; en la portada se refuerza: dos pasos
   superpuestos —uno cada 52 px y otro cada 207, más claro— dan un grosor
   irregular que un solo paso no da, y una brasa detrás pone la luz.

   Esto llegó a ser una LÁMINA de 1.100 px y se retiró: pesaba 52 kB en
   AVIF porque los arcos son trazos finos repartidos por todo el canal
   alfa, que es justo lo que un códec no puede comprimir. En degradados
   cuesta 0 bytes y se dibuja nítida a cualquier densidad de pantalla. */
.gb-hero--portada::before{
  display:block;
  background:
    radial-gradient(58% 54% at 108% -8%,rgba(255,231,166,.15) 0%,rgba(201,162,39,.085) 34%,transparent 68%),
    repeating-radial-gradient(circle at 108% -8%,transparent 0 52px,rgba(201,162,39,.17) 52px 53px),
    repeating-radial-gradient(circle at 108% -8%,transparent 0 207px,rgba(239,210,106,.20) 207px 209px);
  -webkit-mask-image:radial-gradient(74% 70% at 105% -6%,#000 0%,rgba(0,0,0,.5) 44%,transparent 80%);
          mask-image:radial-gradient(74% 70% at 105% -6%,#000 0%,rgba(0,0,0,.5) 44%,transparent 80%)}
/* La lámina de luz entra como CUARTA capa, debajo de los arcos y dentro de
   la misma máscara. Ahí está la gracia: la lámina es opaca y su borde es
   negro puro, que sobre el negro cálido de la página se vería recortado;
   la máscara que ya apaga los arcos la apaga a ella con el mismo gesto, y
   no hace falta ni transparencia en el archivo ni mezcla de capas —que en
   el héroe no funciona, porque lleva `isolation:isolate`—. */
.gb-hero--portada::before{
  background-image:
    radial-gradient(58% 54% at 108% -8%,rgba(255,231,166,.15) 0%,rgba(201,162,39,.085) 34%,transparent 68%),
    repeating-radial-gradient(circle at 108% -8%,transparent 0 52px,rgba(201,162,39,.17) 52px 53px),
    repeating-radial-gradient(circle at 108% -8%,transparent 0 207px,rgba(239,210,106,.20) 207px 209px),
    image-set(url("../img/luz-1200.avif") type("image/avif"),url("../img/luz-1200.webp") type("image/webp"));
  background-repeat:no-repeat;
  background-position:0 0,0 0,0 0,right -6vw top -4vw;
  /* la lámina se sirve a 1200 y no a 720: aquí se pinta hasta 1040 px de
     ancho, así que la de 720 llegaba escalada un 44 % hacia arriba. Cuesta
     7 kB más y es la única imagen por encima del pliegue. */
  background-size:auto,auto,auto,clamp(560px,74vw,1040px) auto}
@media (max-width:899px){
  /* app.css lo retira bajo 900 px; en la portada se queda, apagado */
  .gb-hero--portada::before{display:block;opacity:.55}
}

/* ══ 12b · El masthead de las interiores ═══════════════════════════════
   Las cuatro interiores abrían con texto y nada más. Ahora llevan la marca
   de la casa extruida y renderizada en oro —cuatro vistas del MISMO objeto,
   una por página: una serie, como las tomas de un producto, no cuatro
   imágenes sueltas—.

   La pieza va con FONDO TRANSPARENTE, y eso decide toda la maqueta: no hay
   foto debajo del texto, así que no hace falta velo, no hay contraste que
   calibrar y el objeto se coloca AL LADO, como el plato de la portada. Un
   masthead con foto a sangre habría pedido velo anclado a la columna de
   texto medida —que a 1920 px acaba en el 73 % de la ventana y a 390 en el
   95 %—, y eso es un problema que aquí no hay que tener.

   El halo va detrás en `radial-gradient`, no en `filter`: un filtro sobre la
   figura entera también difumina el oro. */
.gb-hero--pieza .gb-hero__txt{min-width:0}
.gb-hero__pieza{position:relative;margin:0;display:flex;justify-content:center}
.gb-hero__pieza::before{content:"";position:absolute;inset:-18% -12%;z-index:-1;
  background:radial-gradient(50% 50% at 52% 48%,rgba(201,162,39,.20) 0%,
             rgba(201,162,39,.07) 42%,transparent 72%)}
.gb-hero__pieza img{width:100%;height:auto;min-width:0;min-height:0}
@media (min-width:1000px){
  .gb-hero--pieza .gb-hero__in{display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(2rem,4vw,3.5rem);align-items:center}
}
@media (max-width:999px){
  /* En columna estrecha la pieza NO se pone detrás del titular: el oro bajo
     la crema come contraste y hay que medirlo. Va delante, contenida, y con
     el mismo halo. Ocupa poco: es un remate, no el asunto. */
  .gb-hero--pieza .gb-hero__in{display:flex;flex-direction:column-reverse;
    align-items:flex-start;gap:var(--e7)}
  .gb-hero__pieza{width:min(62%,320px);margin-bottom:var(--e2)}
}
@media (max-width:520px){
  .gb-hero__pieza{width:min(74%,260px)}
}


/* ══ 13 · La cinta rodante ═════════════════════════════════════════════
   El único golpe de oro macizo de la página, y va a todo el ancho. Corre
   sola, se para al pasar por encima y no corre en absoluto para quien
   pidió menos movimiento. El contenido va DOS veces —la animación
   desplaza la mitad del ancho— y el duplicado lleva `aria-hidden`: se oye
   una sola vez. */
.gb-cinta-r{position:relative;overflow:hidden;
  margin-block:clamp(3rem,7vw,5rem);padding-block:var(--e6);
  background:linear-gradient(100deg,var(--oro-bajo) 0%,var(--oro) 36%,var(--oro-alto) 100%);
  color:var(--accent-ink)}
.gb-cinta-r__p{display:flex;width:max-content;gap:var(--e9);
  animation:gb-rueda 38s linear infinite}
.gb-cinta-r:hover .gb-cinta-r__p{animation-play-state:paused}
@keyframes gb-rueda{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.gb-cinta-r__t{display:flex;align-items:center;gap:var(--e9);
  font-family:var(--fd);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1rem,.9rem + .5vw,1.375rem);color:var(--accent-ink);white-space:nowrap}
.gb-cinta-r__t span{display:flex;align-items:center;gap:var(--e6)}
.gb-cinta-r__t span::after{content:"";width:.42em;height:.42em;
  background:rgba(20,17,10,.42);transform:rotate(45deg)}

/* ══ 14 · El cierre ════════════════════════════════════════════════════
   La placa grande antes del pie: dos brasas en esquinas opuestas, chaflán
   mayor y el grano encima. Es la única pieza de la página con esquina de
   24 px, y por eso se lee como final. Alberga las dos columnas del
   contacto; el formulario pierde su caja, que dentro de una placa sería
   una caja dentro de otra. */
.gb-cierre{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,#15120B 0%,#0E0C07 60%,#131009 100%);
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem)}
.gb-cierre::before{content:"";position:absolute;inset:-30%;z-index:-1;
  background:
    radial-gradient(48% 62% at 6% 108%,rgba(201,162,39,.34) 0%,transparent 62%),
    radial-gradient(42% 56% at 98% -8%,rgba(239,210,106,.22) 0%,transparent 62%)}
.gb-cierre>*{position:relative}
.gb-cierre h2{margin-bottom:var(--e5)}
.gb-cierre p{color:var(--ink-2)}
.gb-cierre .gb-hint{color:var(--mute)}
.gb-cierre .gb-eyebrow{margin-bottom:var(--e6)}
.gb-cierre.gb-contacto{gap:clamp(2rem,4vw,3.5rem)}
/* el correo iba pegado al botón, sin un respiro entre los dos */
.gb-cierre .gb-hero__cta{margin-bottom:var(--e6)}
.gb-cierre .gb-form{background:rgba(8,7,4,.55);border-color:var(--borde)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .gb-cierre .gb-form{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}

/* ══ 15 · El marco de imagen y el bloque de dos ════════════════════════
   Una imagen sin marco en una página oscura se lee como un agujero. El
   marco le pone canto, chaflán y un velo diagonal: a resolución nativa el
   macro sale más brillante que cualquier otra cosa de la página y se la
   come. El halo de oro por debajo lo ata al fondo en vez de recortarlo. */
.gb-marco{position:relative;overflow:hidden;background:var(--card);isolation:isolate}
.gb-marco img,.gb-marco__v{width:100%;height:100%;object-fit:cover;display:block}
.gb-marco::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(196deg,
    rgba(12,11,8,.26) 0%,rgba(12,11,8,.06) 46%,rgba(12,11,8,.66) 100%);
  box-shadow:inset 0 0 0 1px var(--borde)}
.gb-dos{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;
  margin-bottom:clamp(2.5rem,5vw,4rem)}
.gb-dos__txt h2{margin-bottom:var(--e5)}
.gb-dos__txt .gb-sec__d{margin-bottom:var(--e6)}
.gb-dos__fig{margin:0;aspect-ratio:3/2;
  filter:drop-shadow(0 26px 56px rgba(201,162,39,.16))}
@media (min-width:900px){
  .gb-dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gb-dos--fig-izq .gb-dos__fig{order:-1}
}
@media (max-width:899px){
  .gb-dos__fig{aspect-ratio:16/10}
}
/* El velo del marco se calibró contra un macro de oro macizo, que llegaba
   más claro que nada de la página. La lámina de hoy ya es oscura en tres
   cuartas partes: con aquel velo se apagaba entera. Queda sólo el pie, que
   es lo que separa la imagen del texto de abajo. */
.gb-marco::after{background:linear-gradient(198deg,
    rgba(12,11,8,.10) 0%,rgba(12,11,8,0) 42%,rgba(12,11,8,.46) 100%)}

/* ══ 16 · Campos ═══════════════════════════════════════════════════════
   El campo mantiene su esquina de 2 px —es plomería, no marca— pero gana
   el foco de oro con halo, que es lo que se echaba en falta al teclear. */
.gb-in,.gb-ta,.gb-form select.gb-in{background:#100E09;border-color:var(--borde);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             background var(--t) var(--ease)}
.gb-in:hover,.gb-ta:hover{border-color:#463C28}
.gb-in:focus,.gb-ta:focus{border-color:var(--oro);
  box-shadow:0 0 0 3px rgba(201,162,39,.16);background:#13100A}
.gb-form{position:relative;background:linear-gradient(170deg,var(--card) 0%,#100E09 100%);
  border-color:var(--borde);border-radius:var(--ctrl)}
.gb-field>label{letter-spacing:.01em}

/* ══ 17 · La zona en placa ═════════════════════════════════════════════
   Era un rectángulo de gris cálido plano entre dos filetes. Ahora baja de
   tono de arriba abajo, recibe una brasa por la esquina alta izquierda —de
   donde viene la luz en toda la página— y, debajo de todo, la MATERIA: un
   mineral oscuro con vetas de oro.

   Esa foto estuvo antes enmarcada, como una banda recortada en el cuerpo de
   una interior, y no funcionaba: una textura dentro de un marco es la foto
   de nada. Una textura es un FONDO. Aquí va bajo un velo del 93,5 al 95,5 %,
   así que asoma un 3,5 % escaso: lo justo para que la placa tenga grano y
   ninguna letra pierda contraste. El velo NO se eligió, se calibró: con el
   93,5 % el píxel más claro de la veta dejaba el texto de apoyo en 4,42:1 y
   el pie de la resta en 3,07. Medido ocultando la tinta, capturando el
   fondo y muestreando el peor píxel de cada caja de texto.

   Sin pseudoelemento: cuatro capas de fondo en la misma declaración, para
   no tener que rescatar el contenido con `z-index`. */
.gb-sec--placa{
  background:
    radial-gradient(64% 58% at 10% 0%,rgba(201,162,39,.11) 0%,transparent 68%),
    linear-gradient(180deg,rgba(23,20,14,.955) 0%,rgba(18,16,9,.972) 100%),
    image-set(url("../img/fondo-mineral.avif") type("image/avif"),
              url("../img/fondo-mineral.webp") type("image/webp")) center/cover no-repeat,
    #121009;
  border-block-color:var(--borde)}
/* Cuando hay DOS zonas en placa en la misma página —las interiores tienen
   los pasos y el cierre— la segunda arranca el fondo por otro sitio: es la
   misma materia, pero no el mismo trozo. */
.gb-sec--placa:nth-of-type(even){background-position:0 0,0 0,right 30% bottom 20%,0 0}

/* ══ 17b · La ficha de contacto ════════════════════════════════════════
   Tres renglones con filete: icono, rótulo y dato. El rótulo va en micro
   versalita y el dato en tinta de lectura, así que se puede barrer la
   columna de rótulos sin leer los valores.
   El hueco que falta se marca con trazo discontinuo y en tono de apoyo: se
   ve que ES un hueco y no un dato. Sólo lo ve quien puede rellenarlo. */
.gb-datos{list-style:none;margin:var(--e8) 0 0;padding:0;
  border-top:1px solid var(--line);font-size:.9375rem}
.gb-datos li{display:grid;grid-template-columns:16px 6.5rem minmax(0,1fr);
  align-items:baseline;gap:var(--e2) var(--e4);
  padding:var(--e5) 0;border-bottom:1px solid var(--line)}
.gb-datos svg{width:16px;height:16px;min-width:0;min-height:0;flex:none;
  color:var(--oro);transform:translateY(.15em)}
.gb-datos__k{font-size:.6875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.gb-datos__v{color:var(--ink-2);overflow-wrap:anywhere}
.gb-datos a{color:var(--ink-2);text-decoration-color:rgba(201,162,39,.42);
  text-underline-offset:.22em;overflow-wrap:anywhere}
.gb-datos a:hover{color:var(--oro-alto);text-decoration-color:var(--oro-alto)}
/* el hueco: trazo discontinuo, para que no se confunda con un dato */
.gb-datos__v--falta{color:var(--mute-2);font-size:.8125rem;justify-self:start;
  border-bottom:1px dashed var(--line-2);padding-bottom:.15em}
@media (max-width:520px){
  /* a esta anchura la columna del rótulo se come el dato */
  .gb-datos li{grid-template-columns:16px minmax(0,1fr)}
  .gb-datos__k,.gb-datos__v,.gb-datos a{grid-column:2}
}


/* ══ 18 · El pie ═══════════════════════════════════════════════════════ */
.gb-pie{position:relative}
.gb-pie__col h3{letter-spacing:.14em;font-size:.6875rem}
.gb-pie__col a{text-decoration-color:rgba(201,162,39,.30);text-underline-offset:.22em}
.gb-pie__col a:hover{text-decoration-color:var(--oro)}
/* Las marcas van dimensionadas por TINTA: el `viewBox` de cada una está
   recortado a su dibujo, así que fijando sólo el alto el ancho sale solo.

   Empezaron en 9 y 14 px, aplicando la convención de que la PALABRA va más
   pequeña que el SÍMBOLO. Aquí esa convención se equivoca, y se ve: VISA
   salía en miniatura al lado de Mastercard. La razón, medida rasterizando
   cada trazado y contando píxeles opacos: la palabra cubre el 52,8 % de su
   caja y los círculos el 80,2 %, pero la palabra es TRES VECES más ancha,
   así que por unidad de alto lleva MÁS tinta, no menos.

     tinta VISA = 0,528 × (24/7,751) × h²  = 1,636·h²
     tinta MC   = 0,802 × (24/14,831) × h² = 1,297·h²

   Igualadas: h_visa = 0,89 × h_mc. Con 16 y 18 px la tinta sale en 419 y
   420 px² —0,2 % de diferencia— y las dos se leen a la escala del pie, que
   va en 14 px. Si se cambia una, se rehace la cuenta con la otra.

   En `--mute-2` quedaban a 3,4:1 contra el fondo y casi no se veían; en
   `--mute` se leen. */
.gb-marks{color:var(--mute);gap:var(--e5)}
/* Los dos `min-*:0` NO sobran, y por motivos distintos:
   · `min-height`, porque Bricks trae `svg:not([height]){min-height:1em}` en
     su capa de frontend. Estas marcas no llevan atributo `height` —el alto
     lo pone la hoja—, así que caían en esa regla: el suelo de 1em (14 px)
     ganaba y la palabra VISA salía a 14 px en vez de a 9, un 56 % mayor de
     lo medido. Sin dar ningún error. Es la misma trampa que ya costó medir
     en la marca del logotipo.
   · `min-width`, porque los hijos de un flex nacen con `min-width:auto`. */
.gb-marks__v,.gb-marks__m{width:auto;min-width:0;min-height:0;flex:none}
.gb-marks__v{height:16px}
.gb-marks__m{height:18px}

/* ══ 19 · El revelado ══════════════════════════════════════════════════
   Las piezas entran subiendo unos píxeles al asomar. Dos cautelas
   aprendidas: la clase que las esconde la pone el GUION —si no corre, no
   hay nada invisible—, y el observador no usa margen negativo, que es lo
   que deja piezas sin animar para siempre en ventanas de cierto alto. */
.js-alza [data-sube]{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-alza [data-sube].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-alza [data-sube]{opacity:1;transform:none}
  .gb-plato::before,.gb-plato__k::before{animation:none}
  .gb-cinta-r__p{animation:none}
}

/* ══ 21 · El renglón legal del pie ═════════════════════════════════════
   Iba en `--mute-2` a 13 px sobre el negro de la página: 3,39:1, que es
   el único fallo de contraste que la auditoría marcaba en la portada. En
   `--mute` mide 5,28. */
.gb-pie__fin{color:var(--mute)}

/* ══ 20 · Dos contrastes que no pasaban ════════════════════════════════
   Medidos sobre el color compuesto de la pila, no sobre la caja:
   · «(opcional)» junto a los rótulos del alta iba en `--mute-2` sobre la
     placa y medía 3,21:1. En `--mute` mide 4,62. Es el formulario que más
     importa del sitio y el texto que dice si un campo se puede saltar.
   · el resto de la página pasa: el cospel mide 11,79:1, la tinta de la
     cinta de oro va de 5,22 a 12,65 según el tramo del degradado, y el
     botón sólido, lo mismo. */
.gb-opt{color:var(--mute)}

/* ══ 22 · El tono de apoyo tenue no vale para texto ════════════════════
   `--mute-2` (#6B6558) mide **3,39:1** sobre el fondo de la casa: por
   debajo del 4,5 que pide un texto pequeño, y lo usaban siete reglas de
   app.css como color de letra —incluido el conmutador de idioma, que
   además es interactivo—. No se toca el token: se deja para lo que de
   verdad debe ser tenue y no es texto de lectura (el hueco pendiente de
   la ficha de contacto). Las que sí son texto pasan a `--mute`, que mide
   5,28. */
.gb-hint__n,.gb-quote__src,.gb-lang,.gb-resta__pie{color:var(--mute)}
.gb-lang a{color:var(--mute)}