/* VANTERIS — flyer de venta, hoja carta. Mismo lenguaje que la ficha técnica
   (banda teal, cuña naranja, tabla de cabecera teal) pero con jerarquía
   comercial: la foto y el titular mandan, el dato técnico apoya.
   Se imprime o se guarda como PDF desde el navegador. */

@page { size: letter; margin: 0; }

.flyer-body {
  background: var(--vt-surface);
  padding: 0 0 var(--vt-space-6);
  font-family: var(--vt-font-body);
  color: var(--vt-ink);
}

/* Barra de acciones — no se imprime. */
.flyer-bar {
  display: flex; gap: var(--vt-space-3); align-items: center; flex-wrap: wrap;
  max-width: 8.5in; margin: 0 auto; padding: var(--vt-space-3) var(--vt-space-2);
}
.flyer-bar a { color: var(--vt-teal-deep); font-size: var(--vt-fs-small); text-decoration: none; }
.flyer-bar a:hover { text-decoration: underline; }
.flyer-bar button {
  margin-left: auto; background: var(--vt-teal); color: var(--vt-white);
  border: 0; border-radius: var(--vt-radius-md);
  font-family: inherit; font-size: var(--vt-fs-small); font-weight: var(--vt-w-semibold);
  padding: 10px 18px; cursor: pointer;
}
.flyer-bar button:hover { background: var(--vt-teal-deep); }

/* ---------- la hoja ---------- */
.hoja-f {
  width: 8.5in; min-height: 11in; margin: 0 auto;
  background: var(--vt-white); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 18px rgba(40, 40, 40, .13);
}

/* Cabecera: logo a la izquierda, banda teal en diagonal a la derecha. */
.fl-head {
  display: grid; grid-template-columns: 1fr 3.5in; align-items: center;
  border-bottom: 2px solid var(--vt-teal);
}
.fl-logo { padding: var(--vt-space-3) var(--vt-space-4); }
.fl-logo img { width: 2.05in; height: auto; display: block; }
.fl-kicker {
  position: relative; background: var(--vt-teal-deep); color: var(--vt-white);
  padding: 14px var(--vt-space-4) 14px 46px; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%);
}
.fl-kicker b {
  font-family: var(--vt-font-display); font-size: 1.02rem;
  font-weight: var(--vt-w-bold); letter-spacing: var(--vt-track-display);
}
.fl-kicker span { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #BFD9DB; }

/* Portada con foto. El velo va opaco del lado del texto: el blanco conserva
   contraste alto sin depender de qué tan clara salga la fotografía. */
/* La foto va como <img> y el velo como pseudo-elemento, NO como
   `linear-gradient(), url()` en una sola propiedad: así Chrome embebe la imagen
   tal cual en el PDF en vez de recomponer y rasterizar toda la banda, que es lo
   que hacía pesar cada flyer varios megas. */
.fl-hero {
  position: relative; color: var(--vt-white); overflow: hidden;
  padding: var(--vt-space-5) var(--vt-space-4);
  background: var(--vt-ink);
}
.fl-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.fl-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(40,40,40,.93) 0%, rgba(40,40,40,.86) 46%,
                              rgba(40,40,40,.52) 100%);
}
.fl-hero::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: 2;
  border-style: solid; border-width: 0 56px 56px 0;
  border-color: transparent var(--vt-orange) transparent transparent;
}
.fl-hero-in { position: relative; z-index: 2; max-width: 5.3in; }
.fl-eyebrow {
  font-family: var(--vt-font-mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: #8FD3D8; margin-bottom: 8px;
}
.fl-hero h1 {
  font-family: var(--vt-font-display); font-weight: var(--vt-w-bold);
  font-size: 2.1rem; line-height: 1.04; letter-spacing: .02em;
  margin: 0; color: var(--vt-white); text-wrap: balance;
}
.fl-hero h1.long { font-size: 1.72rem; }
.fl-hero p {
  margin: 10px 0 0; font-size: .82rem; line-height: 1.5; color: #D2DEDF;
}

/* Franja de claims bajo la portada. */
.fl-claims {
  display: flex; background: var(--vt-ink); color: var(--vt-white);
  padding: 9px var(--vt-space-4);
}
.fl-claim { display: flex; align-items: center; gap: 9px; flex: 1; }
.fl-claim + .fl-claim { border-left: 1px solid rgba(255,255,255,.2); padding-left: var(--vt-space-3); }
.fl-claim .ico { width: 26px; height: 26px; flex: none; color: var(--vt-white); }
.fl-claim span {
  font-size: .6rem; font-weight: var(--vt-w-semibold);
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.25;
}

/* Cuerpo: crece para empujar el pie al fondo de la hoja. */
.fl-cuerpo { flex: 1; padding: var(--vt-space-4); display: flex; flex-direction: column; gap: 14px; }
.fl-cuerpo h2 {
  font-family: var(--vt-font-display); font-size: .82rem; font-weight: var(--vt-w-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--vt-teal-deep);
  margin: 0 0 8px; display: flex; align-items: center; gap: 9px;
}
.fl-cuerpo h2::after { content: ""; flex: 1; height: 1px; background: var(--vt-line); }
.fl-intro { font-size: .73rem; line-height: 1.5; color: var(--vt-ink-muted); max-width: 66ch; }

/* Rejilla de categorías del flyer general. */
.fl-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.fl-cat {
  border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm);
  padding: 9px 8px; text-align: center; background: var(--vt-white);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.fl-cat .ico { width: 27px; height: 27px; color: var(--vt-teal); }
.fl-cat b { font-size: .63rem; font-weight: var(--vt-w-semibold); line-height: 1.2; }
.fl-cat span { font-size: .55rem; color: var(--vt-ink-muted); line-height: 1.25; }
.fl-cat .cnt {
  font-family: var(--vt-font-mono); font-size: .53rem; color: var(--vt-teal-deep);
}

/* Rejilla de productos. */
.fl-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* Cuando la industria tiene menos de cuatro productos, las tarjetas se centran
   y conservan su ancho, en lugar de estirarse o dejar el hueco a un lado. */
.fl-prods.pocos { grid-template-columns: repeat(auto-fit, 1.78in); justify-content: center; }
.fl-prod {
  border: 1px solid var(--vt-line); border-radius: var(--vt-radius-sm);
  overflow: hidden; background: var(--vt-white); display: flex; flex-direction: column;
}
.fl-prod-img {
  aspect-ratio: 1/1; background: var(--vt-white); display: grid; place-items: center; padding: 5px;
}
.fl-prod-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fl-prod-txt { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 3px; }
.fl-prod-txt b { font-size: .6rem; font-weight: var(--vt-w-semibold); line-height: 1.25; }
.fl-prod-txt .sku {
  font-family: var(--vt-font-mono); font-size: .54rem; color: var(--vt-teal-deep);
  letter-spacing: .02em;
}
.fl-prod-txt .det { font-size: .55rem; color: var(--vt-ink-muted); line-height: 1.3; }

/* Dos columnas: retos + normas, o industrias + por qué. */
.fl-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vt-space-4); }
.fl-bul { list-style: none; margin: 0; padding: 0; font-size: .67rem; }
.fl-bul li { position: relative; padding: 2px 0 2px 17px; line-height: 1.4; }
.fl-bul li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--vt-orange);
}
.fl-norm { width: 100%; border-collapse: collapse; font-size: .62rem; }
.fl-norm th {
  background: var(--vt-teal); color: var(--vt-white); text-align: left;
  font-family: var(--vt-font-mono); font-weight: var(--vt-w-semibold);
  padding: 3px 7px; white-space: nowrap; width: 1%;
}
.fl-norm td { border: 1px solid var(--vt-line); padding: 3px 8px; line-height: 1.3; }

