!-- Import Google Fonts (DM Sans & Montserrat) --
link rel=preconnect href=httpsfonts.googleapis.com
link rel=preconnect href=httpsfonts.gstatic.com crossorigin
link href=httpsfonts.googleapis.comcss2family=DM+Sansopsz,wght@0,9..40,400;0,9..40,500;0,9..40,700&family=Montserratwght@400;500;600;700&display=swap rel=stylesheet
!-- Tailwind CSS --
script src=httpscdn.tailwindcss.comscript
style
1. SISTEMA TIPOGRÁFICO AVANZADO
@font-face {
font-family 'Momo Trust';
src local('Impact'), local('Arial Black');
font-weight 800;
font-display swap;
}
2. IDENTIDAD CROMÁTICA
root {
--oscuro #222221;
--azul-claro #FBFBFD;
--celeste #3284C6;
--naranja #EB5B27;
--naranja-claro #FECA66;
--grad-vibrante linear-gradient(135deg, var(--celeste) 0%, var(--naranja-claro) 100%);
}
Reglas Base
.telat-wrapper {
background-color var(--azul-claro);
color var(--oscuro);
font-family 'Montserrat', sans-serif;
line-height 1.6;
overflow-x hidden;
}
Prioridad a Impact restaurada
.telat-wrapper h1, .telat-wrapper h2, .telat-wrapper h3, .telat-wrapper .font-momo, #mobile-menu-overlay {
font-family 'Momo Trust', Impact, 'Arial Black', sans-serif;
}
.telat-wrapper .subheading, .telat-wrapper button, .telat-wrapper .btn-pill, #mobile-menu-overlay a {
font-family 'DM Sans', sans-serif;
letter-spacing -0.02em;
}
3. INTEGRIDAD DEL LOGOTIPO
.brand-logo {
min-width 120px;
max-width 180px;
padding 1.5rem;
filter drop-shadow(0 0 0 transparent) !important;
transition transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.brand-logohover {
transform scale(1.05) rotate(-2deg);
transform-origin left;
}
6. ARQUITECTURA UI
.card-modern {
background-color #FFFFFF;
border-radius 1.5rem;
box-shadow 0 4px 6px -1px rgba(0, 0, 0, 0.05);
transition transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
position relative;
}
.card-modernhover { transform translateY(-8px); z-index 10; }
.card-modern.glow-naranjahover { box-shadow 0 20px 40px rgba(235, 91, 39, 0.2); }
.card-modern.glow-celestehover { box-shadow 0 20px 40px rgba(50, 132, 198, 0.2); }
.card-modern.glow-amarillohover { box-shadow 0 20px 40px rgba(254, 202, 102, 0.25); }
.accent-top-celeste { border-top 3px solid var(--celeste); }
.accent-top-naranja { border-top 3px solid var(--naranja); }
.accent-top-amarillo { border-top 3px solid var(--naranja-claro); }
.title-accent { position relative; padding-top 1rem; }
.title-accentbefore {
content '';
position absolute; top 0; left 0;
width 40px; height 3px;
background-color var(--naranja-claro);
}
TOOLTIPS TECHIES CUSTOM
.card-modernafter {
content attr(data-tooltip);
position absolute;
bottom 100%; left 50%;
transform translateX(-50%) translateY(10px);
background var(--oscuro);
color #fff;
padding 8px 16px;
border-radius 8px;
font-size 0.85rem;
font-family 'DM Sans', sans-serif;
font-weight 700;
letter-spacing -0.01em;
white-space nowrap;
opacity 0;
visibility hidden;
transition all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events none;
box-shadow 0 10px 25px rgba(34,34,33,0.3);
z-index 30;
}
.card-modernbefore {
content '';
position absolute;
bottom 100%; left 50%;
transform translateX(-50%) translateY(10px);
border-width 6px;
border-style solid;
border-color var(--oscuro) transparent transparent transparent;
opacity 0;
visibility hidden;
transition all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index 30;
}
.card-modernhoverafter,
.card-modernhoverbefore {
opacity 1;
visibility visible;
transform translateX(-50%) translateY(-15px);
}
.text-fluid-h1 { font-size clamp(3rem, 7vw, 6rem); line-height 1.05; }
.text-hollow {
font-size clamp(4rem, 12vw, 10rem);
-webkit-text-stroke 3px var(--naranja);
color transparent;
line-height 0.8;
}
@keyframes float { 0%, 100% { transform translateY(0px) rotate(0deg); } 50% { transform translateY(-15px) rotate(5deg); } }
.animate-float { animation float 6s ease-in-out infinite; }
@keyframes float-fast { 0%, 100% { transform translateY(0px) rotate(0deg); } 50% { transform translateY(-10px) rotate(8deg); } }
.animate-float-fast { animation float-fast 4s ease-in-out infinite; }
@keyframes scroll-text { 0% { transform translateX(0); } 100% { transform translateX(-50%); } }
.animate-scroll { animation scroll-text 20s linear infinite; }
@keyframes wiggle { 0%, 100% { transform rotate(-3deg); } 50% { transform rotate(3deg); } }
.animate-wiggle { animation wiggle 4s ease-in-out infinite; }
@keyframes spin-slow { 0% { transform rotate(0deg); } 100% { transform rotate(360deg); } }
.animate-spin-slow { animation spin-slow 20s linear infinite; }
.btn-glow-naranja { box-shadow 0 10px 25px rgba(235, 91, 39, 0.3); }
.btn-glow-naranjahover { box-shadow 0 15px 35px rgba(235, 91, 39, 0.5); }
.easter-egg-dog {
opacity 0; transform translateY(20px) scale(0.9);
transition all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events none;
}
.trigger-egghover .easter-egg-dog { opacity 1; transform translateY(0) scale(1); }
--- ROMPER CÁRCEL DE ELEMENTOR ---
.elementor-widget-html,
.elementor-widget-container,
.elementor-element {
contain none !important;
transform none !important;
}
#telat-main-header {
display block !important;
visibility visible !important;
opacity 1 !important;
}
style
!-- HEADER BLINDADO --
header id=telat-main-header class=transition-all duration-300 style=position fixed !important; top 0 !important; left 0 !important; width 100% !important; z-index 999999 !important; background-color rgba(251, 251, 253, 0.9); backdrop-filter blur(12px); border-bottom 1px solid rgba(229, 231, 235, 0.5);
div class=max-w-7xl mx-auto px-6 lgpx-8 py-2 flex justify-between items-center
!-- Logo --
a href=# class=block brand-logo relative z-[1000000]
img src=httpstelat.mxassetsimglogo.png alt=Telat Group class=h-12 mdh-16 w-auto object-contain
a
!-- Navegación Desktop --
nav class=hidden mdflex gap-8 items-center subheading font-bold text-lg text-[#222221]
a href=#servicios class=relative group hovertext-[#3284C6] transition-colors py-2Serviciosspan class=absolute bottom-0 left-0 w-0 h-[3px] bg-[#3284C6] transition-all duration-300 group-hoverw-full rounded-fullspana
a href=#referidos class=relative group hovertext-[#EB5B27] transition-colors py-2Programa Referidosspan class=absolute bottom-0 left-0 w-0 h-[3px] bg-[#EB5B27] transition-all duration-300 group-hoverw-full rounded-fullspana
a href=#nosotros class=relative group hovertext-[#FECA66] transition-colors py-2Nosotrosspan class=absolute bottom-0 left-0 w-0 h-[3px] bg-[#FECA66] transition-all duration-300 group-hoverw-full rounded-fullspana
a href=#contacto class=group flex items-center gap-2 bg-[#EB5B27] text-white px-8 py-3.5 rounded-full hoverbg-[#FECA66] hovertext-[#222221] transition-all duration-300 font-bold overflow-hidden btn-glow-naranja ml-2 hover-translate-y-1
spanInicia tu proyectospan
svg class=w-5 h-5 -translate-x-full opacity-0 hidden w-0 group-hoverblock group-hoverw-5 group-hovertranslate-x-0 group-hoveropacity-100 transition-all duration-300 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M14 5l7 7m0 0l-7 7m7-7H3pathsvg
a
nav
!-- Botón Hamburguesa Móvil --
button id=mobile-menu-btn class=mdhidden relative z-[1000000] p-2 text-[#222221] hovertext-[#EB5B27] transition-colors focusoutline-none
svg id=icon-menu class=w-8 h-8 transition-transform duration-300 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M4 6h16M4 12h16M4 18h16pathsvg
svg id=icon-close class=w-8 h-8 hidden transition-transform duration-300 rotate-90 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M6 18L18 6M6 6l12 12pathsvg
button
div
header
!-- MENÚ MÓVIL OVERLAY BLINDADO --
div id=mobile-menu-overlay class=bg-[#FBFBFD]98 backdrop-blur-xl flex flex-col items-center justify-center transition-all duration-500 ease-in-out style=position fixed !important; top 0 !important; left 0 !important; width 100vw !important; height 100vh !important; z-index 9999998 !important; opacity 0; pointer-events none; visibility hidden;
nav class=flex flex-col gap-8 items-center text-center font-bold text-2xl text-[#222221] relative style=z-index 10000000 !important;
a href=#servicios class=mobile-link hovertext-[#3284C6] transition-colorsServiciosa
a href=#referidos class=mobile-link hovertext-[#EB5B27] transition-colorsPrograma Referidosa
a href=#nosotros class=mobile-link hovertext-[#FECA66] transition-colorsNosotrosa
a href=#contacto class=mobile-link mt-6 bg-[#EB5B27] text-white px-10 py-4 rounded-full shadow-[0_10px_25px_rgba(235,91,39,0.3)]Inicia tu proyectoa
nav
svg class=absolute bottom-20 opacity-20 animate-spin-slow w-32 h-32 pointer-events-none viewBox=0 0 100 100 fill=nonepath d=M50 0L56.5 35.5L95 20.5L66 50L95 79.5L56.5 64.5L50 100L43.5 64.5L5 79.5L34 50L5 20.5L43.5 35.5L50 0Z fill=#3284C6svg
div
!-- ========================================== --
!-- WRAPPER DEL CONTENIDO (REEMPLAZA AL BODY) --
!-- ========================================== --
div class=telat-wrapper selectionbg-[#FECA66] selectiontext-[#222221] antialiased
!-- HERO SECTION --
section class=relative pt-40 pb-20 lgpt-48 lgpb-32 overflow-hidden
div class=absolute top-32 left-10 lgleft-20 animate-float opacity-80 z-0
svg width=60 height=60 viewBox=0 0 100 100 fill=nonepath d=M50 0L56.5 35.5L95 20.5L66 50L95 79.5L56.5 64.5L50 100L43.5 64.5L5 79.5L34 50L5 20.5L43.5 35.5L50 0Z fill=#FECA66svg
div
div class=max-w-7xl mx-auto px-6 lgpx-8 relative z-10
div class=grid lggrid-cols-2 gap-12 items-center
div class=max-w-2xl relative
span class=subheading font-bold text-[#3284C6] uppercase text-sm mb-4 inline-block bg-[#3284C6]10 px-4 py-1.5 rounded-full border border-[#3284C6]20Socio Estratégico B2Bspan
h1 class=text-fluid-h1 text-[#222221] mb-6
Entendemos tu br
span class=text-[#EB5B27] relative inline-block
operación.
svg class=absolute -right-24 -bottom-6 animate-wiggle w-20 h-auto hidden mdblock viewBox=0 0 80 50 fill=nonepath d=M10 10 Q 40 40, 70 40 M 60 30 L 75 40 L 60 50 stroke=#FECA66 stroke-width=6 stroke-linecap=round stroke-linejoin=roundsvg
span
h1
p class=text-lg text-[#222221]80 mb-8 max-w-xl
Brindamos servicios de contact center efectivos, respaldados por la tecnología y operados por especialistas. strong class=font-bold text-[#222221]No presumimos, resolvemos.strong
p
a href=#contacto class=group inline-flex items-center gap-3 bg-[#EB5B27] text-white subheading font-bold px-8 py-4 rounded-full hoverbg-[#FECA66] hovertext-[#222221] transition-all btn-glow-naranja hover-translate-y-1
spanHabla con un asesor estratégicospan
svg class=w-5 h-5 group-hovertranslate-x-1 transition-transform fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M14 5l7 7m0 0l-7 7m7-7H3pathsvg
a
div
div class=relative z-10 group
div class=absolute -top-6 -right-6 bg-white20 backdrop-blur-md border border-white40 p-4 rounded-2xl z-20 shadow-xl animate-float-fast transform rotate-6
span class=font-momo text-2xl text-white#StayChill 🚀span
div
div class=relative rounded-[2rem] overflow-hidden shadow-2xl shadow-[#3284C6]30 h-[400px] lgh-[500px] w-full bg-[#222221] flex items-center justify-center transform group-hoverscale-[1.02] transition-transform duration-700
iframe src=httpsplayer.vimeo.comvideo1188266708background=1&autoplay=1&loop=1&byline=0&title=0&muted=1 class=absolute w-[170%] h-[170%] max-w-none mix-blend-screen frameborder=0 allow=autoplay; fullscreen allowfullscreeniframe
div class=absolute inset-0 bg-gradient-to-tr from-[#3284C6]40 to-[#FECA66]40 mix-blend-multiplydiv
div
div
div
div
section
!-- SERVICIOS SECTION --
section id=servicios class=py-24 relative overflow-hidden
div class=absolute left-0 top-40 opacity-40 animate-spin-slow hidden lgblock z-0
svg width=150 height=150 viewBox=0 0 100 100 fill=nonecircle cx=50 cy=50 r=45 stroke=#3284C6 stroke-width=3 stroke-dasharray=8 8svg
div
div class=max-w-7xl mx-auto px-6 lgpx-8 relative z-10
div class=text-center max-w-3xl mx-auto mb-20
span class=subheading font-bold text-[#EB5B27] tracking-widest uppercase text-sm mb-4 blockNuestras Solucionesspan
h2 class=font-momo text-4xl lgtext-5xl text-[#222221] mb-6 leading-tight
No solo ejecutamos procesos. br span class=text-[#3284C6]Hacemos crecer tu operación.span
h2
p class=text-lg text-[#222221]80 font-medium
Soluciones integrales de contact center y BPO diseñadas para cada etapa del ciclo de vida de tus clientes.
p
div
div class=grid mdgrid-cols-2 lggrid-cols-3 gap-8
!-- Tarjeta 1 --
div class=card-modern accent-top-celeste glow-celeste p-10 group data-tooltip=Hacemos que tus clientes te amen de vuelta 💙
div class=w-14 h-14 bg-[#3284C6]10 rounded-2xl flex items-center justify-center mb-6 text-[#3284C6] group-hoverscale-110 group-hoverbg-[#3284C6] group-hovertext-white transition-all duration-300
svg class=w-7 h-7 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0zpathsvg
div
div class=font-momo text-2xl text-[#222221] mb-4 title-accent leading-tightCustomer Experience que genera lealtaddiv
p class=text-[#222221]70 mb-8 text-smCada conversación cuenta… y nosotros la hacemos valer. Transformamos la atención a clientes en una experiencia ágil, empática y resolutiva.p
div class=mt-auto pt-5 border-t border-gray-10080
ul class=space-y-3
li class=flex items-start gap-3 text-sm font-bold text-[#222221]80 groupitem
span class=text-[#EB5B27] mt-0.5 group-hoveritemscale-125 transition-transformsvg class=w-4 h-4 fill=currentColor viewBox=0 0 20 20path fill-rule=evenodd d=M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z clip-rule=evenoddpathsvgspan
Mayor satisfacción y lealtad
li
ul
div
div
!-- Tarjeta 2 --
div class=card-modern accent-top-naranja glow-naranja p-10 group data-tooltip=Problema resuelto en la primera llamada 🛠️
div class=w-14 h-14 bg-[#EB5B27]10 rounded-2xl flex items-center justify-center mb-6 text-[#EB5B27] group-hoverscale-110 group-hoverbg-[#EB5B27] group-hovertext-white transition-all duration-300
svg class=w-7 h-7 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065zpathpath stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M15 12a3 3 0 11-6 0 3 3 0 016 0zpathsvg
div
div class=font-momo text-2xl text-[#222221] mb-4 title-accent leading-tightSoporte Técnico que realmente resuelvediv
p class=text-[#222221]70 mb-8 text-smTus clientes no quieren explicaciones… quieren soluciones. Nuestro equipo diagnostica, resuelve y da seguimiento con precisión.p
div class=mt-auto pt-5 border-t border-gray-10080
ul class=space-y-3
li class=flex items-start gap-3 text-sm font-bold text-[#222221]80 groupitem
span class=text-[#3284C6] mt-0.5 group-hoveritemscale-125 transition-transformsvg class=w-4 h-4 fill=currentColor viewBox=0 0 20 20path fill-rule=evenodd d=M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z clip-rule=evenoddpathsvgspan
Tiempos de resolución cortos
li
ul
div
div
!-- Tarjeta 3 --
div class=card-modern accent-top-amarillo glow-amarillo p-10 group data-tooltip=Recuperamos ingresos manteniendo la amistad 🤝
div class=w-14 h-14 bg-[#FECA66]20 rounded-2xl flex items-center justify-center mb-6 text-[#EB5B27] group-hoverscale-110 group-hoverbg-[#FECA66] transition-all duration-300
svg class=w-7 h-7 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0zpathsvg
div
div class=font-momo text-2xl text-[#222221] mb-4 title-accent leading-tightCobranza inteligentediv
p class=text-[#222221]70 mb-8 text-smCobrar bien también es parte de una buena experiencia. Ejecutamos estrategias efectivas que recuperan ingresos sin deteriorar la relación.p
div class=mt-auto pt-5 border-t border-gray-10080
ul class=space-y-3
li class=flex items-start gap-3 text-sm font-bold text-[#222221]80 groupitem
span class=text-[#EB5B27] mt-0.5 group-hoveritemscale-125 transition-transformsvg class=w-4 h-4 fill=currentColor viewBox=0 0 20 20path fill-rule=evenodd d=M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z clip-rule=evenoddpathsvgspan
Mayor recuperación
li
ul
div
div
!-- Tarjeta 4 --
div class=card-modern accent-top-celeste glow-celeste p-10 group data-tooltip=Tu burocracia, automatizada y en orden 📁
div class=w-14 h-14 bg-[#3284C6]10 rounded-2xl flex items-center justify-center mb-6 text-[#3284C6] group-hoverscale-110 group-hoverbg-[#3284C6] group-hovertext-white transition-all duration-300
svg class=w-7 h-7 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2zpathsvg
div
div class=font-momo text-2xl text-[#222221] mb-4 title-accent leading-tightBack Office que acelera tu operacióndiv
p class=text-[#222221]70 mb-8 text-smLo que pasa detrás… define lo que pasa enfrente. Optimizamos tus procesos administrativos para que tu operación sea más ágil.p
div class=mt-auto pt-5 border-t border-gray-10080
ul class=space-y-3
li class=flex items-start gap-3 text-sm font-bold text-[#222221]80 groupitem
span class=text-[#3284C6] mt-0.5 group-hoveritemscale-125 transition-transformsvg class=w-4 h-4 fill=currentColor viewBox=0 0 20 20path fill-rule=evenodd d=M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z clip-rule=evenoddpathsvgspan
Procesos más rápidos
li
ul
div
div
!-- Tarjeta 5 --
div class=card-modern accent-top-naranja glow-naranja p-10 group data-tooltip=Convertimos leads fríos en clientes reales 🔥
div class=w-14 h-14 bg-[#EB5B27]10 rounded-2xl flex items-center justify-center mb-6 text-[#EB5B27] group-hoverscale-110 group-hoverbg-[#EB5B27] group-hovertext-white transition-all duration-300
svg class=w-7 h-7 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M13 7h8m0 0v8m0-8l-8 8-4-4-6 6pathsvg
div
div class=font-momo text-2xl text-[#222221] mb-4 title-accent leading-tightVentas asistidas y agendamientodiv
p class=text-[#222221]70 mb-8 text-smNo se trata solo de atender… se trata de cerrar. Guiamos a tus clientes facilitando citas y compras orientadas a conversión.p
div class=mt-auto pt-5 border-t border-gray-10080
ul class=space-y-3
li class=flex items-start gap-3 text-sm font-bold text-[#222221]80 groupitem
span class=text-[#EB5B27] mt-0.5 group-hoveritemscale-125 transition-transformsvg class=w-4 h-4 fill=currentColor viewBox=0 0 20 20path fill-rule=evenodd d=M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z clip-rule=evenoddpathsvgspan
Mayor tasa de cierre
li
ul
div
div
!-- Tarjeta 6 --
div class=card-modern accent-top-celeste glow-celeste p-10 group data-tooltip=Una sola voz, en todos los canales 📲
div class=w-14 h-14 bg-[#3284C6]10 rounded-2xl flex items-center justify-center mb-6 text-[#3284C6] group-hoverscale-110 group-hoverbg-[#3284C6] group-hovertext-white transition-all duration-300
svg class=w-7 h-7 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8zpathsvg
div
div class=font-momo text-2xl text-[#222221] mb-4 title-accent leading-tightOmnicanalidad sin friccióndiv
p class=text-[#222221]70 mb-8 text-smLos clientes no piensan en canales. Piensan en soluciones. Integramos todos tus puntos de contacto para una experiencia continua.p
div class=mt-auto pt-5 border-t border-gray-10080
ul class=space-y-3
li class=flex items-start gap-3 text-sm font-bold text-[#222221]80 groupitem
span class=text-[#3284C6] mt-0.5 group-hoveritemscale-125 transition-transformsvg class=w-4 h-4 fill=currentColor viewBox=0 0 20 20path fill-rule=evenodd d=M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z clip-rule=evenoddpathsvgspan
Visión 360 del cliente
li
ul
div
div
div
!-- CTA Banner --
div class=mt-20 bg-[#222221] rounded-[2rem] p-10 lgp-14 relative overflow-hidden flex flex-col lgflex-row items-center justify-between gap-10 group shadow-2xl
div class=absolute inset-0 bg-gradient-to-r from-transparent to-[#3284C6]10div
div class=absolute -right-32 -top-32 w-96 h-96 bg-[#EB5B27] blur-[120px] rounded-full opacity-30 group-hoveropacity-50 transition-opacity duration-700 pointer-events-nonediv
div class=relative z-10 max-w-3xl
h3 class=font-momo text-3xl mdtext-4xl text-white mb-4Soluciones hechas a la medidah3
p class=text-[#FBFBFD]80 text-lg leading-relaxedTu negocio no es genérico. Tu operación tampoco debería serlo. Diseñamos, implementamos y escalamos operaciones adaptadas a tus necesidades.p
div
div class=relative z-10 flex-shrink-0
a href=#contacto class=groupbtn flex items-center gap-2 bg-[#EB5B27] text-white px-8 py-4 rounded-full hoverbg-[#FECA66] hovertext-[#222221] transition-all btn-glow-naranja whitespace-nowrap
spanInicia tu proyectospan
svg class=w-5 h-5 -translate-x-3 opacity-0 group-hoverbtntranslate-x-0 group-hoverbtnopacity-100 transition-all duration-300 fill=none stroke=currentColor viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round stroke-width=2 d=M14 5l7 7m0 0l-7 7m7-7H3pathsvg
a
div
div
div
section
!-- REFERIDOS SECTION --
section id=referidos class=py-32 bg-[#222221] relative overflow-hidden
div class=absolute right-10 top-20 opacity-30 animate-spin-slow
svg width=200 height=200 viewBox=0 0 100 100 fill=nonecircle cx=50 cy=50 r=40 stroke=#EB5B27 stroke-width=2 stroke-dasharray=10 10svg
div
div class=max-w-7xl mx-auto px-6 lgpx-8 relative z-10
div class=mb-20
h2 class=font-momo text-5xl lgtext-7xl text-white mb-6Recomienda y Ganah2
p class=text-xl text-[#FECA66] subheading font-mediumTrae talento joven, comparte la cultura Chill y llévate un bono.p
div
div class=grid mdgrid-cols-12 gap-x-8 gap-y-16 items-start
div class=mdcol-span-4 relative group
div class=text-hollow font-momo mb-2 transform group-hoverscale-105 transition-transform origin-left1div
h3 class=font-momo text-2xl text-white mb-3 title-accentRegistrah3
p class=text-[#FBFBFD]70Ingresa los datos de tu contacto en nuestra plataforma en menos de 2 minutos.p
div
div class=mdcol-span-4 mdmt-16 relative group
div class=text-hollow font-momo mb-2 transform group-hoverscale-105 transition-transform origin-left style=-webkit-text-stroke-color var(--celeste);2div
h3 class=font-momo text-2xl text-white mb-3 title-accent style=--naranja-claro var(--celeste);Firmah3
p class=text-[#FBFBFD]70Nosotros hacemos el resto. Aplican, pasan entrevista y firman.p
div
div class=mdcol-span-4 mdmt-32 relative group
div class=text-hollow font-momo mb-2 transform group-hoverscale-105 transition-transform origin-left style=-webkit-text-stroke-color var(--naranja-claro);3div
h3 class=font-momo text-2xl text-white mb-3 title-accentGanah3
p class=text-[#FBFBFD]70Recibe tu pago directo una vez que terminen capacitación. ¡A jalar!p
div
div
div
section
!-- NOSOTROS SECTION --
section id=nosotros class=py-24 bg-white relative overflow-hidden border-t border-gray-100
div class=absolute top-40 -left-10 opacity-20 z-0 hidden lgblock animate-float
svg width=150 height=200 viewBox=0 0 100 200 fill=nonepath d=M0 0 Q 100 50 50 100 T 100 200 stroke=#EB5B27 stroke-width=8 fill=none stroke-linecap=roundsvg
div
div class=max-w-7xl mx-auto px-6 lgpx-8 mb-24 relative z-10
div class=grid lggrid-cols-2 gap-16 items-center
div class=relative
span class=subheading font-bold tracking-widest text-[#3284C6] uppercase text-sm mb-4 blockSobre Telat Groupspan
h2 class=font-momo text-4xl lgtext-5xl text-[#222221] mb-6 leading-tight relative inline-block
Más que un call center. brspan class=text-[#EB5B27]Somos expertos en resultados.span
svg class=absolute -right-12 -top-6 w-10 h-10 animate-spin-slow opacity-80 viewBox=0 0 100 100 fill=nonepath d=M50 0L56.5 35.5L95 20.5L66 50L95 79.5L56.5 64.5L50 100L43.5 64.5L5 79.5L34 50L5 20.5L43.5 35.5L50 0Z fill=#3284C6svg
h2
p class=text-lg text-[#222221]80 mb-6 leading-relaxed font-mediumCombinamos experiencia, tecnología y pasión para ofrecer soluciones de contact center que transforman la manera en que tu empresa se conecta con sus clientes.p
div
div class=grid grid-cols-2 gap-6
div class=bg-[#FBFBFD] p-6 rounded-3xl border border-gray-10050 text-center hovershadow-xl hovershadow-[#EB5B27]15 hover-translate-y-2 transition-all duration-300 cursor-default
div class=font-momo text-5xl text-[#EB5B27] mb-220div
p class=subheading text-sm font-bold text-[#222221]70 uppercase tracking-wideAños de experienciap
div
div class=bg-[#FBFBFD] p-6 rounded-3xl border border-gray-10050 text-center transform lgtranslate-y-6 hovershadow-xl hovershadow-[#3284C6]15 hover-translate-y-2 transition-all duration-300 cursor-default
div class=font-momo text-5xl text-[#3284C6] mb-2700span class=text-3xl text-[#FECA66]+spandiv
p class=subheading text-sm font-bold text-[#222221]70 uppercase tracking-wideColaboradores activosp
div
div class=bg-[#FBFBFD] p-6 rounded-3xl border border-gray-10050 text-center hovershadow-xl hovershadow-[#FECA66]25 hover-translate-y-2 transition-all duration-300 cursor-default
div class=font-momo text-5xl text-[#FECA66] mb-28div
p class=subheading text-sm font-bold text-[#222221]70 uppercase tracking-wideCertificacionesp
div
div class=bg-[#FBFBFD] p-6 rounded-3xl border border-gray-10050 text-center transform lgtranslate-y-6 hovershadow-xl hovershadow-[#222221]15 hover-translate-y-2 transition-all duration-300 cursor-default
div class=font-momo text-5xl text-[#222221] mb-23div
p class=subheading text-sm font-bold text-[#222221]70 uppercase tracking-wideInstalacionesp
div
div
div
div
div class=w-full bg-[#222221] py-6 overflow-hidden flex whitespace-nowrap transform -rotate-2 relative z-10 scale-105 border-y-4 border-[#EB5B27] shadow-xl
div class=animate-scroll flex gap-8 items-center font-momo text-2xl mdtext-3xl text-white uppercase tracking-wider
spanSomos la voz que representaspan span class=text-[#FECA66]✦span
spanSomos la voz que conectaspan span class=text-[#3284C6]✦span
spanSomos la voz que genera confianzaspan span class=text-[#FECA66]✦span
spanSomos la voz que representaspan span class=text-[#FECA66]✦span
spanSomos la voz que conectaspan span class=text-[#3284C6]✦span
spanSomos la voz que genera confianzaspan span class=text-[#FECA66]✦span
div
div
div class=bg-[#FBFBFD] py-24 border-b border-gray-100 relative overflow-hidden
div class=absolute right-0 top-20 opacity-20 animate-spin-slow pointer-events-none
svg width=200 height=200 viewBox=0 0 100 100 fill=nonepath d=M10 50 A40 40 0 1 1 90 50 A40 40 0 1 1 10 50 stroke=#EB5B27 stroke-width=4 stroke-dasharray=10 10svg
div
div class=max-w-7xl mx-auto px-6 lgpx-8
div class=text-center mb-20 relative z-10
span class=subheading font-bold tracking-widest text-[#EB5B27] uppercase text-sm mb-4 blockCultura Telatspan
h2 class=font-momo text-4xl lgtext-5xl text-[#222221] mb-4No los colgamos en la pared.brspan class=text-[#3284C6]Los vivimos a diario.spanh2
div
div class=grid grid-cols-1 mdgrid-cols-2 lggrid-cols-3 gap-8 px-4
div class=bg-[#EB5B27] text-white p-8 rounded-3xl shadow-[0_15px_35px_rgba(235,91,39,0.2)] -rotate-3 hoverrotate-0 hoverscale-105 hoverz-20 transition-all duration-300 relative group
div class=absolute -top-3 left-12 -translate-x-12 w-14 h-5 bg-white20 backdrop-blur-md border border-white30 rounded rotate-2 shadow-smdiv
h4 class=font-momo text-3xl mb-3Honestidadh4
p class=font-medium text-white90 leading-relaxedLa transparencia total no es opcional. Decimos las cosas como son, a nuestros clientes y a nuestro equipo.p
div
div class=bg-white text-[#222221] p-8 rounded-3xl shadow-[0_15px_35px_rgba(50,132,198,0.1)] border-2 border-[#3284C6]20 rotate-2 translate-y-4 hoverrotate-0 hoverscale-105 hoverz-20 transition-all duration-300 relative group
div class=absolute -top-4 right-8 text-[#3284C6] opacity-50 group-hoveranimate-bouncesvg class=w-8 h-8 fill=currentColor viewBox=0 0 24 24circle cx=12 cy=12 r=6svgdiv
h4 class=font-momo text-3xl mb-3 text-[#3284C6]Respetoh4
p class=font-medium text-[#222221]70 leading-relaxedValoramos la dignidad de cada persona. Sin jerarquías tóxicas, solo colaboración genuina.p
div
div class=bg-[#222221] text-white p-8 rounded-3xl shadow-[0_15px_35px_rgba(34,34,33,0.3)] -rotate-2 hoverrotate-0 hoverscale-105 hoverz-20 transition-all duration-300 relative group
div class=absolute -top-3 left-12 -translate-x-12 w-14 h-5 bg-[#FECA66]30 backdrop-blur-md border border-[#FECA66]20 rounded -rotate-2 shadow-smdiv
h4 class=font-momo text-3xl mb-3 text-[#FECA66]Liderazgoh4
p class=font-medium text-white80 leading-relaxedNo empujamos, jalamos. Inspiramos con el ejemplo para alcanzar metas colectivas, arremangándonos la camisa.p
div
div class=bg-[#3284C6] text-white p-8 rounded-3xl shadow-[0_15px_35px_rgba(50,132,198,0.3)] rotate-3 hoverrotate-0 hoverscale-105 hoverz-20 transition-all duration-300 relative group lgtranslate-y-8
div class=absolute -top-3 left-12 -translate-x-12 w-14 h-5 bg-white20 backdrop-blur-md border border-white30 rounded rotate-1 shadow-smdiv
h4 class=font-momo text-3xl mb-3Compromisoh4
p class=font-medium text-white90 leading-relaxedEntrega total en cada proyecto. Si el cliente confía en nosotros, respondemos con excelencia obsesiva.p
div
div class=bg-[#FECA66] text-[#222221] p-8 rounded-3xl shadow-[0_15px_35px_rgba(254,202,102,0.3)] -rotate-1 translate-y-2 hoverrotate-0 hoverscale-105 hoverz-20 transition-all duration-300 relative group
div class=absolute -top-5 right-6 text-[#EB5B27] group-hoverscale-125 transition-transformsvg class=w-10 h-10 fill=none stroke=currentColor viewBox=0 0 24 24 stroke-width=2path stroke-linecap=round stroke-linejoin=round d=M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z svgdiv
h4 class=font-momo text-3xl mb-3Creatividadh4
p class=font-medium text-[#222221]80 leading-relaxedInnovamos sin miedo. No nos conformamos con el siempre se ha hecho así, buscamos el cómo se podría hacer mejor.p
div
div class=bg-white text-[#222221] p-8 rounded-3xl shadow-[0_15px_35px_rgba(235,91,39,0.1)] border-2 border-[#EB5B27]20 rotate-2 hoverrotate-0 hoverscale-105 hoverz-20 transition-all duration-300 relative group lgtranslate-y-4
div class=absolute -top-3 left-12 -translate-x-12 w-14 h-5 bg-[#EB5B27]10 backdrop-blur-md border border-[#EB5B27]20 rounded rotate-3 shadow-smdiv
h4 class=font-momo text-3xl mb-3 text-[#EB5B27]Equidadh4
p class=font-medium text-[#222221]70 leading-relaxedMismas oportunidades, cancha pareja para todos. Fomentamos un ambiente donde el talento es la única métrica.p
div
div
div
div
!-- TECHIE CAROUSEL --
div class=max-w-5xl mx-auto px-6 lgpx-8 pt-24 pb-16 relative
div class=text-center max-w-3xl mx-auto mb-16 relative
span class=subheading font-bold tracking-widest text-[#3284C6] uppercase text-sm mb-4 blockMarcas que confíanspan
h2 class=font-momo text-4xl lgtext-5xl text-[#222221] mb-6
No operan mejor. br span class=text-[#EB5B27]Compiten mejor.span
h2
div
div class=relative w-full group
div class=absolute -top-10 -left-4 lg-left-12 text-[8rem] lgtext-[12rem] font-momo text-transparent opacity-30 z-0 pointer-events-none style=-webkit-text-stroke 3px var(--celeste); line-height 1;div
div class=overflow-hidden rounded-[2rem] bg-white border border-[#3284C6]10 shadow-[0_20px_50px_rgba(50,132,198,0.15)] relative z-10
div id=tech-testimonials-track class=flex w-full items-stretch
!-- Slide 1 --
div class=w-full flex-shrink-0 flex flex-col mdflex-row items-center p-8 mdp-14 gap-8 lggap-12
div class=w-full mdw-13 flex flex-col items-center justify-center border-b mdborder-b-0 mdborder-r border-gray-100 pb-8 mdpb-0 text-center
div class=w-24 h-24 rounded-full bg-[#FBFBFD] border border-[#3284C6]20 shadow-[0_0_20px_rgba(50,132,198,0.25)] flex items-center justify-center overflow-hidden mb-5
svg viewBox=0 0 100 50 class=w-16 h-auto text-blue-800 fill=currentColorellipse cx=50 cy=25 rx=45 ry=20 stroke=currentColor stroke-width=4 fill=nonetext x=50 y=32 font-family=cursive font-size=20 font-weight=bold text-anchor=middleFordtextsvg
div
p class=font-momo text-2xl text-[#222221] leading-none mb-1Laura Hernándezp
p class=subheading text-sm text-[#3284C6] font-boldDirector of CX, LatAmp
div
div class=w-full mdw-23
div class=flex gap-1 text-[#FECA66] mb-6 justify-center mdjustify-start
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
div
p class=text-xl lgtext-2xl text-[#222221]90 font-medium italic text-center mdtext-leftEl nivel de compromiso que Telat mostró con nuestra operación superó todas las métricas esperadas. No son proveedores, son una extensión de nuestra marca.p
div
div
!-- Slide 2 (IBM) --
div class=w-full flex-shrink-0 flex flex-col mdflex-row items-center p-8 mdp-14 gap-8 lggap-12
div class=w-full mdw-13 flex flex-col items-center justify-center border-b mdborder-b-0 mdborder-r border-gray-100 pb-8 mdpb-0 text-center
div class=w-24 h-24 rounded-full bg-[#FBFBFD] border border-[#EB5B27]20 shadow-[0_0_20px_rgba(235,91,39,0.25)] flex items-center justify-center overflow-hidden mb-5 p-3 transition-shadow duration-300 hovershadow-[0_0_30px_rgba(235,91,39,0.4)]
svg viewBox=0 0 100 40 class=w-full h-auto text-blue-600 fill=currentColortext x=50% y=30 font-family=Arial font-size=35 font-weight=900 text-anchor=middle letter-spacing=2IBMtextline x1=0 y1=10 x2=100 y2=10 stroke=white stroke-width=2line x1=0 y1=18 x2=100 y2=18 stroke=white stroke-width=2line x1=0 y1=26 x2=100 y2=26 stroke=white stroke-width=2svg
div
p class=font-momo text-2xl text-[#222221] leading-none mb-1Matt Caesarp
p class=subheading text-sm text-[#EB5B27] font-boldVP of Tech Supportp
div
div class=w-full mdw-23
div class=flex gap-1 text-[#FECA66] mb-6 justify-center mdjustify-start
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
div
p class=text-xl lgtext-2xl text-[#222221]90 font-medium italic text-center mdtext-leftTiempos de resolución cortos y un equipo técnico impecable. Telat Group transformó completamente nuestro servicio de soporte B2B.p
div
div
!-- Slide 3 (META) --
div class=w-full flex-shrink-0 flex flex-col mdflex-row items-center p-8 mdp-14 gap-8 lggap-12
div class=w-full mdw-13 flex flex-col items-center justify-center border-b mdborder-b-0 mdborder-r border-gray-100 pb-8 mdpb-0 text-center
div class=w-24 h-24 rounded-full bg-[#FBFBFD] border border-[#FECA66]40 shadow-[0_0_20px_rgba(254,202,102,0.35)] flex items-center justify-center overflow-hidden mb-5 p-4 transition-shadow duration-300 hovershadow-[0_0_30px_rgba(254,202,102,0.5)]
svg viewBox=0 0 100 60 class=w-full h-auto text-blue-500 fill=none stroke=currentColor stroke-width=8 stroke-linecap=round stroke-linejoin=roundpath d=M 30 30 C 30 15, 45 15, 50 30 C 55 45, 70 45, 70 30 C 70 15, 55 15, 50 30 C 45 45, 30 45, 30 30 Z svg
div
p class=font-momo text-2xl text-[#222221] leading-none mb-1David Chenp
p class=subheading text-sm text-[#FECA66] font-boldGlobal Operations Leadp
div
div class=w-full mdw-23
div class=flex gap-1 text-[#FECA66] mb-6 justify-center mdjustify-start
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
svg class=w-6 h-6 fill=currentColor viewBox=0 0 20 20path d=M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292zsvg
div
p class=text-xl lgtext-2xl text-[#222221]90 font-medium italic text-center mdtext-leftLa agilidad operativa de Telat es increíble. Su enfoque omnicanal ayudó a escalar nuestra operación sin perder el toque humano que buscábamos.p
div
div
div
div class=absolute bottom-0 left-0 w-full h-1.5 bg-gray-100
div id=tech-progress-bar class=h-full bg-gradient-to-r from-[#3284C6] to-[#EB5B27] w-0div
div
div
div class=flex justify-center gap-6 mt-8 lgabsolute lgtop-12 lg-translate-y-12 lgw-[115%] lg-left-[7.5%] lgjustify-between pointer-events-none z-20
button id=tech-prev class=pointer-events-auto w-14 h-14 rounded-full bg-white border border-gray-200 shadow-[0_10px_30px_rgba(34,34,33,0.1)] flex items-center justify-center text-[#222221] hovertext-[#EB5B27] hoverscale-110 transition-all
svg class=w-6 h-6 fill=none stroke=currentColor stroke-width=2.5 viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round d=M15 19l-7-7 7-7pathsvg
button
button id=tech-next class=pointer-events-auto w-14 h-14 rounded-full bg-white border border-gray-200 shadow-[0_10px_30px_rgba(34,34,33,0.1)] flex items-center justify-center text-[#222221] hovertext-[#3284C6] hoverscale-110 transition-all
svg class=w-6 h-6 fill=none stroke=currentColor stroke-width=2.5 viewBox=0 0 24 24path stroke-linecap=round stroke-linejoin=round d=M9 5l7 7-7 7pathsvg
button
div
div
div
section
!-- PRE-FOOTER CTA CON MICROCOPY & FORM --
section id=contacto class=py-24 relative overflow-hidden style=background var(--grad-vibrante);
div class=max-w-3xl mx-auto px-6 text-center relative z-10
h2 class=font-momo text-4xl lgtext-5xl text-white mb-6
Diseñemos una solución que mueva tus resultados.
h2
!-- Input y Botón (Surgical Fix para móviles) --
div class=bg-white p-1.5 smp-2 rounded-full shadow-2xl flex items-center max-w-xl mx-auto mt-10 relative w-full overflow-hidden border border-gray-100
!-- min-w-0 permite que el input se encoja en pantallas muy pequeñas sin empujar al botón --
input type=text id=contact-input placeholder=¿A qué número te marcamos class=flex-grow min-w-0 bg-transparent border-none outline-none px-4 smpx-6 font-medium text-[#222221] placeholdertext-gray-400 text-sm smtext-base w-full
!-- flex-shrink-0 evita que el botón sea aplastado --
button onclick=submitForm() class=flex-shrink-0 bg-[#222221] text-white subheading font-bold px-5 py-3 smpx-8 smpy-3 text-sm smtext-base rounded-full hoverbg-[#3284C6] transition-colors whitespace-nowrap shadow-[0_10px_20px_rgba(34,34,33,0.2)] hovershadow-xl hover-translate-y-0.5
Inicia tu proyecto
button
div
p id=success-msg class=text-white font-bold mt-4 opacity-0 transition-opacity transform translate-y-2 text-lg drop-shadow-md
¡Todo listo! Recibimos tus datos y nos pondremos a jalar en tu proyecto 🚀.
p
div
section
!-- FOOTER INMERSIVO --
footer class=bg-[#222221] pt-20 border-t-4 border-[#EB5B27] relative overflow-hidden
div class=absolute top-0 left-0 w-full overflow-hidden opacity-5 pointer-events-none select-none flex items-center justify-center
h2 class=font-momo text-[12vw] text-white whitespace-nowrapTHE VOICE OF YOUR COMPANYh2
div
div class=max-w-7xl mx-auto px-6 lgpx-8 relative z-10
div class=grid grid-cols-1 mdgrid-cols-4 gap-12 mb-16
div class=mdcol-span-1
img src=httpstelat.mxassetsimglogo.png alt=Telat Group class=brand-logo bg-white rounded-2xl mb-6 shadow-lg shadow-white5 p-4 w-32
div
div
h4 class=subheading font-bold text-white mb-6 text-lgContactoh4
ul class=space-y-3 text-sm text-[#FBFBFD]60
liMonterrey 149, Roma Nte. CDMX.li
lia href=mailtoventas@telat-group.com class=text-[#EB5B27] hovertext-[#FECA66] font-bold transition-colorsventas@telat-group.comali
ul
div
div
h4 class=subheading font-bold text-white mb-6 text-lgCompañíah4
ul class=space-y-3 text-sm text-[#FBFBFD]60
lia href=# class=hovertext-[#3284C6] transition-colorsSobre Nosotrosali
lia href=# class=hovertext-[#3284C6] transition-colorsCasos de Éxitoali
ul
div
div
h4 class=subheading font-bold text-white mb-6 text-lgUnete al equipoh4
div class=trigger-egg inline-block cursor-pointer relative
a href=# class=text-sm text-[#FBFBFD]60 hovertext-[#FECA66] transition-colors flex items-center gap-2
Trabaja con nosotros span class=text-xl🐾span
a
div class=easter-egg-dog absolute bottom-full left-0 mb-4 w-48 bg-white text-[#222221] p-4 rounded-2xl shadow-xl border-2 border-[#EB5B27]
p class=font-momo text-lg leading-tight mb-1¡Stay Chill!p
p class=text-xs font-bold text-[#EB5B27]Póngase a jalar 🐶🕶️p
div class=absolute -bottom-2 left-6 w-4 h-4 bg-white border-r-2 border-b-2 border-[#EB5B27] transform rotate-45div
div
div
div
div
div class=border-t border-gray-800 py-8 flex flex-col mdflex-row justify-between items-center gap-4 text-[#FBFBFD]40 text-xs font-medium
p© 2026 Telat Group. The voice of your company.p
div class=flex gap-6
a href=# class=hovertext-white transition-colorsAviso de Privacidada
div
div
div
footer
script
1. Carrusel Techie (One-by-One, Infinito Real)
document.addEventListener('DOMContentLoaded', () = {
const track = document.getElementById('tech-testimonials-track');
const btnNext = document.getElementById('tech-next');
const btnPrev = document.getElementById('tech-prev');
const progressBar = document.getElementById('tech-progress-bar');
if(!track) return;
let isAnimating = false;
let autoPlayInterval;
const duration = 6000;
const transitionTime = 600;
function startProgress() {
progressBar.style.transition = 'none';
progressBar.style.width = '0%';
void progressBar.offsetWidth;
progressBar.style.transition = `width ${duration}ms linear`;
progressBar.style.width = '100%';
}
function moveNext() {
if (isAnimating) return;
isAnimating = true;
track.style.transition = `transform ${transitionTime}ms cubic-bezier(0.4, 0, 0.2, 1)`;
track.style.transform = 'translateX(-100%)';
setTimeout(() = {
track.style.transition = 'none';
track.appendChild(track.firstElementChild);
track.style.transform = 'translateX(0)';
void track.offsetWidth;
isAnimating = false;
startProgress();
}, transitionTime);
}
function movePrev() {
if (isAnimating) return;
isAnimating = true;
track.style.transition = 'none';
track.prepend(track.lastElementChild);
track.style.transform = 'translateX(-100%)';
void track.offsetWidth;
track.style.transition = `transform ${transitionTime}ms cubic-bezier(0.4, 0, 0.2, 1)`;
track.style.transform = 'translateX(0)';
setTimeout(() = {
isAnimating = false;
startProgress();
}, transitionTime);
}
function resetAutoplay() {
clearInterval(autoPlayInterval);
autoPlayInterval = setInterval(moveNext, duration);
startProgress();
}
btnNext.addEventListener('click', () = {
moveNext();
resetAutoplay();
});
btnPrev.addEventListener('click', () = {
movePrev();
resetAutoplay();
});
track.parentElement.addEventListener('mouseenter', () = {
clearInterval(autoPlayInterval);
progressBar.style.transition = 'none';
});
track.parentElement.addEventListener('mouseleave', resetAutoplay);
resetAutoplay();
});
2. Simulador de Formulario (Microcopy Success)
function submitForm() {
const input = document.getElementById('contact-input');
const msg = document.getElementById('success-msg');
if(input.value.trim() !== '') {
msg.classList.remove('opacity-0', 'translate-y-2');
input.value = '';
setTimeout(() = {
msg.classList.add('opacity-0', 'translate-y-2');
}, 4000);
} else {
input.focus();
}
}
script
!-- Lógica del Menú Móvil --
script
document.addEventListener('DOMContentLoaded', () = {
const btn = document.getElementById('mobile-menu-btn');
const overlay = document.getElementById('mobile-menu-overlay');
const iconMenu = document.getElementById('icon-menu');
const iconClose = document.getElementById('icon-close');
const mobileLinks = document.querySelectorAll('.mobile-link');
function toggleMenu() {
if(!overlay) return;
const isOpen = overlay.style.opacity === '1';
if (isOpen) {
Cerrar
overlay.style.opacity = '0';
overlay.style.pointerEvents = 'none';
setTimeout(() = overlay.style.visibility = 'hidden', 500);
iconMenu.classList.remove('hidden');
iconClose.classList.add('hidden');
} else {
Abrir
overlay.style.visibility = 'visible';
overlay.style.opacity = '1';
overlay.style.pointerEvents = 'auto';
iconMenu.classList.add('hidden');
iconClose.classList.remove('hidden');
}
}
btn.addEventListener('click', toggleMenu);
Cerrar menú al hacer clic en un enlace
mobileLinks.forEach(link = {
link.addEventListener('click', toggleMenu);
});
});
script
!-- HACK DEFINITIVO ANTI-ELEMENTOR --
script
setInterval(() = {
const header = document.getElementById('telat-main-header');
const overlay = document.getElementById('mobile-menu-overlay');
Clavamos el Header al principio absoluto del body
if (header && header.parentElement !== document.body) {
document.body.prepend(header);
header.style.display = 'block';
}
Clavamos el menú móvil al final absoluto del body
if (overlay && overlay.parentElement !== document.body) {
document.body.appendChild(overlay);
}
}, 500); Lo revisa 2 veces por segundo para ganarle a Elementor
script
