/* ============================================================
   SERVICHECK — /transferencias (§transferencias-landing 2026-09-12)
   Hoja PROPIA de la página, con prefijo .tf- para no pisar nada de
   servicheck.css. Hereda los tokens (:root) y componentes del sitio;
   solo agrega lo que esta página necesita: el chat de WhatsApp del
   hero, la cinta de bancos y los marcos de las capturas.
   ============================================================ */

/* §desbordes: cualquier sección que lleve el watermark decorativo (.hero-watermark, que es
   position:absolute con right:-6% y font-size:42vw) TIENE que recortar, igual que .hero y
   .app-sec en servicheck.css. Sin esto el documento se ensancha exactamente ese 6%: medido,
   +23px a 390px y +82px a 1366px. */
.tf-sec-wm{overflow:hidden}

/* ---- HERO: misma base que el home, con el chat a la derecha ----
   §hero-una-pantalla-2026-09-12: pedido de Carlos — el hero completo (header incluido) tiene
   que entrar en 1366x768 sin scroll. Medido ANTES de tocar nada: el bloque del teléfono
   (columna derecha) llegaba a .bottom=1066px con un viewport de 768 — 298px de más. El
   padding de 190/84 es el que usa el resto del sitio (hero de home, etc.) por herencia de
   .hero; acá se pisa con un valor propio, mucho más chico, porque el nav es fixed (121px
   medidos: topbar 39 + nav-in 82) y esta página no necesita tanto aire arriba. */
.tf-hero{min-height:auto;padding:130px 0 12px}
.tf-hero .hero-in{grid-template-columns:1.05fr .95fr}
@media(max-width:980px){.tf-hero{padding:126px 0 40px}.tf-hero .hero-in{grid-template-columns:1fr}}
.tf-hero h1{font-size:clamp(28px,3.7vw,44px);margin-bottom:14px!important}
.tf-hero .hero-tag{margin-bottom:8px!important}
.tf-hero .sub{margin-bottom:14px!important}
.tf-hero .hero-actions{margin-bottom:16px!important}
.tf-hero .hero-stats .stat{min-width:118px;padding:6px 14px}

/* ---- MARCO DE TELÉFONO — §mockup-telefono-2026-09-12 ----
   Antes el "chat" era un simple rectángulo redondeado sin bezel: se leía como un cuadro
   suelto, no como un celular (reporte de Carlos). Ahora es un teléfono real: cuerpo oscuro
   con botones laterales (::before/::after, mismo recurso que .pdev en premium.css para las
   capturas de /transferencias más abajo — mismo lenguaje visual, no uno nuevo), notch arriba
   y una barra de estado (hora + señal/wifi/batería) ANTES del header de WhatsApp. Ancho
   proporcional a un celular real (~320px), no al ancho disponible de la columna. */
/* 460, no 400: el teléfono sigue capado a 320px por su propio ancho (abajo), pero los
   distintivos que van debajo necesitan más aire para entrar en una sola fila a 1366px. */
