/* ==========================================================================
   Stephanie Cacheo — Sección "Diseño con IA"

   Sólo lo que repite entre las páginas de /ai/. El resto se reusa de
   site.css y case-study.css.

   El salvia ya estaba reservado en la guía visual para hablar de IA. Aquí no
   se inventa un lenguaje nuevo, se extiende ese.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .decision — la unidad de credibilidad de la sección

   Tres pasos fijos: Le pedí → Me devolvió → Yo decidí. Los dos primeros van
   en salvia (la capa de IA, ambiente) y el tercero en carbón con más peso
   (la decisión, la señal). Es el único lugar del sistema donde rompo a
   propósito la regla de "mismo peso visual": aquí el desbalance ES el
   argumento.
   -------------------------------------------------------------------------- */
.decision{
  background:var(--sage-bg); border-left:3px solid var(--sage);
  border-radius:0 8px 8px 0; padding:18px 22px; margin:26px 0;
  max-width:calc(var(--medida) + 40px);
}
.decision > .eyebrow{
  font-family:'Oswald',sans-serif;
  font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--sage-text); margin:0 0 14px;
}
.decision-step{
  display:grid; grid-template-columns:92px 1fr; gap:16px;
  padding:12px 0; border-top:0.5px solid rgba(122,139,102,0.35);
}
.decision-step:first-of-type{ border-top:none; padding-top:0; }
.decision-step:last-of-type{ padding-bottom:0; }
.decision-step .label{
  font-size:11px; letter-spacing:0.04em; text-transform:uppercase; font-weight:600;
  color:var(--sage-text); margin:0; line-height:1.5;
}
.decision-step p:not(.label){ margin:0; font-size:14px; color:var(--sage-text); max-width:none; }
.decision-step.mine .label{ color:var(--carbon); }
.decision-step.mine p:not(.label){ color:var(--carbon); font-weight:500; }

/* --------------------------------------------------------------------------
   .steps — el proceso completo, comprimido

   Cinco pasos de una línea cada uno. Esta página trata del sistema visual,
   no del proceso: el proceso tiene que estar, pero no puede ocupar la página.
   -------------------------------------------------------------------------- */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(168px,1fr));
  gap:12px; margin:8px 0 0;
}
.step{
  background:var(--card); border:0.5px solid var(--border); border-radius:8px;
  padding:16px 18px;
}
.step .n{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--clay-dark);
  margin:0 0 7px; max-width:none;
}
.step h3{ font-size:14px; font-weight:600; margin:0 0 5px; max-width:none; }
.step p{ font-size:13px; color:#57503f; margin:0; max-width:none; line-height:1.5; }
/* El paso sin IA se marca distinto: es información, no decoración. */
.step.solo{ border-style:dashed; }
.step.solo .n{ color:var(--muted); }

/* --------------------------------------------------------------------------
   Paleta

   Cada acento lleva su ratio de contraste medido. Un color de marca no es un
   token hasta que sabes en qué se puede usar.
   -------------------------------------------------------------------------- */
.palette{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(158px,1fr));
  gap:12px; margin:18px 0 10px;
}
.swatch-card{ background:#fff; border:0.5px solid var(--border); border-radius:8px; overflow:hidden; }
.swatch-card .chip{ display:block; height:58px; }
.swatch-card .meta{ padding:12px 14px; }
.swatch-card .role{ font-size:13px; font-weight:600; margin:0 0 2px; max-width:none; }
.swatch-card .hex{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; color:var(--muted); margin:0 0 7px; max-width:none;
}
.swatch-card .job{ font-size:12.5px; color:#57503f; margin:0 0 8px; max-width:none; line-height:1.45; }
.swatch-card .ratio{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; margin:0; max-width:none;
  display:inline-flex; align-items:center; gap:5px;
}
.swatch-card .ratio::before{
  content:""; width:6px; height:6px; border-radius:999px; background:var(--sage);
}
.swatch-card .ratio.fill::before{ background:var(--clay); }
.swatch-card .ratio.fill{ color:var(--muted); }

/* --------------------------------------------------------------------------
   Escala tipográfica — renderizada, no descrita
   -------------------------------------------------------------------------- */
.type-scale{ margin:18px 0 10px; border-top:0.5px solid var(--border); }
.ts-row{
  display:grid; grid-template-columns:1fr 172px; gap:24px;
  align-items:baseline; padding:16px 0; border-bottom:0.5px solid var(--border);
}
.ts-row .sample{ margin:0; max-width:none; }
.ts-row .spec{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11.5px; color:var(--muted); margin:0; max-width:none; text-align:right;
  line-height:1.6;
}
.ts-display{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:38px; line-height:1.1; letter-spacing:-0.3px;
}
.ts-h2{ font-family:'Inter',sans-serif; font-weight:600; font-size:30px; line-height:1.25; }
.ts-h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:21px; }
.ts-h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:17px; }
.ts-body{ font-size:16px; line-height:1.65; }
.ts-small{ font-size:14px; color:#57503f; }
.ts-caption{ font-size:13px; color:var(--muted); font-style:italic; }
.ts-label{
  font-size:11px; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--muted);
}

