/* LA GUÍA DE ESTILO de 180 Grados CAM.
   Corre sobre el CSS vivo del sitio: tokens.css y web.css se cargan
   antes que esto. Aquí sólo va lo que la guía necesita para enseñarse a
   sí misma; los botones, la cuenta, los pasos y la firma que aparecen en
   la página son los del sitio, con su mismo marcado. */

.guia{
  --g-margen: clamp(16px, 3vw, 44px);
  --g-canal: clamp(16px, 2.2vw, 32px);
  --g-regla: 1px solid var(--pal-d-fondo);
  --g-mono: 13px;
  background: var(--color-papel);
  color: var(--pal-d-fondo);
  font-family: var(--font-texto);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
}
.guia *{box-sizing:border-box}
.guia code, .guia kbd, .guia .mono{
  font-family: var(--font-mono); font-size: var(--g-mono);
  letter-spacing: 0; text-transform: none; font-weight: 400;
}
/* CON :where(), SIN PESO. `.guia a` le ganaba a `.cta` por
   especificidad y el botón del sitio se quedaba sin letras: azul sobre
   azul. Lo mismo con `b`, que convertía el «entenderse.» del pie en
   Sentient Bold. La guía no puede corregir a los componentes que enseña. */
:where(.guia) a{color:inherit}
/* la negrita de la guía, sólo en el texto de la guía: fuera de los
   marcos donde viven los componentes del sitio, y fuera del pie */
/* peso cero de especificidad: cualquier regla con clase le gana, así
   que los títulos en Sentient de la guía (.g-reglas b, .g-pieza b…) y
   los componentes del sitio conservan su peso */
:where(.g-sec) :where(b,strong){font-weight:600}
:where(.g-marco) :where(b,strong){font-weight:bolder}

/* ── portada ─────────────────────────────────────────────────── */
.g-portada{
  display:grid; gap: var(--g-canal);
  grid-template-columns: minmax(0,1fr);
  padding: clamp(56px, 10vw, 150px) var(--g-margen) clamp(48px, 7vw, 110px);
  border-bottom: var(--g-regla);
}
.g-portada h1{
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 11vw, 176px); line-height: .92; letter-spacing: -.035em;
  margin: 0; min-width: 0; overflow-wrap: anywhere;
}
.g-portada .g-intro{max-width: 34ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; margin: 0 0 18px}
.g-portada .g-acc{display:flex; flex-wrap:wrap; gap:10px}
@media (min-width: 900px){
  .g-portada{grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items:end}
}

/* ── botones de la guía (los del sitio viven en web.css) ─────── */
.g-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:40px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--pal-d-fondo); background: transparent; color: var(--pal-d-fondo);
  font: 600 14px/1 var(--font-texto); cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--circ-sal), color var(--dur-base) var(--circ-sal);
}
.g-btn:hover{background: var(--pal-d-fondo); color: var(--color-papel)}
.g-btn:focus-visible{outline: 2px solid var(--color-foco); outline-offset: 3px}

/* ── cuerpo: índice + secciones ─────────────────────────────── */
.g-cuerpo{
  display:grid; grid-template-columns: minmax(0,1fr);
  padding: 0 var(--g-margen) clamp(80px, 10vw, 160px);
}
.g-indice{display:none}
@media (min-width: 1100px){
  .g-cuerpo{grid-template-columns: 200px minmax(0,1fr); gap: var(--g-canal)}
  .g-indice{
    display:block; position: sticky; top: calc(var(--nav-alto) + 28px); align-self:start;
    padding-top: 30px; max-height: calc(100vh - var(--nav-alto) - 40px); overflow:auto;
  }
  .g-indice ol{list-style:none; margin:0; padding:0; counter-reset: i}
  .g-indice li{counter-increment:i}
  .g-indice a{
    display:grid; grid-template-columns: 28px 1fr; gap: 6px;
    padding: 3px 0; text-decoration: none; font-size: 14px; line-height: 1.35;
    color: color-mix(in oklch, var(--pal-d-fondo) 48%, transparent);
    transition: color var(--dur-base) var(--circ-sal);
  }
  .g-indice a::before{content: counter(i, decimal-leading-zero); font: 12px/1.6 var(--font-mono)}
  .g-indice a:hover, .g-indice a[aria-current="true"]{color: var(--pal-d-fondo)}
}

