/* =====================================================================
   inauguracion.css — Campaña "Inauguración de la tienda online"
   (19-oct-2026). Mismo archivo en los dos sitios; solo usa las variables
   de cada marca. Se carga únicamente mientras la promoción esté vigente
   (ver includes/layout_header.php y includes/partials/inauguracion.php).
   ===================================================================== */

/* ── La etiqueta cosida (portada) ─────────────────────────────────── */
.inaug-sello {
  --inaug-fondo: var(--black);
  --inaug-texto: var(--linen);
  --inaug-hilo:  var(--gold);
  --inaug-acento: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "txt pct" "pie pie";
  align-items: center;
  column-gap: 18px; row-gap: 6px;
  width: 100%; max-width: 440px;
  padding: 16px 20px 14px;
  background: var(--inaug-fondo);
  color: var(--inaug-texto);
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 10px 26px rgba(13, 13, 13, .16);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
/* Niccola: su carbón y su oliva; el % en crema para que respire. */
.inaug-sello.inaug--m2 {
  --inaug-hilo: #A9AD94;
  --inaug-acento: var(--linen);
  border-radius: 14px 4px 14px 4px; /* la "hoja" de Niccola (niccola-identidad.css) */
}
/* La costura: un pespunte que bordea la etiqueta por dentro. */
.inaug-sello::before {
  content: ''; position: absolute; inset: 6px;
  border: 1.5px dashed var(--inaug-hilo);
  border-radius: inherit;
  opacity: .8; pointer-events: none;
}
/* El doblez de la marquilla, arriba a la izquierda. */
.inaug-sello::after {
  content: ''; position: absolute; top: -7px; left: 22px;
  width: 30px; height: 9px;
  background: var(--inaug-fondo);
  filter: brightness(.82);
  border-radius: 2px 2px 0 0;
}
.inaug-sello-txt { grid-area: txt; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inaug-sello-titulo {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 26px; line-height: 1.05; color: var(--inaug-acento);
}
.inaug-sello-linea { font-family: var(--font-body); font-size: 13.5px; line-height: 1.3; opacity: .92; }
.inaug-sello-pct {
  grid-area: pct;
  font-family: var(--font-display); font-weight: 500;
  font-size: 64px; line-height: .9; letter-spacing: -.02em;
  color: var(--inaug-acento);
  font-variant-numeric: lining-nums;
}
.inaug-sello-pct span { font-size: .46em; margin-left: 2px; vertical-align: .62em; }
.inaug-sello-pie {
  grid-area: pie;
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.4;
  padding-top: 8px; border-top: 1px solid rgba(250, 248, 245, .16);
}
.inaug-sello-pie u { text-underline-offset: 2px; white-space: nowrap; }
.inaug-sello:focus-visible { outline: 2px solid var(--inaug-hilo); outline-offset: 4px; }

/* Entrada: un solo momento — la etiqueta "se cose" al cargar la portada. */
@media (prefers-reduced-motion: no-preference) {
  .inaug-sello { animation: inaug-cosido .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .inaug-sello::before { animation: inaug-hilo 1.1s ease-out .45s both; }
}
@keyframes inaug-cosido {
  from { opacity: 0; transform: rotate(-5deg) translateY(10px); }
  to   { opacity: 1; transform: rotate(-1.2deg) translateY(0); }
}
@keyframes inaug-hilo { from { opacity: 0; } to { opacity: .8; } }

/* Versión compacta: tráfico de anuncio en celular (la portada va directo a las prendas). */
.inaug-sello--compacto { padding: 12px 16px 11px; column-gap: 12px; transform: rotate(-.6deg); }
.inaug-sello--compacto .inaug-sello-titulo { font-size: 21px; }
.inaug-sello--compacto .inaug-sello-linea { font-size: 12.5px; }
.inaug-sello--compacto .inaug-sello-pct { font-size: 48px; }
.inaug-sello--compacto .inaug-sello-pie { font-size: 11.5px; padding-top: 6px; }

@media (max-width: 380px) {
  .inaug-sello-titulo { font-size: 22px; }
  .inaug-sello-pct { font-size: 52px; }
}

/* ── Franja de celular (debajo del encabezado) ───────────────────── */
/* En celular la barra superior no tiene espacio para el texto de la
   promoción (solo caben país, moneda e idioma): sin esta franja, el 99 %
   de las visitas no se enteraba del 10 % hasta llegar al carrito. */
.inaug-franja { display: none; }
@media (max-width: 640px) {
  .inaug-franja {
    display: block;
    padding: 9px 16px;
    background: var(--gold); color: var(--black);
    font-family: var(--font-body); font-size: 12.5px; line-height: 1.35;
    text-align: center; text-decoration: none;
    border-bottom: 1px solid rgba(13, 13, 13, .08);
  }
  .inaug-franja.inaug--m2 { background: var(--gold-2); color: var(--linen); }
  .inaug-franja u { white-space: nowrap; text-underline-offset: 2px; }
}

/* ── Etiqueta de inauguración en la ficha ─────────────────────────── */
.pdp-promo-general .inaug-pdp-titulo { font-weight: 600; }