/* --------------------------------------------------------------------------
   Ritmo vertical

   El sistema no tiene una escala de espaciado regular y no la finjo. Lo que
   sí tiene es una regla de agrupamiento: adentro siempre menos que afuera.
   -------------------------------------------------------------------------- */
.rhythm{ margin:18px 0 10px; }
.rh-row{
  display:grid; grid-template-columns:96px 1fr; gap:18px;
  align-items:center; padding:11px 0; border-top:0.5px solid var(--border);
}
.rh-row:last-child{ border-bottom:0.5px solid var(--border); }
.rh-row .val{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; color:var(--carbon); margin:0; max-width:none;
}
.rh-row .bar{ display:flex; align-items:center; gap:12px; }
.rh-row .bar i{ display:block; height:8px; background:var(--clay); border-radius:2px; flex:none; }
.rh-row .bar span{ font-size:12.5px; color:#57503f; }

/* --------------------------------------------------------------------------
   Biblioteca de componentes — los del sitio, en vivo

   Es la prueba de UI más directa que tiene la página: no son capturas, son
   los mismos componentes que corren en los siete case studies.
   -------------------------------------------------------------------------- */
.comp-lib{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 10px; }
.comp{
  background:var(--bone); border:0.5px solid var(--border); border-radius:10px;
  padding:18px; display:flex; flex-direction:column; gap:12px;
}
.comp.wide{ grid-column:1 / -1; }
.comp > .name{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:10.5px;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--muted);
  margin:0; max-width:none;
}
/* Los componentes traen sus propios márgenes de la hoja compartida; dentro de
   una celda de vitrina estorban. Especificidad 0,2,0 para ganarle a la regla
   original sin recurrir a !important. */
.comp .ai-callout,
.comp .why,
.comp .problem,
.comp .before-after,
.comp .quote-card,
.comp .impact-card,
.comp .caption{ margin:0; max-width:none; }
.comp .row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* --------------------------------------------------------------------------
   Anatomía de un prompt
   -------------------------------------------------------------------------- */
.prompt{
  background:#fff; border:0.5px solid var(--border); border-radius:8px;
  padding:6px 22px 18px; margin:18px 0 10px;
  max-width:calc(var(--medida) + 40px);
}
.prompt-part{
  display:grid; grid-template-columns:104px 1fr; gap:18px;
  padding:13px 0; border-top:0.5px solid var(--border);
}
.prompt-part:first-of-type{ border-top:none; }
.prompt-part .part{
  font-family:'Oswald',sans-serif; font-weight:500;
  font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--clay-dark); margin:0; line-height:1.6;
}
.prompt-part .body{ font-size:13.5px; color:#3f3a32; margin:0; max-width:none; line-height:1.6; }
.prompt-part.negative .part,
.prompt-part.negative .body{ color:var(--muted); }

/* --------------------------------------------------------------------------
   Moodboard
   -------------------------------------------------------------------------- */
.moodboard{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:10px; margin:18px 0 10px;
}
.moodboard img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:6px; aspect-ratio:3/4;
}

/* --------------------------------------------------------------------------
   Vitrina de piezas terminadas
   -------------------------------------------------------------------------- */
