/* ============================================================
   Origen · La Comprobación — /webs/comprobacion.html
   Landing de captación + 7 preguntas + resultado.
   Depende de los tokens de /css/styles.css (:root).
   ============================================================ */

.comp-body{ background:var(--bg); }

/* ---------- Cabecera ---------- */
.comp-head .wrap{ display:flex; align-items:center; justify-content:space-between; }
.comp-head__badge{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--hair); border-radius:999px;
  padding:8px 14px; white-space:nowrap;
}

/* ---------- Estructura común ---------- */
.comp-main{ min-height:70vh; }
.comp-paso{ padding:clamp(40px,7vw,84px) var(--gut) clamp(56px,8vw,110px); }
.comp-col{ max-width:640px; margin:0 auto; }
.comp-eyebrow{ text-align:left; }
.comp-h1{ font-size:clamp(34px,6vw,58px); margin:14px 0 18px; }
.comp-sub{ margin:0 0 22px; }
.comp-paso[hidden]{ display:none; }

/* entrada suave (sin depender de app.js) */
@media (prefers-reduced-motion: no-preference){
  .comp-anim{ animation:compIn .5s ease both; }
  @keyframes compIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
}

/* ---------- Chips ---------- */
.comp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.comp-chip{
  font-size:13px; color:var(--ink-2); border:1px solid var(--hair);
  border-radius:999px; padding:7px 12px; background:var(--panel);
}

/* ---------- Formulario de captación ---------- */
.comp-form{
  background:var(--panel); border:1px solid var(--hair); border-radius:18px;
  padding:clamp(20px,4vw,30px);
}
.comp-field{ margin-bottom:16px; }
.comp-label{
  display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:7px;
}
.comp-input{
  width:100%; box-sizing:border-box;
  background:var(--bg-warm); color:var(--ink);
  border:1px solid var(--hair); border-radius:12px;
  padding:15px 16px; font-size:17px; font-family:var(--body);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.comp-input::placeholder{ color:var(--ink-3); opacity:.7; }
.comp-input:focus{ outline:none; border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.comp-input.mal{ border-color:var(--no); }
.comp-error{
  color:var(--no); font-size:14px; margin:0 0 14px; line-height:1.4;
}
.comp-btn{ width:100%; justify-content:center; }
.comp-legal{ margin-top:14px; text-align:center; }
.comp-legal a{ color:var(--ink-2); text-decoration:underline; }

/* ---------- Progreso ---------- */
.comp-progreso{ margin-bottom:26px; }
.comp-progreso__txt{
  display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px;
}
.comp-progreso__bar{ height:4px; border-radius:999px; background:var(--hair-2); overflow:hidden; }
.comp-progreso__fill{ display:block; width:14%; height:100%; background:var(--acc); transition:width .3s ease; }

/* ---------- Preguntas ---------- */
.comp-q__titulo{
  font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.018em;
  font-size:clamp(24px,4.4vw,36px); color:var(--ink); margin:0 0 22px; text-wrap:balance;
}
.comp-opts{ display:flex; flex-direction:column; gap:10px; }
.comp-opt{
  text-align:left; cursor:pointer; width:100%;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--hair); border-radius:14px;
  padding:17px 18px; font-size:17px; line-height:1.35; font-family:var(--body);
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.comp-opt:hover{ border-color:var(--acc-line); background:var(--panel-2); }
.comp-opt:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.comp-opt.elegida{ border-color:var(--acc); background:var(--acc-soft); }
.comp-atras{
  margin-top:22px; background:none; border:0; cursor:pointer;
  color:var(--ink-3); font-size:14px; font-family:var(--body); padding:6px 0;
}
.comp-atras:hover{ color:var(--ink-2); }

/* ---------- Resultado ---------- */
.comp-res__eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px;
}
.comp-res__titulo{
  font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.022em;
  font-size:clamp(34px,6vw,54px); color:var(--ink); margin:0 0 18px; text-wrap:balance;
}
.comp-res__titulo .acc{ color:var(--acc); }
.comp-res__lead{ font-size:18px; color:var(--ink-2); line-height:1.55; margin:0 0 26px; }

.comp-card{
  background:var(--panel); border:1px solid var(--hair); border-radius:16px;
  padding:clamp(18px,3.5vw,26px); margin-bottom:18px;
}
.comp-card__h{
  font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px; font-weight:700;
}
.comp-card ul{ margin:0; padding:0; list-style:none; }
.comp-card li{
  position:relative; padding-left:24px; margin-bottom:10px;
  color:var(--ink-2); font-size:16px; line-height:1.5;
}
.comp-card li:last-child{ margin-bottom:0; }
.comp-card li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:8px; height:8px; border-radius:50%;
  border:2px solid var(--acc); background:transparent;
}
.comp-card--manera li::before{ background:var(--acc); }