/* Pie: contacto + QR. */
.fl-foot {
  display: grid; grid-template-columns: 1fr auto; gap: var(--vt-space-4);
  align-items: center; padding: 11px var(--vt-space-4) 12px;
  background: var(--vt-teal-tint); border-top: 2px solid var(--vt-teal);
  position: relative;
}
.fl-foot::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  border-style: solid; border-width: 24px 24px 0 24px;
  border-color: var(--vt-orange) transparent transparent transparent;
}
.fl-foot-id { display: flex; flex-direction: column; gap: 3px; }
.fl-foot-id b {
  font-family: var(--vt-font-display); font-size: .92rem;
  font-weight: var(--vt-w-bold); color: var(--vt-teal-deep);
  letter-spacing: var(--vt-track-display);
}
.fl-foot-id span { font-size: .58rem; color: var(--vt-ink-muted); line-height: 1.35; }
.fl-foot-id .mail {
  font-family: var(--vt-font-mono); font-size: .68rem; color: var(--vt-ink);
  font-weight: var(--vt-w-medium);
}
.fl-qr { display: flex; align-items: center; gap: 9px; }
.fl-qr svg { width: .82in; height: .82in; display: block; }
.fl-qr-txt {
  font-size: .53rem; color: var(--vt-ink-muted); line-height: 1.3;
  max-width: 1.4in; text-align: right;
}

@media screen and (max-width: 860px) {
  .hoja-f { width: 100%; min-height: 0; }
  .fl-head { grid-template-columns: 1fr; }
  .fl-kicker { clip-path: none; padding-left: var(--vt-space-4); }
  .fl-cats { grid-template-columns: repeat(2, 1fr); }
  .fl-prods { grid-template-columns: repeat(2, 1fr); }
  .fl-2col { grid-template-columns: 1fr; }
  .fl-claims { flex-wrap: wrap; gap: 8px; }
  .fl-claim + .fl-claim { border-left: 0; padding-left: 0; }
}

@media print {
  .flyer-bar { display: none; }
  .flyer-body { background: var(--vt-white); padding: 0; }
  .hoja-f { box-shadow: none; width: 8.5in; }
  .fl-head, .fl-hero, .fl-claims, .fl-foot { break-inside: avoid; }
}