/* =========================================================================
   Landing pública de Escanear facturas. Prefijo ov- para no pisar el CSS del portal.
   Paleta coherente con la app: azul #2563eb / #1d4ed8 sobre slate.
   ========================================================================= */

.ov { color:#0f172a; font-size:17px; line-height:1.55; }
.ov * { box-sizing:border-box; }
.ov h1, .ov h2, .ov h3 { line-height:1.15; margin:0; }
.ov section { padding:4.2rem 1.5rem; }
.ov .wrap { max-width:1080px; margin:0 auto; }

/* --- Cabecera --- */
.ov-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px); border-bottom:1px solid #e5e7eb; }
.ov-header .wrap { display:flex; align-items:center; gap:1.4rem; padding:.7rem 1.5rem; }
.ov-logo { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.25rem;
    color:#0f172a; text-decoration:none; }
.ov-logo img { height:30px; }
.ov-nav { display:flex; gap:1.3rem; margin-left:auto; align-items:center; }
.ov-nav a { color:#475569; text-decoration:none; font-size:.95rem; }
.ov-nav a:hover { color:#2563eb; }
.ov-nav .ov-entrar { color:#2563eb; font-weight:600; }
@media (max-width:760px) { .ov-nav a:not(.ov-cta-s):not(.ov-entrar) { display:none; } }

/* --- Botones --- */
.ov-cta, .ov-cta-s { display:inline-block; background:#2563eb; color:#fff !important; font-weight:600;
    text-decoration:none; border:none; border-radius:10px; cursor:pointer; }
.ov-cta { padding:.85rem 1.6rem; font-size:1.05rem; box-shadow:0 6px 20px rgba(37,99,235,.35); }
.ov-cta-s { padding:.5rem 1rem; font-size:.92rem; }
.ov-cta:hover, .ov-cta-s:hover { background:#1d4ed8; }
.ov-cta.ghost { background:#fff; color:#2563eb !important; border:1.5px solid #bfdbfe; box-shadow:none; }
.ov-cta.ghost:hover { background:#eff6ff; }
.ov-cta-form { display:inline; margin:0; }
button.ov-cta { font:inherit; }

/* --- Hero --- */
.ov-hero { background:linear-gradient(160deg,#eff6ff 0%,#fff 55%, #f0f9ff 100%); padding-top:4.6rem; }
.ov-hero .wrap { display:flex; gap:3rem; align-items:center; flex-wrap:wrap; }
.ov-hero-txt { flex:1 1 460px; min-width:300px; }
.ov-hero-img { flex:1 1 380px; min-width:300px; text-align:center; }
.ov-hero-img img { width:100%; max-width:520px; }
.ov-eyebrow { display:inline-block; background:#dbeafe; color:#1e40af; font-size:.82rem; font-weight:600;
    padding:.25rem .8rem; border-radius:999px; margin-bottom:1rem; }
.ov-hero h1 { font-size:clamp(2.1rem, 5vw, 3.2rem); font-weight:800; letter-spacing:-.02em; }
.ov-hero h1 em { color:#2563eb; font-style:normal; }
.ov-hero .sub { color:#475569; font-size:1.15rem; margin:1.1rem 0 1.6rem; max-width:34rem; }
.ov-hero-ctas { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
.ov-trust { display:flex; gap:1.1rem; flex-wrap:wrap; color:#64748b; font-size:.88rem; margin-top:1.1rem; }
.ov-trust span::before { content:"✓ "; color:#16a34a; font-weight:700; }
/* Rebote del cooldown global de la demo: aviso, no error — el visitante no ha hecho nada mal. */
.ov-demo-espera { margin-top:1rem; max-width:34rem; background:#fef9c3; border:1px solid #fde047;
    color:#713f12; border-radius:.6rem; padding:.7rem .9rem; font-size:.92rem; }

/* ============================================================================
   "Cómo funciona": el PDF entra, pasa por Escanear facturas y sale como filas de Excel.
   CSS puro en bucle de 6 s, sin JS ni imágenes. Todas las animaciones comparten
   esa duración y se coordinan por animation-delay, de modo que cambiar el ritmo
   es tocar un único número en cada regla.
   Reparto del ciclo:  0-30 % el documento viaja · 30-45 % lo escanea ·
                       45-85 % caen las filas · 85-100 % respiro antes de repetir.
   ============================================================================ */
.ov-flujo { position:relative; display:flex; align-items:flex-start; justify-content:center;
    gap:clamp(1rem, 6vw, 4.5rem); margin:2.2rem auto 2.6rem; max-width:760px; padding:0 1rem; }
.ov-flujo-etapa { display:flex; flex-direction:column; align-items:center; gap:.6rem; flex:0 0 auto; }
.ov-flujo-pie { color:#64748b; font-size:.82rem; text-align:center; }

/* --- Etapa 1: la factura en papel --- */
.ov-flujo-doc { width:76px; height:98px; background:#fff; border:1px solid #e2e8f0; border-radius:.35rem;
    box-shadow:0 6px 14px -8px rgba(15,23,42,.35); padding:.5rem .45rem;
    display:flex; flex-direction:column; gap:.28rem; }
.ov-flujo-doc .ln { height:4px; border-radius:2px; background:#e2e8f0; }
.ov-flujo-doc .ln.tit { background:#94a3b8; width:70%; height:6px; margin-bottom:.15rem; }
.ov-flujo-doc .ln.corta { width:55%; }
.ov-flujo-doc .ln.tot { margin-top:auto; width:45%; background:#cbd5e1; height:6px; align-self:flex-end; }

/* --- Etapa 2: el escáner --- */
.ov-flujo-caja { position:relative; width:96px; height:98px; border-radius:.6rem; overflow:hidden;
    background:linear-gradient(160deg, #1e3a8a, #2563eb); display:flex; align-items:center;
    justify-content:center; box-shadow:0 10px 22px -12px rgba(37,99,235,.8); }
.ov-flujo-marca { color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.02em; z-index:1; }
/* El haz solo barre cuando el documento está dentro (30-45 % del ciclo). */
.ov-flujo-haz { position:absolute; left:0; right:0; height:34%;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.55), transparent);
    opacity:0; animation:ov-haz 6s ease-in-out infinite; }
@keyframes ov-haz {
    0%, 28%   { transform:translateY(-120%); opacity:0; }
    32%       { opacity:1; }
    45%       { transform:translateY(320%); opacity:0; }
    100%      { transform:translateY(320%); opacity:0; }
}

/* --- Etapa 3: la hoja de cálculo --- */
.ov-flujo-hoja { width:104px; height:98px; background:#fff; border:1px solid #e2e8f0; border-radius:.35rem;
    box-shadow:0 6px 14px -8px rgba(15,23,42,.35); padding:.45rem; display:flex;
    flex-direction:column; gap:.3rem; }
.ov-flujo-hoja .fila { height:7px; border-radius:2px; background:#dcfce7; }
.ov-flujo-hoja .fila.cab { background:#16a34a; height:9px; }
/* Cada fila entra cuando el documento ya ha sido leído; escalonadas para que se lea como
   "se van añadiendo", no como un bloque que aparece de golpe. */
.ov-flujo-hoja .f1, .ov-flujo-hoja .f2, .ov-flujo-hoja .f3 {
    opacity:0; transform:translateX(-6px); animation:ov-fila 6s ease-out infinite; }
.ov-flujo-hoja .f1 { animation-delay:0s; }
.ov-flujo-hoja .f2 { animation-delay:.45s; }
.ov-flujo-hoja .f3 { animation-delay:.9s; }
@keyframes ov-fila {
    0%, 45%   { opacity:0; transform:translateX(-6px); }
    55%, 92%  { opacity:1; transform:translateX(0); }
    100%      { opacity:0; transform:translateX(-6px); }
}

/* --- La hoja que viaja de una etapa a otra --- */
/* Envoltorio de ancho completo: al ser el 100 % del contenedor, un translateX en % equivale
   a "tanto por ciento del recorrido". Animar esto en vez de 'left' evita recalcular el
   layout en cada fotograma — que es la diferencia entre fluido y con tirones. */
.ov-flujo-viajero { position:absolute; top:24px; left:0; width:100%; pointer-events:none;
    animation:ov-viaje 6s ease-in-out infinite; }
.ov-flujo-viajero .hoja { display:block; width:34px; height:44px; background:#fff;
    border:1px solid #cbd5e1; border-radius:.25rem; box-shadow:0 8px 16px -8px rgba(15,23,42,.5);
    opacity:0; animation:ov-viaje-hoja 6s ease-in-out infinite; }
@keyframes ov-viaje {
    0%        { transform:translateX(9%); }
    30%       { transform:translateX(45%); }
    42%, 100% { transform:translateX(47%); }
}
/* Entra en el escáner y se desvanece DENTRO: de ahí sale convertido en datos, no en papel. */
@keyframes ov-viaje-hoja {
    0%        { opacity:0; transform:scale(.9) rotate(-4deg); }
    8%        { opacity:1; transform:scale(.88) rotate(-3deg); }
    30%       { opacity:1; transform:scale(.82) rotate(0deg); }
    42%, 100% { opacity:0; transform:scale(.6) rotate(0deg); }
}

/* En pantallas estrechas las tres etapas no caben en fila: se apilan y el viajero
   estorbaría (su recorrido es horizontal), así que se retira. */
@media (max-width: 640px) {
    .ov-flujo { flex-wrap:wrap; gap:1.4rem 2rem; }
    .ov-flujo-viajero { display:none; }
}

/* Sin movimiento: se enseña el RESULTADO (hoja con sus filas), que es lo que la
   animación venía a contar. Nada parpadea ni se desplaza. */
@media (prefers-reduced-motion: reduce) {
    .ov-flujo-haz, .ov-flujo-viajero { display:none; }
    .ov-flujo-hoja .f1, .ov-flujo-hoja .f2, .ov-flujo-hoja .f3 {
        animation:none; opacity:1; transform:none; }
}

/* --- Demo en el hero: soltar una factura y ver los datos ahí mismo --- */
.ov-demo { background:#fff; border:1px solid #e2e8f0; border-radius:1rem; padding:1.1rem;
    box-shadow:0 18px 40px -24px rgba(15,23,42,.45); text-align:left; max-width:520px; margin:0 auto; }
.ov-demo-head { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
    margin-bottom:.8rem; flex-wrap:wrap; }
.ov-demo-head strong { font-size:1.02rem; }
.ov-demo-head span { color:#64748b; font-size:.82rem; }

/* La zona late SIEMPRE: en reposo llama la atención sobre lo único que hay que hacer aquí
   (soltar un PDF), y mientras trabaja late más deprisa. Es la única señal de estado que
   queda —no hay spinner ni texto—, así que el cambio de ritmo es lo que distingue
   "esperando" de "procesando". */
.ov-demo-drop { display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.5rem; min-height:150px; padding:1rem; cursor:pointer; text-align:center;
    border:2px dashed #cbd5e1; border-radius:.8rem;
    animation:ov-pulso 1.6s ease-in-out infinite;
    transition:border-color .18s ease, background-color .18s ease, transform .18s ease; }

/* Con el ratón encima o con un archivo sobrevolando manda la respuesta a la interacción, no
   el latido: se corta la animación para que estos colores lleguen a verse (una animación
   gana siempre a las declaraciones normales de la cascada). */
.ov-demo-drop:hover { animation:none; border-color:#94a3b8; background:#f1f5f9; color:#475569; }
.ov-demo-drop.sobre { animation:none; border-color:#2563eb; background:#eff6ff; color:#1e40af;
    transform:scale(.99); }
.ov-demo-drop .ico { font-size:1.9rem; }
.ov-demo-drop small { color:#94a3b8; }

@keyframes ov-pulso {
    0%, 100% { background-color:#f8fafc; border-color:#cbd5e1; color:#475569; }
    50%      { background-color:#dbeafe; border-color:#2563eb; color:#1e40af; }
}

/* Procesando: el MISMO latido, pero más rápido. El ritmo es lo único que separa "esperando"
   de "trabajando" ahora que no hay ni spinner ni texto de estado. */
.ov-demo-drop.trabajando { cursor:progress; animation-duration:1s; }
/* Mientras procesa, el latido manda por encima del hover: si no, pasar el ratón por encima
   pararía la animación y parecería que se ha colgado. */
.ov-demo-drop.trabajando:hover { animation:ov-pulso 1s ease-in-out infinite; }

/* Quien pide menos movimiento no debería ver la caja latiendo sin parar: en reposo se queda
   quieta y al trabajar toma el color "activo" fijo, que sigue distinguiendo los dos estados. */
@media (prefers-reduced-motion: reduce) {
    .ov-demo-drop { transition:none; animation:none; background-color:#f8fafc; color:#475569; }
    .ov-demo-drop.trabajando, .ov-demo-drop.trabajando:hover {
        animation:none; background-color:#dbeafe; border-color:#2563eb; color:#1e40af; }
}

.ov-demo-error { margin-top:.8rem; background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
    border-radius:.6rem; padding:.6rem .8rem; font-size:.9rem; }

/* Confirmación de subida con salida al portal, mientras el análisis sigue en marcha. */
.ov-demo-subido { margin-top:.8rem; background:#f0fdf4; border:1px solid #bbf7d0; color:#166534;
    border-radius:.6rem; padding:.6rem .8rem; font-size:.9rem; }
.ov-demo-subido a { color:#15803d; font-weight:600; }

/* La tabla no puede desbordar la tarjeta: si el proveedor viene kilométrico (razones
   sociales de operadoras...), la zona hace scroll horizontal DENTRO de la tarjeta. */
.ov-demo-res { margin-top:.9rem; overflow-x:auto; }
.ov-demo-tabla { width:100%; border-collapse:collapse; font-size:.86rem; }
.ov-demo-tabla th { text-align:left; color:#64748b; font-weight:600; border-bottom:1px solid #e2e8f0;
    padding:.35rem .4rem; }
.ov-demo-tabla td { padding:.4rem; border-bottom:1px solid #f1f5f9; }
/* El nombre del proveedor es la única columna elástica: se parte en varias líneas antes
   que empujar los importes fuera de la vista. */
.ov-demo-tabla td:nth-child(3) { max-width:11rem; overflow-wrap:break-word; }
.ov-demo-tabla .num { text-align:right; font-variant-numeric:tabular-nums; }
/* Factura leída pero que no cuadra: se enseña igual, marcada — ocultarla sería engañoso. */
.ov-demo-tabla tr.dudosa td { background:#fffbeb; }
.ov-demo-acciones { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem; }
.ov-cta.sm { padding:.5rem .9rem; font-size:.9rem; }
.ov-demo-restan { color:#64748b; font-size:.82rem; margin-top:.6rem; }

/* --- Franja de confianza --- */
.ov-social { background:#0f172a; color:#cbd5e1; padding:1rem 1.5rem; text-align:center; font-size:.95rem; }
.ov-social strong { color:#fff; }

/* --- Cómo funciona --- */
.ov-pasos { text-align:center; }
.ov-kicker { color:#2563eb; font-weight:700; font-size:.85rem; text-transform:uppercase;
    letter-spacing:.08em; margin-bottom:.5rem; }
.ov h2 { font-size:clamp(1.6rem, 3.5vw, 2.2rem); font-weight:800; letter-spacing:-.01em; }
.ov .h2sub { color:#64748b; max-width:38rem; margin:.8rem auto 0; }
/* minmax a 230px para que los CUATRO pasos quepan en una fila dentro del wrap de 1080px
   (4 x 230 + 3 huecos = 1016); con 250 se partirian en 2+2. */
.ov-pasos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem;
    margin-top:2.6rem; text-align:left; }
.ov-paso { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:16px;
    padding:1.6rem 1.4rem 1.4rem; box-shadow:0 4px 18px rgba(15,23,42,.05); }
.ov-paso img { height:72px; margin-bottom:.9rem; }
.ov-paso .n { position:absolute; top:1.1rem; right:1.2rem; font-size:2.2rem; font-weight:800;
    color:#e2e8f0; line-height:1; }
.ov-paso h3 { font-size:1.12rem; margin-bottom:.45rem; }
.ov-paso p { color:#475569; font-size:.95rem; margin:0; }

/* --- Características --- */
.ov-feats { background:#f8fafc; }
.ov-conta { background:#fff; }
.ov-conta .ov-feat { background:#f8fafc; }
.ov-feats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem;
    margin-top:2.4rem; }
.ov-feat { display:flex; gap:.85rem; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    padding:1.05rem 1.1rem; }
.ov-feat .ico { flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center;
    background:#eff6ff; border-radius:10px; font-size:1.25rem; }
.ov-feat h3 { font-size:1rem; margin-bottom:.2rem; }
.ov-feat p { color:#64748b; font-size:.88rem; margin:0; }

/* --- Precios --- */
.ov-precio { text-align:center; }
.ov-precio-big { font-size:clamp(3rem, 8vw, 4.6rem); font-weight:800; color:#2563eb;
    letter-spacing:-.03em; margin:.6rem 0 .1rem; }
.ov-precio-big small { font-size:.35em; color:#475569; font-weight:600; }
.ov-precio-lema { color:#0f172a; font-weight:600; font-size:1.15rem; }
.ov-precio-tope { display:inline-block; max-width:36rem; margin:1.1rem auto 0; padding:.75rem 1.1rem; border-radius:12px;
    background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; font-size:.98rem; }
.ov-precio-ancla { color:#64748b; max-width:33rem; margin:.9rem auto 0; font-size:.95rem; }
.ov-precio-nota { color:#64748b; font-size:.88rem; margin-top:1.6rem; }

/* --- Calculadora --- */
.ov-calc { background:linear-gradient(160deg,#1e3a8a,#1e40af 60%,#2563eb); color:#fff; }
.ov-calc .wrap { max-width:860px; text-align:center; }
.ov-calc h2 { color:#fff; }
.ov-calc .h2sub { color:#bfdbfe; }
.ov-calc-box { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22);
    border-radius:18px; padding:1.8rem 1.6rem; margin-top:2rem; }
.ov-calc-box input[type=range] { width:100%; max-width:560px; accent-color:#93c5fd; }
.ov-calc-n { font-size:1.15rem; margin-bottom:.9rem; }
.ov-calc-n strong { font-size:1.7rem; }
.ov-calc-res { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }
.ov-calc-res div { background:rgba(255,255,255,.12); border-radius:12px; padding:.9rem 1.4rem; min-width:180px; }
.ov-calc-res .v { font-size:1.65rem; font-weight:800; }
.ov-calc-res .l { color:#bfdbfe; font-size:.85rem; }
.ov-calc-nota { color:#93c5fd; font-size:.8rem; margin-top:1rem; }

/* --- FAQ --- */
.ov-faq .wrap { max-width:760px; }
.ov-faq details { border-bottom:1px solid #e5e7eb; padding:.9rem .2rem; }
.ov-faq summary { font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.ov-faq summary::after { content:"+"; color:#2563eb; font-weight:700; }
.ov-faq details[open] summary::after { content:"–"; }
.ov-faq details p { color:#475569; margin:.6rem 0 0; font-size:.95rem; }

/* --- CTA final --- */
.ov-final { text-align:center; background:#f8fafc; }
.ov-final .micro { color:#64748b; font-size:.9rem; margin-top:1rem; }
.ov-final .ov-cta.ghost { margin:.4rem; }

/* --- Pie --- */
.ov-footer { background:#0f172a; color:#94a3b8; padding:2.2rem 1.5rem; font-size:.9rem; }
.ov-footer .wrap { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.ov-footer a { color:#cbd5e1; text-decoration:none; }
.ov-footer a:hover { color:#fff; }

/* --- Paginas legales (aviso legal, privacidad) --- */
.ov-legal { padding:3rem 1.5rem 4rem; }
.ov-legal .wrap { max-width:760px; margin:0 auto; }
.ov-legal h1 { font-size:1.9rem; margin-bottom:.3rem; }
.ov-legal-fecha { color:#64748b; font-size:.85rem; margin-bottom:2rem; }
.ov-legal h2 { font-size:1.15rem; margin:1.8rem 0 .5rem; }
.ov-legal p, .ov-legal li { color:#334155; font-size:.95rem; line-height:1.65; }
.ov-legal ul { padding-left:1.3rem; }
.ov-legal li { margin:.35rem 0; }
.ov-legal a { color:#2563eb; }
.ov-demo-legal { color:#94a3b8; font-size:.75rem; margin:.8rem 0 0; }
.ov-demo-legal a { color:#2563eb; }

/* --- Capturas del portal --- */
.ov-capturas { background:#fff; }
.ov-cap { margin:0; }
.ov-cap a { display:block; }
.ov-cap img { display:block; width:100%; height:auto; border-radius:12px; border:1px solid #e2e8f0;
    box-shadow:0 14px 40px rgba(15,23,42,.12); background:#fff; }
.ov-cap figcaption { color:#64748b; font-size:.95rem; margin-top:.7rem; }
.ov-cap figcaption strong { color:#0f172a; }
.ov-cap-grande { margin-top:2.2rem; }
.ov-cap-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1.8rem; margin-top:2.2rem; align-items:start; }
.ov-cap-sub { margin-top:1.4rem; }
.ov-cap-nota { text-align:center; color:#64748b; font-size:.92rem; margin:2rem 0 0; }
@media (max-width:760px) { .ov-cap-grid { grid-template-columns:1fr; } }