.asset{
  background:#fff; border:0.5px solid var(--border); border-radius:8px;
  padding:22px 24px; margin:16px 0;
}
.asset h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:15px; margin:0 0 6px; max-width:none; }
.asset > p{ font-size:13.5px; color:#57503f; margin:0 0 16px; max-width:none; }
.asset > p:last-child{ margin-bottom:0; }

.favicon-row{ display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:18px; }
.favicon-item{ text-align:center; }
.favicon-item img{ display:block; margin:0 auto 7px; }
.favicon-item .size{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10.5px; color:var(--muted); display:block;
}
.tab-mock{
  display:inline-flex; align-items:center; gap:8px;
  background:#f1ece2; border:0.5px solid var(--border);
  border-radius:8px 8px 0 0; padding:8px 14px 9px; max-width:100%;
}
.tab-mock img{ width:16px; height:16px; flex:none; }
.tab-mock span{ font-size:12px; color:#3f3a32; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Loader en vivo, en bucle con pausa: es una vitrina, no la experiencia real
   (ésa ocurre una sola vez por sesión). */
.loader-demo{
  background:var(--bone); border:0.5px solid var(--border); border-radius:8px;
  height:180px; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.loader-demo .mono{ text-align:center; }
.loader-demo .sc{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:36px; letter-spacing:0.06em; line-height:1;
  color:var(--carbon); margin:0 0 13px; max-width:none;
  animation:ai-demo-fade 3.6s ease infinite;
}
.loader-demo .rule{ position:relative; width:110px; height:1px; background:var(--border); margin:0 auto 11px; }
.loader-demo .rule::after{
  content:""; position:absolute; inset:0 auto 0 0; width:0; background:var(--clay);
  animation:ai-demo-draw 3.6s cubic-bezier(.65,0,.35,1) infinite;
}
.loader-demo .name{
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  margin:0; max-width:none; animation:ai-demo-fade 3.6s ease infinite;
}
@keyframes ai-demo-draw{ 0%{width:0;} 32%{width:100%;} 88%{width:100%;opacity:1;} 100%{width:100%;opacity:0;} }
@keyframes ai-demo-fade{ 0%{opacity:0;transform:translateY(6px);} 14%,88%{opacity:1;transform:none;} 100%{opacity:0;} }
/* Misma regla que sigue el loader real: si piden menos movimiento, no se mueve. */
@media (prefers-reduced-motion: reduce){
  .loader-demo .sc, .loader-demo .name, .loader-demo .rule::after{ animation:none; opacity:1; transform:none; }
  .loader-demo .rule::after{ width:100%; }
}

.og-preview{ border:0.5px solid var(--border); border-radius:8px; overflow:hidden; display:block; }
.og-preview img{ width:100%; height:auto; display:block; }

/* --------------------------------------------------------------------------
   Landing de /ai/
   -------------------------------------------------------------------------- */
.thesis{ border-left:3px solid var(--clay); padding:4px 0 4px 22px; margin:0 0 8px; max-width:var(--medida); }
.thesis p{ font-size:17px; font-weight:500; line-height:1.55; margin:0 0 12px; }
.thesis p:last-child{ margin-bottom:0; }

.ai-index{ display:grid; gap:16px; margin-top:8px; }
.ai-entry{
  position:relative; background:var(--card); border:0.5px solid var(--border);
  border-radius:10px; padding:26px 28px; transition:border-color .15s, transform .15s;
}
.ai-entry:hover{ border-color:var(--carbon); transform:translateY(-2px); }
.ai-entry .num{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--clay-dark); margin:0 0 10px;
}
.ai-entry h3{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:20px; letter-spacing:-0.2px; line-height:1.15; margin:0 0 10px;
}
.ai-entry .entry-hook{ font-size:15px; font-weight:600; margin:0 0 8px; max-width:none; }
.ai-entry p{ font-size:14px; color:#57503f; margin:0 0 16px; max-width:none; }
.ai-entry .view-link::after{ content:""; position:absolute; inset:0; }
.ai-entry.pending{ background:transparent; border-style:dashed; }
.ai-entry.pending:hover{ border-color:var(--border); transform:none; }
.ai-entry.pending h3{ color:var(--muted); }
.ai-entry .soon{
  font-size:11px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--muted); margin:0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .comp-lib{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .decision-step{ display:block; }
  .decision-step .label{ margin-bottom:5px; }
  .decision{ margin:20px 0; padding:16px 18px; }
  .prompt-part{ display:block; }
  .prompt-part .part{ margin-bottom:5px; }
  .prompt{ padding:6px 18px 16px; }
  .asset{ padding:18px 20px; }
  .ai-entry{ padding:22px; }
  .thesis p{ font-size:16px; }
  /* La escala tipográfica pierde su columna de specs: pasa debajo del ejemplo. */
  .ts-row{ grid-template-columns:1fr; gap:6px; }
  .ts-row .spec{ text-align:left; }
  .ts-display{ font-size:30px; }
  .ts-h2{ font-size:25px; }
  .rh-row{ grid-template-columns:74px 1fr; gap:12px; }
  .favicon-row{ gap:20px; }
}

/* --------------------------------------------------------------------------
   Las dos propuestas iniciales

   Comparación lado a lado de las dos direcciones que salieron del moodboard.
   La elegida se marca con el borde en clay; la descartada queda en neutro,
   pero con el mismo tamaño: mostrar la alternativa más chica sería sugerir
   que nunca estuvo realmente en consideración.
   -------------------------------------------------------------------------- */
.proposals{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 10px; }
.proposal{
  background:#fff; border:0.5px solid var(--border); border-radius:8px; padding:18px 20px;
}
.proposal.chosen{ border:1px solid var(--clay); }
.proposal .tag{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:10.5px;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--muted);
  margin:0 0 8px; max-width:none;
}
.proposal.chosen .tag{ color:var(--clay-dark); }
.proposal h4{ font-size:15px; font-weight:600; margin:0 0 8px; max-width:none; }
.proposal p{ font-size:13.5px; color:#57503f; margin:0 0 14px; max-width:none; line-height:1.55; }
.proposal .chips{ display:flex; gap:6px; }
.proposal .chips i{
  display:block; width:26px; height:26px; border-radius:4px;
  border:0.5px solid rgba(35,34,32,0.12);
}

.refs{ padding-left:0; }
.refs li::before{
  content:""; position:absolute; left:6px; top:18px;
  width:5px; height:5px; border-radius:999px; background:var(--clay);
}

@media (max-width:640px){
  .proposals{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   Evolución de la paleta: referencia → sistema

   Dos pares de muestras con una flecha en medio. La diferencia entre los dos
   colores es chica y ésa es justamente la idea, así que las muestras van
   grandes y pegadas, que es la única forma de que se note.
   -------------------------------------------------------------------------- */
.evo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px; margin:18px 0 10px; }
.evo-pair{
  background:#fff; border:0.5px solid var(--border); border-radius:8px; padding:16px 18px;
}
.evo-pair .row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.evo-pair .side{ text-align:center; }
.evo-pair .chip{ display:block; width:58px; height:44px; border-radius:5px; border:0.5px solid rgba(35,34,32,0.12); margin-bottom:6px; }
.evo-pair .hex{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10.5px; color:var(--muted); margin:0; max-width:none; display:block;
}
.evo-pair .arrow{ color:var(--clay); font-size:15px; line-height:1; }
.evo-pair .what{ font-size:13px; color:#57503f; margin:0; max-width:none; line-height:1.5; }
.evo-pair .what b{ font-weight:600; color:var(--carbon); }

/* --------------------------------------------------------------------------
   Demo de foco visible

   Botones reales, alcanzables con Tab. La única forma honesta de mostrar un
   estado de foco es dejar que el visitante lo dispare.
   -------------------------------------------------------------------------- */
.focus-demo{
  background:var(--bone); border:0.5px solid var(--border); border-radius:10px;
  padding:22px 24px; margin:18px 0 10px;
}
.focus-demo .hint{
  font-size:12.5px; color:var(--muted); margin:0 0 14px; max-width:none;
}
.focus-demo .hint kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; background:#fff; border:0.5px solid var(--border);
  border-radius:3px; padding:2px 6px; color:var(--carbon);
}
.focus-demo .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* --------------------------------------------------------------------------
   Lista de detalles: problema arriba, solución debajo
   -------------------------------------------------------------------------- */
.detail{
  padding:20px 0; border-top:0.5px solid var(--border);
  max-width:calc(var(--medida) + 40px);
}
.detail:last-of-type{ border-bottom:0.5px solid var(--border); }
.detail .problem-line{
  font-size:12.5px; color:var(--muted); margin:0 0 6px; max-width:none;
  letter-spacing:0.02em;
}
.detail h4{ font-size:15px; font-weight:600; margin:0 0 8px; max-width:none; }
.detail p{ font-size:14px; color:#57503f; margin:0 0 12px; max-width:none; }
.detail p:last-child{ margin-bottom:0; }
.detail .media{ margin-top:14px; }

@media (max-width:640px){
  .focus-demo{ padding:18px 20px; }
  .evo-pair{ padding:14px 16px; }
}

/* --------------------------------------------------------------------------
   Demo del cambio de idioma

   Recrea el switch del nav: la píldora se desliza entre ES y EN mientras los
   dos colores se intercambian. Los rótulos llevan ancho fijo para que la
   píldora pueda animarse con un translateX constante en vez de depender de
   medir el DOM, que es lo que hace la versión real.

   Va en bucle con pausa, igual que la vitrina del loader: acá es una
   demostración, no la interacción real.
   -------------------------------------------------------------------------- */
.lang-demo{
  background:var(--bone); border:0.5px solid var(--border); border-radius:8px;
  height:120px; display:flex; align-items:center; justify-content:center;
}
.lang-widget{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  font-size:15px; font-weight:600; letter-spacing:0.03em;
}
/* Nombres propios: `.pill` ya existe en case-study.css para las píldoras de
   proceso y trae min-width:110px, que le gana a cualquier width que le ponga
   aquí. Reusar un nombre genérico de la hoja compartida era el error. */
.lang-label{
  position:relative; z-index:1;
  width:34px; text-align:center; padding:5px 0; border-radius:4px;
}
.lang-pill{
  position:absolute; z-index:0; top:0; left:0;
  width:34px; height:100%; border-radius:4px; background:var(--border);
  animation:ai-lang-slide 3.6s cubic-bezier(.65,0,.35,1) infinite;
}
.lang-label.is-first{ animation:ai-lang-on 3.6s ease infinite; }
.lang-label.is-second{ animation:ai-lang-off 3.6s ease infinite; }

/* 34px de rótulo + 6px de gap = 40px de recorrido. */
@keyframes ai-lang-slide{
  0%, 30%{ transform:translateX(0); }
  40%, 70%{ transform:translateX(40px); }
  80%, 100%{ transform:translateX(0); }
}
@keyframes ai-lang-on{
  0%, 30%{ color:var(--carbon); opacity:1; }
  40%, 70%{ color:var(--muted); opacity:0.65; }
  80%, 100%{ color:var(--carbon); opacity:1; }
}
@keyframes ai-lang-off{
  0%, 30%{ color:var(--muted); opacity:0.65; }
  40%, 70%{ color:var(--carbon); opacity:1; }
  80%, 100%{ color:var(--muted); opacity:0.65; }
}
@media (prefers-reduced-motion: reduce){
  .lang-pill, .lang-label{ animation:none; }
  .lang-label.is-first{ color:var(--carbon); }
  .lang-label.is-second{ color:var(--muted); opacity:0.65; }
}

/* Un artefacto dentro de .detail hereda el margen de 44px que trae
   case-study.css y, sobre todo, queda acotado al ancho de la ficha en vez de
   salirse al contenedor completo. El pie necesita recuperar su estilo porque
   `.detail p` le gana por especificidad. */
.detail .artifact{ margin:0; }
.detail .caption{
  font-size:13px; font-style:italic; color:var(--muted);
  margin:10px 0 0; max-width:none;
}

/* La tesis dentro del hero necesita aire: el .lede no trae margen inferior, así
   que sin esto queda pegada al párrafo de introducción y se lee como su
   continuación en vez de como el remate. */
.hero .thesis{ margin-top:34px; }
@media (max-width:640px){ .hero .thesis{ margin-top:26px; } }

/* --------------------------------------------------------------------------
   Fila de miniaturas de case study

   Tres proyectos lado a lado. A este tamaño no se lee el contenido, y no hace
   falta: lo que tiene que leerse es que comparten lenguaje gráfico y cambian
   de acento. Para el detalle está el lightbox, que sigue funcionando porque
   la estructura .artifact.has-image se conserva.

   Caja de proporción fija con object-fit:contain en vez de cover: las tres
   imágenes tienen relaciones de aspecto distintas (2.36, 1.41 y 1.33) y
   recortarlas para emparejarlas destruiría justo la composición que vienen a
   mostrar.
   -------------------------------------------------------------------------- */
.thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0 10px; }
.thumb .artifact{ margin:0; }
.thumb .artifact.has-image{
  background:#f7f4ee; border:0.5px solid var(--border);
  border-radius:8px; padding:10px; overflow:hidden;
}
.thumb .artifact.has-image img{
  width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:0;
}
.thumb .caption{
  font-size:12.5px; line-height:1.45; margin:10px 0 0; max-width:none;
}
/* El botón que inyecta el lightbox envuelve la imagen y necesita ocupar la
   caja completa para que el hover y el foco cubran la miniatura entera. */
.thumb .artifact-btn{ display:block; width:100%; }

@media (max-width:720px){
  /* Tres miniaturas a 100px son manchas de color. Por debajo de este ancho
     se apilan y recuperan tamaño legible. */
  .thumbs{ grid-template-columns:1fr; gap:22px; }
  .thumb .artifact.has-image img{ aspect-ratio:auto; }
}