.g-sec{
  border-top: var(--g-regla);
  padding: 12px 0 clamp(72px, 9vw, 140px);
  scroll-margin-top: calc(var(--nav-alto) + 8px);
}
.g-sec > .g-num{display:block; font: 12px/1 var(--font-mono); margin: 0 0 clamp(28px, 4vw, 56px)}
.g-cab{display:grid; gap: 14px 40px; grid-template-columns: minmax(0,1fr); margin-bottom: clamp(36px, 5vw, 64px)}
.g-cab h2{
  font-family: var(--font-display); font-weight: 300; margin: 0;
  font-size: clamp(40px, 5.6vw, 84px); line-height: .98; letter-spacing: -.03em;
  min-width:0; overflow-wrap:anywhere;
}
.g-cab p{margin:0; max-width: 46ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5}
@media (min-width: 900px){ .g-cab{grid-template-columns: minmax(0,1fr) minmax(0,1fr)} }

.g-h3{
  font: 600 12px/1.3 var(--font-texto); letter-spacing: .12em; text-transform: uppercase;
  margin: clamp(40px, 5vw, 64px) 0 16px;
}
.g-h3:first-child{margin-top:0}
.g-nota{max-width: 64ch; margin: 22px 0 0}
.g-nota + .g-nota{margin-top: 10px}
.g-tenue{color: var(--color-tenue)}

/* ── tablas ─────────────────────────────────────────────────── */
.g-tabla-caja{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
.g-tabla{width:100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; min-width: 560px}
.g-tabla th{
  text-align:left; font: 600 12px/1.3 var(--font-texto); letter-spacing:.1em; text-transform:uppercase;
  padding: 0 14px 10px 0; border-bottom: var(--g-regla); vertical-align: bottom;
}
.g-tabla td{padding: 12px 14px 12px 0; border-bottom: 1px solid var(--color-linea); vertical-align: top}
.g-tabla td code{white-space: nowrap}
.g-tabla .muestra{font-family: var(--font-display); font-weight:300; letter-spacing:-.02em; line-height:1.05; display:inline-block; max-width: 22ch}
.g-tabla td:last-child{min-width: 150px}

/* ── color ──────────────────────────────────────────────────── */
.g-muestras{display:grid; gap: 20px var(--g-canal); grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr))}
.g-sw{all:unset; cursor:pointer; display:flex; flex-direction:column; gap: 10px}
.g-sw:focus-visible{outline: 2px solid var(--color-foco); outline-offset: 4px}
.g-sw .ch{display:block; aspect-ratio: 4/3; border-radius: 4px; border: 1px solid var(--color-linea)}
.g-sw b{font-weight:600; font-size: 15px}
.g-sw code{display:block; margin-top: -4px}
.g-sw small{font-size: 14px; line-height:1.4; color: var(--color-tenue)}
.g-sw.copiado .ch{outline: 2px solid var(--pal-d-luz); outline-offset: 3px}
.g-sw.reserva{opacity:.62}

/* ── tipografía ─────────────────────────────────────────────── */
.g-familias{display:grid; gap: var(--g-canal); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr))}
.g-familia{border-top: 1px solid var(--color-linea); padding-top: 16px}
.g-familia .aa{display:block; font-size: clamp(88px, 11vw, 150px); line-height: 1; margin: 6px 0 14px; letter-spacing: -.03em}
.g-familia p{margin: 0; font-size: 15px}

