/* =====================================================================
   ESTADO "VENDIDA"
   ---------------------------------------------------------------------
   Hoja compartida: la cargan index.html y producto.html. El sello tiene
   que verse igual en la grilla y en la landing, así que vive acá y no
   duplicado en style.css y producto.css.

   Los textos NO están en este archivo: salen de TEXTOS_VENDIDO
   (js/config.js), que es el punto único de traducción.
   ===================================================================== */
:root {
  --vendido: #C62828;
  --vendido-escuro: #8E1F1F;
  --vendido-fundo: #FDEDED;
}

/* ===== SELLO DIAGONAL SOBRE LA FOTO =====
   Va dentro de un contenedor con position:relative (.product-img-wrap en
   la grilla, .galeria-principal en la landing).

   pointer-events:none es importante: sin eso el sello se come el clic y
   se rompen el enlace de la tarjeta y el lightbox de la galería.

   El fondo semitransparente blanco no es decoración: garantiza que el
   rojo se lea tanto sobre las fotos claras (fondo de estudio) como sobre
   las oscuras (veludo bordô, couro azul-marinho). */
.selo-vendida {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-21deg);
  z-index: 3;
  pointer-events: none;

  font-family: 'Lato', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
  white-space: nowrap;

  color: var(--vendido);
  background: rgba(255, 255, 255, 0.28);
  border: 0.14em solid var(--vendido);
  border-radius: 0.12em;
  padding: 0.3em 0.75em 0.3em 0.95em;   /* extra a la izquierda: lo compensa el letter-spacing final */

  opacity: 0.88;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Tamaños por contexto. Se fijan acá en vez de con unidades de container
   query para no tener que declarar `container-type` sobre .product-img-wrap,
   que ya depende de aspect-ratio para su altura. */
.product-img-wrap .selo-vendida { font-size: 1.25rem; }
.galeria-principal .selo-vendida { font-size: 2.3rem; }
#lightbox .selo-vendida { font-size: 3rem; }

@media (max-width: 820px) {
  .product-img-wrap .selo-vendida { font-size: 1rem; }
  .galeria-principal .selo-vendida { font-size: 1.7rem; }
  #lightbox .selo-vendida { font-size: 2rem; }
}

/* ===== GRILLA: tarjeta vendida ===== */
/* El zoom al pasar el mouse se queda: el sello está fuera del <img>, así
   que no se agranda con él. Lo que sí cambia es el botón de compra. */
.product-price.vendida {
  color: var(--vendido);
  font-weight: 700;
}
/* Ocupa el mismo lugar que .btn-add-cart en la línea del precio, para que la
   fila no se descoloque cuando una pieza está vendida. */
.btn-vendida {
  flex-shrink: 0;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--vendido);
  background: var(--vendido-fundo);
  color: var(--vendido);
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: not-allowed;
}

/* ===== LANDING: aviso rojo grande ===== */
.aviso-vendido {
  border: 2px solid var(--vendido);
  background: var(--vendido-fundo);
  border-left-width: 6px;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.4rem;
}
.aviso-vendido h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;              /* mayor que .info-nome, como pidió el cliente */
  font-weight: 700;
  color: var(--vendido);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.aviso-vendido p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--vendido-escuro);
}
.aviso-vendido .aviso-cta {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.6rem 1.2rem;
  background: var(--vendido);
  color: #fff;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.25s ease;
}
.aviso-vendido .aviso-cta:hover { background: var(--vendido-escuro); }

@media (max-width: 820px) {
  .aviso-vendido h2 { font-size: 1.5rem; }
}

/* Precio tachado y botones inutilizados en la caja de compra */
.caixa-preco.vendida {
  text-decoration: line-through;
  text-decoration-color: var(--vendido);
  opacity: 0.55;
}
.btn-caixa[disabled],
.btn-secundario[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(1);
}

/* ===== POPUP AL ABRIR UNA LANDING VENDIDA ===== */
#modal-vendido {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 10, 10, 0.62);
}
#modal-vendido.aberto { display: flex; }

.modal-vendido-caixa {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-top: 5px solid var(--vendido);
  padding: 2.2rem 2rem 1.8rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  animation: modalEntra 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes modalEntra {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
/* Respeta a quien pidió menos animación en el sistema */
@media (prefers-reduced-motion: reduce) {
  .modal-vendido-caixa { animation: none; }
}

.modal-vendido-caixa h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  color: var(--vendido);
  margin-bottom: 0.8rem;
}
.modal-vendido-caixa p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text2, #444);
  margin-bottom: 0.7rem;
}
.modal-vendido-caixa .modal-pergunta {
  font-weight: 700;
  color: var(--text, #0A0A0A);
  margin: 1.1rem 0 1.3rem;
}
.modal-vendido-cta {
  display: block;
  padding: 0.85rem;
  background: var(--wa-green, #1a6b3a);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: filter 0.25s ease;
}
.modal-vendido-cta:hover { filter: brightness(1.15); }

.modal-vendido-fechar-txt {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  background: none;
  border: 0;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  color: var(--text2, #444);
  text-decoration: underline;
  cursor: pointer;
}
.modal-vendido-fechar {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  background: none;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
}
.modal-vendido-fechar:hover { color: var(--vendido); }

/* ===== AVISO DE PIEZA ÚNICA / ENCARGO =====
   Se muestra al pedir más de una unidad del mismo modelo. En ámbar y no en
   rojo a propósito: no es un error ni un bloqueo, es información de plazo.
   Aparece igual en la caja de compra y en el carrito, de ahí que viva acá y
   no duplicado en producto.css y carrinho.css. */
.aviso-unica {
  border: 1px solid #E0B84C;
  border-left: 4px solid #E0B84C;
  background: #FFFBEF;
  padding: 0.8rem 0.9rem;
  margin: 0.9rem 0;
  font-family: 'Lato', sans-serif;
}
.aviso-unica strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A6A12;
  margin-bottom: 0.35rem;
}
.aviso-unica p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #5C4A16;
  margin-bottom: 0.5rem;
}
.aviso-unica a {
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--wa-green, #1a6b3a);
  text-decoration: none;
}
.aviso-unica a:hover { text-decoration: underline; }

/* ===== CARRITO: pieza vendida después de agregada ===== */
.carrinho-item.vendida { background: var(--vendido-fundo); }
.carrinho-item-vendida {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--vendido);
  padding: 0.15rem 0.5rem;
}