{"id":3009,"date":"2022-06-22T08:36:02","date_gmt":"2022-06-22T08:36:02","guid":{"rendered":"https:\/\/velonweb.com\/servicios\/"},"modified":"2026-01-31T15:14:20","modified_gmt":"2026-01-31T15:14:20","slug":"servicios","status":"publish","type":"page","link":"https:\/\/velonweb.com\/es\/servicios\/","title":{"rendered":"Servicios"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3009\" class=\"elementor elementor-3009 elementor-1354\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d4bec9 e-con-full e-flex e-con e-parent\" data-id=\"8d4bec9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c38c013 elementor-widget elementor-widget-html\" data-id=\"c38c013\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"terminal-loader\">\n  <div class=\"terminal-header\">\n    <div class=\"terminal-title\">VelonWeb<\/div>\n    <div class=\"terminal-controls\">\n      <div class=\"control close\"><\/div>\n      <div class=\"control minimize\"><\/div>\n      <div class=\"control maximize\"><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"text-container\">\n    <div class=\"text-line\" id=\"line1\"><\/div>\n    <div class=\"text-line\" id=\"line2\"><\/div>\n    <div class=\"cursor\"><\/div>\n  <\/div>\n<\/div>\n<style>\n  @keyframes blinkCursor {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  .terminal-loader {\n    border: 0.1em solid #333;\n    background-color: #1a1a1a;\n    color: #748D92;\n    font-family: \"Courier New\", Courier, monospace;\n    font-weight: bold;\n    font-size: 1em;\n    padding: 1.5em 1em;\n    width: 48em;\n    max-width: 95vw;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    border-radius: 4px;\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n    direction: ltr; \/* Left-to-right *\/\n    text-align: left; \/* Left-to-right *\/\n    margin: auto;\n  }\n\n  .terminal-header {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 1.5em;\n    background-color: #333;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    padding: 0 0.4em;\n    box-sizing: border-box;\n  }\n\n  .terminal-controls {\n    float: right;\n  }\n\n  .control {\n    display: inline-block;\n    width: 0.6em;\n    height: 0.6em;\n    margin-left: 0.4em;\n    border-radius: 50%;\n    background-color: #777;\n  }\n\n  .control.close {\n    background-color: #e33;\n  }\n\n  .control.minimize {\n    background-color: #ee0;\n  }\n\n  .control.maximize {\n    background-color: #0b0;\n  }\n\n  .terminal-title {\n    float: left;\n    line-height: 1.5em;\n    color: #eee;\n  }\n\n  .text-container {\n    margin-top: 2em;\n    font-size: 1.1em;\n    position: relative;\n    min-height: 4em;\n  }\n\n  .text-line {\n    display: block;\n    white-space: normal;\n    word-break: break-word;\n    overflow-wrap: break-word;\n    font-weight: bold;\n    overflow: hidden;\n  }\n\n  .cursor {\n    position: absolute;\n    bottom: 0;\n    left: 0; \/* Left-to-right *\/\n    width: 0.5em;\n    height: 1.2em;\n    background-color: #748D92;\n    animation: blinkCursor 0.7s infinite;\n    opacity: 0;\n  }\n\n  \/* Animation *\/\n  @keyframes writeLine1 {\n    0% { width: 0; }\n    100% { width: 100%; }\n  }\n\n  @keyframes writeLine2 {\n    0% { width: 0; }\n    100% { width: 100%; }\n  }\n\n  @keyframes moveCursor {\n    0% { bottom: 0; left: 0; } \/* Left-to-right *\/\n    50% { bottom: 0; left: 0; } \/* Left-to-right *\/\n    51% { bottom: -1.3em; left: 0; opacity: 1; } \/* Left-to-right *\/\n    100% { bottom: -1.3em; left: 0; opacity: 1; } \/* Left-to-right *\/\n  }\n\n  #line1 {\n    animation: writeLine1 4s forwards;\n  }\n\n  #line2 {\n    width: 0;\n    animation: writeLine2 4s forwards;\n    animation-delay: 4s;\n  }\n\n  .cursor {\n    animation:\n      blinkCursor 0.7s infinite,\n      moveCursor 8s forwards;\n  }\n\n  \/* Responsive *\/\n  @media (max-width: 600px) {\n    .terminal-loader {\n      font-size: 0.95em;\n      padding: 1.2em 1em;\n    }\n\n    .text-container {\n      font-size: 1em;\n      min-height: 5em;\n    }\n\n    .cursor {\n      display: none;\n    }\n  }\n<\/style>\n<script>\n  document.addEventListener('DOMContentLoaded', function() {\n    const line1 = document.getElementById('line1');\n    const line2 = document.getElementById('line2');\n    const cursor = document.querySelector('.cursor');\n\n    const fullText1 = \"En VelonWeb ofrecemos soluciones de dise\u00f1o web profesionales a precios asequibles\";\n    const fullText2 = \"y con alta calidad, para ayudarte a construir una fuerte presencia digital que refleje el profesionalismo de tu proyecto.\";\n\n    cursor.style.opacity = '1';\n\n    let i = 0;\n    const typeLine1 = setInterval(() => {\n      line1.textContent = fullText1.substring(0, i);\n      i++;\n      if (i > fullText1.length) {\n        clearInterval(typeLine1);\n        let j = 0;\n        const typeLine2 = setInterval(() => {\n          line2.textContent = fullText2.substring(0, j);\n          j++;\n          if (j > fullText2.length) {\n            clearInterval(typeLine2);\n            cursor.style.opacity = '0';\n          }\n        }, 70);\n      }\n    }, 70);\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-756cee74 e-flex e-con-boxed e-con e-parent\" data-id=\"756cee74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-34cb18a6 e-con-full e-flex e-con e-child\" data-id=\"34cb18a6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69c35478 ct-advanced-heading elementor-widget elementor-widget-heading\" data-id=\"69c35478\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Paquetes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-174a1953 e-con-full e-flex e-con e-child\" data-id=\"174a1953\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cae6a45 elementor-align-left elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"cae6a45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/velonweb.com\/es\/contacto\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Dise\u00f1a tu propio paquete<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e63c48f e-grid e-con-boxed e-con e-parent\" data-id=\"e63c48f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29f81481 elementor-widget elementor-widget-html\" data-id=\"29f81481\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!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  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Paquete de Lanzamiento\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            Un paquete ideal para quienes necesitan una p\u00e1gina profesional que presente la empresa y los servicios de forma breve y clara.\n          <\/p>\n         \n\n          <!-- Servicios incluidos -->\n          <div class=\"services-grid mt-6\">\n            <!-- Columna 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o de sitio de una sola p\u00e1gina<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Sitio en un solo idioma<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dominio con licencia y seguro<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Alojamiento con licencia y seguro<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o usando una plantilla predefinida<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o interactivo (transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Compatible con todos los dispositivos<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Columna 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Formulario de contacto sencillo<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Integraci\u00f3n de Google Maps<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Enlaces a redes sociales<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Configuraci\u00f3n SEO b\u00e1sica<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Mantenimiento y ajustes b\u00e1sicos durante la suscripci\u00f3n<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Soporte t\u00e9cnico continuo durante la suscripci\u00f3n<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Servicios no incluidos -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Correos electr\u00f3nicos profesionales<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6\u064412 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Integraci\u00f3n de bot\u00f3n directo de WhatsApp<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">A\u00f1adir contenido de presentaci\u00f3n<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">P\u00e1gina de valoraciones de la empresa\/servicio<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Dise\u00f1o de perfil de presentaci\u00f3n electr\u00f3nico<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Mostrar valoraciones de clientes<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Control total del sitio con capacitaci\u00f3n b\u00e1sica<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Bot\u00f3n de suscripci\u00f3n -->\n          <div class=\"mt-1 text-center\">\n\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6b0785 elementor-widget elementor-widget-html\" data-id=\"d6b0785\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!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  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Paquete B\u00e1sico\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            Paquete ideal para peque\u00f1as empresas o personas que desean una presencia digital simple y profesional.\n          <\/p>\n        \n\n          <!-- Servicios incluidos -->\n          <div class=\"services-grid mt-6\">\n            <!-- Columna 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o de sitio con 4 p\u00e1ginas<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Sitio en un solo idioma<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dominio con licencia y seguro<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Alojamiento con licencia y seguro<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o usando una plantilla predefinida<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o interactivo (transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Compatible con todos los dispositivos<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Columna 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Formulario de contacto<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Integraci\u00f3n de Google Maps<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Enlaces a redes sociales<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Configuraci\u00f3n SEO b\u00e1sica<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Mantenimiento y ajustes b\u00e1sicos durante la suscripci\u00f3n<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Soporte t\u00e9cnico continuo durante la suscripci\u00f3n<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Servicios no incluidos -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Correos electr\u00f3nicos profesionales<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Integraci\u00f3n de bot\u00f3n directo de WhatsApp en el sitio<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">A\u00f1adir contenido de presentaci\u00f3n<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">P\u00e1gina de valoraciones de la empresa\/servicio<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Dise\u00f1o de perfil de presentaci\u00f3n electr\u00f3nico<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Mostrar valoraciones de clientes<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Control total del sitio con capacitaci\u00f3n b\u00e1sica<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Bot\u00f3n de suscripci\u00f3n -->\n          <div class=\"mt-1 text-center\">\n\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5558bc52 e-flex e-con-boxed e-con e-parent\" data-id=\"5558bc52\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-41c5c2e7 e-con-full e-flex e-con e-child\" data-id=\"41c5c2e7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ae7d2a1 elementor-widget elementor-widget-html\" data-id=\"6ae7d2a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!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  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Paquete Avanzado\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            Paquete integral para instituciones que necesitan un sitio en dos idiomas, una apariencia profesional y funciones adicionales.\n          <\/p>\n          \n\n          <!-- Servicios incluidos -->\n          <div class=\"services-grid mt-6\">\n            <!-- Columna 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o de sitio hasta 6 p\u00e1ginas<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Sitio en dos idiomas<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dominio con licencia y seguro<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Alojamiento con licencia y seguro<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o personalizado de p\u00e1ginas<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o interactivo (transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Compatible con todos los dispositivos<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Formulario de contacto<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Mostrar valoraciones de clientes<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Columna 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Integraci\u00f3n de Google Maps<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Enlaces a redes sociales<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">SEO b\u00e1sico y mejorado<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dos correos electr\u00f3nicos profesionales<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Integraci\u00f3n del bot\u00f3n directo de WhatsApp en el sitio<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">A\u00f1adir contenido de presentaci\u00f3n<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">P\u00e1gina de valoraciones de la empresa\/servicio<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Mantenimiento y ajustes b\u00e1sicos durante la suscripci\u00f3n<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Soporte t\u00e9cnico continuo durante la suscripci\u00f3n<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Servicios no incluidos -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Dise\u00f1o de perfil de presentaci\u00f3n electr\u00f3nico<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Control total del sitio con capacitaci\u00f3n b\u00e1sica<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-652fca27 e-con-full e-flex e-con e-child\" data-id=\"652fca27\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-297f12c7 elementor-widget elementor-widget-html\" data-id=\"297f12c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!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  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Paquete Profesional\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            La soluci\u00f3n ideal para empresas grandes que desean un sitio completo y destacado con un dise\u00f1o \u00fanico y rendimiento profesional.\n          <\/p>\n          \n\n          <!-- Servicios incluidos -->\n          <div class=\"services-grid mt-6\">\n            <!-- Columna 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o de sitio de hasta 8 p\u00e1ginas<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Sitio con soporte hasta 3 idiomas<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dominio con licencia y seguro<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Alojamiento con licencia y seguro<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o profesional totalmente personalizado<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o altamente interactivo (animaciones)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Compatible con todos los dispositivos<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Formularios de contacto y reserva<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Integraci\u00f3n de Google Maps<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Soporte t\u00e9cnico continuo durante la suscripci\u00f3n<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Columna 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Enlaces a redes sociales<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">SEO completo y profesional<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Cinco correos electr\u00f3nicos profesionales<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Integraci\u00f3n del bot\u00f3n directo de WhatsApp en el sitio<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">A\u00f1adir contenido de presentaci\u00f3n<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">P\u00e1gina de valoraciones de la empresa\/servicio<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Dise\u00f1o de perfil de presentaci\u00f3n electr\u00f3nico<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Mostrar valoraciones de clientes<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Control total del sitio con capacitaci\u00f3n b\u00e1sica<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Mantenimiento y ajustes b\u00e1sicos durante la suscripci\u00f3n<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a1d7e64 e-flex e-con-boxed e-con e-parent\" data-id=\"a1d7e64\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb77f97 elementor-widget elementor-widget-html\" data-id=\"cb77f97\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u0641\u0627\u0635\u0644 \u0645\u062a\u062f\u0631\u062c \u0645\u0639 \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643 --><div class=\"fade-divider with-glow\"><\/div><style>.fade-divider {\n  position: relative;\n  width: 100%;\n  height: 5px;\n  background: linear-gradient(to right, transparent, #748D92, transparent);\n  margin: 60px 0;\n  overflow: hidden;\n}\n\n.with-glow::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -50%;\n  width: 50%;\n  height: 100%;\n  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n  animation: glowMove 2s linear infinite;\n}\n\n@keyframes glowMove {\n  from {\n    left: -50%;\n  }\n  to {\n    left: 90%;\n  }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f3114ac e-flex e-con-boxed e-con e-parent\" data-id=\"f3114ac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e144b2 elementor-widget elementor-widget-html\" data-id=\"6e144b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html dir=\"rtl\" lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Viaje de dise\u00f1o de sitios web \u2014 L\u00ednea de tiempo RTL (Centrado, sin caja)<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root{\n            --ink:#212A31;      \/* Fondo oscuro *\/\n            --slate:#393E46;    \/* De su paleta *\/\n            --steel:#748D92;    \/* De su paleta *\/\n            --mist:#A5BFCC;     \/* De su paleta *\/\n            --text:#ecf3f8;     \/* Texto principal *\/\n            --text2:#cfdbe4;    \/* Texto secundario *\/\n        }\n        *{box-sizing:border-box}\n        body{ margin:0; font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;  color:var(--text); overflow-x:hidden; overscroll-behavior:auto; -webkit-overflow-scrolling:touch }\n\n        .container{ width:min(1100px,94vw); margin:0 auto }\n        header{ text-align:center; margin:0 0 36px }\n        h1{ margin:.2rem 0 .2rem; font-size:clamp(1.6rem,3.4vw,2.6rem) }\n        .subtitle{ color:var(--text2) }\n\n        \/* ===== L\u00ednea de tiempo ===== *\/\n        .timeline{ position:relative; margin:40px auto 10px }\n        .axis{ position:absolute; right:50%; transform:translateX(50%); top:0; bottom:0; width:3px; background:linear-gradient(180deg,#56636d,#243039); border-radius:6px; pointer-events:none; z-index:0 }\n        .axis:after{ content:\"\"; position:absolute; right:50%; transform:translateX(50%); width:9px; height:9px; border-radius:50%; background:radial-gradient(circle, var(--mist), #6f8a93 60%, transparent 62%); filter:drop-shadow(0 0 9px rgba(165,191,204,.85)); animation:drop 6s linear infinite; top:-80px }\n        @keyframes drop{ 0%{top:-80px; opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%; opacity:0} }\n\n        \/* ===== Paso + T\u00edtulo central ===== *\/\n        .segment{ position:relative }\n        .step{ position:relative; margin:80px 0 0; display:flex; justify-content:center; align-items:center; gap:60px }\n        .dot{ position:absolute; right:50%; transform:translateX(50%); width:16px; height:16px; border-radius:50%; background:var(--mist); box-shadow:0 0 0 6px rgba(165,191,204,.16), 0 8px 22px rgba(0,0,0,.5); pointer-events:none; z-index:1 }\n\n        \/* Forma a la izquierda, t\u00edtulo a la derecha *\/\n        .shape{ position:relative; transform:translateZ(0); filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); pointer-events:none; animation:float 6s ease-in-out infinite; z-index:1; order: 1; }\n        @keyframes float{ 0%,100%{ transform:translateZ(0) } 50%{ transform:translateY(-8px) } }\n\n        \/* T\u00edtulo y texto \u2014 a la derecha *\/\n        .title{ text-align:right; max-width:min(420px,40vw); position:relative; z-index:2; order: 2; }\n        .title .eyebrow{ color:var(--text2); font-size:.9rem; margin-bottom:.2rem }\n        .title h2{ margin:0; font-size:1.28rem; font-weight:700 }\n        .title strong{ color:var(--mist) }\n\n        \/* Descripci\u00f3n entre los pasos en el medio de la l\u00ednea *\/\n        .mid{ position:relative; height:140px; margin: 30px 0 }\n        .mid p{ position:absolute; right:50%; transform:translate(50%,-50%); top:50%; margin:0; text-align:center; color:var(--text2); max-width:min(720px,90vw); line-height:1.9; pointer-events:none }\n\n        \/* ===== Formas ===== *\/\n        .contract{ width:120px; height:120px; position:relative; top:-10px }\n        .contract svg{ display:block }\n        .write line{ stroke-dasharray:110; stroke-dashoffset:110; animation:write 2.1s ease-out forwards var(--d,.2s) }\n        @keyframes write{ to{ stroke-dashoffset:0 } }\n        .pen-move{ transform-origin:66px 58px; animation:pen 2.6s ease-in-out infinite .1s }\n        @keyframes pen{ 0%,100%{ transform:translate(-2px,0) rotate(2deg) } 50%{ transform:translate(2px,-1px) rotate(-3deg) } }\n\n        .screen{ width:110px; height:76px; border-radius:10px; background:#0e151a; border:1px solid #2b333a; position:relative; overflow:hidden; top:-10px }\n        .screen .bar{ height:10px; background:linear-gradient(90deg,#393E46,#2a3640); border-bottom:1px solid #2d3842 }\n        .skeleton .block{ position:absolute; background:linear-gradient(90deg,#3a4650 0%, #586775 50%, #3a4650 100%); background-size:200% 100%; animation:shimmer 2.2s infinite; border-radius:7px; opacity:.85 }\n        @keyframes shimmer{ 0%{background-position:0 0} 100%{background-position:200% 0} }\n\n        .cards .c{ position:absolute; border-radius:7px; opacity:0; transform:translateY(8px) scale(.96); animation:pop .8s var(--t,.2s) forwards }\n        @keyframes pop{ to{ opacity:1; transform:translateY(0) scale(1) } }\n\n        \/* Notas *\/\n        .notes{ margin:46px auto 8px }\n        .notes h3{ margin:0 0 10px; font-size:1.15rem; text-align:center }\n        .notes ul{ margin:0; padding:0 1rem; list-style:none }\n        .notes li{ margin:.55rem 0; color:var(--text2); position:relative; padding-inline-start:1.1rem }\n        .notes li::before{ content:\"\u2022\"; position:absolute; right:0; color:var(--mist) }\n\n        \/* Aumentar el espacio entre el paso 3 y 4 *\/\n        .segment:nth-child(4) .step { margin-top: 100px; }\n\n        @media (max-width:720px){  \n            .screen{ width:98px; height:66px }  \n            .step{ flex-direction: column; gap: 20px; }\n            .title{ text-align: center; max-width: 90vw; }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <header>\n            <h1>Viaje de dise\u00f1o de sitios web<\/h1>\n            <p class=\"subtitle\"><\/p>\n        <\/header>\n\n        <section class=\"timeline\">\n            <span class=\"axis\" aria-hidden=\"true\"><\/span>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape contract\">\n                        <svg width=\"120\" height=\"120\" viewBox=\"0 0 76 76\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-label=\"Contrato\">\n                            <rect x=\"14\" y=\"10\" width=\"48\" height=\"56\" rx=\"6\" fill=\"#0f151a\" stroke=\"#6f8792\"\/>\n                            <g class=\"write\" stroke=\"#A5BFCC\" stroke-width=\"2\" stroke-linecap=\"round\">\n                                <line x1=\"22\" y1=\"24\" x2=\"56\" y2=\"24\" style=\"--d:.2s\"\/>\n                                <line x1=\"22\" y1=\"32\" x2=\"50\" y2=\"32\" style=\"--d:.45s\"\/>\n                                <line x1=\"22\" y1=\"40\" x2=\"54\" y2=\"40\" style=\"--d:.7s\"\/>\n                                <line x1=\"22\" y1=\"48\" x2=\"44\" y2=\"48\" style=\"--d:.95s\"\/>\n                            <\/g>\n                            <g class=\"pen-move\" transform=\"translate(8,6)\">\n                                <path d=\"M56 52 l8 8\" stroke=\"#A5BFCC\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                                <path d=\"M50 58 l12 2\" stroke=\"#748D92\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                                <polygon points=\"60,54 66,60 64,62 58,56\" fill=\"#93afbd\"\/>\n                            <\/g>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Fase 1<\/div>\n                        <h2><strong>El Comienzo<\/strong> \u2014 Firma del contrato<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>Se recibe el contenido del cliente (textos, im\u00e1genes, logo, datos b\u00e1sicos) para que podamos construir el sitio web.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen skeleton\">\n                            <div class=\"bar\"><\/div>\n                            <div class=\"block\" style=\"top:14px; right:8px; width:78px; height:10px\"><\/div>\n                            <div class=\"block\" style=\"top:30px; right:8px; width:42px; height:8px\"><\/div>\n                            <div class=\"block\" style=\"top:44px; right:8px; width:60px; height:8px\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Fase 2<\/div>\n                        <h2><strong>Primer borrador<\/strong> \u2014 Dise\u00f1o inicial<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>Se le muestra al cliente el dise\u00f1o inicial. El cliente debe enviar todas las modificaciones solicitadas de una vez y con detalle para lograr el mejor resultado.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen cards\" style=\"border-color:#2c3942\">\n                            <div class=\"bar\" style=\"background:#2a3640\"><\/div>\n                            <div class=\"c\" style=\"--t:.2s; right:8px; top:14px; width:78px; height:12px; background:#748D92\"><\/div>\n                            <div class=\"c\" style=\"--t:.45s; right:8px; top:30px; width:60px; height:10px; background:#A5BFCC\"><\/div>\n                            <div class=\"c\" style=\"--t:.7s; right:8px; top:44px; width:46px; height:8px; background:#93a4ae\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Fase 3<\/div>\n                        <h2><strong>Segundo borrador<\/strong> \u2014 Despu\u00e9s de las modificaciones<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>Se presenta la versi\u00f3n con las modificaciones. El cliente debe enviar sus comentarios finales de una vez y con detalle para asegurar que se implementen de la mejor manera.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen cards\" style=\"border-color:#3b4a53\">\n                            <div class=\"bar\" style=\"background: linear-gradient(90deg,#393E46,#748D92,#A5BFCC)\"><\/div>\n                            <div class=\"c\" style=\"--t:.2s; right:8px; top:14px; width:82px; height:12px; background:#A5BFCC\"><\/div>\n                            <div class=\"c\" style=\"--t:.45s; right:8px; top:30px; width:62px; height:10px; background:#ffffff\"><\/div>\n                            <div class=\"c\" style=\"--t:.7s; right:8px; top:44px; width:46px; height:8px; background:#748D92\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Fase 4<\/div>\n                        <h2><strong>Versi\u00f3n final<\/strong> \u2014 Entrega definitiva<\/h2>\n                        <br>\n                        <p style=\"margin:.35rem 0 0; color:var(--text2)\">Esta es la versi\u00f3n final del sitio web, completa y lista para su lanzamiento. A partir de la fecha de entrega, comienza el per\u00edodo de soporte t\u00e9cnico y modificaciones seg\u00fan el paquete seleccionado, y una vez que expira, se puede iniciar una suscripci\u00f3n mensual.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1668080 e-flex e-con-boxed e-con e-parent\" data-id=\"1668080\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b173b8 elementor-widget elementor-widget-html\" data-id=\"9b173b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u0641\u0627\u0635\u0644 \u0645\u062a\u062f\u0631\u062c \u0645\u0639 \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643 --><div class=\"fade-divider with-glow\"><\/div><style>.fade-divider {\n  position: relative;\n  width: 100%;\n  height: 5px;\n  background: linear-gradient(to right, transparent, #748D92, transparent);\n  margin: 60px 0;\n  overflow: hidden;\n}\n\n.with-glow::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -50%;\n  width: 50%;\n  height: 100%;\n  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n  animation: glowMove 2s linear infinite;\n}\n\n@keyframes glowMove {\n  from {\n    left: -50%;\n  }\n  to {\n    left: 90%;\n  }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>VelonWeb Paquetes Dise\u00f1a tu propio paquete Paquete de Lanzamiento Un paquete ideal para quienes necesitan una p\u00e1gina profesional que presente la empresa y los servicios de forma breve y clara. Dise\u00f1o de sitio de una sola p\u00e1gina Sitio en un solo idioma Dominio con licencia y seguro Alojamiento con licencia y seguro Dise\u00f1o usando una [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3009","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"[data-prefix=\"single_page\"] .entry-header .page-title {--theme-font-size:30px;} [data-prefix=\"single_page\"] .entry-header .entry-meta {--theme-font-weight:600;--theme-text-transform:uppercase;--theme-font-size:12px;--theme-line-height:1.3;}","tablet":"","mobile":""},"google_fonts":[],"version":6},"has_hero_section":"enabled","hero_elements":[{"id":"custom_title","enabled":false,"heading_tag":"h1","title":"Home","__id":"WYDb6j3KF2Ab6mmYXMzX0"},{"id":"custom_description","enabled":false,"description_visibility":{"desktop":true,"tablet":true,"mobile":false},"__id":"1Zomxiu-qCaw1BXWfpC46"},{"id":"custom_meta","enabled":false,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":false,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true},"__id":"6QwI40DpZXM_09g1PuuL9"},{"id":"breadcrumbs","enabled":false,"__id":"tTMyIh3N1CrJ_yZ8vmxVU"}]},"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/velonweb.com\/es\/wp-json\/wp\/v2\/pages\/3009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/velonweb.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/velonweb.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/velonweb.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/velonweb.com\/es\/wp-json\/wp\/v2\/comments?post=3009"}],"version-history":[{"count":20,"href":"https:\/\/velonweb.com\/es\/wp-json\/wp\/v2\/pages\/3009\/revisions"}],"predecessor-version":[{"id":4758,"href":"https:\/\/velonweb.com\/es\/wp-json\/wp\/v2\/pages\/3009\/revisions\/4758"}],"wp:attachment":[{"href":"https:\/\/velonweb.com\/es\/wp-json\/wp\/v2\/media?parent=3009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}