/*
  Hoja común «Taller» (dirección visual C).
  Blanco y negro, como una ficha técnica de patronaje: blanco roto, tinta, líneas finas y
  esquinas de 2 px. El verde petróleo es la única nota de color, escasa e intencionada,
  como el abrigo rojo de «La lista de Schindler»: uno o dos detalles por pantalla
  (en Inicio, el tejido del vestido y la sección activa de la barra). El foco es de tinta.
  Dentro del Estudio de diseño y el Teselador el acento sigue marcando la selección y el foco.
  Prohibido: serif, crema, rosa, degradados y emojis.
*/

/* ---------- Tokens ---------- */
:root {
  --fondo: #fcfcfb;
  --superficie: #f2f2f0;
  --tinta: #141414;
  --secundario: #6d6d6a;
  --linea: #e2e2df;
  --mesa: #e9e9e6;          /* gris neutro alrededor de la Mesa de trabajo */
  --hoja: #ffffff;          /* la propia Mesa de trabajo */
  --acento: #1f6f66;        /* la nota de color: pocos detalles, siempre intencionados */
  --foco: var(--tinta);     /* contorno del foco del teclado en la web */
  --boton: #141414;
  --boton-texto: #fcfcfb;

  --letra: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --radio: 2px;
  --barra-alto: 52px;
  --margen: 40px;
  --ancho: 1200px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121212;
    --superficie: #1b1b1a;
    --tinta: #ededeb;
    --secundario: #a2a29e;
    --linea: #2e2e2c;
    --mesa: #2a2a28;
    --hoja: #ffffff;
    --acento: #5fb8ac;
    --boton: #ededeb;
    --boton-texto: #121212;
  }
}

@media (max-width: 720px) {
  :root { --margen: 16px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

main { flex: 1; }

h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }

p { margin: 0; }

a { color: inherit; text-underline-offset: 3px; }

img, svg { max-width: 100%; }

code, kbd, .mono { font-family: var(--mono); }

kbd {
  font-size: 0.8em;
  border: 1px solid var(--linea);
  border-bottom-width: 2px;
  border-radius: var(--radio);
  padding: 1px 6px;
}

/* Foco visible en todo lo que se alcanza con el teclado: de tinta en la web, para que el
   verde siga siendo una nota escasa. Las aplicaciones (Estudio de diseño y Teselador) lo mantienen
   en el acento, que allí es el color de la selección. */
.aplicacion, .app { --foco: var(--acento); }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Enlace para saltar la barra con el teclado */
.saltar {
  position: absolute;
  left: var(--margen);
  top: 8px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--boton);
  color: var(--boton-texto);
  border-radius: var(--radio);
  text-decoration: none;
  font-size: 14px;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* ---------- Barra de navegación común ---------- */
.barra { border-bottom: 1px solid var(--linea); background: var(--fondo); }

.barra-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 28px;
  row-gap: 0;
  min-height: var(--barra-alto);
  padding-inline: var(--margen);
  font-size: 14px;
}

.barra-marca {
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 16px;
}

.barra-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra-enlaces a {
  display: inline-block;
  padding-block: 15px 13px;
  color: var(--secundario);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.barra-enlaces a:hover { color: var(--tinta); }

/* Sección actual: la nota de color de la barra; el resto, en blanco y negro */
.barra-enlaces a[aria-current] {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

@media (max-width: 520px) {
  .barra-nav { column-gap: 20px; }
  .barra-marca { width: 100%; padding-block: 14px 0; }
  .barra-enlaces { gap: 4px 20px; }
  .barra-enlaces a { padding-block: 10px 9px; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--boton);
  border-radius: var(--radio);
  background: var(--boton);
  color: var(--boton-texto);
  font: 500 15px/1.2 var(--letra);
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { opacity: 0.88; }

.boton-secundario {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea);
}
.boton-secundario:hover { opacity: 1; border-color: var(--tinta); }

/* ---------- Textos comunes ---------- */
.antetitulo {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--secundario);
}

.entradilla {
  font-size: 19px;
  line-height: 1.45;
  color: var(--secundario);
  max-width: 52ch;
}

/* ---------- Cabecera de página interior ---------- */
.cabecera {
  display: grid;
  gap: 16px;
  padding-block: 72px 48px;
}
.cabecera h1 { font-size: clamp(40px, 7vw, 60px); max-width: 18ch; }

/* ---------- Inicio ---------- */
.inicio-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 48px;
  row-gap: 40px;
  padding-block: 72px 56px;
}

