/* ==========================================================================
   Crediez — sitio público (crediez.com.ar)
   Sistema visual fintech: navy + degradé azul→cian (tomado del isotipo real)
   ========================================================================== */

:root{
  --cz-navy-950:#050a16;
  --cz-navy-900:#0a1226;
  --cz-navy-800:#0f1c36;
  --cz-navy-700:#152a4d;
  --cz-blue-700:#0f2fb8;
  --cz-blue-600:#1a45e0;
  --cz-blue-500:#2f66f2;
  --cz-cyan-400:#33d2f2;
  --cz-cyan-300:#7fe6ff;
  --cz-white:#ffffff;
  --cz-ink:#0d1526;
  --cz-slate-700:#334155;
  --cz-slate-600:#48546b;
  --cz-slate-400:#8592ab;
  --cz-slate-300:#c3cbdb;
  --cz-bg:#f5f7fb;
  --cz-card:#ffffff;
  --cz-border:#e5e9f2;
  --cz-success:#17b26a;
  --cz-warn:#f59e0b;
  --cz-whatsapp:#25d366;

  --cz-gradient: linear-gradient(135deg, var(--cz-cyan-400) 0%, var(--cz-blue-600) 55%, var(--cz-blue-700) 100%);
  --cz-gradient-text: linear-gradient(90deg, var(--cz-cyan-300), var(--cz-blue-500));
  /* [CTA-VIBRANT 2026-07-19] mismo azul del rayo del logo (Opción D), 2 stops
     nada más -- el --cz-gradient de arriba (cian+azul+navy, 3 stops) se ve
     "vidrioso"/años-2015 al lado del verde plano de WhatsApp; este es más
     confiado y además ancla el CTA principal a la misma paleta del isotipo. */
  --cz-gradient-cta: linear-gradient(135deg, #0040ff 0%, #0026b3 100%);
  --cz-radius-sm:10px;
  --cz-radius:16px;
  --cz-radius-lg:24px;
  --cz-shadow-sm: 0 2px 8px rgba(10,18,38,.06);
  --cz-shadow: 0 8px 30px rgba(10,18,38,.08);
  --cz-shadow-lg: 0 24px 60px rgba(10,18,38,.16);
  --cz-container: 1160px;
  --cz-font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.cz-body{
  margin:0; padding:0;
  font-family:var(--cz-font);
  background:var(--cz-bg);
  color:var(--cz-ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.cz-wrap{ max-width:var(--cz-container); margin:0 auto; padding:0 20px; }
section{ position:relative; }

/* ---------- Tipografía ---------- */
.cz-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cz-blue-600);
  background:rgba(26,69,224,.08);
  padding:6px 14px; border-radius:999px;
  margin-bottom:18px;
  text-wrap:balance;
}
html[data-cz-dark] .cz-eyebrow, .cz-section-dark .cz-eyebrow{
  color:var(--cz-cyan-300); background:rgba(127,230,255,.12);
}
/* [EYEBROW-MOBILE 2026-07-19] "Fintech argentina · Empleados públicos
   provinciales" parte en 2 líneas en mobile y con el tamaño de desktop se ve
   pesado -- lo compacta sin cambiar el texto (que aporta SEO/contexto). */
@media (max-width:520px){
  .cz-eyebrow{ font-size:11px; letter-spacing:.02em; padding:5px 12px; line-height:1.4; }
}
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; color:var(--cz-ink); }
h1{ font-size:clamp(32px,5vw,54px); line-height:1.06; }
h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.15; }
h3{ font-size:20px; line-height:1.3; }
p{ margin:0 0 1em; color:var(--cz-slate-700); }
.cz-lead{ font-size:19px; color:var(--cz-slate-600); }
.cz-section-dark h1,.cz-section-dark h2,.cz-section-dark h3,.cz-section-dark p{ color:#fff; }
.cz-section-dark p{ color:#b9c3da; }
.cz-center{ text-align:center; }
.cz-grad-text{
  background:var(--cz-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Botones ---------- */
.cz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--cz-font); font-weight:700; font-size:15.5px;
  padding:14px 26px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.cz-btn:active{ transform:translateY(1px); }
.cz-btn-primary{ background:var(--cz-gradient-cta); color:#fff; box-shadow:0 6px 16px rgba(0,64,255,.22); }
.cz-btn-primary:hover{ box-shadow:0 8px 20px rgba(0,64,255,.3); transform:translateY(-1px); }
.cz-btn-ghost{ background:#fff; color:var(--cz-blue-700); border-color:var(--cz-border); }
.cz-btn-ghost:hover{ border-color:var(--cz-blue-500); color:var(--cz-blue-600); }
.cz-section-dark .cz-btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18); }
.cz-btn-wa{ background:var(--cz-whatsapp); color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.3); }
.cz-btn-wa:hover{ box-shadow:0 14px 32px rgba(37,211,102,.42); transform:translateY(-1px); }
.cz-btn-sm{ padding:9px 16px; font-size:14px; border-radius:10px; }
.cz-btn-block{ width:100%; }

/* ---------- Header ---------- */
.cz-header{
  position:sticky; top:0; z-index:50;
  background:rgba(6,11,22,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cz-header-inner{ display:flex; align-items:center; gap:22px; padding:14px 20px; max-width:var(--cz-container); margin:0 auto; }
.cz-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
/* [LOGO-0WIDTH-FIX] el max-width:100% global (regla img{} de arriba) crea una
   dependencia circular cuando el <img> vive en un flex item (.cz-logo) que a
   su vez es flex item de otro flex container (.cz-header-inner): el navegador
   no puede resolver "100% de qué" antes de calcular el tamaño del propio
   flex item, y Chromium lo resuelve a 0 -- el logo quedaba invisible (ancho
   0) en el header, bug preexistente detectado al reemplazar el archivo.
   max-width:none en el logo puntual corta la circularidad (el ícono nunca
   necesita encogerse, tiene su propio height fijo). */
.cz-logo img{ height:28px; width:auto; max-width:none; }
.cz-nav{ display:flex; align-items:center; gap:6px; }
.cz-nav a{
  color:#cbd5e1; text-decoration:none; font-weight:600; font-size:14.5px;
  padding:9px 13px; border-radius:9px; transition:background .15s,color .15s;
}
.cz-nav a:hover, .cz-nav a.is-active{ background:rgba(255,255,255,.08); color:#fff; }
.cz-header-cta{ display:flex; align-items:center; gap:10px; margin-left:8px; }
/* [NAV-DECLUTTER 2026-07-19] el burger queda visible siempre (no solo
   <960px): en desktop abre el resto de las secciones (Blog/Prensa/FAQ/
   Nosotros) que ya no estan en .cz-nav para no saturar la barra superior. */
.cz-burger{ display:inline-flex; background:none; border:none; color:#fff; cursor:pointer; padding:6px; }
.cz-mobile-panel{ display:none; }
.cz-mobile-panel.is-open{
  display:flex; flex-direction:column; gap:2px; padding:10px 16px 18px;
  background:rgba(6,11,22,.98); border-top:1px solid rgba(255,255,255,.08);
}
.cz-mobile-panel a{ color:#e2e8f0; text-decoration:none; font-weight:600; padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.06); }
/* En desktop .cz-nav ya muestra los primarios -- no duplicarlos en el panel. */
@media (min-width:961px){
  .cz-mobile-panel a.cz-mp-primary{ display:none; }
}

@media (max-width:960px){
  .cz-nav{ display:none; }
  .cz-header-cta .cz-btn-ghost{ display:none; }
}

/* ---------- Hero ---------- */
.cz-hero{
  background:radial-gradient(1100px 560px at 82% -10%, rgba(51,210,242,.20), transparent 60%),
             linear-gradient(180deg, var(--cz-navy-950) 0%, var(--cz-navy-900) 60%, var(--cz-navy-800) 100%);
  color:#fff; padding:76px 0 96px; overflow:hidden;
}
.cz-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
@media (max-width:900px){ .cz-hero-grid{ grid-template-columns:1fr; } }
.cz-hero h1{ color:#fff; }
.cz-hero .cz-lead{ color:#b9c3da; max-width:540px; }
.cz-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
/* [TRUST-SIGNAL 2026-07-19] antes del primer scroll no había NADA que
   ancle "esto es real" -- dato real (no inventado, confirmado por Diego):
   Google, ~80 calificaciones, 4.9 estrellas de promedio. */
.cz-hero-rating{
  display:flex; align-items:center; gap:8px; margin-top:16px;
  font-size:13px; color:#93a0bd;
}
.cz-hero-rating-stars{ color:#facc15; font-size:13px; letter-spacing:1px; }
.cz-hero-rating strong{ color:#fff; font-weight:800; }
.cz-hero-trust{ display:flex; gap:26px; margin-top:40px; flex-wrap:wrap; }
.cz-hero-trust div{ font-size:13px; color:#93a0bd; }
.cz-hero-trust strong{ display:block; font-size:22px; color:#fff; font-weight:800; }

/* Ilustración hero (SVG inline) */
.cz-hero-art{ position:relative; }
.cz-hero-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:22px; backdrop-filter:blur(6px);
  box-shadow:var(--cz-shadow-lg);
}

/* ---------- Secciones ---------- */
.cz-section{ padding:88px 0; }
.cz-section-sm{ padding:56px 0; }
.cz-section-dark{ background:var(--cz-navy-900); }
.cz-section-alt{ background:#eef2fa; }
.cz-head{ max-width:660px; margin:0 auto 48px; text-align:center; }
.cz-head.cz-left{ text-align:left; margin:0 0 44px; }

/* ---------- Grids / Cards ---------- */
.cz-grid{ display:grid; gap:22px; }
.cz-grid-2{ grid-template-columns:repeat(2,1fr); }
.cz-grid-3{ grid-template-columns:repeat(3,1fr); }
.cz-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .cz-grid-3,.cz-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cz-grid-2,.cz-grid-3,.cz-grid-4{ grid-template-columns:1fr; } }

.cz-card{
  background:var(--cz-card); border:1px solid var(--cz-border); border-radius:var(--cz-radius);
  padding:28px; box-shadow:var(--cz-shadow-sm); transition:box-shadow .2s, transform .2s;
}
.cz-card:hover{ box-shadow:var(--cz-shadow); transform:translateY(-2px); }
.cz-icon-badge{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(51,210,242,.16), rgba(26,69,224,.16));
  color:var(--cz-blue-600); margin-bottom:16px;
}
.cz-section-dark .cz-card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
.cz-section-dark .cz-card h3, .cz-section-dark .cz-card p{ color:#fff; }
.cz-section-dark .cz-card p{ color:#a9b4cf; }

/* ---------- Pasos / timeline ---------- */
.cz-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:cz-step; }
@media (max-width:920px){ .cz-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cz-steps{ grid-template-columns:1fr; } }
.cz-step{ position:relative; padding:26px 22px; background:#fff; border:1px solid var(--cz-border); border-radius:var(--cz-radius); }
.cz-step-num{
  counter-increment:cz-step; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--cz-gradient); color:#fff; font-weight:800; margin-bottom:14px;
}
.cz-step-num::before{ content: counter(cz-step); }

/* ---------- Badges / pills ---------- */
.cz-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--cz-border); color:var(--cz-slate-700);
}
.cz-pill-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Prensa / logos strip ---------- */
.cz-press-strip{ display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap; padding:0 0 8px; }
.cz-press-strip span{
  font-weight:800; letter-spacing:.02em; color:var(--cz-slate-400); font-size:15px;
  filter:grayscale(1); opacity:.75; transition:opacity .2s, filter .2s;
}
.cz-press-strip span:hover{ filter:none; opacity:1; color:var(--cz-blue-600); }

/* ---------- FAQ acordeón ---------- */
.cz-faq-item{ border:1px solid var(--cz-border); border-radius:14px; background:#fff; margin-bottom:12px; overflow:hidden; }
.cz-faq-item summary{
  list-style:none; cursor:pointer; padding:18px 22px; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.cz-faq-item summary::-webkit-details-marker{ display:none; }
.cz-faq-item summary .cz-faq-ic{ flex:0 0 auto; transition:transform .2s; color:var(--cz-blue-600); }
.cz-faq-item[open] summary .cz-faq-ic{ transform:rotate(45deg); }
.cz-faq-item .cz-faq-a{ padding:0 22px 20px; color:var(--cz-slate-600); }

/* ---------- Testimonios ---------- */
.cz-quote{ font-size:19px; font-weight:600; color:var(--cz-ink); line-height:1.5; }
.cz-quote-who{ margin-top:14px; font-size:14px; color:var(--cz-slate-400); font-weight:600; }

/* ---------- CTA banda final ---------- */
.cz-cta-band{
  background:var(--cz-gradient); border-radius:28px; padding:56px; color:#fff; text-align:center;
  box-shadow:var(--cz-shadow-lg);
}
.cz-cta-band h2{ color:#fff; }
.cz-cta-band p{ color:rgba(255,255,255,.9); max-width:520px; margin:0 auto 26px; }
.cz-cta-band .cz-btn-ghost{ background:#fff; color:var(--cz-blue-700); border-color:transparent; }

/* ---------- Footer ---------- */
.cz-footer{ background:var(--cz-navy-950); color:#8a96b3; padding:64px 0 28px; }
.cz-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08); }
@media (max-width:800px){ .cz-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cz-footer-grid{ grid-template-columns:1fr; } }
.cz-footer h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.cz-footer a{ display:block; color:#8a96b3; text-decoration:none; font-size:14.5px; margin-bottom:10px; }
.cz-footer a:hover{ color:#fff; }
.cz-footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:13px; }
.cz-footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.cz-footer-logo img{ height:26px; }
.cz-footer-social{ display:flex; gap:10px; }
.cz-footer-social a{
  width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; margin:0;
}
.cz-footer-social a:hover{ background:rgba(255,255,255,.14); }

/* ---------- Utilidades ---------- */
.cz-mt-0{ margin-top:0; } .cz-mb-0{ margin-bottom:0; }
.cz-muted{ color:var(--cz-slate-400); }
.cz-tag-new{ background:rgba(23,178,106,.12); color:var(--cz-success); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; }

/* ---------- Blog ---------- */
.cz-blog-card{ display:block; text-decoration:none; }
.cz-blog-thumb{
  border-radius:16px; aspect-ratio:16/9; overflow:hidden; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
}
.cz-blog-meta{ font-size:13px; color:var(--cz-slate-400); font-weight:600; margin-bottom:8px; }
.cz-blog-card h3{ color:var(--cz-ink); }
.cz-blog-card:hover h3{ color:var(--cz-blue-600); }
article.cz-post{ max-width:760px; margin:0 auto; }
article.cz-post h2{ margin-top:1.4em; }
article.cz-post p{ font-size:17px; }
article.cz-post ul{ color:var(--cz-slate-700); font-size:17px; padding-left:1.2em; }
article.cz-post li{ margin-bottom:.5em; }

/* ---------- Blog: callouts + figuras ---------- */
.cz-callout{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(26,69,224,.06); border:1px solid rgba(26,69,224,.16);
  border-radius:var(--cz-radius-sm); padding:18px 20px; margin:28px 0;
}
.cz-callout-icon{ flex:0 0 auto; color:var(--cz-blue-600); margin-top:2px; }
.cz-callout p{ margin:0; font-size:15.5px; color:var(--cz-slate-700); }
.cz-callout strong{ color:var(--cz-ink); }
.cz-callout-warn{ background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.24); }
.cz-callout-warn .cz-callout-icon{ color:var(--cz-warn); }
.cz-figure{
  margin:30px 0; padding:22px; background:#fff; border:1px solid var(--cz-border);
  border-radius:var(--cz-radius); box-shadow:var(--cz-shadow-sm);
}
.cz-figure-cap{ text-align:center; font-size:13px; color:var(--cz-slate-400); margin-top:12px; }
.cz-tldr{
  background:var(--cz-navy-900); color:#fff; border-radius:var(--cz-radius);
  padding:22px 24px; margin:0 0 32px;
}
.cz-tldr h3{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.cz-tldr ul{ margin:0; padding-left:1.2em; color:#cbd5e1; font-size:15px; }
.cz-tldr li{ margin-bottom:6px; }

/* ---------- Landing lateral (imagen + texto) ---------- */
.cz-split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
@media (max-width:900px){ .cz-split{ grid-template-columns:1fr; } }
.cz-split.reverse .cz-split-art{ order:2; }
@media (max-width:900px){ .cz-split.reverse .cz-split-art{ order:0; } }

/* ---------- Tabla comparativa / requisitos ---------- */
.cz-checklist{ display:grid; gap:12px; }
.cz-checklist li{ display:flex; gap:12px; align-items:flex-start; list-style:none; color:var(--cz-slate-700); font-size:15.5px; }
.cz-checklist li svg{ flex:0 0 auto; margin-top:2px; color:var(--cz-success); }

/* ---------- Prensa: kit de descarga ---------- */
.cz-media-kit{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--cz-border); border-radius:var(--cz-radius); padding:28px 30px;
}

/* ---------- Skip link accesibilidad ---------- */
.cz-skip{ position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:10px 16px; z-index:100; }

/* ---------- Chat FAB (botón flotante, todo el sitio) ----------
   [RAYO-FAB 2026-07-19] pasa del --cz-gradient chato (azul/cian sin cian
   real) + ícono "currentColor" al mismo tratamiento del isotipo aprobado:
   tile navy radial (igual que favicon.svg) + el rayo con el gradiente
   vibrante D (#czBoltGrad, ver base.html) y un halo sutil vía drop-shadow
   -- consistente con el logo del header en vez de quedar con la paleta
   vieja como si fuera otra marca. */
.cz-chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:62;
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  touch-action:manipulation;
  background:radial-gradient(120% 120% at 30% 20%, #1c3868 0%, #0f2144 46%, #0a1020 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(0,64,255,.35);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:cz-chat-pulse 2.6s ease-in-out infinite;
}
.cz-chat-fab svg{ filter:drop-shadow(0 0 3px rgba(0,229,255,.45)); }
.cz-chat-fab:hover{ transform:scale(1.07); box-shadow:0 14px 34px rgba(0,64,255,.45); }
.cz-chatw[data-open="1"] .cz-chat-fab{ animation:none; }
@keyframes cz-chat-pulse{
  0%,100%{ box-shadow:0 10px 28px rgba(0,64,255,.35), 0 0 0 0 rgba(0,229,255,.35); }
  50%{ box-shadow:0 10px 28px rgba(0,64,255,.35), 0 0 0 10px rgba(0,229,255,0); }
}
@media (prefers-reduced-motion: reduce){ .cz-chat-fab{ animation:none; } }
@media (max-width:520px){ .cz-chat-fab{ right:16px; bottom:16px; width:54px; height:54px; } }

/* ---------- Chat widget: burbuja peek + panel flotante ---------- */
.cz-chatw-av{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%, #1c3868 0%, #0f2144 46%, #0a1020 100%);
  display:flex; align-items:center; justify-content:center;
}
.cz-chatw-av svg{ filter:drop-shadow(0 0 2px rgba(0,229,255,.4)); }

/* -- Peek: burbuja que emerge sola, con input propio -- */
.cz-chatw-peek{
  position:fixed; right:22px; bottom:94px; z-index:61;
  width:296px; max-width:calc(100vw - 44px);
  touch-action:manipulation;
  background:#fff; border:1px solid var(--cz-border); border-radius:18px 18px 4px 18px;
  box-shadow:var(--cz-shadow-lg); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.94);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.cz-chatw-peek.is-visible{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  transition:opacity .3s ease, transform .3s ease, visibility 0s;
}
.cz-chatw-peek-x{
  position:absolute; top:9px; right:9px; width:22px; height:22px; border-radius:50%;
  background:var(--cz-bg); color:var(--cz-slate-600); border:0;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; z-index:2;
}
.cz-chatw-peek-msg{ display:flex; gap:10px; align-items:flex-start; padding:16px 30px 14px 16px; cursor:pointer; }
.cz-chatw-peek-text{ font-size:13.5px; line-height:1.45; color:var(--cz-slate-600); }
.cz-chatw-peek-text strong{ display:block; font-size:13px; color:var(--cz-ink); margin-bottom:2px; }
.cz-chatw-peek-form{
  display:flex; align-items:center; gap:8px; padding:0 10px 10px;
}
.cz-chatw-peek-form input{
  flex:1 1 auto; min-width:0; border:1px solid var(--cz-border); background:var(--cz-bg);
  border-radius:999px; padding:9px 14px; font-size:13.5px; font-family:var(--cz-font); color:var(--cz-ink);
}
.cz-chatw-peek-form input:focus{ outline:2px solid var(--cz-blue-500); outline-offset:1px; background:#fff; }
.cz-chatw-peek-form button{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--cz-gradient); color:#04263f; display:flex; align-items:center; justify-content:center;
}

/* -- Panel: gate conversacional + hilo en vivo -- */
.cz-chatw-panel{
  position:fixed; right:22px; bottom:94px; z-index:61;
  width:352px; max-width:calc(100vw - 32px);
  touch-action:manipulation;
  /* 100vh no se entera cuando el teclado táctil achica el viewport visual
     (el panel queda "flotando" fuera de pantalla o tapado); 100dvh sí -- se
     deja el cálculo con vh primero como fallback para navegadores viejos. */
  height:min(500px, calc(100vh - 150px));
  height:min(500px, calc(100dvh - 150px));
  min-height:360px;
  background:var(--cz-card); border-radius:20px; box-shadow:var(--cz-shadow-lg);
  overflow:hidden; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.96);
  transition:opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.cz-chatw[data-open="1"] .cz-chatw-panel{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  transition:opacity .24s ease, transform .24s ease, visibility 0s;
}
.cz-chatw-head{
  flex:0 0 auto; background:linear-gradient(135deg, var(--cz-navy-900) 0%, var(--cz-navy-800) 100%);
  padding:14px 14px 14px 16px; display:flex; align-items:center; gap:11px; color:#fff;
}
.cz-chatw-who{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.cz-chatw-who strong{ font-size:14px; font-weight:750; }
.cz-chatw-who span{ font-size:11.5px; color:#7fe6ff; }
.cz-chatw-who span::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#3ee08a; margin-right:5px; vertical-align:1px; }
.cz-chatw-close{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center;
}
.cz-chatw-close:hover{ background:rgba(255,255,255,.18); }
.cz-chatw-body{
  flex:1 1 auto; overflow-y:auto; background:var(--cz-bg); padding:16px 14px;
  display:flex; flex-direction:column; gap:9px;
}
/* El intercambio de verificación (DNI/celular/código) y el hilo real del
   servidor viven en contenedores separados: el segundo se reconstruye
   entero en cada fetch, y si compartieran uno solo esa reconstrucción
   borraría también el intercambio de verificación ya mostrado. */
#czChatWGateLog, #czChatWThreadLog{ display:flex; flex-direction:column; gap:9px; }
#czChatWGateLog:empty, #czChatWThreadLog:empty{ display:none; }
.cz-chatw-body .bubble{
  max-width:82%; padding:9px 12px; border-radius:15px; font-size:13.5px; line-height:1.45;
  white-space:pre-wrap; word-break:break-word;
}
.cz-chatw-body .bubble.in{
  align-self:flex-end; background:linear-gradient(135deg,var(--cz-blue-500),var(--cz-blue-700));
  color:#fff; border-bottom-right-radius:4px;
}
.cz-chatw-body .bubble.out{
  align-self:flex-start; background:#fff; color:var(--cz-ink); border:1px solid var(--cz-border);
  border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(10,18,38,.04);
}
.cz-chatw-body .bubble.sys{
  align-self:center; background:#fef2f2; color:#b42318; border:1px solid #fecaca;
  font-size:12.5px; text-align:center; max-width:92%;
}
.cz-chatw-body .bubble.sys a{ color:#b42318; font-weight:700; }
/* [PRIVACY-NOTICE 2026-07-19] variante neutra del sys bubble -- la roja de
   arriba es para errores; un aviso de privacidad no es un error, no debe
   asustar. */
.cz-chatw-body .bubble.sys.info{
  background:var(--cz-bg); color:var(--cz-slate-600); border-color:var(--cz-border);
}
.cz-chatw-body .bubble.sys.info a{ color:var(--cz-blue-600); font-weight:700; }
/* Menú interactivo (botones/lista de WATI) parseado del texto plano -- a
   diferencia del panel de operadores (que solo muestra un historial), acá
   son botones tocables de verdad: tocar uno manda ESE texto, igual que
   tocar el botón real en WhatsApp. */
.cz-chatw-menu{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.cz-chatw-menu-btn{
  border:1px solid var(--cz-blue-500); border-radius:10px; background:#fff;
  color:var(--cz-blue-600); font-family:var(--cz-font); font-size:13px; font-weight:650;
  padding:9px 12px; text-align:left; cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.cz-chatw-menu-btn:active{ background:var(--cz-bg); }
.cz-chatw-menu-btn:disabled{ opacity:.55; cursor:default; }
.cz-chatw-composer{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:11px 12px;
  background:#fff; border-top:1px solid var(--cz-border);
}
.cz-chatw-composer input{
  flex:1 1 auto; min-width:0; border:1px solid var(--cz-border); border-radius:999px;
  padding:10px 15px; font-family:var(--cz-font); color:var(--cz-ink);
  /* 16px es el mínimo que Safari en iPhone respeta sin hacer zoom automático
     al enfocar el input (bug real, ya visto con el numérico) -- ahora que
     el chat libre vuelve a usar el teclado nativo, este campo es editable
     de verdad de nuevo y queda expuesto al mismo riesgo. */
  font-size:16px;
}
.cz-chatw-composer input:focus{ outline:2px solid var(--cz-blue-500); outline-offset:1px; }
.cz-chatw-composer input:disabled{ background:var(--cz-bg); color:var(--cz-slate-400); }
/* Con el teclado propio activo el input pasa a ser solo una VITRINA de lo
   tipeado (se llena con los botones) -- pero por más que sea readonly,
   tocarlo igual puede enfocarlo, y Safari en iPhone hace zoom automático
   al enfocar cualquier input con letra menor a 16px (bug real, reportado:
   "se salió desfasando al dar clic dentro del input"). Bloqueando el toque
   directamente el campo nunca se enfoca -- la única interacción posible
   es con la grilla de botones de abajo. */
.cz-chatw-composer input[readonly]{ pointer-events:none; background:var(--cz-bg); }
.cz-chatw-composer button{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--cz-blue-600); color:#fff; display:flex; align-items:center; justify-content:center;
}
.cz-chatw-composer button:disabled{ opacity:.5; cursor:default; }
/* Adjuntar (imagen/PDF): mismo tamaño que enviar pero más discreto -- es
   una acción secundaria, no queremos que compita visualmente con enviar. */
.cz-chatw-attach{
  background:transparent !important; color:var(--cz-blue-600) !important;
  border:1px solid var(--cz-border) !important;
}
.cz-chatw-attach:active{ background:var(--cz-bg) !important; }

/* Media (imagen/PDF) dentro de una burbuja -- el bot puede mandar el estado
   de cuenta como PDF, o el cliente adjuntar una foto/comprobante. */
.cz-chatw-media-img{
  display:block; max-width:100%; margin-top:8px; border-radius:10px;
  border:1px solid var(--cz-border);
}
.cz-chatw-media-file{
  display:flex; align-items:center; gap:6px; margin-top:8px; padding:9px 12px;
  border:1px solid var(--cz-border); border-radius:10px; background:var(--cz-bg);
  color:var(--cz-blue-600); font-family:var(--cz-font); font-size:13px; font-weight:650;
  text-decoration:none;
}

/* Teclado numérico propio para DNI/celular/código -- reemplaza al teclado
   táctil del sistema en esos pasos, así el navegador nunca lo abre y se
   termina de raíz el lío de layouts distintos en cada navegador. */
.cz-chatw-keypad{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--cz-border); border-top:1px solid var(--cz-border);
}
/* El atributo HTML "hidden" pierde contra display:grid de arriba (misma
   especificidad, la regla de clase se aplica después que la del user-agent)
   -- sin esto el teclado quedaba SIEMPRE visible pese a keypad.hidden=true,
   incluso ya en charla libre (bug real, reportado con captura). */
.cz-chatw-keypad[hidden]{ display:none; }
.cz-chatw-keypad button{
  border:0; background:#fff; padding:14px 0; font-size:19px; font-weight:650;
  color:var(--cz-ink); cursor:pointer; font-family:var(--cz-font);
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; user-select:none;
  /* Sin esto, tocar varios números seguido rápido (uso normal de un teclado)
     puede leerse como "doble tap para hacer zoom" y el navegador zoomea la
     página entera -- reportado en Chrome/Safari iOS: "arranca bien y se
     muere". touch-action:manipulation le dice al navegador que este botón
     es de un solo tap, nunca de zoom. */
  touch-action:manipulation;
}
.cz-chatw-keypad button:active{ background:var(--cz-bg); }
.cz-chatw-keypad-back{ color:var(--cz-slate-600); }
.cz-chatw-keypad-ok{ background:var(--cz-gradient) !important; color:#04263f; }
.cz-chatw-keypad-ok:active{ filter:brightness(.96); }

@media (prefers-reduced-motion: reduce){ .cz-chatw-peek, .cz-chatw-panel{ transition:opacity .01s linear; transform:none; } }
@media (max-width:520px){
  .cz-chatw-peek{ right:16px; bottom:82px; }
  .cz-chatw-panel{ right:12px; bottom:82px; width:calc(100vw - 24px); }
  /* En mobile el panel ABIERTO pasa a ocupar toda la pantalla en vez de ser
     una tarjeta flotante -- con bottom:Xpx + alto fijo, el teclado táctil
     (que no achica el viewport de layout, solo el visual) dejaba el header
     tapado arriba de lo visible (bug real, reportado con captura). Anclado
     por arriba (top:0) + 100dvh, el alto se ajusta solo cuando aparece el
     teclado sin mover el header ni necesitar JS persiguiendo el viewport. */
  .cz-chatw[data-open="1"] .cz-chatw-panel{
    top:0; right:0; bottom:0; left:0;
    width:100%; max-width:100%;
    height:100vh;
    height:100dvh;
    min-height:0;
    border-radius:0;
  }
  /* El panel a pantalla completa queda debajo del FAB (mismo rincón) -- sin
     esto el botón "Enviar" quedaba tapado por el FAB e interceptaba los
     clics. El cierre queda a cargo de la X del header. */
  .cz-chatw[data-open="1"] .cz-chat-fab{ display:none; }
}

.cz-skip:focus{ left:10px; top:10px; }