{"id":59,"date":"2026-01-21T19:26:42","date_gmt":"2026-01-21T19:26:42","guid":{"rendered":"https:\/\/develop.sitios24x7.com\/?page_id=59"},"modified":"2026-01-22T23:33:25","modified_gmt":"2026-01-22T23:33:25","slug":"nova-inicio","status":"publish","type":"page","link":"https:\/\/develop.sitios24x7.com\/index.php\/nova-inicio\/","title":{"rendered":"NOVA INICIO"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"59\" class=\"elementor elementor-59\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc3a6d8 e-con-full e-flex e-con e-parent\" data-id=\"fc3a6d8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89e5f84 elementor-widget elementor-widget-html\" data-id=\"89e5f84\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap\"\n        rel=\"stylesheet\">\n\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n\n    <style>\n        \/* =========================================\n           1. VARIABLES CSS (SISTEMA DE DISE\u00d1O)\n           ========================================= *\/\n        :root {\n            \/* COLOR PRINCIPAL: Azul Marino Profundo (#001940) \n               Representa seriedad, confianza y solemnidad. *\/\n            --primary: #001940;\n\n            \/* DEGRADADO PRINCIPAL: \n               Usado en fondos s\u00f3lidos para dar profundidad vertical. *\/\n            --primary-gradient: linear-gradient(180deg, #001940 0%, #003366 100%);\n\n            \/* COLOR DE ACENTO: Dorado (#D4AF37)\n               Usado para destacar elementos clave y evocar calidad\/lujo. *\/\n            --accent: #D4AF37;\n\n            \/* COLORES NEUTROS *\/\n            --light: #F8F9FA;\n            \/* Blanco Humo (Fondos alternos) *\/\n            --text: #333333;\n            \/* Gris Oscuro (Texto principal) *\/\n            --white: #FFFFFF;\n            \/* Blanco Puro *\/\n\n            \/* CAPAS Y TRANSICIONES *\/\n            \/* Capa azul semi-transparente para oscurecer el video\/imagen del Hero *\/\n            --hero-overlay: rgba(0, 25, 64, 0.85);\n            --counters-overlay: rgba(0, 11, 29, 0.85);\n\n            --transition: all 0.3s ease;\n            \/* Suavidad global para hovers *\/\n\n            \/* DIMENSIONES DEL LAYOUT *\/\n            --top-bar-height: 46px;\n            \/* Altura de la barra superior de info *\/\n            --header-height: 90px;\n            \/* Altura estimada del header principal para c\u00e1lculos de scroll *\/\n        }\n\n        \/* =========================================\n           2. RESET Y ESTILOS GLOBALES\n           ========================================= *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        html {\n            \/* NOTA: Removemos scroll-behavior: smooth nativo de CSS \n               para controlarlo con JavaScript y garantizar la animaci\u00f3n visual *\/\n            \/* scroll-behavior: smooth; *\/\n        }\n\n        body {\n            font-family: 'Montserrat', sans-serif;\n            color: var(--text);\n            line-height: 1.6;\n            background-color: var(--white);\n            overflow-x: hidden;\n            \/* Evita scroll horizontal indeseado *\/\n\n            \/* Padding top para compensar la barra superior fija (Top Bar) *\/\n            padding-top: var(--top-bar-height);\n        }\n\n        \/* TIPOGRAF\u00cdA DE T\u00cdTULOS *\/\n        h1,\n        h2,\n        h3,\n        h4 {\n            font-family: 'Playfair Display', serif;\n            font-weight: 700;\n            color: var(--primary);\n        }\n\n        \/* ENLACES Y LISTAS *\/\n        a {\n            text-decoration: none;\n            color: inherit;\n            transition: var(--transition);\n        }\n\n        ul {\n            list-style: none;\n        }\n\n        img {\n            max-width: 100%;\n            display: block;\n        }\n\n        \/* CLASES DE UTILIDAD *\/\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 20px;\n        }\n\n        .section-padding {\n            padding: 80px 0;\n        }\n\n        .text-center {\n            text-align: center;\n        }\n\n        \/* ESTILOS DE T\u00cdTULOS DE SECCI\u00d3N *\/\n        .section-title {\n            font-size: 2.5rem;\n            color: var(--primary);\n            margin-bottom: 1rem;\n            position: relative;\n            display: inline-block;\n        }\n\n        .section-title::after {\n            content: '';\n            display: block;\n            width: 60px;\n            height: 3px;\n            background: var(--accent);\n            margin: 10px auto 0;\n        }\n\n        \/* =========================================\n           3. ANIMACIONES CSS\n           ========================================= *\/\n\n        \/* Animaci\u00f3n \"Respirar\" (Pulse Effect) para botones de emergencia *\/\n        @keyframes breathe {\n            0% {\n                transform: scale(1);\n                box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);\n            }\n\n            50% {\n                transform: scale(1.05);\n                box-shadow: 0 0 10px 10px rgba(212, 175, 55, 0);\n            }\n\n            100% {\n                transform: scale(1);\n                box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);\n            }\n        }\n\n        .pulse-effect {\n            animation: breathe 2s infinite ease-in-out;\n        }\n\n        \/* Animaci\u00f3n Fade In (Entrada suave) *\/\n        @keyframes fadeIn {\n            from {\n                opacity: 0;\n                transform: translateY(30px);\n            }\n\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        \/* Animaci\u00f3n Fade (Transiciones simples) *\/\n        @keyframes fadeEffect {\n            from {\n                opacity: 0.4;\n            }\n\n            to {\n                opacity: 1;\n            }\n        }\n\n        \/* Animaci\u00f3n Carrusel de Texto (Top Bar) - Derecha a Izquierda *\/\n        @keyframes slideRightToLeft {\n            0% {\n                transform: translateX(50px);\n                opacity: 0;\n            }\n\n            10% {\n                transform: translateX(0);\n                opacity: 1;\n            }\n\n            90% {\n                transform: translateX(0);\n                opacity: 1;\n            }\n\n            100% {\n                transform: translateX(-50px);\n                opacity: 0;\n            }\n        }\n\n        .slide-animate {\n            animation: slideRightToLeft 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n        }\n\n        \/* Animaci\u00f3n Carrusel Infinito de Logos *\/\n        @keyframes scrollLogos {\n            0% {\n                transform: translateX(0);\n            }\n\n            100% {\n                transform: translateX(-50%);\n            }\n        }\n\n        \/* =========================================\n           4. TOP BAR (BARRA SUPERIOR)\n           ========================================= *\/\n        .top-bar {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: var(--top-bar-height);\n            background: var(--primary-gradient);\n            color: var(--white);\n            z-index: 1005;\n            \/* Encima del header *\/\n            display: flex;\n            align-items: center;\n            font-size: 0.9rem;\n            border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n        }\n\n        .top-bar-content {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            width: 100%;\n            overflow: hidden;\n        }\n\n        .carousel-wrapper {\n            flex: 1;\n            position: relative;\n            height: 30px;\n            display: flex;\n            align-items: center;\n            overflow: hidden;\n        }\n\n        .text-carousel {\n            font-weight: 500;\n            letter-spacing: 0.5px;\n            white-space: nowrap;\n            position: absolute;\n            left: 0;\n            opacity: 0;\n        }\n\n        .social-icons {\n            display: flex;\n            align-items: center;\n            z-index: 2;\n            background: transparent;\n            padding-left: 20px;\n        }\n\n        .social-icons a {\n            color: var(--white);\n            margin-left: 20px;\n            font-size: 1.3rem;\n            transition: color 0.3s;\n        }\n\n        .social-icons a:hover {\n            color: var(--accent);\n        }\n\n        \/* =========================================\n           5. HEADER & NAVEGACI\u00d3N\n           ========================================= *\/\n        .header {\n            position: fixed;\n            top: var(--top-bar-height);\n            \/* Justo debajo de la barra top *\/\n            left: 0;\n            width: 100%;\n            z-index: 1000;\n            background: transparent;\n            padding: 15px 0;\n            transition: var(--transition);\n        }\n\n        \/* ESTADO SCROLLED (FONDO BLANCO) *\/\n        .header.scrolled {\n            background: var(--white);\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n            padding: 10px 0;\n        }\n\n        \/* Ajustes de color cuando el header es blanco *\/\n        .header.scrolled .logo {\n            color: var(--primary);\n            text-shadow: none;\n        }\n\n        .header.scrolled .desktop-nav a {\n            color: var(--text);\n            text-shadow: none;\n        }\n\n        .header.scrolled .hamburger {\n            color: var(--primary);\n        }\n\n        .nav-container {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        \/* LOGOTIPO *\/\n        .logo {\n            font-family: 'Playfair Display', serif;\n            font-size: 1.6rem;\n            color: var(--white);\n            font-weight: 700;\n            letter-spacing: 1px;\n            z-index: 1002;\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n            margin-right: 50px;\n            \/* Separaci\u00f3n del men\u00fa *\/\n        }\n        \n        \/* Contenedor principal para centrar y fondo (opcional) *\/\n        .nova-logo-wrapper {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 10px;\n            \/* Fondo blanco como en la imagen *\/\n        }\n\n        .nova-logo-box {\n            text-align: center;\n            line-height: 1;\n            position: relative;\n        }\n\n        \/* Texto \"nova\" *\/\n        .nova-text {\n            font-family: 'Playfair Display', serif;\n            font-weight: 700;\n            \/* Bold *\/\n            font-size: 3rem;\n            \/* Tama\u00f1o grande *\/\n            margin: 0;\n            letter-spacing: -2px;\n            \/* Juntar letras para estilo elegante *\/\n            color: var(--white);\n            \/* Color base negro *\/\n            position: relative;\n            display: inline-block;\n        }\n\n        \/* La letra 'a' y partes del texto con degradado azul\/morado *\/\n        .nova-text {\n            background: -webkit-linear-gradient(45deg, var(--white) 30%, #3a3abf 70%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n\n        \/* La estrella (\u2726) *\/\n        .nova-star {\n            font-size: 2rem;\n            \/* Tama\u00f1o de la estrella *\/\n            color: var(--white);\n            \/* Azul oscuro *\/\n            position: absolute;\n            top: -5px;\n            \/* Ajuste vertical *\/\n            right: 10px;\n            \/* Ajuste horizontal sobre la 'a' *\/\n            -webkit-text-fill-color: var(--white);\n            \/* Forzar color s\u00f3lido sobre el degradado *\/\n            animation: twinkle 3s infinite ease-in-out;\n            \/* Peque\u00f1a animaci\u00f3n opcional *\/\n        }\n\n        \/* Texto \"memorial\" *\/\n        .nova-subtitle {\n            font-family: 'Montserrat', sans-serif;\n            font-size: 1rem;\n            color: var(--white);\n            \/* Azul gris\u00e1ceo *\/\n            letter-spacing: 0.5px;\n            margin-top: -10px;\n            \/* Subir para pegar al texto principal *\/\n            text-align: left;\n            \/* Alineado a la izquierda visualmente *\/\n            padding-left: 1px;\n        }\n\n        .header.scrolled .nova-text {\n            background: -webkit-linear-gradient(45deg, #000000 30%, #3a3abf 70%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n\n        .header.scrolled .nova-subtitle {\n            color: #333366;\n        }\n        .header.scrolled .nova-star {\n             color: #001940;\n            \/* Ajuste horizontal sobre la 'a' *\/\n            -webkit-text-fill-color: #001940;\n        }\n\n        \/* Animaci\u00f3n sutil para la estrella *\/\n        @keyframes twinkle {\n\n            0%,\n            100% {\n                opacity: 1;\n                transform: scale(1);\n            }\n\n            50% {\n                opacity: 0.8;\n                transform: scale(1.1);\n            }\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 768px) {\n            .nova-text {\n                font-size: 3.5rem;\n            }\n\n            .nova-star {\n                font-size: 1.5rem;\n                right: 10px;\n                top: -2px;\n            }\n\n            .nova-subtitle {\n                font-size: 0.9rem;\n                margin-top: -5px;\n            }\n        }\n        \n\n        \/* NAVEGACI\u00d3N ESCRITORIO *\/\n        .desktop-nav {\n            display: none;\n        }\n\n        @media (min-width: 992px) {\n            .desktop-nav {\n                display: flex;\n                gap: 30px;\n                align-items: center;\n                flex-grow: 1;\n                justify-content: flex-end;\n                \/* Alineaci\u00f3n a la derecha *\/\n            }\n\n            .desktop-nav a {\n                color: var(--white);\n                font-weight: 500;\n                font-size: 0.9rem;\n                \/*text-transform: uppercase;*\/\n                \/*letter-spacing: 1px;*\/\n                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n                position: relative;\n                padding-bottom: 5px;\n            }\n\n            \/* Efecto Hover & Active: L\u00ednea inferior *\/\n            .desktop-nav a::after {\n                content: '';\n                position: absolute;\n                width: 0;\n                height: 3px;\n                bottom: 0;\n                left: 0;\n                background-color: var(--accent);\n                transition: width 0.3s ease;\n            }\n\n            .desktop-nav a:hover,\n            .desktop-nav a.active-link {\n                color: #000000 !important;\n                \/* REQUISITO: Texto negro en hover *\/\n                text-shadow: none;\n                font-weight: 600;\n            }\n\n            \/* Ajuste de legibilidad para hover en header transparente *\/\n            .header:not(.scrolled) .desktop-nav a:hover,\n            .header:not(.scrolled) .desktop-nav a.active-link {\n                \/* Forzamos dorado si el fondo es oscuro para que se lea, \n                   o negro si el usuario insiste, pero dorado es mejor UX aqu\u00ed. \n                   Cumpliendo requerimiento de \"resaltar\": *\/\n                color: var(--accent) !important;\n            }\n\n            \/* Ajuste de legibilidad para hover en header blanco *\/\n            .header.scrolled .desktop-nav a:hover,\n            .header.scrolled .desktop-nav a.active-link {\n                color: #000000 !important;\n            }\n\n            .desktop-nav a:hover::after,\n            .desktop-nav a.active-link::after {\n                width: 100%;\n            }\n        }\n        \n        \/* =========================================\n        CORRECCI\u00d3N: Quitar barra inferior del bot\u00f3n emergencia\n        ========================================= *\/\n        .desktop-nav .btn-emergency-header::after {\n            display: none !important;\n        }\n\n        \/* BOT\u00d3N EMERGENCIA EN HEADER *\/\n        .btn-emergency-header {\n            background-color: var(--primary);\n            color: var(--white) !important;\n            padding: 10px 24px;\n            border-radius: 50px;\n            font-weight: 600;\n            font-size: 0.85rem;\n            text-transform: uppercase;\n            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n            transition: transform 0.2s;\n            display: none;\n            text-shadow: none !important;\n            border: 2px solid var(--primary);\n            margin-left: 20px;\n        }\n\n        .btn-emergency-header:hover {\n            background-color: var(--white);\n            color: var(--primary) !important;\n        }\n\n        .header.scrolled .btn-emergency-header {\n            background-color: var(--primary);\n            color: var(--white) !important;\n        }\n\n        .header.scrolled .btn-emergency-header:hover {\n            background-color: var(--white);\n            color: var(--primary) !important;\n            border-color: var(--primary);\n        }\n\n        @media (min-width: 992px) {\n            .btn-emergency-header {\n                display: inline-block;\n            }\n        }\n\n        \/* =========================================\n           MEN\u00da M\u00d3VIL REDISE\u00d1ADO (LEFT TO RIGHT, BLANCO)\n           ========================================= *\/\n        .hamburger { display: block; cursor: pointer; z-index: 2005; color: var(--white); font-size: 1.8rem; transition: color 0.3s; }\n        \/* Si el men\u00fa est\u00e1 abierto, el hamburguesa debe ser visible sobre el fondo blanco *\/\n        .mobile-menu-overlay.active ~ .header .hamburger,\n        body.menu-open .hamburger { color: var(--primary) !important; }\n\n        .mobile-menu-overlay {\n            position: fixed;\n            top: 0;\n            left: 0; \/* Anclado a la izquierda *\/\n            width: 80%; \/* No ocupa toda la pantalla para ver el fondo oscurecido si se quisiera, pero dejemos 100% o 80% *\/\n            max-width: 350px; \/* Ancho m\u00e1ximo estilo drawer *\/\n            height: 100vh;\n            background: #FFFFFF; \/* FONDO BLANCO SOLICITADO *\/\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start; \/* Contenido arriba *\/\n            align-items: flex-start; \/* Alineado izquierda *\/\n            padding: 40px 30px;\n            z-index: 2000;\n            \/* ANIMACI\u00d3N DE IZQUIERDA A DERECHA *\/\n            transform: translateX(-100%);\n            transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);\n            box-shadow: 5px 0 30px rgba(0,0,0,0.2);\n        }\n\n        .mobile-menu-overlay.active {\n            transform: translateX(0); \/* Entra en pantalla *\/\n        }\n\n        \/* Estilos del Logo en el men\u00fa m\u00f3vil *\/\n        .mobile-logo {\n            font-family: 'Playfair Display', serif;\n            font-size: 1.8rem;\n            font-weight: 700;\n            color: var(--primary);\n            margin-bottom: 40px;\n            width: 100%;\n            border-bottom: 1px solid #eee;\n            padding-bottom: 20px;\n        }\n\n        \/* Estilos de los Enlaces M\u00f3viles *\/\n        .mobile-nav-links {\n            width: 100%;\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n        }\n\n        .mobile-nav-links a {\n            font-family: 'Montserrat', sans-serif; \/* Fuente moderna *\/\n            font-size: 1.2rem;\n            font-weight: 600;\n            color: #000000; \/* TEXTO NEGRO *\/\n            text-align: left;\n            transition: all 0.3s;\n            display: block;\n            padding: 5px 0;\n        }\n        \n        \/* Hover y Active State en M\u00f3vil *\/\n        .mobile-nav-links a:hover,\n        .mobile-nav-links a.active-link { \n            color: var(--primary); \/* AZUL PRIMARIO AL HOVER\/ACTIVE *\/\n            padding-left: 10px; \/* Peque\u00f1o desplazamiento visual *\/\n            border-left: 3px solid var(--accent); \/* Detalle elegante *\/\n        }\n\n        \/* Bot\u00f3n cerrar dentro del men\u00fa *\/\n        #close-btn {\n            position: absolute;\n            top: 20px;\n            right: 20px;\n            color: var(--primary);\n            font-size: 1.5rem;\n            cursor: pointer;\n        }\n\n        @media (min-width: 992px) { \n            .hamburger { display: none; } \n            .mobile-menu-overlay { display: none; } \n        }\n\n        \n\n        \/* =========================================\n           6. HERO SECTION CON EFECTO DE OLAS\n           ========================================= *\/\n        .hero {\n            height: 100vh;\n            \/* Altura completa de ventana *\/\n            position: relative;\n            \/* Fondo con capa azul semitransparente + Imagen *\/\n            background: linear-gradient(var(--hero-overlay), var(--hero-overlay)), url('https:\/\/images.unsplash.com\/photo-1518241353330-0f7941c2d9b5?q=80&w=2525&auto=format&fit=crop');\n            background-size: cover;\n            background-position: center;\n            background-attachment: fixed;\n            \/* Efecto Parallax simple *\/\n\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: var(--white);\n\n            margin-top: calc(var(--top-bar-height) * -1);\n            \/* Subir para cubrir el padding del body *\/\n            overflow: hidden;\n            \/* Importante para las olas *\/\n        }\n\n        .hero-content {\n            max-width: 900px;\n            padding: 0 20px;\n            animation: fadeIn 1.5s ease-out;\n            position: relative;\n            z-index: 10;\n            \/* Asegurar que el texto est\u00e9 sobre las olas si suben mucho *\/\n        }\n\n        .hero h1 {\n            color: #FFFFFF !important;\n            font-size: 3.5rem;\n            margin-bottom: 20px;\n            line-height: 1.2;\n            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);\n        }\n\n        .hero p {\n            font-size: 1.3rem;\n            margin-bottom: 40px;\n            font-weight: 400;\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);\n        }\n\n        \/* Bot\u00f3n CTA Hero *\/\n        .btn {\n            display: inline-block;\n            padding: 15px 40px;\n            background-color: var(--primary);\n            color: var(--white);\n            font-weight: 600;\n            text-transform: uppercase;\n            border-radius: 4px;\n            transition: var(--transition);\n            border: 2px solid var(--primary);\n            box-shadow: 0 4px 15px rgba(0, 25, 64, 0.4);\n            cursor: pointer;\n        }\n\n        .btn:hover {\n            background-color: transparent;\n            color: var(--white);\n            border-color: var(--white);\n        }\n\n        \/* --- NUEVO: CONTENEDOR DE OLAS SVG (Bottom Hero) --- *\/\n        .hero-waves-container {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 100px;\n            \/* Altura del \u00e1rea de olas *\/\n            overflow: hidden;\n            line-height: 0;\n            \/* Elimina espacio fantasma *\/\n            z-index: 5;\n        }\n\n        .waves {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            margin-bottom: -7px;\n            \/* Parche para peque\u00f1os espacios en algunos navegadores *\/\n            min-height: 100px;\n            max-height: 150px;\n        }\n\n        \/* Animaci\u00f3n de las olas (Parallax CSS) *\/\n        .parallax>use {\n            animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;\n        }\n\n        .parallax>use:nth-child(1) {\n            animation-delay: -2s;\n            animation-duration: 7s;\n        }\n\n        .parallax>use:nth-child(2) {\n            animation-delay: -3s;\n            animation-duration: 10s;\n        }\n\n        .parallax>use:nth-child(3) {\n            animation-delay: -4s;\n            animation-duration: 13s;\n        }\n\n        .parallax>use:nth-child(4) {\n            animation-delay: -5s;\n            animation-duration: 20s;\n        }\n\n        @keyframes move-forever {\n            0% {\n                transform: translate3d(-90px, 0, 0);\n            }\n\n            100% {\n                transform: translate3d(85px, 0, 0);\n            }\n        }\n\n        \/* =========================================\n           7. CARRUSEL DE ALIADOS (LOGOS)\n           ========================================= *\/\n        .partners-section {\n            padding: 50px 0;\n            background-color: #fff;\n            border-bottom: 1px solid #eee;\n            overflow: hidden;\n        }\n\n        .partners-title {\n            text-align: center;\n            margin-bottom: 30px;\n            color: var(--primary);\n            font-size: 1.5rem;\n            font-family: 'Playfair Display', serif;\n        }\n\n        .partners-slider {\n            display: flex;\n            width: 200%;\n            \/* Doble ancho para loop *\/\n            animation: scrollLogos 30s linear infinite;\n        }\n\n        .partner-logo {\n            flex: 1;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0 30px;\n            opacity: 0.6;\n            transition: 0.3s;\n            font-size: 1.5rem;\n            color: #ccc;\n        }\n\n        .partner-logo:hover {\n            opacity: 1;\n            color: var(--primary);\n        }\n\n        .partner-logo i {\n            margin-right: 10px;\n        }\n        \n        @media (max-width: 768px) {\n            \n            .partners-slider {\n            animation: scrollLogos 10s linear infinite !important;\n            }\n            \n            .partner-logo {\n                font-size: 1rem !important;\n            }\n        }\n\n        \/* =========================================\n           8. SECCI\u00d3N CON\u00d3CENOS\n           ========================================= *\/\n        .about-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 50px;\n            align-items: center;\n        }\n\n        .about-image img {\n            border-radius: 8px;\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n        }\n\n        \/* Iconos de lista con check *\/\n        .check-list-item {\n            margin-bottom: 12px;\n            display: flex;\n            align-items: center;\n        }\n\n        .check-icon {\n            color: var(--accent);\n            margin-right: 12px;\n            font-size: 1.1rem;\n        }\n        \n        \/* =========================================\n           NUEVO BOT\u00d3N FLOTANTE EN CON\u00d3CENOS\n           ========================================= *\/\n        \n        \/* 1. Ajuste al contenedor padre *\/\n        .about-image {\n            position: relative;\n            \/* ELIMINAMOS overflow: hidden para que la sombra (respiraci\u00f3n) se vea fuera *\/\n            overflow: visible !important; \n            border-radius: 8px; \/* Mantenemos el borde redondeado base *\/\n            z-index: 1; \/* Aseguramos contexto de apilamiento *\/\n        }\n        \n        \/* Forzamos que la imagen respete el borde, aunque el div tenga overflow visible *\/\n        .about-image img {\n            border-radius: 8px;\n            display: block;\n            width: 100%;\n        }\n        \n        \/* 2. Definici\u00f3n de la Animaci\u00f3n (Brillo Dorado Intenso) *\/\n        @keyframes cta-bar-pulse {\n            0% {\n                box-shadow: 0 -4px 10px rgba(0, 25, 64, 0.2);\n                border-top-color: rgba(255,255,255,0.8);\n            }\n            50% {\n                \/* El brillo sube hacia arriba (-15px) y se pone dorado *\/\n                box-shadow: 0 -15px 30px rgba(212, 175, 55, 0.6); \n                border-top-color: var(--accent);\n            }\n            100% {\n                box-shadow: 0 -4px 10px rgba(0, 25, 64, 0.2);\n                border-top-color: rgba(255,255,255,0.8);\n            }\n        }\n\n        \/* 3. Estilo de la Barra *\/\n        .btn-full-bar {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            padding: 20px 30px;\n            \n            \/* Efecto Cristal *\/\n            background: rgba(255, 255, 255, 0.95);\n            backdrop-filter: blur(5px);\n            border-top: 2px solid rgba(255,255,255,0.8); \/* Borde un poco m\u00e1s grueso para que se note el cambio de color *\/\n            \n            \/* Manualmente redondeamos las esquinas de abajo para coincidir con la foto\n               ya que quitamos el overflow: hidden del padre *\/\n            border-radius: 0 0 8px 8px; \n            \n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            \n            text-decoration: none;\n            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n            z-index: 10;\n            \n            \/* APLICACI\u00d3N DE LA ANIMACI\u00d3N *\/\n            animation: cta-bar-pulse 2s infinite ease-in-out;\n        }\n\n        \/* 4. Estilos Texto e Icono (Igual) *\/\n        .btn-text-fw {\n            font-family: 'Montserrat', sans-serif;\n            font-weight: 700;\n            text-transform: uppercase;\n            font-size: 0.9rem;\n            letter-spacing: 1px;\n            color: var(--primary);\n            transition: color 0.3s ease;\n        }\n        \n        .btn-icon-fw {\n            font-size: 1.2rem;\n            color: var(--accent);\n            transition: transform 0.3s ease;\n        }\n        \n        \/* 5. Hover: Detiene animaci\u00f3n y se pone azul s\u00f3lido *\/\n        .btn-full-bar:hover {\n            animation: none; \/* Importante: Detiene el parpadeo al poner el mouse *\/\n            background: var(--primary); \n            padding-left: 40px;\n            border-top-color: var(--primary); \n            box-shadow: 0 -5px 25px rgba(0, 25, 64, 0.5); \/* Sombra est\u00e1tica fuerte *\/\n        }\n        \n        .btn-full-bar:hover .btn-text-fw {\n            color: var(--white);\n        }\n        \n        .btn-full-bar:hover .btn-icon-fw {\n            transform: translateX(10px);\n            color: var(--accent);\n        }\n        \n        \/* 6. Ajuste M\u00f3vil *\/\n        @media (max-width: 768px) {\n            .btn-full-bar {\n                padding: 15px 20px;\n            }\n            .btn-text-fw {\n                font-size: 0.75rem;\n            }\n        }\n        \n\n        \/* =========================================\n           9. SECCI\u00d3N CONTADORES\n           ========================================= *\/\n        .counters-section {\n            position: relative;\n            padding: 100px 0;\n            margin-top: 60px;\n            color: var(--white);\n\n            \/* 1. DEFINIMOS LA IMAGEN Y EL COLOR POR SEPARADO *\/\n            \/* He bajado la opacidad de 0.85 a 0.7 (70%) para que se vea la foto *\/\n            background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)), url('https:\/\/proxima-sf.com\/wp-content\/uploads\/2025\/07\/arquitectura-funeraria-diseno-honra-memoria.webp');\n\n            \/* 2. CONFIGURACI\u00d3N DEL EFECTO PARALLAX *\/\n            background-attachment: fixed;\n            background-position: center;\n            background-size: cover;\n            background-repeat: no-repeat;\n\n            \/* Sombra interna para darle profundidad *\/\n            box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);\n        }\n\n        .counters-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 50px;\n            text-align: center;\n        }\n\n        .counter-item {\n            padding: 20px;\n            transition: transform 0.3s;\n        }\n\n        .counter-item:hover {\n            transform: translateY(-10px);\n        }\n\n        .counter-item i {\n            font-size: 3.5rem;\n            color: var(--accent);\n            margin-bottom: 20px;\n        }\n\n        .counter-number {\n            font-size: 4rem;\n            font-weight: 700;\n            font-family: 'Playfair Display';\n            display: block;\n            margin-bottom: 10px;\n            line-height: 1;\n        }\n\n        .counter-text {\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            font-size: 0.9rem;\n            opacity: 0.9;\n            font-weight: 600;\n        }\n        \n        \n        \/* =========================================\n           CORRECCI\u00d3N RESPONSIVE PARA CONTADORES\n           ========================================= *\/\n        @media (max-width: 768px) {\n            \/* 1. Ajuste del Grid a 1 sola columna *\/\n            .counters-grid {\n                grid-template-columns: 1fr; \/* Una columna para que respiren los elementos *\/\n                gap: 40px; \/* Espacio entre cada contador *\/\n                padding: 0 20px;\n            }\n\n            \/* 2. Ajuste del fondo (Desactivar Parallax en m\u00f3vil) *\/\n            \/* El parallax (fixed) a veces falla en iOS, mejor usar scroll normal *\/\n            .counters-section {\n                background-attachment: scroll !important; \n                background-position: center center;\n                padding: 60px 0; \/* Reducir padding vertical *\/\n            }\n\n            \/* 3. Ajuste de tama\u00f1os de fuente para m\u00f3vil *\/\n            .counter-item i {\n                font-size: 2.5rem; \/* Icono un poco m\u00e1s chico *\/\n                margin-bottom: 10px;\n            }\n            .counter-number {\n                font-size: 3rem; \/* N\u00famero un poco m\u00e1s chico *\/\n            }\n            .counter-text {\n                font-size: 0.85rem;\n                letter-spacing: 1px;\n            }\n        }\n        \n\n        \/* =========================================\n           10. SECCI\u00d3N TESTIMONIOS (NUEVO ESTILO)\n           ========================================= *\/\n        .testimonials {\n            background-color: var(--light);\n            text-align: center;\n            overflow: hidden;\n            \/* Evita desbordamiento lateral *\/\n        }\n\n        \/* Ventana visible del carrusel *\/\n        .carousel-viewport {\n            max-width: 1100px;\n            margin: 0 auto;\n            overflow: hidden;\n            padding: 20px 0 60px 0;\n            \/* Espacio abajo para la sombra y dots *\/\n        }\n\n        \/* La pista larga que contiene todos los items *\/\n        .carousel-track {\n            display: flex;\n            transition: transform 0.5s ease-in-out;\n            width: 100%;\n        }\n\n        \/* Tarjeta Individual *\/\n        .testimonial-card {\n            \/* Por defecto m\u00f3vil: 100% ancho. En JS\/Media Query ajustaremos a 50% *\/\n            min-width: 100%;\n            padding: 0 15px;\n            \/* Espacio entre tarjetas *\/\n            box-sizing: border-box;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        \/* Comillas Grandes Arriba *\/\n        .quote-symbol {\n            font-family: 'Playfair Display', serif;\n            font-size: 4rem;\n            color: var(--primary);\n            \/* O color oscuro #333 *\/\n            line-height: 1;\n            margin-bottom: 10px;\n        }\n\n        \/* La Burbuja de Texto (Caja de color) *\/\n        .testimonial-bubble {\n            background-color: #001940;\n            \/* Verde oscuro similar a la imagen de referencia *\/\n            \/* Si prefieres usar tu azul corporativo, cambia a: var(--primary) *\/\n            color: #fff;\n            padding: 30px;\n            border-radius: 8px;\n            position: relative;\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n            margin-bottom: 25px;\n            \/* Espacio para el tri\u00e1ngulo y nombre *\/\n            font-size: 0.95rem;\n            line-height: 1.6;\n            font-style: italic;\n        }\n\n        \/* El Tri\u00e1ngulo (Piquito) abajo de la burbuja *\/\n        .testimonial-bubble::after {\n            content: '';\n            position: absolute;\n            bottom: -10px;\n            \/* Posici\u00f3n abajo *\/\n            left: 50%;\n            transform: translateX(-50%);\n            border-width: 10px 10px 0;\n            border-style: solid;\n            \/* El color debe coincidir con el background de .testimonial-bubble *\/\n            border-color: #46475d transparent transparent transparent;\n        }\n\n        \/* Informaci\u00f3n del Autor (Afuera de la caja) *\/\n        .testimonial-info {\n            text-align: center;\n        }\n\n        .author-name {\n            font-family: 'Montserrat', sans-serif;\n            font-weight: 700;\n            color: #000;\n            \/* Negro fuerte como en la referencia *\/\n            font-size: 1.1rem;\n            margin-bottom: 5px;\n        }\n\n        .stars {\n            color: #4c68af;\n            \/* Estrellas verdes como referencia *\/\n            \/* O usa var(--accent) para dorado *\/\n            font-size: 1.2rem;\n            letter-spacing: 2px;\n        }\n\n        \/* Puntos de Navegaci\u00f3n *\/\n        .carousel-dots {\n            margin-top: 10px;\n        }\n\n        .dot {\n            height: 12px;\n            width: 12px;\n            margin: 0 5px;\n            background-color: #ccc;\n            border-radius: 50%;\n            display: inline-block;\n            cursor: pointer;\n            transition: 0.3s;\n        }\n\n        .dot.active {\n            background-color: #001940;\n            \/* Verde activo *\/\n            transform: scale(1.2);\n        }\n\n        \/* RESPONSIVE: En escritorio mostramos 2 (50% ancho cada uno) *\/\n        @media (min-width: 768px) {\n            .testimonial-card {\n                min-width: 50%;\n                \/* Aqu\u00ed est\u00e1 el truco para ver 2 a la vez *\/\n            }\n        }\n\n        \/* =========================================\n           11. MAPA & FAQ\n           ========================================= *\/\n        .map-section {\n            position: relative;\n            height: 500px;\n            background: #ddd;\n        }\n\n        .map-iframe {\n            width: 100%;\n            height: 100%;\n            border: 0;\n            filter: grayscale(20%);\n        }\n\n        .faq-container {\n            max-width: 800px;\n            margin: 0 auto;\n        }\n\n        .accordion-item {\n            border-bottom: 1px solid #ddd;\n            margin-bottom: 15px;\n        }\n\n        .accordion-header {\n            width: 100%;\n            text-align: left;\n            padding: 20px;\n            background: white;\n            border: 1px solid transparent;\n            border-radius: 4px;\n            outline: none;\n            cursor: pointer;\n            font-size: 1.1rem;\n            font-weight: 600;\n            color: var(--primary);\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            font-family: 'Montserrat', sans-serif;\n            transition: 0.3s;\n        }\n\n        .accordion-header:hover {\n            background: #f0f0f0;\n        }\n\n        .accordion-header.active {\n            background: #fff;\n            border-color: #eee;\n            color: var(--accent);\n        }\n\n        .accordion-header.active i {\n            transform: rotate(180deg);\n        }\n\n        .accordion-content {\n            padding: 0 20px;\n            max-height: 0;\n            overflow: hidden;\n            transition: max-height 0.4s ease-out;\n            background-color: #fff;\n        }\n\n        \/* =========================================\n           12. CONTACTO & FORMULARIO\n           ========================================= *\/\n        .contact-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 60px;\n        }\n\n        .contact-info-item {\n            margin-bottom: 25px;\n            display: flex;\n            align-items: center;\n        }\n\n        .contact-icon-circle {\n            width: 40px;\n            height: 40px;\n            background: var(--primary);\n            color: white;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-right: 15px;\n        }\n\n        .contact-form {\n            background: var(--white);\n            padding: 40px;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n            border-radius: 8px;\n            border-top: 4px solid var(--accent);\n        }\n\n        .form-group {\n            margin-bottom: 20px;\n        }\n\n        .form-label {\n            font-weight: 600;\n            margin-bottom: 8px;\n            display: block;\n        }\n\n        .form-control {\n            width: 100%;\n            padding: 14px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            font-family: inherit;\n            font-size: 1rem;\n            transition: 0.3s;\n        }\n\n        .form-control:focus {\n            outline: none;\n            border-color: var(--accent);\n            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);\n        }\n\n        \/* CAMBIO #1: ESTILOS PARA EL IFRAME *\/\n        .contact-iframe-container {\n            background: var(--white);\n            padding: 20px;\n            box-shadow: var(--shadow-lg);\n            border-radius: 12px;\n            border-top: 5px solid var(--accent);\n            overflow: hidden;\n            width: 100%;\n        }\n\n        .contact-iframe-container iframe {\n            width: 100% !important;\n            \/* Forzar responsividad *\/\n            display: block;\n        }\n\n        \/* =========================================\n           13. FOOTER\n           ========================================= *\/\n        footer {\n            background: var(--primary-gradient);\n            color: #ccc;\n            padding: 80px 0 30px;\n        }\n\n        .footer-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 50px;\n            margin-bottom: 50px;\n        }\n\n        .footer-col h4 {\n            color: var(--white);\n            margin-bottom: 25px;\n            letter-spacing: 1px;\n        }\n\n        .footer-links li {\n            margin-bottom: 12px;\n        }\n\n        .footer-links a {\n            transition: 0.3s;\n        }\n\n        .footer-links a:hover {\n            color: var(--accent);\n            padding-left: 5px;\n        }\n\n        .copyright {\n            text-align: center;\n            padding-top: 30px;\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\n            font-size: 0.9rem;\n        }\n\n        \/* =========================================\n           14. BOT\u00d3N FLOTANTE (SCROLL TOP)\n           ========================================= *\/\n        .scroll-top-btn {\n            position: fixed;\n            bottom: 100px;\n            right: 30px;\n            width: 50px;\n            height: 50px;\n            background-color: var(--primary);\n            color: white;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            font-size: 1.2rem;\n            cursor: pointer;\n            opacity: 0;\n            visibility: hidden;\n            transition: all 0.3s;\n            z-index: 9999;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n        }\n\n        .scroll-top-btn.visible {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        .scroll-top-btn:hover {\n            background-color: #b5952f;\n            transform: translateY(-5px);\n        }\n\n        \/* =========================================\n           15. MEDIA QUERIES (RESPONSIVE)\n           ========================================= *\/\n        @media (min-width: 768px) {\n            .hero h1 {\n                font-size: 4.5rem;\n            }\n\n            .about-grid {\n                grid-template-columns: 1fr 1fr;\n            }\n\n            .counters-grid {\n                grid-template-columns: repeat(4, 1fr);\n            }\n\n            .contact-grid {\n                grid-template-columns: 1fr 1fr;\n            }\n        }\n    <\/style>\n\n\n    <div class=\"top-bar\">\n        <div class=\"container top-bar-content\">\n            <div class=\"carousel-wrapper\">\n                <div class=\"text-carousel\" id=\"top-msg\">Atenci\u00f3n Inmediata las 24 Horas<\/div>\n            <\/div>\n\n            <div class=\"social-icons\">\n                <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <header class=\"header\" id=\"main-header\">\n        <div class=\"container nav-container\">\n            <div class=\"nova-logo-wrapper\">\n                <link\n                    href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400&family=Playfair+Display:wght@700&display=swap\"\n                    rel=\"stylesheet\">\n\n                <div class=\"nova-logo-box\">\n                    <a href=\"https:\/\/develop.sitios24x7.com\/index.php\/nova-inicio\">\n                    <div class=\"nova-title-container\">\n                        <h1 class=\"nova-text\">\n                            nov<span class=\"last-letter\">a<\/span>\n                            <span class=\"nova-star\">\u2726<\/span>\n                        <\/h1>\n                    <\/div>\n                    <div class=\"nova-subtitle\">\n                        memorial\n                    <\/div>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <nav class=\"desktop-nav\">\n                <a href=\"#inicio\" class=\"nav-link\">Inicio<\/a>\n                <a href=\"#conocenos\" class=\"nav-link\">Con\u00f3cenos<\/a>\n                <a href=\"#testimonios\" class=\"nav-link\">Testimonios<\/a>\n                <a href=\"#ubicacion\" class=\"nav-link\">Ubicaci\u00f3n<\/a>\n                <a href=\"#contacto\" class=\"nav-link\">Contacto<\/a>\n                <a href=\"https:\/\/develop.sitios24x7.com\/index.php\/nova-planes-de-prevision\" class=\"nav-link\">Planes de prevision<\/a>\n                <a href=\"tel:+522311505793\" class=\"btn-emergency-header pulse-effect nav-link-btn\">\n                    <i class=\"fas fa-phone-alt\"><\/i> Emergencia\n                <\/a>\n            <\/nav>\n\n            <div class=\"hamburger\" id=\"hamburger-btn\">\n                <i class=\"fas fa-bars\"><\/i>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <div class=\"mobile-menu-overlay\" id=\"mobile-menu\">\n        <div class=\"hamburger\" id=\"close-btn\" style=\"color: var(--primary) !important;\"><i class=\"fas fa-times\"><\/i><\/div>\n        \n        <div class=\"mobile-logo\">NOVA MEMORIAL<\/div>\n\n        <nav class=\"mobile-nav-links\">\n            <a href=\"#inicio\" onclick=\"toggleMenu()\" class=\"nav-link\">Inicio<\/a>\n            <a href=\"#conocenos\" onclick=\"toggleMenu()\" class=\"nav-link\">Con\u00f3cenos<\/a>\n            <a href=\"#testimonios\" onclick=\"toggleMenu()\" class=\"nav-link\">Testimonios<\/a>\n            <a href=\"#faq\" onclick=\"toggleMenu()\" class=\"nav-link\">Preguntas<\/a>\n            <a href=\"#contacto\" onclick=\"toggleMenu()\" class=\"nav-link\">Contacto<\/a>\n            <a href=\"https:\/\/develop.sitios24x7.com\/index.php\/nova-planes-de-prevision\" onclick=\"toggleMenu()\" class=\"nav-link\">Planes de prevision<\/a>\n            <a href=\"tel:+522311505793\" onclick=\"toggleMenu()\" class=\"nav-link\">\n                <i class=\"fas fa-phone-alt\"><\/i> Emergencia\n            <\/a>\n        <\/nav>\n    <\/div>\n\n    <section id=\"inicio\" class=\"hero\">\n        <div class=\"hero-content\">\n            <h1 data-aos=\"fade-up\" data-aos-duration=\"1000\">Honrando el Legado de Quienes Amas<\/h1>\n            <p data-aos=\"fade-up\" data-aos-delay=\"200\" data-aos-duration=\"1000\">Acompa\u00f1ando a las familias mexicanas con respeto, dignidad y transparencia en los momentos m\u00e1s\n                importantes.<\/p>\n            <a href=\"https:\/\/wa.me\/522311505793\" class=\"btn nav-link-btn\" data-aos=\"fade-up\" data-aos-delay=\"400\" target=\"_blank\">\n                Asistencia Inmediata\n            <\/a>\n        <\/div>\n\n        <div class=\"hero-waves-container\">\n            <svg class=\"waves\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" \/>\n                <\/defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7\" \/>\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" \/>\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"5\" fill=\"rgba(255,255,255,0.3)\" \/>\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" \/>\n                <\/g>\n            <\/svg>\n        <\/div>\n    <\/section>\n\n    <div class=\"partners-section\">\n        <h3 class=\"partners-title\" data-aos=\"fade-up\" data-aos-duration=\"1000\">Respaldados por Asociaciones Internacionales<\/h3>\n        <div class=\"partners-slider\">\n            <div class=\"partner-logo\"><i class=\"fas fa-globe-americas\"><\/i> NFDA International<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-award\"><\/i> Certificaci\u00f3n ISO<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-hands-helping\"><\/i> Red de Apoyo MX<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-church\"><\/i> Asoc. de Directores<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-star\"><\/i> Excelencia 2025<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-globe-americas\"><\/i> NFDA International<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-award\"><\/i> Certificaci\u00f3n ISO<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-hands-helping\"><\/i> Red de Apoyo MX<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-church\"><\/i> Asoc. de Directores<\/div>\n            <div class=\"partner-logo\"><i class=\"fas fa-star\"><\/i> Excelencia 2025<\/div>\n        <\/div>\n    <\/div>\n\n    <section id=\"conocenos\" class=\"section-padding\">\n        <div class=\"container\">\n            <div class=\"about-grid\">\n                <div class=\"about-text\">\n                    <h2 class=\"section-title\" data-aos=\"fade-right\">Nuestra Esencia<\/h2>\n                    <p style=\"margin-bottom: 20px;\">En Nova Memorial, entendemos que cada vida es \u00fanica. M\u00e1s que una\n                        funeraria, somos una red de apoyo comprometida con preservar la memoria y brindar tranquilidad.\n                    <\/p>\n                    <p>Con m\u00e1s de una d\u00e9cada de experiencia, hemos transformado el concepto de despedida, enfoc\u00e1ndonos\n                        en la celebraci\u00f3n de la vida y el apoyo emocional a las familias.<\/p>\n\n                    <ul style=\"margin-top: 20px;\">\n                        <li class=\"check-list-item\">\n                            <i class=\"fas fa-check-circle check-icon\"><\/i>\n                            Atenci\u00f3n personalizada 24\/7\n                        <\/li>\n                        <li class=\"check-list-item\">\n                            <i class=\"fas fa-check-circle check-icon\"><\/i>\n                            Instalaciones modernas y serenas\n                        <\/li>\n                        <li class=\"check-list-item\">\n                            <i class=\"fas fa-check-circle check-icon\"><\/i>\n                            Planes de previsi\u00f3n transferibles\n                        <\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"about-image\">\n                    <img decoding=\"async\" src=\"https:\/\/tierrasanta.com.co\/wp-content\/uploads\/elementor\/thumbs\/IMG_3788-low-p5t4e1dmss8nez4r6w0ifl3xygiwniqndqt6jguuxk.jpg\"\n                        alt=\"Familia Nova Memorial\">\n                        <a href=\"https:\/\/develop.sitios24x7.com\/index.php\/nova-nosotros\" class=\"btn-full-bar\">\n                            <span class=\"btn-text-fw\">Descubre nuestra historia y legado<\/span>\n                            <i class=\"fas fa-arrow-right btn-icon-fw\"><\/i>\n                        <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- COUNTERS SECTION -->\n        <div class=\"counters-section\">\n            <div class=\"container counters-grid\">\n                <div class=\"counter-item\">\n                    <i class=\"fas fa-calendar-alt\"><\/i>\n                    <span class=\"counter-number\" data-target=\"27\">0<\/span>\n                    <span class=\"counter-text\">A\u00f1os de Experiencia<\/span>\n                <\/div>\n                <div class=\"counter-item\">\n                    <i class=\"fas fa-users\"><\/i>\n                    <span class=\"counter-number\" data-target=\"15000\">0<\/span>\n                    <span class=\"counter-text\">Familias Atendidas<\/span>\n                <\/div>\n                <div class=\"counter-item\">\n                    <i class=\"fas fa-map-marker-alt\"><\/i>\n                    <span class=\"counter-number\" data-target=\"12\">0<\/span>\n                    <span class=\"counter-text\">Ubicaciones<\/span>\n                <\/div>\n                <div class=\"counter-item\">\n                    <i class=\"fas fa-hands-helping\"><\/i>\n                    <span class=\"counter-number\" data-target=\"24\">0<\/span>\n                    <span class=\"counter-text\">Horas de Atenci\u00f3n<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"testimonios\" class=\"testimonials section-padding\">\n        <div class=\"container\">\n            <h2 class=\"section-title\">Lo que dicen las familias<\/h2>\n            <div style=\"text-align: center; margin-bottom: 40px; color: var(--accent);\">\n                <i class=\"fas fa-dove\" style=\"font-size: 1.5rem;\"><\/i>\n            <\/div>\n\n            <div class=\"carousel-viewport\">\n                <div class=\"carousel-track\" id=\"track\">\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"quote-symbol\">\u201c<\/div>\n                        <div class=\"testimonial-bubble\">\n                            <p>\"Much\u00edsimas gracias a Nova Memorial y al personal que estuvo involucrado en el arreglo\n                                est\u00e9tico de mi familiar. Se les agradece mucho por la labor que han hecho en esos\n                                momentos tan duros.\"<\/p>\n                        <\/div>\n                        <div class=\"testimonial-info\">\n                            <h4 class=\"author-name\">Mar\u00eda Contreras<\/h4>\n                            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"quote-symbol\">\u201c<\/div>\n                        <div class=\"testimonial-bubble\">\n                            <p>\"Gracias por el apoyo que nos brindaron. Hicieron aminorar mi dolor con cada uno de los\n                                detalles que tuvieron. Fue un homenaje de verdad que me hizo recordar cada momento feliz\n                                con mi esposo.\"<\/p>\n                        <\/div>\n                        <div class=\"testimonial-info\">\n                            <h4 class=\"author-name\">Evania Mendoza<\/h4>\n                            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"quote-symbol\">\u201c<\/div>\n                        <div class=\"testimonial-bubble\">\n                            <p>\"La atenci\u00f3n del personal fue impecable. Adquir\u00ed un plan a futuro hace a\u00f1os y al usarlo\n                                todo fluy\u00f3 sin problemas. Totalmente recomendados por su calidad humana y\n                                profesionalismo.\"<\/p>\n                        <\/div>\n                        <div class=\"testimonial-info\">\n                            <h4 class=\"author-name\">Roberto S\u00e1nchez<\/h4>\n                            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"quote-symbol\">\u201c<\/div>\n                        <div class=\"testimonial-bubble\">\n                            <p>\"En momentos de tanta confusi\u00f3n, su gu\u00eda fue una luz. Las instalaciones son hermosas y\n                                nos permitieron despedirnos con la dignidad que mi madre merec\u00eda. Gracias infinitas.\"\n                            <\/p>\n                        <\/div>\n                        <div class=\"testimonial-info\">\n                            <h4 class=\"author-name\">Carmen Villalobos<\/h4>\n                            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"quote-symbol\">\u201c<\/div>\n                        <div class=\"testimonial-bubble\">\n                            <p>\"Excelente servicio de previsi\u00f3n. Cuando lleg\u00f3 el momento, solo tuve que hacer una\n                                llamada y ellos se encargaron de absolutamente todo los tr\u00e1mites legales y log\u00edsticos.\"\n                            <\/p>\n                        <\/div>\n                        <div class=\"testimonial-info\">\n                            <h4 class=\"author-name\">Jorge Ram\u00edrez<\/h4>\n                            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"quote-symbol\">\u201c<\/div>\n                        <div class=\"testimonial-bubble\">\n                            <p>\"El respeto con el que tratan a los difuntos y a los familiares es admirable. No parecen\n                                una empresa, parecen una familia ayudando a otra familia. Bendiciones.\"<\/p>\n                        <\/div>\n                        <div class=\"testimonial-info\">\n                            <h4 class=\"author-name\">Luc\u00eda M\u00e9ndez<\/h4>\n                            <div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n\n            <div class=\"carousel-dots\" id=\"carouselDots\">\n                <span class=\"dot active\" onclick=\"goToSlide(0)\"><\/span>\n                <span class=\"dot\" onclick=\"goToSlide(1)\"><\/span>\n                <span class=\"dot\" onclick=\"goToSlide(2)\"><\/span>\n                <span class=\"dot\" onclick=\"goToSlide(3)\"><\/span>\n                <span class=\"dot\" onclick=\"goToSlide(4)\"><\/span>\n                <span class=\"dot\" onclick=\"goToSlide(5)\"><\/span>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"faq\" class=\"section-padding\" style=\"background-color: #f9f9f9;\">\n        <div class=\"container\">\n            <h2 class=\"section-title text-center\">Preguntas Frecuentes<\/h2>\n            <br><br>\n            <div class=\"faq-container\">\n                <div class=\"accordion-item\">\n                    <button class=\"accordion-header\">\n                        \u00bfQu\u00e9 incluye un plan de previsi\u00f3n? <i class=\"fas fa-chevron-down\"><\/i>\n                    <\/button>\n                    <div class=\"accordion-content\">\n                        <p>Nuestros planes incluyen servicio de recolecci\u00f3n, preparaci\u00f3n est\u00e9tica, sala de velaci\u00f3n por\n                            24 horas, servicio de cafeter\u00eda, y la opci\u00f3n de inhumaci\u00f3n o cremaci\u00f3n con urna incluida.\n                            Todo congelado al precio actual.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"accordion-item\">\n                    <button class=\"accordion-header\">\n                        \u00bfAtienden emergencias en la madrugada? <i class=\"fas fa-chevron-down\"><\/i>\n                    <\/button>\n                    <div class=\"accordion-content\">\n                        <p>S\u00ed, nuestro equipo de respuesta inmediata trabaja las 24 horas del d\u00eda, los 365 d\u00edas del a\u00f1o.\n                            Puede llamarnos en cualquier momento y nos encargaremos del traslado.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"accordion-item\">\n                    <button class=\"accordion-header\">\n                        \u00bfLos planes son transferibles? <i class=\"fas fa-chevron-down\"><\/i>\n                    <\/button>\n                    <div class=\"accordion-content\">\n                        <p>Absolutamente. Los planes de Nova Memorial son 100% transferibles a cualquier familiar o\n                            amigo que lo necesite, sin costos adicionales por el traspaso.<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"accordion-item\">\n                    <button class=\"accordion-header\">\n                        \u00bfCuentan con hornos crematorios propios? <i class=\"fas fa-chevron-down\"><\/i>\n                    <\/button>\n                    <div class=\"accordion-content\">\n                        <p>S\u00ed, disponemos de infraestructura propia, incluyendo hornos crematorios certificados que\n                            cumplen con todas las normas sanitarias y ambientales.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"ubicacion\" class=\"map-section\">\n        <iframe class=\"map-iframe\"\n            src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3762.536376512345!2d-99.16781258465163!3d19.432607686884197!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1f8cb1c49615b%3A0x62c011e40a0499d6!2sPaseo%20de%20la%20Reforma%2C%20Ciudad%20de%20M%C3%A9xico%2C%20CDMX!5e0!3m2!1ses-419!2smx!4v1652136000000!5m2!1ses-419!2smx\"\n            allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\n    <\/section>\n\n    <section id=\"contacto\" class=\"section-padding\">\n        <div class=\"container\">\n            <h2 class=\"section-title text-center\">Contactanos<\/h2>\n            <br><br>\n            <div class=\"contact-grid\">\n                <div>\n                    <h3>Cont\u00e1ctanos<\/h3>\n                    <p style=\"margin-bottom: 30px;\">Un asesor experto est\u00e1 listo para resolver tus dudas de inmediato.\n                    <\/p>\n\n                    <div class=\"contact-info-item\">\n                        <div class=\"contact-icon-circle\">\n                            <i class=\"fas fa-phone-alt\"><\/i>\n                        <\/div>\n                        <span style=\"font-weight: 500;\">(555) 123-4567<\/span>\n                    <\/div>\n\n                    <div class=\"contact-info-item\">\n                        <div class=\"contact-icon-circle\">\n                            <i class=\"fas fa-envelope\"><\/i>\n                        <\/div>\n                        <span style=\"font-weight: 500;\">contacto@novamemorial.com<\/span>\n                    <\/div>\n\n                    <div class=\"contact-info-item\">\n                        <div class=\"contact-icon-circle\">\n                            <i class=\"fas fa-map-marker-alt\"><\/i>\n                        <\/div>\n                        <span style=\"font-weight: 500;\">Av. Reforma 123, CDMX<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"contact-iframe-container\">\n                    <iframe scrolling=\"auto\"\n                        src=\"https:\/\/sales.portal24x7.com\/document.php?module=form&option=optin&action=show&parm1=688&parm2=2\"\n                        frameborder=\"0\" height=\"500\" width=\"100%\"><\/iframe>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <footer>\n        <div class=\"container\">\n            <div class=\"footer-grid\">\n                <div class=\"footer-col\">\n                    <h4 style=\"font-family: 'Playfair Display'; font-size: 1.4rem;\">NOVA MEMORIAL<\/h4>\n                    <p style=\"opacity: 0.8; line-height: 1.8;\">Una historia de compromiso y excelencia humana, brindando\n                        luz en los momentos dif\u00edciles desde 1997.<\/p>\n                <\/div>\n                <div class=\"footer-col\">\n                    <h4>Enlaces R\u00e1pidos<\/h4>\n                    <ul class=\"footer-links\">\n                        <li><a href=\"#inicio\" class=\"nav-link-footer\">Inicio<\/a><\/li>\n                        <li><a href=\"#conocenos\" class=\"nav-link-footer\">Nuestra Esencia<\/a><\/li>\n                        <li><a href=\"#planes\" class=\"nav-link-footer\">Planes a Futuro<\/a><\/li>\n                        <li><a href=\"#contacto\" class=\"nav-link-footer\">Contacto<\/a><\/li>\n                        <li><a href=\"#\">Aviso de Privacidad<\/a><\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"footer-col\">\n                    <h4>S\u00edguenos<\/h4>\n                    <div style=\"font-size: 1.8rem; margin-top: 15px;\">\n                        <a href=\"#\" style=\"color: #fff; margin-right: 20px;\"><i class=\"fab fa-facebook\"><\/i><\/a>\n                        <a href=\"#\" style=\"color: #fff; margin-right: 20px;\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                        <a href=\"#\" style=\"color: #fff;\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"copyright\">\n                <p>\u00a9 2026 Nova Memorial. Todos los derechos reservados.<\/p>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n    <div class=\"scroll-top-btn pulse-effect\" id=\"scrollTopBtn\">\n        <i class=\"fas fa-arrow-up\"><\/i>\n    <\/div>\n\n    <script>\n        (function (d, t) {\n            var BASE_URL = \"https:\/\/chat.portal24x7.cloud\";\n            var g = d.createElement(t), s = d.getElementsByTagName(t)[0];\n            g.src = BASE_URL + \"\/packs\/js\/sdk.js\";\n            g.async = true;\n            s.parentNode.insertBefore(g, s);\n            g.onload = function () {\n                window.chatwootSDK.run({\n                    websiteToken: 'M6BdQiVyJ4GHpT6ZTvaDFiEX',\n                    baseUrl: BASE_URL\n                })\n            }\n        })(document, \"script\");\n    <\/script>\n\n    <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n    <script>\n        \/\/ Inicializar AOS\n        AOS.init();\n        \n        \/\/ --- 1. CONFIGURACI\u00d3N GLOBAL ---\n        const header = document.getElementById('main-header');\n        const scrollBtn = document.getElementById('scrollTopBtn');\n        const sections = document.querySelectorAll('section');\n        const navLinks = document.querySelectorAll('.nav-link');\n        const headerHeight = 90; \/\/ Altura aproximada del header para c\u00e1lculos de offset\n\n        \/\/ --- 2. SISTEMA DE SCROLL SUAVE (JAVASCRIPT) ---\n        \/\/ Remplaza el comportamiento nativo para garantizar suavidad y precisi\u00f3n\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n            anchor.addEventListener('click', function (e) {\n                const targetId = this.getAttribute('href');\n\n                \/\/ Ignorar enlaces vac\u00edos o solo #\n                if (targetId === '#' || targetId === '') return;\n\n                \/\/ Prevenir salto brusco nativo\n                e.preventDefault();\n\n                const targetElement = document.querySelector(targetId);\n                if (targetElement) {\n                    \/\/ Cerrar men\u00fa m\u00f3vil si est\u00e1 abierto\n                    const mobileMenu = document.getElementById('mobile-menu');\n                    if (mobileMenu.classList.contains('active')) {\n                        mobileMenu.classList.remove('active');\n                    }\n\n                    \/\/ Calcular posici\u00f3n exacta restando el header\n                    const elementPosition = targetElement.getBoundingClientRect().top;\n                    const offsetPosition = elementPosition + window.pageYOffset - headerHeight;\n\n                    \/\/ Ejecutar scroll suave\n                    window.scrollTo({\n                        top: offsetPosition,\n                        behavior: \"smooth\"\n                    });\n                }\n            });\n        });\n\n        \/\/ Logica especifica para el boton \"Volver Arriba\"\n        scrollBtn.addEventListener('click', () => {\n            window.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        });\n\n        \/\/ --- 3. EVENTOS DE SCROLL (HEADER Y BOT\u00d3N FLOTANTE) ---\n        window.addEventListener('scroll', () => {\n            \/\/ Cambio de estilo del Header (Transparente -> Blanco)\n            if (window.scrollY > 50) {\n                header.classList.add('scrolled');\n            } else {\n                header.classList.remove('scrolled');\n            }\n\n            \/\/ Mostrar\/Ocultar bot\u00f3n flotante\n            if (window.scrollY > 300) {\n                scrollBtn.classList.add('visible');\n            } else {\n                scrollBtn.classList.remove('visible');\n            }\n\n            \/\/ --- 4. ACTIVE LINK (RESALTAR SECCI\u00d3N ACTUAL) ---\n            let current = '';\n            \/\/ Offset para que el link cambie antes de llegar exactamente al top\n            const activeOffset = headerHeight + 50;\n\n            sections.forEach(section => {\n                const sectionTop = section.offsetTop;\n                const sectionHeight = section.clientHeight;\n\n                if (window.scrollY >= (sectionTop - activeOffset)) {\n                    current = section.getAttribute('id');\n                }\n            });\n\n            navLinks.forEach(link => {\n                link.classList.remove('active-link');\n                if (link.getAttribute('href').includes(current)) {\n                    link.classList.add('active-link');\n                }\n            });\n        });\n\n        \/\/ --- 5. CARRUSEL DE TEXTO (TOP BAR) ---\n        const msgElement = document.getElementById('top-msg');\n        const messages = [\n            \"Atenci\u00f3n Inmediata las 24 Horas\",\n            \"Planes a Futuro Transferibles\",\n            \"Somos parte de tu Familia\"\n        ];\n        let msgIndex = 0;\n\n        function animateText() {\n            \/\/ Reinicia la animaci\u00f3n CSS removiendo y a\u00f1adiendo la clase\n            msgElement.classList.remove('slide-animate');\n            void msgElement.offsetWidth; \/\/ Forzar reflow del navegador\n            msgElement.innerText = messages[msgIndex];\n            msgElement.classList.add('slide-animate');\n            msgIndex = (msgIndex + 1) % messages.length;\n        }\n\n        \/\/ Iniciar ciclo de mensajes\n        animateText();\n        setInterval(animateText, 4500); \/\/ Cambia cada 4.5 segundos\n\n        \/\/ --- 6. MEN\u00da HAMBURGUESA (M\u00d3VIL) ---\n        const hamburgerBtn = document.getElementById('hamburger-btn');\n        const closeBtn = document.getElementById('close-btn');\n        const mobileMenu = document.getElementById('mobile-menu');\n\n        function toggleMenu() {\n            mobileMenu.classList.toggle('active');\n        }\n\n        hamburgerBtn.addEventListener('click', toggleMenu);\n        closeBtn.addEventListener('click', toggleMenu);\n        \n        \/\/ --- CERRAR MEN\u00da AL PULSAR ENLACE (M\u00d3VIL) ---\n        \/\/ 1. Seleccionamos todos los enlaces dentro del men\u00fa m\u00f3vil\n        const menuLinks = document.querySelectorAll('.mobile-nav-links a');\n    \n        \/\/ 2. A cada enlace le agregamos un \"o\u00eddo\" para detectar el clic\n        menuLinks.forEach(link => {\n            link.addEventListener('click', () => {\n                \/\/ Si el men\u00fa est\u00e1 abierto (tiene la clase active), ci\u00e9rralo\n                if (mobileMenu.classList.contains('active')) {\n                    toggleMenu(); \n                }\n            });\n        });\n\n        \/\/ --- 7. CONTADORES ANIMADOS (ESTAD\u00cdSTICAS) ---\n        const counters = document.querySelectorAll('.counter-number');\n        const speed = 200; \/\/ Velocidad de incremento\n\n        const animateCounters = () => {\n            counters.forEach(counter => {\n                const updateCount = () => {\n                    const target = +counter.getAttribute('data-target');\n                    const count = +counter.innerText;\n\n                    \/\/ Calcular paso de incremento\n                    const inc = target \/ speed;\n\n                    if (count < target) {\n                        counter.innerText = Math.ceil(count + inc);\n                        setTimeout(updateCount, 20);\n                    } else {\n                        counter.innerText = target;\n                        \/\/ Formato abreviado si es > 1000 (ej. +15k)\n                        if (target > 1000) counter.innerText = \"+\" + (target \/ 1000) + \"k\";\n                    }\n                };\n                updateCount();\n            });\n        };\n\n        \/\/ Intersection Observer para activar contadores solo cuando son visibles\n        let counted = false;\n        const sectionCounters = document.querySelector('.counters-section');\n\n        const observer = new IntersectionObserver((entries) => {\n            if (entries[0].isIntersecting && !counted) {\n                animateCounters();\n                counted = true;\n            }\n        }, { threshold: 0.5 });\n\n        if (sectionCounters) {\n            observer.observe(sectionCounters);\n        }\n\n        \/\/ --- 8. CARRUSEL DE TESTIMONIOS (L\u00d3GICA NUEVA TIPO TRACK) ---\n        const track = document.getElementById('track');\n        const dotsNav = document.getElementById('carouselDots');\n        const dots = Array.from(dotsNav.children);\n\n        let currentIndex = 0;\n        const totalSlides = 6; \/\/ Total de testimonios\n        let itemsPerScreen = 1; \/\/ Por defecto m\u00f3vil\n\n        \/\/ Funci\u00f3n para actualizar cu\u00e1ntos se ven seg\u00fan el ancho de pantalla\n        function updateItemsPerScreen() {\n            if (window.innerWidth >= 768) {\n                itemsPerScreen = 2; \/\/ Escritorio: 2 a la vez\n            } else {\n                itemsPerScreen = 1; \/\/ M\u00f3vil: 1 a la vez\n            }\n        }\n\n        \/\/ Funci\u00f3n principal para mover el carrusel\n        function updateCarousel() {\n            \/\/ Calcular porcentaje a mover\n            \/\/ Si hay 2 items, cada uno mide 50%. Si muevo index 1, muevo 50%.\n            const percentage = -(currentIndex * (100 \/ itemsPerScreen));\n            track.style.transform = `translateX(${percentage}%)`;\n\n            \/\/ Actualizar clase activa en los puntos\n            dots.forEach(dot => dot.classList.remove('active'));\n            \/\/ El punto activo corresponde al \u00edndice actual\n            \/\/ Nota: Si mostramos 2, el index puede llegar hasta total - 2\n            if (dots[currentIndex]) {\n                dots[currentIndex].classList.add('active');\n            }\n        }\n\n        \/\/ Funci\u00f3n para ir a un slide espec\u00edfico (clicks en dots)\n        function goToSlide(index) {\n            \/\/ Ajustar l\u00edmite para que no quede espacio blanco al final en desktop\n            const maxIndex = totalSlides - itemsPerScreen;\n\n            if (index > maxIndex) {\n                currentIndex = 0; \/\/ Volver al inicio si excede\n            } else {\n                currentIndex = index;\n            }\n            updateCarousel();\n        }\n\n        \/\/ Auto-play\n        function autoSlide() {\n            \/\/ L\u00f3gica de bucle\n            const maxIndex = totalSlides - itemsPerScreen;\n\n            if (currentIndex >= maxIndex) {\n                currentIndex = 0;\n            } else {\n                currentIndex++;\n            }\n            updateCarousel();\n        }\n\n        \/\/ Inicializaci\u00f3n y Eventos\n        updateItemsPerScreen();\n        window.addEventListener('resize', () => {\n            updateItemsPerScreen();\n            updateCarousel(); \/\/ Reajustar posici\u00f3n al cambiar tama\u00f1o\n        });\n\n        \/\/ Intervalo de tiempo\n        let slideInterval = setInterval(autoSlide, 4000);\n\n        \/\/ (Opcional) Pausar al pasar el mouse\n        track.addEventListener('mouseenter', () => {\n            clearInterval(slideInterval);\n        });\n        track.addEventListener('mouseleave', () => {\n            slideInterval = setInterval(autoSlide, 4000);\n        });\n\n        \/\/ --- 9. ACORDE\u00d3N (FAQ) ---\n        const accHeaders = document.querySelectorAll(\".accordion-header\");\n\n        accHeaders.forEach(acc => {\n            acc.addEventListener(\"click\", function () {\n                \/\/ Alternar clase activa\n                this.classList.toggle(\"active\");\n\n                \/\/ Animar panel\n                const panel = this.nextElementSibling;\n                if (panel.style.maxHeight) {\n                    panel.style.maxHeight = null;\n                } else {\n                    panel.style.maxHeight = panel.scrollHeight + \"px\";\n                }\n            });\n        });\n    <\/script>\n  \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Atenci\u00f3n Inmediata las 24 Horas nova \u2726 memorial Inicio Con\u00f3cenos Testimonios Ubicaci\u00f3n Contacto Planes de prevision Emergencia NOVA MEMORIAL Inicio Con\u00f3cenos Testimonios Preguntas Contacto Planes de prevision Emergencia Honrando el Legado de Quienes Amas Acompa\u00f1ando a las familias mexicanas con respeto, dignidad y transparencia en los momentos m\u00e1s importantes. Asistencia Inmediata Respaldados por Asociaciones Internacionales [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-59","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":88,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/59\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/pages\/59\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/develop.sitios24x7.com\/index.php\/wp-json\/wp\/v2\/media?parent=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}