/* ==========================================================================
   Decoclick — listado, ficha de producto y carrito
   Se carga después de decoclick.css
   ========================================================================== */

/* ------------------------------------------------------------- migas ----- */

.migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-block: var(--s5);
  font-size: .8125rem;
  color: var(--tinta-2);
}
.migas a:hover { color: var(--negro); text-decoration: underline; }
.migas span[aria-current] { color: var(--negro); font-weight: 700; }
.migas li { list-style: none; }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; }
.migas li + li::before { content: '/'; margin-right: var(--s2); color: var(--tinta-3); }

/* ==========================================================================
   Listado
   ========================================================================== */

.listado {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: var(--s7);
  align-items: start;
  padding-bottom: var(--s8);
}

.listado__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--negro);
}
.listado__titulo { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.listado__conteo { color: var(--tinta-2); font-weight: 600; font-size: .9375rem; margin: var(--s2) 0 0; }

.orden { display: flex; align-items: center; gap: var(--s3); font-size: .875rem; font-weight: 600; }
.orden select {
  padding: 10px var(--s4);
  border: 2px solid var(--negro);
  border-radius: 4px;
  background: var(--blanco);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* --- panel de filtros --- */

.filtros {
  position: sticky;
  top: 112px;
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  overflow: hidden;
}
.filtros__grupo { border-bottom: 1px solid var(--linea); padding: var(--s5); }
.filtros__grupo:last-child { border-bottom: 0; }
.filtros__grupo h2 {
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
}

.filtros__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.filtros__lista a {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 7px var(--s2);
  border-radius: 4px;
  font-size: .9375rem;
}
.filtros__lista a:hover { background: var(--amarillo-tenue); }
.filtros__lista a[aria-current] { background: var(--amarillo); font-weight: 700; }
.filtros__lista span { color: var(--tinta-3); font-size: .8125rem; }
.filtros__lista a[aria-current] span { color: var(--negro); }
.filtros__sub { padding-left: var(--s4); }

.filtros__precio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s2);
}
.filtros__precio input {
  width: 100%;
  min-width: 0;
  padding: 9px var(--s3);
  border: 2px solid var(--negro);
  border-radius: 4px;
  font: inherit;
}
.filtros__precio span { color: var(--tinta-3); text-align: center; }
.filtros__precio .boton { grid-column: 1 / -1; padding-block: 10px; }

.casilla {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 6px 0;
  font-size: .9375rem;
  cursor: pointer;
}
.casilla input { width: 18px; height: 18px; accent-color: var(--negro); cursor: pointer; }

.filtros__limpiar {
  display: block;
  width: 100%;
  padding: var(--s4);
  border: 0;
  border-top: 2px solid var(--negro);
  background: var(--papel);
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
}
.filtros__limpiar:hover { background: var(--amarillo); }

/* --- fichas activas --- */

.activos { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.activo {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px var(--s3);
  background: var(--amarillo);
  border: 1.5px solid var(--negro);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
}
.activo button { border: 0; background: none; padding: 0; line-height: 1; font-size: 1rem; }

.listado .reja-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mas { display: grid; place-items: center; padding-top: var(--s7); }

.filtros-movil { display: none; }

/* ==========================================================================
   Ficha de producto
   ========================================================================== */

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
  padding-bottom: var(--s8);
}

/* --- galería --- */

.galeria { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.galeria__miniaturas {
  display: grid;
  gap: var(--s3);
  align-content: start;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}
.galeria__mini {
  padding: 0;
  aspect-ratio: 1;
  border: 2px solid var(--linea);
  border-radius: 6px;
  overflow: hidden;
  background: var(--blanco);
}
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria__mini[aria-current] { border-color: var(--negro); }
.galeria__mini:hover { border-color: var(--tinta-2); }

.galeria__principal {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
}
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }

/* --- datos --- */