.comp-card__p{ color:var(--ink-2); font-size:16px; line-height:1.6; margin:0; }
.comp-card__p b{ color:var(--ink); }
.comp-card__pie{ margin:14px 0 0; font-size:13px; color:var(--ink-3); }
.comp-card--paso{ border-color:var(--acc-line); background:linear-gradient(180deg, var(--acc-soft), transparent 70%), var(--panel); }

/* diagnóstico por áreas */
.comp-areas{ padding-bottom:clamp(8px,1.6vw,14px); }
.comp-area{
  padding:16px 0 16px 16px; border-left:2px solid var(--hair);
  border-top:1px solid var(--hair-2);
}
.comp-area:first-of-type{ border-top:none; }
.comp-area--bien{ border-left-color:var(--si); }
.comp-area--medio{ border-left-color:var(--ink-3); }
.comp-area--ojo{ border-left-color:var(--acc); }
.comp-area__t{
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:6px;
}
.comp-area__d{ margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.comp-area__d b{ color:var(--ink); }

/* las creencias */
.comp-card--creencias .comp-card__p{ margin-bottom:15px; }
.comp-card--creencias .comp-card__p:last-of-type{ margin-bottom:0; }
.comp-card--creencias .comp-card__p b:first-child{ color:var(--ink); }

/* ---------- LOS DIBUJOS (SVG de línea) ---------- */
.dib{ display:block; width:100%; height:auto; margin:6px auto 2px; max-width:520px; }
.dib__ln{ fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.dib__ln--fina{ stroke-width:1; opacity:.5; }
.dib__suelo{ stroke:var(--hair); stroke-width:2; }
.dib__pel{ fill:none; stroke:var(--ink-3); stroke-width:2; }
.dib__pel--hecho{ stroke:var(--si); }
.dib__pel--yo{ fill:var(--acc-soft); stroke:var(--acc); stroke-width:2.5; }
.dib__num{ font-family:var(--display); font-weight:800; font-size:16px; fill:var(--ink-3); }
.dib__num--yo{ fill:var(--acc); }
.dib__pin{ fill:var(--acc); }
.dib__flecha{ stroke:var(--acc); stroke-width:2.5; stroke-linecap:round; }
.dib__flechaL{ fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dib__aqui{ font-family:var(--body); font-size:11px; letter-spacing:.16em; font-weight:700; fill:var(--acc); }
.dib__cap{ font-family:var(--body); font-size:11px; letter-spacing:.16em; fill:var(--ink-3); }
.dib__vacio{ font-family:var(--serif); font-size:14px; fill:var(--ink-3); font-style:italic; }
.dib__punto{ fill:var(--acc); }
.dib__punto--sm{ r:4; opacity:.75; }
.dib__relleno{ fill:var(--acc); opacity:.28; }
.dib__pct{ font-family:var(--display); font-weight:800; font-size:34px; fill:var(--acc); letter-spacing:-.03em; }
.dib--caja{ max-width:340px; }
.dib__cap--env, .dib__cap--prod{ font-size:9.5px; letter-spacing:.12em; }
.dib--escalera{ max-width:520px; }

/* ---------- EL MAPA · TÚ ESTÁS AQUÍ ---------- */
.comp-mapa{
  background:var(--panel); border:1px solid var(--hair); border-radius:16px;
  padding:clamp(18px,3.5vw,26px); margin-bottom:18px;
}
.comp-mapa__lista{ display:flex; flex-direction:column; gap:2px; }
.comp-esc{
  display:flex; gap:14px; align-items:flex-start;
  padding:12px 14px; border-radius:10px; border:1px solid transparent;
}
.comp-esc__n{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--display); font-weight:800;
  font-size:13px; border:1.5px solid var(--hair); color:var(--ink-3);
}
.comp-esc__nombre{
  font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink-2);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:3px;
}
.comp-esc__corto{ margin:0; font-size:14.5px; line-height:1.45; color:var(--ink-3); }
.comp-esc--hecho .comp-esc__n{ border-color:var(--si); color:var(--si); }
.comp-esc--aqui{
  background:var(--acc-soft); border-color:var(--acc);
}
.comp-esc--aqui .comp-esc__n{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.comp-esc--aqui .comp-esc__nombre{ color:var(--ink); font-size:17px; }
.comp-esc--aqui .comp-esc__corto{ color:var(--ink-2); }
.comp-esc__aqui{
  font-family:var(--body); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--acc); color:var(--acc-ink); border-radius:999px; padding:4px 9px; font-weight:700;
}
.comp-mapa__tu{ margin-top:16px; padding-top:16px; border-top:1px solid var(--hair); }
.comp-mapa__quien{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-2); }

