/* ═══════════════════════════════════════════════════════════════════════════════════════════
   GUÍAS · 02-oct — «Guía de tallas» y «Guía de diseño» (patrón de klarna.com/us/what-is-klarna)
   Reemplaza a guia-scroll.css (la guía larga de scroll con índice pegajoso del 01-oct).

   Qué se copia de Klarna: titular enorme y corto; un panel grande con imagen; bloques que alternan
   fondo blanco / gris; títulos de sección centrados en el aire; muy poco texto por bloque; preguntas al final
   y un solo botón de cierre. NO se copia contenido ni color.

   Tipografía de la marca (03-oct · Carlitos confirmó Anton y Archivo; Hussar y Jost quedaron descartadas):
   Anton en títulos y cifras grandes (un solo grosor: font-weight 400, nunca negrita sintética) y Archivo en
   todo el texto. Siempre por token: var(--mk-display) / var(--mk-body). Los comentarios de más abajo que
   todavía nombran Hussar son del 02-oct y hablan de lo ancho que era ese tipo: siguen valiendo como aviso
   (Anton es más angosta, así que esos clamp() quedan holgados, nunca cortos).

   Todo va acotado a `main[data-guia]` y con el id duplicado (`#main-content#main-content[data-guia]`, peso 2,x,x).
   Hace falta: marca.css y ensutex-fuentes.css fuerzan tipografía, mayúsculas, peso, tamaño del H1 e interlineado con
   !important y selectores que pesan como un id (`main#main-content :is(p, li…)`, `[class*="title"]`). Con un solo
   id las reglas de esta hoja quedaban inertes (medido: los chips salían en Jost y los h3 en peso 400).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

#main-content#main-content[data-guia] {
  --g-gut: 24px;                       /* margen lateral mínimo en celular */
  --g-max: 1240px;
  --g-sec: clamp(36px, 5.2vw, 64px);     /* aire vertical de cada bloque */
  --g-r: 28px;                         /* radio de los paneles grandes */
  --g-ink: var(--mk-ink, #151413);
  --g-ink2: var(--mk-ink-2, #5E5A56);
  --g-negro: var(--mk-negro, #141312);
  --g-gris: var(--mk-bg, #F4F3F1);
  --g-rojo: var(--mk-rojo, #E20613);
  --g-linea: var(--mk-line, #E7E4E0);
  --g-curva: var(--mk-curva, cubic-bezier(.22, 1, .36, 1));
  --g-display: var(--mk-display, 'Hussar Bold', sans-serif);
  --g-body: var(--mk-body, 'Jost', sans-serif);
  display: block;
  padding-top: 64px;                   /* la cabecera es fija: 64 px en celular */
  background: var(--g-gris);
  color: var(--g-ink);
  overflow-x: clip;
}
@media (min-width: 768px) { #main-content#main-content[data-guia] { padding-top: 80px; } }
@media (min-width: 1024px) { #main-content#main-content[data-guia] { padding-top: 78px; } }

#main-content#main-content[data-guia] section[id] { scroll-margin-top: 84px; }
#main-content#main-content[data-guia] :is(h1, h2, h3, p, ul, ol, figure, table, dl) { margin-block: 0; }
#main-content#main-content[data-guia] img { display: block; max-width: 100%; height: auto; }
#main-content#main-content[data-guia] :is(a, button):focus-visible { outline: 3px solid var(--g-rojo); outline-offset: 3px; border-radius: 6px; }
#main-content#main-content[data-guia] :is(.gx-hero, .gx-cierre) :is(a, button):focus-visible { outline-color: #fff; }

.gx-wrap { width: min(var(--g-max), 100% - 2 * var(--g-gut)); margin-inline: auto; }
.gx-sec { padding-block: var(--g-sec); }
.gx-sec--blanco { background: #fff; }
.gx-sec--gris { background: var(--g-gris); }

/* ── Títulos ────────────────────────────────────────────────────────────────────────────────
   marca.css ya deja los H1/H2 en la display de marca (Anton), mayúscula, línea 1.08. Aquí solo se fija el
   tamaño. Ojo: los clamp() se calcularon el 02-oct contra Hussar, que es ancha (≈0,62 em por letra en
   mayúscula), y Anton mide menos; por eso quedan conservadores. No se tocan sin volver a medir. */
#main-content#main-content[data-guia] h1.gx-h1:not(.ens-motion-eyebrow) {
  font-size: clamp(40px, 11.4vw, 52px) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
  overflow-wrap: normal;
  margin: 0;
}
@media (min-width: 900px) {
  #main-content#main-content[data-guia] h1.gx-h1:not(.ens-motion-eyebrow) { font-size: clamp(64px, 5.7vw, 84px) !important; }
}
#main-content#main-content[data-guia] h2.gx-h2 {
  font-size: clamp(30px, 8.2vw, 36px);
  line-height: 1.16 !important;     /* el «¿» baja de la línea: con 1,08 rozaba la letra de abajo */
  text-wrap: balance;
  overflow-wrap: normal;
}
@media (min-width: 900px) { #main-content#main-content[data-guia] h2.gx-h2 { font-size: clamp(40px, 3.7vw, 54px); } }

#main-content#main-content[data-guia] .gx-lead { font-family: var(--g-body); font-size: clamp(18px, 4.6vw, 21px); line-height: 1.45; color: var(--g-ink2); max-width: 36ch; }
#main-content#main-content[data-guia] .gx-lead strong { font-weight: 700; color: var(--g-ink); }

/* la etiqueta del tema (SEO) dentro del H1: píldora (la pone marca.css). Sobre paneles oscuros se invierte. */
#main-content#main-content[data-guia] .gx-h1 .seo-tema { margin-bottom: 16px !important; }
#main-content#main-content[data-guia] :is(.gx-hero, .gx-cierre) .seo-tema { background: #fff !important; color: var(--g-ink) !important; -webkit-text-fill-color: var(--g-ink) !important; }

/* ── Entrada escalonada (movimiento) ─────────────────────────────────────────────────────────
   Ficha: parte de un estado VISIBLE (opacidad .4, 16 px más abajo), 560 ms, cubic-bezier(.22,1,.36,1), escalón 70 ms,
   solo transform y opacity. El héroe entra al cargar; los demás bloques, cuando sube.js los marca (.sube--in).
   Sin JavaScript o con movimiento reducido todo se ve completo y quieto. */
@keyframes gx-entra { from { opacity: .4; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.gx-hero .gx-item { animation: gx-entra .56s var(--g-curva) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
html.sube-js #main-content#main-content[data-guia] .sube:not(.sube--in) .gx-item { opacity: .4; transform: translate3d(0, 16px, 0); }
html.sube-js #main-content#main-content[data-guia] .sube .gx-item { transition: opacity .56s var(--g-curva), transform .56s var(--g-curva); transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  .gx-hero .gx-item { animation: none; }
  html.sube-js #main-content#main-content[data-guia] .sube .gx-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Botones ─────────────────────────────────────────────────────────────────────────────────
   marca.css pone el rojo, la píldora y Jost a todo `[class*="button--primary"]`; aquí solo el tamaño. */
#main-content#main-content[data-guia] .gx-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  font-family: var(--g-body); font-size: 17px; font-weight: 600; line-height: 1.1; text-decoration: none; text-align: center;
  white-space: nowrap;
}
#main-content#main-content[data-guia] .gx-button--secondary { border: 1.5px solid currentColor; }
#main-content#main-content[data-guia] .gx-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#main-content#main-content[data-guia] .gx-enlace { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; font-family: var(--g-body); font-size: 17px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

/* ── Héroe: panel redondeado con imagen (Klarna: «What is Klarna?» sobre su foto) ─────────── */
#main-content#main-content[data-guia] .gx-hero {
  position: relative; overflow: hidden;
  margin: 12px 12px 0; padding: 14px 14px 28px;
  background: var(--lamina, var(--g-negro)); color: #fff;
  border-radius: var(--g-r);
  display: grid; gap: 24px;
}
#main-content#main-content[data-guia] .gx-hero .gx-lead { color: rgba(255, 255, 255, .86); }
#main-content#main-content[data-guia] .gx-hero .gx-lead strong { color: #fff; }
#main-content#main-content[data-guia] .gx-hero .gx-h1 strong { color: #fff; }
#main-content#main-content[data-guia] .gx-hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-inline: 8px; }
@media (min-width: 900px) {
  #main-content#main-content[data-guia] .gx-hero { margin: 16px 16px 0; padding: 56px 64px; gap: 48px; }
  #main-content#main-content[data-guia] .gx-hero__texto { padding-inline: 0; gap: 24px; }
}

/* atajos bajo el titular (2–3 enlaces de ancla, no un índice) */
#main-content#main-content[data-guia] .gx-atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#main-content#main-content[data-guia] .gx-atajos a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  border: 1.5px solid rgba(255, 255, 255, .34); border-radius: 999px;
  font-family: var(--g-body); font-size: 16px; font-weight: 600; color: #fff; text-decoration: none;
  transition: background-color .2s var(--g-curva), color .2s var(--g-curva), border-color .2s var(--g-curva);
}
#main-content#main-content[data-guia] .gx-atajos a:hover { background: #fff; color: var(--g-ink); border-color: #fff; }

/* ── «Cinta métrica»: la marca de las tallas (marcas cada 10 px, más largas cada 50) ───────── */
#main-content#main-content[data-guia] .gx-regla {
  height: 18px; width: 100%;
  background:
    linear-gradient(var(--g-rojo), var(--g-rojo)) left bottom / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--g-ink) 0 2px, transparent 2px 10px) left bottom / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, var(--g-ink) 0 2px, transparent 2px 50px) left bottom / 100% 16px no-repeat;
  opacity: .9;
}

/* ═══ GUÍA DE TALLAS ═══════════════════════════════════════════════════════════════════════ */

/* Héroe de tallas: foto arriba en celular (Klarna), a la derecha en escritorio */
#main-content#main-content[data-guia="tallaje"] .gx-hero__foto { order: -1; margin: 0 auto; width: 100%; max-width: 520px; background: var(--lamina); border-radius: 20px; overflow: hidden; aspect-ratio: 1000 / 932; }
#main-content#main-content[data-guia="tallaje"] .gx-hero__foto img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 900px) {
  #main-content#main-content[data-guia="tallaje"] .gx-hero { grid-template-columns: minmax(0, 560px) minmax(0, 520px); justify-content: center; column-gap: 56px; align-items: center; padding-block: 32px; }
  #main-content#main-content[data-guia="tallaje"] .gx-hero__foto { order: 0; width: 100%; max-width: none; justify-self: stretch; border-radius: 24px; }
}

/* 1 · ¿Cómo me tomo las tallas? */
#main-content#main-content[data-guia] .gx-medir { display: grid; gap: 24px; }
#main-content#main-content[data-guia] .gx-medir__texto { display: grid; gap: 20px; align-content: center; }
#main-content#main-content[data-guia] .gx-regla-oro { font-family: var(--g-body); font-size: clamp(18px, 4.6vw, 21px); line-height: 1.4; color: var(--g-ink2); max-width: 30ch; }
#main-content#main-content[data-guia] .gx-regla-oro strong { color: var(--g-ink); }
#main-content#main-content[data-guia] .gx-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; margin-inline: auto; }
#main-content#main-content[data-guia] .gx-foto { margin: 0; display: grid; gap: 12px; align-content: start; }
#main-content#main-content[data-guia] .gx-foto__img { margin: 0; background: var(--lamina); border-radius: 20px; overflow: hidden; aspect-ratio: 2 / 3; }
#main-content#main-content[data-guia] .gx-foto__img img { width: 100%; height: 100%; object-fit: contain; }
#main-content#main-content[data-guia] .gx-foto__pie { display: grid; gap: 4px; }
#main-content#main-content[data-guia] .gx-foto__nombre { font-family: var(--g-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.1; color: var(--g-ink); }
#main-content#main-content[data-guia] .gx-foto__prenda { font-family: var(--g-body); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--g-rojo-texto, #B8000E); }
#main-content#main-content[data-guia] .gx-foto__linea { font-family: var(--g-body); font-size: 16px; line-height: 1.4; color: var(--g-ink2); }
@media (min-width: 900px) {
  #main-content#main-content[data-guia] .gx-medir { grid-template-columns: minmax(0, 440px) minmax(0, 580px); justify-content: center; gap: 72px; align-items: center; }
  #main-content#main-content[data-guia] .gx-fotos { gap: 24px; width: 100%; }
  #main-content#main-content[data-guia] .gx-foto__linea { font-size: 17px; }
}

/* 2 · ¿Cuáles son las tallas? — chips sobre la cinta */
#main-content#main-content[data-guia] .gx-tallas { display: grid; gap: 22px; }
#main-content#main-content[data-guia] .gx-grupo { display: grid; gap: 12px; }
#main-content#main-content[data-guia] .gx-grupo__rotulo { font-family: var(--g-body); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-ink2); }
#main-content#main-content[data-guia] .gx-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
#main-content#main-content[data-guia] .gx-chips li {
  min-width: 48px; height: 48px; padding: 0 10px; display: grid; place-items: center;
  background: #fff; border-radius: 14px;
  font-family: var(--g-display); font-weight: 400; font-synthesis: none; font-size: 22px; line-height: 1; color: var(--g-ink);
}
#main-content#main-content[data-guia] .gx-notas { display: grid; gap: 0; margin-top: 4px; }
#main-content#main-content[data-guia] .gx-nota { padding-block: 14px; border-top: 1px solid var(--g-linea); font-family: var(--g-body); font-size: 17px; color: var(--g-ink2); }
#main-content#main-content[data-guia] .gx-nota strong { color: var(--g-ink); font-weight: 700; }
@media (min-width: 900px) {
  #main-content#main-content[data-guia] .gx-tallas { gap: 32px; }
  #main-content#main-content[data-guia] .gx-grupo { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 24px; }
  #main-content#main-content[data-guia] .gx-chips { gap: 10px; }
  #main-content#main-content[data-guia] .gx-chips li { min-width: 64px; height: 64px; border-radius: 18px; font-size: 28px; }
  #main-content#main-content[data-guia] .gx-notas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 12px; }
  #main-content#main-content[data-guia] .gx-nota { font-size: 18px; }
}

/* 3 · ¿Cuál es la tabla? — las dos tablas a la vista */
#main-content#main-content[data-guia] .gx-bloque-tabla { display: grid; gap: 24px; }
#main-content#main-content[data-guia] .gx-bloque-tabla__titulo { display: grid; gap: 8px; }
#main-content#main-content[data-guia] .gx-tabla-nota { font-family: var(--g-body); font-size: 17px; color: var(--g-ink2); }
#main-content#main-content[data-guia] .gx-tablas { display: grid; gap: 32px; }
#main-content#main-content[data-guia] .gx-tabla { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
#main-content#main-content[data-guia] .gx-tabla caption { caption-side: top; text-align: left; padding: 0 0 12px; font-family: var(--g-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; font-size: clamp(22px, 6vw, 28px); line-height: 1.1; color: var(--g-ink); }
#main-content#main-content[data-guia] .gx-tabla thead th {
  background: var(--g-negro); color: #fff; text-align: center; vertical-align: middle;
  font-family: var(--g-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: .02em;
}
#main-content#main-content[data-guia] .gx-tabla thead th { font-size: 14px !important; }
#main-content#main-content[data-guia] .gx-tabla thead tr:first-child th { padding: 12px 4px 8px; font-size: 18px; }
#main-content#main-content[data-guia] .gx-tabla thead tr:first-child th { font-size: 19px !important; }
#main-content#main-content[data-guia] .gx-tabla thead tr:first-child th:first-child { border-top-left-radius: 14px; }
#main-content#main-content[data-guia] .gx-tabla thead tr:first-child th:last-child { border-top-right-radius: 14px; }
#main-content#main-content[data-guia] .gx-tabla thead tr:first-child th[colspan] { border-bottom: 1px solid rgba(255, 255, 255, .22); }
#main-content#main-content[data-guia] .gx-tabla thead tr:last-child th { padding: 8px 4px 12px; font-family: var(--g-body); font-weight: 600; letter-spacing: .03em; color: rgba(255, 255, 255, .8); }
#main-content#main-content[data-guia] .gx-tabla thead th[rowspan] { font-size: 16px; }
#main-content#main-content[data-guia] .gx-tabla tbody th, #main-content#main-content[data-guia] .gx-tabla tbody td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--g-linea); height: 42px; }
#main-content#main-content[data-guia] .gx-tabla tbody td { font-family: var(--g-body); font-size: 16px !important; font-weight: 500; white-space: nowrap; color: var(--g-ink); }
#main-content#main-content[data-guia] .gx-tabla tbody th {
  font-family: var(--g-display); font-weight: 400; font-synthesis: none; font-size: 22px !important; text-transform: uppercase;
  background: #EFEDE9; color: var(--g-ink); border-right: 3px solid var(--g-rojo);
}
#main-content#main-content[data-guia] .gx-tabla tbody tr:nth-child(even) td { background: #F7F6F4; }
#main-content#main-content[data-guia] .gx-tabla tbody tr:last-child :is(th, td) { border-bottom: 0; }
#main-content#main-content[data-guia] .gx-tabla tbody tr:last-child th { border-bottom-left-radius: 14px; }
#main-content#main-content[data-guia] .gx-tabla tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; }
@media (min-width: 900px) {
  #main-content#main-content[data-guia] .gx-tablas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  #main-content#main-content[data-guia] .gx-tabla tbody th, #main-content#main-content[data-guia] .gx-tabla tbody td { height: 42px; padding-block: 6px; }
  #main-content#main-content[data-guia] .gx-tabla tbody td { font-size: 17px !important; }
  #main-content#main-content[data-guia] .gx-tabla thead tr:first-child th { font-size: 22px !important; }
}