.ficha__categoria {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.ficha__titulo { font-size: clamp(1.75rem, 3.6vw, 2.75rem); margin: var(--s3) 0; }
.ficha__sku { display: block; font-size: .8125rem; color: var(--tinta-3); font-weight: 600; }

.ficha__precio {
  display: inline-block;
  margin: var(--s5) 0;
  padding: var(--s3) var(--s5) var(--s4);
  background: var(--negro);
  color: var(--blanco);
}
.ficha__precio .rotulo {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ficha__precio .monto {
  display: block;
  font-family: var(--display);
  font-size: 3rem;
  line-height: .95;
  color: var(--amarillo);
}
.ficha__precio .nota { display: block; font-size: .75rem; font-weight: 600; color: #C9C9C9; }

.ficha__descripcion {
  margin: 0 0 var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta-2);
  line-height: 1.65;
}

/* --- opciones --- */

.opciones { display: grid; gap: var(--s5); margin-bottom: var(--s5); }
.opcion__rotulo {
  display: block;
  margin-bottom: var(--s3);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.opcion__rotulo em { font-style: normal; font-weight: 500; color: var(--tinta-2); text-transform: none; letter-spacing: 0; }
.opcion__valores { display: flex; flex-wrap: wrap; gap: var(--s2); }
.valor {
  padding: 9px var(--s4);
  border: 2px solid var(--linea);
  border-radius: 4px;
  background: var(--blanco);
  font-size: .875rem;
  font-weight: 600;
}
.valor:hover { border-color: var(--negro); }
.valor[aria-pressed="true"] { border-color: var(--negro); background: var(--amarillo); }
.valor[disabled] { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* --- compra --- */

.compra { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: stretch; }
.cantidad {
  display: flex;
  align-items: center;
  border: 2px solid var(--negro);
  border-radius: 4px;
  overflow: hidden;
}
.cantidad button { width: 42px; border: 0; background: var(--blanco); font-size: 1.25rem; font-weight: 700; }
.cantidad button:hover { background: var(--amarillo); }
.cantidad input {
  width: 52px;
  border: 0;
  border-inline: 2px solid var(--negro);
  padding: 12px 0;
  text-align: center;
  font: inherit;
  font-weight: 700;
  -moz-appearance: textfield;
}
.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.compra .boton { flex: 1; min-width: 190px; }

.ficha__wa { display: flex; margin-top: var(--s3); }
.ficha__wa .boton { flex: 1; }

.ficha__datos {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--linea);
  display: grid;
  gap: var(--s3);
  font-size: .875rem;
}
.ficha__datos div { display: flex; gap: var(--s3); }
.ficha__datos dt { flex: none; width: 130px; color: var(--tinta-2); margin: 0; }
.ficha__datos dd { margin: 0; font-weight: 600; }

/* --- tabla de variantes --- */

.tabla-variantes { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla-variantes th, .tabla-variantes td {
  padding: var(--s3);
  border-bottom: 1px solid var(--linea);
  text-align: left;
}
.tabla-variantes th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.tabla-variantes tbody tr:hover { background: var(--papel); }
.tabla-desborde { overflow-x: auto; }

/* ==========================================================================
   Carrito
   ========================================================================== */

.carrito { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: var(--s7); align-items: start; padding-bottom: var(--s8); }

.linea {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linea);
}
.linea__figura { aspect-ratio: 1; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; }
.linea__figura img { width: 100%; height: 100%; object-fit: cover; }
.linea__nombre { font-weight: 600; margin: 0 0 2px; font-size: .9375rem; }
.linea__variante { font-size: .8125rem; color: var(--tinta-2); }
.linea__quitar {
  border: 0; background: none; padding: 0;
  font-size: .8125rem; color: var(--tinta-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.linea__quitar:hover { color: #B00020; }
.linea__derecha { display: grid; gap: var(--s3); justify-items: end; }
.linea__precio { font-family: var(--display); font-size: 1.375rem; }
.linea .cantidad button { width: 34px; font-size: 1rem; }
.linea .cantidad input { width: 42px; padding-block: 8px; }

.resumen {
  position: sticky;
  top: 112px;
  padding: var(--s5);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  background: var(--papel);
}
.resumen h2 { margin: 0 0 var(--s4); font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; }
.resumen__fila { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s2); font-size: .9375rem; }
.resumen__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 2px solid var(--negro);
}
.resumen__total strong { font-family: var(--display); font-size: 2rem; }
.resumen .boton { margin-top: var(--s5); }
.resumen__nota { margin: var(--s4) 0 0; font-size: .8125rem; color: var(--tinta-2); }

.vacio { text-align: center; padding: var(--s9) var(--s5); }
.vacio h2 { font-family: var(--display); font-size: 1.75rem; text-transform: uppercase; margin: 0 0 var(--s3); }
.vacio p { color: var(--tinta-2); margin: 0 0 var(--s5); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .listado { grid-template-columns: 1fr; gap: var(--s5); }
  .filtros { position: static; display: none; }
  .filtros.abierto { display: block; }
  .filtros-movil { display: inline-flex; }
  .listado .reja-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha { grid-template-columns: 1fr; gap: var(--s6); }
  .carrito { grid-template-columns: 1fr; }
  .resumen { position: static; }
}

@media (max-width: 860px) {
  .galeria { grid-template-columns: 1fr; }
  .galeria__miniaturas { grid-template-columns: repeat(6, 1fr); order: 2; }
  .galeria__mini { width: 100%; }
}

@media (max-width: 620px) {
  .listado .reja-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .listado__cabeza { flex-direction: column; align-items: flex-start; }
  .linea { grid-template-columns: 66px minmax(0, 1fr); }
  .linea__derecha { grid-column: 1 / -1; justify-items: stretch; grid-auto-flow: column; align-items: center; }
  .compra .boton { min-width: 0; }
  .ficha__precio .monto { font-size: 2.5rem; }
}

/* ==========================================================================
   Datos de envío y pago
   Solo se piden datos de ENVÍO y contacto. Los de facturación los pide
   Recurrente en su propia pantalla; duplicarlos acá agrega fricción.
   ========================================================================== */

.envio-datos{ margin-top: var(--s5) }
.envio-datos h2{
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-size: 1.125rem;
  text-transform: uppercase;
}
.envio-datos .pista-seccion{
  margin: 0 0 var(--s4);
  font-size: .8125rem;
  color: var(--tinta-2);
}
/* Solo las etiquetas de campo. Las opciones de pago también son <label>, y
   con este selector suelto les caía el uppercase y salían gritando. */
.envio-datos .campo > label{
  display: block;
  margin-bottom: 5px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.envio-datos input,
.envio-datos select,
.envio-datos textarea{
  width: 100%;
  padding: 11px var(--s3);
  border: 2px solid var(--linea);
  border-radius: 5px;
  font: inherit;
  background: var(--blanco);
  color: var(--tinta);
}
.envio-datos input:focus,
.envio-datos select:focus,
.envio-datos textarea:focus{ outline: 0; border-color: var(--negro) }
.envio-datos textarea{ min-height: 68px; resize: vertical }
.envio-datos .campo{ margin-bottom: var(--s3) }
.envio-datos .dos{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) }

.campo-mal input, .campo-mal select{ border-color: #B00020 }
.campo-error{
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  font-weight: 600;
  color: #B00020;
}

/* --- elegir cómo pagar --- */

.pagos{ display: grid; gap: var(--s3); margin-top: var(--s5) }

.pago-opcion{
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.pago-opcion:hover{ border-color: var(--tinta-2) }
.pago-opcion:has(input:checked){ border-color: var(--negro); background: var(--amarillo-tenue) }
.pago-opcion input{ margin-top: 3px; width: 18px; height: 18px; accent-color: var(--negro) }
.pago-opcion__cuerpo{ flex: 1; min-width: 0 }
.pago-opcion__titulo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-weight: 700;
  font-size: .9375rem;
}
.pago-opcion__nota{ margin: 3px 0 0; font-size: .8125rem; color: var(--tinta-2) }

/* Solo Visa y Mastercard: son las que acepta la tienda. */
.tarjetas{ display: flex; gap: 5px; flex: none }
.tarjetas svg{ display: block; border-radius: 3px }

.pago-error{
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: 5px;
  background: #FDF3F2;
  border: 1px solid #F3C8C2;
  font-size: .8125rem;
  color: #8A1F14;
}

.boton[aria-busy="true"]{ opacity: .65; pointer-events: none }

@media (max-width: 620px){
  .envio-datos .dos{ grid-template-columns: 1fr }
}

/* ==========================================================================
   Páginas de texto (garantía, envíos)
   ========================================================================== */

.legal__cabeza{
  max-width: 62ch;
  padding-bottom: var(--s5);
  margin-bottom: var(--s6);
  border-bottom: 2px solid var(--negro);
}
.legal__titulo{ font-size: clamp(1.75rem, 3.6vw, 2.75rem); margin: var(--s2) 0 var(--s3) }
.legal__bajada{ margin: 0; font-size: 1.0625rem; color: var(--tinta-2); line-height: 1.6 }
.legal__bajada strong{ color: var(--tinta) }

.legal{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s7);
  align-items: start;
  padding-bottom: var(--s9);
}
.legal__texto{ min-width: 0 }
.legal__bloque{ margin-bottom: var(--s6); max-width: 62ch }
.legal__bloque:last-child{ margin-bottom: 0 }
.legal__bloque h2{
  margin: 0 0 var(--s3);
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1.15;
}
.legal__bloque p{ margin: 0 0 var(--s3); line-height: 1.7; color: var(--tinta-2) }
.legal__bloque strong{ color: var(--tinta) }

.legal__lista{ margin: 0 0 var(--s3); padding: 0; list-style: none; display: grid; gap: var(--s2) }
.legal__lista li{
  position: relative;
  padding-left: var(--s5);
  line-height: 1.6;
  color: var(--tinta-2);
}
.legal__lista li::before{
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: 8px; height: 8px;
  background: var(--amarillo);
  border: 1.5px solid var(--negro);
}
.legal__lista--numerada{ counter-reset: paso }
.legal__lista--numerada li{ counter-increment: paso; padding-left: var(--s6) }
.legal__lista--numerada li::before{
  content: counter(paso);
  top: .1em;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 800;
  color: var(--negro);
}

/* Lo que más reclamos evita: que se lea, no que se esconda en letra chica. */
.legal__ojo{
  padding: var(--s4);
  background: var(--amarillo-tenue);
  border-left: 4px solid var(--amarillo);
  border-radius: 0 6px 6px 0;
  color: var(--tinta) !important;
}

.legal__ayuda{
  position: sticky;
  top: 112px;
  padding: var(--s5);
  background: var(--papel);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
}
.legal__ayuda h2{
  margin: 0 0 var(--s2);
  font-family: var(--display);
  font-size: 1.0625rem;
  text-transform: uppercase;
}
.legal__ayuda p{ margin: 0 0 var(--s4); font-size: .9375rem; color: var(--tinta-2) }
.legal__ayuda .boton{ width: 100% }

@media (max-width: 1100px){
  .legal{ grid-template-columns: 1fr; gap: var(--s5) }
  .legal__ayuda{ position: static }
}

/* Una opción sin existencias: tachada a secas parece un error de la página. */
.valor small{
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .75;
}
.valor[disabled] small{ text-decoration: none }

/* ==========================================================================
   Mi cuenta
   El comprador entra con un código que le llega al correo, ve sus pedidos y
   deja guardados sus datos de envío. Misma paleta y mismo motivo de esquina
   que el resto de la tienda.
   ========================================================================== */

.cuenta__intro{
  max-width: 60ch;
  margin: 0 0 var(--s6);
  color: var(--tinta-2);
}

/* --- entrar --- */

.cuenta__acceso{
  max-width: 420px;
  padding: var(--s6);
  background: var(--blanco);
  border: 2px solid var(--linea);
  border-radius: var(--radio-marca);
  margin-bottom: var(--s8);
}
.cuenta__acceso .campo{ margin-bottom: var(--s4) }
.cuenta__acceso .campo > label{
  display: block;
  margin-bottom: 5px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.cuenta__acceso input{
  width: 100%;
  padding: 11px var(--s3);
  border: 2px solid var(--linea);
  border-radius: 5px;
  font: inherit;
  background: var(--blanco);
  color: var(--tinta);
}
.cuenta__acceso input:focus{ outline: 0; border-color: var(--negro) }
.cuenta__acceso .boton{ width: 100% }

/* Seis dígitos, bien separados: se leen del correo y se copian a mano. */
.cuenta__codigo{
  font-family: var(--display);
  font-size: 1.75rem;
  letter-spacing: .5em;
  text-align: center;
}

.cuenta__reenviar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  font-size: .8125rem;
  color: var(--tinta-2);
}
.cuenta__reenviar button{
  background: 0; border: 0; padding: 0;
  font: inherit; font-weight: 700;
  color: var(--tinta);
  text-decoration: underline;
  cursor: pointer;
}

.cuenta__aviso,
.cuenta__error{
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: 5px;
  font-size: .875rem;
  font-weight: 600;
}
.cuenta__aviso{ background: var(--amarillo-tenue); color: #6A5600 }
.cuenta__error{ background: #FDE7EA; color: #B00020 }
.cuenta__campo-error{
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  font-weight: 600;
  color: #B00020;
}

/* --- cabecera de la cuenta --- */

.cuenta__cabeza{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
}
.cuenta__cabeza .listado__titulo{ margin: 0 }
.cuenta__correo{ margin: var(--s2) 0 0; color: var(--tinta-2); font-size: .875rem }
.cuenta__salir{ font-size: .875rem; font-weight: 700; color: var(--tinta-2) }
.cuenta__salir:hover{ color: var(--tinta) }
.cuenta__explica{ margin: 0 0 var(--s6); color: var(--tinta-2) }

/* --- paneles --- */

.cuenta__reja{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s5);
  align-items: start;
  margin-bottom: var(--s8);
}
.cuenta__panel{
  padding: var(--s5);
  background: var(--blanco);
  border: 2px solid var(--linea);
  border-radius: var(--radio-marca);
}
.cuenta__panel h2{
  margin: 0 0 var(--s4);
  font-family: var(--display);
  font-size: 1.125rem;
  text-transform: uppercase;
}
.cuenta__panel h2 + h2{ margin-top: var(--s5) }
.cuenta__vacio{ color: var(--tinta-2); margin: 0 0 var(--s4) }
.cuenta__vacio a{ font-weight: 700; text-decoration: underline }
.cuenta__datos{ margin: 0 0 var(--s4); line-height: 1.7 }
.cuenta__nota{ margin: 0 0 var(--s4); font-size: .8125rem; color: var(--tinta-3) }

/* --- lista de pedidos --- */

.cuenta__pedidos{ list-style: none; margin: 0; padding: 0 }
.cuenta__pedidos li + li{ border-top: 1px solid var(--linea) }
.cuenta__pedidos a{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s2);
  color: inherit;
}
.cuenta__pedidos a:hover{ background: var(--papel) }
.cuenta__pedido-datos strong{ display: block; font-size: 1rem }
.cuenta__pedido-datos span{ font-size: .8125rem; color: var(--tinta-2) }
.cuenta__pedido-lado{ display: flex; align-items: center; gap: var(--s4) }

.cuenta__estado{
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cuenta__estado--ok{ background: var(--amarillo); color: var(--negro) }
.cuenta__estado--espera{ background: var(--papel); color: var(--tinta-2); border: 1px solid var(--linea) }
.cuenta__estado--malo{ background: #FDE7EA; color: #B00020 }
.cuenta__estado--grande{ font-size: .875rem; padding: 8px 16px }

/* --- línea de tiempo del pedido --- */

.cuenta__pasos{
  display: flex;
  list-style: none;
  margin: 0 0 var(--s6);
  padding: 0;
  counter-reset: paso;
}
.cuenta__pasos li{
  flex: 1;
  position: relative;
  padding-top: 26px;
  font-size: .8125rem;
  color: var(--tinta-3);
  text-align: center;
}
/* La línea que une los puntos. Va detrás, de un punto al anterior. */
.cuenta__pasos li::before{
  content: '';
  position: absolute;
  top: 8px; right: 50%; left: -50%;
  height: 2px;
  background: var(--linea);
}
.cuenta__pasos li:first-child::before{ display: none }
.cuenta__pasos li.hecho::before{ background: var(--amarillo) }
.cuenta__punto{
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--linea);
  background: var(--blanco);
}
.cuenta__pasos li.hecho .cuenta__punto{ background: var(--amarillo); border-color: var(--amarillo) }
.cuenta__pasos li.hecho{ color: var(--tinta-2) }
.cuenta__pasos li.actual{ color: var(--tinta); font-weight: 800 }
.cuenta__pasos li.actual .cuenta__punto{ border-color: var(--negro); background: var(--negro) }

/* --- tabla del pedido --- */

.cuenta__tabla{ width: 100%; border-collapse: collapse }
.cuenta__tabla td{ padding: var(--s3) 0; vertical-align: top }
.cuenta__tabla tbody tr + tr td{ border-top: 1px solid var(--linea) }
.cuenta__tabla tfoot td{ padding: 6px 0; color: var(--tinta-2); font-size: .875rem }
.cuenta__tabla tfoot tr:first-child td{ border-top: 2px solid var(--linea); padding-top: var(--s3) }
.cuenta__variante{ font-size: .8125rem; color: var(--tinta-2) }
.cuenta__cant{ color: var(--tinta-2); white-space: nowrap }
.cuenta__precio{ text-align: right; white-space: nowrap }
.cuenta__total td{ padding-top: var(--s3); color: var(--tinta); font-size: 1.0625rem; font-weight: 800 }

.cuenta__acciones{ display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5) }
.cuenta__forma-datos{ max-width: 460px }
.cuenta__volver{ margin: 0 0 var(--s8) }
.cuenta__volver a{ font-weight: 700 }

/* Aviso en el checkout cuando el formulario se llenó desde la cuenta. */
.envio-cuenta{
  margin: 0 0 var(--s4);
  padding: var(--s3);
  background: var(--amarillo-tenue);
  border-radius: 5px;
  font-size: .8125rem;
  color: #6A5600;
}
.envio-cuenta a{ font-weight: 700; text-decoration: underline }

@media (max-width: 860px){
  .cuenta__reja{ grid-template-columns: 1fr }
  .cuenta__pasos li{ font-size: .6875rem }
}

/* --------------------------------------------------------------- gracias --
   La pantalla a la que vuelve el comprador después de pagar. Poco texto, una
   acción clara y el número del pedido a la vista para poder citarlo. */

.gracias{
  max-width: 620px;
  margin: var(--s7) auto var(--s9);
  padding: var(--s7) var(--s6);
  background: var(--blanco);
  border: 2px solid var(--linea);
  border-radius: var(--radio-marca);
  text-align: center;
}
.gracias__titulo{
  margin: var(--s3) 0 var(--s4);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  text-transform: uppercase;
}
.gracias__numero{
  display: inline-block;
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--amarillo-tenue);
  border-radius: 5px;
  font-size: .9375rem;
}
.gracias__numero strong{ font-family: var(--display); letter-spacing: .04em }
.gracias__texto{ margin: 0 auto var(--s6); max-width: 46ch; color: var(--tinta-2) }
.gracias__acciones{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.gracias__pie{
  margin: 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--linea);
  font-size: .8125rem;
  color: var(--tinta-3);
}
.gracias__pie a{ font-weight: 700; text-decoration: underline }

/* La aclaración de qué municipios entran en el área metropolitana. Va debajo
   del precio y más chica: es la letra que se lee solo si a uno le toca. */
.legal__aparte{
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta-2);
  font-weight: 400;
}

/* Cuando todavía falta un dato para saber el envío, la fila dice qué falta en
   vez de un precio. Se ve como una indicación, no como un monto. */
.resumen__pendiente {
  font-size: .8125rem;
  color: var(--tinta-2);
  text-align: right;
}