/* ---------- EL SALTO A→B ---------- */
.comp-salto{
  border-left:3px solid var(--acc); padding:4px 0 4px 20px; margin:0 0 18px;
}
.comp-salto__t{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.1;
  font-size:clamp(22px,3.4vw,32px); color:var(--ink-3); margin:0;
}
.comp-salto__t--b{ color:var(--ink); }

/* ---------- MAPA DE PROGRESO ---------- */
.comp-prog__cols{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:620px){ .comp-prog__cols{ grid-template-columns:1fr 1fr; gap:26px; } }
.comp-prog__h{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--ink-3); margin:0 0 10px;
}
.comp-prog__col--tienes .comp-prog__h{ color:var(--si); }
.comp-prog__col--falta .comp-prog__h{ color:var(--acc); }
.comp-prog__col--tienes li::before{ border-color:var(--si) !important; background:var(--si) !important; }
.comp-prog__res{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--hair);
  font-size:16px; line-height:1.6; color:var(--ink-2);
}
.comp-prog__res b{ color:var(--ink); }

/* ---------- ERROR y ERRORES CRÍTICOS ---------- */
.comp-card--error{ border-color:var(--acc-line); }
.comp-card--errores li::before{
  border:none !important; background:none !important;
  content:"×" !important; color:var(--acc) !important;
  font-family:var(--display); font-weight:800; font-size:15px;
  width:auto !important; height:auto !important; top:0 !important; left:3px !important;
  display:block; line-height:1.5;
}
.comp-card--cuando .comp-card__p{ font-family:var(--serif); font-size:17px; }

/* ---------- EL SIGUIENTE ESCALÓN ---------- */
.comp-sig{
  border:1px solid var(--acc-line); border-radius:16px;
  background:linear-gradient(180deg, var(--acc-soft), transparent 55%), var(--panel);
  padding:clamp(20px,4vw,30px); margin-bottom:18px;
}
.comp-sig__corto{
  font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.1;
  font-size:clamp(21px,3.2vw,30px); color:var(--ink); margin:0 0 12px;
}
.comp-sig__falta{ margin-top:20px; padding-top:18px; border-top:1px solid var(--hair); }
.comp-sig__h{ margin:0 0 12px; font-size:16px; line-height:1.55; color:var(--ink); font-weight:600; }
.comp-sig ul{ margin:0; padding:0; list-style:none; }
.comp-sig li{
  position:relative; padding-left:24px; margin-bottom:9px;
  color:var(--ink-2); font-size:15.5px; line-height:1.5;
}
.comp-sig li::before{
  content:""; position:absolute; left:2px; top:8px;
  width:8px; height:8px; border-radius:50%; border:2px solid var(--acc);
}
.comp-sig__cierre{ margin:18px 0 0; font-size:16px; line-height:1.6; color:var(--ink-2); }
.comp-sig__cierre b{ color:var(--ink); }
.comp-sig__enlace{ margin:14px 0 0; font-size:14px; line-height:1.55; color:var(--ink-3); }
.comp-sig__enlace b{ color:var(--ink-2); font-weight:600; }

/* el botón que lleva al nivel de pago — funciona en pantalla y clicable en el PDF */
.comp-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin:20px 0 0; padding:16px 26px;
  background:var(--acc); color:var(--acc-ink) !important;
  border-radius:12px; text-decoration:none !important;
  font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.01em;
  transition:background .15s ease, transform .15s ease;
}
.comp-cta:hover{ background:var(--acc-hi); transform:translateY(-1px); }
.comp-cta__arr{ font-weight:400; }

/* la cuenta: el número que no había hecho nadie */
.comp-cuenta{
  border:1px solid var(--hair); border-radius:16px; background:var(--panel);
  padding:clamp(20px,4vw,30px); margin-bottom:18px; text-align:center;
}
.comp-cuenta__cifra{
  font-family:var(--display); font-weight:800; letter-spacing:-.05em; line-height:.85;
  font-size:clamp(64px,min(13vw,18vh),150px); color:var(--acc);
  text-shadow:0 0 70px rgba(229,35,43,.3); font-variant-numeric:tabular-nums;
  margin:6px 0 14px;
}
.comp-cuenta__pie{
  font-family:var(--serif); font-size:clamp(16px,2vw,21px); line-height:1.4;
  color:var(--ink); margin:0 auto 18px; max-width:34ch;
}
.comp-cuenta__txt{
  color:var(--ink-2); font-size:16px; line-height:1.6; margin:0 auto;
  max-width:52ch; text-align:left;
}
.comp-cuenta__txt b{ color:var(--ink); }
.comp-cuenta__nota{
  margin:16px auto 0; max-width:52ch; text-align:left;
  font-size:13px; line-height:1.5; color:var(--ink-3);
}
@media (prefers-reduced-motion: no-preference){
  .comp-cine .comp-cuenta__cifra{ animation:compPum .8s cubic-bezier(.22,1,.36,1) .3s both; }
}

