/* ============================================================================
   Atlantic Wholesale — Sale Flyer: hojas carta (8.5 × 11 in) y tarjeta de precio.

   ÚNICA fuente de verdad del diseño impreso. La usan:
     · index.html  → sección Sale Flyer (pantalla e impresión)
     · admin-app   → Marketing → Sale Flyer (editor y vista previa)
   Los dos lados generan EXACTAMENTE el mismo marcado (ver el bloque de abajo);
   cualquier cambio de geometría, color o tipografía se hace aquí y en ningún
   otro lado. Nada de esta hoja depende de tokens externos: los valores viven en
   .aw-sheet para que el panel y el sitio pinten idéntico.

   Geometría (pulgadas, de la plantilla que mandó el cliente):
     hoja 8.5×11 · marco navy .22in · espacio 1.517×2.425in · 5 columnas ·
     primer espacio x .319in · gap columnas .066in · gap filas .099in ·
     portada: filas en y 4.6in (2 filas) · interior: y .29in (4 filas) ·
     contraportada: y .29in (2 filas) · banda del pie .98in (portada/contra).
   Ese es el DEFAULT. Cada hoja puede llevar otro número de espacios: la
   rejilla lee --aw-cols y --aw-k (ver .aw-sheet-slots) y la tarjeta se
   escala por k; quién calcula esos dos números es admin-app/src/lib/
   flyerLayout.ts, y aquí solo se pintan.

   Marcado canónico de una hoja:
     <div class="aw-sheet-view" style="--aw-scale:1.2">
       <div class="aw-sheet-wrap">
         <section class="aw-sheet aw-sheet--cover|interior|back">
           <div class="aw-sheet-inner"></div>
           <div class="aw-sheet-hero">…</div>            (solo cover/back)
           <div class="aw-sheet-slots" style="--aw-cols:5;--aw-k:1"> N × <div class="aw-slot [aw-slot--empty]" data-slot="n">[<article class="aw-card">…</article>]</div> </div>
           <footer class="aw-sheet-foot">…</footer>      (cover/back)
           <footer class="aw-sheet-legal">…</footer>     (interior)
         </section>
       </div>
     </div>
   ========================================================================== */

/* ---------- tipografía ----------------------------------------------------
   Montserrat en todo el flyer y Bebas Neue en el "GET IN TOUCH!" del pie, que
   es lo que usa el impreso del cliente. Las dos son SIL Open Font License y se
   sirven desde el propio sitio: los TTF originales pesaban 440KB cada uno, así
   que van recortados al alfabeto latino y en woff2 (18KB por cara).
   Se declaran aquí, no en el design system, porque esta hoja la cargan tanto
   index.html como el panel y las dos tienen que pintar igual.               */
