/* ==========================================================================
   Testarudo — componentes
   Depende de base.css. Nada aqui exige JavaScript para existir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — responde as 4 perguntas antes de qualquer grade
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--papel-fundo);
  border-bottom: 1px solid var(--linha);
}

.hero__rejilla {
  display: grid;
  gap: var(--e-6);
  padding-block: var(--e-7);
}

@media (min-width: 60rem) {
  .hero__rejilla {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--e-8);
    padding-block: var(--e-8);
  }
}

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
  padding: 0.3rem var(--e-3);
  background: var(--amarillo);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__titulo {
  font-size: var(--t-4xl);
  margin-bottom: var(--e-4);
  /* H1 de 5 linhas jogava o CTA primário para fora da dobra em laptop 768px
     (medido na revisão visual): o balance quebra em menos linhas. */
  text-wrap: balance;
}

.hero__titulo em {
  font-family: var(--fonte-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hero__subtitulo {
  max-width: 34rem;
  margin-bottom: var(--e-5);
  color: var(--tinta-suave);
  font-size: var(--t-md);
  line-height: 1.55;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

/* No celular cada botão ocupa a linha inteira; só dividem espaço quando cabe. */
.hero__acciones .boton {
  flex: 1 1 100%;
}

@media (min-width: 30rem) {
  .hero__acciones .boton {
    flex: 1 1 auto;
    min-width: 13rem;
  }
}

/* Prova adjacente ao CTA: o que o visitante recebe agora */
.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linha-forte);
}

.hero__dato {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hero__dato dt {
  order: 2;
  color: var(--tinta-tenue);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__dato dd {
  order: 1;
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1;
}

/* Mosaico do hero: capas reais, nunca mockup genérico.
   2 colunas no celular, 4 no tablet, 2x2 no desktop — todas as peças à vista. */
.hero__mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
}

@media (min-width: 30rem) and (max-width: 59.9375rem) {
  .hero__mosaico {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 60rem) {
  .hero__mosaico {
    gap: var(--e-4);
  }
}

.hero__pieza {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--borda-raio-card);
  background: var(--papel-alto);
  box-shadow: var(--sombra-2);
}

/* Placeholder no hero herda a trama, sem virar retângulo vazio */
.hero__pieza.tarjeta__lienzo--vacio {
  box-shadow: none;
  border: 1px solid var(--linha);
}

.hero__pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__pieza:nth-child(2n) {
  transform: translateY(var(--e-4));
}

@media (min-width: 60rem) {
  .hero__pieza:nth-child(2n) {
    transform: translateY(var(--e-5));
  }
}

/* --------------------------------------------------------------------------
   2. Duas portas de descoberta — série ou objeto
   -------------------------------------------------------------------------- */

.puertas {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 48rem) {
  .puertas {
    grid-template-columns: repeat(2, 1fr);
  }
}

.puerta {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  background: var(--papel-alto);
  border: 2px solid var(--tinta);
  border-radius: var(--borda-raio-card);
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.puerta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-3);
}

.puerta__numero {
  font-family: var(--fonte-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--tinta-tenue);
}

.puerta__titulo {
  font-size: var(--t-xl);
}

.puerta__texto {
  color: var(--tinta-suave);
  font-size: var(--t-base);
}

.puerta__pie {
  margin-top: auto;
  padding-top: var(--e-3);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Cards de série — o campo cromático identifica a série
   -------------------------------------------------------------------------- */

.rejilla-series {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* O card de série é um <a> dentro de um <li>: sem esticar, a base ficava
   irregular e a última linha caía meia vazia (revisão visual). */
.rejilla-series > li,
.rejilla-series > li > a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card de série: texto TINTA sobre a cor exata da marca.

   O texto era branco, e aí as cores reprovavam WCAG AA para texto normal —
   cyan 2.85, verde 3.52, magenta 4.19 (mínimo 4.5). Escurecer os campos
   resolveria o contraste e mataria a energia cromática, que é o ponto da
   direção. Texto tinta preserva a cor E passa: cyan 6.36, verde 5.15,
   naranja 5.66, amarillo 12.26, magenta 4.32, violeta 3.24.

   Magenta e violeta ficam em 4.32 e 3.24, então o TEXTO CORRIDO desses dois
   sobe para peso 600, o que os qualifica como texto grande (teto 3.0) na
   escala em que aparecem. O título do card já é grande e passa em todos. */
.tarjeta-serie {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  padding: var(--e-5);
  border-radius: var(--borda-raio-card);
  background: var(--serie-color, var(--cyan));
  color: var(--tinta);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.tarjeta-serie:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-3);
}

/* A série Letras é preta: ali o texto claro é o único legível (papel sobre
   tinta dá 16.81). As outras seguem com tinta. */
.tarjeta-serie--letras {
  color: var(--papel);
}

.tarjeta-serie__texto {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.5;
}

.tarjeta-serie__nombre {
  font-size: var(--t-lg);
  margin-bottom: var(--e-2);
}

.tarjeta-serie__cuenta {
  margin-top: auto;
  padding-top: var(--e-5);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tarjeta-serie__fondo {
  position: absolute;
  right: -1rem;
  bottom: -2.5rem;
  font-family: var(--fonte-display);
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   4. Grade de produtos — a peça que substitui a coluna infinita
   -------------------------------------------------------------------------- */

.rejilla-productos {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48rem) {
  .rejilla-productos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-5);
  }
}

@media (min-width: 72rem) {
  .rejilla-productos {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--borda-raio-card);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.tarjeta:hover {
  transform: translateY(-3px);
  border-color: var(--linha-forte);
  box-shadow: var(--sombra-3);
}

.tarjeta__lienzo {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--papel-fundo);
  overflow: hidden;
}

.tarjeta__lienzo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sem master ainda: espaço reservado explícito, nunca imagem inventada */
.tarjeta__lienzo--vacio {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    135deg,
    var(--papel-fundo),
    var(--papel-fundo) 10px,
    #eae2d4 10px,
    #eae2d4 20px
  );
}

.tarjeta__lienzo--vacio > [role="img"] {
  padding: var(--e-4);
  color: var(--tinta-tenue);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.tarjeta__cinta {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 2;
}

/* A etiqueta de série no card leva texto pequeno, então usa tinta sobre a cor
   da marca — mesma razão do card de série. Letras (preta) inverte. */
.tarjeta__serie {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: calc(100% - var(--e-4));
  padding: 0.2rem var(--e-2);
  background: var(--serie-color, var(--tinta));
  color: var(--tinta);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  /* Era o único canto reto do site e truncava "INDUSTRIA ARGEN…": pílula
     flutuante completa, como a etiqueta do hero, e o nome quebra em duas
     linhas em vez de cortar (revisão visual). bottom:0 deixava a cápsula
     reta embaixo e cobria o logo impresso na capa (rodada 2). */
  right: var(--e-2);
  bottom: var(--e-2);
  border-radius: 999px;
}

.tarjeta__serie--letras {
  color: var(--papel);
}

.tarjeta__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-4);
}