/* la escalera, enseñada sin colocar */
.comp-escalera{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; counter-reset:esc; }
.comp-escalon{
  font-size:13px; color:var(--ink-2); border:1px solid var(--hair);
  border-radius:10px; padding:8px 11px; background:var(--bg-warm);
  counter-increment:esc;
}
.comp-escalon::before{ content:counter(esc) " · "; color:var(--acc); font-weight:700; }
.comp-escalera__nota{ font-size:14px; color:var(--ink-3); line-height:1.5; margin:12px 0 0; }

/* oferta */
.comp-oferta{
  border:1px solid var(--acc-line); border-radius:18px;
  background:linear-gradient(180deg, var(--acc-soft), transparent 60%), var(--panel);
  padding:clamp(20px,4vw,30px); margin-top:26px;
}
.comp-oferta__precio{
  display:flex; align-items:baseline; gap:10px; margin:2px 0 14px;
}
.comp-oferta__eur{
  font-family:var(--display); font-weight:800; font-size:44px; color:var(--ink); letter-spacing:-.02em;
}
.comp-oferta__det{ font-size:14px; color:var(--ink-3); }
.comp-oferta .comp-btn{ margin-top:18px; }
.comp-oferta__micro{ margin-top:12px; text-align:center; font-size:13px; color:var(--ink-3); }
.comp-oferta__ok{
  border:1px solid var(--hair); border-radius:12px; background:var(--bg-warm);
  padding:16px 18px; margin-top:18px; color:var(--ink); font-size:16px; line-height:1.5;
}

.comp-res__salida{ margin-top:26px; }
.comp-res__volver{ color:var(--ink-2); text-decoration:underline; font-size:15px; }

/* ---------- Footer ---------- */
.comp-foot{ margin-top:40px; }
.comp-foot__name{ font-size:18px; }

/* ---------- Móvil ---------- */
@media (max-width:560px){
  .comp-head__badge{ display:none; }
  .comp-oferta__eur{ font-size:38px; }
}

/* ---------- Barra de acciones del informe ---------- */
.comp-acciones{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:0 0 26px; padding-bottom:22px; border-bottom:1px solid var(--hair);
}
.comp-descarga{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--panel); color:var(--ink); border:1px solid var(--hair);
  border-radius:12px; padding:13px 18px; font-family:var(--body); font-size:15px;
  transition:border-color .15s ease, background .15s ease;
}
.comp-descarga:hover{ border-color:var(--acc); background:var(--panel-2); }
.comp-descarga svg{ flex:none; }
.comp-acciones__nota{ font-size:13px; color:var(--ink-3); }

/* ============================================================
   EL INFORME EN PAPEL — lo que sale al guardar como PDF.
   Fondo blanco, tinta negra, acento rojo. Sin capa cine.
   ============================================================ */
