// ============================================================ // ESTUDIO RETÓRICA · Páginas internas // ============================================================ const RETORICA_IMAGES = { logo: getRetoricaAssetUrl('assets/retorica-logo.png'), vitaldent: getRetoricaAssetUrl('assets/vitaldent-logo.svg'), diada: getRetoricaAssetUrl('assets/Proyecto-nuevo-1.png'), matrix: getRetoricaAssetUrl('assets/matrix-events-1.png'), disruptivos: getRetoricaAssetUrl('assets/Logo-Disruptivos-1.png'), tucanes: getRetoricaAssetUrl('assets/los-tucanes.png'), cultural: getRetoricaAssetUrl('assets/cultural-bytes.png'), editorial: getRetoricaAssetUrl('assets/1.png'), radical: getRetoricaAssetUrl('assets/3-1.png'), drag: getRetoricaAssetUrl('assets/this-is-drag.png'), matrixSun: getRetoricaAssetUrl('assets/matrix-sun.png'), }; const imageStyle = (url, overlay = 'linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.18) 100%)') => ({ backgroundImage: `${overlay}, url(${url})`, }); const logoImageStyle = (url) => ({ backgroundImage: `url(${url})`, backgroundColor: '#fff', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: '84% auto', }); const projectImageStyle = (project, overlay) => ( project.logoOnly ? logoImageStyle(project.image) : (overlay ? imageStyle(project.image, overlay) : imageStyle(project.image)) ); const WHATSAPP_NUMBER = '34617492461'; const CONTACT_SERVICES = ['Identidad corporativa', 'Diseño web', 'Marketing digital', 'Contenido y audiovisual', 'Proyecto integral']; const buildWhatsappUrl = ({ name, email, service, message }) => { const text = [ 'Hola, quiero hablar con Estudio Retórica.', '', `Nombre: ${name || ''}`, `Email: ${email || ''}`, `Servicio de interés: ${service || ''}`, 'Mensaje:', message || '', ].join('\n'); return `https://api.whatsapp.com/send/?app_absent=0&phone=${WHATSAPP_NUMBER}&text=${encodeURIComponent(text)}&type=phone_number`; }; const portfolioProjects = [ { slug: 'matrix-events', name: 'Matrix Events', category: 'Eventos', summary: 'Identidad con fuerza visual para marcas y activaciones que necesitan presencia inmediata.', image: RETORICA_IMAGES.matrix, featured: true, span: 'page-card--span-6', services: ['Branding', 'Piezas de comunicación', 'Sistema de marca'], impact: 'Refuerza presencia, lectura y recordación en escenarios, piezas y formatos promocionales.', challenge: 'Necesidad de una identidad con lectura instantánea y suficiente presencia para convivir con entornos de alta energía visual.', approach: 'Se construyó un lenguaje de marca de contraste alto y aplicaciones directas para piezas, escenarios y activos promocionales.', deliverables: ['Identidad visual', 'Sistema cromático', 'Piezas de comunicación', 'Material promocional'], result: 'Un caso que transmite seguridad, impacto y una sensación de marca lista para operar en contextos presenciales.', related: ['disruptivos', 'diada-tec', 'matrix-sun-festival'], }, { slug: 'vitaldent', name: 'Vitaldent', category: 'Activaciones', summary: 'Street Marketing y buzoneo para llevar la marca al territorio y activar contacto directo con nuevos pacientes.', image: RETORICA_IMAGES.vitaldent, website: 'https://www.vitaldent.com/', logoOnly: true, span: 'page-card--span-4', services: ['Street Marketing', 'Buzoneo', 'Activación local'], impact: 'Refuerza presencia de marca en calle y apoya la captación local con una acción física, directa y reconocible.', challenge: 'Acercar una marca reconocida a zonas de interés con una acción clara, visible y orientada a generar recordación.', approach: 'Se planteó una activación de calle y reparto segmentado para conectar la comunicación con recorridos cotidianos del público.', deliverables: ['Street Marketing', 'Buzoneo', 'Material promocional', 'Activación local'], result: 'Un caso de presencia territorial que convierte visibilidad física en contacto y recordación de marca.', related: ['matrix-events', 'cultural-bytes', 'this-is-drag'], }, { slug: 'disruptivos', name: 'Disruptivos', category: 'Contenido', summary: 'Un universo gráfico más expresivo para video, podcast y comunicación digital.', image: RETORICA_IMAGES.disruptivos, featured: true, span: 'page-card--span-6', services: ['Branding', 'Contenido', 'Audiovisual'], impact: 'Permite adaptar la marca a covers, redes, reels y piezas editoriales con coherencia.', challenge: 'La marca debía sostenerse en múltiples formatos digitales y conservar personalidad sin perder claridad.', approach: 'Se enfatizó flexibilidad visual para portadas, activos sociales, piezas audiovisuales y contenidos editoriales.', deliverables: ['Sistema de marca', 'Assets para contenido', 'Aplicaciones para digital', 'Base visual para audiovisual'], result: 'Una identidad lista para moverse con facilidad entre contenido, social media y formatos audiovisuales.', related: ['cultural-bytes', 'this-is-drag', 'matrix-sun-festival'], }, { slug: 'diada-tec', name: 'Diada Tec', category: 'Branding', summary: 'Lenguaje visual limpio y corporativo para una marca con lectura clara y actual.', image: RETORICA_IMAGES.diada, span: 'page-card--span-4', services: ['Logo', 'Aplicaciones', 'Sistema visual'], impact: 'Aporta solidez comercial y una presencia que se siente profesional desde el primer vistazo.', challenge: 'Conseguir una presentación más técnica y confiable sin recargar la comunicación.', approach: 'Se trabajó una estética limpia y ordenada, útil para lectura rápida y percepción corporativa.', deliverables: ['Logo', 'Sistema visual', 'Aplicaciones base'], result: 'Una marca con mejor balance entre claridad, profesionalismo y adaptabilidad.', related: ['matrix-sun-festival', 'disruptivos', 'radical-trainer'], }, { slug: 'los-tucanes', name: 'Los Tucanes', category: 'Branding', summary: 'Propuesta gráfica directa y llamativa para públicos de consumo masivo.', image: RETORICA_IMAGES.tucanes, span: 'page-card--span-4', services: ['Marca', 'Piezas promocionales', 'Aplicación visual'], impact: 'Favorece una comunicación popular, rápida y con alta visibilidad.', challenge: 'Lograr una comunicación popular y visible que sostuviera recordación.', approach: 'Se impulsó una línea gráfica frontal y reconocible, pensada para captar rápido.', deliverables: ['Marca', 'Piezas promocionales', 'Aplicaciones visuales'], result: 'Una propuesta más visible para públicos amplios y contextos de alta exposición.', related: ['matrix-events', 'cultural-bytes', 'this-is-drag'], }, { slug: 'cultural-bytes', name: 'Cultural Bytes', category: 'Digital', summary: 'Activos pensados para entornos educativos, comunicación digital y recordación de marca.', image: RETORICA_IMAGES.cultural, span: 'page-card--span-4', services: ['Digital', 'Contenido', 'Branding'], impact: 'Hace más clara la conexión entre identidad, comunidad y piezas digitales.', challenge: 'Unir comunidad, educación y marca dentro de una presencia visual clara.', approach: 'Se desarrolló una base gráfica flexible para piezas digitales y comunicación recurrente.', deliverables: ['Assets digitales', 'Sistema visual', 'Piezas de comunicación'], result: 'Una identidad más lista para habitar entornos digitales y contenidos continuos.', related: ['disruptivos', 'this-is-drag', 'matrix-sun-festival'], }, { slug: 'proyecto-editorial', name: 'Proyecto editorial', category: 'Branding', summary: 'Piezas editoriales y de marca para elevar la percepción premium.', image: RETORICA_IMAGES.editorial, span: 'page-card--span-4', services: ['Editorial', 'Branding', 'Comunicación'], impact: 'Aporta narrativa visual y una sensación de cuidado superior.', challenge: 'Construir piezas que comunicaran mayor cuidado y refinamiento.', approach: 'Se priorizó una dirección visual sobria y editorial para reforzar valor percibido.', deliverables: ['Piezas editoriales', 'Branding support', 'Comunicación'], result: 'Una propuesta más premium y con mejor lectura visual.', related: ['disruptivos', 'radical-trainer', 'diada-tec'], }, { slug: 'radical-trainer', name: 'Radical Trainer', category: 'Branding', summary: 'Marca con presencia contundente y look deportivo/comercial.', image: RETORICA_IMAGES.radical, span: 'page-card--span-4', services: ['Logo', 'Aplicaciones', 'Branding'], impact: 'Construye una presencia fuerte que se reconoce rápido incluso en formatos grandes.', challenge: 'Generar una identidad potente y legible para una marca con energía alta.', approach: 'Se definió un system fuerte de contraste y lectura rápida para piezas físicas y digitales.', deliverables: ['Logo', 'Aplicaciones', 'Branding'], result: 'Una presencia contundente que comunica energía y recordación.', related: ['matrix-events', 'matrix-sun-festival', 'proyecto-editorial'], }, { slug: 'this-is-drag', name: 'This Is Drag', category: 'Digital', summary: 'Diseño y desarrollo web a medida para una plataforma de espectáculos y activaciones de drag queens.', image: RETORICA_IMAGES.drag, website: 'https://thisisdrag.es/', span: 'page-card--span-4', services: ['Diseño web', 'Desarrollo web', 'Optimización SEO'], impact: 'Aporta una experiencia visual impactante, rápida y optimizada para la reserva y promoción de eventos.', challenge: 'Traducir la energía vibrante y colorida del espectáculo drag a un entorno web limpio, accesible y comercialmente enfocado.', approach: 'Se diseñó una interfaz en modo oscuro con acentos neón de alto contraste y animaciones fluidas que conectan de inmediato con la audiencia.', deliverables: ['Arquitectura de información', 'Diseño de interfaz (UI)', 'Desarrollo Frontend', 'Optimización de velocidad'], result: 'Un portal dinámico que no solo proyecta la identidad del show, sino que duplica el interés en cotizaciones y reservas.', related: ['cultural-bytes', 'disruptivos', 'matrix-sun-festival'], }, { slug: 'matrix-sun-festival', name: 'Matrix Sun Festival', category: 'Digital', summary: 'Rediseño completo del sitio raíz de Matrix Events y desarrollo de la landing page para el Matrix Sun Festival.', image: RETORICA_IMAGES.matrixSun, website: 'https://matrixevents.es/events/matrix-sun-festival/', span: 'page-card--span-4', services: ['Rediseño web', 'UI/UX', 'Optimización móvil'], impact: 'Una presencia online premium que facilita la venta directa de entradas y consolida la identidad digital de la marca.', challenge: 'Unificar la comunicación de la marca raíz con la energía y especificidad de su festival principal, mejorando el embudo de conversión en móviles.', approach: 'Se reestructuró el sitio completo con una estética limpia, dándole protagonismo al contenido visual y un proceso de compra de entradas en dos clics.', deliverables: ['Rediseño de sitio raíz', 'Landing de Matrix Sun Festival', 'Estructura de conversión', 'Desarrollo responsive'], result: 'Una experiencia unificada que incrementa la venta de entradas online y proyecta el posicionamiento internacional del festival.', related: ['matrix-events', 'this-is-drag', 'diada-tec'], }, ]; const portfolioFilters = ['Todos', 'Branding', 'Digital', 'Contenido', 'Eventos', 'Activaciones']; const getProjectBySlug = (slug) => portfolioProjects.find((item) => item.slug === slug) || portfolioProjects[0]; const usePortfolioPointer = (ref) => { React.useEffect(() => { const node = ref.current; if (!node) return; const setPosition = (clientX, clientY) => { const rect = node.getBoundingClientRect(); const x = clientX - rect.left; const y = clientY - rect.top; const px = rect.width ? x / rect.width : 0.5; const py = rect.height ? y / rect.height : 0.5; node.style.setProperty('--mx', `${(px * 100).toFixed(2)}%`); node.style.setProperty('--my', `${(py * 100).toFixed(2)}%`); node.style.setProperty('--rx', `${(py - 0.5) * -9}deg`); node.style.setProperty('--ry', `${(px - 0.5) * 10}deg`); }; const reset = () => { node.style.setProperty('--mx', '50%'); node.style.setProperty('--my', '50%'); node.style.setProperty('--rx', '0deg'); node.style.setProperty('--ry', '0deg'); }; reset(); const onMove = (event) => setPosition(event.clientX, event.clientY); const onTouchMove = (event) => { const touch = event.touches && event.touches[0]; if (touch) setPosition(touch.clientX, touch.clientY); }; node.addEventListener('mousemove', onMove); node.addEventListener('touchmove', onTouchMove, { passive: true }); node.addEventListener('mouseleave', reset); return () => { node.removeEventListener('mousemove', onMove); node.removeEventListener('touchmove', onTouchMove); node.removeEventListener('mouseleave', reset); }; }, [ref]); }; const PortfolioMotionStage = () => { const stageProjects = [getProjectBySlug('matrix-sun-festival'), getProjectBySlug('this-is-drag'), getProjectBySlug('radical-trainer'), getProjectBySlug('disruptivos'), getProjectBySlug('cultural-bytes'), getProjectBySlug('matrix-events')]; const [active, setActive] = React.useState(stageProjects[0]); const [pulses, setPulses] = React.useState([]); const ref = React.useRef(null); usePortfolioPointer(ref); const launchPulse = (event) => { const rect = ref.current.getBoundingClientRect(); const pulse = { id: `${Date.now()}-${Math.random()}`, x: event.clientX - rect.left, y: event.clientY - rect.top, }; setPulses((current) => [...current, pulse]); window.setTimeout(() => setPulses((current) => current.filter((item) => item.id !== pulse.id)), 700); }; return (
); }; const PortfolioPage = () => { const [filter, setFilter] = React.useState('Todos'); const [activeProject, setActiveProject] = React.useState(portfolioProjects[0]); const visibleProjects = filter === 'Todos' ? portfolioProjects : portfolioProjects.filter((item) => item.category === filter); React.useEffect(() => { if (!visibleProjects.find((item) => item.name === activeProject.name)) { setActiveProject(visibleProjects[0] || portfolioProjects[0]); } }, [filter]); return ( <> Casos y clientes que convierten el trabajo en prueba social visible.} subtitle="Una selección de marcas y proyectos donde Retórica convirtió estrategia, diseño y contenido en una presencia más fuerte y vendible." ctaLabel="Ir a contacto" />
Selección destacada

Una vitrina de marcas que ya pasaron del concepto a una presencia con carácter.

Cada proyecto revela una parte del criterio de Retórica: marcas que se ven mejor, comunican mejor y llegan con más fuerza a su audiencia.

{['Branding', 'Digital', 'Contenido', 'Eventos', 'Identidad visual'].map((item) => ( {item} ))}
Estudio Retorica
{portfolioFilters.map((item) => ( ))}
{visibleProjects.map((item) => (
{item.category}
{item.name}
{item.summary}
{item.services.slice(0, 3).map((service) => {service})}
Ver caso
))}
Proyecto en foco

{activeProject.name}

{activeProject.impact}

{activeProject.services.map((item) => ( {item} ))}
{portfolioProjects.map((item, index) => (
{item.name} {item.name}
))}
); }; const CasePage = () => { const search = new URLSearchParams(window.location.search); const project = getProjectBySlug(search.get('project')); const relatedProjects = project.related.map((slug) => getProjectBySlug(slug)).filter(Boolean); return ( <> {project.name}} subtitle={project.summary} bg="black" ctaLabel="Solicitar propuesta" ctaHref="/contacto/#contact" />
Resumen del caso

Un caso para ver cómo Retórica convierte intención en presencia de marca.

{project.impact}

{project.services.map((item) => {item})}
{[ ['Reto', project.challenge], ['Enfoque', project.approach], ['Entregables', project.deliverables.join(' · ')], ['Resultado', project.result], ].map(([title, text]) => (
{title}

{text}

))}
Más trabajo

Otros casos para seguir recorriendo el trabajo del estudio.

Ver todos
{relatedProjects.map((item) => (
{item.category}
{item.name}
{item.summary}
))}
Siguiente paso

¿Quieres una página, identidad o campaña con este nivel de presencia?

El sitio ya incluye brief inicial y contacto por WhatsApp para empezar una propuesta con mejor contexto desde el primer mensaje.

); }; const ServicesPage = () => ( <> Retórica articula branding, desarrollo web, marketing y contenido dentro de una sola propuesta de agencia.} subtitle="Branding, desarrollo web, marketing digital y contenido articulados para que una marca gane presencia, orden y capacidad comercial." bg="black" ctaLabel="Ver portafolio" ctaHref="/portafolio/" />
Capacidades