/* ── retícula ───────────────────────────────────────────────── */
.g-reticula{display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 6px; height: 150px}
.g-reticula span{background: color-mix(in oklch, var(--pal-d-luz) 28%, transparent); display:flex; align-items:flex-end; justify-content:center; font: 11px/1 var(--font-mono); padding-bottom:6px}
.g-rejilla-sobre{
  position: fixed; inset: 0; z-index: 900; pointer-events: none; display: none;
}
.g-rejilla-sobre.on{display:block}
.g-rejilla-sobre .w{height:100%; display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 20px}
.g-rejilla-sobre .w span{background: color-mix(in oklch, var(--pal-d-luz) 16%, transparent)}
.g-rejilla-sobre .base{position:absolute; inset:0;
  background-image: linear-gradient(to bottom, color-mix(in oklch, var(--pal-d-luz) 30%, transparent) 1px, transparent 1px);
  background-size: 100% 18px}

/* ── espacio ────────────────────────────────────────────────── */
.g-espacios{display:flex; flex-direction:column; gap: 14px}
.g-esp{display:grid; grid-template-columns: 150px minmax(0,1fr); gap: 16px; align-items:center}
.g-esp .barra{height: 22px; background: var(--pal-d-fondo); border-radius: 2px; max-width:100%}
.g-esp div:first-child{font-size:14px}

/* ── líneas y forma ─────────────────────────────────────────── */
.g-formas{display:grid; gap: 24px var(--g-canal); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr))}
.g-forma .obj{height: 110px; display:flex; align-items:center; justify-content:center; background: var(--color-papel-2); border-radius:4px; margin-bottom: 10px}

/* ── la firma ───────────────────────────────────────────────── */
.g-firmas{display:grid; gap: var(--g-canal); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr))}
.g-lamina{
  border-radius: 6px; padding: clamp(28px, 4vw, 56px); min-height: 260px;
  display:flex; flex-direction:column; justify-content:space-between; gap: 24px;
  background: var(--color-papel-2); position: relative; overflow:hidden;
}
.g-lamina.osc{background: var(--pal-d-fondo); color: var(--color-papel)}
.g-lamina small{font-size: 14px; opacity:.8}
.g-lockup{display:inline-flex; align-items:center; font-family: var(--font-display); font-weight:400; letter-spacing:.01em; white-space:nowrap}
.g-lockup .s{display:block; flex:none}
.g-lockup .s svg{display:block; width:100%; height:auto}
.g-lockup.vert{flex-direction:column; align-items:flex-start; line-height:1.06}
.g-proteccion{position:absolute; border:1px dashed currentColor; opacity:.5; pointer-events:none}
.g-no{display:grid; gap: var(--g-canal); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr))}
.g-no figure{margin:0}
.g-no .obj{height:150px; border-radius:4px; background: var(--color-papel-2); display:flex; align-items:center; justify-content:center; overflow:hidden}
.g-no figcaption{font-size: 14px; margin-top: 10px; line-height:1.4}
.g-no figcaption b{display:block; color: #b3261e; font-weight:600}

/* ── el signo ───────────────────────────────────────────────── */
.g-signo{display:grid; gap: var(--g-canal); grid-template-columns: minmax(0,1fr); align-items:center}
@media (min-width: 900px){ .g-signo{grid-template-columns: minmax(0,1fr) minmax(0,1fr)} }
.g-planos{position:relative; aspect-ratio:1; max-width: 460px; width:100%}
.g-planos svg{width:100%; height:auto; display:block}
.g-planos ol{list-style:none; margin:0; padding:0}
.g-leyenda{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 18px}
.g-leyenda li{display:grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; align-items:start; cursor:default}
.g-leyenda .n{font: 12px/2 var(--font-mono)}
.g-leyenda b{font-family: var(--font-display); font-weight:300; font-size: 30px; line-height:1.1; letter-spacing:-.02em; display:block}
.g-leyenda p{margin: 4px 0 0; font-size: 15px}
.g-tamanos{display:flex; flex-wrap:wrap; align-items:flex-end; gap: 28px}
.g-tamanos figure{margin:0; display:flex; flex-direction:column; gap: 8px; align-items:flex-start}
.g-tamanos figcaption{font: 12px/1.3 var(--font-mono)}

/* ── movimiento ─────────────────────────────────────────────── */
.g-curvas{display:grid; gap: var(--g-canal); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr))}
.g-curva{border-top: 1px solid var(--color-linea); padding-top: 14px}
.g-curva .pista{position:relative; height: 44px; margin: 14px 0 10px; border-bottom: 1px solid var(--color-linea)}
.g-curva .bola{position:absolute; left:0; bottom:8px; width: 26px; height: 26px; border-radius:50%; background: var(--pal-d-fondo); transition-property: left; transition-duration: .9s}
.g-curva:hover .bola, .g-curva.corre .bola{left: calc(100% - 26px)}
.g-curva p{margin:0; font-size:14px}
.g-agua{position:relative; aspect-ratio: 16/7; border-radius: 6px; overflow:hidden; background: var(--pal-d-fondo)}
.g-agua canvas{position:absolute; inset:0; width:100%; height:100%}
.g-agua .rot{position:absolute; left: 20px; bottom: 16px; color: var(--color-papel); margin:0; font: 12px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase}

