/* ============================================================
   folleto.css — Folleto digital DOBLE CARA, 100% EN CÓDIGO (HTML/CSS).
   Página oscura (chrome) + flyer BLANCO 8.5×5.5in construido con flex (compatible con
   html2canvas: sin CSS grid interno, imágenes con tamaño explícito, sin aspect-ratio).
   ============================================================ */

.folleto-body { background: var(--bg-page); color: var(--text-primary);
  font-family: var(--font-sans); margin: 0; overflow-x: hidden; }

/* ---------- Topbar ---------- */
.folleto-topbar { position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
.folleto-logo { display: inline-flex; background: #fff; border-radius: var(--radius-full); padding: 5px 14px; box-shadow: var(--shadow-sm); }
.folleto-logo img { height: 34px; width: auto; display: block; }
.folleto-back { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  color: var(--text-secondary); text-decoration: none; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 8px 14px; }
.folleto-back:hover { border-color: var(--accent); color: var(--accent); }

.folleto-main { padding: var(--space-8) var(--space-4) var(--space-16); }
.folleto-preview-wrap { display: flex; justify-content: center; }
.flyer-preview { transform-origin: top center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.flyer-face-label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary); }

/* ============================================================
   EL FLYER  (paleta de marca en claro; es una pieza de papel)
   ============================================================ */
.flyer { --fnavy:#0A2A6E; --fblue:#1f6fd6; --forange:#E76114; --fcian:#0f7fc7; --fink:#3a4453;
  --fmuted:#5b6472; --fpanel:#eef4fc; --fpeach:#FFF4EA; --fline:#dbe3ef;
  box-sizing: border-box; position: relative; width: 8.5in; height: 5.5in; overflow: hidden;
  background: #fff; color: var(--fink); font-family: var(--font-sans); display: flex; flex-direction: column;
  break-inside: avoid; page-break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* Top bar */
.ff-top { display: flex; align-items: center; justify-content: space-between; gap: .2in; padding: .2in .34in .02in; }
.ff-logo { height: .36in; width: auto; display: block; }
.ff-tag { font-family: var(--font-display); font-weight: 700; font-size: 9pt; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fblue); }

/* Feature list (compartida frente/dorso) */
.ff-feat { display: flex; align-items: flex-start; gap: .12in; padding: .045in 0; }
.ff-feat + .ff-feat { border-top: 1px solid var(--fline); }
.ff-feat-ico { flex: none; color: var(--fblue); }
.ff-feat-ico svg { width: .26in; height: .26in; }
.ff-feat-tx { display: flex; flex-direction: column; gap: .01in; min-width: 0; }
.ff-feat-tx strong { font-family: var(--font-display); font-weight: 700; color: var(--fnavy); font-size: 10pt; line-height: 1.1; }
.ff-feat-tx span { font-size: 7.5pt; line-height: 1.2; color: var(--fmuted); }

/* ---------- FRENTE: zona media ---------- */
.ff-mid { flex: 1; display: flex; gap: .22in; padding: .06in .34in; min-height: 0; overflow: hidden; }
.ff-hero { flex: 1.55; display: flex; flex-direction: column; min-width: 0; }
.ff-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16pt; line-height: 1.02; letter-spacing: -.01em; }
.ff-title span { display: block; color: var(--fnavy); }
.ff-title em { display: block; color: var(--fblue); font-style: normal; }
.ff-rule { display: block; width: .55in; height: 3.5px; border-radius: 2px; background: var(--forange); margin: .09in 0 .1in; }
.ff-lead { margin: 0 0 .12in; font-size: 8.5pt; line-height: 1.34; color: var(--fink); }
.ff-lead b { color: var(--fblue); font-weight: 700; }
/* Fotos como FONDO (background-size:cover): html2canvas lo respeta; con <img object-fit> estiraba. */
.ff-photo { margin: 0; border-radius: .1in; overflow: hidden; position: relative;
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.ff-photo--fleet { flex: 1; min-height: 1.6in; width: 100%; margin-top: .06in; background-position: center 50%; }
.ff-feats { flex: .92; display: flex; flex-direction: column; justify-content: center; }
.ff-photo--room { flex: .82; align-self: stretch; min-width: 0; }
.ff-photo--room figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: 7pt; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: .18in .1in .06in;
  background: linear-gradient(to top, rgba(0,20,68,.9), transparent); }