/* ── 04-oct · Tres tablas: hombre, mujer y niños ──────────────────────────────────────────
   Carlitos: «la tabla de mujer y hombre separada, más bonita de ver po rey». Antes eran una
   sola tabla de cinco columnas (Talla · Hombre pecho/cadera · Mujer pecho/cadera): en celular
   obligaba a leer de corrido y a contar columnas para encontrar la propia. Ahora hay una tabla
   por persona y se lee de arriba abajo sin cruzar datos ajenos. Los centímetros no cambiaron.

   Sólo aplica a la guía de tallas (`data-guia="tallaje"`): la de diseño comparte esta hoja y
   no tiene tablas, pero si algún día las tiene, no hereda esta maqueta.

   En celular van una debajo de otra: a 390px el contenido mide ~342px y dos tablas de tres
   columnas no caben sin partir las cifras («102 cm» con `white-space: nowrap` se desbordaría).
   Desde 900px, hombre y mujer comparten fila —son idénticas, así que sus filas quedan
   alineadas la una con la otra— y los niños van debajo en la misma columna, con el mismo
   ancho que las otras dos: tres piezas iguales (592px medidos a 1440) en vez de una tabla
   ancha huérfana. Especificidad: repite los dos `#main-content` como el resto de la hoja,
   así que gana por orden de aparición y no necesita `!important`. */