/* ── componentes vivos: el sitio dentro de un marco ─────────── */
.g-marco{border: 1px solid var(--color-linea); border-radius: 6px; overflow:hidden; margin-bottom: 12px}
.g-marco > .seccion{padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px)}
.g-marco > .seccion > .w{padding:0}
.g-cap{font-size:14px; margin: 0 0 clamp(40px, 5vw, 64px); color: var(--color-tenue)}

/* ── imagen ─────────────────────────────────────────────────── */
.g-fotos{display:grid; gap: var(--g-canal); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr))}
.g-fotos figure{margin:0}
.g-fotos img{display:block; width:100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 4px}
.g-fotos figcaption{font-size:14px; margin-top:10px; line-height:1.4}
.g-fotos .si b{color: #0f7a5a}
.g-fotos .no b{color: #b3261e}
.g-fotos figcaption b{display:block; font-weight:600}

/* ── redes ──────────────────────────────────────────────────── */
.g-reglas{list-style:none; counter-reset:r; margin:0; padding:0; display:grid; gap: var(--g-canal); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr))}
.g-reglas li{counter-increment:r; border-top: 1px solid var(--color-linea); padding-top: 14px}
.g-reglas li::before{content: counter(r); font: 12px/1 var(--font-mono); display:block; margin-bottom: 18px}
.g-reglas b{display:block; font-family: var(--font-display); font-weight:300; font-size: 30px; line-height: 1.08; letter-spacing:-.02em; margin-bottom: 8px}
.g-reglas p{margin:0; font-size: 15px}

.g-piezas{display:grid; gap: 36px var(--g-canal); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr))}
.g-pieza{margin:0; display:flex; flex-direction:column; gap: 12px}
.g-pieza canvas{display:block; width:100%; height:auto; border-radius: 4px; box-shadow: 0 1px 0 var(--color-linea), 0 20px 40px -24px rgba(6,0,79,.35)}
.g-pieza figcaption{display:flex; flex-direction:column; gap:4px}
.g-pieza figcaption b{font-family: var(--font-display); font-weight:400; font-size: 21px; line-height:1.15}
.g-pieza figcaption span{font-size: 14px; line-height:1.45}
.g-pieza .g-btn{align-self:flex-start; min-height:34px; font-size:13px; padding:6px 13px}

.g-tira{display:flex; gap: 14px; overflow-x:auto; overflow-y:hidden; padding-bottom: 12px; scroll-snap-type: x mandatory}
.g-tira figure{margin:0; flex: 0 0 min(62vw, 230px); scroll-snap-align:start}
.g-tira canvas{display:block; width:100%; height:auto; border-radius: 4px}
.g-tira figcaption{font: 12px/1.3 var(--font-mono); margin-top:8px}