/* ---------- FRENTE: banda de beneficios ---------- */
.ff-benefits { display: flex; gap: .24in; padding: .06in .34in; background: var(--fpanel); }
.ff-benefit { flex: 1; display: flex; align-items: flex-start; gap: .1in; }
.ff-benefit-ico { flex: none; width: .4in; height: .4in; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--fblue), var(--fnavy)); }
.ff-benefit-ico svg { width: .24in; height: .24in; }
.ff-benefit-tx { display: flex; flex-direction: column; gap: .02in; min-width: 0; }
.ff-benefit-tx strong { font-family: var(--font-display); font-weight: 700; color: var(--fnavy); font-size: 10.5pt; line-height: 1.05; }
.ff-benefit-tx strong em { color: var(--forange); font-style: normal; }
.ff-benefit-tx span { font-size: 7pt; line-height: 1.22; color: var(--fmuted); }

/* ---------- Zona inferior compartida: contacto + CTA ---------- */
.ff-bottom { display: flex; gap: .28in; align-items: stretch; padding: .1in .34in; }
.ff-contact { flex: none; display: flex; align-items: center; gap: .14in; }
.ff-qr { width: .78in; height: .78in; display: block; flex: none; }
.ff-contact-lines { display: flex; flex-direction: column; gap: .05in; }
.ff-cline { display: flex; align-items: center; gap: .09in; font-size: 9pt; color: var(--fink); }
.ff-cline svg { width: .17in; height: .17in; color: var(--fblue); flex: none; }
.ff-cline--wa strong { font-family: var(--font-display); font-size: 10.5pt; color: var(--fnavy); font-weight: 700; }
.ff-cta { flex: 1; display: flex; align-items: center; gap: .16in; border: 2.5px solid var(--forange);
  border-radius: .12in; background: var(--fpeach); padding: .12in .18in; }
.ff-cta-ico { flex: none; color: var(--forange); }
.ff-cta-ico svg { width: .5in; height: .5in; }
.ff-cta-tx { display: flex; flex-direction: column; gap: .04in; min-width: 0; }
.ff-cta-tx strong { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--forange); font-size: 11pt; line-height: 1.05; }
.ff-cta-tx span { font-size: 8pt; line-height: 1.26; color: var(--fink); }

/* ---------- Barra de confianza (pie, a sangre) ---------- */
.ff-trust { display: flex; align-items: center; justify-content: center; gap: .3in; padding: .05in .34in;
  background: var(--fnavy); color: #fff; }
.ff-trust span { display: flex; align-items: center; gap: .1in; font-family: var(--font-display); font-weight: 700;
  font-size: 8.5pt; letter-spacing: .03em; text-transform: uppercase; }
.ff-trust svg { width: .2in; height: .2in; color: var(--fcian); }
.ff-trust i { width: 1px; height: .2in; background: rgba(255,255,255,.25); }

/* ---------- DORSO: zona media ---------- */
.fb-mid { flex: 1; display: flex; gap: .28in; padding: .1in .34in; min-height: 0; align-items: stretch; }
.fb-app { flex: 1.05; margin: 0; border-radius: .1in; overflow: hidden; border: 1px solid var(--fline); align-self: stretch;
  background-size: cover; background-position: left top; background-repeat: no-repeat; }
.fb-side { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fb-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 9pt; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fblue); }
.fb-title { margin: .04in 0 0; font-family: var(--font-display); font-weight: 700; color: var(--fnavy);
  font-size: 16pt; line-height: 1.04; letter-spacing: -.01em; }
.fb-title em { color: var(--fblue); font-style: normal; }
.fb-lead { margin: .06in 0 .09in; font-size: 8.5pt; line-height: 1.3; color: var(--fink); }
.fb-feats { display: flex; flex-direction: column; }