#main-content#main-content[data-guia="tallaje"] .gx-tablas { gap: 40px; }
@media (min-width: 900px) {
  #main-content#main-content[data-guia="tallaje"] .gx-tablas {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; align-items: start;
  }
}

/* ── Preguntas (abiertas, nada escondido) ────────────────────────────────────────────────── */
#main-content#main-content[data-guia] .gx-faq { display: grid; gap: 28px; }
#main-content#main-content[data-guia] .gx-qa { padding-block: 16px; border-top: 1px solid #D9D5CF; display: grid; gap: 6px; }
#main-content#main-content[data-guia] .gx-qa:last-child { border-bottom: 1px solid #D9D5CF; }
#main-content#main-content[data-guia] .gx-qa h3 { font-size: clamp(19px, 5vw, 22px); line-height: 1.25; font-weight: 700 !important; color: var(--g-ink); }
#main-content#main-content[data-guia] .gx-qa p { font-family: var(--g-body); font-size: 17px; line-height: 1.5; color: var(--g-ink2); }
#main-content#main-content[data-guia] .gx-qa p strong { color: var(--g-ink); }
@media (min-width: 900px) {
  #main-content#main-content[data-guia] .gx-faq { grid-template-columns: minmax(0, 420px) minmax(0, 700px); justify-content: center; gap: 72px; align-items: start; }
  #main-content#main-content[data-guia] .gx-qa:first-child { margin-top: 0; }
}

