/* Folleto de venta por rubro (13-oct-2026). Mismo formato que el folleto de condominios del 12-oct: 8 láminas
   horizontales 16:9 (portada, promesa, 4 funciones con captura real, cómo paga el cliente, cierre).
   En pantalla ancha cada lámina escala con su propio ancho (unidades cqw sobre un lienzo de 1920 px); en el teléfono las
   láminas se apilan como tarjetas legibles; al imprimir (o al generar el PDF) cada lámina es una página de 1920×1080. */

.fol-barra { background: var(--qp-bg-light); border-bottom: 1px solid var(--border-subtle); padding: 18px 0; }
.fol-barra .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fol-barra .rb-miga { margin: 0 0 4px; }
.fol-barra b { font: 700 18px/1.2 var(--font-display); letter-spacing: -.01em; }
.fol-barra .ctas { display: flex; gap: 10px; flex-wrap: wrap; }

.folleto { width: min(1280px, calc(100% - 40px)); margin: 28px auto 56px; display: flex; flex-direction: column; gap: 28px; }
.lamina { container-type: inline-size; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 50px rgba(15,26,46,.14); position: relative; }
.lam { --u: calc(100cqw / 1920); position: absolute; inset: 0; padding: calc(128 * var(--u)); display: flex; align-items: center; gap: calc(64 * var(--u));
  font-family: var(--font-body); color: var(--qp-ink); background: #fff; }
.lam h1, .lam h2, .lam h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.lam h1 { font-size: calc(80 * var(--u)); line-height: 1.05; }
.lam h2 { font-size: calc(64 * var(--u)); line-height: 1.1; }
.lam h3 { font-size: calc(38 * var(--u)); font-weight: 700; line-height: 1.15; }
.lam p, .lam li { font-size: calc(30 * var(--u)); line-height: 1.45; color: #4a5568; margin: 0; }
.lam .wm { font-family: "Baloo 2", Poppins, sans-serif; font-weight: 800; font-size: calc(64 * var(--u)); line-height: 1; letter-spacing: -.03em; color: #fff; }
.lam .wm b { color: #bfdbfe; font-weight: 800; }
/* 14-oct-2026 (founder): la portada dice de qué rubro es, junto al logo, para reconocer cada PDF de un vistazo. */
.lam .fol-marca { display: flex; align-items: center; flex-wrap: wrap; gap: calc(14 * var(--u)) calc(22 * var(--u)); margin: 0; }
.lam .fol-rubro { display: inline-flex; align-items: center; gap: calc(22 * var(--u)); font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: calc(28 * var(--u)); line-height: 1.2; color: #dbeafe; }
.lam .fol-rubro::before { content: ""; width: 1px; height: calc(40 * var(--u)); background: rgba(219,234,254,.55); }
.lam .ceja { font-size: calc(26 * var(--u)); font-weight: 600; color: var(--qp-blue-primary); text-transform: uppercase; letter-spacing: .08em; }
.lam .col { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.lam .copy { width: calc(560 * var(--u)); flex: none; }
/* Sin height:auto el atributo height de la imagen manda y la captura se sale de la lámina. */
.lam img { height: auto; max-height: calc(790 * var(--u)); object-fit: cover; object-position: top; }
.lam .cap { width: calc(1040 * var(--u)); flex: none; border-radius: calc(24 * var(--u)); box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(20,35,63,.18); border: 1px solid var(--border-default); }
.lam ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.lam li { display: flex; gap: calc(16 * var(--u)); align-items: flex-start; }
.lam li svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; color: var(--qp-success); margin-top: calc(6 * var(--u)); }
.lam-pie { position: absolute; left: calc(128 * var(--u)); right: calc(128 * var(--u)); bottom: calc(44 * var(--u)); display: flex; justify-content: space-between; font-size: calc(20 * var(--u)); color: var(--qp-ink-400); }
.lam-pie .wm { font-size: calc(26 * var(--u)); color: var(--qp-ink); }
.lam-pie .wm b { color: var(--qp-blue-primary); }

/* Portada y cierre: degradado de marca. */
.lam.azul { background: linear-gradient(135deg, #1975f1 0%, #0e4baf 100%); color: #f6f8fc; }
.lam.azul h1, .lam.azul h2, .lam.azul h3 { color: #fff; }
.lam.azul p { color: #dbeafe; }
.lam-cover .copy { width: calc(720 * var(--u)); gap: calc(32 * var(--u)); }
.lam-cover .lead { font-size: calc(34 * var(--u)); line-height: 1.4; }
.lam-cover .fol-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(22 * var(--u)); border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: calc(24 * var(--u)); font-weight: 600; }
.lam-cover .fol-pill svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.lam-cover .cap { width: calc(880 * var(--u)); border: 0; box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(5,25,70,.45); }

/* Promesa: tres tarjetas. */
.lam-promesa { flex-direction: column; align-items: stretch; justify-content: center; }
.lam-promesa h2 { font-size: calc(72 * var(--u)); width: calc(1400 * var(--u)); }
.lam .tarjetas { display: flex; gap: calc(28 * var(--u)); }
.lam .tarjeta { flex: 1; background: #f2f6fd; border-radius: calc(24 * var(--u)); padding: calc(44 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.lam .tarjeta > svg { width: calc(60 * var(--u)); height: calc(60 * var(--u)); color: var(--qp-blue-primary); }
.lam .tarjeta p { font-size: calc(28 * var(--u)); line-height: 1.4; }

.lam.gris { background: #f6f8fc; }

/* Así paga el cliente: fondo oscuro de la sección de desarrolladores. */
.lam-paga { background: #14233f; gap: calc(96 * var(--u)); }
.lam-paga h2 { color: #fff; }
.lam-paga .ceja { color: #93c5fd; }
.lam-paga .tel { width: calc(470 * var(--u)); flex: none; border-radius: calc(44 * var(--u)); border: calc(10 * var(--u)) solid #2b3e63; box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0,0,0,.45); }
.lam-paga .col { flex: 1; gap: calc(36 * var(--u)); }
.lam-paga .pasos { display: flex; flex-direction: column; gap: calc(26 * var(--u)); }
.lam-paga .paso { display: flex; align-items: center; gap: calc(28 * var(--u)); }
.lam-paga .paso b { font: 800 calc(56 * var(--u))/1 var(--font-display); color: #60a5fa; width: calc(60 * var(--u)); flex: none; }
.lam-paga .paso p { font-size: calc(32 * var(--u)); line-height: 1.35; color: #e3ecfa; }
.lam-paga .lam-pie { color: #93a9cc; }
.lam-paga .lam-pie .wm { color: #fff; }
.lam-paga .lam-pie .wm b { color: #93c5fd; }
.lam-paga .nota { font-size: calc(28 * var(--u)); color: #93a9cc; }

.lam-cierre { flex-direction: column; align-items: stretch; justify-content: center; gap: calc(48 * var(--u)); }
.lam-cierre h2 { font-size: calc(88 * var(--u)); line-height: 1.05; width: calc(1400 * var(--u)); }
.lam-cierre .tarjeta { background: rgba(255,255,255,.12); padding: calc(40 * var(--u)); gap: calc(12 * var(--u)); color: inherit; text-decoration: none; }
.lam-cierre a.tarjeta:hover { background: rgba(255,255,255,.2); text-decoration: none; }
.lam-cierre .tarjeta h3 { font-size: calc(34 * var(--u)); }
.lam-cierre .tarjeta p { color: #dbeafe; }
.lam-cierre .tarjeta .url { color: #fff; font-weight: 600; overflow-wrap: anywhere; }

/* Teléfono: las láminas se apilan como tarjetas con tamaños fijos y legibles. */
@media (max-width: 860px) {
  .folleto { width: calc(100% - 32px); gap: 18px; margin-top: 18px; }
  .lamina { aspect-ratio: auto; container-type: normal; border-radius: 20px; }
  .lam { --u: .54px; position: static; flex-direction: column; align-items: stretch; padding: 30px 22px 54px; gap: 24px; }
  .lam .copy, .lam-cover .copy, .lam .cap, .lam-cover .cap, .lam-promesa h2, .lam-cierre h2 { width: auto; }
  .lam .tarjetas { flex-direction: column; gap: 12px; }
  .lam .tarjeta { padding: 20px; }
  .lam h1 { font-size: 36px; } .lam h2, .lam-promesa h2 { font-size: 28px; } .lam-cierre h2 { font-size: 34px; }
  .lam p, .lam li { font-size: 16px; }
  .lam .tarjeta p, .lam-paga .nota { font-size: 15px; }
  .lam .cap { order: 2; }
  .lam img { max-height: none; }
  .lam-paga .tel { width: min(240px, 70%); align-self: center; order: 2; border-radius: 30px; border-width: 7px; }
  .lam-paga .paso p { font-size: 16px; }
  .lam-pie { left: 22px; right: 22px; bottom: 18px; font-size: 12px; }
  .lam-pie .wm { font-size: 16px; }
  .lam .fol-marca { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lam .fol-rubro { font-size: 15px; }
  .lam .fol-rubro::before { display: none; }
  .fol-barra .ctas .btn { flex: 1; }
}

/* Imprimir / PDF: una lámina por página de 1920×1080, sin el encabezado ni el pie del sitio. */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  .nav, footer, .fol-barra { display: none !important; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .folleto { width: 1920px; margin: 0; gap: 0; display: block; }
  .lamina { width: 1920px; height: 1080px; aspect-ratio: auto; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .lamina:last-child { break-after: auto; page-break-after: auto; }
  /* 14-oct-2026 (founder: «ese sombreado se ve feo»): en el PDF, Chromium convierte una sombra con desenfoque en una imagen
     gris aparte, y algunos visores (iPhone, Vista Previa) la pintan como un rectángulo gris u oscuro más grande que la
     captura. En el PDF la sombra va SIN desenfoque: capas finas que el PDF dibuja como vectores, pegadas a la tarjeta. */
  .lam .cap { box-shadow: 0 1px 0 1px rgba(20,35,63,.05), 0 4px 0 1px rgba(20,35,63,.04), 0 8px 0 2px rgba(20,35,63,.03), 0 13px 0 3px rgba(20,35,63,.02); }
  .lam-cover .cap { box-shadow: 0 2px 0 1px rgba(5,25,70,.10), 0 6px 0 2px rgba(5,25,70,.07), 0 11px 0 3px rgba(5,25,70,.05), 0 17px 0 4px rgba(5,25,70,.03); }
  .lam-paga .tel { box-shadow: 0 2px 0 1px rgba(0,0,0,.08), 0 6px 0 2px rgba(0,0,0,.05), 0 11px 0 3px rgba(0,0,0,.03); }
}