/* ============================================================
   VISTA PREVIA responsive (transform:scale; el overflow del body absorbe)
   ============================================================ */
@media (max-width: 900px) { .flyer-preview { transform: scale(.66); margin-bottom: -3.8in; } }
@media (max-width: 620px) { .flyer-preview { transform: scale(.44); margin-bottom: -6.2in; } }
@media (max-width: 420px) { .flyer-preview { transform: scale(.33); margin-bottom: -7.4in; } }

/* ============================================================
   CAPTURA JPG (fuera de pantalla, tamaño real)
   ============================================================ */
.flyer-capture { position: fixed; left: -10000px; top: 0; width: 8.5in; pointer-events: none; }

/* ============================================================
   ACCIONES
   ============================================================ */
.folleto-actions { max-width: 760px; margin: var(--space-12) auto 0; text-align: center; }
.folleto-label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-tertiary); margin-right: var(--space-1); }
.folleto-formats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.folleto-actions-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.folleto-btn { font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-secondary);
  background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 10px 18px; cursor: pointer; text-decoration: none; transition: var(--t-base); }
.folleto-btn:hover { border-color: var(--accent); color: var(--accent); }
.folleto-btn:disabled { opacity: .55; cursor: progress; }
.folleto-btn.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg-soft); }
.folleto-btn--go { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.folleto-btn--go:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.folleto-status { min-height: 1.2em; margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--secondary); font-weight: var(--fw-semibold); }

/* ============================================================
   IMPRESIÓN
   ============================================================ */
.sheet { display: none; box-sizing: border-box; width: 8.5in; height: 11in; background: #fff; }
/* 2 por hoja doble cara: 2 flyers de 5.4in + 0.2in de separación = 11in; línea de corte al medio. */
.sheet--front, .sheet--back { position: relative; flex-direction: column; align-items: center; justify-content: center; gap: .2in; }
.sheet--front .flyer, .sheet--back .flyer { height: 5.4in; }
.sheet--front::after, .sheet--back::after { content: ""; position: absolute; left: 0; right: 0; top: 5.5in; border-top: 1px dashed #9AA3B0; }

/* 4 por hoja doble cara, HOJA HORIZONTAL (landscape 11×8.5): 2×2. Las celdas tienen la MISMA
   proporción que el flyer (5.4:3.5 ≈ 1.54) → el flyer las LLENA sin franjas blancas. La rejilla
   se centra y aprovecha casi toda la hoja; cada tarjeta lleva su borde punteado de recorte y
   entre ellas queda solo el espacio de corte. NOTA: quedan ~0.65in de margen arriba/abajo porque
   4 flyers apaisados no pueden llenar el alto de la hoja sin deformar el diseño. */
.sheet--4up { width: 11in; height: 8.5in; overflow: hidden; page: landscape4;
  grid-template-columns: 5.4in 5.4in; grid-template-rows: 3.5in 3.5in;
  justify-content: center; align-content: center; column-gap: .16in; row-gap: .16in; }
.sheet--4up .q4 { width: 5.4in; height: 3.5in; overflow: hidden; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #9AA3B0; }
/* zoom (NO transform:scale, que no reduce la caja de layout → se descentraba). Llena la celda. */
.sheet--4up .q4 .flyer { zoom: .63; }

@page { size: letter portrait; margin: 0; }
@page landscape4 { size: letter landscape; margin: 0; }

@media print {
  html, body { background: #fff !important; margin: 0; padding: 0; }
  .folleto-topbar, .folleto-preview-wrap, .folleto-actions, .flyer-capture { display: none !important; }
  .folleto-main { padding: 0; }
  body.print-duplex .sheet--front { display: flex; page-break-after: always; }
  body.print-duplex .sheet--back  { display: flex; }
  body.print-4up   .sheet--4up-front { display: grid; page-break-after: always; }
  body.print-4up   .sheet--4up-back  { display: grid; }
}