.inicio-texto { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.inicio-texto h1 { font-size: clamp(40px, 6.5vw, 60px); line-height: 1.02; letter-spacing: -0.03em; max-width: 15ch; text-wrap: balance; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }

.inicio-ilustracion { margin: 0; display: grid; gap: 12px; justify-items: center; min-width: 0; }
.inicio-ilustracion svg { width: 100%; max-width: 340px; height: auto; }

.pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 12.5px var(--mono);
}

/* Trazos de plano técnico (ilustraciones en SVG) */
.trazo { fill: none; stroke: var(--tinta); stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; }
.trazo-fino { stroke-width: 0.5; }
.cota { fill: none; stroke: var(--secundario); stroke-width: 0.5; }
.cota-texto { font: 6.5px var(--mono); fill: var(--secundario); }

/* Ilustración animada de Inicio: 01 se dibuja a trazo, 02 se viste de tejido, 03 se tesela.
   Fuera del bloque animado queda el estado final, que es lo que se ve con movimiento reducido. */
.ilustracion-trazo { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ilustracion-cuello { fill: #ffffff; }
/* Las juntas de las Piezas son blancas en los dos modos: el tejido no cambia con el modo */
.ilustracion-tesela { stroke: #ffffff; stroke-width: 0.8; }

@media (prefers-reduced-motion: no-preference) {
  .ilustracion-bucle { animation: ilustracion-bucle 10s infinite; }
  .ilustracion-trazo { animation: ilustracion-dibuja 10s infinite; }
  .ilustracion-tejido { animation: ilustracion-tejido 10s infinite; }
  .ilustracion-teselado { animation: ilustracion-tesela 10s infinite; }
  .inicio-ilustracion .pasos li { opacity: 0.35; }
  .inicio-ilustracion .pasos li:nth-child(1) { animation: ilustracion-paso-1 10s infinite; }
  .inicio-ilustracion .pasos li:nth-child(2) { animation: ilustracion-paso-2 10s infinite; }
  .inicio-ilustracion .pasos li:nth-child(3) { animation: ilustracion-paso-3 10s infinite; }
}

@keyframes ilustracion-bucle { 0%, 92% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ilustracion-dibuja { 0% { stroke-dashoffset: 1; } 32%, 100% { stroke-dashoffset: 0; } }
@keyframes ilustracion-tejido { 0%, 34% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes ilustracion-tesela { 0%, 58% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes ilustracion-paso-1 { 0%, 33% { opacity: 1; } 36%, 100% { opacity: 0.35; } }
@keyframes ilustracion-paso-2 { 0%, 34% { opacity: 0.35; } 37%, 57% { opacity: 1; } 60%, 100% { opacity: 0.35; } }
@keyframes ilustracion-paso-3 { 0%, 58% { opacity: 0.35; } 61%, 95% { opacity: 1; } 100% { opacity: 0.35; } }

@media (max-width: 820px) {
  .inicio-cabecera { grid-template-columns: minmax(0, 1fr); padding-block: 48px 40px; }
  .inicio-ilustracion svg { max-width: 260px; }
}

/* ---------- Lienzo de Inicio (/comun/lienzo.js) ----------
   El dibujo va por encima del contenido pero no recibe el puntero: los huecos de la portada
   dibujan (cursor de cruz) y los enlaces, botones y textos se comportan como siempre. */
.lienzo { position: relative; cursor: crosshair; }
.lienzo :is(a, button, h1, h2, h3, p, .antetitulo, .pasos, .lienzo-mandos) { cursor: auto; }
.lienzo :is(a, button) { cursor: pointer; }
.lienzo-trazando, .lienzo-trazando * { user-select: none; -webkit-user-select: none; }
.lienzo-dedo { touch-action: none; }   /* con «Dibujar» activado, el dedo dibuja en vez de desplazar */

.lienzo-portada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.lienzo-mandos {
  position: fixed;
  right: var(--margen);
  bottom: 16px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  max-width: calc(100vw - 2 * var(--margen));
  padding: 6px 6px 6px 14px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.lienzo-mandos[hidden] { display: none; }
/* Cuando el pie entra en pantalla, los mandos se apartan: dejan de flotar y se quedan al final
   de la portada, encima del pie, sin tocar la etiqueta (lo decide /comun/lienzo.js). */
.lienzo-mandos.junto-al-pie { position: absolute; bottom: 8px; }
.lienzo-indicio { font: 12.5px var(--mono); color: var(--secundario); }

.lienzo-boton {
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 13.5px/1.2 var(--letra);
  cursor: pointer;
}
.lienzo-boton:hover { border-color: var(--tinta); }
.lienzo-boton[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); }

@media (max-width: 520px) {
  .lienzo-mandos { flex-wrap: nowrap; padding-left: 12px; }
  .lienzo-indicio { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* En el móvil, con algo dibujado bastan los botones: el indicio ya ha cumplido. */
  .lienzo-mandos:has([data-lienzo="borrar"]:not([hidden])) .lienzo-indicio { display: none; }
}

/* ---------- Tarjetas de acceso (separadas por líneas finas) ---------- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}

.tarjetas > li { display: flex; min-width: 0; border-right: 1px solid var(--linea); }
.tarjetas > li:last-child { border-right: 0; }

.tarjeta {
  display: grid;
  gap: 10px;
  align-content: start;
  width: 100%;
  padding: 28px 28px 8px;
  text-decoration: none;
}
.tarjetas > li:first-child .tarjeta { padding-left: 0; }
.tarjetas > li:last-child .tarjeta { padding-right: 0; }

.tarjeta-tipo { font: 12.5px var(--mono); color: var(--secundario); }
.tarjeta h3 { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; }
.tarjeta p { color: var(--secundario); font-size: 15px; line-height: 1.45; }
.tarjeta svg { width: 100%; height: 96px; margin-top: 6px; overflow: visible; }
.tarjeta-ir { font-weight: 500; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.tarjeta:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

@media (max-width: 820px) {
  .tarjetas { grid-template-columns: minmax(0, 1fr); }
  .tarjetas > li { border-right: 0; border-bottom: 1px solid var(--linea); }
  .tarjetas > li .tarjeta { padding: 24px 0; }
}

/* ---------- Cobra color ----------
   Componente reutilizable: un enlace .cobra con una ilustración SVG que en reposo es un plano
   en blanco y negro y que, al pasar el ratón, con el foco del teclado o (sin ratón) al aparecer
   en pantalla (`data-en-vista`, lo pone /comun/cobra.js), se anima y se llena de color.
   Piezas de la ilustración:
     .cobra-tinte     relleno del fondo en reposo; en activo, el color de `--tinte`.
     .cobra-aparece   oculto en reposo; aparece en activo.
     .cobra-oculta    visible en reposo; desaparece en activo.
     .cobra-desplaza  se mueve `--dx`, `--dy` en activo.
     .cobra-traza     trazo con pathLength="1" que se vuelve a dibujar al activarse.
   `--retraso` escalona cualquiera de ellas. Con movimiento reducido no hay transiciones ni
   desplazamientos: el color aparece de golpe, sin movimiento. */
.cobra { --cobra-duracion: 0.7s; --cobra-curva: cubic-bezier(0.2, 0.7, 0.2, 1); }

.cobra-tinte { fill: var(--fondo); }
.cobra-aparece { opacity: 0; }
.cobra-traza { stroke-dasharray: 1; stroke-dashoffset: 0; }

.cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-tinte { fill: var(--tinte); }
.cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-aparece { opacity: 1; }
.cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-oculta { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cobra-tinte { transition: fill var(--cobra-duracion) ease var(--retraso, 0s); }
  .cobra-aparece, .cobra-oculta { transition: opacity calc(var(--cobra-duracion) * 0.8) ease var(--retraso, 0s); }
  .cobra-desplaza { transition: transform var(--cobra-duracion) var(--cobra-curva) var(--retraso, 0s); }
  .cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-desplaza { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
  .cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-traza { animation: cobra-traza 1.2s var(--cobra-curva) var(--retraso, 0s) both; }
}

@keyframes cobra-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Columnas (Herramientas): una columna grande por herramienta ---------- */
.cabecera-compacta { padding-block: 56px 36px; }

.columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 72px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.columnas > li { display: flex; min-width: 0; }
.columnas > li + li { border-left: 1px solid var(--linea); }

.columna {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 24px;
  width: 100%;
  min-height: clamp(560px, calc(100vh - var(--barra-alto) - 80px), 860px);
  padding: 32px 40px 40px;
  text-decoration: none;
}
.columnas > li:first-child .columna { padding-left: 0; }
.columnas > li:last-child .columna { padding-right: 0; }
.columna:focus-visible { outline-offset: -2px; }

.columna-dibujo { display: grid; place-items: center; min-height: 0; }
.columna-dibujo svg { width: 100%; max-width: 420px; height: auto; max-height: 100%; overflow: visible; }
.columna-hoja { fill: none; stroke: var(--secundario); stroke-width: 0.5; stroke-dasharray: 3 3; }

.columna-texto { display: grid; gap: 10px; justify-items: start; }
.columna h2 { font-size: clamp(30px, 3.4vw, 40px); }
.columna p { color: var(--secundario); max-width: 46ch; }
.columna-ir {
  margin-top: 8px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.columna:hover .columna-ir, .columna:focus-visible .columna-ir { text-decoration-thickness: 2px; }

@media (max-width: 820px) {
  .columnas { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .columnas > li + li { border-left: 0; }
  .columnas > li { border-bottom: 1px solid var(--linea); }
  .columnas > li .columna { min-height: 0; padding: 28px 0 36px; }
  .columna-dibujo svg { max-width: 320px; }
}

/* ---------- Aviso de página provisional ---------- */
.aviso {
  display: grid;
  gap: 12px;
  padding: 24px 0;
  margin-bottom: 72px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  color: var(--secundario);
}
.aviso a { color: var(--tinta); }

/* ---------- Pie: una cinta de etiqueta tejida, de borde a borde ----------
   Lo genera scripts/pie.js (npm run barra). Después de un respiro sobre el fondo de la página,
   una cinta de etiqueta de prenda cruza la ventana entera, sin márgenes: tejida (un acanalado
   fino de hilo), con orillo arriba y abajo y un pespunte que también llega a los dos bordes.
   Dentro, el contenido va en el mismo contenedor que el resto de la página: la marca a la
   izquierda, los símbolos de cuidado textil (los enlaces a las secciones) en el centro y la
   composición a la derecha; en pantallas estrechas, apilados y centrados. La cinta tiene sus
   propios tokens: en claro, un blanco roto apenas más tostado que el papel; en oscuro, una
   cinta oscura con tinta clara, de la misma familia que el fondo (nada de bloque blanco). El
   hilo del pespunte y el símbolo de la sección actual son la nota verde petróleo. */
.pie {
  padding-top: 40px;
  font-family: var(--letra);
}

.etiqueta {
  --etiqueta-fondo: #f4f4f1;
  --etiqueta-orillo: #dcdcd7;
  --etiqueta-hilo: rgba(20, 20, 20, 0.035);   /* el acanalado del tejido */
  --tinta: #141414;
  --secundario: #5c5c59;
  --acento: #1f6f66;
  --foco: var(--tinta);
  position: relative;
  width: 100%;
  padding-block: 30px;
  /* El tejido: hilos horizontales finos con cortes netos (una trama, no un degradado). */
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, var(--etiqueta-hilo) 2px 3px),
    var(--etiqueta-fondo);
  color: var(--tinta);
  border-block: 1px solid var(--etiqueta-orillo);
}

@media (prefers-color-scheme: dark) {
  .etiqueta {
    --etiqueta-fondo: #1b1b1a;
    --etiqueta-orillo: #30302e;
    --etiqueta-hilo: rgba(237, 237, 235, 0.02);
    --tinta: #ededeb;
    --secundario: #a8a8a3;
    --acento: #5fb8ac;
  }
}

/* El pespunte: un hilo verde petróleo a 7 px del orillo, de lado a lado de la ventana. */
.etiqueta-pespunte {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: visible;
  pointer-events: none;
}
.etiqueta-pespunte-arriba { top: 7px; }
.etiqueta-pespunte-abajo { bottom: 7px; }
.etiqueta-pespunte line {
  stroke: var(--acento);
  stroke-width: 1;
  stroke-dasharray: 5 3;
}

.etiqueta-tejido {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 32px;
}
/* La marca y la composición se centran con la fila de símbolos, no con su línea reservada. */
.etiqueta-tejido > :not(.etiqueta-cuidados) { margin-bottom: 22px; }

.etiqueta-marca {
  justify-self: start;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Debajo de los símbolos hay una línea reservada, dentro de la cinta: dice «Instrucciones
   de cuidado» y, al pasar el ratón o con el foco en un símbolo, el nombre de su sección. No se
   superpone a nada ni mueve la cinta. */
.etiqueta-cuidados { position: relative; padding-bottom: 22px; }
.etiqueta-cuidados ul { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.etiqueta-cuidados::after,
.etiqueta-simbolo::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.etiqueta-cuidados::after { content: "Instrucciones de cuidado"; color: var(--secundario); letter-spacing: 0.02em; }
.etiqueta-cuidados:has(.etiqueta-simbolo:hover, .etiqueta-simbolo:focus-visible)::after { opacity: 0; }
.etiqueta-simbolo::after { content: attr(data-nombre); color: var(--tinta); font-weight: 500; opacity: 0; }
.etiqueta-simbolo:hover::after, .etiqueta-simbolo:focus-visible::after { opacity: 1; }

.etiqueta-simbolo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--tinta);
  border-radius: var(--radio);
}
.etiqueta-simbolo svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.etiqueta-simbolo svg .relleno { fill: currentColor; stroke: none; }
.etiqueta-simbolo[aria-current] { color: var(--acento); }
.etiqueta-simbolo:hover svg, .etiqueta-simbolo:focus-visible svg { stroke-width: 1.9; }

.etiqueta-composicion { justify-self: end; text-align: right; font-size: 12.5px; line-height: 1.5; color: var(--secundario); }
.etiqueta-composicion p:first-child { color: var(--tinta); letter-spacing: 0.02em; }

/* Al pasar el ratón por la cinta, el hilo del pespunte corre. Con movimiento reducido, quieto. */
@media (prefers-reduced-motion: no-preference) {
  .etiqueta:hover .etiqueta-pespunte line { animation: etiqueta-cose 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes etiqueta-cose { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -32; } }

@media (max-width: 860px) {
  .pie { padding-top: 32px; }
  .etiqueta { padding-block: 28px; }
  .etiqueta-tejido { grid-template-columns: 1fr; justify-items: center; gap: 14px; text-align: center; }
  .etiqueta-marca, .etiqueta-composicion { justify-self: center; text-align: center; }
  .etiqueta-composicion { order: 1; }
  .etiqueta-tejido > :not(.etiqueta-cuidados) { margin-bottom: 0; }
}

@media (max-width: 520px) {
  .etiqueta-cuidados ul { gap: 6px; }
}