.g-historias{display:flex; flex-wrap:wrap; gap: var(--g-canal)}
.g-historia{position:relative; width: min(100%, 240px); margin:0}
.g-historia canvas{display:block; width:100%; height:auto; border-radius: 6px}
.g-historia .zona{position:absolute; left:0; right:0; background: repeating-linear-gradient(135deg, rgba(179,38,30,.16) 0 6px, transparent 6px 12px); border: 1px dashed rgba(179,38,30,.7); display:flex; align-items:center; justify-content:center; font: 11px/1 var(--font-mono); color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.5)}
.g-historia figcaption{font-size:14px; margin-top:10px}

/* la cuadrícula del perfil, al tamaño en que se ve de verdad */
.g-feeds{display:grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0,1fr)}
@media (min-width: 820px){ .g-feeds{grid-template-columns: minmax(0,1fr) minmax(0,1fr)} }
.g-telefono{max-width: 390px; width:100%}
.g-telefono .perfil{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px; background: #fff; border: 1px solid var(--color-linea); border-radius: 4px; overflow:hidden}
.g-telefono .perfil > *{aspect-ratio: 3/4; overflow:hidden; background: #ddd}
.g-telefono .perfil canvas, .g-telefono .perfil img{width:100%; height:100%; object-fit:cover; display:block}
.g-telefono h4{margin: 0 0 12px; font: 600 12px/1.3 var(--font-texto); letter-spacing:.1em; text-transform:uppercase}
.g-telefono p{font-size: 14px; margin: 12px 0 0}

/* ── voz ────────────────────────────────────────────────────── */
.g-voz{display:grid; gap: var(--g-canal); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr))}
.g-voz > div{border-top: 1px solid var(--color-linea); padding-top: 14px}
.g-voz b{display:block; font-family: var(--font-display); font-weight:300; font-size: 28px; line-height:1.1; letter-spacing:-.02em; margin-bottom: 6px}
.g-voz p{margin:0; font-size:15px}
.g-sino{display:grid; gap: 12px var(--g-canal); grid-template-columns: minmax(0,1fr); margin-top: 36px}
@media (min-width: 760px){ .g-sino{grid-template-columns: minmax(0,1fr) minmax(0,1fr)} }
.g-sino div{padding: 18px 20px; border-radius: 4px; font-family: var(--font-display); font-weight:300; font-size: 22px; line-height:1.3}
.g-sino .si{background: color-mix(in oklch, var(--pal-d-luz) 16%, var(--color-papel))}
.g-sino .no{background: var(--color-papel-2); color: color-mix(in oklch, var(--pal-d-fondo) 70%, transparent)}
.g-sino .no s{text-decoration-thickness: 1px}
.g-sino small{display:block; font: 600 11px/1.3 var(--font-texto); letter-spacing:.1em; text-transform:uppercase; margin-bottom: 8px; text-decoration:none}
.g-sino .porque{display:block; font-family: var(--font-texto); font-size: 14px; font-weight:400; margin-top: 8px; text-decoration:none; color: var(--pal-d-fondo)}

