/* Página publicitaria de FirmaSimple en hiox.com.ar/fes/ (la herramienta vive en
   daslatam.org/firmasimple/). Colores de DAS LATAM; todo cuelga de .fl-* para no
   pisar la barra, el pie y los anuncios de hiox, que se inyectan al desplegar. */
.fl { margin: 0; background: #fff; color: #334155; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.fl *, .fl *::before, .fl *::after { box-sizing: border-box; }
.fl-ancho { max-width: 68rem; margin: 0 auto; padding: 0 18px; }
.fl h1, .fl h2, .fl h3 { color: #0f172a; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .6em; }
.fl h1 { font-size: clamp(28px, 4.6vw, 44px); }
.fl h2 { font-size: clamp(22px, 2.6vw, 28px); }
.fl h3 { font-size: 18px; }
.fl p, .fl li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.fl a { color: #3e4aed; }
.fl-chico { font-size: 14px; color: #64748b; }

.fl-hero { background: linear-gradient(180deg, #eef0ff, #fff); border-bottom: 1px solid #e2e8f0; padding: 40px 0 36px; position: relative; }
.fl-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #5900d1, #3e4aed 55%, #008cea); }
.fl-hero-in { display: grid; gap: 30px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.fl-sello { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.fl-sello span { font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 99px; background: #fff; border: 1px solid #c7cdfb; color: #2f37c4; }
.fl-bajada { font-size: 18.5px; color: #475569; margin: 0 0 18px; }
.fl-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.fl-centro { justify-content: center; }
.fl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 20px; border-radius: 10px;
  background: #3e4aed; color: #fff !important; font-weight: 600; text-decoration: none; border: 1px solid #3e4aed; }
.fl-btn:hover { background: #2f37c4; }
.fl-btn-2 { background: #fff; color: #0f172a !important; border-color: #cbd5e1; }
.fl-btn-2:hover { background: #f1f5f9; }
.fl-btn-claro { background: #fff; color: #2f37c4 !important; border-color: #fff; }
.fl-btn-claro:hover { background: #eef0ff; }
.fl-btn-borde { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.7); }
.fl-btn-borde:hover { background: rgba(255,255,255,.12); }

.fl-muestra { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08); }
.fl-muestra-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; align-items: center; }
.fl-muestra-top span { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: #fef3c7; color: #92400e; }
.fl-hoja { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; }
.fl-hoja i { display: block; height: 8px; background: #e2e8f0; border-radius: 4px; margin: 8px 0; }
.fl-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.fl-firmas small { color: #64748b; font-size: 12.5px; }
.fl-firma { font: italic 600 22px/1 "Brush Script MT", "Segoe Script", cursive; color: #1e3a8a; padding: 10px 0 4px; border-bottom: 1px solid #94a3b8; }
.fl-tenue { color: #94a3b8; }
.fl-muestra .fl-chico { margin: 10px 0 0; }

.fl-bloque { padding: 34px 18px 0; }
.fl-texto { max-width: 52rem; font-size: 17px; }
.fl-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fl-pasos li { counter-increment: paso; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; text-align: left; }
.fl-pasos li::before { content: counter(paso); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef0ff; color: #2f37c4; font-weight: 700; margin-bottom: 8px; }
.fl-pasos b { display: block; color: #0f172a; margin-bottom: 4px; }
.fl-dos { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.fl-caja { background: #f6f7fb; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; }
.fl-caja ul { margin: 0; padding-left: 20px; }
.fl-caja li { margin: 6px 0; }

.fl-cta { margin-top: 40px; padding: 40px 0 44px; background: linear-gradient(120deg, #5900d1, #3e4aed 55%, #008cea); color: #fff; text-align: center; }
.fl-cta h2 { color: #fff; }
.fl-cta p { text-align: center; max-width: 44rem; margin-left: auto; margin-right: auto; }
.fl-cta .fl-chico { color: rgba(255,255,255,.85); margin-top: 14px; }
.fl-cta a:not(.fl-btn) { color: #fff; }

@media (max-width: 760px) {
  .fl-hero { padding: 28px 0 26px; }
  .fl-hero-in { grid-template-columns: 1fr; }
  .fl-bajada { font-size: 17px; }
}