/* «Lo que encuentra» (galeria-defectos.js, 21-10): tarjetas que se deslizan, cada una con su OK y su NG dibujados.
   Fondo claro; prefijo gd-. Sin JavaScript: desliza con scroll-snap. Y (29-10) «Programación con IA», prefijo pg-, al final. */
section.gd { text-align: left; padding-left: 0; padding-right: 0; padding-bottom: 72px; }   /* la galería va de borde a borde */
.gd-cab, .gd-sub, .gd-fuente { width: min(var(--b-ancho, 980px), 100%); margin-left: auto; margin-right: auto; box-sizing: border-box; padding: 0 22px; }
.gd-cab h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; color: var(--tinta, #15283D); margin: 0; }
.gd-vp { background: var(--banda, #F5F5F7); padding-top: 72px; }   /* en la ficha estrella (equipo-v-producto.js) */
.gd-intro { margin: 12px 0 0; max-width: 640px; font-size: 19px; line-height: 1.45; color: var(--gris, #5E6E81); }
.gd-pista { list-style: none; margin: 28px 0 0; padding: 4px max(22px, calc((100% - var(--b-ancho, 980px)) / 2 + 22px)) 12px; display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(22px, calc((100% - var(--b-ancho, 980px)) / 2 + 22px)); scrollbar-width: thin; }
.gd-pista:focus-visible { outline: 2px solid var(--azul, #004C97); outline-offset: -2px; }
.gd-tarjeta { flex: 0 0 300px; scroll-snap-align: start; background: #fff; border-radius: 22px; padding: 16px 16px 18px; box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(21, 40, 61, .04); }
.gd-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gd-par figure { margin: 0; position: relative; }
.gd-par svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.gd-par figcaption { position: absolute; left: 6px; top: 6px; font: 700 10.5px/1 var(--b-letra, Inter, sans-serif); letter-spacing: .04em; color: #fff;
  border-radius: 999px; padding: 4px 7px; }
.gd-ok { background: #2E7BD6; }
.gd-ng { background: #E5484D; }
.gd-tarjeta h3 { margin: 14px 0 0; font-size: 17px; line-height: 1.25; font-weight: 600; color: var(--tinta, #15283D); }
.gd-tarjeta p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--gris, #5E6E81); }
.gd-sub { margin-top: 36px; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--tinta, #15283D); }
.gd-pines .gd-tarjeta { flex-basis: 268px; }
.gd-pines .gd-tarjeta h3 { margin-top: 10px; font-size: 15px; }
.gd-fuente { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--gris, #5E6E81); }   /* 21-10: en el gris de la web, no en el clarito (--gris2 daba 3,2:1; --gris da 5,2:1 sobre blanco y 4,9:1 sobre el gris de las bandas: AA pide 4,5:1) */
@media (max-width: 760px) {
  .gd { padding-bottom: 56px; }
  .gd-intro { font-size: 17px; }
  .gd-pista { padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px; gap: 12px; }
  .gd-cab, .gd-sub, .gd-fuente { padding: 0 16px; }
  .gd-tarjeta { flex-basis: 78%; }
  .gd-pines .gd-tarjeta { flex-basis: 62%; }
}
@media (prefers-reduced-motion: reduce) { .gd-pista { scroll-behavior: auto; } }

/* «Programación con IA» (29-10): una sección propia en las fichas de Maker Ray. Cabecera a la izquierda, como «Lo que encuentra»;
   la cifra del folleto en grande (si la hay) y los pasos en tarjetas grises. Cada dato, con su folleto y su página (pg-f). */
section.pg { text-align: left; }
.pg-cab, .pg-cifras, .pg-nota, .pg-pasos { width: min(var(--b-ancho, 980px), 100%); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.pg-cab .b-ojo { margin-bottom: 8px; }
.pg-cab h2 { margin: 0; }
.pg-intro { margin: 14px 0 0; max-width: 660px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; letter-spacing: -.012em; color: var(--gris, #5E6E81); }
.pg-cifras { display: grid; grid-template-columns: repeat(var(--k, 1), minmax(0, max-content)); gap: 24px 64px; margin-top: clamp(32px, 4vw, 48px); }
.pg-cifra { max-width: 420px; }
.pg-num { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; color: var(--azul, #004C97); }
.pg-num b { font-size: clamp(64px, 8vw, 104px); line-height: .95; font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pg-num small { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; }
.pg-num .pg-pre { flex-basis: 100%; margin-bottom: 4px; font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--gris, #5E6E81); }
.pg-dato { margin: 10px 0 0; font-size: 19px; line-height: 1.35; font-weight: 500; color: var(--tinta, #15283D); }
.pg-f { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--gris, #5E6E81); }   /* el gris de la web: 5,2:1 sobre blanco y 4,9:1 sobre el gris de las tarjetas */
.pg-nota { margin-top: 14px; max-width: 680px; font-size: 13px; line-height: 1.45; color: var(--gris, #5E6E81); }
.pg-pasos { list-style: none; padding: 0; margin-top: clamp(32px, 4vw, 48px); margin-bottom: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; counter-reset: none; }
.pg-pasos li { display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 24px; background: var(--b-gris, #F5F7FA); }
.b-banda.gris .pg-pasos li, .gd-vp + .pg .pg-pasos li { background: #fff; }
.pg-n { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--azul, #004C97); }
.pg-pasos h3 { margin: 10px 0 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; color: var(--tinta, #15283D); }
.pg-pasos li > p:not(.pg-f) { margin: 8px 0 0; font-size: 16px; line-height: 1.47; color: var(--gris, #5E6E81); }
.pg-pasos .pg-f { margin-top: auto; padding-top: 14px; }
.pg-vp { padding: clamp(64px, 8vw, 104px) 22px; background: #fff; }   /* en la ficha estrella (equipo-v-producto.js) */
@media (max-width: 760px) {
  .pg-cifras { grid-template-columns: 1fr; gap: 28px; }
  .pg-pasos { grid-template-columns: 1fr; gap: 12px; }
  .pg-pasos li { padding: 22px 20px 18px; }
  .pg-vp { padding: 56px 16px; }
}