/* ── accesibilidad ──────────────────────────────────────────── */
.g-aa{display:inline-flex; align-items:center; justify-content:center; width: 46px; height: 34px; border-radius:3px; font-family: var(--font-display); font-size: 20px}
.g-grado{display:inline-block; padding: 2px 8px; border-radius: 999px; font: 600 12px/1.4 var(--font-texto)}
.g-grado.aaa{background:#dff3ea; color:#0b5a42}
.g-grado.aa{background:#e6eefc; color:#1b3a8c}
.g-grado.gr{background:#fff1d6; color:#7a4b00}
.g-grado.no{background:#fde4e2; color:#8f1d16}
.g-lista{margin: 0; padding-left: 1.1em}
.g-lista li{margin: 6px 0; max-width: 70ch}

/* ── capas ──────────────────────────────────────────────────── */
.g-capas{display:flex; flex-direction:column; gap: 8px; max-width: 640px}
.g-capa{display:grid; grid-template-columns: 70px 170px minmax(0,1fr); gap: 12px; align-items:baseline; padding: 10px 14px; border-radius: 4px; background: var(--color-papel-2); font-size:15px}
.g-capa b{font-family: var(--font-display); font-weight:400; font-size: 24px}
@media (max-width: 600px){ .g-capa{grid-template-columns: 60px minmax(0,1fr)} .g-capa span:last-child{grid-column: 1 / -1} }

/* ── plantillas de página ───────────────────────────────────── */
.g-paginas{display:grid; gap: 0 var(--g-canal); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr))}
.g-paginas a{display:grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-linea); text-decoration:none}
.g-paginas a b{font-family: var(--font-display); font-weight:400; font-size: 22px}
.g-paginas a span{font-size: 14px; color: var(--color-tenue); grid-column: 1 / -1; margin-top: -6px}
.g-paginas a::after{content:"→"; grid-column:2; grid-row:1; transition: transform var(--dur-base) var(--circ-sal)}
.g-paginas a:hover::after{transform: translateX(4px)}

/* ── tokens ─────────────────────────────────────────────────── */
.g-codigo{
  background: var(--pal-d-fondo); color: var(--color-papel); border-radius: 6px;
  padding: clamp(18px, 3vw, 30px); overflow:auto; max-height: 560px;
  font: 13px/1.7 var(--font-mono); white-space: pre; tab-size: 2;
}
.g-codigo .c{color: color-mix(in oklch, var(--color-papel) 55%, transparent)}
.g-codigo .v{color: var(--d-hielo)}

/* ── lo que mejoraría ───────────────────────────────────────── */
.g-mejoras{display:flex; flex-direction:column}
.g-mejora{display:grid; grid-template-columns: minmax(0,1fr); gap: 8px 28px; padding: 22px 0; border-top: 1px solid var(--color-linea)}
@media (min-width: 900px){ .g-mejora{grid-template-columns: 70px minmax(0,5fr) minmax(0,6fr)} }
.g-mejora .p{font: 600 11px/1.6 var(--font-texto); letter-spacing:.1em; text-transform:uppercase}
.g-mejora .p i{font-style:normal; display:inline-block; padding: 2px 8px; border-radius:999px}
.g-mejora .p .alta{background: var(--pal-d-fondo); color: var(--color-papel)}
.g-mejora .p .media{background: color-mix(in oklch, var(--pal-d-luz) 30%, var(--color-papel))}
.g-mejora .p .baja{background: var(--color-papel-2)}
.g-mejora h4{margin:0; font-family: var(--font-display); font-weight:400; font-size: 24px; line-height: 1.2; letter-spacing:-.01em}
.g-mejora p{margin: 0 0 8px; font-size: 15px}
.g-mejora p:last-child{margin-bottom:0}
.g-mejora .dato{font-size: 14px; color: var(--color-tenue)}
.g-hecho{display:inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #dff3ea; color:#0b5a42; font: 600 11px/1.6 var(--font-texto); letter-spacing:.06em; text-transform:uppercase; vertical-align: 3px}

/* ── aviso de copiado ───────────────────────────────────────── */
.g-aviso{
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 48px));
  background: var(--pal-d-fondo); color: var(--color-papel); padding: 10px 18px; border-radius: 999px;
  font: 600 14px/1.2 var(--font-texto); z-index: 950;
  transition: transform .5s var(--circ-sal);
}
.g-aviso.on{transform: translate(-50%, 0)}

.g-rejilla-btn{position:fixed; right: 18px; bottom: 90px; z-index: 110; background: var(--color-papel)}

@media (prefers-reduced-motion: reduce){
  .g-curva .bola{transition:none}
  .g-aviso{transition:none}
}

/* dentro de un marco, los componentes empiezan arriba: su margen de
   sección sobra cuando ya viven en una caja */
.g-marco .pasos, .g-marco .desplegable, .g-marco .cuenta{margin-top:0}

@media (max-width: 759px){ .g-rejilla-btn{display:none} }