/* Merka — La promoción de la tienda del vendedor y su sello «¡Rebajas de
   hoy!» (TIENDA-DEL-VENDEDOR.md §7.3). Aparte de tienda-vendedor.css: solo
   la baja la tienda con una promoción vigente. */

/* La letra redondeada, para quien la escoja: el navegador solo la baja si se usa. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fuentes/fredoka.woff2") format("woff2"); }
/* La condensada (Oswald, libre: ver fuentes/LICENCIA-OSWALD.txt), igual en todos los equipos. */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("fuentes/oswald.woff2") format("woff2"); }

/* 3. Promoción (§7.3), rehecha con JC el 5 oct 2026. El fondo es una capa
   aparte (.tv-promo-fondo) para que la segunda fila de tarjetas pueda salir
   de él. Los colores llegan del vendedor como variables, ya ajustados para
   que se lean (EstiloDePromo::colores): --pf fondo y --pf1/--pf2 su
   degradado, --pa acento y --pat su letra, --pe la etiqueta, --pt título,
   --pc palabra destacada, --pd texto destacado, --pp precio. */
.tv-promo { --pp-pad: clamp(22px,3vw,40px); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(18px,3vw,40px); padding: var(--pp-pad); }
.tv-promo-fondo { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: 28px 28px 28px 10px; background: radial-gradient(ellipse 60% 90% at 0% 0%, rgba(255,255,255,.10), transparent 70%), linear-gradient(135deg, var(--pf1) 0%, var(--pf) 55%, var(--pf2) 100%); box-shadow: rgba(20,10,46,.22) 0 18px 40px; }
/* Un «%» grande y tenue detrás del texto: el detalle de la rebaja. */
.tv-promo-fondo::before { content: "%"; position: absolute; left: -2%; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: clamp(260px,30vw,460px); font-weight: 900; line-height: 1; color: rgba(255,255,255,.06); }
.tv-promo-texto { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 28px; padding: 6px 0; }
.tv-promo-arriba { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tv-promo-etiqueta { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--pe); }
.tv-pct { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px 14px 14px 4px; background: var(--pa); color: var(--pat); box-shadow: rgba(0,0,0,.22) 0 8px 20px; transform: rotate(-8deg); transition: transform 260ms cubic-bezier(.3,1.6,.5,1); }
.tv-promo:hover .tv-pct { transform: rotate(4deg) scale(1.06); }
.tv-btn-promo { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 14px 14px 14px 4px; background: var(--pa); color: var(--pat); font-size: 17px; font-weight: 800; text-decoration: none; box-shadow: rgba(0,0,0,.2) 0 10px 22px; transition: transform 160ms ease; }
.tv-btn-promo:hover { color: var(--pat); transform: translateY(-2px); }

/* Con 3 o más productos, el fondo termina en el 60 % de la segunda fila y
   lo demás sale de él (JC, 5 oct 2026). Sin relleno abajo, la altura del
   bloque (H) es la de las dos filas: el fondo deja libre 0,2 × (H − relleno
   − espacio entre filas), y el texto ocupa lo que queda dentro del fondo. */
@media (min-width: 1101px) {
  .tv-promo-sale { padding-bottom: 0; }
  .tv-promo-sale .tv-promo-fondo { bottom: calc(20% - .2 * var(--pp-pad) - 3.2px); }
  .tv-promo-sale .tv-promo-texto { align-self: start; height: calc(80% - var(--pp-pad) + 3.2px); }
}

/* El título y el texto destacado: lo que escogió el vendedor en
   EstiloDePromo. l: letra, t: tamaño, g: grosor, e: efecto; la palabra
   destacada, k: su tamaño y m: mayúsculas. */
