/* ═══════════════════════════════════════════════════════════════════
   FYLE 360 · Landing pública (/fyle360)
   Misma familia que /hygiene360: navy de Certum, Montserrat, franjas del
   isotipo. No se carga en el bundle del sitio: la página es propia.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Montserrat'; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url('/certum_revision/static/lib/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat'; font-style: normal; font-weight: 300 900; font-display: swap;
    src: url('/certum_revision/static/lib/fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.fl {
    --bg: #121F33; --bg-2: #15243B; --surface: #182B48; --surface-2: #1D3456;
    --line: #2A4468; --line-2: #213859;
    --ink: #F4F8FC; --ink-2: #C9D7E8; --muted: #93A6BF;
    --azul: #3373B9; --azul-dk: #145597; --celeste: #8DB8E5; --celeste-2: #C9DDF0;
    --ok: #34d399; --warn: #fbbf24; --wa: #25D366; --wa-dk: #1DA851;
    --ease: cubic-bezier(.22, 1, .36, 1);
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.fl *, .fl *::before, .fl *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.fl a { color: var(--celeste); text-decoration: none; }
.fl a:hover { color: var(--ink); }
.fl :focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 6px; }
.fl :where(h1, h2, h3, p) { margin: 0; }
.fl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.fl-ico { width: 18px; height: 18px; flex: none; }

/* ── botones ─────────────────────────────────────────────────────── */
.fl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
    font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background .2s, border-color .2s, transform .15s;
}
.fl-btn:active { transform: scale(.97); }
.fl-btn-lg { padding: 14px 22px; font-size: .95rem; }
.fl .fl-btn-pri { background: var(--azul); color: #fff; }
.fl .fl-btn-pri:hover { background: var(--azul-dk); color: #fff; }
.fl .fl-btn-sec { background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--ink); }
.fl .fl-btn-sec:hover { background: rgba(255, 255, 255, .12); color: var(--ink); }
.fl .fl-btn-wa { background: var(--wa); color: #06351b; }
.fl .fl-btn-wa:hover { background: var(--wa-dk); color: #fff; }

/* ── navegación ─────────────────────────────────────────────────── */
.fl-nav {
    position: fixed; inset: 0 0 auto; z-index: 50;
    border-bottom: 1px solid transparent;
    transition: background .3s, border-color .3s;
}
.fl-nav.is-scrolled { background: rgba(18, 31, 51, .9); backdrop-filter: blur(12px); border-color: var(--line-2); }
.fl-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.fl .fl-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.fl-brand img { display: block; background: #fff; border-radius: 50%; padding: 2px; }
.fl-brand-name { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1; letter-spacing: .02em; }
.fl-brand-name b { color: var(--celeste); }
.fl-brand-sub { display: block; font-size: .7rem; color: var(--muted); margin-top: 4px; }
.fl-links { display: flex; gap: 26px; font-size: .86rem; font-weight: 600; }
.fl .fl-links a { color: var(--ink-2); }
.fl .fl-links a:hover { color: var(--ink); }
.fl-nav-cta { display: flex; gap: 8px; }

/* ── héroe ──────────────────────────────────────────────────────── */
.fl-hero {
    position: relative; overflow: hidden;
    min-height: min(100vh, 880px); display: flex; align-items: center;
    padding: 120px 0 80px;
    background: radial-gradient(70% 60% at 78% 40%, rgba(51, 115, 185, .28), transparent 70%),
                linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.fl-franjas {
    position: absolute; right: -18%; top: -10%; width: 78%; height: 120%;
    color: #fff; opacity: .05; pointer-events: none;
}
.fl-franjas polygon { opacity: 0; transform: translateX(-120px); animation: flFranja 1.1s var(--ease) forwards;
    animation-delay: calc(var(--i) * 90ms); }
@keyframes flFranja { to { opacity: 1; transform: none; } }
.fl-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; width: 100%; }
.fl-h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; }
.fl-h1 span { display: block; }
.fl-h1-2 { color: var(--celeste); }
.fl-lead { margin-top: 24px; max-width: 46ch; font-size: 1.08rem; color: var(--ink-2); line-height: 1.65; }
.fl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.fl-cta-note { margin-top: 18px; font-size: .86rem; color: var(--muted); }
.fl-cta-note a { font-weight: 700; }
.fl-in { opacity: 0; transform: translateY(20px); animation: flEntra .9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes flEntra { to { opacity: 1; transform: none; } }

/* El ciclo: anillo del logo + cuatro pasos + el documento que los recorre. */
.fl-ciclo { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin-left: auto; }
.fl-ciclo-anillo { position: absolute; inset: 8%; width: 84%; height: 84%; }
.fl-ciclo-anillo circle { opacity: .35; transition: opacity .5s, stroke-width .5s; }
.fl-ciclo-anillo circle.is-on { opacity: 1; stroke-width: 12; }
.fl-nodo {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 8px 12px; min-width: 112px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    font-size: .74rem; color: var(--muted);
    transition: border-color .4s, background .4s, color .4s;
}
.fl-nodo b { font-size: .9rem; color: var(--ink); }
.fl-nodo.is-on { border-color: var(--celeste); background: var(--surface-2); color: var(--ink-2); }
.fl-doc {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 58%; padding: 18px 18px 16px;
    display: flex; flex-direction: column; gap: 4px;
    background: #fff; color: #121F33; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.fl-doc-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
    background: #E1EBF6; color: var(--azul-dk); margin-bottom: 6px; }
.fl-doc-ico svg { width: 22px; height: 22px; }
.fl-doc strong { font-size: .95rem; line-height: 1.3; }
.fl-doc-meta { font-size: .78rem; color: #7D8183; }
.fl-doc-estado {
    align-self: flex-start; margin-top: 10px; padding: 4px 12px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; background: #E1EBF6; color: #145597;
    transition: background .4s, color .4s;
}
.fl-doc-estado[data-estado="corrige"] { background: #fef3c7; color: #b45309; }
.fl-doc-estado[data-estado="aprueba"] { background: #d1fae5; color: #047857; }

/* ── secciones ──────────────────────────────────────────────────── */
.fl-sec { padding: 96px 0; position: relative; }
.fl-sec-alt { background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.fl-head { max-width: 640px; margin-bottom: 44px; }
.fl-h2 { font-size: clamp(1.8rem, 3.3vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.fl-sub { margin-top: 12px; color: var(--muted); font-size: 1rem; max-width: 56ch; }
.fl h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); }

/* ── 1. Carriles: el documento viaja entre proveedor y cliente ─────── */
.fl-carril {
    position: relative; height: 340px; padding: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    overflow: hidden;
}
.fl-carril-fila {
    position: absolute; left: 0; right: 0; height: 50%;
    display: flex; align-items: center; padding-left: 18px;
}
.fl-carril-fila:first-child { top: 0; border-bottom: 1px dashed var(--line); }
.fl-carril-fila + .fl-carril-fila { top: 50%; background: rgba(255, 255, 255, .02); }
.fl-carril-fila span {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: .74rem; font-weight: 700; color: var(--muted); letter-spacing: .04em;
}
.fl-carril-ruta { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fl-carril-ruta path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fl-ruta-fondo { stroke: var(--line); stroke-dasharray: 6 8; }
.fl-ruta-viva { stroke: var(--celeste); stroke-dasharray: 0 100; transition: stroke-dasharray 1s var(--ease); }
.fl-hito {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 700; color: var(--muted);
    transition: color .4s;
}
.fl-hito i {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bg-2); border: 2px solid var(--line);
    transition: background .4s, border-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.fl-hito svg, .fl-iconos svg, .fl-ficha svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.fl-hito.is-hecho { color: var(--ink-2); }
.fl-hito.is-hecho i { border-color: var(--azul); color: var(--celeste); }
.fl-hito.is-on { color: var(--ink); }
.fl-hito.is-on i {
    background: var(--azul); border-color: var(--celeste); color: #fff; transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(141, 184, 229, .14);
}
.fl-hito[data-hito="2"].is-on i { background: #b45309; border-color: var(--warn); box-shadow: 0 0 0 8px rgba(251, 191, 36, .14); }
.fl-hito[data-hito="3"].is-on i { background: #047857; border-color: var(--ok); box-shadow: 0 0 0 8px rgba(52, 211, 153, .14); }
.fl-ficha {
    position: absolute; left: var(--x, 14%); top: var(--y, 28%);
    width: 34px; height: 42px; margin: -64px 0 0 -17px;
    display: grid; place-items: center; border-radius: 6px;
    background: #fff; color: var(--azul-dk);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    transition: left 1s var(--ease), top 1s var(--ease);
}
.fl-ficha svg { width: 20px; height: 20px; }
.fl-carril-nota {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--line);
    font-size: .88rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 2. Panel en vivo con cambio de rol ──────────────────────────── */
.fl-dos { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.fl-dos-inv { grid-template-columns: 1.1fr .9fr; }
.fl-rol {
    display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.fl-rol button {
    padding: 9px 18px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: var(--ink-2); font: inherit; font-weight: 700; font-size: .88rem;
    transition: background .2s, color .2s;
}
.fl-rol button.is-on { background: var(--azul); color: #fff; }
.fl-puntos { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fl-puntos li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-2); }
.fl-punto-ico { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.fl-punto-ico[data-tono="warn"] { background: var(--warn); box-shadow: 0 0 0 5px rgba(251, 191, 36, .15); }
.fl-punto-ico[data-tono="azul"] { background: var(--celeste); box-shadow: 0 0 0 5px rgba(141, 184, 229, .15); }
.fl-punto-ico[data-tono="ok"] { background: var(--ok); box-shadow: 0 0 0 5px rgba(52, 211, 153, .15); }

.fl-app {
    background: #F2F5F9; color: #121F33; border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .4); border: 1px solid #2A4468;
}
.fl-app-barra {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: #fff; border-bottom: 1px solid #DEE5ED; font-size: .74rem; color: #7D8183;
}
.fl-app-barra i { width: 10px; height: 10px; border-radius: 50%; background: #DEE5ED; }
.fl-app-barra span { margin-left: 10px; }
.fl-app-cuerpo { display: flex; min-height: 300px; }
.fl-app-menu {
    flex: 0 0 64px; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px;
    background: linear-gradient(180deg, #121F33, #182B48);
}
.fl-app-menu b { height: 26px; border-radius: 50%; background: #fff; width: 26px; margin-bottom: 8px; }
.fl-app-menu span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.fl-app-menu span.is-on { background: #8DB8E5; }
.fl-app-main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fl-app-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: #fff; border: 1px solid #DEE5ED; border-radius: 12px;
}
.fl-app-cab small { display: block; font-size: .74rem; color: #7D8183; }
.fl-app-cab strong { font-size: 1.8rem; font-weight: 800; line-height: 1.1; color: #145597; }
.fl-app-anillo { position: relative; width: 58px; height: 58px; }
.fl-app-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fl-app-anillo circle { fill: none; stroke: #DEE5ED; stroke-width: 4; }
.fl-app-anillo .fl-app-anillo-v { stroke: #3373B9; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1s var(--ease); }
.fl-app-anillo span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
.fl-app-lista { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #DEE5ED; border-radius: 12px; overflow: hidden; }
.fl-app-lista li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
    padding: 10px 14px; border-top: 1px solid #edf1f6; font-size: .82rem;
    transition: background .4s;
}
.fl-app-lista li:first-child { border-top: 0; }
.fl-app-lista li.is-cambio { background: #f0f6fd; }
.fl-app-doc { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-app-lista em {
    font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
    background: #eef2f7; color: #475569; transition: background .4s, color .4s;
}
.fl-app-lista em[data-estado="publicado"] { background: #E1EBF6; color: #145597; }
.fl-app-lista em[data-estado="observado"] { background: #fef3c7; color: #b45309; }
.fl-app-lista em[data-estado="aprobado"] { background: #d1fae5; color: #047857; }
.fl-app-lista time { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.fl-app-lista time[data-tono="danger"] { background: #fee2e2; color: #b91c1c; }
.fl-app-lista time[data-tono="warn"] { background: #fef3c7; color: #b45309; }
.fl-app-lista time[data-tono="ok"] { background: #d1fae5; color: #047857; }

/* ── 3. Bandeja: los avisos entran uno a uno ─────────────────────── */
.fl-bandeja {
    padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    display: flex; flex-direction: column; gap: 8px; min-height: 300px;
}
.fl-bandeja-cab { padding: 6px 8px 8px; font-size: .78rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.fl-correo {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: 12px; align-items: center;
    padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2);
    opacity: 0; transform: translateX(-24px) scale(.98);
    transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .5s;
}
.fl-correo::before {
    content: ''; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%;
    background: #fff url('/certum_revision/static/src/img/fyle360_mark.svg') center / 26px no-repeat;
}
.fl-correo b { font-size: .8rem; }
.fl-correo span { grid-column: 2; font-size: .86rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-correo time { grid-column: 3; grid-row: 1; font-size: .72rem; color: var(--muted); }
.fl-correo.is-visible { opacity: 1; transform: none; }
.fl-correo.is-nuevo { border-color: var(--celeste); }
.fl-chips { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fl-chips li {
    padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}

/* ── 4. Iconos ───────────────────────────────────────────────────── */
.fl-iconos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.fl-iconos > div {
    display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
    padding: 26px 14px; border-radius: 16px; font-weight: 700; font-size: .9rem;
    background: var(--surface); border: 1px solid var(--line);
    transition: border-color .25s, transform .25s var(--ease), opacity .7s var(--ease);
}
.fl-iconos i {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    background: rgba(51, 115, 185, .18); color: var(--celeste);
    transition: background .25s, color .25s;
}
.fl-iconos svg { width: 28px; height: 28px; }
.fl-iconos > div:hover { border-color: var(--celeste); transform: translateY(-4px); }
.fl-iconos > div:hover i { background: var(--azul); color: #fff; }

.fl-faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.fl-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.fl-faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 700;
}
.fl-faq summary::-webkit-details-marker { display: none; }
.fl-faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--celeste); transition: transform .2s; }
.fl-faq details[open] summary::after { transform: rotate(45deg); }
.fl-faq details p { padding: 0 20px 18px; color: var(--ink-2); font-size: .94rem; }

.fl-cierre {
    position: relative; overflow: hidden; padding: 90px 0; text-align: left;
    background: linear-gradient(120deg, var(--azul-dk), var(--azul));
}
.fl-cierre .fl-franjas { opacity: .08; }
.fl-cierre .fl-wrap { position: relative; }
.fl-cierre .fl-h2 { max-width: 20ch; }

.fl-pie { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 34px 24px 90px; }
.fl-pie-marca { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .86rem; }
.fl-pie-marca img { background: #fff; border-radius: 8px; padding: 6px 10px; height: auto; }
.fl-pie-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: .86rem; font-weight: 600; }

.fl .fl-wa-flota {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
    background: var(--wa); color: #06351b; font-weight: 800; font-size: .88rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .3s;
}
.fl .fl-wa-flota.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fl .fl-wa-flota:hover { background: var(--wa-dk); color: #fff; }

/* Aparecer al entrar en pantalla: solo los bloques marcados, una vez. */
[data-revela] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
[data-revela].is-visto { opacity: 1; transform: none; }

@media (max-width: 1100px) {
    .fl-iconos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
    .fl-links { display: none; }
    .fl-hero-grid, .fl-dos, .fl-dos-inv { grid-template-columns: 1fr; }
    .fl-dos-inv .fl-bandeja { order: 2; }
    .fl-ciclo { margin: 10px auto 0; width: min(400px, 100%); }
}
@media (max-width: 620px) {
    .fl-nav-txt, .fl-wa-txt { display: none; }
    .fl-sec { padding: 72px 0; }
    .fl-nodo { min-width: 0; padding: 6px 8px; font-size: .68rem; }
    .fl-nodo b { font-size: .8rem; }
    .fl-doc { width: 62%; padding: 14px; }
    .fl-iconos { grid-template-columns: 1fr 1fr; }
    .fl-carril { height: 300px; }
    .fl-hito { font-size: .66rem; }
    .fl-hito i { width: 38px; height: 38px; }
    .fl-hito svg { width: 18px; height: 18px; }
    .fl-carril-fila span { display: none; }
    .fl-carril-nota { white-space: normal; text-align: center; border-radius: 12px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fl *, .fl *::before, .fl *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .fl-in, [data-revela], .fl-franjas polygon, .fl-correo { opacity: 1; transform: none; }
}