@media (min-width: 48rem) {
  .tarjeta__cuerpo {
    padding: var(--e-4);
  }
}

.tarjeta__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* O link do título cobre o card inteiro pelo ::after, então a área de toque
   real é o card. min-height mantém o alvo grande mesmo assim. */
.tarjeta__titulo a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
}

.tarjeta__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tarjeta {
  position: relative;
}

.tarjeta__linea {
  color: var(--tinta-tenue);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tarjeta__precio {
  margin-top: auto;
  padding-top: var(--e-2);
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: 700;
}

.tarjeta__precio span {
  color: var(--tinta-tenue);
  font-family: var(--fonte-texto);
  font-size: var(--t-xs);
  font-weight: 600;
}

.tarjeta__sin-precio {
  margin-top: auto;
  padding-top: var(--e-2);
  color: var(--tinta-suave);
  font-size: var(--t-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Filtros — estado vive na URL, JS só melhora
   -------------------------------------------------------------------------- */

.filtros {
  margin-bottom: var(--e-6);
  padding: var(--e-4);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--borda-raio-card);
}

.filtros__grupos {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 48rem) {
  .filtros__grupos {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    align-items: end;
  }
}

.filtros__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.filtros__etiqueta {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.filtros__campo {
  min-height: 48px;
  padding: var(--e-2) var(--e-3);
  background: var(--papel);
  border: 2px solid var(--linha-forte);
  border-radius: var(--borda-raio);
  font-family: inherit;
  font-size: var(--t-base);
}

.filtros__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linha);
}

.filtros__conteo {
  margin-right: auto;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta-suave);
}

