/* La tienda. Hereda de /comun/estilos.css la cabecera, la tipografía y los
   colores; aquí sólo va lo suyo.

   La idea es un ESCAPARATE, no una lista: cada producto se apoya sobre una
   superficie clara con una luz encima, como en una vitrina, y el precio va en
   una etiqueta de las de colgar en vez de en texto suelto. Las fotos vienen con
   el fondo quitado, así que necesitan esa superficie: sobre blanco a secas la
   totebag y la pañoleta, que son de tela clara, se quedarían flotando. */

/* ------------------------------------------------------------------ rótulo */
.rotulo {
  position: relative;
  margin: 0 0 26px;
  padding: 26px 26px 24px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(125deg, var(--sup-baja, #0a1250) 0%, var(--sup-media, #0e1d7a) 55%, var(--sup-alta, #172cae) 100%);
  color: #fff;
}
/* La sota, de marca de agua, como en el resto de la casa. */
.rotulo::after {
  content: '';
  /* La caja dentro y la imagen asomando (ver .module::after del comité). */
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 156px;
  background: url('/icons/sotablanca-chica.png') no-repeat 25px 0 / auto 190px;
  opacity: .12;
  pointer-events: none;
}
.rotulo-eti {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #f7e8c3;
}
.rotulo h1 {
  position: relative;
  margin: 0 0 10px;
  font-size: clamp(28px, 6.5vw, 44px);
  line-height: 1.05;
  color: #fff;
}
.rotulo p {
  position: relative;
  margin: 0;
  max-width: 48ch;
  color: #ccd6fb;
  font-size: 15.5px;
}










/* --------------------------------------------------------------- la lupa */
dialog#lupa {
  border: none;
  padding: 0;
  width: min(760px, calc(100vw - 28px));
  border-radius: 20px;
  overflow: hidden;                 /* la barra de arriba se recorta al redondeo */
  background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #eef1fa 60%, #dfe6f7 100%);
  box-shadow: 0 24px 60px rgba(11, 22, 96, .35);
}
dialog#lupa::backdrop { background: rgba(11, 22, 96, .55); backdrop-filter: blur(3px); }
dialog#lupa[open] { animation: entra-lupa 220ms cubic-bezier(.23, 1, .32, 1); }
@keyframes entra-lupa {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* La barra de arriba: el nombre y la X. Va en el flujo y NO flotando sobre la
   foto — con la pulsera y el ticket, que son anchos y planos, la X caía encima
   del producto; y además la foto la tapaba, porque su drop-shadow le crea
   contexto de apilado y, al ir después en el marcado, se pintaba por delante.
   La X no se podía ni pulsar. */
.lupa-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--borde, #dde2f2);
  background: var(--tarjeta);
}
.lupa-pie {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  color: var(--azul-noche, #0b1660);
}
.lupa-cerrar {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--borde, #dde2f2);
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--tinta-suave, #6a7196);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.lupa-cerrar:hover { color: var(--azul-oscuro, #12279c); border-color: var(--azul, #1d3fe8); }
.lupa-cerrar:active { transform: scale(.94); }

#lupa-img {
  display: block;
  width: 100%;
  max-height: 68dvh;
  object-fit: contain;
  padding: 26px;
  filter: drop-shadow(0 10px 20px rgba(11, 22, 96, .2));
}

/* --------------------------------------------------------------- el pie */
.donde {
  margin: 26px 0 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--tarjeta);
  border: 1px solid var(--borde, #dde2f2);
}
/* --titulo y no --azul-noche: en el tema oscuro --azul-noche es casi negro
   y el título desaparecía sobre la tarjeta (1,1 de contraste). En el claro
   es el mismo color. */
.donde h2 { margin: 0 0 6px; font-size: 17px; color: var(--titulo, #0b1660); }
.donde p { margin: 0; color: var(--tinta-suave, #6a7196); font-size: 15px; max-width: 60ch; }

@keyframes brillo {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.entra { animation: entra 320ms cubic-bezier(.23, 1, .32, 1) backwards; }
@keyframes entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.vacio {
  grid-column: 1 / -1;
  padding: 26px;
  text-align: center;
  color: var(--tinta-suave, #6a7196);
  border: 1px dashed var(--borde, #dde2f2);
  border-radius: 14px;
  background: var(--tarjeta);
}

.hidden { display: none !important; }

/* -------------------------------------------------------------------- móvil */


@media (prefers-reduced-motion: reduce) {
  /* Se apaga lo que se MUEVE, no lo que cambia de color: un fundido no marea
     a nadie y sin él las cosas aparecen de golpe. Antes era
     "animation: none !important" sobre TODO, y una regla así en una hoja y no
     en la de al lado es lo que hace que algo se vea distinto en una cara y no
     en la otra. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------- avisos */
/* "Quedan pocas" y "Agotado". Van SOBRE la foto, en una esquina, porque es
   donde se mira primero y porque así no empujan nada de sitio.

   Lo que dicen es lo justo: que corre prisa o que ya no hay. Cuántas quedan no

/* Quedan pocas: en oro, que es el color de la casa para "esto interesa". */
.aviso-pocas {
  background: var(--oro);
  color: #3a2b05;
}

/* Agotado: apagado y sin color, que es justo lo que quiere decir. */
.aviso-agotado {
  background: rgba(12, 18, 38, .82);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* En un móvil el rótulo se aprieta. */
@media (max-width: 620px) {
  .rotulo { padding: 20px 18px; border-radius: 16px; }
}