Servicios - OROI<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap\"\n rel=\"stylesheet\">\n <style>\n \/* ------------------------- *\/\n \/* VARIABLES Y ESTILO GLOBAL *\/\n \/* ------------------------- *\/\n :root {\n --color-foreground: #000000;\n --color-background: #ffffff;\n\n \/* Colores principales - AMARILLO OROI *\/\n --color-accent: #FFE600;\n --color-web: #FFE600;\n --color-content: #FFE600;\n\n --font-primary: 'Space Grotesk', sans-serif;\n --font-emphasis: 'Space Mono', monospace;\n --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n }\n\n body {\n font-family: var(--font-primary);\n color: var(--color-foreground);\n background-color: var(--color-background);\n }\n\n \/* ------------------------- *\/\n \/* CONTENEDOR GENERAL *\/\n \/* ------------------------- *\/\n .services-wrapper {\n max-width: 1400px;\n margin: 0 auto;\n padding: 6rem 1.5rem 8rem;\n position: relative;\n }\n\n \/* ------------------------- *\/\n \/* ANIMACIONES REVEAL + STAGGER *\/\n \/* ------------------------- *\/\n .reveal-on-scroll {\n opacity: 0;\n transform: translateY(30px);\n transition:\n opacity 1s var(--transition-smooth),\n transform 1s var(--transition-smooth);\n transition-delay: var(--stagger-delay, 0ms);\n }\n\n .reveal-on-scroll.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* ------------------------- *\/\n \/* TITULO DE SECCI\u00d3N *\/\n \/* ------------------------- *\/\n .services-heading {\n font-family: var(--font-emphasis);\n text-transform: uppercase;\n font-size: 14px;\n letter-spacing: 0.2em;\n color: #000000; \/* Negro para mejor contraste con el amarillo de fondo *\/\n background-color: var(--color-accent);\n display: inline-block;\n padding: 2px 8px;\n margin-bottom: 2rem;\n font-weight: 700;\n }\n\n .services-intro {\n max-width: 850px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.1;\n letter-spacing: -0.02em;\n margin-bottom: 5rem;\n }\n\n .services-intro span {\n background-color: var(--color-accent);\n padding: 0 4px;\n }\n\n \/* ------------------------- *\/\n \/* TARJETAS (3 SECCIONES) *\/\n \/* ------------------------- *\/\n .package-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 40px;\n }\n\n .package-card {\n border: 1px solid rgba(0, 0, 0, 0.06);\n padding: 40px;\n background: #ffffff;\n transition: all 0.5s var(--transition-smooth);\n cursor: pointer;\n position: relative;\n display: flex;\n flex-direction: column;\n }\n\n .package-card:hover {\n transform: translateY(-10px);\n border-color: var(--color-accent);\n box-shadow: 0 30px 60px rgba(255, 230, 0, 0.15);\n }\n\n \/* Iconos s\u00f3lidos - AMARILLO OROI *\/\n .package-icon {\n width: 24px;\n height: 24px;\n margin-bottom: 2rem;\n background: var(--color-accent);\n position: relative;\n }\n\n .package-icon::after {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--color-accent);\n opacity: 0.3;\n transform: scale(2);\n filter: blur(15px);\n border-radius: 50%;\n }\n\n .package-title {\n font-family: var(--font-emphasis);\n font-size: 1.1rem;\n font-weight: 700;\n margin-bottom: 1.2rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n .package-short {\n font-size: 1.05rem;\n line-height: 1.6;\n margin-bottom: 1.5rem;\n opacity: 0.7;\n }\n\n .package-list {\n list-style: none;\n font-size: 0.95rem;\n line-height: 1.7;\n margin-bottom: 2rem;\n flex-grow: 1;\n }\n\n .package-list li {\n margin-bottom: 1rem;\n position: relative;\n padding-left: 20px;\n }\n\n .package-list li::before {\n content: \"\u2192\";\n position: absolute;\n left: 0;\n color: #000;\n \/* Se elimina el subrayado amarillo de las flechas *\/\n font-family: var(--font-emphasis);\n line-height: 1;\n }\n\n .package-result {\n border-top: 1px solid rgba(0, 0, 0, 0.08);\n margin-top: auto;\n padding-top: 1.5rem;\n }\n\n .package-result-label {\n font-family: var(--font-emphasis);\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n color: #000;\n background-color: var(--color-accent);\n display: inline-block;\n padding: 0 4px;\n margin-bottom: 0.5rem;\n }\n\n .package-result-text {\n font-size: 0.9rem;\n line-height: 1.6;\n opacity: 0.8;\n }\n\n \/* Contenido extra para pop-up (oculto en la tarjeta) *\/\n .package-popup-content {\n display: none;\n }\n\n \/* ------------------------- *\/\n \/* CTA FINAL *\/\n \/* ------------------------- *\/\n .services-cta {\n max-width: 900px;\n margin: 6rem auto 0;\n padding-top: 4rem;\n border-top: 1px solid rgba(0, 0, 0, 0.08);\n text-align: center;\n }\n\n .services-cta-text {\n font-size: 1.2rem;\n line-height: 1.6;\n margin-bottom: 2.5rem;\n font-weight: 500;\n }\n\n .services-cta-text strong {\n background-color: var(--color-accent);\n font-family: var(--font-emphasis);\n font-weight: 700;\n padding: 2px 4px;\n }\n\n .services-cta-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1.2rem 3.5rem;\n background: var(--color-foreground);\n color: white;\n text-transform: uppercase;\n font-family: var(--font-emphasis);\n letter-spacing: 0.2em;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.4s var(--transition-smooth);\n text-decoration: none !important;\n outline: none !important;\n position: relative;\n overflow: hidden;\n border: none !important;\n }\n\n .services-cta-button:hover {\n background: var(--color-accent);\n color: black !important;\n text-decoration: none !important;\n transform: translateY(-4px);\n box-shadow: 0 10px 30px rgba(255, 230, 0, 0.3);\n }\n\n \/* ------------------------- *\/\n \/* MODAL (POP-UP) *\/\n \/* ------------------------- *\/\n .services-modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(255, 255, 255, 0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.6s var(--transition-smooth);\n z-index: 9999;\n backdrop-filter: blur(10px);\n }\n\n .services-modal-backdrop.is-open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .services-modal {\n background: #ffffff;\n max-width: 700px;\n width: min(700px, 92vw);\n padding: 60px;\n box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);\n transform: translateY(40px);\n transition: transform 0.6s var(--transition-smooth);\n position: relative;\n border: 1px solid rgba(0, 0, 0, 0.05);\n }\n\n .services-modal-backdrop.is-open .services-modal {\n transform: translateY(0);\n }\n\n .services-modal-title {\n font-family: var(--font-emphasis);\n font-size: 1.5rem;\n font-weight: 700;\n margin-bottom: 2rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: black;\n background-color: var(--color-accent);\n display: inline-block;\n padding: 0 8px;\n }\n\n .services-modal-body {\n font-size: 1.1rem;\n line-height: 1.7;\n color: rgba(0, 0, 0, 0.8);\n }\n\n .services-modal-body p {\n margin-bottom: 1.5rem;\n }\n\n .services-modal-body ul {\n margin-bottom: 1.5rem;\n list-style: none;\n }\n\n .services-modal-body li {\n margin-bottom: 0.8rem;\n position: relative;\n padding-left: 25px;\n }\n\n .services-modal-body li::before {\n content: \"+\";\n position: absolute;\n left: 0;\n color: black;\n background-color: var(--color-accent);\n font-family: var(--font-emphasis);\n padding: 0 4px;\n line-height: 1.2;\n }\n\n .services-modal-close {\n position: absolute;\n top: 30px;\n right: 30px;\n width: 40px;\n height: 40px;\n background: transparent;\n border: 1px solid rgba(0, 0, 0, 0.1);\n cursor: pointer;\n font-family: var(--font-emphasis);\n font-size: 1.2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s var(--transition-smooth);\n }\n\n .services-modal-close:hover {\n background: var(--color-accent);\n color: black;\n border-color: var(--color-accent);\n transform: rotate(90deg);\n }\n\n \/* ------------------------- *\/\n \/* RESPONSIVE *\/\n \/* ------------------------- *\/\n @media (max-width: 900px) {\n .services-intro {\n font-size: 36px;\n }\n\n .services-wrapper {\n padding-top: 4rem;\n }\n }\n\n @media (max-width: 600px) {\n .services-wrapper {\n padding: 4rem 1.25rem 6rem;\n }\n\n .services-modal {\n padding: 40px 20px;\n }\n\n .package-card {\n padding: 30px;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n <div class=\"services-wrapper\">\n\n \n <h2 class=\"services-heading reveal-on-scroll\">Servicios<\/h2>\n\n <div class=\"services-intro reveal-on-scroll\">\n En <span>Oroi<\/span> trabajamos en tres frentes claros: identidad, web y contenido visual.\n Tres servicios directos para ordenar tu marca, actualizar tu presencia digital y comunicar mejor.\n <\/div>\n\n \n <div class=\"package-grid\">\n\n \n <div class=\"package-card reveal-on-scroll\">\n <div class=\"package-icon package-icon--branding\"><\/div>\n <h3 class=\"package-title\">Identidad & Branding<\/h3>\n <p class=\"package-short\">\n Definimos o actualizamos la identidad de tu marca para que sea clara, coherente y reconocible.\n <\/p>\n\n <ul class=\"package-list\">\n <li>Redise\u00f1o o creaci\u00f3n de logotipo.<\/li>\n <li>Sistema b\u00e1sico o completo de marca.<\/li>\n <li>Aplicaciones esenciales para el d\u00eda a d\u00eda.<\/li>\n <\/ul>\n\n <div class=\"package-result\">\n <div class=\"package-result-label\">Resultado<\/div>\n <div class=\"package-result-text\">Una identidad profesional que se entiende r\u00e1pido y funciona igual\n de bien en web, papel y redes.<\/div>\n <\/div>\n\n \n <div class=\"package-popup-content\">\n <p>\n Este bloque re\u00fane todo lo necesario para que tu marca tenga una base s\u00f3lida, tanto si partes de\n cero como si ya tienes algo y quieres mejorarlo.\n <\/p>\n <ul>\n <li>An\u00e1lisis de la situaci\u00f3n actual de la marca y sus necesidades.<\/li>\n <li>Redise\u00f1o o construcci\u00f3n de logotipo y sus versiones.<\/li>\n <li>Definici\u00f3n de paleta de color y sistema tipogr\u00e1fico.<\/li>\n <li>Elementos gr\u00e1ficos de apoyo (iconos, patrones o recursos m\u00ednimos).<\/li>\n <li>Gu\u00eda breve o manual de marca para que sepas c\u00f3mo aplicarla.<\/li>\n <\/ul>\n <p>\n El objetivo es que puedas usar tu identidad con seguridad en cualquier pieza sin tener que\n improvisar cada vez.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"package-card reveal-on-scroll\">\n <div class=\"package-icon package-icon--web\"><\/div>\n <h3 class=\"package-title\">Web & Experiencia Digital<\/h3>\n <p class=\"package-short\">\n Dise\u00f1amos y preparamos tu web para que transmita confianza, explique bien lo que haces y facilite el\n contacto.\n <\/p>\n\n <ul class=\"package-list\">\n <li>Web corporativa clara y bien estructurada.<\/li>\n <li>Dise\u00f1o alineado con tu identidad de marca.<\/li>\n <li>Soporte y ajustes b\u00e1sicos de mantenimiento.<\/li>\n <\/ul>\n\n <div class=\"package-result\">\n <div class=\"package-result-label\">Resultado<\/div>\n <div class=\"package-result-text\">Una web actual, funcional y f\u00e1cil de entender, pensada para que la\n gente sepa qui\u00e9n eres y c\u00f3mo trabajar contigo.<\/div>\n <\/div>\n\n \n <div class=\"package-popup-content\">\n <p>\n Este bloque cubre la parte digital de tu marca: desde la estructura y dise\u00f1o de la web hasta su\n mantenimiento b\u00e1sico.\n <\/p>\n <ul>\n <li>Definici\u00f3n de la estructura de la web (secciones y flujo de navegaci\u00f3n).<\/li>\n <li>Dise\u00f1o visual adaptado a tu identidad y tono de marca.<\/li>\n <li>Maquetaci\u00f3n responsive para m\u00f3vil, tablet y escritorio.<\/li>\n <li>Integraci\u00f3n de formularios, llamadas a la acci\u00f3n y contacto directo (WhatsApp, email\u2026).<\/li>\n <li>Ajustes t\u00e9cnicos b\u00e1sicos para SEO y rendimiento.<\/li>\n <li>Opciones de acompa\u00f1amiento y mantenimiento para que la web siga actualizada.<\/li>\n <\/ul>\n <p>\n El enfoque es pr\u00e1ctico: una web que se entienda, que refleje bien tu proyecto y que puedas\n seguir usando y actualizando con tranquilidad.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"package-card reveal-on-scroll\">\n <div class=\"package-icon package-icon--content\"><\/div>\n <h3 class=\"package-title\">Contenido Visual<\/h3>\n <p class=\"package-short\">\n Creamos foto y v\u00eddeo para que tu marca se vea mejor en web, redes y materiales de comunicaci\u00f3n.\n <\/p>\n\n <ul class=\"package-list\">\n <li>Fotograf\u00eda de producto, espacio o equipo.<\/li>\n <li>Piezas de v\u00eddeo cortas y directas.<\/li>\n <li>Opciones de contenido mensual recurrente.<\/li>\n <\/ul>\n\n <div class=\"package-result\">\n <div class=\"package-result-label\">Resultado<\/div>\n <div class=\"package-result-text\">Una biblioteca visual coherente con tu marca, lista para usar\n cuando la necesites, sin improvisar cada vez.<\/div>\n <\/div>\n\n \n <div class=\"package-popup-content\">\n <p>\n Este bloque est\u00e1 pensado para que tu marca no solo est\u00e9 bien definida y bien presentada en web,\n sino que adem\u00e1s tenga buen material visual detr\u00e1s.\n <\/p>\n <ul>\n <li>Sesiones de fotograf\u00eda para producto, equipo o espacio.<\/li>\n <li>V\u00eddeos breves para presentar servicios, casos o mensajes clave.<\/li>\n <li>Entrega de archivos optimizados para web y redes sociales.<\/li>\n <li>Posibilidad de plantear un pack mensual de contenido para mantener la presencia activa.<\/li>\n <\/ul>\n <p>\n La idea es que dispongas de recursos visuales consistentes, con buena luz y composici\u00f3n, que\n refuercen lo que comunicas.\n <\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"services-cta reveal-on-scroll\">\n <p class=\"services-cta-text\">\n \u00bfTienes claro en qu\u00e9 bloque encaja mejor tu proyecto<br>\n o prefieres que lo veamos juntos?<br>\n <strong>Puedo preparar una propuesta ajustada a lo que de verdad necesitas ahora.<\/strong>\n <\/p>\n\n <a href=\"mailto:info@oroi.design?subject=Servicios%20Oroi\" class=\"services-cta-button\">\n Solicitar presupuesto\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"services-modal-backdrop\" aria-hidden=\"true\" id=\"modalBackdrop\">\n <div class=\"services-modal\" role=\"dialog\" aria-modal=\"true\">\n <button class=\"services-modal-close\" aria-label=\"Cerrar\" id=\"closeModal\">\u00d7<\/button>\n <h3 class=\"services-modal-title\" id=\"modalTitle\"><\/h3>\n <div class=\"services-modal-body\" id=\"modalBody\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n (function () {\n \/* --------- REVEAL CON INTERSECTION OBSERVER --------- *\/\n function initReveal() {\n var elements = document.querySelectorAll('.reveal-on-scroll');\n if (!('IntersectionObserver' in window) || !elements.length) return;\n\n var observer = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n\n elements.forEach(function (el, index) {\n var delay = index * 100; \/* staggered delay *\/\n el.style.setProperty('--stagger-delay', delay + 'ms');\n observer.observe(el);\n });\n }\n\n \/* --------- MODAL \/ POP-UP REUTILIZABLE --------- *\/\n function initModal() {\n var backdrop = document.getElementById('modalBackdrop');\n var modalTitle = document.getElementById('modalTitle');\n var modalBody = document.getElementById('modalBody');\n var closeBtn = document.getElementById('closeModal');\n var cards = document.querySelectorAll('.package-card');\n\n if (!backdrop || !modalTitle || !modalBody || !closeBtn || !cards.length) return;\n\n function openModal(title, html) {\n modalTitle.textContent = title;\n modalBody.innerHTML = html;\n backdrop.classList.add('is-open');\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal() {\n backdrop.classList.remove('is-open');\n document.body.style.overflow = '';\n }\n\n cards.forEach(function (card) {\n card.addEventListener('click', function () {\n var titleEl = card.querySelector('.package-title');\n var contentEl = card.querySelector('.package-popup-content');\n if (!titleEl || !contentEl) return;\n\n openModal(titleEl.textContent, contentEl.innerHTML);\n });\n });\n\n closeBtn.addEventListener('click', closeModal);\n\n backdrop.addEventListener('click', function (e) {\n if (e.target === backdrop) {\n closeModal();\n }\n });\n\n document.addEventListener('keydown', function (e) {\n if (e.key === 'Escape') {\n closeModal();\n }\n });\n }\n\n \/\/ Initialize after DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', function () {\n initReveal();\n initModal();\n });\n } else {\n initReveal();\n initModal();\n }\n })();\n <\/script>\n<\/body>\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Servicios – OROI Servicios En Oroi trabajamos en tres frentes claros: identidad, web y contenido visual. Tres servicios directos para ordenar tu marca, actualizar tu presencia digital y comunicar mejor. Identidad & Branding Definimos o actualizamos la identidad de tu marca para que sea clara, coherente y reconocible. Redise\u00f1o o creaci\u00f3n de logotipo. Sistema b\u00e1sico […]<\/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-4556","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/4556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/comments?post=4556"}],"version-history":[{"count":136,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/4556\/revisions"}],"predecessor-version":[{"id":5686,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/4556\/revisions\/5686"}],"wp:attachment":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/media?parent=4556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n \n \n Servicios - OROI<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap\"\n rel=\"stylesheet\">\n <style>\n \/* ------------------------- *\/\n \/* VARIABLES Y ESTILO GLOBAL *\/\n \/* ------------------------- *\/\n :root {\n --color-foreground: #000000;\n --color-background: #ffffff;\n\n \/* Colores principales - AMARILLO OROI *\/\n --color-accent: #FFE600;\n --color-web: #FFE600;\n --color-content: #FFE600;\n\n --font-primary: 'Space Grotesk', sans-serif;\n --font-emphasis: 'Space Mono', monospace;\n --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n }\n\n body {\n font-family: var(--font-primary);\n color: var(--color-foreground);\n background-color: var(--color-background);\n }\n\n \/* ------------------------- *\/\n \/* CONTENEDOR GENERAL *\/\n \/* ------------------------- *\/\n .services-wrapper {\n max-width: 1400px;\n margin: 0 auto;\n padding: 6rem 1.5rem 8rem;\n position: relative;\n }\n\n \/* ------------------------- *\/\n \/* ANIMACIONES REVEAL + STAGGER *\/\n \/* ------------------------- *\/\n .reveal-on-scroll {\n opacity: 0;\n transform: translateY(30px);\n transition:\n opacity 1s var(--transition-smooth),\n transform 1s var(--transition-smooth);\n transition-delay: var(--stagger-delay, 0ms);\n }\n\n .reveal-on-scroll.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* ------------------------- *\/\n \/* TITULO DE SECCI\u00d3N *\/\n \/* ------------------------- *\/\n .services-heading {\n font-family: var(--font-emphasis);\n text-transform: uppercase;\n font-size: 14px;\n letter-spacing: 0.2em;\n color: #000000; \/* Negro para mejor contraste con el amarillo de fondo *\/\n background-color: var(--color-accent);\n display: inline-block;\n padding: 2px 8px;\n margin-bottom: 2rem;\n font-weight: 700;\n }\n\n .services-intro {\n max-width: 850px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.1;\n letter-spacing: -0.02em;\n margin-bottom: 5rem;\n }\n\n .services-intro span {\n background-color: var(--color-accent);\n padding: 0 4px;\n }\n\n \/* ------------------------- *\/\n \/* TARJETAS (3 SECCIONES) *\/\n \/* ------------------------- *\/\n .package-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 40px;\n }\n\n .package-card {\n border: 1px solid rgba(0, 0, 0, 0.06);\n padding: 40px;\n background: #ffffff;\n transition: all 0.5s var(--transition-smooth);\n cursor: pointer;\n position: relative;\n display: flex;\n flex-direction: column;\n }\n\n .package-card:hover {\n transform: translateY(-10px);\n border-color: var(--color-accent);\n box-shadow: 0 30px 60px rgba(255, 230, 0, 0.15);\n }\n\n \/* Iconos s\u00f3lidos - AMARILLO OROI *\/\n .package-icon {\n width: 24px;\n height: 24px;\n margin-bottom: 2rem;\n background: var(--color-accent);\n position: relative;\n }\n\n .package-icon::after {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--color-accent);\n opacity: 0.3;\n transform: scale(2);\n filter: blur(15px);\n border-radius: 50%;\n }\n\n .package-title {\n font-family: var(--font-emphasis);\n font-size: 1.1rem;\n font-weight: 700;\n margin-bottom: 1.2rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n .package-short {\n font-size: 1.05rem;\n line-height: 1.6;\n margin-bottom: 1.5rem;\n opacity: 0.7;\n }\n\n .package-list {\n list-style: none;\n font-size: 0.95rem;\n line-height: 1.7;\n margin-bottom: 2rem;\n flex-grow: 1;\n }\n\n .package-list li {\n margin-bottom: 1rem;\n position: relative;\n padding-left: 20px;\n }\n\n .package-list li::before {\n content: \"\u2192\";\n position: absolute;\n left: 0;\n color: #000;\n \/* Se elimina el subrayado amarillo de las flechas *\/\n font-family: var(--font-emphasis);\n line-height: 1;\n }\n\n .package-result {\n border-top: 1px solid rgba(0, 0, 0, 0.08);\n margin-top: auto;\n padding-top: 1.5rem;\n }\n\n .package-result-label {\n font-family: var(--font-emphasis);\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n color: #000;\n background-color: var(--color-accent);\n display: inline-block;\n padding: 0 4px;\n margin-bottom: 0.5rem;\n }\n\n .package-result-text {\n font-size: 0.9rem;\n line-height: 1.6;\n opacity: 0.8;\n }\n\n \/* Contenido extra para pop-up (oculto en la tarjeta) *\/\n .package-popup-content {\n display: none;\n }\n\n \/* ------------------------- *\/\n \/* CTA FINAL *\/\n \/* ------------------------- *\/\n .services-cta {\n max-width: 900px;\n margin: 6rem auto 0;\n padding-top: 4rem;\n border-top: 1px solid rgba(0, 0, 0, 0.08);\n text-align: center;\n }\n\n .services-cta-text {\n font-size: 1.2rem;\n line-height: 1.6;\n margin-bottom: 2.5rem;\n font-weight: 500;\n }\n\n .services-cta-text strong {\n background-color: var(--color-accent);\n font-family: var(--font-emphasis);\n font-weight: 700;\n padding: 2px 4px;\n }\n\n .services-cta-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1.2rem 3.5rem;\n background: var(--color-foreground);\n color: white;\n text-transform: uppercase;\n font-family: var(--font-emphasis);\n letter-spacing: 0.2em;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.4s var(--transition-smooth);\n text-decoration: none !important;\n outline: none !important;\n position: relative;\n overflow: hidden;\n border: none !important;\n }\n\n .services-cta-button:hover {\n background: var(--color-accent);\n color: black !important;\n text-decoration: none !important;\n transform: translateY(-4px);\n box-shadow: 0 10px 30px rgba(255, 230, 0, 0.3);\n }\n\n \/* ------------------------- *\/\n \/* MODAL (POP-UP) *\/\n \/* ------------------------- *\/\n .services-modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(255, 255, 255, 0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.6s var(--transition-smooth);\n z-index: 9999;\n backdrop-filter: blur(10px);\n }\n\n .services-modal-backdrop.is-open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .services-modal {\n background: #ffffff;\n max-width: 700px;\n width: min(700px, 92vw);\n padding: 60px;\n box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);\n transform: translateY(40px);\n transition: transform 0.6s var(--transition-smooth);\n position: relative;\n border: 1px solid rgba(0, 0, 0, 0.05);\n }\n\n .services-modal-backdrop.is-open .services-modal {\n transform: translateY(0);\n }\n\n .services-modal-title {\n font-family: var(--font-emphasis);\n font-size: 1.5rem;\n font-weight: 700;\n margin-bottom: 2rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: black;\n background-color: var(--color-accent);\n display: inline-block;\n padding: 0 8px;\n }\n\n .services-modal-body {\n font-size: 1.1rem;\n line-height: 1.7;\n color: rgba(0, 0, 0, 0.8);\n }\n\n .services-modal-body p {\n margin-bottom: 1.5rem;\n }\n\n .services-modal-body ul {\n margin-bottom: 1.5rem;\n list-style: none;\n }\n\n .services-modal-body li {\n margin-bottom: 0.8rem;\n position: relative;\n padding-left: 25px;\n }\n\n .services-modal-body li::before {\n content: \"+\";\n position: absolute;\n left: 0;\n color: black;\n background-color: var(--color-accent);\n font-family: var(--font-emphasis);\n padding: 0 4px;\n line-height: 1.2;\n }\n\n .services-modal-close {\n position: absolute;\n top: 30px;\n right: 30px;\n width: 40px;\n height: 40px;\n background: transparent;\n border: 1px solid rgba(0, 0, 0, 0.1);\n cursor: pointer;\n font-family: var(--font-emphasis);\n font-size: 1.2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s var(--transition-smooth);\n }\n\n .services-modal-close:hover {\n background: var(--color-accent);\n color: black;\n border-color: var(--color-accent);\n transform: rotate(90deg);\n }\n\n \/* ------------------------- *\/\n \/* RESPONSIVE *\/\n \/* ------------------------- *\/\n @media (max-width: 900px) {\n .services-intro {\n font-size: 36px;\n }\n\n .services-wrapper {\n padding-top: 4rem;\n }\n }\n\n @media (max-width: 600px) {\n .services-wrapper {\n padding: 4rem 1.25rem 6rem;\n }\n\n .services-modal {\n padding: 40px 20px;\n }\n\n .package-card {\n padding: 30px;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n <div class=\"services-wrapper\">\n\n \n <h2 class=\"services-heading reveal-on-scroll\">Servicios<\/h2>\n\n <div class=\"services-intro reveal-on-scroll\">\n En <span>Oroi<\/span> trabajamos en tres frentes claros: identidad, web y contenido visual.\n Tres servicios directos para ordenar tu marca, actualizar tu presencia digital y comunicar mejor.\n <\/div>\n\n \n <div class=\"package-grid\">\n\n \n <div class=\"package-card reveal-on-scroll\">\n <div class=\"package-icon package-icon--branding\"><\/div>\n <h3 class=\"package-title\">Identidad & Branding<\/h3>\n <p class=\"package-short\">\n Definimos o actualizamos la identidad de tu marca para que sea clara, coherente y reconocible.\n <\/p>\n\n <ul class=\"package-list\">\n <li>Redise\u00f1o o creaci\u00f3n de logotipo.<\/li>\n <li>Sistema b\u00e1sico o completo de marca.<\/li>\n <li>Aplicaciones esenciales para el d\u00eda a d\u00eda.<\/li>\n <\/ul>\n\n <div class=\"package-result\">\n <div class=\"package-result-label\">Resultado<\/div>\n <div class=\"package-result-text\">Una identidad profesional que se entiende r\u00e1pido y funciona igual\n de bien en web, papel y redes.<\/div>\n <\/div>\n\n \n <div class=\"package-popup-content\">\n <p>\n Este bloque re\u00fane todo lo necesario para que tu marca tenga una base s\u00f3lida, tanto si partes de\n cero como si ya tienes algo y quieres mejorarlo.\n <\/p>\n <ul>\n <li>An\u00e1lisis de la situaci\u00f3n actual de la marca y sus necesidades.<\/li>\n <li>Redise\u00f1o o construcci\u00f3n de logotipo y sus versiones.<\/li>\n <li>Definici\u00f3n de paleta de color y sistema tipogr\u00e1fico.<\/li>\n <li>Elementos gr\u00e1ficos de apoyo (iconos, patrones o recursos m\u00ednimos).<\/li>\n <li>Gu\u00eda breve o manual de marca para que sepas c\u00f3mo aplicarla.<\/li>\n <\/ul>\n <p>\n El objetivo es que puedas usar tu identidad con seguridad en cualquier pieza sin tener que\n improvisar cada vez.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"package-card reveal-on-scroll\">\n <div class=\"package-icon package-icon--web\"><\/div>\n <h3 class=\"package-title\">Web & Experiencia Digital<\/h3>\n <p class=\"package-short\">\n Dise\u00f1amos y preparamos tu web para que transmita confianza, explique bien lo que haces y facilite el\n contacto.\n <\/p>\n\n <ul class=\"package-list\">\n <li>Web corporativa clara y bien estructurada.<\/li>\n <li>Dise\u00f1o alineado con tu identidad de marca.<\/li>\n <li>Soporte y ajustes b\u00e1sicos de mantenimiento.<\/li>\n <\/ul>\n\n <div class=\"package-result\">\n <div class=\"package-result-label\">Resultado<\/div>\n <div class=\"package-result-text\">Una web actual, funcional y f\u00e1cil de entender, pensada para que la\n gente sepa qui\u00e9n eres y c\u00f3mo trabajar contigo.<\/div>\n <\/div>\n\n \n <div class=\"package-popup-content\">\n <p>\n Este bloque cubre la parte digital de tu marca: desde la estructura y dise\u00f1o de la web hasta su\n mantenimiento b\u00e1sico.\n <\/p>\n <ul>\n <li>Definici\u00f3n de la estructura de la web (secciones y flujo de navegaci\u00f3n).<\/li>\n <li>Dise\u00f1o visual adaptado a tu identidad y tono de marca.<\/li>\n <li>Maquetaci\u00f3n responsive para m\u00f3vil, tablet y escritorio.<\/li>\n <li>Integraci\u00f3n de formularios, llamadas a la acci\u00f3n y contacto directo (WhatsApp, email\u2026).<\/li>\n <li>Ajustes t\u00e9cnicos b\u00e1sicos para SEO y rendimiento.<\/li>\n <li>Opciones de acompa\u00f1amiento y mantenimiento para que la web siga actualizada.<\/li>\n <\/ul>\n <p>\n El enfoque es pr\u00e1ctico: una web que se entienda, que refleje bien tu proyecto y que puedas\n seguir usando y actualizando con tranquilidad.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"package-card reveal-on-scroll\">\n <div class=\"package-icon package-icon--content\"><\/div>\n <h3 class=\"package-title\">Contenido Visual<\/h3>\n <p class=\"package-short\">\n Creamos foto y v\u00eddeo para que tu marca se vea mejor en web, redes y materiales de comunicaci\u00f3n.\n <\/p>\n\n <ul class=\"package-list\">\n <li>Fotograf\u00eda de producto, espacio o equipo.<\/li>\n <li>Piezas de v\u00eddeo cortas y directas.<\/li>\n <li>Opciones de contenido mensual recurrente.<\/li>\n <\/ul>\n\n <div class=\"package-result\">\n <div class=\"package-result-label\">Resultado<\/div>\n <div class=\"package-result-text\">Una biblioteca visual coherente con tu marca, lista para usar\n cuando la necesites, sin improvisar cada vez.<\/div>\n <\/div>\n\n \n <div class=\"package-popup-content\">\n <p>\n Este bloque est\u00e1 pensado para que tu marca no solo est\u00e9 bien definida y bien presentada en web,\n sino que adem\u00e1s tenga buen material visual detr\u00e1s.\n <\/p>\n <ul>\n <li>Sesiones de fotograf\u00eda para producto, equipo o espacio.<\/li>\n <li>V\u00eddeos breves para presentar servicios, casos o mensajes clave.<\/li>\n <li>Entrega de archivos optimizados para web y redes sociales.<\/li>\n <li>Posibilidad de plantear un pack mensual de contenido para mantener la presencia activa.<\/li>\n <\/ul>\n <p>\n La idea es que dispongas de recursos visuales consistentes, con buena luz y composici\u00f3n, que\n refuercen lo que comunicas.\n <\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"services-cta reveal-on-scroll\">\n <p class=\"services-cta-text\">\n \u00bfTienes claro en qu\u00e9 bloque encaja mejor tu proyecto<br>\n o prefieres que lo veamos juntos?<br>\n <strong>Puedo preparar una propuesta ajustada a lo que de verdad necesitas ahora.<\/strong>\n <\/p>\n\n <a href=\"mailto:info@oroi.design?subject=Servicios%20Oroi\" class=\"services-cta-button\">\n Solicitar presupuesto\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"services-modal-backdrop\" aria-hidden=\"true\" id=\"modalBackdrop\">\n <div class=\"services-modal\" role=\"dialog\" aria-modal=\"true\">\n <button class=\"services-modal-close\" aria-label=\"Cerrar\" id=\"closeModal\">\u00d7<\/button>\n <h3 class=\"services-modal-title\" id=\"modalTitle\"><\/h3>\n <div class=\"services-modal-body\" id=\"modalBody\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n (function () {\n \/* --------- REVEAL CON INTERSECTION OBSERVER --------- *\/\n function initReveal() {\n var elements = document.querySelectorAll('.reveal-on-scroll');\n if (!('IntersectionObserver' in window) || !elements.length) return;\n\n var observer = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n\n elements.forEach(function (el, index) {\n var delay = index * 100; \/* staggered delay *\/\n el.style.setProperty('--stagger-delay', delay + 'ms');\n observer.observe(el);\n });\n }\n\n \/* --------- MODAL \/ POP-UP REUTILIZABLE --------- *\/\n function initModal() {\n var backdrop = document.getElementById('modalBackdrop');\n var modalTitle = document.getElementById('modalTitle');\n var modalBody = document.getElementById('modalBody');\n var closeBtn = document.getElementById('closeModal');\n var cards = document.querySelectorAll('.package-card');\n\n if (!backdrop || !modalTitle || !modalBody || !closeBtn || !cards.length) return;\n\n function openModal(title, html) {\n modalTitle.textContent = title;\n modalBody.innerHTML = html;\n backdrop.classList.add('is-open');\n document.body.style.overflow = 'hidden';\n }\n\n function closeModal() {\n backdrop.classList.remove('is-open');\n document.body.style.overflow = '';\n }\n\n cards.forEach(function (card) {\n card.addEventListener('click', function () {\n var titleEl = card.querySelector('.package-title');\n var contentEl = card.querySelector('.package-popup-content');\n if (!titleEl || !contentEl) return;\n\n openModal(titleEl.textContent, contentEl.innerHTML);\n });\n });\n\n closeBtn.addEventListener('click', closeModal);\n\n backdrop.addEventListener('click', function (e) {\n if (e.target === backdrop) {\n closeModal();\n }\n });\n\n document.addEventListener('keydown', function (e) {\n if (e.key === 'Escape') {\n closeModal();\n }\n });\n }\n\n \/\/ Initialize after DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', function () {\n initReveal();\n initModal();\n });\n } else {\n initReveal();\n initModal();\n }\n })();\n <\/script>\n<\/body>\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Servicios – OROI Servicios En Oroi trabajamos en tres frentes claros: identidad, web y contenido visual. Tres servicios directos para ordenar tu marca, actualizar tu presencia digital y comunicar mejor. Identidad & Branding Definimos o actualizamos la identidad de tu marca para que sea clara, coherente y reconocible. Redise\u00f1o o creaci\u00f3n de logotipo. Sistema b\u00e1sico […]<\/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-4556","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/4556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/comments?post=4556"}],"version-history":[{"count":136,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/4556\/revisions"}],"predecessor-version":[{"id":5686,"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/pages\/4556\/revisions\/5686"}],"wp:attachment":[{"href":"https:\/\/oroi.design\/index.php\/wp-json\/wp\/v2\/media?parent=4556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}