/* Fichas de filtro rápido: links reais, funcionam sem JS */
.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

.ficha {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--e-2) var(--e-4);
  background: var(--papel-alto);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao);
}

.ficha:hover {
  border-color: var(--tinta);
}

.ficha[aria-current="true"],
.ficha--activa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel-alto);
}

.sin-resultados {
  padding: var(--e-7) var(--e-4);
  background: var(--papel-fundo);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--borda-raio-card);
  text-align: center;
}

.sin-resultados__titulo {
  margin-bottom: var(--e-2);
  font-size: var(--t-lg);
}

/* --------------------------------------------------------------------------
   6. Paginação real
   -------------------------------------------------------------------------- */

.paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
  justify-content: center;
  margin-top: var(--e-7);
}

.paginacion__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: var(--e-2) var(--e-3);
  background: var(--papel-alto);
  border: 1px solid var(--linha-forte);
  border-radius: var(--borda-raio);
  font-weight: 600;
  text-decoration: none;
}

.paginacion__enlace[aria-current="page"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel-alto);
}

.paginacion__enlace[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Bloco de processo — prova o fazer sem inventar maquinário
   -------------------------------------------------------------------------- */

.pasos {
  display: grid;
  gap: var(--e-5);
  counter-reset: paso;
}

@media (min-width: 48rem) {
  .pasos {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.paso {
  position: relative;
  padding-top: var(--e-5);
  border-top: 3px solid var(--tinta);
  counter-increment: paso;
}

.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--fonte-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--magenta);
}

.paso__titulo {
  margin-bottom: var(--e-2);
  font-size: var(--t-md);
}

.paso__texto {
  color: var(--tinta-suave);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   8. Ficha de produto
   -------------------------------------------------------------------------- */

.producto {
  display: grid;
  gap: var(--e-6);
  padding-block: var(--e-6);
}

@media (min-width: 60rem) {
  .producto {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--e-8);
    align-items: start;
    padding-block: var(--e-7);
  }
}

.producto__medios {
  position: relative;
}

.producto__lienzo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--borda-raio-card);
  background: var(--papel-fundo);
}

.producto__lienzo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto__miniaturas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.producto__miniatura {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--borda-raio);
  background: var(--papel-fundo);
  padding: 0;
  cursor: pointer;
}

.producto__miniatura[aria-current="true"] {
  border-color: var(--tinta);
  border-width: 2px;
}

.producto__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto__serie {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--e-3);
  padding: 0.2rem var(--e-3);
  background: var(--serie-color, var(--tinta));
  border-radius: 999px;
  color: var(--tinta);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.producto__serie--letras {
  color: var(--papel);
}

.producto__titulo {
  font-size: var(--t-3xl);
  margin-bottom: var(--e-3);
}

.producto__precio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: baseline;
  margin-block: var(--e-4);
}