Una oferta más clara, estratégica y orientada a conversión.

    {['Identidad corporativa', 'Diseño web', 'Gestión de redes sociales', 'Buzoneo y street marketing', 'Posicionamiento web y marketing', 'Audiovisual y podcast'].map((item) => (
  • {item}
    • ))}
Qué comunica esta página

Todo lo que una marca necesita para verse mejor y vender con más fuerza.

Retórica conecta identidad, web, marketing y contenido para que la marca tenga una base coherente, atractiva y lista para salir a buscar resultados.

{[ { n: '01', title: 'Identidad corporativa', desc: 'Sistema visual, presentaciones, aplicaciones y tono verbal para construir reconocimiento.', items: ['Logo y versiones', 'Paleta y tipografía', 'Aplicaciones de marca', 'Piezas de presentación'], }, { n: '02', title: 'Diseño web', desc: 'Sitios a medida que presentan mejor el valor de la marca y funcionan como escaparate para clientes y oportunidades.', items: ['Home comercial', 'Páginas de servicio', 'Portafolio visual', 'Formularios y CTA'], }, { n: '03', title: 'Redes, SEO y marketing', desc: 'Una misma base para social media, posicionamiento web, contenido y campañas online.', items: ['Gestión de redes', 'Contenido editorial', 'SEO y captación', 'Landing de campaña'], }, { n: '04', title: 'Audiovisual y activaciones', desc: 'La propuesta también cubre reels, podcast, piezas visuales, fotografía, video y marketing directo.', items: ['Video y podcast', 'Fotografía', 'Street marketing', 'Buzoneo'], }, ].map((item) => (
{item.n}

{item.title}

{item.desc}

    {item.items.map((sub) =>
  • {sub}
    • )}
))}
); const StudioPage = () => ( <> Retórica pone el discurso en el centro para convertir marcas en presencia, presencia en confianza y confianza en negocio.} subtitle="Una agencia donde la estrategia verbal, la identidad visual y la ejecución digital trabajan juntas para mover una marca con más claridad y más intención." ctaLabel="Ver servicios" ctaHref="/servicios/" />
Qué define esta propuesta

