{"id":2604,"date":"2026-02-06T13:32:06","date_gmt":"2026-02-06T19:32:06","guid":{"rendered":"https:\/\/frevidence.com\/?page_id=2604"},"modified":"2026-04-09T18:31:39","modified_gmt":"2026-04-10T00:31:39","slug":"servicios-modificada","status":"publish","type":"page","link":"https:\/\/frevidence.com\/","title":{"rendered":"servicios modificada"},"content":{"rendered":"\n<style>\n#frev-header {\n    position: fixed !important;\n    top: 0;\n    left: 50% !important;\n    transform: translateX(-50%);\n    width: 95% !important;\n    max-width: 1400px !important;\n    height: 85px !important;\n    margin-top: 20px !important;\n    background: transparent !important;\n    display: flex !important;\n    align-items: center !important;\n    z-index: 99999 !important;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;\n    border-radius: 50px;\n}\n\n#frev-header.scrolled {\n    margin-top: 0 !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    height: 70px !important;\n    background: rgba(255, 255, 255, 0.95) !important;\n    backdrop-filter: blur(12px) !important;\n    border-radius: 0 !important;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;\n}\n\n#frev-nav-container {\n    display: grid !important;\n    grid-template-columns: 1fr auto 1fr !important;\n    width: 100% !important;\n    align-items: center !important;\n    padding: 0 40px !important;\n}\n\n#frev-logo img {\n    height: 90px !important;\n    width: auto !important;\n    transition: filter 0.3s ease !important;\n}\n\n#frev-nav-center {\n    display: flex !important;\n    justify-content: center !important;\n}\n\n#frev-menu {\n    display: flex !important;\n    gap: 35px !important;\n    list-style: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n#frev-menu li a {\n    color: #ffffff !important;\n    text-decoration: none !important;\n    font-weight: 600 !important;\n    font-size: 1rem !important;\n    position: relative !important;\n    transition: color 0.3s ease !important;\n    display: inline-block !important;\n}\n\n#frev-header.scrolled #frev-menu li a {\n    color: #333 !important;\n}\n\n#frev-menu li a:hover {\n    color: rgb(127, 0, 0) !important;\n}\n\n#frev-menu li a::after {\n    content: '';\n    position: absolute;\n    bottom: -5px;\n    left: 0;\n    width: 0;\n    height: 2px;\n    background: rgb(127, 0, 0);\n    transition: width 0.3s ease;\n}\n\n#frev-menu li a:hover::after {\n    width: 100%;\n}\n\n@media (max-width: 992px) {\n    #frev-header {\n        width: 95% !important;\n        height: auto !important;\n        padding: 15px 0 !important;\n        margin-top: 10px !important;\n        flex-direction: column !important;\n        border-radius: 20px !important;\n    }\n\n    #frev-nav-container {\n        display: flex !important;\n        flex-direction: column !important;\n        gap: 10px !important;\n        padding: 0 !important;\n    }\n\n    #frev-logo img {\n        height: 45px !important;\n    }\n\n    #frev-nav-center {\n        display: flex !important;\n        width: 100% !important;\n        justify-content: center !important;\n    }\n\n    #frev-menu {\n        flex-wrap: wrap !important;\n        justify-content: center !important;\n        gap: 15px !important;\n        padding: 5px 10px !important;\n    }\n\n    #frev-menu li a {\n        font-size: 0.85rem !important;\n        background: rgba(255,255,255,0.1) !important;\n        padding: 5px 10px !important;\n        border-radius: 10px !important;\n    }\n\n    #frev-header.scrolled #frev-menu li a {\n        color: transparent !important;\n        background: transparent !important;\n    }\n}\n<\/style>\n\n<header id=\"frev-header\">\n    <div id=\"frev-nav-container\">\n        <div id=\"frev-logo\">\n            <a href=\"\/\">\n                <img decoding=\"async\" src=\"https:\/\/frevidence.com\/wp-content\/uploads\/2026\/04\/logo_letras_blancas_SF.png\" alt=\"Frevidence\">\n            <\/a>\n        <\/div>\n\n        <nav id=\"frev-nav-center\">\n            <ul id=\"frev-menu\">\n                <li><a href=\"https:\/\/frevidence.com\/\">Servicios<\/a><\/li>\n                <li><a href=\"https:\/\/frevidence.com\/?page_id=2484\">Noticias<\/a><\/li>\n                <li><a href=\"https:\/\/frevidence.com\/?page_id=2642\">Nosotros<\/a><\/li>\n                <li><a href=\"https:\/\/frevidence.com\/?page_id=2623\">Contacto<\/a><\/li>\n            <\/ul>\n        <\/nav>\n\n        <div id=\"frev-nav-right\"><\/div>\n    <\/div>\n<\/header>\n\n<script>\n(function() {\n    var h = document.getElementById('frev-header');\n    if (!h) return;\n    function tick() { h.classList.toggle('scrolled', window.scrollY > 50); }\n    window.addEventListener('scroll', tick, { passive: true });\n    tick();\n})();\n<\/script>\n\n\n\n<DOCTYPE html>\n    <html lang=\"es\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Servicios \u2013 Inform\u00e1tica Forense<\/title>\n        \n        \n        <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n        <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@700;800&#038;family=Inter:wght@300;400;600&#038;display=swap\" rel=\"stylesheet\">    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n        <style>\n            :root {\n                --red: #8B1E1E;\n                --red-deep: #8B1E1E;\n                --red-bright: #8B1E1E;\n                --black: #ffffffb8;        \/* Ahora es blanco *\/\n                --surface: #F5F5F5;      \/* Gris muy claro para las tarjetas *\/\n                --white: #1A1A1A;        \/* Ahora es el color del texto (oscuro) *\/\n                --gray: #888;\n                --border: rgba(0,0,0,0.1); \/* Borde oscuro tenue *\/\n            }\n\n            *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n            body {\n                font-family:'Inter', sans-serif;;\n                background: var(--black);\n                color: var(--white);\n                overflow-x: hidden;\n            }\n\n            \/* \u2500\u2500 HERO SECTION \u2500\u2500 *\/\n            .services-hero {\n                position: relative;\n                min-height: 100vh;\n                display: flex;\n                flex-direction: column;\n                justify-content: center;\n                overflow: hidden;\n                \n            }\n\n            \/* Fondo con imagen + overlay dram\u00e1tico *\/\n            .hero-bg {\n                position: absolute;\n                inset: 0;\n                background-image: url('https:\/\/frevidence.com\/wp-content\/uploads\/2026\/04\/p4.png');\n                background-size: cover;\n                \n                transform: scale(1.05);\n                transition: transform 12s ease;\n            }\n            .hero-bg.loaded { transform: scale(1); }\n\n            \/* Vignette + gradiente *\/\n            .hero-overlay {\n                position: absolute;\n                inset: 0;\n                inset: 0;\n        background:\n            \/* Mantiene un brillo sutil arriba *\/\n            radial-gradient(ellipse 70% 60% at 50% 0%, rgba(196,30,30,0.08) 0%, transparent 70%),\n            \/* Degradado m\u00e1s limpio: de transparente total a blanco s\u00f3lido solo al final *\/\n            linear-gradient(180deg, \n                rgba(255, 255, 255, 0) 0%, \n                rgba(255, 255, 255, 0.1) 40%, \n                rgba(255, 255, 255, 0.8) 85%, \n                rgb(255, 255, 255) 100%);\n            backdrop-filter: brightness(1.1);\n            }\n\n            \/* L\u00edneas decorativas *\/\n            .hero-lines {\n                position: absolute;\n                inset: 0;\n                background-image:\n                    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 80px);\n                pointer-events: none;\n            }\n\n            .hero-content {\n                position: relative;\n                z-index: 2;\n                padding: 120px 60px 0;\n                max-width: 1400px;\n                margin: 0 auto;\n                width: 100%;\n            }\n\n            .hero-eyebrow {\n                display: inline-flex;\n                align-items: center;\n                gap: 20px;\n                font-family: 'Syne', sans-serif;\n                font-size: 1.1rem;\n                font-weight: 700;\n                letter-spacing: 0.25em;\n                text-transform: uppercase;\n                color: var(--red);\n                margin-bottom: 28px;\n                opacity: 0;\n                transform: translateY(20px);\n                animation: fadeUp 0.8s 0.2s forwards;\n            }\n            .hero-eyebrow::before {\n                content: '';\n                display: block;\n                width: 32px;\n                height: 2px;\n                background: var(--red);\n            }\n    .title-slogan::before {\n    content: '';\n        position: absolute;\n        left: 0;\n        top: 10%; \/* Altura inicial *\/\n        width: 6px; \/* Un poco m\u00e1s gruesa para que la animaci\u00f3n se note *\/\n        height: 80%; \/* Altura de la l\u00ednea *\/\n        background: var(--red);\n        border-radius: 3px;\n        \n        \/* --- Configuraci\u00f3n de la animaci\u00f3n inicial --- *\/\n        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n        transform-origin: center;\n        opacity: 0.8; \n    }\n\n    \/* EFECTO HOVER: Movimiento de la l\u00ednea *\/\n    .title-slogan:hover::before {\n    \/* 1. Cambio de estado inmediato *\/\n        opacity: 1;\n        background: var(--red-bright);\n        \n        \/* 2. ACTIVACI\u00d3N DE LA ANIMACI\u00d3N 'linePulse' *\/\n        \/* Nombre: linePulse | Duraci\u00f3n: 1.2s | Curva: ease-in-out | Repetici\u00f3n: infinita *\/\n        animation: linePulse 1.2s ease-in-out infinite;\n        \n        \/* 3. Desplazamiento sutil a la derecha *\/\n        transform: translateX(8px);\n    }\n    \/* ============================================================\n    DEFINICI\u00d3N DE LA ANIMACI\u00d3N (keyframes)\n    Efecto de \"pulso\" o \"latido\"\n    ============================================================ *\/\n    @keyframes linePulse {\n        0% {\n            transform: translateX(8px) scaleY(1) scaleX(1);\n            box-shadow: 0 0 0 rgba(139, 30, 30, 0);\n        }\n        50% {\n            \/* En el medio del ciclo: crece y brilla *\/\n            transform: translateX(8px) scaleY(1.08) scaleX(1.1);\n            background: #a52a2a; \/* Un rojo un poco m\u00e1s brillante *\/\n            box-shadow: 0 0 15px rgba(139, 30, 30, 0.6); \/* Brillo intenso *\/\n        }\n        100% {\n            transform: translateX(8px) scaleY(1) scaleX(1);\n            box-shadow: 0 0 0 rgba(139, 30, 30, 0);\n        }\n    }\n    @media (max-width: 768px) {\n        .title-slogan {\n            padding-left: 30px; \n            align-items: flex-start; \n        }\n        .title-slogan::before {\n            width: 4px; \n            top: 5%;\n            height: 90%;\n        }\n        .title-slogan:hover {\n            padding-left: 35px;\n        }\n    }\n\n    .title-slogan:hover {\n        padding-left: 50px;\n    }\n    @media (max-width: 768px) {\n        .title-slogan {\n            padding-left: 25px;\n        }\n        .title-slogan::before {\n            width: 3px;\n        }\n        .title-slogan:hover {\n            padding-left: 30px;\n        }\n    }\n    .hero-title {\n        font-family: Vegur, 'PT Sans', Verdana, sans-serif;\n        line-height: 1.1;\n        margin-bottom: 32px;\n    }\n    .title-small {\n        display: block;\n        font-size: clamp(1rem, 2vw, 1.5rem);\n        color: #1A1A1A;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        margin-bottom: 8px;\n        opacity: 0.8;\n    }\n    .title-slogan {\n        display: block;\n        font-size: clamp(1.5rem, 5vw, 4rem);\n        font-weight: 800;\n        color: #f5f5f5df; \/* Color oscuro para el resto de la frase *\/\n        line-height: 0.95; \/* Interlineado compacto *\/\n        letter-spacing: -0.04em;\n        text-wrap: balance;\n        margin-bottom: 25px;\n        position: relative;\n        padding-left: 40px; \n        transition: all 0.4s ease;  \n    }\n\n    \/* EFECTO TEXTO TRANSPARENTE CON BORDE VINO *\/\n    .slogan-outline {\n        \/* Hacemos el color del texto transparente *\/\n        color: transparent !important;\n        \n        \/* Aplicamos el borde (contorno) de color vino *\/\n        -webkit-text-stroke: 1.5px var(--red); \/* Grosor y color de la variable vino *\/\n        text-stroke: 1.5px var(--red); \/* Propiedad est\u00e1ndar *\/\n        \n        \/* Peque\u00f1o ajuste para que el borde no se vea cortado *\/\n        display: inline-block;\n        position: relative;\n        padding: 0 2px;\n    }\n\n    \/* Detalle final: El subt\u00edtulo gris *\/\n    .title-sub {\n        font-size: clamp(1.1rem, 2.5vw, 1.8rem);\n        color: #8B1E1E; \/* Gris medio para no competir *\/\n        border-left: 3px solid var(--red);\n        padding-left: 15px;\n        margin-top: 15px;\n    }\n\n    \/* Resalte en rojo para el final de la frase *\/\n    .title-slogan .accent {\n        color: var(--red);\n        display: inline-block;\n        position: relative;\n    font-size: clamp(2.5rem, 7vw, 6rem); \n\n    }\n\n\n    \/* Ajuste espec\u00edfico para m\u00f3viles *\/\n    @media (max-width: 768px) {\n        .title-slogan {\n            line-height: 1.1;\n            letter-spacing: -0.02em;\n        }\n        .title-sub {\n            border-left: none;\n            border-top: 2px solid var(--red);\n            padding-left: 0;\n            padding-top: 15px;\n        }\n    }\n\n            @keyframes fadeUp {\n                to { opacity: 1; transform: translateY(0); }\n            }\n\n            \/* \u2500\u2500 SCROLL HINT \u2500\u2500 *\/\n            .scroll-hint svg {\n                width: 40px;\n                height: 20px;\n                animation: scrollArrow 1.5s ease-in-out infinite;\n            }\n            .hint {\n                position: relative;\n                z-index: 2;\n                padding: 50px 60px 0;\n                max-width: 1400px;\n                margin: 0 auto;\n                width: 100%;\n                display: flex;\n                align-items: center;\n                gap: 16px;\n                color: #790707e7;\n                font-size: 0.78rem;\n                letter-spacing: 0.15em;\n                text-transform: uppercase;\n                font-family: 'Syne', sans-serif;\n                opacity: 0;\n                animation: fadeUp 0.8s 0.8s forwards;\n            }\n            .hint svg {\n        width: 40px;\n        height: 20px;\n        animation: scrollArrow 1.5s ease-in-out infinite;\n    }\n        \/* Estilo base limpio solo para el icono *\/\n    .scroll-btn {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        background: transparent;\n        border: none;\n        box-shadow: none;\n        \n        \/* Dimensiones para el \u00e1rea clickeable, el icono ser\u00e1 m\u00e1s peque\u00f1o *\/\n        width: 40px; \n        height: 40px;\n        \n        cursor: pointer;\n        z-index: 20;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0; \/* Quitamos padding por defecto *\/\n        \n        \/* Transici\u00f3n suave solo para la opacidad o transform si decides usar hover *\/\n        transition: all 0.2s ease-in-out;\n    }\n\n    \/* Creamos el icono EXACTO de la imagen usando el pseudoelemento *\/\n    .scroll-btn::after {\n        content: '';\n        \/* Tama\u00f1o del icono interno *\/\n        width: 35px; \n        height: 35px;\n        \n        \/* Grosor y color negro del icono *\/\n        border-right: 10px solid #8B1E1E; \/* Grosor similar a la imagen *\/\n        border-bottom: 10px solid #8B1E1E;\n        \n        \/* Bordes redondeados gruesos de la imagen *\/\n        border-radius: 4px; \n        \n        display: block;\n    }\n\n    \/* Orientaci\u00f3n para el bot\u00f3n derecho (rotaci\u00f3n -45deg) *\/\n    .scroll-btn-right::after {\n        transform: rotate(-45deg);\n    }\n\n    \/* Orientaci\u00f3n para el bot\u00f3n izquierdo (rotaci\u00f3n 135deg) *\/\n    .scroll-btn-left::after {\n        transform: rotate(135deg);\n    }\n\n    \/* Opcional: Un efecto hover sutil (cambio de opacidad) *\/\n    .scroll-btn:hover {\n        opacity: 0.7;\n        \/* Eliminamos el scale grande que ten\u00edas antes *\/\n        transform: translateY(-50%); \n    }\n\n    \/* Posicionamiento en los extremos *\/\n    .scroll-btn-left  { left: 30px; } \/* Ajustado un poco m\u00e1s cerca *\/\n    .scroll-btn-right { right: 30px; }\n        \n        \n            @keyframes scrollArrow {\n                0%,100% { transform: translateX(0); }\n                50% { transform: translateX(8px); }\n            }\n\n            \/* \u2500\u2500 HORIZONTAL TRACK \u2500\u2500 *\/\n            .track-section {\n                position: relative;\n                padding: 60px 0 80px;\n                \n            }\n\n            \/* Sombras de fade en los bordes *\/\n            .track-section::before,\n            .track-section::after {\n                content: '';\n                position: absolute;\n                top: 0; bottom: 0;\n                width: 120px;\n                z-index: 10;\n                pointer-events: none;\n            }\n            .track-section::before {\n                left: 0;\n                background: linear-gradient(to right, var(--black), transparent);\n            }\n            .track-section::after {\n                right: 0;\n                background: linear-gradient(to left,var(--black), transparent);\n            }\n\n            .track-wrapper {\n                overflow-x: auto;\n                overflow-y: visible;\n                padding: 40px 120px 50px;\n                scrollbar-width: none;\n                cursor: grab;\n                -webkit-overflow-scrolling: touch;\n            }\n            .track-wrapper:active { cursor: grabbing; }\n            .track-wrapper::-webkit-scrollbar { display: none; }\n\n            .track {\n                display: flex;\n                gap: 0;\n                width: max-content;\n                align-items: stretch;\n            }\n\n            \/* \u2500\u2500 CARD \u2500\u2500 *\/\n            \/* Reemplaza .svc-card con esto *\/\n    .svc-card {\n        position: relative;\n        width: 340px;\n        flex-shrink: 0;\n        background: var(--surface);\n        border: 2px solid #bbb8b8;  \/* Borde rojo m\u00e1s visible *\/\n        overflow: visible;  \/* Permite que los conectores se vean *\/\n        cursor: pointer;\n        transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),\n                    border-color 0.4s,\n                    box-shadow 0.5s;\n        opacity: 0;\n        transform: translateY(40px);\n        border: 2px solid var(#0f45bb);\n        border-radius: 28px;\n        position: relative;\n        box-shadow: \n            inset 0 0 20px rgba(236, 236, 236, 0.1),\n            0 8px 24px rgba(0,0,0,0.1);\n    }\n\n            \/* Formas de rompecabezas: tab derecho saliente, tab izquierdo entrante *\/\n            .svc-card:first-child { border-radius: 20px 0 0 20px; }\n            .svc-card:last-child  { border-radius: 0 20px 20px 0; }\n\n            \/* Conector entre piezas *\/\n            \/* Actualiza los conectores circulares *\/\n    .svc-card::after {\n        content: '';\n        position: absolute;\n        right: -24px;  \/* Aumenta el tama\u00f1o *\/\n        top: 50%;\n        transform: translateY(-50%);\n        width: 48px;   \/* M\u00e1s grande *\/\n        height: 48px;\n        background: #b9b9b9;  \/* Rojo s\u00f3lido *\/\n        border: 2px solid var(--black);\n        border-radius: 50%;\n        z-index: 20;\n        transition: all 0.4s;\n    }\n\n    .svc-card:last-child::after { display: none; }\n\n    \/* Tab izquierdo m\u00e1s visible *\/\n    .svc-card:not(:first-child)::before {\n        content: '';\n        position: absolute;\n        left: -28px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 56px;\n        height: 56px;\n        background: var(--black);  \/* Fondo blanco para contrastar *\/\n        border: 3px solid var(--red);\n        border-radius: 50%;\n        z-index: 25;\n    }\n            \/* Tab entrante izquierdo (excepto el primero) *\/\n            .svc-card:not(:first-child)::before {\n                content: '';\n                position: absolute;\n                left: -18px;\n                top: 50%;\n                transform: translateY(-50%);\n                width: 36px;\n                height: 36px;\n                background: #8B0000;\n                border-radius: 50%;\n                z-index: 25;\n                transition: background 0.4s;\n            }\n\n            .svc-card.animated { animation: cardIn 0.6s forwards; }\n\n            @keyframes cardIn {\n                to { opacity: 1; transform: translateY(0); }\n            }\n\n            .svc-card:hover {\n                transform: translateY(-20px) scale(1.03);\n                border-color: rgba(196,30,30,0.5);\n                box-shadow: 0 40px 80px rgba(196,30,30,0.2), 0 0 0 1px rgba(196,30,30,0.3);\n                z-index: 5;\n            }\n            .svc-card:hover::after {\n                background: var(--surface);\n                border-color: rgba(196,30,30,0.4);\n            }\n\n            \/* Fondo imagen de la card *\/\n            .card-image {\n                position: absolute;\n                inset: 0;\n                background-size: cover;\n                background-position: center;\n                opacity: 0;\n                transition: opacity 0.6s ease;\n            }\n            .svc-card:hover .card-image { opacity: 0.5; }\n\n            \/* N\u00famero gigante decorativo *\/\n            .card-number {\n                position: absolute;\n                top: -20px;\n                right: 20px;\n                font-family: 'Syne', sans-serif;\n                font-size: 9rem;\n                font-weight: 800;\n                color: rgba(255,255,255,0.03);\n                line-height: 1;\n                pointer-events: none;\n                transition: color 0.4s, transform 0.5s;\n                user-select: none;\n            }\n            .svc-card:hover .card-number {\n                color: rgba(196,30,30,0.06);\n                transform: scale(1.1) rotate(-5deg);\n            }\n\n            \/* Contenido *\/\n            .card-inner {\n                position: relative;\n                z-index: 5;\n                padding: 44px 36px;\n                height: 100%;\n                display: flex;\n                flex-direction: column;\n                min-height: 460px;\n            \n            }\n\n            \/* L\u00ednea superior animada *\/\n            .card-line {\n                position: absolute;\n                top: 0; left: 0;\n                height: 3px;\n                width: 0;\n                background: linear-gradient(90deg, var(--red), var(--red-bright));\n                transition: width 0.5s cubic-bezier(0.23,1,0.32,1);\n            }\n            .svc-card:hover .card-line { width: 100%; }\n\n            \/* \u00cdcono *\/\n            .card-icon-wrap {\n                position: relative;\n                width: 64px;\n                height: 64px;\n                margin-bottom: 36px;\n            }\n            .card-icon-bg {\n                position: absolute;\n                inset: 0;\n                background: rgba(196,30,30,0.1);\n                border-radius: 16px;\n                border: 1px solid rgba(196,30,30,0.2);\n                transition: all 0.4s;\n            }\n            .svc-card:hover .card-icon-bg {\n                background: var(--red);\n                border-color: var(--red);\n                box-shadow: 0 10px 30px rgba(196,30,30,0.4);\n                transform: rotate(8deg) scale(1.1);\n            }\n            .card-icon-wrap i {\n                position: relative;\n                z-index: 1;\n                font-size: 1.6rem;\n                color: var(--red);\n                width: 64px;\n                height: 64px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                transition: color 0.3s, transform 0.4s;\n            \n            }\n            .svc-card:hover .card-icon-wrap i {\n                color: white;\n                transform: scale(1.1);\n                \n            }\n\n            \/* Tag *\/\n            .card-tag {\n                display: inline-block;\n                font-family: 'Syne', sans-serif;\n                font-size: 0.65rem;\n                font-weight: 700;\n                letter-spacing: 0.2em;\n                text-transform: uppercase;\n                color: var(--red);\n                margin-bottom: 14px;\n                opacity: 0.7;\n                transition: opacity 0.3s;\n                \n            }\n            .svc-card:hover .card-tag { opacity: 1; }\n\n            .card-titles {\n                font-family: 'Syne', sans-serif;\n                font-size: 1.5rem;\n                font-weight: 700;\n                line-height: 1.2;\n                margin-bottom: 18px;\n                letter-spacing: -0.02em;\n                color: #6b6b6b;\n            }\n\n            .card-desc {\n               font-size: 1rem;\n    \/* Cambia de #191818 a algo m\u00e1s s\u00f3lido si es necesario, \n       pero lo importante es el contraste con el fondo *\/\n\n       text-align: justify;\n    color: #333; \n    line-height: 1.6;\n    font-weight: 400; \/* Subir de 300 a 400 mejora la lectura *\/\n    flex: 1;\n    transition: color 0.4s;\n            }\n            .svc-card:hover .card-desc { color: #8B1E1E;}\n\n            \/* Separador *\/\n            .card-divider {\n                height: 1px;\n                background: var(--border);\n                margin: 28px 0;\n                transition: background 0.4s;\n            }\n            .svc-card:hover .card-divider { background: rgba(196,30,30,0.3); }\n            \n\n            \/* CTA inferior *\/\n            .card-cta {\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n            }\n            .cta-text {\n                font-family: 'Syne', sans-serif;\n                font-size: 0.78rem;\n                font-weight: 600;\n                letter-spacing: 0.12em;\n                text-transform: uppercase;\n                color: rgba(255,255,255,0.3);\n                transition: color 0.3s;\n            }\n            .svc-card:hover .cta-text { color: var(--red); }\n\n            .cta-arrow {\n                width: 40px;\n                height: 40px;\n                border-radius: 10px;\n                border: 1px solid rgba(255, 255, 255, 0.1);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                color: rgba(255, 255, 255, 0.3);\n                font-size: 0.8rem;\n                transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);\n            }\n            .svc-card:hover .cta-arrow {\n                background: var(--red);\n                border-color: var(--red);\n                color: white;\n                transform: translateX(4px);\n                box-shadow: 0 8px 20px rgba(196,30,30,0.4);\n            }\n\n            \/* \u2500\u2500 DOTS NAVIGATION \u2500\u2500 *\/\n            .nav-dots {\n                display: flex;\n                justify-content: center;\n                gap: 10px;\n                padding: 0 0 60px;\n            }\n            .dot {\n                width: 28px;\n                height: 4px;\n                background: rgb(135, 135, 135);\n                border-radius: 2px;\n                cursor: pointer;\n                transition: all 0.3s;\n            }\n            .dot.active {\n                background: var(--red);\n                width: 52px;\n            }\n            .dot:hover { background: rgba(232, 7, 7, 0.4); }\n\n            \/* \u2500\u2500 COUNTER \u2500\u2500 *\/\n            .service-counter {\n                position: absolute;\n                bottom: 30px;\n                right: 60px;\n                font-family: 'Syne', sans-serif;\n                font-size: 0.7rem;\n                letter-spacing: 0.2em;\n                color: rgba(255,255,255,0.2);\n                z-index: 10;\n            }\n            \/* Neutraliza interferencias del navbar en esta secci\u00f3n *\/\n    .track-section *::after,\n    .track-section *::before {\n        animation: none;  \/* Solo si notas animaciones raras *\/\n    }\n\n    \/* Protege el hero *\/\n    .services-hero * {\n        text-decoration: none;\n    }\n\n            \/* \u2500\u2500 MODAL \u2500\u2500 *\/\n            .modal-overlay {\n                display: none;\n                position: fixed;\n                inset: 0;\n                background-color: #ffffff;\n                backdrop-filter: blur(50px);\n                z-index: 9999;\n                align-items: center;\n                justify-content: center;\n                padding: 20px;\n            }\n            .modal-overlay.open { display: flex; }\n\n            .modal {\n                position: relative;\n                width: 100%;\n                max-width: 1800px;\n                max-height: 95vh;\n                background: var(--surface);\n                border: 1px solid rgba(255,255,255,0.1);\n                border-radius: 28px;\n                overflow: hidden;\n                transform: scale(0.85) translateY(30px);\n                opacity: 0;\n                transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);\n                background-color: #ffffff;\n            }\n            .modal-overlay.open .modal {\n                transform: scale(1) translateY(0);\n                opacity: 1;\n            }\n\n            \/* Franja de color top *\/\n            .modal-stripe {\n                height: 5px;\n                background: linear-gradient(90deg, var(--red-deep), var(--red), var(--red-bright));\n            }\n\n            \/* Imagen header *\/\n            .modal-img {\n                width: 100%;\n                height: 240px;\n                object-fit: cover;\n                display: block;\n                filter: brightness(0.7) saturate(0.8);\n            }\n\n            .modal-img-overlay {\n                position: absolute;\n                top: 5px; left: 0; right: 0;\n                height: 245px;\n                background: linear-gradient(to bottom, rgba(0,0,0,0.1), var(--surface));\n            }\n\n            .modal-close {\n                position: absolute;\n                top: 20px; right: 20px;\n                width: 44px; height: 44px;\n                background: rgba(0,0,0,0.5);\n                border: 1px solid rgba(255,255,255,0.1);\n                border-radius: 12px;\n                color: rgb(0, 0, 0);\n                font-size: 1.1rem;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                transition: all 0.3s;\n                z-index: 10;\n            }\n            .modal-close:hover { background: var(--red); border-color: var(--red); transform: rotate(90deg); }\n\n            .modal-body {\n                padding: 0 44px 36px;\n                overflow-y: auto;\n                max-height: calc(92vh - 250px);\n            }\n            .modal-body::-webkit-scrollbar { width: 4px; }\n            .modal-body::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }\n\n            .modal-header {\n                display: flex;\n                align-items: flex-start;\n                gap: 24px;\n                padding: 32px 0 28px;\n                border-bottom: 1px solid var(--border);\n                margin-bottom: 32px;\n            }\n\n            .modal-icon {\n                width: 72px; height: 72px;\n                background: linear-gradient(135deg, var(--red-deep), var(--red));\n                border-radius: 18px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 1.8rem;\n                color: rgb(255, 255, 255);\n                flex-shrink: 0;\n                box-shadow: 0 15px 35px rgba(196,30,30,0.35);\n            }\n\n            .modal-titles { flex: 1; }\n            .modal-badge {\n                font-family: 'Syne', sans-serif;\n                font-size: 0.65rem;\n                font-weight: 700;\n                letter-spacing: 0.2em;\n                text-transform: uppercase;\n                color: #ffffff;\n                margin-bottom: 8px;\n                display: block;\n            }\n            .modal-title {\n                font-family: 'Syne', sans-serif;\n                font-size: 2.2rem;\n                font-weight: 800;\n                letter-spacing: -0.03em;\n                margin-bottom: 6px;\n                color:#6b6b6b;\n            }\n            .modal-sub {\n                color: #8B0000;\n                font-size: 0.9rem;\n            }\n\n            .modal-desc {\n                font-size: 1rem;\n                line-height: 1.8;\n                color: #6b6b6b;\n                margin-bottom: 36px;\n                font-weight: 300;\n                border-left: 3px solid var(--red);\n                padding-left: 20px;\n            }\n\n            .modal-section-title {\n                font-family: 'Syne', sans-serif;\n                font-size: 0.72rem;\n                font-weight: 700;\n                letter-spacing: 0.2em;\n                text-transform: uppercase;\n                color: #333;\n                margin-bottom: 18px;\n                display: flex;\n                align-items: center;\n                gap: 12px;\n            }\n            .modal-section-title::after {\n                content: '';\n                flex: 1;\n                height: 1px;\n                background: #8B0000;\n            }\n\n            .features-grid {\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                gap: 10px;\n                margin-bottom: 36px;\n            }\n            .feat {\n                display: flex;\n                align-items: flex-start;\n                gap: 12px;\n                padding: 16px 18px;\n                background: rgba(151, 5, 5, 0.03);\n                border: 1px solid var(--border);\n                border-radius: 10px;\n                font-size: 0.87rem;\n                color: rgba(0, 0, 0, 0.6);\n                transition: all 0.3s;\n            }\n            .feat:hover { border-color: #8B1E1E; color: #8B1E1E; }\n            .feat-dot {\n                width: 6px; height: 6px;\n                background: var(--red);\n                border-radius: 50%;\n                flex-shrink: 0;\n                margin-top: 5px;\n            }\n\n            .steps { display: flex; flex-direction: column; gap: 0; margin-bottom: 36px; }\n            .step {\n                display: flex;\n                gap: 20px;\n                align-items: flex-start;\n                padding: 16px 0;\n                border-bottom: 1px solid var(--border);\n            }\n            .step:last-child { border-bottom: none; }\n            .step-num {\n                font-family: 'Syne', sans-serif;\n                font-size: 1.8rem;\n                font-weight: 800;\n                color:#8B1E1E;\n                line-height: 1;\n                width: 40px;\n                flex-shrink: 0;\n                transition: color 0.3s;\n            }\n            .step-icon {\n        width: 36px;\n        height: 36px;\n        flex-shrink: 0;\n        margin-top: 2px;\n    }\n\n    .step-icon svg {\n        width: 100%;\n        height: 100%;\n    }\n            .step:hover .step-num { color: var(--red); }\n            .step-text {\n                font-size: 0.9rem;\n                color: rgba(0, 0, 0, 0.944);\n                line-height: 1.6;\n                padding-top: 4px;\n            }\n            .step:hover .step-text { color:#8B1E1E; }\n\n            .modal-actions {\n                display: flex;\n                gap: 12px;\n                padding-top: 28px;\n                border-top: 1px solid var(--border);\n            }\n            .btn-outline {\n                flex: 1;\n                padding: 14px 24px;\n                background: transparent;\n                border: 1px solid rgba(255,255,255,0.15);\n                border-radius: 10px;\n                color: rgba(255,255,255,0.6);\n                font-family: 'Syne', sans-serif;\n                font-size: 0.82rem;\n                font-weight: 600;\n                letter-spacing: 0.1em;\n                text-transform: uppercase;\n                cursor: pointer;\n                transition: all 0.3s;\n            }\n            .btn-outline:hover { border-color: rgba(255,255,255,0.35); color: white; }\n\n            .btn-red {\n                flex: 2;\n                padding: 14px 24px;\n                background: linear-gradient(135deg, var(--red), var(--red-deep));\n                border: none;\n                border-radius: 10px;\n                color: white;\n                font-family: 'Syne', sans-serif;\n                font-size: 0.82rem;\n                font-weight: 700;\n                letter-spacing: 0.1em;\n                text-transform: uppercase;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                gap: 10px;\n                transition: all 0.3s;\n                box-shadow: 0 8px 25px rgba(196,30,30,0.3);\n                text-decoration: none;\n            }\n            .btn-red:hover {\n                transform: translateY(-2px);\n                box-shadow: 0 12px 35px rgba(196,30,30,0.5);\n            }\n\n            \/* WhatsApp *\/\n            .wa-btn {\n                position: fixed;\n                bottom: 30px; right: 30px;\n                width: 58px; height: 58px;\n                background: linear-gradient(135deg, #25D366, #1aad55);\n                border-radius: 16px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                color: white;\n                font-size: 1.6rem;\n                text-decoration: none;\n                box-shadow: 0 8px 24px rgba(37,211,102,0.35);\n                z-index: 100;\n                transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);\n            }\n            .wa-btn:hover { transform: scale(1.12) translateY(-4px); }\n\n            \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n            @media (max-width: 768px) {\n                .hero-content { padding: 100px 24px 0; }\n                .scroll-hint { padding: 40px 24px 0; }\n                .track-wrapper { padding: 30px 24px 40px; }\n                .svc-card { width: 280px; }\n                .card-inner { min-height: 380px; padding: 32px 28px; }\n                .track-section::before, .track-section::after { width: 40px; }\n                .features-grid { grid-template-columns: 1fr; }\n                .modal-body { padding: 0 24px 28px; }\n                .modal-title { font-size: 1.7rem; }\n                .modal-header { flex-direction: column; gap: 16px; }\n            }\n            \/* Barra de progreso *\/\n    .steps-progress {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 24px;\n    }\n    .progress-bar {\n        flex: 1;\n        height: 4px;\n        background: rgba(139,30,30,0.15);\n        border-radius: 2px;\n        overflow: hidden;\n    }\n    .progress-fill {\n        height: 100%;\n        width: 0%;\n        background: linear-gradient(90deg, #8B1E1E, #c0392b);\n        border-radius: 2px;\n        transition: width 0.5s cubic-bezier(0.23,1,0.32,1);\n    }\n    .progress-label {\n        font-family: 'Syne', sans-serif;\n        font-size: 0.7rem;\n        font-weight: 700;\n        letter-spacing: 0.1em;\n        color: #8B1E1E;\n        white-space: nowrap;\n    }\n\n    \/* Paso individual *\/\n    .step {\n        cursor: pointer;\n        transition: all 0.3s ease;\n    }\n    .step:hover {\n        background: rgba(139,30,30,0.03);\n        border-radius: 10px;\n        padding-left: 8px;\n    }\n\n    \/* Burbuja del n\u00famero *\/\n    .step-bubble {\n        width: 38px;\n        height: 38px;\n        border-radius: 50%;\n        border: 2px solid #8B1E1E;\n        background: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);\n        position: relative;\n    }\n    .step-num-label {\n        font-family: 'Syne', sans-serif;\n        font-size: 0.85rem;\n        font-weight: 700;\n        color: #8B1E1E;\n        transition: opacity 0.2s;\n        position: absolute;\n    }\n    .step-check {\n        width: 18px;\n        height: 18px;\n        opacity: 0;\n        transform: scale(0);\n        transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);\n        position: absolute;\n    }\n\n    \/* Estado completado *\/\n    .step.done .step-bubble {\n        background: #8B1E1E;\n        border-color: #8B1E1E;\n        transform: scale(1.1);\n        box-shadow: 0 6px 20px rgba(139,30,30,0.35);\n    }\n    .step.done .step-num-label {\n        opacity: 0;\n    }\n    .step.done .step-check {\n        opacity: 1;\n        transform: scale(1);\n    }\n    .step.done .step-text {\n        color: #8B1E1E;\n        text-decoration: line-through;\n        opacity: 0.6;\n    }\n    @media (max-width: 768px) {\n        .hero-content {\n            padding: 80px 24px 0; \/* Reducimos el padding superior en m\u00f3viles [cite: 417] *\/\n            text-align: center; \/* Centramos el contenido para mejor balance visual *\/\n        }\n\n        .hero-eyebrow {\n            justify-content: center; \/* Centramos el \"eyebrow\" [cite: 297] *\/\n            font-size: 0.9rem;\n        }\n\n        .title-small {\n            font-size: 1.2rem; \/* M\u00e1s peque\u00f1o en tel\u00e9fonos [cite: 303] *\/\n        }\n\n        .title-large {\n            font-size: 2.5rem; \/* Ajuste para evitar desbordamiento [cite: 304] *\/\n            line-height: 1.1;\n        }\n\n        .hero-desc {\n            margin: 0 auto; \/* Centramos la descripci\u00f3n [cite: 308] *\/\n            font-size: 1.1rem;\n        }\n    }\n    @media (max-width: 768px) {\n        .modal {\n            max-height: 90vh; \/* Un poco m\u00e1s bajo para dejar ver el fondo [cite: 383] *\/\n            border-radius: 20px;\n        }\n\n        .modal-header {\n            flex-direction: column; \/* Icono arriba, texto abajo [cite: 420] *\/\n            align-items: center;\n            text-align: center;\n            gap: 15px;\n        }\n\n        .features-grid {\n            grid-template-columns: 1fr; \/* Una sola columna en m\u00f3vil [cite: 419] *\/\n            gap: 8px;\n        }\n\n        .modal-title {\n            font-size: 1.6rem; \/* T\u00edtulo del modal m\u00e1s legible [cite: 420] *\/\n        }\n    }\n    @media (max-width: 768px) {\n        \/* Ajuste del Hero para m\u00f3viles *\/\n        .hero-content {\n            padding: 60px 20px 0;\n            text-align: left;\n        }\n\n        .title-slogan {\n            font-size: 3rem; \/* Tama\u00f1o manejable para evitar scroll horizontal *\/\n            line-height: 1;\n        }\n\n        \/* EL TRACK: Lo m\u00e1s importante *\/\n        .track-wrapper {\n            padding: 20px 15px 40px; \/* Menos espacio lateral *\/\n            scroll-snap-type: x mandatory; \/* Hace que las cards \"salten\" al centro *\/\n        }\n\n        .svc-card {\n            width: 85vw; \/* Casi todo el ancho de la pantalla *\/\n            margin-right: 15px;\n            scroll-snap-align: center;\n            border-radius: 20px !important; \/* Quitamos el estilo puzzle plano *\/\n        }\n\n        \/* Desactivamos los conectores en m\u00f3vil para evitar ruido visual *\/\n        .svc-card::after, .svc-card:not(:first-child)::before {\n            display: none;\n        }\n\n        .card-inner {\n            min-height: auto;\n            padding: 30px 20px;\n        }\n\n        .card-number {\n            font-size: 6rem;\n            top: -10px;\n            right: 10px;\n        }\n\n        \/* Botones de navegaci\u00f3n: los hacemos m\u00e1s peque\u00f1os o los ocultamos *\/\n        .scroll-btn {\n            display: none; \/* En m\u00f3vil el usuario prefiere usar el dedo (touch) *\/\n        }\n\n        \/* Modal responsivo *\/\n        .modal {\n            width: 95%;\n            max-height: 85vh;\n        }\n        \n        .features-grid {\n            grid-template-columns: 1fr;\n        }\n    }\n    \/* Animaci\u00f3n de entrada: sube y aparece *\/\n@keyframes revealUp {\n    0% {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    100% {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\/* Aplicar la animaci\u00f3n a los elementos del Hero *\/\n.hero-title .title-small,\n.hero-title .title-slogan,\n.hero-title .title-sub {\n    opacity: 0; \/* Estado inicial invisible *\/\n    animation: revealUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n}\n\n\/* Retrasos escalonados para un efecto de cascada *\/\n.hero-title .title-small { animation-delay: 0.3s; }\n.hero-title .title-slogan { animation-delay: 0.5s; }\n.hero-title .title-sub { animation-delay: 0.7s; }\n\/* Forzamos el reset para que WP no meta mano *\/\n#mi-hero-forense * {\n    box-sizing: border-box !important;\n    text-transform: none; \/* Por si el tema lo pone todo en may\u00fasculas *\/\n    text-decoration: none !important;\n}\n\n\/* Animaci\u00f3n y posici\u00f3n del t\u00edtulo *\/\n#mi-hero-forense .title-slogan {\n    display: block !important;\n    font-family: 'Syne', sans-serif !important; \/* Forzamos tu fuente *\/\n    line-height: 0.95 !important;\n    margin: 0 0 25px 0 !important;\n    padding-left: 40px !important;\n    opacity: 0;\n    animation: revealUp 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s forwards !important;\n}\n\n\/* Arreglo para la l\u00ednea roja vertical *\/\n#mi-hero-forense .title-slogan::before {\n    content: '' !important;\n    position: absolute !important;\n    left: 0 !important;\n    top: 10% !important;\n    width: 6px !important;\n    height: 80% !important;\n    background: #8B1E1E !important;\n    transition: all 0.4s ease !important;\n}\n\n\/* Animaci\u00f3n global que definimos antes *\/\n@keyframes revealUp {\n    0% { opacity: 0; transform: translateY(30px); }\n    100% { opacity: 1; transform: translateY(0); }\n}\n        <\/style>\n    <\/head>\n    <body>\n\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    <section class=\"services-hero\" id=\"servicios\">\n        <div class=\"hero-bg\" id=\"heroBg\"><\/div>\n        <div class=\"hero-overlay\"><\/div>\n        \n        <div class=\"hero-content\">\n        <div class=\"text-right-container\">\n            <p class=\"hero-eyebrow\"><\/p>\n            <h1 class=\"hero-title\">\n                <span class=\"title-small\"><\/span>\n                \n                <span class=\"title-slogan\">\n                    Porque cada bit <br>\n                    es <span class=\"slogan-outline\">importante<\/span> para ti\n                <\/span>\n\n                <span class=\"title-sub\">Inform\u00e1tica Forense<\/span>\n            <\/h1>\n        <\/div>\n    <\/div>\n    <\/section>\n\n    \n\n        <div class=\"service-counter\" id=\"counter\">01 \/ 06<\/div>\n    <\/section>\n\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TRACK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    <section class=\"track-section\">\n    <button class=\"scroll-btn scroll-btn-left\" id=\"btnLeft\" aria-label=\"Anterior\"><\/button>\n    <button class=\"scroll-btn scroll-btn-right\" id=\"btnRight\" aria-label=\"Siguiente\"><\/button>\n        <div class=\"track-wrapper\" id=\"trackWrapper\">\n            <div class=\"track\" id=\"track\">\n\n                <!-- 1 -->\n                <div class=\"svc-card\" data-service=\"1\">\n                    \n                    <div class=\"card-image\" style=\"background-image:url('https:\/\/frevidence.com\/wp-content\/uploads\/2026\/04\/DSC_0282-2-scaled.jpg')\"><\/div>\n                    <div class=\"card-number\">01<\/div>\n                    <div class=\"card-line\"><\/div>\n                    <div class=\"card-inner\">\n                        <div class=\"card-icon-wrap\">\n                            <div class=\"card-icon-bg\"><\/div>\n                            <i class=\"fas fa-search\"><\/i>\n                        <\/div>\n                        <span class=\"card-tag\">Forense \/ Legal<\/span>\n                        <h3 class=\"card-titles\">Auditor\u00eda Forense<\/h3>\n                        <p class=\"card-desc\">Auditor\u00eda de dispositivos con metodolog\u00edas globales para la detecci\u00f3n de fraudes, conflictos de inter\u00e9s o competencia desleal en entornos digitales.<\/p>\n                        <div class=\"card-divider\"><\/div>\n                        <div class=\"card-cta\">\n                            <span class=\"cta-text\">Ver detalle<\/span>\n                            <div class=\"cta-arrow\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 2 -->\n                <div class=\"svc-card\" data-service=\"2\">\n                    <div class=\"card-image\" style=\"background-image:url('https:\/\/frevidence.com\/wp-content\/uploads\/2026\/04\/20240719_115643-scaled.jpg')\"><\/div>\n                    <div class=\"card-number\">02<\/div>\n                    <div class=\"card-line\"><\/div>\n                    <div class=\"card-inner\">\n                        <div class=\"card-icon-wrap\">\n                            <div class=\"card-icon-bg\"><\/div>\n                            <i class=\"fas fa-file-contract\"><\/i>\n                        <\/div>\n                        <span class=\"card-tag\">Judicial \/ Pericial<\/span>\n                        <h3 class=\"card-titles\">Dictamen Pericial<\/h3>\n                        <p class=\"card-desc\">Peritajes con las formalidades necesarias para ser presentados ante una instancia legal, incluyendo protocolos de cadena de custodia.  <\/p>\n                        <div class=\"card-divider\"><\/div>\n                        <div class=\"card-cta\">\n                            <span class=\"cta-text\">Ver detalle<\/span>\n                            <div class=\"cta-arrow\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 3 -->\n                <div class=\"svc-card\" data-service=\"3\">\n                    <div class=\"card-image\" style=\"background-image:url('https:\/\/frevidence.com\/wp-content\/uploads\/2026\/04\/20240719_120508-scaled.jpg')\"><\/div>\n                    <div class=\"card-number\">3<\/div>\n                    <div class=\"card-line\"><\/div>\n                    <div class=\"card-inner\">\n                        <div class=\"card-icon-wrap\">\n                            <div class=\"card-icon-bg\"><\/div>\n                            <i class=\"fas fa-hdd\"><\/i>\n                        <\/div>\n                        <span class=\"card-tag\">Datos \/ Recuperaci\u00f3n<\/span>\n                        <h3 class=\"card-titles\">Recuperaci\u00f3n de Datos<\/h3>\n                        <p class=\"card-desc\">Restauraci\u00f3n de informaci\u00f3n en dispositivos da\u00f1ados con cuarto limpio.<\/p>\n                        <div class=\"card-divider\"><\/div>\n                        <div class=\"card-cta\">\n                            <span class=\"cta-text\">Ver detalle<\/span>\n                            <div class=\"cta-arrow\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 4 -->\n                <div class=\"svc-card\" data-service=\"4\">\n                    <div class=\"card-image\" style=\"background-image:url('https:\/\/frevidence.com\/wp-content\/uploads\/2026\/04\/DSC_0282-1-scaled.jpg')\"><\/div>\n                    <div class=\"card-number\">4<\/div>\n                    <div class=\"card-line\"><\/div>\n                    <div class=\"card-inner\">\n                        <div class=\"card-icon-wrap\">\n                            <div class=\"card-icon-bg\"><\/div>\n                            <i class=\"fas fa-laptop\"><\/i>\n                        <\/div>\n                        <span class=\"card-tag\">An\u00e1lisis \/ Digital<\/span>\n                        <h3 class=\"card-titles\">C\u00f3mputo Forense<\/h3>\n                        <p class=\"card-desc\">Recuperamos evidencia eliminada de una amplia gama de dispositivos, entre los que se incluyen computadoras, servidores y dispositivos m\u00f3viles, entre otros. <\/p>\n                        <div class=\"card-divider\"><\/div>\n                        <div class=\"card-cta\">\n                            <span class=\"cta-text\">Ver detalle<\/span>\n                            <div class=\"cta-arrow\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 5 -->\n                <div class=\"svc-card\" data-service=\"5\">\n                    <div class=\"card-image\" style=\"background-image:url('https:\/\/frevidence.com\/wp-content\/uploads\/2026\/04\/20240719_124909-scaled.jpg')\"><\/div>\n                    <div class=\"card-number\">05<\/div>\n                    <div class=\"card-line\"><\/div>\n                    <div class=\"card-inner\">\n                        <div class=\"card-icon-wrap\">\n                            <div class=\"card-icon-bg\"><\/div>\n                            <i class=\"fas fa-broadcast-tower\"><\/i>\n                        <\/div>\n                        <span class=\"card-tag\">Seguridad \/ TSCM<\/span>\n                        <h3 class=\"card-titles\">Barridos Electr\u00f3nicos<\/h3>\n                        <p class=\"card-desc\">A trav\u00e9s de barridos electr\u00f3nicos, detectamos fuga de informaci\u00f3n en sitios importantes para ti, tales como oficinas, salas de juntas, entre otros.<\/p>\n                        <div class=\"card-divider\"><\/div>\n                        <div class=\"card-cta\">\n                            <span class=\"cta-text\">Ver detalle<\/span>\n                            <div class=\"cta-arrow\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 6 -->\n                <div class=\"svc-card\" data-service=\"6\">\n                    <div class=\"card-image\" style=\"background-image:url('https:\/\/frevidence.com\/wp-content\/uploads\/2026\/04\/DSC_0367-scaled.jpg')\"><\/div>\n                    <div class=\"card-number\">06<\/div>\n                    <div class=\"card-line\"><\/div>\n                    <div class=\"card-inner\">\n                        <div class=\"card-icon-wrap\">\n                            <div class=\"card-icon-bg\"><\/div>\n                            <i class=\"fas fa-building\"><\/i>\n                        <\/div>\n                        <span class=\"card-tag\">Corporativo \/ Lab<\/span>\n                        <h3 class=\"card-titles\">Capacitaci\u00f3n Forense<\/h3>\n                        <p class=\"card-desc\">Implementaci\u00f3n de \u00e1reas forenses internas, capacitaci\u00f3n especializada y desarrollo de protocolos seg\u00fan est\u00e1ndares internacionales.<\/p>\n                        <div class=\"card-divider\"><\/div>\n                        <div class=\"card-cta\">\n                            <span class=\"cta-text\">Ver detalle<\/span>\n                            <div class=\"cta-arrow\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n\n        <div class=\"nav-dots\" id=\"navDots\">\n            <div class=\"dot active\" data-i=\"0\"><\/div>\n            <div class=\"dot\" data-i=\"1\"><\/div>\n            <div class=\"dot\" data-i=\"2\"><\/div>\n            <div class=\"dot\" data-i=\"3\"><\/div>\n            <div class=\"dot\" data-i=\"4\"><\/div>\n            <div class=\"dot\" data-i=\"5\"><\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 MODAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    <div class=\"modal-overlay\" id=\"modalOverlay\">\n        <div class=\"modal\" id=\"modal\">\n            <div class=\"modal-stripe\"><\/div>\n            <img decoding=\"async\" id=\"mImg\" class=\"modal-img\" src=\"\" alt=\"\">\n            <div class=\"modal-img-overlay\"><\/div>\n            <button class=\"modal-close\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i><\/button>\n\n            <div class=\"modal-body\">\n                <div class=\"modal-header\">\n                    <div class=\"modal-icon\" id=\"mIcon\"><i class=\"fas fa-search\"><\/i><\/div>\n                    <div class=\"modal-titles\">\n                        <span class=\"modal-badge\" id=\"mBadge\">Servicio 01<\/span>\n                        <h2 class=\"modal-title\" id=\"mTitle\">\u2014<\/h2>\n                        <p class=\"modal-sub\" id=\"mSub\">\u2014<\/p>\n                    <\/div>\n                <\/div>\n\n                <p class=\"modal-desc\" id=\"mDesc\">\u2014<\/p>\n\n                <p class=\"modal-section-title\">Caracter\u00edsticas<\/p>\n                <div class=\"features-grid\" id=\"mFeatures\"><\/div>\n\n                <p class=\"modal-section-title\">Proceso<\/p>\n                <div class=\"steps\" id=\"mSteps\"><\/div>\n\n                <div class=\"modal-actions\">\n                    <button class=\"btn-outline\" onclick=\"closeModal()\">\u2190 Volver<\/button>\n                    <a href=\"https:\/\/wa.me\/525512345678\" target=\"_blank\" class=\"btn-red\">\n                        <i class=\"fab fa-whatsapp\"><\/i> Contactar ahora\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- WhatsApp -->\n\n\n    <script>\n        const SCROLL_STEP = 360;\n    document.getElementById('btnLeft').addEventListener('click', () => {\n        wrapper.scrollBy({ left: -SCROLL_STEP, behavior: 'smooth' });\n    });\n    document.getElementById('btnRight').addEventListener('click', () => {\n        wrapper.scrollBy({ left: SCROLL_STEP, behavior: 'smooth' });\n    });\n    const DATA = {\n        1:{title:'Auditor\u00eda Forense',sub:'Investigaci\u00f3n Digital Profesional',icon:'fas fa-search',\n        image:'https:\/\/frevidence.com\/wp-content\/uploads\/2026\/02\/IMG_2001-scaled.jpg',\n        desc:'Realizamos auditor\u00edas forenses exhaustivas utilizando metodolog\u00edas internacionales certificadas. Nuestro equipo analiza sistemas inform\u00e1ticos, redes y dispositivos para descubrir evidencia digital crucial en investigaciones legales, corporativas y de seguridad.',\n        features:['An\u00e1lisis forense de sistemas Windows, Linux y macOS','Investigaci\u00f3n de intrusiones y brechas de seguridad','An\u00e1lisis de logs y registros del sistema','Identificaci\u00f3n de actividades maliciosas','Informes detallados con validez legal'],\n        process:['Recopilaci\u00f3n de evidencia preservando la cadena de custodia','An\u00e1lisis forense con herramientas especializadas certificadas','Identificaci\u00f3n y documentaci\u00f3n de hallazgos relevantes','Elaboraci\u00f3n de informe t\u00e9cnico-legal detallado','Presentaci\u00f3n de resultados y asesor\u00eda continua']},\n        2:{title:'Dictamen Pericial',sub:'Documentos con Validez Legal',icon:'fas fa-file-contract',\n        image:'https:\/\/images.unsplash.com\/photo-1589829545856-d10d557cf95f?w=900',\n        desc:'Elaboramos dict\u00e1menes periciales en inform\u00e1tica forense con plena validez legal para presentarse ante tribunales y autoridades competentes. Nuestros peritos est\u00e1n certificados y cuentan con amplia experiencia en procedimientos judiciales.',\n        features:['Validez ante autoridades judiciales','Peritos certificados con experiencia comprobada','An\u00e1lisis t\u00e9cnico-legal exhaustivo','Documentaci\u00f3n conforme a normativas vigentes','Soporte durante el proceso judicial'],\n        process:['Entrevista inicial y definici\u00f3n del alcance','An\u00e1lisis t\u00e9cnico de la evidencia digital','Redacci\u00f3n del dictamen conforme a derecho','Revisi\u00f3n por equipo multidisciplinario','Entrega y explicaci\u00f3n al cliente']},\n        3:{title:'Recuperaci\u00f3n de Datos',sub:'Rescate de Informaci\u00f3n Cr\u00edtica',icon:'fas fa-hdd',\n        image:'https:\/\/images.unsplash.com\/photo-1544197150-b99a580bb7a8?w=900',\n        desc:'Recuperamos datos de discos duros, SSD, memorias USB, tarjetas SD y otros dispositivos de almacenamiento, incluso en casos de da\u00f1o f\u00edsico severo, formateo accidental o cifrado, en ambiente controlado de sala limpia.',\n        features:['Recuperaci\u00f3n de dispositivos f\u00edsicamente da\u00f1ados','Recuperaci\u00f3n de archivos eliminados','Sala limpia ISO clase 5','Recuperaci\u00f3n de datos cifrados','Confidencialidad absoluta garantizada'],\n        process:['Evaluaci\u00f3n diagn\u00f3stica sin costo','Cotizaci\u00f3n detallada y aprobaci\u00f3n','Proceso de recuperaci\u00f3n en laboratorio','Verificaci\u00f3n de integridad de datos','Entrega en medio seguro']},\n        4:{title:'C\u00f3mputo Forense',sub:'An\u00e1lisis Especializado de Equipos',icon:'fas fa-laptop',\n        image:'https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?w=900',\n        desc:'An\u00e1lisis forense profundo de computadoras, laptops, servidores y dispositivos m\u00f3viles. Recuperamos evidencia digital eliminada, analizamos historial de actividades, comunicaciones y accesos con metodolog\u00eda que preserva la integridad de la evidencia.',\n        features:['An\u00e1lisis de discos duros y SSD','Recuperaci\u00f3n de archivos eliminados','An\u00e1lisis de RAM y archivos temporales','Investigaci\u00f3n de navegaci\u00f3n y correos','Documentaci\u00f3n completa de hallazgos'],\n        process:['Preservaci\u00f3n mediante imagen forense','An\u00e1lisis de sistema operativo y aplicaciones','B\u00fasqueda de archivos ocultos o eliminados','An\u00e1lisis de metadatos y l\u00edneas temporales','Generaci\u00f3n de informe t\u00e9cnico detallado']},\n        5:{title:'Barridos Electr\u00f3nicos',sub:'Detecci\u00f3n de Espionaje',icon:'fas fa-broadcast-tower',\n        image:'https:\/\/images.unsplash.com\/photo-1558494949-ef010cbdcc31?w=900',\n        desc:'Realizamos barridos electr\u00f3nicos especializados para detectar dispositivos de escucha, c\u00e1maras ocultas e interceptores telef\u00f3nicos. Protegemos la confidencialidad de sus comunicaciones con tecnolog\u00eda de detecci\u00f3n de \u00faltima generaci\u00f3n.',\n        features:['Detecci\u00f3n de dispositivos de escucha y grabaci\u00f3n','Identificaci\u00f3n de c\u00e1maras ocultas','An\u00e1lisis de espectro radioel\u00e9ctrico','Barrido de l\u00edneas telef\u00f3nicas','Informe de vulnerabilidades y recomendaciones'],\n        process:['Evaluaci\u00f3n preliminar del \u00e1rea','Barrido con equipos especializados','An\u00e1lisis de frecuencias sospechosas','Identificaci\u00f3n y neutralizaci\u00f3n de amenazas','Entrega de informe y medidas preventivas']},\n        6:{title:'Laboratorio Corporativo',sub:'Capacidades Forenses Internas',icon:'fas fa-building',\n        image:'https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?w=900',\n        desc:'Ayudamos a organizaciones a establecer sus propios laboratorios de inform\u00e1tica forense internos: dise\u00f1o de infraestructura, adquisici\u00f3n de herramientas, capacitaci\u00f3n de personal y desarrollo de protocolos seg\u00fan est\u00e1ndares internacionales.',\n        features:['Dise\u00f1o personalizado de laboratorio forense','Selecci\u00f3n de hardware y software especializado','Capacitaci\u00f3n certificada del personal','Desarrollo de procedimientos y pol\u00edticas','Soporte t\u00e9cnico continuo'],\n        process:['An\u00e1lisis de necesidades organizacionales','Dise\u00f1o y selecci\u00f3n de equipamiento','Implementaci\u00f3n de infraestructura','Capacitaci\u00f3n intensiva del equipo','Certificaci\u00f3n y seguimiento de operaciones']}\n    };\n\n    \/\/ \u2500\u2500 Modal \u2500\u2500\n    function openModal(id){\n        const d = DATA[id];\n        document.getElementById('mBadge').textContent = `Servicio 0${id}`;\n        document.getElementById('mTitle').textContent = d.title;\n        document.getElementById('mSub').textContent = d.sub;\n        document.getElementById('mIcon').innerHTML = `<i class=\"${d.icon}\"><\/i>`;\n        document.getElementById('mImg').src = d.image;\n        document.getElementById('mDesc').textContent = d.desc;\n\n        const fg = document.getElementById('mFeatures');\n        fg.innerHTML = d.features.map(f=>`<div class=\"feat\"><div class=\"feat-dot\"><\/div><span>${f}<\/span><\/div>`).join('');\n\n        const ss = document.getElementById('mSteps');\n    ss.innerHTML = `\n        <div class=\"steps-progress\">\n            <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\n            <span class=\"progress-label\" id=\"progressLabel\">0 \/ ${d.process.length} completados<\/span>\n        <\/div>\n        ${d.process.map((s,i)=>`\n            <div class=\"step\" data-step=\"${i}\" onclick=\"toggleStep(this)\">\n                <div class=\"step-bubble\">\n                    <span class=\"step-num-label\">${i+1}<\/span>\n                    <svg class=\"step-check\" viewBox=\"0 0 24 24\" fill=\"none\">\n                        <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"step-text\">${s}<\/div>\n            <\/div>`).join('')}`;\n            function toggleStep(el) {\n        el.classList.toggle('done');\n        const steps = el.closest('.steps').querySelectorAll('.step');\n        const done = el.closest('.steps').querySelectorAll('.step.done').length;\n        const total = steps.length;\n        const fill = document.getElementById('progressFill');\n        const label = document.getElementById('progressLabel');\n        if(fill) fill.style.width = `${(done\/total)*100}%`;\n        if(label) label.textContent = `${done} \/ ${total} completados`;\n    }\n\n        const ov = document.getElementById('modalOverlay');\n        ov.classList.add('open');\n        document.body.style.overflow = 'hidden';\n    }\n    function closeModal(){\n        document.getElementById('modalOverlay').classList.remove('open');\n        document.body.style.overflow = '';\n    }\n    document.getElementById('modalOverlay').addEventListener('click', e=>{ if(e.target===e.currentTarget) closeModal(); });\n    document.addEventListener('keydown', e=>{ if(e.key==='Escape') closeModal(); });\n\n    \/\/ \u2500\u2500 Cards click \u2500\u2500\n    document.querySelectorAll('.svc-card').forEach(card=>{\n        card.addEventListener('click', ()=>openModal(+card.dataset.service));\n    });\n\n    \/\/ \u2500\u2500 Scroll drag \u2500\u2500\n    const wrapper = document.getElementById('trackWrapper');\n    let isDown=false, startX, scrollLeft;\n    wrapper.addEventListener('mousedown', e=>{ isDown=true; wrapper.style.cursor='grabbing'; startX=e.pageX-wrapper.offsetLeft; scrollLeft=wrapper.scrollLeft; });\n    wrapper.addEventListener('mouseleave',()=>{ isDown=false; wrapper.style.cursor='grab'; });\n    wrapper.addEventListener('mouseup',()=>{ isDown=false; wrapper.style.cursor='grab'; });\n    wrapper.addEventListener('mousemove', e=>{ if(!isDown) return; e.preventDefault(); const x=e.pageX-wrapper.offsetLeft; wrapper.scrollLeft=scrollLeft-(x-startX)*1.5; });\n\n    \/\/ \u2500\u2500 Dots \u2500\u2500\n    const dots = document.querySelectorAll('.dot');\n    const counter = document.getElementById('counter');\n    const cards = document.querySelectorAll('.svc-card');\n    const cardW = 340;\n\n    dots.forEach(dot=>{\n        dot.addEventListener('click', ()=>{\n            const i = +dot.dataset.i;\n            wrapper.scrollTo({ left: i*cardW, behavior:'smooth' });\n        });\n    });\n\n    wrapper.addEventListener('scroll', ()=>{\n        const i = Math.round(wrapper.scrollLeft \/ cardW);\n        dots.forEach((d,idx)=>d.classList.toggle('active', idx===i));\n        counter.textContent = `0${i+1} \/ 06`;\n    });\n\n    \/\/ \u2500\u2500 Animate cards in \u2500\u2500\n    const observer = new IntersectionObserver(entries=>{\n        entries.forEach(en=>{ if(en.isIntersecting) en.target.classList.add('animated'); });\n    },{threshold:0.2});\n    cards.forEach((c,i)=>{ c.style.animationDelay=`${i*0.1}s`; observer.observe(c); });\n\n    \/\/ \u2500\u2500 Hero parallax bg \u2500\u2500\n    window.addEventListener('load',()=>{ document.getElementById('heroBg').classList.add('loaded'); });\n    <\/script>\n    <\/body>\n    <\/html>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Footer FRevidence<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"> \n\n<style>\n    \n\/* Forzar al header a ignorar el contenedor de WordPress *\/\n.navbar {\n    position: fixed; \n    top: 0;\n    left: 0;\n    width: 100vw !important; \/* Ocupa el 100% del ancho de la ventana *\/\n    z-index: 99999;\n}\n\n\/* Forzar al footer a ignorar el contenedor *\/\nfooter {\n    width: 100vw !important;\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw !important;\n    margin-right: -50vw !important;\n}\n\n    :root {\n        --primary-red: #B91C1C;\n        --dark-red: #7F1D1D;\n        --gray-900: #111827;\n        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n    }\n    \n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n    \n    body {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n        line-height: 1.6;\n    }\n    \n    .container {\n        width: 100%;\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 0 20px;\n    }\n\n    \/* FOOTER *\/\n   footer {\n    background-color: #ffffff00;\n    color: rgb(0, 0, 0);\n    padding: 70px 0 30px;\n    position: relative; \/* Necesario para los hex\u00e1gonos *\/\n    overflow: hidden;   \/* Evita scroll horizontal por animaciones *\/\n    z-index: 1;\n}\n    \n    .footer-container {\n        display: grid;\n        grid-template-columns: 1.5fr 1fr 1fr 1fr;\n        gap: 40px;\n        margin-bottom: 40px;\n        margin: 0 !important\n    }\n    \n    \/* LOGO IMAGE CONTAINER *\/\n    .footer-logo .logo-image {\n        margin-bottom: 20px;\n        max-width: 200px;\n        background-color: rgb(110, 0, 0);\n        padding: 15px 20px;\n        border-radius: 8px;\n        display: inline-block;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .footer-logo .logo-image img {\n        width: 100%;\n        height: auto;\n        display: block;\n    }\nfooter::before {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; right: 0; bottom: 0;\n    \/* SVG con los colores exactos de la referencia *\/\n    background-image: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cdefs%3E%3Cpattern id='hexagon' x='0' y='0' width='56' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23CBD5E1' stroke-width='0.5' opacity='0.2'\/%3E%3Cpath d='M28 0L56 16L56 50L28 66L0 50L0 16L28 0' fill='none' stroke='%23B91C1C' stroke-width='0.8' opacity='0.2'\/%3E%3C\/pattern%3E%3C\/defs%3E%3Crect width='100' height='100' fill='url(%23hexagon)'\/%3E%3C\/svg%3E\");\n    opacity: 0.9;\n    z-index: -1;\n    pointer-events: none;\n    transform: translate(calc(var(--mouse-x, 0) * 0.5), calc(var(--mouse-y, 0) * 0.5));\n    transition: transform 0.2s ease-out;\n    animation: footerPulse 4s ease-in-out infinite;\n}\n\n@keyframes footerPulse {\n    0%, 100% { opacity: 0.4; }\n    50% { opacity: 0.7; }\n}\n    \/* Mantener estilos de texto por si no hay imagen *\/\n    .footer-logo .logo-text {\n        color: rgb(0, 0, 0);\n        margin-bottom: 20px;\n        font-size: 1.75rem;\n        font-weight: 800;\n    }\n\n    .footer-logo .logo-text span {\n        color: var(--primary-red);\n    }\n    \n    .footer-logo p {\n        opacity: 0.8;\n        line-height: 1.6;\n    }\n    \n    .footer-column h3 {\n        color: rgb(0, 0, 0);\n        margin-bottom: 10px;\n        font-size: 1rem;\n\n    }\n    \n    .footer-column ul {\n        list-style: none;\n    }\n    \n    .footer-column li {\n        margin-bottom: 12px;\n    }\n    \n    .footer-column a {\n        color: rgba(0, 0, 0, 0.7);\n        text-decoration: none;\n        transition: var(--transition);\n    }\n    \n    .footer-column a:hover {\n        color: rgb(0, 0, 0);\n        padding-left: 5px;\n    }\n    \n    .footer-bottom {\n        text-align: center;\n        padding-top: 1px;\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n        color: rgba(0, 0, 0, 0.8);\n    }\n\n    .footer-bottom a {\n        color: rgba(0, 0, 0, 0.6);\n        text-decoration: none;\n    }\n\n    .footer-bottom a:hover {\n        color: rgba(0, 0, 0, 0.9);\n    }\n    \n    \/* WHATSAPP FLOAT BUTTON *\/\n    .whatsapp-float {\n        position: fixed;\n        bottom: 30px;\n        right: 30px;\n        width: 60px;\n        height: 60px;\n        background-color: #25D366;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        font-size: 2rem;\n        box-shadow: var(--shadow-xl);\n        z-index: 999;\n        transition: var(--transition);\n        text-decoration: none;\n    }\n    \n    .whatsapp-float:hover {\n        transform: scale(1.1);\n    }\n    \n    \/* RESPONSIVE *\/\n    @media (max-width: 992px) {\n        .footer-container {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n    \n    @media (max-width: 768px) {\n        .footer-container {\n            grid-template-columns: 1fr;\n            margin: 0 !important;\n        }\n        .container {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;  \/* \u2190 Esto lo centra *\/\n}\n.footer-container {    padding: 0 20px;\n\n    margin: 0 !important;  \/* \u2190 ESTO centra eliminando m\u00e1rgenes de WordPress *\/\n}\nfooter {\n    margin: 0 !important;  \/* \u2190 Elimina m\u00e1rgenes heredados de WordPress *\/\n}\n    }\n    \/* --- OPTIMIZACI\u00d3N PARA M\u00d3VIL (FRevidence) --- *\/\n\n@media (max-width: 768px) {\n    \/* Evita que el footer se desborde lateralmente *\/\n    footer {\n        width: 100% !important;\n        left: 0 !important;\n        right: 0 !important;\n        margin: 0 !important;\n        padding: 40px 20px 20px !important;\n    }\n\n    \/* Cambia de 4 columnas a 1 sola para que quepa todo *\/\n    .footer-container {\n        display: flex !important;\n        flex-direction: column !important;\n        gap: 35px !important;\n        text-align: center !important; \/* Centra el texto para que se vea pro *\/\n        padding: 0 !important;\n    }\n\n    \/* Centra el logo o el texto de la marca *\/\n    .footer-logo, .footer-column {\n        width: 100% !important;\n    }\n\n    \/* Ajusta los iconos de contacto para que no se vean amontonados *\/\n    .footer-column ul li a {\n        display: block;\n        padding: 5px 0;\n    }\n\n    \/* Ajusta el texto legal del fondo *\/\n    .footer-bottom {\n        font-size: 13px !important;\n        line-height: 1.6;\n        padding-top: 20px !important;\n    }\n\n    \/* Mueve el bot\u00f3n de WhatsApp para que no estorbe *\/\n    .whatsapp-float {\n        width: 50px !important;\n        height: 50px !important;\n        bottom: 20px !important;\n        right: 20px !important;\n        font-size: 1.5rem !important;\n    }\n}\n\n\/* Fix global para evitar el scroll horizontal blanco en m\u00f3viles *\/\nhtml, body {\n    overflow-x: hidden !important;\n    position: relative;\n}\n<\/style>\n<\/head>\n<body>\n    <!-- Footer -->\n    <footer>\n        <div class=\"container\">\n            <div class=\"footer-container\">\n                <div class=\"footer-logo\">\n                    <!-- ESPACIO PARA IMAGEN DEL LOGO -->\n                    \n                    <!-- Texto alternativo si no hay imagen -->\n                    <!-- <div class=\"logo-text\">FR<span>evidence<\/span><\/div> -->\n                    \n                    <p>L\u00edderes en inform\u00e1tica forense y recuperaci\u00f3n de datos con validez legal. Combinamos expertise tecnol\u00f3gico y conocimiento t\u00e9cnico jur\u00eddico para ofrecer soluciones confiables.<\/p>\n                <\/div>\n                \n              \n                \n                <div class=\"footer-column\">\n                    <h3>Contacto<\/h3>\n                    <ul>\n                        <li><a href=\"tel:+52 55 9183 4000\"><i class=\"fas fa-phone\"><\/i> +52 55 9183 4000<\/a><\/li>\n                        <li><a href=\"soporte@frevidence.com\"><i class=\"fas fa-envelope\"><\/i> soporte@frevidence.com<\/a><\/li>\n                        <li><a href=\"google.com\/maps?ll=19.373727,-99.164405&#038;z=17&#038;t=m&#038;hl=es&#038;gl=MX&#038;mapclient=embed&#038;q=Heriberto+Fr\u00edas+1439-of.+504A+Col+del+Valle+Centro+Benito+Ju\u00e1rez+03100+Ciudad+de+M\u00e9xico,+CDMX\"><i class=\"fas fa-map-marker-alt\"><\/i> Ciudad de M\u00e9xico<\/a><\/li>\n                        <li><a href=\"https:\/\/frevidence.com\/?page_id=2623\"><i class=\"fas fa-calendar-alt\"><\/i> Agendar Consulta<\/a><\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n            \n            <div class=\"footer-bottom\">\n                <p>&copy; derechos reservados desde 2017 &#8211; Derechos reservados Frevidence. Todos los derechos reservados. | \n                <a href=\"#\">Aviso de Privacidad<\/a> | \n                <a href=\"#\">T\u00e9rminos y Condiciones<\/a><\/p>\n            <\/div>\n        <\/div>\n    <\/footer>\n<script>\n(function() {\n    const btn = document.querySelector('.hamburger');\n    const menu = document.querySelector('.nav-menu');\n    \n    if (btn && menu) {\n        btn.onclick = function() {\n            btn.classList.toggle('active');\n            menu.classList.toggle('active');\n            console.log(\"Men\u00fa clickeado\"); \/\/ Esto te dir\u00e1 en la consola si funciona\n        };\n    }\n})();\n<\/script>\n    <!-- WhatsApp Float Button -->\n    <a href=\"https:\/\/wa.me\/525512345678\" class=\"whatsapp-float\" target=\"_blank\" aria-label=\"Contactar por WhatsApp\">\n        <i class=\"fab fa-whatsapp\"><\/i>\n    <\/a>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Servicios Noticias Nosotros Contacto Servicios \u2013 Inform\u00e1tica Forense Porque cada bit es importante para ti Inform\u00e1tica Forense 01 \/ 06 01 Forense \/ Legal Auditor\u00eda Forense Auditor\u00eda de dispositivos con metodolog\u00edas globales para la detecci\u00f3n de fraudes, conflictos de inter\u00e9s o competencia desleal en entornos digitales. Ver detalle 02 Judicial \/ Pericial Dictamen Pericial Peritajes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"unboxed","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-2604","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frevidence.com\/index.php?rest_route=\/wp\/v2\/pages\/2604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frevidence.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/frevidence.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/frevidence.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frevidence.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2604"}],"version-history":[{"count":90,"href":"https:\/\/frevidence.com\/index.php?rest_route=\/wp\/v2\/pages\/2604\/revisions"}],"predecessor-version":[{"id":3145,"href":"https:\/\/frevidence.com\/index.php?rest_route=\/wp\/v2\/pages\/2604\/revisions\/3145"}],"wp:attachment":[{"href":"https:\/\/frevidence.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}