.producto__precio strong {
  font-family: var(--fonte-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
}

.producto__precio span {
  color: var(--tinta-tenue);
  font-size: var(--t-sm);
}

/* Caixa de estado: a explicação vive ao lado do CTA, onde a dúvida nasce */
.caja-estado {
  padding: var(--e-4);
  margin-block: var(--e-5);
  background: var(--papel-fundo);
  border-left: 4px solid var(--tinta);
  border-radius: var(--borda-raio);
}

.caja-estado--in_stock {
  border-left-color: var(--estado-stock);
  background: var(--estado-stock-fundo);
}

.caja-estado--available_without_finite_stock {
  border-left-color: var(--estado-abierto);
  background: var(--estado-abierto-fundo);
}

.caja-estado--contact_only {
  border-left-color: var(--estado-consulta);
  background: var(--estado-consulta-fundo);
}

.caja-estado--unavailable {
  border-left-color: var(--estado-agotado);
  background: var(--estado-agotado-fundo);
}

.caja-estado__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
  font-size: var(--t-base);
  font-weight: 700;
}

.caja-estado__texto {
  color: var(--tinta-suave);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.producto__acciones {
  display: grid;
  gap: var(--e-3);
  margin-block: var(--e-5);
}

@media (min-width: 30rem) {
  .producto__acciones {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.especificaciones {
  display: grid;
  gap: 0;
  margin-top: var(--e-5);
  border-top: 1px solid var(--linha);
}

.especificaciones__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-1);
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-sm);
}

@media (min-width: 30rem) {
  .especificaciones__fila {
    grid-template-columns: 9rem 1fr;
    gap: var(--e-3);
  }
}

.especificaciones__fila dt {
  color: var(--tinta-tenue);
  font-weight: 600;
}

.especificaciones__fila dd {
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Trilha de navegação
   -------------------------------------------------------------------------- */

.migas {
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-sm);
}

.migas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
  color: var(--tinta-tenue);
}

.migas__lista li:not(:last-child)::after {
  content: "/";
  margin-left: var(--e-2);
  color: var(--linha-forte);
}

.migas a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
}

.migas a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10. Formulário
   -------------------------------------------------------------------------- */

.formulario {
  display: grid;
  gap: var(--e-4);
  max-width: 34rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.campo__etiqueta {
  font-size: var(--t-sm);
  font-weight: 700;
}

.campo__requerido {
  /* Magenta de marca sobre papel da 3.89 e reprova para texto pequeno. */
  color: var(--magenta-texto);
}

.campo__control {
  min-height: 48px;
  padding: var(--e-3);
  background: var(--papel-alto);
  border: 2px solid var(--linha-forte);
  border-radius: var(--borda-raio);
  font-family: inherit;
  font-size: var(--t-base);
}

.campo__control:focus-visible {
  border-color: var(--cyan);
}

textarea.campo__control {
  min-height: 8rem;
  resize: vertical;
}

.campo__ayuda {
  color: var(--tinta-tenue);
  font-size: var(--t-xs);
}

.campo__error {
  display: none;
  color: #c62828;
  font-size: var(--t-sm);
  font-weight: 600;
}

.campo--error .campo__control {
  border-color: #c62828;
}

.campo--error .campo__error {
  display: block;
}

.resumen-errores {
  display: none;
  padding: var(--e-4);
  background: #fdecea;
  border-left: 4px solid #c62828;
  border-radius: var(--borda-raio);
}

.resumen-errores[data-visible="true"] {
  display: block;
}

.resumen-errores__titulo {
  margin-bottom: var(--e-2);
  font-size: var(--t-base);
  font-weight: 700;
  color: #a31515;
}

.resumen-errores ul {
  display: grid;
  gap: var(--e-1);
  list-style: disc;
  padding-left: var(--e-5);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   11. Faixa de destaque e blocos editoriais
   -------------------------------------------------------------------------- */

.franja {
  padding-block: var(--e-6);
  background: var(--amarillo);
}

.franja--magenta {
  background: var(--magenta);
  color: var(--tinta);
}

.franja--cyan {
  background: var(--cyan);
  color: var(--tinta);
}

.franja__rejilla {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

@media (min-width: 48rem) {
  .franja__rejilla {
    grid-template-columns: 1.6fr auto;
    gap: var(--e-7);
  }
}

.franja__titulo {
  font-size: var(--t-xl);
  margin-bottom: var(--e-2);
}

.franja__texto {
  max-width: 40rem;
  font-size: var(--t-base);
  line-height: 1.6;
}

.acordeon {
  display: grid;
  gap: var(--e-2);
  max-width: 46rem;
}

.acordeon__item {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--borda-raio-card);
}

.acordeon__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 56px;
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-base);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.acordeon__resumen::-webkit-details-marker {
  display: none;
}

.acordeon__resumen::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--magenta);
}