Una agencia que piensa, diseña y activa marcas con una lógica clara de crecimiento.

Retórica trabaja desde una idea simple y poderosa: cuando el mensaje está bien construido, la marca se siente más sólida, el sitio convence más y el marketing encuentra mejor dirección.

Principios
    {['Propuesta de valor entendible desde la home', 'Más dinamismo sin sacrificar claridad', 'Portafolio organizado para explicar mejor el trabajo', 'Canales de contacto listos para convertir'].map((item) => (
  • {item}
    • ))}
{[ ['01', 'Atracción', 'La primera pantalla comunica mejor el perfil de agencia, su tono y la amplitud de servicios que puede articular.'], ['02', 'Confianza', 'Los proyectos, clientes y casos funcionan como prueba visible del criterio y la capacidad de ejecución de Retórica.'], ['03', 'Conversión', 'Brief, correo y WhatsApp facilitan el inicio de la conversación, la solicitud de propuesta y la maduración del lead.'], ].map(([year, title, text]) => (
{year}
{title}

{text}

))}
); const JournalContactSection = () => { const [sent, setSent] = React.useState(false); const [waUrl, setWaUrl] = React.useState(''); const [form, setForm] = React.useState({ name: '', email: '', service: CONTACT_SERVICES[0], message: '', }); const handleChange = (key, value) => setForm((prev) => ({ ...prev, [key]: value })); const handleSubmit = (e) => { e.preventDefault(); const url = buildWhatsappUrl(form); setWaUrl(url); setSent(true); window.open(url, '_blank', 'noopener'); }; return (
Formulario de contacto

Cuéntanos qué necesita tu marca y llevemos la conversación a una propuesta clara.

Si ya tienes una idea, un sitio por mejorar, una campaña por lanzar o una marca por ordenar, este formulario ayuda a que Retórica reciba el contexto correcto desde el primer mensaje.

{!sent ? ( <>
handleChange('name', e.target.value)} required />
handleChange('email', e.target.value)} required />
{CONTACT_SERVICES.map((service) => ( ))}