/* ── Cierre: un solo botón ──────────────────────────────────────────────────────────────── */
#main-content#main-content[data-guia] .gx-cierre-fondo { padding: 0 12px 12px; background: var(--g-gris); }
#main-content#main-content[data-guia] .gx-cierre {
  display: grid; justify-items: center; gap: 22px; text-align: center;
  padding: clamp(36px, 7vw, 72px) 24px; background: var(--g-negro); color: #fff; border-radius: var(--g-r);
}
#main-content#main-content[data-guia] .gx-cierre h2 { color: #fff; max-width: 20ch; font-size: clamp(28px, 7.6vw, 34px); }
@media (min-width: 900px) { #main-content#main-content[data-guia] .gx-cierre h2 { font-size: clamp(38px, 3.4vw, 50px); } }
#main-content#main-content[data-guia] .gx-cierre__oferta { font-family: var(--g-body); font-size: 18px; line-height: 1.4; color: rgba(255, 255, 255, .8); max-width: 34ch; }
#main-content#main-content[data-guia] .gx-cierre .gx-acciones { justify-content: center; }
@media (min-width: 900px) { #main-content#main-content[data-guia] .gx-cierre-fondo { padding: 0 16px 16px; } }

/* ═══ GUÍA DE DISEÑO ═══════════════════════════════════════════════════════════════════════ */

/* Héroe: «Esto hay que enviar» es lo más importante de la página */
#main-content#main-content[data-guia="diseno"] .gx-hero { --lamina: var(--g-negro); padding-bottom: 28px; }
#main-content#main-content[data-guia="diseno"] .gx-hero__acciones { display: grid; gap: 10px; padding-inline: 8px; }
#main-content#main-content[data-guia="diseno"] .gx-hero__nota { font-family: var(--g-body); font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
#main-content#main-content[data-guia="diseno"] .gx-hero .gx-button--secondary { color: #fff; border-color: rgba(255, 255, 255, .5); }
/* 04-oct (Carlitos): «agregar imágenes ejemplificativas… que el ejemplo sea gráfico, pero basado en mis
   mismos diseños». Cada uno de los cinco puntos lleva al lado su ejemplo, hecho con sus planos y mockups
   (assets/images/guia-ejemplos). El ejemplo ILUSTRA la regla que está escrita justo al lado, así que va
   decorativo (alt="") y no la repite en voz alta. En celular mide 64 px y en escritorio 96: se reconoce el
   gesto (tres colores, el logo suelto, frente y espalda aparte) sin robarle ancho al texto. */
#main-content#main-content[data-guia="diseno"] .gx-enviar { list-style: none; padding: 0 8px; margin: 0; display: grid; }
#main-content#main-content[data-guia="diseno"] .gx-enviar li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding-block: 14px; border-top: 1px solid rgba(255, 255, 255, .16); }
#main-content#main-content[data-guia="diseno"] .gx-enviar li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
/* El ejemplo gráfico tiene que LEERSE. A 64 px el mosaico de teselas (el logo, el arte del
   águila, la manga con el nombre, la bandera) era una mancha gris: Carlitos lo describió como
   «imágenes cortadas como si lo hubiese hecho un niño». Ahora, en celular, el ejemplo baja a su
   propio renglón y ocupa el ancho disponible hasta 260 px; en escritorio va en una columna de
   200 px. Las imágenes ya venían con object-fit: contain, así que se agrandan SIN recortar nada. */
#main-content#main-content[data-guia="diseno"] .gx-enviar__ejemplo { grid-column: 1 / -1; width: 100%; max-width: 260px; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10); }
#main-content#main-content[data-guia="diseno"] .gx-enviar__ejemplo img { width: 100%; height: 100%; object-fit: contain; }
#main-content#main-content[data-guia="diseno"] .gx-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(226, 6, 19, .18); color: var(--mk-rojo-claro, #FF5A64); }
#main-content#main-content[data-guia="diseno"] .gx-ico svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#main-content#main-content[data-guia="diseno"] .gx-enviar__titulo { display: block; font-family: var(--g-body); font-size: 18px; font-weight: 700; line-height: 1.25; color: #fff; }
#main-content#main-content[data-guia="diseno"] .gx-enviar__linea { display: block; margin-top: 2px; font-family: var(--g-body); font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .76); }
@media (min-width: 900px) {
  #main-content#main-content[data-guia="diseno"] .gx-hero { grid-template-columns: minmax(0, 460px) minmax(0, 600px); justify-content: center; grid-template-areas: "texto lista" "acciones lista"; align-items: center; column-gap: 72px; row-gap: 28px; padding-block: 48px; }
  #main-content#main-content[data-guia="diseno"] .gx-hero__texto { grid-area: texto; align-self: end; }
  #main-content#main-content[data-guia="diseno"] .gx-enviar { grid-area: lista; padding: 0; }
  #main-content#main-content[data-guia="diseno"] .gx-hero__acciones { grid-area: acciones; align-self: start; padding: 0; }
  #main-content#main-content[data-guia="diseno"] .gx-enviar li { padding-block: 18px; gap: 20px; grid-template-columns: 48px minmax(0, 1fr) 200px; }
  #main-content#main-content[data-guia="diseno"] .gx-ico { width: 48px; height: 48px; }
  #main-content#main-content[data-guia="diseno"] .gx-enviar__ejemplo { grid-column: auto; width: 200px; max-width: none; height: 200px; border-radius: 16px; }
  #main-content#main-content[data-guia="diseno"] .gx-enviar__titulo { font-size: 20px; }
  #main-content#main-content[data-guia="diseno"] .gx-enviar__linea { font-size: 17px; }
}

/* ── Cómo lo trabajamos: cuatro renglones de un mismo cuaderno ────────────────────────────────
   04-oct (Carlitos): «la de procesos podría mejorar, esta era la sección que quería que copiáramos».
   Antes eran cuatro columnas con un círculo negro numerado y una línea punteada roja que las unía.
   Ahora cada paso es un RENGLÓN: número grande en rojo, el título enorme en Anton y su línea de texto,
   y a la derecha el ejemplo gráfico de ese paso (sus propios planos y mockups, no dibujos genéricos).
   Una hairline separa un renglón del siguiente; la puntada roja se fue con el layout viejo y el rojo
   queda en el número, que es donde ahora marca.

   El movimiento que se copia de la referencia: el renglón que cruza el medio de la pantalla queda
   encendido y los demás atenuados. Se atenúa SOLO el número y el título —que son grandes, así que a
   .42 todavía pasan el 3:1 de texto grande— nunca la línea de texto ni el ejemplo, donde sí se perdería
   legibilidad. El atributo data-pasos-vivo lo pone el script de la página: sin JavaScript, o con
   movimiento reducido, no hay atenuación ninguna y los cuatro pasos se leen igual de fuerte. */
#main-content#main-content[data-guia="diseno"] .gx-pasos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; }
#main-content#main-content[data-guia="diseno"] .gx-paso {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 130px; gap: 4px 12px; align-items: center;
  padding-block: 16px; border-top: 1px solid var(--g-linea);
}
#main-content#main-content[data-guia="diseno"] .gx-paso:last-child { border-bottom: 1px solid var(--g-linea); }
#main-content#main-content[data-guia="diseno"] .gx-paso__texto { display: grid; gap: 2px; }
#main-content#main-content[data-guia="diseno"] .gx-paso__n { font-family: var(--g-display); font-weight: 400; font-synthesis: none; font-size: 26px; line-height: 1; color: var(--g-rojo); font-variant-numeric: tabular-nums; }
#main-content#main-content[data-guia="diseno"] h3.gx-paso__nombre { font-family: var(--g-display) !important; font-weight: 400 !important; font-synthesis: none; text-transform: uppercase !important; letter-spacing: .004em !important; font-size: clamp(22px, 6.4vw, 28px); line-height: 1.06 !important; color: var(--g-ink); }
#main-content#main-content[data-guia="diseno"] .gx-paso__linea { font-family: var(--g-body); font-size: 16px; line-height: 1.4; color: var(--g-ink2); }
#main-content#main-content[data-guia="diseno"] .gx-paso__fig { margin: 0; width: 130px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #F7F6F4; }
#main-content#main-content[data-guia="diseno"] .gx-paso__fig img { width: 100%; height: 100%; object-fit: contain; }

/* el renglón del medio queda encendido; el resto, atenuado. El TÍTULO es contenido: a .42 daba
   2,73:1 sobre el papel, por debajo del 3:1 que pide un texto grande, así que sube a .52 (medido
   por píxel: 3,60:1) y el encendido/apagado de la referencia se conserva igual. El NÚMERO se queda
   más apagado a propósito: es adorno —la posición y el título ya dicen lo mismo— y así el renglón
   vivo sigue destacando. Los dos llevan la misma transición para que atenúen juntos. */
#main-content#main-content[data-guia="diseno"] .gx-pasos[data-pasos-vivo] :is(.gx-paso__n, .gx-paso__nombre) { transition: opacity .5s var(--g-curva); }
#main-content#main-content[data-guia="diseno"] .gx-pasos[data-pasos-vivo] .gx-paso__nombre { opacity: .52; }
#main-content#main-content[data-guia="diseno"] .gx-pasos[data-pasos-vivo] .gx-paso__n { opacity: .42; }
#main-content#main-content[data-guia="diseno"] .gx-pasos[data-pasos-vivo] .gx-paso--aqui :is(.gx-paso__n, .gx-paso__nombre) { opacity: 1; }

@media (min-width: 900px) {
  /* La sección se angosta a 1000 px (solo ella: --g-max se pisa en el section y .gx-wrap lo lee).
     Medido a 1440 con el ancho completo: entre el final de la línea de texto (x≈580) y la figura
     (x≈1150) quedaban 570 px de nada y el renglón se veía roto. Angostando y agrandando el título y la
     figura, el hueco baja a ~200 px, que es el aire que la referencia deja a propósito. */
  #como-trabajamos { --g-max: 1000px; }
  #main-content#main-content[data-guia="diseno"] .gx-pasos { margin-top: 36px; }
  #main-content#main-content[data-guia="diseno"] .gx-paso { grid-template-columns: 84px minmax(0, 1fr) 240px; gap: 12px 40px; padding-block: 34px; }
  #main-content#main-content[data-guia="diseno"] .gx-paso__texto { gap: 8px; }
  #main-content#main-content[data-guia="diseno"] .gx-paso__n { font-size: 52px; }
  #main-content#main-content[data-guia="diseno"] h3.gx-paso__nombre { font-size: clamp(38px, 4.2vw, 62px); }
  #main-content#main-content[data-guia="diseno"] .gx-paso__linea { font-size: 18px; max-width: 52ch; }
  #main-content#main-content[data-guia="diseno"] .gx-paso__fig { width: 240px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #main-content#main-content[data-guia="diseno"] .gx-pasos[data-pasos-vivo] :is(.gx-paso__n, .gx-paso__nombre) { opacity: 1; transition: none; }
}

/* De referencia a prenda: una sola imagen grande que llena su panel (sin lámina visible) */
#main-content#main-content[data-guia="diseno"] .gx-ref { display: grid; gap: 20px; }
#main-content#main-content[data-guia="diseno"] .gx-ref__img { margin: 0; border-radius: 20px; overflow: hidden; background: #3A3836; aspect-ratio: 1600 / 894; }
#main-content#main-content[data-guia="diseno"] .gx-ref__img img { width: 100%; height: 100%; object-fit: contain; }
#main-content#main-content[data-guia="diseno"] .gx-ref__linea { font-family: var(--g-body); font-size: 18px; line-height: 1.45; color: var(--g-ink2); max-width: 46ch; }
@media (min-width: 900px) { #main-content#main-content[data-guia="diseno"] .gx-ref__img { border-radius: 28px; } #main-content#main-content[data-guia="diseno"] .gx-ref { gap: 28px; } }

/* ── Pie ────────────────────────────────────────────────────────────────────────────────── */
.gx-pie { background: var(--mk-negro, #141312); color: rgba(255, 255, 255, .78); padding: 36px 24px 44px; display: grid; justify-items: center; gap: 14px; text-align: center; font-family: var(--mk-body, 'Jost', sans-serif); }
.gx-pie img { width: auto; height: 40px; object-fit: contain; }
.gx-pie p { margin: 0; font-size: 16px; line-height: 1.4; }

/* ── Interlineado ────────────────────────────────────────────────────────────────────────────
   ensutex-fuentes.css fuerza `line-height: 1.6 !important` a todo p/li de main#main-content. Para frases cortas de una
   o dos líneas es demasiado: 1,45 (≥ 1,4 se lee bien y se ve compacto). Los chips (li) van a 1. */
#main-content#main-content[data-guia] :is(p, li) { line-height: 1.45 !important; }
#main-content#main-content[data-guia] .gx-lead { line-height: 1.42 !important; }
#main-content#main-content[data-guia] .gx-chips li { line-height: 1 !important; }
#main-content#main-content[data-guia] .gx-qa h3 { line-height: 1.25 !important; }

@media print { .gx-hero .gx-item { animation: none; } }

/* ── Los ejemplos entran como láminas: marco visible y subida escalonada ─────────────────────
   04-oct (Carlitos): «la forma en cómo estaban puestas sin ningún marquito, o animaciones, la
   experiencia es lo que importa». Las imágenes NO se cambian: se enmarcan y se animan.
   Antes el marco era un filo al 10 % que no se leía, y las cinco del héroe no tenían ninguna
   entrada —el héroe queda fuera del motor sube.js, así que nada las animaba—. Se reutiliza el
   lenguaje que la guía ya usa para sus piezas: el keyframe gx-entra y el retardo por posición. */

@keyframes gx-entra-fig {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* Marco: filo oscuro por dentro y sombra que despega la lámina del papel. */
#main-content#main-content[data-guia="diseno"] :is(.gx-enviar__ejemplo, .gx-paso__fig) {
  box-shadow: inset 0 0 0 1px rgba(21, 20, 19, .18), 0 12px 26px -14px rgba(21, 20, 19, .40);
}
/* En el héroe, que es oscuro, el filo que se lee es el claro. */
#main-content#main-content[data-guia="diseno"] .gx-enviar__ejemplo {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 16px 32px -16px rgba(0, 0, 0, .70);
}

/* Las cinco del héroe entran escalonadas de arriba abajo. */
#main-content#main-content[data-guia="diseno"] .gx-hero .gx-enviar__ejemplo {
  animation: gx-entra-fig .62s var(--g-curva) both;
}
#main-content#main-content[data-guia="diseno"] .gx-enviar li:nth-child(1) .gx-enviar__ejemplo { animation-delay: .10s; }
#main-content#main-content[data-guia="diseno"] .gx-enviar li:nth-child(2) .gx-enviar__ejemplo { animation-delay: .18s; }
#main-content#main-content[data-guia="diseno"] .gx-enviar li:nth-child(3) .gx-enviar__ejemplo { animation-delay: .26s; }
#main-content#main-content[data-guia="diseno"] .gx-enviar li:nth-child(4) .gx-enviar__ejemplo { animation-delay: .34s; }
#main-content#main-content[data-guia="diseno"] .gx-enviar li:nth-child(5) .gx-enviar__ejemplo { animation-delay: .42s; }

/* Las cuatro figuras de los pasos entran cuando su sección asoma: mismo enganche que el resto. */
html.sube-js #main-content#main-content[data-guia] #como-trabajamos:not(.sube--in) .gx-paso__fig {
  opacity: 0; transform: translate3d(0, 16px, 0) scale(.97);
}
html.sube-js #main-content#main-content[data-guia] #como-trabajamos .gx-paso__fig {
  transition: opacity .5s var(--g-curva), transform .62s var(--g-curva);
}