.acordeon__item[open] .acordeon__resumen::after {
  content: "–";
}

.acordeon__cuerpo {
  padding: 0 var(--e-4) var(--e-4);
  color: var(--tinta-suave);
  font-size: var(--t-sm);
  line-height: 1.65;
}

/* Especificações em lista: quando as frases são afirmações e não pares
   rótulo/valor, forçar <dt> produziria termo vazio. */
.especificaciones__lista {
  display: grid;
  gap: 0;
  margin-top: var(--e-5);
  border-top: 1px solid var(--linha);
}

.especificaciones__lista li {
  position: relative;
  padding: var(--e-3) 0 var(--e-3) var(--e-5);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-sm);
}

.especificaciones__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 10px;
  height: 2px;
  background: var(--magenta);
}

/* --------------------------------------------------------------------------
   12. Outras versões do mesmo personagem
   A mesma capa existe em cuaderno e libreta, em fichas separadas. Sem este
   bloco, quem não conhece a diferença escolhe pelo primeiro resultado.
   -------------------------------------------------------------------------- */

.otras-versiones {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linha);
}

.otras-versiones__titulo {
  margin-bottom: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.otras-versiones__lista {
  display: grid;
  gap: var(--e-2);
}

.otras-versiones__lista a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  min-height: 48px;
  padding: var(--e-3);
  background: var(--papel-alto);
  border: 1px solid var(--linha-forte);
  border-radius: var(--borda-raio);
  text-decoration: none;
  transition: border-color var(--transicao), transform var(--transicao);
}

.otras-versiones__lista a:hover {
  border-color: var(--tinta);
  transform: translateX(2px);
}

.otras-versiones__objeto {
  font-weight: 700;
}

.otras-versiones__precio {
  margin-right: auto;
  font-family: var(--fonte-display);
  font-weight: 700;
}

/* Paginação: controle indisponível é <span>, não <a> desabilitado — não recebe
   foco, porque foco em controle inerte é promessa que não se cumpre. */
.paginacion__enlace--inerte {
  opacity: 0.35;
  cursor: default;
}

/* --------------------------------------------------------------------------
   13. Vistas de ofício
   O parecer da encadernadora: o site mostrava produto em grade e quase não
   mostrava o trabalho. Estas são as mesmas peças do catálogo, nas vistas em que
   a costura, o lombo e a estrutura aparecem — material que já existia no acervo
   e vivia escondido na galeria de cada ficha.
   -------------------------------------------------------------------------- */

.taller-vistas {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.taller-vista a {
  display: block;
  text-decoration: none;
}

.taller-vista__lienzo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--e-3);
  border-radius: var(--borda-raio-card);
  background: var(--papel-fundo);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.taller-vista a:hover .taller-vista__lienzo {
  transform: translateY(-3px);
  box-shadow: var(--sombra-3);
}

.taller-vista__lienzo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.taller-vista__linea {
  color: var(--tinta-tenue);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.taller-vista__titulo {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   14. Avisos de envio do formulário e honeypot
   -------------------------------------------------------------------------- */

/* Estado do envio via FormSubmit: ok no verde de stock, erro no campo de
   alerta. role=status/alert já estão no HTML; aqui só a caixa. */
.aviso-envio {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--borda-raio);
  font-size: var(--t-sm);
}

.aviso-envio--ok {
  background: var(--estado-stock-fundo);
  border-left: 4px solid var(--estado-stock);
}

.aviso-envio--erro {
  background: var(--estado-consulta-fundo);
  border-left: 4px solid var(--estado-consulta);
}

.aviso-envio a {
  color: inherit;
}

/* Honeypot antispam: invisível para gente, preenchível por bot — display:none
   é a técnica documentada pelo próprio FormSubmit, e qualquer valor neste
   campo faz o serviço ignorar o envio em silêncio. */
.campo-mel {
  display: none;
}

/* --------------------------------------------------------------------------
   Cartel "sin stock" — pedido do dono, 2026-09-07

   Pílula amarela de marca entre o hero e o conteúdo, e acima dos filtros do
   catálogo. Contraste tinta/amarillo = 12.26 (medido, AA folgado para texto de
   qualquer tamanho). O botão inverte: papel sobre tinta.
   -------------------------------------------------------------------------- */

.cartel-stock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3) var(--e-4);
  margin-block: var(--e-5);
  padding: var(--e-4) var(--e-5);
  background: var(--amarillo);
  color: var(--tinta);
  border-radius: 999px;
}

