/* Portado de la maqueta ac-mezcla (paleta menta) una sola vez (78bbddd); desde entonces se edita aquí. */
/* La portada: el blíster de 2 € posado en la mesa del cumple. El cartón lleva la pestaña de
   colgar (por su agujero se ve el mantel), la marca y el texto impresos, y la ventana de plástico con el móvil y la
   figura dentro. Al cargar, la tapa se abre como una concha hacia la derecha, se retira y deja la lista a la vista. */

.listachan .aviso-borrada {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px; margin: 16px var(--margen) 0; padding: 12px 16px;
  border-radius: var(--radio-papel); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-baja);
  font-weight: 700; line-height: 1.35;
}
.listachan .aviso-borrada .ico { color: var(--acento-tinta); stroke-width: 2.4; }

/* ---------- La portada ---------- */
.listachan .portada { position: relative; z-index: 1; padding: 0 var(--margen); }
/* En el móvil el cartón empieza bajo la tarta de la foto (que acaba a 148/390 del ancho): la tarta se ve entera */
/* La sombra del cartón es box-shadow (un rectángulo redondeado), no un filtro: la tapa que se abre encima ya no
   obliga a repintar un filtro grande en cada fotograma. El filtro queda solo en la pestaña, que es pequeña. */
.listachan .blister {
  position: relative;
  margin-top: clamp(124px, 37vw, 220px);
  padding: 22px 18px 20px; border-radius: var(--radio-carton);
  background: var(--papel); box-shadow: var(--sombra-mesa);
}
/* la pestaña de colgar: el mismo cartón, con el agujero de sombrero que deja ver el mantel. Su sombra se recorta en
   el canto de abajo (clip-path), para que no caiga sobre la cara impresa. */
.listachan .blister-pestana {
  position: absolute; top: -44px; left: 32px; width: 112px; height: 45px; overflow: visible;
  filter: drop-shadow(1px 2px 1px rgb(var(--sombra) / .16)) drop-shadow(5px 10px 9px rgb(var(--sombra) / .3));
  clip-path: inset(-30px -30px 1px -30px);
}
.listachan .blister-pestana path { fill: var(--papel); }

/* La marca, impresa en tinta en el cartón como el nombre del producto. Un solo sitio: aquí. */
.listachan .marca {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 4px;
  color: var(--acento-tinta); font: 400 26px/1 var(--letra-caja); letter-spacing: -.005em; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.listachan .marca:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .listachan .marca { transition: color 160ms ease; }
  .listachan .marca:hover { color: var(--tinta); }
}

.listachan .blister-texto h1 { max-width: 15ch; }
.listachan .portada-lema { margin-top: 14px; max-width: 34ch; font-size: 18px; line-height: 1.5; }
.listachan .blister-texto .accion { margin-top: 22px; }

/* La vitrina: la leyenda impresa en el cartón, junto al canto de la bandeja, y la bandeja de plástico */
.listachan .vitrina { margin-top: 26px; }
.listachan .vitrina-leyenda { margin: 0 0 8px 2px; color: var(--tinta-suave); font: 600 15px/1.3 var(--letra); }
.listachan .ventana {
  position: relative; padding: 14px;
  border-radius: var(--radio-plastico);
  background:
    radial-gradient(120% 90% at 20% 0%, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 60%),
    var(--papel-2);
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / .9),
    inset 0 0 0 3.5px rgb(var(--sombra) / .12),
    inset 0 10px 18px -12px rgb(var(--sombra) / .4);
}
.listachan .ventana-bandeja { display: grid; grid-template-columns: minmax(0, 1fr) 36%; align-items: end; gap: 6px; }
.listachan .movil--portada { --ancho: 100%; max-width: 236px; rotate: -2.5deg; }
.listachan .figura--portada { width: 100%; margin-bottom: -4px; }

/* La tapa: la cúpula de plástico (render de a-blister), con su pestaña plana. En reposo ya no está: al cargar se ve
   cerrada, se abre girando sobre su canto derecho y se retira (movimiento.css, 1). Nunca se queda encima de la mesa. */
.listachan .tapa {
  position: absolute; z-index: 5; inset: -9px; pointer-events: none;
  transform-origin: 100% 50%;
  filter: drop-shadow(4px 10px 10px rgb(var(--sombra) / .22));
  opacity: 0;
}
/* La foto del plástico solo se carga si la tapa se va a ver (con «reducir movimiento» no hay tapa) */
@media (prefers-reduced-motion: no-preference) {
  .listachan .tapa {
    background: url("../img/plastico-portada.webp") center / 100% 100% no-repeat;
  }
}
/* La pegatina del precio, sobre el plástico: en el móvil, en el hueco de encima de la figura */
.listachan .pegatina-precio--portada { top: 12px; right: -10px; }

/* ---------- Tableta: el mismo blíster, más ancho ---------- */
@media (min-width: 560px) {
  .listachan .pegatina-precio--portada { top: -30px; right: -12px; }
}
@media (min-width: 700px) {
  .listachan .portada { max-width: 760px; }
  .listachan .blister { margin-top: 120px; padding: 30px 32px 28px; }
  .listachan .vitrina { max-width: 460px; }
  .listachan .pegatina-precio--portada { --lado: 124px; }
}

/* ---------- Escritorio: el blíster apaisado a la izquierda y la mesa a la derecha ---------- */
@media (min-width: 1100px) {
  .listachan .aviso-borrada { max-width: var(--ancho); margin-inline: auto; }
  .listachan .portada { max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; }
  .listachan .blister {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 44px; align-items: center;
    width: min(1040px, 100%); margin-top: 136px; padding: 44px 44px 44px 52px;
  }
  .listachan .blister-pestana { left: 72px; }
  .listachan .marca { font-size: 30px; margin-bottom: 6px; }
  .listachan .blister-texto h1 { max-width: 17ch; }
  .listachan .vitrina { margin-top: 0; max-width: none; }
  .listachan .movil--portada { max-width: 200px; }
  .listachan .pegatina-precio--portada { --lado: 132px; top: -40px; right: -34px; }
  .listachan .pegatina-precio--portada .pegatina-num { font-size: 48px; }
}