@media print{
  /* margen cero: cada hoja se pagina sola, para que las negras salgan a sangre */
  @page{ size:A4; margin:0; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  /* ---- el sistema de hojas ---- */
  .hoja{
    display:block !important;
    box-sizing:border-box;
    width:210mm; min-height:297mm; max-height:297mm; overflow:hidden;
    padding:20mm 18mm;
    break-after:page; page-break-after:always;
    break-inside:avoid; page-break-inside:avoid;
    position:relative;
  }
  .hoja:last-child{ break-after:auto; page-break-after:auto; }
  .hoja--negra{
    background:#0A0A0C !important; color:#F7F4EE !important;
    padding:24mm 20mm;
  }
  .hoja--negra *{ border-color:rgba(247,244,238,.18) !important; }
  .hoja--negra .comp-card, .hoja--negra .comp-cuenta,
  .hoja--negra .comp-sig, .hoja--negra .comp-mapa{
    background:transparent !important; border-top-color:rgba(247,244,238,.18) !important;
  }
  .hoja--negra .comp-card__h, .hoja--negra .comp-card__pie,
  .hoja--negra .comp-cuenta__nota{ color:#9C9890 !important; }
  .hoja--negra .comp-card li, .hoja--negra .comp-card__p,
  .hoja--negra .comp-cuenta__txt, .hoja--negra .comp-cuenta__pie,
  .hoja--negra .comp-sig li, .hoja--negra .comp-sig__h,
  .hoja--negra .comp-sig__cierre, .hoja--negra .comp-sig__enlace,
  .hoja--negra .comp-sig__corto, .hoja--negra .comp-card--creencias .comp-card__p{ color:#E8E4DC !important; }
  .hoja--negra b, .hoja--negra .comp-card li b, .hoja--negra .comp-card__p b,
  .hoja--negra .comp-cuenta__txt b, .hoja--negra .comp-sig__cierre b,
  .hoja--negra .comp-sig__enlace b, .hoja--negra .comp-card--creencias .comp-card__p b{ color:#FFFFFF !important; }
  .hoja--negra .acc, .hoja--negra .comp-cuenta__cifra{ color:#FB4148 !important; -webkit-text-fill-color:#FB4148 !important; }
  /* el pie del informe sobre negro: si no, las negritas salen negro sobre negro */
  .hoja--negra .comp-papel__pie{ color:#9C9890 !important; border-top-color:rgba(247,244,238,.18) !important; }
  .hoja--negra .comp-papel__pie b{ color:#E8E4DC !important; }
  .hoja--negra .comp-card li::before{ border-color:#FB4148 !important; }
  .hoja--negra .comp-card--errores li::before{ color:#FB4148 !important; }
  .hoja--negra .comp-sig li::before{ border-color:#FB4148 !important; }

  /* cabecera de hoja: marca discreta arriba */
  .hoja__marca{
    display:flex !important; align-items:center; justify-content:space-between;
    font-size:7.5pt; letter-spacing:.18em; text-transform:uppercase;
    color:#999; padding-bottom:3mm; margin-bottom:7mm;
    border-bottom:1px solid #e2e2e2;
  }
  .hoja--negra .hoja__marca{ color:#7E7A72; border-bottom-color:rgba(247,244,238,.16); }
  .hoja__pag{ font-variant-numeric:tabular-nums; }
  .hoja > .comp-card:first-of-type, .hoja > .comp-cuenta:first-of-type,
  .hoja > .comp-mapa:first-of-type, .hoja > .comp-sig:first-of-type,
  .hoja > .dib + .comp-card, .hoja > .dib + .comp-cuenta{ border-top:none !important; padding-top:0 !important; }

  /* ---- portada ---- */
  .hoja--portada{
    display:flex !important; flex-direction:column; justify-content:space-between;
  }
  .portada__top{ display:flex; align-items:center; gap:10mm; }
  .portada__logo{ display:flex; align-items:center; gap:4mm; }
  .portada__nombre{
    font-family:var(--display); font-weight:800; font-size:15pt; letter-spacing:.14em;
    color:#F7F4EE !important;
  }
  .portada__tag{ font-size:7pt; letter-spacing:.24em; color:#9C9890 !important; }
  .portada__centro{ padding:6mm 0; }
  .portada__doc{
    font-size:8.5pt; letter-spacing:.24em; text-transform:uppercase;
    color:#9C9890 !important; margin:0 0 6mm;
  }
  .portada__h{
    font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:.98;
    font-size:34pt; color:#F7F4EE !important; margin:0 0 8mm; max-width:15em;
  }
  .portada__h .acc{ color:#FB4148 !important; }
  .portada__para{
    font-family:var(--serif); font-size:13pt; line-height:1.4; color:#E8E4DC !important;
    margin:0; padding-top:6mm; border-top:1px solid rgba(247,244,238,.2);
  }
  .portada__para b{ color:#fff !important; }
  .portada__meta{
    display:flex; gap:8mm; flex-wrap:wrap;
    font-size:8pt; letter-spacing:.14em; text-transform:uppercase; color:#9C9890 !important;
  }
  .portada__dibujo{ margin:8mm 0; text-align:center; }
  .portada__dibujo svg{ width:100%; max-width:150mm; height:auto; }

  html, body{ background:#fff !important; color:#111 !important; }
  body.comp-body.comp-cine{ background:#fff !important; }

  /* fuera todo lo que no es informe: la venta se queda en pantalla */
  .comp-lb, .comp-hud, .comp-camf, .comp-brasa,
  .comp-head__badge, .comp-foot, .comp-acciones,
  #paso-landing, #paso-preguntas, .comp-oferta__ok,
  .comp-oferta, .comp-solo-pantalla{ display:none !important; }
  .comp-sig{ display:block !important; }
  .comp-solo-papel{ display:block !important; }

  /* la cabecera de la web no se imprime: cada hoja lleva su propia marca */
  .comp-head{ display:none !important; }

  .comp-paso{ min-height:0 !important; display:block !important; padding:0 !important; }
  .comp-col{ max-width:none !important; }
  .comp-main{ padding:0 !important; }

  /* tinta legible en papel */
  .comp-res__titulo, .comp-cuenta__pie, .comp-card li, .comp-card__p,
  .comp-cuenta__txt, .comp-res__lead, .comp-escalon{ color:#111 !important; }
  .comp-res__eyebrow, .comp-card__h, .comp-cuenta__nota, .comp-card__pie,
  .comp-escalera__nota{ color:#555 !important; }
  /* la negrita hereda el casi-blanco de la web: en papel se volvía invisible */
  .comp-card li b, .comp-card__p b, .comp-cuenta__txt b, .comp-area__d b,
  .comp-res__lead b, .comp-papel__pie b, .comp-prog__res b,
  .comp-sig__cierre b, .comp-sig__enlace b, .comp-sig li b,
  .comp-mapa__quien b, .comp-esc__corto b{ color:#111 !important; font-weight:700 !important; }
  .acc, .comp-res__titulo .acc, .comp-cuenta__cifra,
  .comp-escalon::before{ color:#C1121F !important; -webkit-text-fill-color:#C1121F !important; }
  .comp-card li::before{ border-color:#C1121F !important; }
  .comp-card--manera li::before{ background:#C1121F !important; }

  /* tarjetas como bloques de informe, no como cajas de web */
  .comp-card, .comp-cuenta, .comp-card--paso, .comp-mapa, .comp-sig{
    background:#fff !important; border:none !important; border-top:1.5px solid #ddd !important;
    border-radius:0 !important; padding:4.5mm 0 2.5mm !important; margin:0 0 1mm !important;
    box-shadow:none !important; break-inside:avoid; page-break-inside:avoid;
  }

  /* el mapa en papel */
  .comp-mapa{ break-inside:avoid; }
  .comp-mapa__lista{ gap:0 !important; }
  .comp-esc{ padding:2.5mm 3mm !important; border:none !important; break-inside:avoid; }
  .comp-esc--aqui{ background:#FDF0F0 !important; border-left:3px solid #C1121F !important; }
  .comp-esc__n{ border-color:#bbb !important; color:#666 !important; }
  .comp-esc--hecho .comp-esc__n{ border-color:#1a7f4b !important; color:#1a7f4b !important; }
  .comp-esc--aqui .comp-esc__n{ background:#C1121F !important; border-color:#C1121F !important; color:#fff !important; }
  .comp-esc__nombre{ color:#333 !important; font-size:11pt !important; }
  .comp-esc--aqui .comp-esc__nombre{ color:#111 !important; }
  .comp-esc__aqui{ background:#C1121F !important; color:#fff !important; font-size:6.5pt !important; }
  .comp-esc__corto{ color:#555 !important; font-size:9.5pt !important; }
  .comp-mapa__tu{ border-top-color:#eee !important; }
  .comp-mapa__quien{ color:#111 !important; font-size:10pt !important; }

  /* el salto */
  .comp-salto{ border-left-color:#C1121F !important; break-inside:avoid; margin-bottom:3mm !important; }
  .comp-salto__t{ font-size:15pt !important; color:#777 !important; }
  .comp-salto__t--b{ color:#111 !important; }

  /* progreso */
  .comp-prog__cols{ grid-template-columns:1fr 1fr !important; gap:8mm !important; }
  .comp-prog__h{ font-size:8pt !important; }
  .comp-prog__col--tienes .comp-prog__h{ color:#1a7f4b !important; }
  .comp-prog__col--falta .comp-prog__h{ color:#C1121F !important; }
  .comp-prog__col--tienes li::before{ border-color:#1a7f4b !important; background:#1a7f4b !important; }
  .comp-prog__res{ border-top-color:#eee !important; color:#111 !important; font-size:10pt !important; }

  /* errores */
  .comp-card--errores li::before{ color:#C1121F !important; }
  .comp-card--cuando .comp-card__p{ font-size:11pt !important; }

  /* el siguiente escalón: se queda, pero como continuación, no como anuncio */
  .comp-sig{ border-top:2px solid #111 !important; break-inside:auto !important; }
  .comp-sig__corto{ font-size:14pt !important; color:#111 !important; }
  .comp-sig li{ font-size:10pt !important; color:#111 !important; }
  .comp-sig li::before{ border-color:#C1121F !important; }
  .comp-sig__h, .comp-sig__cierre{ font-size:10pt !important; color:#111 !important; }
  .comp-sig__enlace{ font-size:9pt !important; color:#555 !important; }
  /* el botón, impreso: rectángulo rojo sólido y clicable */
  .comp-cta{
    display:inline-flex !important; background:#C1121F !important; color:#fff !important;
    padding:4mm 8mm !important; border-radius:2mm !important; font-size:12pt !important;
    margin:5mm 0 0 !important; text-decoration:none !important;
  }
  .hoja--negra .comp-cta{ background:#E5232B !important; color:#fff !important; }
  .comp-card ul{ margin:0 !important; }
  .comp-card li{ margin-bottom:2mm !important; }
  .comp-card__pie{ margin-top:3mm !important; }
  .comp-cuenta{ text-align:left !important; }
  .comp-cuenta__cifra{
    font-size:56pt !important; text-shadow:none !important; animation:none !important;
    margin:2mm 0 3mm !important;
  }
  .comp-cuenta__pie, .comp-cuenta__txt, .comp-cuenta__nota{ margin-left:0 !important; max-width:none !important; }

  .comp-res__titulo{ font-size:26pt !important; line-height:1.05 !important; }
  .comp-res__lead{ font-size:11.5pt !important; }
  .comp-card li, .comp-card__p, .comp-cuenta__txt, .comp-oferta li{ font-size:10.5pt !important; line-height:1.5 !important; }
  .comp-card__h{ font-size:8pt !important; letter-spacing:.14em !important; }
  .comp-anim{ animation:none !important; opacity:1 !important; transform:none !important; }

  .comp-escalon{ background:#fff !important; border:1px solid #ccc !important; }

  /* áreas y creencias en papel: el bloque puede repartirse, cada área no se corta */
  .comp-areas, .comp-card--creencias{ break-inside:auto !important; page-break-inside:auto !important; }
  .comp-area{ border-top-color:#eee !important; border-left-width:2.5px !important; break-inside:avoid; page-break-inside:avoid; }
  .comp-area--bien{ border-left-color:#1a7f4b !important; }
  .comp-area--medio{ border-left-color:#999 !important; }
  .comp-area--ojo{ border-left-color:#C1121F !important; }
  .comp-area__t{ color:#111 !important; font-size:11pt !important; }
  .comp-area__d{ color:#333 !important; font-size:10pt !important; }
  .comp-card--creencias{ break-before:auto; }
  .comp-card--creencias .comp-card__p{ font-size:10pt !important; }

  /* cabecera y pie del documento, solo en papel */
  .comp-papel{ display:block !important; }
  .comp-papel__cab{
    margin:0 0 7mm; padding-bottom:3mm; border-bottom:1.5px solid #111;
    display:flex; justify-content:space-between; align-items:baseline; gap:6mm;
  }
  .comp-papel__doc{
    margin:0; font-family:var(--display); font-weight:700; font-size:9.5pt;
    letter-spacing:.04em; text-transform:uppercase; color:#111;
  }
  .comp-papel__meta{ margin:0; font-size:8.5pt; color:#555; text-align:right; white-space:nowrap; }
  /* el pie fluye: si no cabe entero, se parte antes que abrir una hoja para él solo */
  .comp-papel__pie{
    margin-top:4mm; padding-top:3mm; border-top:1px solid #ddd;
    font-size:8pt; line-height:1.5; color:#444;
  }
  .comp-papel__pie p{ margin:0 0 2mm; max-width:100%; }
  .comp-papel__pie p:last-child{ margin-bottom:0; }

  /* ---- los dibujos en papel ---- */
  .dib{ margin:4mm auto 3mm !important; break-inside:avoid; }
  .dib--escalera{ max-width:140mm !important; }
  .dib--caja{ max-width:62mm !important; }
  .dib--alcance{ max-width:130mm !important; }
  .dib--tienda{ max-width:135mm !important; }
  .dib__ln, .dib__pel, .dib__flechaL{ stroke:#8a8a8a !important; }
  .dib__pel--hecho{ stroke:#1a7f4b !important; }
  .dib__pel--yo{ fill:#FBEAEA !important; stroke:#C1121F !important; }
  .dib__num{ fill:#8a8a8a !important; }
  .dib__num--yo{ fill:#C1121F !important; }
  .dib__pin, .dib__punto{ fill:#C1121F !important; }
  .dib__flecha{ stroke:#C1121F !important; }
  .dib__aqui{ fill:#C1121F !important; }
  .dib__cap, .dib__vacio{ fill:#777 !important; }
  .dib__relleno{ fill:#C1121F !important; opacity:.22 !important; }
  .dib__pct{ fill:#C1121F !important; }
  .dib__suelo{ stroke:#ddd !important; }
  /* en hoja negra los dibujos se aclaran */
  .hoja--negra .dib__ln, .hoja--negra .dib__pel, .hoja--negra .dib__flechaL{ stroke:#8E8A82 !important; }
  .hoja--negra .dib__pel--hecho{ stroke:#5FD08A !important; }
  .hoja--negra .dib__pel--yo{ fill:rgba(251,65,72,.18) !important; stroke:#FB4148 !important; }
  .hoja--negra .dib__num{ fill:#8E8A82 !important; }
  .hoja--negra .dib__num--yo, .hoja--negra .dib__pin, .hoja--negra .dib__punto,
  .hoja--negra .dib__flecha, .hoja--negra .dib__aqui, .hoja--negra .dib__pct{ fill:#FB4148 !important; }
  .hoja--negra .dib__flecha{ stroke:#FB4148 !important; }
  .hoja--negra .dib__cap, .hoja--negra .dib__vacio{ fill:#9C9890 !important; }
  .hoja--negra .dib__relleno{ fill:#FB4148 !important; opacity:.3 !important; }
  .hoja--negra .dib__suelo{ stroke:rgba(247,244,238,.2) !important; }

  a[href]::after{ content:""; }
}
.comp-papel{ display:none; }
.hoja__marca{ display:none; }

/* remates que cambian según el soporte: la venta vive en pantalla, no en el papel */
.comp-solo-papel{ display:none; }

/* ============================================================
   CAPA CINE — el mismo lenguaje que crecer.html (cine-full),
   autocontenido: letterbox + HUD REC + foco + brasa + tipografía.
   ============================================================ */

/* letterbox */
.comp-cine .comp-lb{ position:fixed; left:0; right:0; height:clamp(12px,2.6vh,26px); z-index:120; background:#000; pointer-events:none; }
.comp-cine .comp-lb--top{ top:0; }
.comp-cine .comp-lb--bot{ bottom:0; }

/* HUD de rodaje */
.comp-cine .comp-hud{
  position:fixed; z-index:121; bottom:calc(clamp(12px,2.6vh,26px) + 14px); left:18px;
  display:flex; align-items:center; gap:7px; pointer-events:none;
  font-family:var(--body); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3); text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.comp-cine .comp-hud__dot{ width:6px; height:6px; border-radius:50%; background:var(--acc); }
@media (prefers-reduced-motion: no-preference){
  .comp-cine .comp-hud__dot{ animation:compRec 2.4s ease-in-out infinite; }
  @keyframes compRec{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
}

/* foco de cámara + brasa */
.comp-cine .comp-camf{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 48% at var(--cx,50%) var(--cy,26%), rgba(244,241,234,.10), transparent 74%);
  transition:background 1.2s ease;
}
.comp-cine .comp-brasa{
  position:fixed; left:0; right:0; bottom:0; height:42vh; z-index:0; pointer-events:none;
  background:linear-gradient(0deg, var(--brasa, rgba(229,35,43,.08)), transparent 80%);
  transition:background 1.2s ease;
}

/* capas por encima del atrezzo */
.comp-cine .comp-head{ position:relative; z-index:3; margin-top:clamp(12px,2.6vh,26px); }
.comp-cine .comp-main{ position:relative; z-index:2; }
.comp-cine .comp-foot{ position:relative; z-index:3; padding-bottom:clamp(28px,4vh,44px); margin-bottom:clamp(12px,2.6vh,26px); }

/* escena completa: cada paso llena el encuadre */
.comp-cine .comp-paso{ min-height:calc(100dvh - 190px); display:flex; align-items:center; }
.comp-cine .comp-paso[hidden]{ display:none; }
.comp-cine .comp-col{ width:100%; }

/* tipografía de cine */
.comp-cine .comp-eyebrow{ letter-spacing:.34em; font-size:clamp(10px,1.1vw,12px); }
.comp-cine .comp-h1{ font-size:clamp(38px,min(6.6vw,8.8vh),92px); line-height:.95; letter-spacing:-.045em; }
.comp-cine .comp-res__titulo{ font-size:clamp(38px,min(6.2vw,8.4vh),84px); line-height:.95; letter-spacing:-.045em; }
.comp-cine .comp-q__titulo{ font-size:clamp(26px,min(4.6vw,6vh),44px); letter-spacing:-.03em; }

/* el corte de cámara: cada cambio de plano entra con un latigazo de luz */
@media (prefers-reduced-motion: no-preference){
  .comp-cine .comp-anim{ animation:compCorte .5s cubic-bezier(.22,1,.36,1) both; }
  @keyframes compCorte{
    from{ opacity:0; transform:translateY(16px) scale(1.012); filter:brightness(1.5); }
    to{ opacity:1; transform:none; filter:none; }
  }
  .comp-cine .comp-oferta__eur.pum{ animation:compPum .7s cubic-bezier(.22,1,.36,1); }
  @keyframes compPum{ 0%{ transform:scale(1); } 26%{ transform:scale(1.09); } 100%{ transform:scale(1); } }
  .comp-cine .comp-oferta__eur{ text-shadow:0 0 60px rgba(229,35,43,.35); }
}

@media (max-width:760px){
  .comp-cine .comp-hud{ font-size:9px; letter-spacing:.2em; left:12px; }
  .comp-cine .comp-paso{ min-height:auto; }
}

/* ---- la dirección de su tienda: solo a quien dice tenerla ---- */
.comp-tienda{ margin-top:22px; padding-top:22px; border-top:1px solid var(--hair); text-align:left; }
.comp-opcional{ margin-left:8px; font-family:var(--display); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.comp-tienda__p{ margin:9px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-3); }