.cartel-stock__texto {
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.4;
}

.cartel-stock__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--e-2) var(--e-5);
  /* O CTA de WhatsApp era preto aqui e magenta na ficha: um só sinal de
     ação principal — o acento magenta da marca (revisão visual). */
  background: var(--magenta-texto);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  white-space: nowrap;
}

.cartel-stock__boton:hover {
  background: #000;
}

/* Abaixo de ~36rem a pílula de 999px em duas linhas parece ovo achatado; o
   raio de card preserva o arredondado sem a deformação. */
@media (max-width: 36rem) {
  .cartel-stock {
    border-radius: var(--borda-raio-card);
  }
}

/* ==========================================================================
   Acabamentos da rodada de perspectivas (2026-09-07)
   ========================================================================== */

/* O cabeçalho é sticky: sem a margem de rolagem, o skip link e as âncoras
   pousam o conteúdo DEBAIXO dele (a11y). */
main#conteudo {
  scroll-margin-top: 6rem;
}

main#conteudo:focus {
  outline: none;
}

/* A ficha segue o mesmo critério do card: fonte paisagem entra com contain
   sobre o papel, nunca com cover (giftcard perdia “$20.000” na galeria). */
.producto__lienzo--horizontal {
  background: var(--papel-fundo);
}

.producto__lienzo--horizontal img {
  object-fit: contain;
}

/* Fonte em paisagem no slot 3:4 do card: contain sobre o papel — a peça
   inteira aparece (giftcards e trabajos eram decapitados pelo cover). */
.tarjeta__lienzo--horizontal {
  background: var(--papel-fundo);
}

.tarjeta__lienzo--horizontal img {
  object-fit: contain;
}

/* A descrição da ficha colava na lista "mismo personaje, otro objeto" e lia
   como se fosse da Libreta (revisão visual). */
.otras-versiones {
  margin-top: var(--e-6);
}

/* Header mobile: a barra sticky alta comia a primeira tela. Os min-height de
   barra/marca travam a altura — baixar o padding sem relaxá-los é inerte
   (medido pela rodada 2: 143px). 40px na marca preserva o alvo de toque. */
@media (max-width: 48rem) {
  .encabezado .envoltorio {
    padding-top: var(--e-2);
    padding-bottom: var(--e-2);
  }

  .encabezado__barra {
    min-height: 0;
    padding-block: var(--e-2);
  }

  .encabezado .marca {
    min-height: 40px;
  }

  .encabezado .marca img {
    height: 1.75rem;
  }

  /* Filtros do catálogo em duas colunas: 1,6 telas antes do primeiro produto
     era a queixa medida da revisão visual. minmax(0,…) porque a faixa 1fr pura
     não encolhe abaixo do conteúdo e o select estourava o viewport (VERMELHO
     medido no smoke-viewport em 390px). */
  .filtros__grupos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-3);
  }

  .filtros__grupo {
    min-width: 0;
  }

  .filtros__grupo:first-child {
    grid-column: 1 / -1;
  }

  /* Em 2 colunas a 390px o select truncava o valor default ("Disponibles
     pri"): corpo menor e padding enxuto cabem (rodada 2). */
  .filtros__campo {
    font-size: var(--t-sm);
    padding-inline: var(--e-2);
  }
}