/* El marco AVANZA con el scroll (04-oct, Carlitos: «la idea es que el marquito avance con
   animaciones al scroll según lo que se necesita, así como la sección de proceso»). El ejemplo
   cuyo renglón cruza el medio lleva el filo a pleno y su sombra; los demás quedan con un filo
   tenue y sin sombra. Se mueve SOLO el marco: la imagen nunca cambia de opacidad, que es la
   regla que ya tenía esta página (el texto y el ejemplo no se atenúan). */
#main-content#main-content[data-guia="diseno"] .gx-pasos[data-pasos-vivo] .gx-paso__fig,
#main-content#main-content[data-guia="diseno"] .gx-enviar[data-ejemplos-vivo] .gx-enviar__ejemplo {
  transition: box-shadow .5s var(--g-curva), transform .55s var(--g-curva);
  box-shadow: inset 0 0 0 1px rgba(21, 20, 19, .13), 0 4px 10px -8px rgba(21, 20, 19, .18);
}
#main-content#main-content[data-guia="diseno"] .gx-enviar[data-ejemplos-vivo] .gx-enviar__ejemplo {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
/* El que está en foco: filo a pleno, sombra que lo levanta y un pelo de subida. */
#main-content#main-content[data-guia="diseno"] .gx-pasos[data-pasos-vivo] .gx-paso--aqui .gx-paso__fig {
  box-shadow: inset 0 0 0 2px rgba(21, 20, 19, .58), 0 20px 38px -16px rgba(21, 20, 19, .58);
  transform: translate3d(0, -5px, 0);
}
#main-content#main-content[data-guia="diseno"] .gx-enviar[data-ejemplos-vivo] .gx-ejemplo--aqui .gx-enviar__ejemplo {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .62), 0 22px 40px -18px rgba(0, 0, 0, .85);
  transform: translate3d(0, -5px, 0);
}

@media (prefers-reduced-motion: reduce) {
  #main-content#main-content[data-guia="diseno"] .gx-hero .gx-enviar__ejemplo { animation: none; }
  html.sube-js #main-content#main-content[data-guia] #como-trabajamos .gx-paso__fig {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}