.tf-chat-stage{position:relative;max-width:460px;margin:0 auto;width:100%}
.tf-phone{width:min(320px,88%);margin:0 auto;background:linear-gradient(160deg,#1c1c22,#08080b);
  border-radius:46px;padding:8px;position:relative;
  box-shadow:0 50px 90px -34px rgba(0,0,0,.85),0 0 0 1.5px rgba(255,255,255,.06)}
.tf-phone::before{content:"";position:absolute;left:-3px;top:118px;width:3px;height:46px;border-radius:3px;background:#2c2c34}
.tf-phone::after{content:"";position:absolute;right:-3px;top:150px;width:3px;height:70px;border-radius:3px;background:#2c2c34}
.tf-phone-screen{position:relative;border-radius:36px;overflow:hidden;background:#0b141a}
.tf-phone-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%)}
.tf-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:74px;height:16px;
  border-radius:100px;background:#000;z-index:5}
/* §hero-una-pantalla-2026-09-12: status/head/input comprimidos — el teléfono medía 726px de
   alto (760 con badges) y a 1366x768 sobraba en 298px. La barra de estado bajó de 26px de
   padding-top a 18 (el notch mide 7+16=23px de borde inferior, 18 sigue dejando aire). */
.tf-status{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 3px;
  font-family:'Inter';font-weight:600;font-size:12.5px;color:#fff;position:relative;z-index:2}
.tf-status-ic{display:flex;align-items:center;gap:5px}
.tf-status-ic svg{width:16px;height:auto;display:block}
.tf-chat{position:relative}
.tf-chat-head{display:flex;align-items:center;gap:11px;padding:6px 12px 8px;background:#1f2c34}
.tf-chat-head .av{width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;padding:4px}
.tf-chat-head .av svg{width:100%;height:100%}
.tf-chat-head b{display:block;font-family:'Sora';font-size:14px;color:#fff;line-height:1.15}
.tf-chat-head small{display:block;font-size:11px;color:#8fb3a6;margin-top:2px}
.tf-chat-head .verified{width:15px;height:15px;color:#25d366;vertical-align:-2px;margin-left:4px}
.tf-chat-body{position:relative;padding:12px 10px 8px;display:flex;flex-direction:column;gap:6px;border-radius:0 0 24px 24px;
  background:#0b141a;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:18px 18px}
.tf-msg{max-width:84%;border-radius:12px;padding:7px 9px 6px;font-size:13.2px;line-height:1.4;color:#e9edef;position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.3);font-family:'Inter'}
/* Ocultas SOLO si hay JS (servicheck.js pone .js en <html> al parsear), igual que .reveal en
   servicheck.css: sin JS el chat se ve completo en vez de quedar vacío. */
.js .tf-msg{opacity:0;transform:translateY(12px) scale(.97);transition:.45s var(--ease)}
.js .tf-msg.on{opacity:1;transform:none}
.tf-msg.out{align-self:flex-end;background:#005c4b;border-top-right-radius:3px}
.tf-msg.in{align-self:flex-start;background:#1f2c34;border-top-left-radius:3px}
.tf-msg .meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:10px;color:rgba(233,237,239,.55);margin-top:3px}
.tf-msg .meta svg{width:14px;height:14px;color:#53bdeb}
/* §hero-una-pantalla-2026-09-12: el mensaje del comprobante pasó de imagen (490px de alto la
   foto real, recortada a 132px de miniatura) a chip compacto con ícono — mismo formato que el
   de la cédula. Ahorra ~80px de alto por mensaje, que es lo que hacía falta para que el hero
   entre en 768px de alto. La regla de recorte de imagen queda sin uso en esta página, pero no
   se borra: es la misma clase que usan las capturas reales de la sección "Tres formas" más
   abajo si algún día vuelven a mostrar una miniatura acá. */
.tf-msg picture{display:block;width:170px;max-width:100%;margin-bottom:6px}
.tf-msg picture img{display:block;width:100%;height:132px;object-fit:cover;object-position:top;border-radius:8px;background:#fff}
.tf-msg .doc{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border-radius:8px;padding:6px 10px;margin-bottom:4px;min-width:190px}
.tf-msg .doc svg{width:26px;height:26px;color:#8fd3b9;flex:none}
.tf-msg .doc b{display:block;font-size:12.5px;color:#fff}
.tf-msg .doc span{font-size:11px;color:rgba(233,237,239,.55)}
.tf-msg.ok{border:1px solid rgba(37,211,102,.35);background:linear-gradient(160deg,#1f2c34,#173a30)}
.tf-msg .code{display:block;margin:6px 0 4px;font-family:'Sora';font-weight:800;font-size:18px;letter-spacing:.12em;color:#7ef0bd;
  background:rgba(37,211,102,.1);border:1px dashed rgba(37,211,102,.45);border-radius:8px;padding:7px 10px;text-align:center}
/* §hero-una-pantalla-2026-09-12: FUERA del flujo (position:absolute), no adentro del flex de
   .tf-chat-body. Medido: cuando el indicador vivía en el flujo normal, aparecía/desaparecía
   durante la animación y el alto del teléfono oscilaba ~32px de más justo mientras se veía —
   suficiente para que el hero se pasara de 768px en el peor momento, aunque el estado final
   entrara bien. Superpuesto, nunca empuja el resto del chat. */
.tf-typing{position:absolute;left:10px;bottom:8px;align-items:center;background:#1f2c34;border-radius:12px;border-top-left-radius:3px;padding:8px 12px;display:none;gap:4px;z-index:3}
.tf-typing.on{display:flex}
.tf-typing i{width:6px;height:6px;border-radius:50%;background:#8fb3a6;animation:tfdot 1.1s infinite}
.tf-typing i:nth-child(2){animation-delay:.18s}.tf-typing i:nth-child(3){animation-delay:.36s}
@keyframes tfdot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
.tf-chat-input{display:flex;align-items:center;gap:8px;padding:8px 10px 4px}
.tf-chat-input span{flex:1;background:#2a3942;border-radius:100px;padding:9px 14px;font-size:12.5px;color:#8696a0}
.tf-chat-input i{width:38px;height:38px;border-radius:50%;background:#00a884;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.tf-chat-input i svg{width:18px;height:18px}
/* Pie del teléfono: qué es lo que se está mirando, en una línea. */
.tf-chat-stage .tf-cap{margin-top:4px}
/* Los dos distintivos: ANTES flotaban superpuestos al marco del teléfono (adentro tapaban la
   cabecera del chat y la barra de escribir — reporte de Carlos). Se sacan del todo del marco:
   van debajo, en flujo normal, como una fila que envuelve en móvil. Cero riesgo de
   superposición sea cual sea el ancho. */
.tf-hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.tf-chat-badge{display:flex;align-items:center;gap:10px;background:rgba(6,16,36,.94);border:1px solid rgba(52,217,162,.4);
  border-radius:12px;padding:7px 13px;color:#fff;font-family:'Sora';font-weight:700;font-size:12.5px;box-shadow:var(--shadow-d);
  white-space:nowrap}
.tf-chat-badge small{display:block;font-family:'Inter';font-weight:500;font-size:10.5px;color:var(--mist-dim)}
.tf-chat-badge .cb-ic{width:26px;height:26px;border-radius:50%;background:rgba(52,217,162,.15);color:var(--green-2);display:flex;align-items:center;justify-content:center;flex:none}
.tf-chat-badge .cb-ic svg{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.js .tf-msg{opacity:1;transform:none;transition:none}.tf-typing{display:none!important}}

/* ---- TRES VÍAS: WhatsApp / plataforma / QR ---- */
.tf-vias{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:10px}
@media(max-width:900px){.tf-vias{grid-template-columns:1fr}}
.tf-via{display:flex;flex-direction:column;background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:26px 26px 24px;position:relative;overflow:hidden;transition:.4s var(--ease)}
.tf-via::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0;transition:.4s}
.tf-via:hover{transform:translateY(-6px);border-color:rgba(38,136,255,.4);box-shadow:0 34px 70px -30px rgba(38,136,255,.5)}
.tf-via:hover::before{opacity:1}
.tf-via:first-child:hover{border-color:rgba(52,217,162,.45);box-shadow:0 34px 70px -30px rgba(52,217,162,.5)}
.tf-via:first-child::before{background:linear-gradient(90deg,transparent,var(--green-2),transparent)}
.tf-via-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.tf-via-h .ci{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--blue),#1a6fe0);box-shadow:0 14px 30px -12px rgba(38,136,255,.75)}
.tf-via-h .ci.g{background:linear-gradient(135deg,#22c55e,#0a9e6c);box-shadow:0 14px 30px -12px rgba(18,185,129,.7)}
.tf-via-h .ci svg{width:25px;height:25px}
.tf-via-h b{display:block;font-family:'Sora';font-weight:800;font-size:19px;color:#fff;line-height:1.2}
.tf-via-h span{display:block;font-size:12.5px;color:var(--mist-dim);margin-top:3px}
.tf-via p{font-size:14px;color:var(--mist);line-height:1.6;flex:1}
.tf-via p b{color:#fff}
.tf-via-cta{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:'Sora';font-weight:700;font-size:13.5px;color:var(--blue-2);align-self:flex-start}
.tf-via-cta.g{color:var(--green-2)}
.tf-via-cta svg{width:15px;height:15px;transition:.3s}
.tf-via:hover .tf-via-cta svg{transform:translateX(4px)}

/* ---- Pasos: la tarjeta de verificación a la derecha ---- */
.tf-verif{background:linear-gradient(160deg,var(--navy-2),var(--navy-deep));border:1px solid rgba(91,166,255,.22);border-radius:20px;padding:28px}
.tf-verif .big{font-family:'Sora';font-weight:800;font-size:54px;color:#fff;line-height:.9;letter-spacing:-.02em}
.tf-verif .big small{font-size:14px;color:var(--green-2);font-weight:700;letter-spacing:.12em;display:block;margin-top:8px}
.tf-verif p{color:var(--mist);font-size:14px;margin-top:14px}
.tf-verif ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.tf-verif li{display:flex;gap:10px;font-size:13.5px;color:var(--mist);line-height:1.45}
.tf-verif li b{color:#fff}
.tf-verif .vk{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(52,217,162,.15);color:var(--green-2);display:flex;align-items:center;justify-content:center;margin-top:1px}
.tf-verif .vk svg{width:12px;height:12px}

/* ---- Capturas reales: laptop + QR + celulares ---- */
.tf-shots{display:flex;flex-direction:column;align-items:center;gap:36px;margin:44px 0 10px}
.tf-ldev{max-width:900px}
.tf-ldev .scr{aspect-ratio:2000/1196;border-radius:22px}
.tf-trio{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:26px;max-width:900px;width:100%;align-items:end}
@media(max-width:760px){.tf-trio{grid-template-columns:1fr;max-width:300px}}
.tf-qr{width:100%;background:linear-gradient(158deg,#17171d,#050507);border-radius:26px;padding:9px;
  box-shadow:0 46px 84px -34px rgba(0,0,0,.85),0 0 0 1.5px rgba(255,255,255,.05)}
.tf-qr .scr{border-radius:19px;aspect-ratio:840/1024}
.tf-pdev .scr{aspect-ratio:720/1558}
.tf-shots .pdev{width:100%;max-width:230px;margin:0 auto}
.tf-shots .ph-caption{margin-top:16px;text-align:center}
.tf-shots .app-step{width:100%}
.tf-cap{margin-top:10px;text-align:center;font-size:13px;color:var(--mist-dim)}

/* ---- Riesgo: gráfico ---- */
.tf-risk{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 34px;box-shadow:var(--shadow);margin-bottom:30px}
.tf-risk h3{font-size:19px;margin-bottom:6px}
.tf-risk p{font-size:13.5px;color:var(--slate);margin-bottom:14px}
.tf-risk .spark{max-height:190px}

/* ---- Cinta de bancos ---- */
.tf-banks{position:relative;margin-top:34px}
.tf-banks .band{margin-bottom:26px}
/* El "›" del enlace se quedaba solo en una línea al envolver el párrafo. */
.tf-banks .band .bt a{white-space:nowrap}
.tf-mq{overflow:hidden;position:relative;padding:8px 0;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tf-mq-track{display:flex;gap:12px;width:max-content;animation:tfmq 46s linear infinite}
.tf-mq.rev .tf-mq-track{animation-direction:reverse;animation-duration:54s}
@keyframes tfmq{to{transform:translateX(-50%)}}
.tf-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:11px 18px 11px 12px;font-family:'Sora';font-weight:600;font-size:13.5px;color:#fff;white-space:nowrap}
.tf-pill i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#1a6fe0);display:flex;align-items:center;justify-content:center;flex:none;font-family:'Sora';font-weight:800;font-size:11px;color:#fff}
.tf-mq.rev .tf-pill i{background:linear-gradient(135deg,#22c55e,#0a9e6c)}
@media(prefers-reduced-motion:reduce){.tf-mq-track{animation:none}.tf-mq{mask-image:none;-webkit-mask-image:none}.tf-mq-track{flex-wrap:wrap;width:auto}}

/* ---- Garantía / código ---- */
/* align-items:start y no stretch: la tarjeta de la derecha es más corta que la del código y
   estirada dejaba un bloque blanco vacío de casi media pantalla (visto en la revisión). */
.tf-guar{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}
@media(max-width:820px){.tf-guar{grid-template-columns:1fr}}
.tf-guar .big72{padding:30px 28px}
.tf-guar .big72 picture{display:block;width:min(300px,100%);margin:18px auto 0}
.tf-guar .big72 img{width:100%;height:auto;border-radius:14px;box-shadow:0 26px 50px -24px rgba(0,0,0,.7);border:1px solid rgba(52,217,162,.25)}
.tf-guar .apply-card .apply-list li{font-size:14.5px}
.tf-note{margin-top:18px;font-size:12.5px;color:var(--slate);line-height:1.55}
.tf-note a{color:var(--blue);font-weight:700}