.tv-promo-titulo, .tv-promo-destacado { margin: 0; max-width: 100%; line-height: 1.05; letter-spacing: -.5px; overflow-wrap: anywhere; }
.tv-promo-titulo { color: var(--pt); }
.tv-promo-clave { color: var(--pc); line-height: .95; }
.tv-promo-destacado { color: var(--pd); line-height: 1.2; }
.tv-l-igual { font-family: inherit; }
.tv-l-moderna { font-family: var(--fuente); }
.tv-l-redondeada { font-family: "Fredoka", var(--fuente); letter-spacing: 0; }
.tv-l-clasica { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
.tv-l-condensada { font-family: "Oswald", Impact, "Arial Narrow Bold", sans-serif-condensed, sans-serif; letter-spacing: 0; }
.tv-promo-titulo.tv-t-mediano { font-size: clamp(26px,2.8vw,38px); }
.tv-promo-titulo.tv-t-grande { font-size: clamp(30px,3.8vw,52px); }
.tv-promo-titulo.tv-t-muy-grande { font-size: clamp(36px,4.8vw,66px); }
.tv-promo-destacado.tv-t-mediano { font-size: clamp(20px,2.2vw,30px); }
.tv-promo-destacado.tv-t-grande { font-size: clamp(26px,3vw,40px); }
.tv-promo-destacado.tv-t-muy-grande { font-size: clamp(32px,4vw,52px); }
.tv-k-igual { font-size: 1em; }
.tv-k-grande { font-size: 1.2em; }
.tv-k-muy-grande { font-size: 1.45em; }
.tv-k-enorme { font-size: 1.75em; }
.tv-m-no { text-transform: none; }
.tv-m-si { text-transform: uppercase; }
.tv-g-normal { font-weight: 500; }
.tv-g-gruesa { font-weight: 700; }
.tv-g-muy-gruesa { font-weight: 800; }
.tv-e-ninguno { filter: none; }
.tv-e-sombra { filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.tv-e-brillo { filter: drop-shadow(0 0 14px rgba(255,255,255,.45)); }
.tv-e-inclinada { font-style: italic; }

/* Las tarjetas: blancas, para que la parte que sale del fondo se vea bien
   sobre la página. */
.tv-promo-productos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-content: start; }
.tv-promo-card { gap: 10px; padding: 8px; border-radius: 20px 20px 20px 8px; background: #fff; color: #1a1a1a; text-decoration: none; box-shadow: rgba(20,10,46,.18) 0 14px 34px; transition: transform 160ms ease, box-shadow 160ms ease; }
.tv-promo-card:hover { color: #1a1a1a; transform: translateY(-3px); box-shadow: rgba(20,10,46,.24) 0 20px 40px; }
.tv-promo-foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #f1f1f1; }
/* El descuento: rojo, que es como se reconoce una rebaja, y el número grande. */
.tv-chip-desc { position: absolute; top: 10px; left: 10px; display: flex; align-items: baseline; gap: 1px; padding: 6px 11px 7px; border-radius: 12px 12px 12px 4px; background: #e0251b; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; box-shadow: rgba(120,8,0,.35) 0 6px 14px; transform-origin: 0 0; }
.tv-chip-desc b { font-size: 26px; font-weight: 900; letter-spacing: -.5px; }
.tv-promo-datos { display: flex; flex-direction: column; gap: 4px; padding: 2px 8px 8px; }
.tv-promo-nombre { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-promo-precio { font-size: clamp(20px,2vw,26px); font-weight: 800; line-height: 1.1; color: var(--pp); }
.tv-promo-datos del { font-size: 14px; color: #8a8a8a; }
.tv-promo.tv-estalla { animation: tvPunch 760ms cubic-bezier(.2,.9,.25,1) 120ms both; }
.tv-promo.tv-estalla .tv-pct { animation: tvPctPop 820ms cubic-bezier(.3,1.7,.45,1) 300ms both; }
.tv-promo.tv-estalla .tv-chip-desc { animation: tvChip 760ms cubic-bezier(.3,1.7,.45,1) both; animation-delay: calc(700ms + var(--d,0ms)); }
@keyframes tvPunch { 0% { transform: scale(1); } 18% { transform: scale(.985); } 46% { transform: scale(1.012); } 100% { transform: scale(1); } }
@keyframes tvPctPop { 0% { transform: rotate(-8deg) scale(1); } 22% { transform: rotate(-18deg) scale(.82); } 55% { transform: rotate(6deg) scale(1.28); } 100% { transform: rotate(-8deg) scale(1); } }
@keyframes tvChip { 0% { transform: scale(.4) rotate(-18deg); opacity: 0; } 55% { transform: scale(1.25) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* El sello «¡Rebajas de hoy!»: capa aparte que sigue a la promoción */
.tv-rebaja { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.tv-rebaja-ancla { position: absolute; width: 0; height: 0; }
.tv-rebaja-zoom { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); animation: tvRebIn 1100ms cubic-bezier(.16,1,.3,1) both; }
.tv-rebaja.tv-sale .tv-rebaja-zoom { animation: tvRebOut 440ms cubic-bezier(.4,0,.6,1) both; }
.tv-sello { position: relative; width: var(--sw,420px); aspect-ratio: 660 / 503; }
.tv-sello > img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 18px 34px rgba(10,4,30,.5)); animation: tvSelloLatido 1600ms ease-in-out 1100ms infinite alternate; }
.tv-rebaja-x { position: absolute; z-index: 2; top: 4%; right: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: #e0251b; color: #fff; cursor: pointer; pointer-events: auto; box-shadow: 0 6px 16px rgba(0,0,0,.3); animation: tvRebX 400ms ease 900ms both; transition: background 140ms ease, transform 140ms ease; }
.tv-rebaja-x:hover { background: #b81a12; transform: scale(1.08); }
.tv-rebaja-x:focus-visible { outline: 2px solid #ffea41; outline-offset: 2px; }
@keyframes tvSelloLatido { from { transform: rotate(0deg) scale(1); } to { transform: rotate(-1.5deg) scale(1.03); } }
@keyframes tvRebIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 55% { opacity: 1; transform: translate(-50%,-50%) scale(1.07); } 75% { transform: translate(-50%,-50%) scale(.985); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes tvRebOut { from { opacity: 1; transform: translate(-50%,-50%) scale(1); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.06); } }
@keyframes tvRebX { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Al lado del texto, las fotos un poco más bajas: la caja cabe en la pantalla de un portátil. */
@media (min-width: 1101px) { .tv-promo-foto { aspect-ratio: 4 / 3; } }
@media (max-width: 1100px) { .tv-promo { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 1100px) and (min-width: 621px) { .tv-promo-productos { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 620px) {
  .tv-promo:hover .tv-pct { transform: rotate(-8deg); }
  @keyframes tvPctPop { 0% { transform: rotate(-8deg) scale(1); } 22% { transform: rotate(-14deg) scale(.9); } 55% { transform: rotate(4deg) scale(1.12); } 100% { transform: rotate(-8deg) scale(1); } }
  @keyframes tvChip { 0% { transform: scale(.6) rotate(-10deg); opacity: 0; } 55% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
  @keyframes tvRebIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 60% { opacity: 1; transform: translate(-50%,-50%) scale(1.03); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
}
@media (hover: none), (max-width: 760px) { .tv-rebaja-x { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .tv-promo.tv-estalla, .tv-promo.tv-estalla .tv-pct { animation: none; }
  .tv-promo.tv-estalla .tv-chip-desc { animation: tvChipQuieto 400ms ease both; animation-delay: var(--d,0ms); }
  @keyframes tvChipQuieto { from { opacity: 0; } to { opacity: 1; } }
  .tv-rebaja-zoom { animation: tvRebFade 300ms ease both; }
  .tv-rebaja.tv-sale .tv-rebaja-zoom { animation: tvRebFadeOut 300ms ease both; }
  .tv-sello > img, .tv-rebaja-x { animation: none; }
  @keyframes tvRebFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tvRebFadeOut { from { opacity: 1; } to { opacity: 0; } }
}