@font-face{font-family:'Montserrat AW';src:url('fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat AW';src:url('fonts/montserrat-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Montserrat AW';src:url('fonts/montserrat-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat AW';src:url('fonts/montserrat-500i.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Montserrat AW';src:url('fonts/montserrat-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat AW';src:url('fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat AW';src:url('fonts/montserrat-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Bebas Neue AW';src:url('fonts/bebasneue-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- escala en pantalla ------------------------------------------
   La hoja se dibuja SIEMPRE a tamaño real (8.5in) y se escala con transform.
   Quien la monta pone --aw-scale = min(anchoDisponible / 816px, tope). Así el
   CSS de la tarjeta usa medidas de impresión y en pantalla solo se agranda. */
.aw-sheet-view{position:relative;width:calc(8.5in * var(--aw-scale,1));height:calc(11in * var(--aw-scale,1));margin:0 auto}
.aw-sheet-wrap{position:absolute;left:0;top:0;width:8.5in;height:11in;transform:scale(var(--aw-scale,1));transform-origin:0 0}

/* ---------- la hoja ------------------------------------------------------ */
.aw-sheet{
  --aw-navy:#22294f;--aw-navy-900:#161c38;--aw-red:#c8202f;--aw-amber:#f2a900;
  /* El lado CASE de la barra de precio. Era --aw-red; el cliente quiso verlo
     en navy. Se cambia SOLO aquí y afecta a la hoja y a la tarjeta de móvil. */
  --aw-price:var(--aw-navy);
  --aw-g100:#f4f5f6;--aw-g200:#e3e5e9;--aw-g500:#7c8394;--aw-g700:#4b5160;--aw-g900:#1f2430;
  --aw-band:#ece8e9;
  /* Alto de la tarjeta a k = 1 (el ancho no cambia). Portada y contraportada
     la llevan más alta, abajo; los mismos números en CARD_H_BY_LAYOUT de
     admin-app/src/lib/flyerLayout.ts. */
  --aw-card-h:2.425in;
  --aw-font:'Montserrat AW',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --aw-font-display:'Bebas Neue AW','Montserrat AW',Impact,Haettenschweiler,sans-serif;
  /* El marco de .22in que rodea la pagina blanca era navy y en las orillas de
     la hoja se veia como un trazo azul; el cliente pidio quitarlo. Se queda
     en blanco: no cambia la geometria, ni el margen de impresion, ni el
     color del texto (--aw-navy sigue en `color`, dos lineas abajo). */
  position:relative;width:8.5in;height:11in;background:#fff;overflow:hidden;
  font-family:var(--aw-font);color:var(--aw-navy);-webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box}
.aw-sheet *,.aw-sheet *::before,.aw-sheet *::after{box-sizing:border-box}
.aw-sheet-inner{position:absolute;left:.22in;top:.22in;width:8.06in;height:10.56in;background:#fff;border-radius:.11in}
/* Fondo de la hoja: el vector del cliente, en negro al 10%. Va en un ::after
   de la página blanca, así que queda DEBAJO del arte, de las tarjetas y del
   pie sin teñirlos, y se imprime con la hoja. Cambiar de temporada es
   cambiar --aw-sheet-bg; con `none` la hoja queda limpia.

   El vector SANGRA a la hoja entera (el cliente lo pidió: antes se cortaba a
   .22in de cada orilla y el marco quedaba vacío). Tres detalles, los tres
   medidos, no supuestos:

   1. inset:-.22in da 8.5 x 11in EXACTOS, porque el marco es simétrico
      (.22 + 8.06 + .22 = 8.5 y .22 + 10.56 + .22 = 11). .aw-sheet-inner no
      recorta (no tiene overflow), y .aw-sheet sí, así que el sangrado muere
      justo en el borde del papel.
   2. border-radius pasa de inherit a 0. Con inherit, el radio de .11in de la
      página se aplicaría a la caja de 8.5 x 11 y saldrían cuatro muescas
      redondeadas en las esquinas del papel.
   3. El tamaño se fija en 10.56in y se repite, en vez de estirar `cover`.
      bg-halloween.svg es un mosaico perfecto: una celda de 250 unidades
      estampada 4x4 en un viewBox de 1000, invariante al desplazamiento
      cíclico, así que repetir no deja costura. Y 10.56in es exactamente lo
      que `cover` resolvía dentro de la página, así que con position:center
      sobre dos cajas CONCÉNTRICAS la tesela central cae en el mismo punto:
      la composición que el cliente aprobó no se mueve ni un píxel y lo único
      que aparece es el trozo de arte que antes se tiraba al recortar.
      Estirar `cover` a la hoja completa NO habría servido: el recorte lateral
      seguiría siendo de 1.25in por lado (las dos cajas crecen .44in en los
      dos ejes, el sobrante no cambia) y encima el motivo crecería 4.17%. */
.aw-sheet{--aw-sheet-bg:url('flyer/bg-halloween.svg')}
.aw-sheet-inner::after{content:"";position:absolute;inset:-.22in;border-radius:0;background:var(--aw-sheet-bg) center/10.56in 10.56in repeat;opacity:.10;pointer-events:none}

/* Espacios: rejilla de --aw-cols columnas (default 5) con la tarjeta, las
   separaciones y el hueco escalados por --aw-k (default 1). Las dos variables
   las pone quien monta la hoja en el propio .aw-sheet-slots (el panel las
   calcula en lib/flyerLayout.ts y el sitio lee la caché `grid` de
   flyers.pages); SIN variables el CSS computado es el de siempre: 5 columnas
   de 1.517in, filas de 2.425in, gaps .066/.099in, k = 1.
   La rejilla se centra en la CAJA DE LA REJILLA DE HOY (left .319in, ancho
   5×1.517 + 4×.066 = 7.849in): con 5 columnas a k = 1 el espacio libre es 0
   y el primer hueco queda en .319in exacto, igual que antes; con cualquier
   otra rejilla sobra (7.849 − ancho)/2 a cada lado. Se centra con
   justify-content sobre ese ancho fijo y no con un left calculado: así nadie
   tiene que mandar una tercera variable y no hay redondeo posible.
   El techo físico es 7.862in (8.5 − 2×.319); se deja sin usar .013in = 1.2px
   para que k = 1 siga siendo byte a byte la hoja de hoy. */
.aw-sheet-slots{position:absolute;left:.319in;width:7.849in;display:grid;justify-content:center;grid-template-columns:repeat(var(--aw-cols,5),calc(1.517in * var(--aw-k,1)));grid-auto-rows:calc(var(--aw-card-h,2.425in) * var(--aw-k,1));column-gap:calc(.066in * var(--aw-k,1));row-gap:calc(.099in * var(--aw-k,1))}
/* TARJETAS MÁS ALTAS EN PORTADA Y CONTRAPORTADA (mismo ancho). El cliente
   las pidió "alargadas a lo alto para que quepan las fotos":
   · portada 2.675in (+.25): dos filas miden 5.449in y quedan centradas entre
     el arte (4.15in) y el pie (10.02in), .21in de aire arriba y abajo. Antes
     arrancaban en 4.6in (y antes en 5.065, pegadas al pie; el cliente las
     subió en Illustrator).
   · contraportada 2.525in (+.10): de .25in a 5.399in, .10in antes del arte
     (5.5in).
   fitGrid (flyerLayout.ts) usa estas mismas alturas, así que k sigue en 1
   con 9 o 10 espacios. */
.aw-sheet--cover{--aw-card-h:2.675in}
.aw-sheet--back{--aw-card-h:2.525in}
.aw-sheet--cover .aw-sheet-slots{top:4.36in}
.aw-sheet--back .aw-sheet-slots{top:.25in}
/* LETRA CHICA A TAMAÑO DE INTERIOR (--aw-t). El cliente imprimió el flyer de
   octubre y la portada y la contraportada (9 espacios, k = 1) tenían la letra
   chica más chica que las hojas de adentro (12 espacios, k = 1.2526): la
   tarjeta se escala entera por k, así que a k = 1 los códigos y nombres de la
   lista salían a 6.6px contra 8.27px adentro. --aw-t agranda SOLO la letra
   chica (códigos, nombres de la lista, subtítulo, etiquetas, pastillas, tabla)
   lo que falta para llegar a k = 1.25, con tope en 1.25; la tarjeta no cambia
   de tamaño y el hueco sale de la foto (flex). Probado con la portada real:
   nada se desborda; la foto más castigada (3 nombres largos) baja de 94 a
   58px. Con k ≥ 1.25 da 1 y la hoja queda exactamente como antes. Se declara
   aquí porque aquí está --aw-k (inline) y la tarjeta lo hereda; una tarjeta
   fuera de una hoja no la tiene y queda en 1. */
.aw-sheet-slots{--aw-t:clamp(1,calc(1.25 / var(--aw-k,1)),1.25)}
.aw-sheet--interior .aw-sheet-slots{top:.29in}
.aw-slot{position:relative;width:calc(1.517in * var(--aw-k,1));height:calc(var(--aw-card-h,2.425in) * var(--aw-k,1))}
.aw-slot--empty{/* en el sitio y en impresión un espacio vacío es blanco */}
/* Última fila incompleta: se centra. El cliente lo pidió al ver que con 9
   espacios quedaba un hueco abajo a la derecha. Con 9 en portada la rejilla es
   de 5 columnas × 2 filas (10 celdas) porque fitGrid prioriza que la tarjeta
   salga lo más grande posible; la hoja pinta 9 divs, así que las 4 de la
   última fila se apoyaban a la izquierda y el hueco quedaba al final.
   Quien monta la hoja marca esas 4 con .aw-slot--orphan y manda --aw-orphan.
   El desplazamiento es media celda por cada columna que falta: el avance de
   una celda es 1.517in de tarjeta + .066in de separación = 1.583in, todo
   escalado por --aw-k igual que el resto de la rejilla.
   Cuando la fila cuadra justa, quien la monta emite --aw-orphan = --aw-cols,
   así que (cols − orphan) / 2 da 0 y la regla no mueve nada. Por eso no hace
   falta apagarla con un selector aparte. */
.aw-slot--orphan{transform:translateX(calc((var(--aw-cols,5) - var(--aw-orphan,5)) / 2 * 1.583in * var(--aw-k,1)))}
/* La tarjeta NO se rediseña: conserva su tamaño nativo (1.517 × 2.425in, sus
   textos de 4.3 a 14.5px) y se escala entera desde su esquina para llenar el
   hueco de k×. Va en la propiedad `scale`, no en `transform`, por dos
   razones: (1) el sitio anima la aparición con transform:translateY y en
   @media print apaga ese transform con !important — un scale() dentro de
   transform se apagaría en papel con él; (2) `scale` y `transform` se
   componen, así que la animación de entrada sigue funcionando. Con k = 1 es
   la identidad: la hoja de hoy, píxel por píxel. */
.aw-slot>.aw-card{scale:var(--aw-k,1);transform-origin:0 0}

/* Arte grande: portada arriba, contraportada abajo. A SANGRE de orilla a
   orilla (8.5in, sin el margen de .22in ni esquinas redondeadas), como lo
   armó el cliente en Illustrator para imprimir el flyer de octubre (medido en
   su PDF): portada de 0 a 4.15in; contraportada de 5.5in hasta el pie
   (10.02in). Antes: 8.06 × 4.7in a .22in / 8.06 × 4.63in desde 5.39in. */
.aw-sheet-hero{position:absolute;left:0;width:8.5in;overflow:hidden;background:var(--aw-g100)}
.aw-sheet--cover .aw-sheet-hero{top:0;height:4.15in}
.aw-sheet--back .aw-sheet-hero{top:5.5in;height:4.52in}
.aw-sheet-hero img{display:block;width:100%;height:100%;object-fit:cover}
/* Sin arte todavía: el título del flyer en tipografía, para que la hoja no salga en blanco. */
.aw-sheet-hero--text{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.4in;background:#fff}
.aw-sheet-hero--text .aw-hero-kicker{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--aw-red)}
.aw-sheet-hero--text .aw-hero-title{font-size:44px;font-weight:700;line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin:10px 0 8px;max-width:6.4in}
.aw-sheet-hero--text .aw-hero-sub{font-size:16px;font-weight:500;color:var(--aw-g700)}
.aw-sheet-hero--text .aw-hero-dates{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--aw-navy);background:var(--aw-g100);border:1px solid var(--aw-g200);border-radius:99px;padding:5px 12px}

/* Pie de portada/contraportada: banda de 1in, sello a la izquierda, datos en 3 columnas. */
/* .98in, no 1in: cuando la portada arrancaba sus espacios en 5.065in, dos
   filas de 2.425in con .099 de separacion terminaban en 10.0138in y con la
   banda de 1in el pie tapaba la ultima fila por 1.3px. Hoy arrancan en 4.6in
   y terminan en 9.549in. */
.aw-sheet-foot{position:absolute;left:0;right:0;bottom:0;height:.98in;background:var(--aw-band)}
/* Sello "Distributed by". Vive dentro del pie, pero su lugar se da en
   coordenadas de la HOJA: --aw-seal-x / --aw-seal-y son su centro como
   fracción de 8.5 × 11in (marketing lo arrastra en el panel; flyers.pages
   guarda la posición por hoja). Sin variables queda donde siempre: .22in de
   la izquierda y .06in por debajo del borde. El pie empieza en 10.02in, de ahí
   el "- 10.02in". z-index 3: si lo suben sobre las tarjetas, queda encima. */
/* Adorno de temporada JUNTO al sello, del lado derecho, y se mueve con él. Halloween: los dos fantasmas
   del impreso del cliente (vectoriales en su PDF, extraídos a PNG transparente). Medido en su PDF: empiezan
   .02in a la derecha del sello, miden .975 × .552in y van centrados con él. Solo con el tema Halloween
   (.aw-sheet--halloween la pone quien monta la hoja según flyers.theme); sin tema no se pinta nada. */
.aw-sheet-seal::after{content:"";position:absolute;left:calc(100% + .02in);top:50%;width:.975in;height:.552in;margin-top:-.264in;background:var(--aw-seal-deco,none) center/contain no-repeat;pointer-events:none}
.aw-sheet--halloween{--aw-seal-deco:url('flyer/halloween-ghosts.png')}
.aw-sheet-seal{position:absolute;z-index:3;left:calc(var(--aw-seal-x,.0953) * 8.5in - .59in);top:calc(var(--aw-seal-y,.9518) * 11in - 10.02in - .59in);width:1.18in;height:1.18in;background:url('flyer/seal-distributed-by.png') center/contain no-repeat}
/* left 2.5in, no 2.72: con 2.72 la última columna terminaba EXACTAMENTE en el
   borde de 8.5in y "www.atlanticwholesales.com" se iba al filo de corte. Así
   queda el mismo margen de .22in que el marco de la hoja. */
.aw-foot-grid{position:absolute;left:2.5in;right:.22in;top:.2in;display:grid;grid-template-columns:auto auto auto;grid-template-rows:.3in .3in;column-gap:.1in;row-gap:.04in;align-items:center;justify-content:space-between;white-space:nowrap}
.aw-foot-title{font-family:var(--aw-font-display);font-size:27px;font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:var(--aw-g900);line-height:1}
.aw-foot-item{display:flex;align-items:center;gap:.08in;font-size:10px;font-weight:600;color:var(--aw-g900)}
.aw-foot-dates{font-size:10px;font-weight:700;color:var(--aw-g900)}
.aw-foot-ic{flex:none;width:.2in;height:.2in;border-radius:3px;background:var(--aw-red) center/68% no-repeat}
.aw-foot-ic--home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3 2 11h3v9h5v-6h4v6h5v-9h3z'/%3E%3C/svg%3E")}
.aw-foot-ic--phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.aw-foot-ic--mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E")}
.aw-foot-ic--web{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}

/* Pie legal del interior. */
.aw-sheet-legal{position:absolute;left:.4in;right:.4in;bottom:.34in;text-align:center;font-size:7.6px;font-weight:700;line-height:1.35;color:var(--aw-g900)}

/* ---------- la tarjeta (1.517 × 2.425 in) --------------------------------
   Diseño A, el que aprobó el cliente: código en ROJO arriba, nombre grande,
   foto centrada sobre blanco, lista de variantes (código en negrita + nombre),
   pastillas de tamaño y barra de precio abajo — UNIT en gris, CASE en navy,
   con corte RECTO entre las dos (los colores se eligen por flyer, ver abajo).
   Medidas en px a 96dpi = medidas de impresión.

   REGLA DE VARIANTES: se pintan como mucho TRES; si hay más, la lista termina
   en "& more". Es una regla del diseño, no un recorte del navegador: con más
   renglones la tarjeta se ve apretada a este tamaño.

   REGLA DE LA FOTO: va centrada en su caja, sin sombra. Las fotos recortadas
   del impreso traen fondo blanco y aquí el fondo también es blanco, así que la
   caja desaparece sola; una sombra la delataría.

   Marcado canónico:
     <article class="aw-card" data-link="0">
       <span class="aw-card-deal">DEAL</span>            (solo si deal)
       <div class="aw-card-code">#525</div>
       <div class="aw-card-name">PAKE TAXO</div>
       <div class="aw-card-sub">BOTANA SURTIDA</div>
       <div class="aw-card-fig"><img …>|<div class="aw-card-noimg"></div></div>
       <div class="aw-card-lbl">Flavors / Variety</div>
       <ul class="aw-card-vars"><li><b>#984</b>Mezcladito</li>…<li class="more">&amp; more</li></ul>
       <div class="aw-card-pills"><span>BAG</span><span>40 CT</span></div>
       <div class="aw-card-price">                       (--unit-only si no hay precio de caja)
         <div class="aw-card-unit"><small>Unit</small><strong><sup>$</sup>1.85</strong></div>
         <div class="aw-card-case"><small>Case</small><strong><sup>$</sup>69.99</strong></div>
       </div>
       <span class="aw-card-promo" style="--aw-px:81%;--aw-py:30%"><b>Buy 5 </b><b>Get 1 </b><i>Free</i></span>   (solo si promo)
     </article>                                                                */
.aw-card{position:relative;width:1.517in;height:var(--aw-card-h,2.425in);background:#fff;border:1.2px solid var(--aw-navy);border-radius:7px;overflow:hidden;padding:7px 8px 0;display:flex;flex-direction:column;color:var(--aw-navy);font-family:var(--aw-font);text-align:left}
.aw-card[data-link="1"]{cursor:pointer}
/* Sello "NEW!" de un producto nuevo (el Excel trae NEW en lugar del código).
   Estrella roja de 24 puntas en la esquina de la foto, girada como un sello
   pegado; la pintan igual el panel (SheetCard) y el sitio (flyerCard). */
.aw-card-new{position:absolute;top:0;left:1px;z-index:1;width:27px;height:27px;display:flex;align-items:center;justify-content:center;background:var(--aw-red);color:#fff;font-size:5.8px;font-weight:800;letter-spacing:.02em;line-height:1;transform:rotate(-12deg);clip-path:polygon(50% 0%,59% 11%,72% 5%,76% 18%,90% 17%,88% 31%,100% 38%,91% 49%,100% 60%,88% 67%,91% 81%,77% 82%,74% 96%,61% 90%,50% 100%,40% 90%,27% 96%,23% 82%,9% 81%,12% 67%,0% 60%,9% 49%,0% 38%,12% 31%,10% 17%,24% 18%,28% 5%,41% 11%)}
/* Sello "BUY 5 GET 1 FREE" (flyer_items.promo): la ESTRELLA ROJA de oferta
   que eligió el cliente (16 picos, girada -10°), "BUY 5 / GET 1" en blanco y
   "FREE" grande en ámbar. Mide 50px; su centro está en (--aw-px, --aw-py),
   fracción de la caja de la tarjeta que marketing elige arrastrándolo en el
   panel. El clamp (25px = medio sello) lo deja siempre entero dentro de la
   tarjeta, que corta lo que sobresale. La estrella es un ::before con
   clip-path para que el recorte no se coma el texto. Se centra con margin y
   no con translate para dejar transform al giro. z-index 2: encima del NEW! y
   de las celdas de precio. */
.aw-card-promo{position:absolute;z-index:2;left:clamp(25px,var(--aw-px,81%),calc(100% - 25px));top:clamp(25px,var(--aw-py,30%),calc(100% - 25px));width:50px;height:50px;margin:-25px 0 0 -25px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--aw-font);text-align:center;text-transform:uppercase;line-height:.95;white-space:nowrap;transform:rotate(-10deg)}
.aw-card-promo::before{content:"";position:absolute;inset:0;background:var(--aw-red);clip-path:polygon(50.00% 0.00%,58.00% 9.79%,69.13% 3.81%,72.78% 15.91%,85.36% 14.64%,84.09% 27.22%,96.19% 30.87%,90.21% 42.00%,100.00% 50.00%,90.21% 58.00%,96.19% 69.13%,84.09% 72.78%,85.36% 85.36%,72.78% 84.09%,69.13% 96.19%,58.00% 90.21%,50.00% 100.00%,42.00% 90.21%,30.87% 96.19%,27.22% 84.09%,14.64% 85.36%,15.91% 72.78%,3.81% 69.13%,9.79% 58.00%,0.00% 50.00%,9.79% 42.00%,3.81% 30.87%,15.91% 27.22%,14.64% 14.64%,27.22% 15.91%,30.87% 3.81%,42.00% 9.79%)}
.aw-card-promo b,.aw-card-promo i{position:relative;color:#fff;font-weight:800;font-style:normal}
.aw-card-promo b{font-size:5.4px;letter-spacing:.06em}
.aw-card-promo i{font-size:10px;color:var(--aw-amber);letter-spacing:.01em;margin-top:.6px}
.aw-card-deal{position:absolute;top:0;right:0;background:var(--aw-amber);color:var(--aw-navy);font-size:calc(4.8px * var(--aw-t,1));font-weight:700;letter-spacing:.12em;padding:2.5px 6px 2px;border-radius:0 0 0 5px;line-height:1}
.aw-card-code{font-size:calc(6.2px * var(--aw-t,1));font-weight:700;color:var(--aw-red);letter-spacing:.04em;line-height:1;min-height:calc(6.2px * var(--aw-t,1))}
/* El nombre ya es grande (8pt): sube menos (tope 1.1) para no partirse en dos renglones. */
.aw-card-name{font-size:calc(10.6px * min(var(--aw-t,1),1.1));font-weight:800;line-height:1.05;text-transform:uppercase;letter-spacing:-.015em;margin-top:2px}
.aw-card-sub{font-size:calc(6.2px * var(--aw-t,1));font-weight:800;color:var(--aw-g700);text-transform:uppercase;letter-spacing:.05em;line-height:1.15;margin-top:.5px;min-height:calc(6.2px * var(--aw-t,1))}
/* La foto manda sobre el espacio sobrante y siempre queda centrada. */
.aw-card-fig{position:relative;flex:1 1 auto;min-height:.35in;margin:4px -4px 3px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.aw-card-fig img{display:block;max-width:88%;max-height:100%;object-fit:contain;margin:0 auto}
.aw-card-fig .aw-card-noimg{width:26px;height:26px;border:1.2px dashed var(--aw-g200);border-radius:5px}
.aw-card-lbl{font-size:calc(4.3px * var(--aw-t,1));font-weight:700;color:var(--aw-g500);letter-spacing:.16em;text-transform:uppercase;line-height:1;min-height:calc(4.3px * var(--aw-t,1))}
/* Códigos y nombres a 6.6px (5pt impreso). Estaban a 5.8px y el cliente
   los veía muy chicos en papel; el código ensancha su columna a 26px. */
.aw-card-vars{flex:none;margin:2px 0 0;padding:0;list-style:none;font-size:calc(6.6px * var(--aw-t,1));line-height:1.3;font-weight:500;color:var(--aw-g900)}
.aw-card-vars li{display:flex;align-items:baseline}
.aw-card-vars b{flex:none;font-weight:700;color:var(--aw-navy);display:inline-block;min-width:calc(26px * var(--aw-t,1))}
.aw-card-vars .more{color:var(--aw-g500);font-style:italic}
.aw-card-pills{flex:none;display:flex;gap:3px;margin:4px 0}
.aw-card-pills span{white-space:nowrap;font-size:calc(5.2px * var(--aw-t,1));font-weight:700;letter-spacing:.05em;color:var(--aw-navy);border:.8px solid var(--aw-g200);background:var(--aw-g100);border-radius:3px;padding:1.6px 4px;line-height:1}
.aw-card-price{flex:none;margin:auto -8px 0;display:grid;grid-template-columns:1fr 1.2fr;height:38px}
.aw-card-price>div{display:flex;flex-direction:column;justify-content:center;padding:0 7px;line-height:1}
/* COLORES DE LA BARRA: se eligen POR FLYER en el panel (flyers.colors) y
   llegan como variables en .aw-sheet-view (--aw-unit-bg, --aw-unit-fg,
   --aw-case-bg, --aw-case-fg). Sin ellas, cada celda cae en su color de
   siempre: UNIT gris claro con texto navy, CASE en --aw-price con texto
   blanco. Los <small> (UNIT / CASE) heredan el color y bajan a .75 de
   opacidad, así que siguen al texto elegido sin variable propia. */
.aw-card-unit{background:var(--aw-unit-bg,var(--aw-g100));color:var(--aw-unit-fg,var(--aw-navy));border-top:.8px solid var(--aw-g200)}
.aw-card-case{background:var(--aw-case-bg,var(--aw-price));color:var(--aw-case-fg,#fff);position:relative}
/* El corte entre UNIT y CASE es RECTO (lo pidió el cliente): es simplemente
   el borde entre las dos columnas de la rejilla (1fr | 1.2fr). Antes había
   un ::before de 12px con skewX(-12deg) que hacía la diagonal; sin skew ese
   pseudoelemento solo corría la línea 6px a la izquierda, así que se quitó
   entero. Nada de la geometría (38px de barra, columnas, padding) cambia. */
.aw-card-price small{font-size:calc(4.4px * var(--aw-t,1));font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin-bottom:2px;position:relative}
.aw-card-price strong{font-size:14.5px;font-weight:700;letter-spacing:-.035em;position:relative}
.aw-card-price strong sup{font-size:7px;vertical-align:top;position:relative;top:1px;margin-right:.5px;font-weight:700}
/* Sin precio de caja: UNIT ocupa el ancho completo y no se pinta la banda roja. */
.aw-card-price--unit-only{grid-template-columns:1fr}

/* ---------- TABLA DE PRECIOS (flyer_items.price_rows) -----------------------
   Una tarjeta con DOS O TRES productos, cada uno con su precio por unidad Y
   su precio de caja (Tajín 5 oz y 14 oz en el mismo cuadro). Es la "Tabla de
   precios" que eligió el cliente: un solo nombre arriba y abajo una rejilla
   etiqueta | UNIT | CASE, un renglón por producto. Sustituye a la banda de
   38px, en el mismo sitio (margin auto -8px 0, a sangre) y con los MISMOS
   colores por flyer (--aw-unit-* / --aw-case-*).

   Marcado, idéntico en el sitio (index.html, flyerCard) y en el panel
   (SheetCard.tsx):
     <div class="aw-card-ptable [aw-card-ptable--tight]">
       <span class="aw-card-pt-h">Size</span><span class="aw-card-pt-h">Unit</span><span class="aw-card-pt-h">Case</span>
       <div class="aw-card-pt-lb"><b>#5318</b><i>10 · 6 CT</i></div>
       <div class="aw-card-pt-u"><strong><sup>$</sup>6.39</strong></div>
       <div class="aw-card-pt-c"><strong><sup>$</sup>38.34</strong></div>
       …un trío por renglón
     </div>
   Los CÓDIGOS y nombres NO van dentro de la tabla: van arriba, en la lista de
   siempre (.aw-card-lbl + .aw-card-vars, navy y en negritas), igual que en
   las demás tarjetas; lo pidió el cliente. Dentro de cada renglón va solo el
   CÓDIGO (sin nombre, para saber de qué producto es el precio) y la CANTIDAD
   (onzas, pack, CT): así el renglón no crece como en la versión 1. Ver
   priceTableParts en admin-app/src/lib/flyerPriceTable.ts.
   --tight baja los importes a 9px cuando alguno no cabe a 10.5px (unit desde
   $10, caja desde $100). Lo decide quien pinta, con la misma regla en los dos.
   Con tabla, las pastillas no se usan (cada renglón trae su cantidad): se
   colapsan para que el hueco se lo quede la foto. */
.aw-card-ptable{flex:none;margin:auto -8px 0;display:grid;grid-template-columns:1.2fr 1fr 1.2fr}
.aw-card:has(>.aw-card-ptable) .aw-card-pills{display:none}
.aw-card:has(>.aw-card-ptable) .aw-card-vars{margin-bottom:3px}
.aw-card-pt-h{font-size:calc(4.3px * var(--aw-t,1));font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--aw-g500);padding:0 5px 2px;line-height:1}
.aw-card-pt-h+.aw-card-pt-h{text-align:right}
.aw-card-pt-lb{display:flex;flex-direction:column;justify-content:center;gap:.5px;min-height:18px;padding:2px 5px 2px 6px;border-top:.8px solid var(--aw-g200);line-height:1.2;min-width:0;overflow-wrap:break-word}
.aw-card-pt-lb b{font-size:calc(6.2px * var(--aw-t,1));font-weight:700;color:var(--aw-navy)}
.aw-card-pt-lb i{font-style:normal;font-size:calc(5.2px * var(--aw-t,1));font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--aw-g500)}
.aw-card-pt-u,.aw-card-pt-c{display:flex;align-items:center;justify-content:flex-end;min-height:18px;padding:0 5px;border-top:.8px solid var(--aw-g200);line-height:1;white-space:nowrap}
.aw-card-pt-u{background:var(--aw-unit-bg,var(--aw-g100));color:var(--aw-unit-fg,var(--aw-navy))}
.aw-card-pt-c{background:var(--aw-case-bg,var(--aw-price));color:var(--aw-case-fg,#fff);border-top-color:rgba(255,255,255,.2)}
.aw-card-pt-u strong,.aw-card-pt-c strong{font-size:10.5px;font-weight:700;letter-spacing:-.03em}
.aw-card-pt-u sup,.aw-card-pt-c sup{font-size:5.6px;vertical-align:top;position:relative;top:.8px;margin-right:.4px;font-weight:700}
.aw-card-ptable--tight .aw-card-pt-u strong,.aw-card-ptable--tight .aw-card-pt-c strong{font-size:9px}
/* ---------- impresión ------------------------------------------------------
   Una hoja por página carta, sin márgenes, a escala 1:1. Quien imprime (el
   sitio) esconde todo lo demás con su propia regla. */
@media print{
  @page{size:8.5in 11in;margin:0}
  .aw-sheet-view{width:8.5in;height:11in;margin:0;break-after:page;page-break-after:always;overflow:hidden}
  .aw-sheet-view:last-child{break-after:auto;page-break-after:auto}
  .aw-sheet-wrap{transform:none!important}
  .aw-card[data-link="1"]{cursor:default}
}