{"id":2031,"date":"2024-01-21T00:17:30","date_gmt":"2024-01-21T00:17:30","guid":{"rendered":"https:\/\/elinformatico.cat\/?page_id=2031"},"modified":"2026-05-23T04:22:46","modified_gmt":"2026-05-23T04:22:46","slug":"agenda","status":"publish","type":"page","link":"https:\/\/elinformatico.cat\/ca\/agenda\/","title":{"rendered":"Agenda online"},"content":{"rendered":"<style>\n    \/* === MODO APP: OCULTAR INTERFAZ WORDPRESS === *\/\n    \n    \/* Ocultar Cabeceras y Men\u00fas *\/\n    header, \n    #masthead, \n    .site-header, \n    .elementor-location-header,\n    .ast-main-header-wrap, \/* Astra *\/\n    .fusion-header-wrapper, \/* Avada *\/\n    #header-outer, \/* Salient *\/\n    \n    \/* Ocultar Pie de P\u00e1gina *\/\n    footer, \n    #colophon, \n    .site-footer, \n    .elementor-location-footer,\n    \n    \/* Ocultar Barra de Admin Superior (Barra negra) *\/\n    #wpadminbar {\n        display: none !important;\n    }\n\n    \/* Correcci\u00f3n para que la p\u00e1gina suba hasta arriba del todo *\/\n    html { \n        margin-top: 0 !important; \n    }\n    \n    body {\n        padding: 0 !important;\n        margin: 0 !important;\n        background: #000A28; \/* Ponemos el color de fondo de tu app para evitar flashes blancos *\/\n    }\n<\/style>\n\n\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<style>\n  \/* --- VARIABLES Y ESTILOS BASE --- *\/\n  :root {\n    --g-azul: #00069F;\n    --g-verde: #B8EF02;\n    --g-blanco: #ffffff;\n    --g-gris: #f4f6f9;\n    --g-alerta-bg: #fffbf0; \n    --g-alerta-borde: #ffb300; \n  }\n\n  body {\n    font-family: 'Segoe UI', system-ui, sans-serif;\n    margin: 0;\n    padding: 0;\n  }\n\n  \/* --- CONTENEDOR PRINCIPAL (ESTILO TECH 3D APLICADO) --- *\/\n  .agenda-container {\n    max-width: 900px;\n    margin: -40px auto 50px auto;\n    background-color: var(--g-blanco);\n    \n    \/* VISUAL A\u00d1ADIDO: Borde ne\u00f3n y Sombra 3D *\/\n    border: 4px solid var(--g-verde);\n    border-radius: 16px;\n    box-shadow: 0 30px 60px rgba(0, 4, 95, 0.4), 0 0 30px rgba(184, 239, 2, 0.2);\n    \n    overflow: hidden;\n    position: relative; \n    z-index: 10;\n    transition: transform 0.3s ease;\n  }\n\n  \/* Efecto levitaci\u00f3n al pasar el rat\u00f3n *\/\n  .agenda-container:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 40px 70px rgba(0, 4, 95, 0.5), 0 0 40px rgba(184, 239, 2, 0.3);\n  }\n\n  \/* AJUSTE MOVIL TAMBI\u00c9N PEGADO *\/\n  @media (max-width: 900px) {\n      .agenda-container {\n          margin-top: -40px !important;\n          width: 95%;\n      }\n  }\n\n  \/* --- HEADER --- *\/\n  .agenda-header {\n    background: linear-gradient(135deg, var(--g-azul) 0%, #00045f 100%);\n    padding: 30px 20px;\n    text-align: center;\n    border-bottom: 4px solid var(--g-verde);\n  }\n\n  .agenda-header h1 {\n    margin: 0;\n    text-transform: uppercase;\n    font-weight: 900;\n    letter-spacing: 1px;\n    font-size: 1.8rem;\n    color: #B8EF02 !important; \n    \/* VISUAL A\u00d1ADIDO: Sombra de texto 3D *\/\n    text-shadow: 0 4px 15px rgba(0, 6, 159, 0.5);\n  }\n\n  .agenda-header p {\n    color: #fff;\n    opacity: 0.95;\n    margin: 10px auto 0 auto;\n    font-size: 1.05rem;\n    max-width: 700px;\n    line-height: 1.5;\n  }\n\n  \/* --- BANNER LATIDO (DISCLAIMER) --- *\/\n  .heartbeat-banner {\n    background-color: var(--g-alerta-bg);\n    border-left: 6px solid var(--g-alerta-borde);\n    margin: 25px 25px 0 25px; \n    padding: 20px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n    \n    \/* ANIMACI\u00d3N LATIDO SUAVE *\/\n    animation: softBeat 3s infinite ease-in-out;\n  }\n\n  @keyframes softBeat {\n    0% { transform: scale(1); }\n    50% { transform: scale(1.015); box-shadow: 0 5px 20px rgba(255, 179, 0, 0.15); }\n    100% { transform: scale(1); }\n  }\n\n  .banner-icon { font-size: 2rem; }\n  .banner-text { font-size: 0.95rem; color: #444; line-height: 1.5; }\n  .banner-text strong { color: #d35400; font-weight: 800; }\n\n  \/* --- ZONA DE CARGA (RADAR TECH A\u00d1ADIDO) --- *\/\n  .loading-area {\n    padding: 50px 20px;\n    text-align: center;\n    min-height: 100px;\n    transition: all 0.5s ease;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  \/* Spinner de carga convertido en Radar 3D *\/\n  .spinner {\n    display: inline-block;\n    width: 65px;\n    height: 65px;\n    border: 5px solid rgba(0, 6, 159, 0.1);\n    border-radius: 50%;\n    border-top-color: var(--g-azul);\n    border-bottom-color: var(--g-verde);\n    \/* Animaci\u00f3n m\u00e1s tech *\/\n    animation: spinTech 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\n    margin-bottom: 20px;\n    \/* Resplandor interior y exterior *\/\n    box-shadow: 0 0 20px rgba(0, 6, 159, 0.2) inset, 0 0 20px rgba(184, 239, 2, 0.3);\n    transition: border-color 0.5s ease;\n  }\n\n  @keyframes spinTech {\n    to { transform: rotate(360deg); }\n  }\n\n  \/* Texto cambiante con pulso ne\u00f3n *\/\n  #status-text {\n    font-size: 1.3rem;\n    font-weight: 800;\n    color: var(--g-azul);\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    margin-top: 10px;\n    transition: opacity 0.5s ease, color 0.5s ease, font-size 0.5s ease;\n    animation: pulseTextTech 1.5s ease-in-out infinite;\n  }\n\n  @keyframes pulseTextTech {\n    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(0, 6, 159, 0.2); }\n    50% { opacity: 0.7; text-shadow: none; }\n  }\n\n  \/* Clases para ocultar\/mostrar *\/\n  .fade-out-element { opacity: 0; height: 0; padding: 0; overflow: hidden; }\n  \n  .hidden-initial {\n    opacity: 0;\n    \/* Cambiado translateY a un zoom 3D como en el c\u00f3digo de antes *\/\n    transform: scale(0.98); \n    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n\n  .show-final {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  \/* --- CONTENEDOR CALENDLY --- *\/\n  .calendly-wrapper {\n    width: 100%;\n    position: relative;\n    background-color: var(--g-blanco);\n  }\n\n  \/* Ajuste M\u00f3vil *\/\n  @media (max-width: 600px) {\n    .heartbeat-banner {\n        flex-direction: column;\n        text-align: center;\n    }\n    .spinner { width: 50px; height: 50px; }\n    #status-text { font-size: 1.1rem; }\n  }\n\n<\/style>\n\n\n\n<div class=\"agenda-container\">\n  \n  <div class=\"agenda-header\">\n    <h1>\ud83d\udcc5 RESERVA TU SESI\u00d3N PRIVADA<\/h1>\n    <p>\n      \u00bfPrefieres que lo hagamos nosotros? Rel\u00e1jate. \n      Reserva tu hueco y un ingeniero conectar\u00e1 contigo para dejar tu gu\u00eda <strong>instalada, activada y validada<\/strong> durante tu cita.\n    <\/p>\n  <\/div>\n\n  <div class=\"heartbeat-banner\">\n      <div class=\"banner-icon\">\u26a0\ufe0f<\/div>\n      <div class=\"banner-text\">\n          <strong>INFORMACI\u00d3N IMPORTANTE SOBRE TU RESERVA:<\/strong><br>\n          Cada sesi\u00f3n de 30 minutos permite instalar <strong>m\u00e1ximo 4 gu\u00edas<\/strong>. <br>\n          Si has adquirido m\u00e1s de 4 productos, por favor <strong>reserva 2 sesiones consecutivas<\/strong> para asegurar que el ingeniero tenga tiempo suficiente.\n      <\/div>\n  <\/div>\n\n  <div id=\"loader-box\" class=\"loading-area\">\n    <div class=\"spinner\"><\/div>\n    <div id=\"status-text\">Estableciendo conexi\u00f3n segura con la Central&#8230;<\/div>\n  <\/div>\n\n  <div id=\"calendario-final\" class=\"calendly-wrapper hidden-initial\">\n    <div class=\"calendly-inline-widget\" data-url=\"https:\/\/calendly.com\/el1nformatik0\/agenda?hide_event_type_details=1&amp;hide_gdpr_banner=1\" style=\"min-width:320px;height:700px;\"><\/div>\n    <script type=\"text\/javascript\" src=\"https:\/\/assets.calendly.com\/assets\/external\/widget.js\" async=\"\"><\/script>\n    <\/div>\n\n<\/div>\n\n<script>\n  document.addEventListener('DOMContentLoaded', function() {\n    \/\/ 1. Elementos\n    const statusText = document.getElementById('status-text');\n    const loaderBox = document.getElementById('loader-box');\n    const calendarBox = document.getElementById('calendario-final');\n    const spinner = document.querySelector('.spinner');\n\n    \/\/ 2. Secuencia de tiempos (Simula conexi\u00f3n)\n    \n    \/\/ A los 1.5 segundos: Cambia texto a \"Disponible\"\n    setTimeout(function() {\n      statusText.style.opacity = '0'; \/\/ Efecto fade out texto\n      \n      setTimeout(function() {\n        spinner.style.borderTopColor = '#00069F'; \/\/ Cambia color spinner\n        statusText.innerHTML = \"\u2705 Agenda sincronizada. Elige tu hora:\";\n        statusText.style.color = '#333';\n        statusText.style.fontSize = '1.2rem';\n        statusText.style.animation = 'none'; \/\/ Detiene el pulso para que quede est\u00e1tico y legible\n        statusText.style.textShadow = 'none';\n        statusText.style.opacity = '1'; \/\/ Fade in texto nuevo\n      }, 500);\n\n    }, 1500);\n\n    \/\/ A los 2.5 segundos: Muestra el calendario\n    setTimeout(function() {\n      \/\/ Ocultamos el loader spinner pero dejamos el texto de confirmaci\u00f3n un momento\n      spinner.style.display = 'none';\n      \n      \/\/ Hacemos aparecer el calendario suavemente\n      calendarBox.classList.remove('hidden-initial');\n      calendarBox.classList.add('show-final');\n      \n      \/\/ Ajuste final visual\n      loaderBox.style.paddingBottom = \"0\";\n    }, 2500);\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcc5 RESERVA TU SESI\u00d3N PRIVADA \u00bfPrefieres que lo hagamos nosotros? Rel\u00e1jate. Reserva tu hueco y un ingeniero conectar\u00e1 contigo para dejar tu gu\u00eda instalada, activada y validada durante tu cita. \u26a0\ufe0f INFORMACI\u00d3N IMPORTANTE SOBRE TU RESERVA: Cada sesi\u00f3n de 30 minutos permite instalar m\u00e1ximo 4 gu\u00edas. Si has adquirido m\u00e1s de 4 productos, por favor [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":{"view":"no"},"footnotes":""},"class_list":["post-2031","page","type-page","status-publish","hentry"],"blocksy_meta":{"background":{"desktop":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--theme-palette-color-3)"}}},"tablet":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--theme-palette-color-3)"}}},"mobile":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--theme-palette-color-3)"}}},"__changed":["mobile"]},"styles_descriptor":{"styles":{"desktop":"[data-prefix=\"single_page\"] {background-color:var(--theme-palette-color-3);background-image:none;}","tablet":"","mobile":""},"google_fonts":[],"version":7},"has_hero_section":"disabled"},"_links":{"self":[{"href":"https:\/\/elinformatico.cat\/ca\/wp-json\/wp\/v2\/pages\/2031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elinformatico.cat\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elinformatico.cat\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elinformatico.cat\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elinformatico.cat\/ca\/wp-json\/wp\/v2\/comments?post=2031"}],"version-history":[{"count":1,"href":"https:\/\/elinformatico.cat\/ca\/wp-json\/wp\/v2\/pages\/2031\/revisions"}],"predecessor-version":[{"id":9706,"href":"https:\/\/elinformatico.cat\/ca\/wp-json\/wp\/v2\/pages\/2031\/revisions\/9706"}],"wp:attachment":[{"href":"https:\/\/elinformatico.cat\/ca\/wp-json\/wp\/v2\/media?parent=2031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}