:root {
--bg-hero: #06111a;
--text: #FFF; --black: #000; --muted: #a9c3d9; --accent: #3ad1f2; --btn-bg: #0e2b63; --btn-bg-hover: #16375a;
--radius: 14px;
--sombra-iluminacion: 0px 4px 68px 0px rgba(50, 214, 255, 0.486);
} body {
margin: 0;
background-color: var(--black) !important;
color: var(--text) !important;
font-family: 'SF UI Display', sans-serif;
-webkit-font-smoothing: antialiased;
} * {
box-sizing: border-box;
margin: 0;
padding: 0;
} h1,
h2,
h3,
h4,
h5,
h6,
h1>span,
h2>span,
h3>span,
h4>span,
h5>span,
h6>span {
font-family: 'Geometos', sans-serif !important;
} .highlight {
color: var(--accent);
}
.wpcf7-list-item {margin:0px!important}   .navbar {
display: flex;
align-items: center;
justify-content: space-around;
z-index: 1899;
margin-top: 3rem;
width: 100%;
} .navbar-container {
max-width: 63%;
padding: 5px 40px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.185);
border: 1px solid rgba(255, 255, 255, 0.623);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
display: flex;
justify-content:center;
} .navbar-logo {
height: auto;
max-width: 248px;
display: block;
} .navbar-menu {
list-style: none;
display: flex;
gap: 3.3rem;
margin: 0;
padding: 0;
} .navbar-menu a {
color: #fff;
text-decoration: none;
font-weight: 600;
opacity: 0.85;
padding: 8px 10px;
display: block;
font-size: 18px;
}
.navbar-menu li:last-child a { color:#bababa;}
.navbar-menu a:hover {
opacity: 1;
}  .hero {
position: relative;
min-height: 89vh; display: flex;
flex-direction: column;
overflow: hidden;
background: url(https://suma-pay.com/storage/2026/05/background-Home.webp) no-repeat center / cover;
} .hero-content {
display: flex;
justify-content: center;
width: 100%;
min-height: 580px;
text-align: center;
position: relative;
z-index: 1;
flex: 1;
margin-top: 80px;
} .hero-text {
max-width: 800px;
position: relative;
z-index: 2;
pointer-events: none; } .hero h1 {
margin: 0 0 12px;
line-height: 1.2;
font-weight: 800;
font-size: clamp(1.8rem, 6vw, 4rem); letter-spacing: -1px;
} .hero .highlight {
color: var(--accent);
} .hero-description {
color: #FFF;
font-size: clamp(1rem, 1.5vw, 1.2rem);
margin: 10px 5px 30px;
display: inline-block;
width: 50%;
} .hero-icons {
list-style: none;
margin: 0 auto clamp(18px, 3vw, 34px);
padding: 0;
display: flex;
gap: 13px;
justify-content: center;
flex-wrap: wrap;
}
.hero-icons img {
width: 43px;
height: 43px;
object-fit: contain;
} .glass-circle {
width: 43px;
height: 43px;
} .hero-btn {
width: 280px;
display: inline-block;
padding: 14px 28px;
border-radius: 50px;
background: var(--btn-bg);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
text-decoration: none;
font-family: 'SF UI Display', sans-serif;
font-weight: 600;
font-size: 16px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
pointer-events: auto; }
.hero-btn:hover {
background: var(--btn-bg-hover);
} .separador-hero {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
filter: blur(0.3px);
margin: 0px;
} .modal-backdrop{
background: rgba(0, 0, 0, 0.25)!important;
backdrop-filter: blur(10px)!important;
-webkit-backdrop-filter: blur(10px)!important;
}   .hero-cards {
position: absolute;
width: 100%;
inset: 0;
display: flex;
justify-content: center;
max-width: 1400px; margin: 0 auto;
pointer-events: none; }
.hero-cards>div {
width: 20%;
height: auto;
max-height: 250px;
z-index: 2;
pointer-events: auto; } .card-despensa {
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: center center;
top: 30px;
right: 80px;
}
.card-despensa:hover {
cursor: pointer;
} .card-despensa .img-card {
position: absolute;
transition: transform 0.3s ease-in-out;
top: -78px;
left: -40px;
}
.card-despensa:hover .img-card {
transform: rotate(8deg) translateX(5px) scale(1.1);
transform-origin: center center;
} .despensa {
position: absolute; top: 164px;
left: 155px;
transition: opacity 0.3s ease-in-out;
}
.card-despensa:hover .despensa {
opacity: 0;
} .card-viaticos {
position: relative;
transform-origin: center center;
top: 300px;
left: -240px;
}
.card-viaticos:hover {
cursor: pointer;
}
.card-viaticos .img-card {
position: absolute;
transition: transform 0.3s ease-in-out;
left: -1px;
top: -12px;
}
.card-viaticos:hover .img-card {
transform-origin: center center;
transform: scale(1.1) rotate(-16deg) translateX(5px);
}
.viaticos {
left: 163px;
top: 167px;
transition: opacity 0.3s ease-in-out;
}
.card-viaticos:hover .viaticos {
opacity: 0;
} .card-combustible {
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: center center;
top: 150px;
right: -40px;
}
.card-combustible:hover {
cursor: pointer;
}
.card-combustible .img-card {
position: absolute;
transition: transform 0.3s ease-in-out;
bottom: 20px;
top: 130px;
}
.card-combustible:hover .img-card {
transform: rotate(-12deg) translateX(5px) scale(1.1);
transform-origin: center center;
transition: transform 0.3s ease-in-out;
}
.combustible {
position: absolute;
bottom: 86px;
right: -55px;
top: 289px;
transition: opacity 0.3s ease-in-out;
}
.card-combustible:hover .combustible {
opacity: 0;
} .card-plus {
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: bottom left;
top: -10px;
left: 140px;
}
.card-plus:hover {
cursor: pointer;
}
.card-plus .img-card {
position: absolute;
transition: transform 0.3s ease-in-out;
top: -10px;
right: 10px;
}
.card-plus:hover .img-card {
transform: rotate(12deg) translateX(5px) scale(1.1);
transform-origin: center center;
transition: transform 0.3s ease-in-out;
}
.plus {
position: absolute;
right: 100px;
top: 165px;
transition: opacity 0.3s ease-in-out;
}
.card-plus:hover .plus {
opacity: 0;
}  .icon-card {
position: absolute;
backdrop-filter: blur(16px);
border-radius: 50%;
} .info-popover {
opacity: 0;
position: absolute;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
border-radius: 16px;
z-index: 10;
pointer-events: none; background: #000000; background: linear-gradient(180deg, rgb(16 24 28 / 50%) 38%, rgb(75 77 77) 100%);
width: 242px !important;
height: 85px;
display: flex;
box-shadow: 2px 5px 31px -1px #3ad1f2;
padding: 8px 15px;
} .info-popover img {
width: 28px;
margin: 0px;
object-fit: contain;
}
.info-popover .cont {
padding-left: 10px;
display: flex;
flex-direction: column;
align-self: center;
}
.info-popover .cont h4 {
font-size: 13px;
text-align: left;
margin: 0px 0px 3px 0px;
}
.info-popover .cont h4 span {
color: #3ad1f2; }
.info-popover .cont p {
font-size: 12px;
text-align: left;
margin: 0px;
} .card-despensa:hover .info-popover {
opacity: 1;
transform: translateY(-60px);
top: 211px; }
.card-viaticos .info-popover {
top: 152px;
left: -30px;
}
.card-viaticos:hover .info-popover {
opacity: 1;
transform: translateX(70px);
}
.card-combustible .info-popover {
top: 250px;
right: -270px;
left: auto;
bottom: 0;
}
.card-combustible:hover .info-popover {
opacity: 1;
transform: translateX(-60px);
}
.card-plus .info-popover {
top: 210px;
right: 30px;
}
.card-plus:hover .info-popover {
opacity: 1;
transform: translateY(-60px);
}  .funcionalidades-app {
background: url(//suma-pay.com/storage/2025/11/BGFuncionalidades.png) no-repeat center / cover;
background-position: top;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0px 0px;
} .funcionalidades-app h2 {
margin-bottom: 30px;
font-size: clamp(2.5rem, 4vw, 3rem);
} .funcionalidades-app .highlight {
color: var(--accent);
} .contenedor-funcionalidades {
display: flex;
width: 75%;
} .feature-layout {
width: 80vw;
display: flex;
justify-content: space-around;
align-items: center;
} .feature-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
} .brand-logos {
display: inline-flex;
width: max-content;
gap: 1rem;
align-items: center;
overflow-x: auto;
}  .feature-slider {
display: flex;
align-items: center;
max-width: 600px;
width: 100%;
gap: 10px;
}
.slider-viewport {
width: 90%;
flex: 1 1 auto;
overflow: hidden;
position: relative;
}
.slider-inner {
display: flex;
will-change: transform;
}
.slider-inner.is-animating {
transition: transform 0.4s ease-in-out;
}
.slider-slide {
flex: 0 0 auto;
min-width: 100%;
width: 100%;
height: auto;
display: block;
padding-right: 3px;
}
img.slider-slide {
height: auto !important;
aspect-ratio: 520 / 317;
object-fit: contain;
} .slider-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
line-height: 0;
transition: opacity 0.3s;
}
.slider-btn:hover {
opacity: 0.8;
}
.slider-btn img {
width: 40px;
height: auto;
display: block;
}
.slider-btn.disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.next-btn,
.prev-btn {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s ease;
} .next-btn::before,
.prev-btn::before {
content: "";
position: absolute;
background: #fff;
transform: scale(0);
transform-origin: center;
transition: transform 0.35s ease;
z-index: -1;
}
.next-btn:hover::before,
.prev-btn:hover::before {
transform: scale(1);
} .next-btn:hover,
.prev-btn:hover {
transform: translateY(-2px);
} .next-btn img,
.prev-btn img {
transition: filter 0.35s ease;
}
.next-btn:hover img,
.prev-btn:hover img {
filter: brightness(0) saturate(100%) invert(72%) sepia(60%) saturate(600%) hue-rotate(160deg);
}  .sp-section-wrapper {
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
min-height: 650px;
}  .sp-section-wrapper h2 {
font-size: clamp(2.5rem, 4vw, 3rem);
text-align: center;
margin-bottom: 1.5rem; } .sp__sbtitle {
font-size: 1.6rem;
line-height: 1.9rem;
margin-bottom: 2.5rem;
text-align: center;
color: #fff;
} .sp-section-title {
color:var(--accent);
text-align: center;
margin-top: 60px;
margin-bottom: 40px;
font-size: 2rem;
} .sp-card-container {
display: block;
text-decoration: none;
background-color: #1C1F22;
border-radius: 12px;
overflow: hidden;
border: 1px solid transparent;
transition: all 0.3s ease;
height: 100%;
user-select: none;
}
.sp-card-container:hover {
border-color: #555;
transform: scale(1.02);
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);
}
.sp-card-image {
width: 100%;
height: clamp(168px, 24vw - 105px, 239px); object-fit: cover;
display: block;
border-radius: 11px;
}
.sp-card-content {
padding: 1.5rem;
text-align: left;
} .sp-text-brand {
color: #8c8c8c;
font-weight: 700;
font-size: 1rem;
margin-bottom: 0.25rem;
letter-spacing: 1.69px;
}
.sp-text-title {
color: #3AD1F2;
font-weight: 700;
font-size: clamp(1.7rem, 5vw - 32px, 2.2rem);
letter-spacing: -2px;
margin-bottom: 1rem;
line-height: 1.2;
}
.sp-text-desc {
font-family: 'SF UI Display', sans-serif !important; color: #ffffff !important;
font-size: 0.85rem;
line-height: 1.4;
font-weight: 300;
margin: 0;
letter-spacing: 1px;
text-align: left;
} .sp-btn-decorator {
font-family: 'SF UI Display', sans-serif !important;
background: transparent;
border: 2px solid #33C5F2;
border-radius: 50px;
color: #33C5F2;
font-size: 1rem;
font-weight: 600;
padding: 10px 30px;
transition: all 0.3s ease;
display: inline-block;
margin-top: 40px;
cursor: pointer;
text-decoration: none;
}
.sp-btn-decorator:hover {
background-color: rgba(51, 197, 242, 0.1);
color: #33C5F2;
} .swiper {
padding: 13px 8px !important;
}
.swiper-slide {
cursor: grab;
}
.swiper-slide:active {
cursor: grabbing;
} .d-none-custom {
display: none !important;
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.feature-phone{
width: 150%;
top: -30px;
position: relative;
}
.feature-phone2{
width: 100%;
top: 20px;
padding:20px;
position: relative;
}  .logo-marquee-section {
display: flex;
align-items: center;
justify-content: space-around;
background: url(//suma-pay.com/storage/2025/11/Bg-marcas.png);
background-repeat: repeat;
background-size: cover; background-position: center;
color: var(--text);
width: 100%;
overflow-x: clip; position: relative;
contain: paint; padding: 50px 0px 20px;
} .cen {
display: flex; } .logo-marquee-section header {
align-self: flex-start;
padding: 0px;
}
.logo-marquee-section h2 {
font-size: clamp(2.5rem, 4vw, 3rem);
margin-bottom: 0;
text-align: left;
margin-top: 50px;
}
.logo-marquee-section .highlight {
color: var(--accent);
} .contenedor-marcas {
position: absolute;
left: 0;
right: 0;
width: 100%;
align-self: flex-end;
padding-bottom: 0px;
overflow-x: clip;
contain: paint; }
.logo-marquee-container {
width: 100%;
position: relative;
overflow-x: clip; mask-image: linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
} .logo-track {
list-style: none;
gap: 64px;
padding: 0;
display: inline-flex;
will-change: transform;
animation: marquee-scroll 20s linear infinite;
} .logo-marquee-container:hover .logo-track {
animation-play-state: paused;
}
.logo-track li {
display: inline-block;
padding: 0 32px;
flex-shrink: 0;
}
.logo-track img {
height: 66px;
width: auto;
object-fit: contain;
opacity: 0.7;
transition: opacity 0.3s;
}
.logo-track img:hover {
opacity: 1;
} .bottom-marquee .logo-track {
animation-direction: reverse;
animation-duration: 25s;
}
@keyframes marquee-scroll {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
} .contenedor-celular {
height: 100%;
z-index: 2;
margin: 0px;
}
.logo-marquee-section img { max-width: 632px;
height: auto;
margin: 30px 0;
}  .download {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 80px 0px;
}
.contenedor-download {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 70%;
height: 480px;
border: 1px solid #fff;
border-radius: 50px;
max-height: 480px;
position: relative;
overflow: hidden;
}
.contenedor-download h3 {
font-size: clamp(2.5rem, 4vw, 3rem);
text-align: center;
} .down-buttons {
display: flex;
width: 50%;
justify-content: space-around;
gap: 20px;
margin-top: 45px;
} .custom-cursor {
display: block;
position: absolute;
z-index: 10; animation: moveCursor 8s infinite ease-in-out; 
} @keyframes moveCursor {
0%   { top: 74%; left: 110%; } 5%   { top: 74%; left: 63%; transform: scale(0.5); } 11%  { top: 74%; left: 63%; transform: scale(0.5); }
13%  { top: 74%; left: 63%; transform: scale(0.3); } 15%  { top: 74%; left: 63%; transform: scale(0.5); }
21%  { top: 74%; left: 63%; transform: scale(0.5); }
26.5%{ top: 74%; left: 37%; transform: scale(0.5); } 35%  { top: 74%; left: 37%; transform: scale(0.5); }
37%  { top: 74%; left: 37%; transform: scale(0.3); } 39%  { top: 74%; left: 37%; transform: scale(0.5); }
45%  { top: 74%; left: 37%; transform: scale(0.5); }
50%  { top: 74%; left: -10%; } 100% { top: 74%; left: -10%; } }  #cta.cta { padding: clamp(60px, 12.5vw - 110px, 120px) 0px; background-image: url(https://suma-pay.com/storage/2026/03/Banner_Mexico.jpg.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat; display: flex;
align-items: center; justify-content: center; text-align: center;
}
.cta h3 {
color: var(--accent);
font-size: clamp(2.5rem, 4vw, 3rem);
text-align: center;
}
.cta p {
font-size: 1.6rem;
line-height: 1.9rem;
text-align: center;
color: #fff;
}
.contenedor-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 13px;
}
.cta-btn {
display: inline-block;
padding: 14px 28px;
border-radius: 50px;
background: var(--btn-bg);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 15px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cta-btn:hover {
background: var(--btn-bg-hover);
} .separador {
width: 80%;
border: none;
border-top: 1px solid #fff;
display: block;
margin: 0 auto;
}
.hd____01{font-size:clamp(1rem, 1.5vw, 1.2rem);font-family: 'SF UI Display', sans-serif !important; margin:0;}  #seccion-videos-final {
background-color: #000;
overflow: hidden; 
padding: 60px 0;
width: 100%;
position: relative;
}
#seccion-videos-final .titulo-videos {
font-family: 'Geometos', sans-serif !important;
text-align: center;
margin-bottom: clamp(2.5rem, 4vw, 3rem);
font-size: 3rem; } #seccion-videos-final .slider-wrapper-relative {
position: relative;
width: 100%;
} #seccion-videos-final .container-videos {
position: relative;
padding: 0 70px; } #seccion-videos-final .video-slide-container {
border-radius: 15px;
overflow: hidden;
background: #111;
position: relative;
width: 100%;
height: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.7);
} #seccion-videos-final .ratio-desktop { padding-bottom: 56.25%; } #seccion-videos-final .ratio-mobile { padding-bottom: 177.77%; } #seccion-videos-final .video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
z-index: 1;
} #seccion-videos-final .drag-shield {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
cursor: grab;
background: transparent;
}
#seccion-videos-final .drag-shield:active { cursor: grabbing; } #seccion-videos-final .swiper-videos {
width: 100%;
overflow: hidden; padding: 10px 0; 
}
#seccion-videos-final .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
} #seccion-videos-final .swiper-button-next,
#seccion-videos-final .swiper-button-prev {
color: white;
width: 50px;
height: 50px;
background: transparent;
border: 2px solid white; 
border-radius: 50%;
transition: all 0.3s ease;
z-index: 20;
top: 50%;
transform: translateY(-50%);
margin-top: 0;
}
#seccion-videos-final .swiper-button-next:after,
#seccion-videos-final .swiper-button-prev:after {
font-size: 20px;
font-weight: bold;
}
#seccion-videos-final .swiper-button-next:hover,
#seccion-videos-final .swiper-button-prev:hover {
background: white;
color: #000;
} #seccion-videos-final .swiper-button-prev { left: -60px; }
#seccion-videos-final .swiper-button-next { right: -60px; } .d-none { display: none !important; }
.d-block { display: block !important; } .ratio-desktop { display: block; }
.ratio-mobile { display: none; } footer {
padding: 1.2rem 0 3.5rem 0;
display: flex;
justify-content: space-between;
}
footer a {
color: white;
opacity: 0.7;
text-decoration: none;
transition: all .25s ease-in-out;
}
footer a:hover, footer a:focus{
opacity: 1;
transition: all .25s ease-in-out;
}
.social-icons a {
padding: 0px 0px 0px 15px;
} #mi-mensaje-exito{display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
#mi-mensaje-exito h3{color:#FFF; font-size:24px; margin-top:20px; margin-bottom:10px;}
#mi-mensaje-exito p{font-family: -apple-system, BlinkMacSystemFont, "SF UI Display", sans-serif !important; font-weight: 500; color:#FFF; font-size:14px; line-height:1.5; margin-bottom:30px;}
#mi-mensaje-exito button{margin-bottom:30px;}
#mi-mensaje-exito iframe{width:100%;}
#legal-container-3k9w2m {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #333;
line-height: 1.6;
background-color: transparent;
}
#legal-container-3k9w2m .legal-content {
color:#FFF!important;
max-width: 900px; margin: 0 auto;
text-align: justify;
} #legal-container-3k9w2m .legal-list-main {
list-style: none;
counter-reset: main-counter;
padding-left: 0;
}
#legal-container-3k9w2m .legal-list-main > li {
counter-increment: main-counter;
margin-bottom: 2rem;
position: relative;
padding-left: 3rem;
} #legal-container-3k9w2m .legal-list-main > li::before {
content: counter(main-counter) ".";
position: absolute;
left: 0;
top: 0;
font-weight: bold;
font-size: 1.1rem;
} #legal-container-3k9w2m .legal-list-sub {
list-style: none;
counter-reset: sub-counter;
margin-top: 1rem;
padding-left: 0;
}
#legal-container-3k9w2m .legal-list-sub > li {
counter-increment: sub-counter;
margin-bottom: 1rem;
position: relative;
padding-left: 3.5rem;
}
#legal-container-3k9w2m .legal-list-sub > li::before {
content: counter(main-counter) "." counter(sub-counter);
position: absolute;
left: 0;
font-weight: bold;
} #legal-container-3k9w2m .legal-info-list {
list-style: none;
padding-left: 1.5rem;
margin: 1rem 0;
}
#legal-container-3k9w2m .legal-info-list li {
position: relative;
margin-bottom: 0.5rem;
}
#legal-container-3k9w2m .legal-info-list li::before {
content: "•";
color: #007bff; font-weight: bold;
position: absolute;
left: -1.2rem;
} #legal-container-3k9w2m p {
margin-bottom: 1rem;
} @media (max-width: 768px) {
#legal-container-3k9w2m .legal-content {
padding: 0 15px;
}
#legal-container-3k9w2m .legal-list-main > li {
padding-left: 2rem;
}
#legal-container-3k9w2m .legal-list-sub > li {
padding-left: 2.5rem;
}
}
#legal-terms-9v4m2x {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
background-color: transparent;
} #legal-terms-9v4m2x .legal-content {
color: #FFF !important; 
max-width: 900px; margin: 0 auto;
text-align: justify;
} #legal-terms-9v4m2x .legal-list-main {
list-style-type: upper-roman !important;
padding-left: 2.5rem; margin-top: 2rem;
}
#legal-terms-9v4m2x .legal-list-main > li {
margin-bottom: 2rem;
padding-left: 0.5rem; font-weight: bold; color: #FFF !important; 
} #legal-terms-9v4m2x .legal-list-main > li::before {
display: none !important;
content: none !important;
} #legal-terms-9v4m2x .legal-list-main > li p,
#legal-terms-9v4m2x .legal-list-main > li ul {
font-weight: normal;
} #legal-terms-9v4m2x .legal-list-sub {
list-style-type: upper-roman !important;
margin-top: 1rem;
padding-left: 2.5rem;
} #legal-terms-9v4m2x .legal-info-list {
list-style: none !important;
padding-left: 1.5rem;
margin: 1rem 0;
}
#legal-terms-9v4m2x .legal-info-list li {
position: relative;
margin-bottom: 0.5rem;
padding-left: 0;
font-weight: normal; }
#legal-terms-9v4m2x .legal-info-list li::before {
content: "•" !important;
display: block !important;
color: #007bff; font-weight: bold;
font-size: 1.2rem;
position: absolute;
left: -1.2rem;
top: 0;
} #legal-terms-9v4m2x p {
margin-bottom: 1rem;
}
#legal-terms-9v4m2x strong {
color: #FFF !important;
} @media (max-width: 768px) {
#legal-terms-9v4m2x .legal-content {
padding: 0 15px;
}
#legal-terms-9v4m2x .legal-list-main {
padding-left: 2rem; }
}  @media (max-width: 1200px) {  .navbar {
margin: 2rem;
}
.navbar-container { width: 70%;
gap: 10px;
padding: 8px 14px;
}
.navbar-menu {
gap: 16px;
} .nav-toggle,
.nav-overlay,
.navbar-movil {
display: block; 
}
.nav-toggle { 
display: grid; 
} .hero-content {
min-height: 100vh;
}  .contenedor-funcionalidades {
flex-direction: column;
align-items: center;
} .productos header p {
font-size: 1.5rem;
padding-top: 1rem;
}
#btn-mas, 
#btn-menos {
margin-right: 4rem;
} .productos.is-open #productos-lista,
.lista-regalo {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
margin: 0;
padding: 20px;
} .logo-marquee-section header {
padding: 4rem;
} .down-buttons {
flex-direction: column;
align-items: center;
width: 100%;
gap: 10px;
}
.cta {
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}
.cta-btn {
width: 300px;
margin:20px 0px;
}
.contenedor-cta {
gap: 10px;
}   #seccion-videos-final .container-videos {
padding: 0 15px; }
#seccion-videos-final .swiper-videos {
overflow: visible; } #seccion-videos-final .ratio-desktop { display: none; }
#seccion-videos-final .ratio-mobile { display: block; } footer {
flex-direction: column;
gap: 20px;
align-items: center;
}
} @media (max-width: 992px) {   .sumapay .titulo {
font-size: 60px;
line-height: 65px;
} .sumapay .opciones {
padding: 20px;
max-width: 300px; } .servicios .titulo {
font-size: 60px;
line-height: 65px;
} .preguntas-frecuentes .titulo {
font-size: 60px;
line-height: 65px;
}
.preguntas-frecuentes .items .item { padding: 30px 20px !important; 
} .footer {
padding-top: 50px;
padding-bottom: 50px;
}
.footer .holder { padding: 40px 55px; 
}
.footer .holder .titulo {
font-size: 60px;
line-height: 65px;
letter-spacing: -4px;
}
.footer .border-top {
text-align: center;
}
.footer .border-top .texto span {
display: block; }
.footer .border-top .texto span:not(.t) {
display: none; }
.footer .border-top .texto span.t {
margin-bottom: 20px;
}
.footer .border-top .texto a {
display: inline-block;
width: 100%; }
.footer .border-top .redes {
margin-top: 20px;
} .page-section {
padding-top: 3rem;
}
} @media (max-width: 768px) {
.feature-phone{width: 90%;top:0;}
.contenedor-celular {
text-align: center;
}
.next-btn,
.prev-btn {
display: none;
}
.hero-description {
width: 98%
}
.img-mv {
width: 90% !important;
margin: 10px 0px 50px !important;
display: inline-block !important;
}
.navbar {
position: static;
top: auto;
margin: 0px !important;
padding: 20px 20px 45px !important;
}
.navbar-logo {
width: 180px;
}
.nav-toggle {
top: 26px !important;
right: 25px !important;
width: 52px !important;
height: 52px !important;
}
.navbar-container {
border-radius: 16px;
display: none;
}
.hero-btn {
margin-top: 2rem;
}
.hero-cards {
display: none;
}
.funcionalidades-app h2,
.productos h2,
.sp-section-wrapper h2,
#download h3 {
font-size: clamp(1.4rem, 6vw, 4rem);
text-align: center;
margin: 20px 5px 10px;
}
.sp-section-wrapper p, .cta h3, {
font-size: clamp(1.1rem, 1.5vw, 1.2rem);
line-height: 1.5;
padding:0px 4px;
}
#download {
padding: 50px 0px;
}
.contenedor-funcionalidades {
flex-direction: column;
width: 95%;
}
.productos {
--card-w: 280px;
padding: 2rem;
}
#productos-lista {
width: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0 var(--card-gap);
margin: 0;
}
#productos-lista>li {
scroll-snap-align: center;
flex: 0 0 100%;
}
.productos.is-open #productos-lista {
grid-template-columns: 1fr;
}
.lista-regalo {
grid-template-columns: 1fr;
}
.logo-marquee-section {
flex-direction: column;
height: auto;
width: 100%;
padding-top: 30px;
}
.logo-marquee-section header {
width: 100%;
padding: 0px 25px;
}
.logo-marquee-section h2 {
font-size: clamp(1.4rem, 6vw, 4rem);
text-align: center;
margin: 0;
}
.contenedor-download {
width: 90%;
border-radius: 20px;
padding: 50px 11px;
gap: 0;
height: auto;
}
.contenedor-download h3 {
font-size: clamp(2.5rem, 4vw, 3rem);
}
.down-buttons {
flex-direction: column;
align-items: center;
width: 100%;
gap: 10px;
margin: 0;
}
.cta {
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}
.cta-btn {
width: 270px;
}
.contenedor-cta {
gap: 10px;
}
footer {
flex-direction: column;
gap: 20px;
text-align: center;
}
.social-icons {
margin-bottom: 35px;
}
.logo-marquee-section header {
padding: 20px 0px 0px;
}
.logo-marquee-section img {
width: 100%;
}
.hero-content {
min-height: 50vh;
}
#productos-lista img,
.lista-regalo img {
width: 67%;
margin-top: 20px;
margin-left: 20px;
}
.text-article {
margin-top: -30px;
}
.productos li h3 {
flex-direction: row;
font-size: 23px;
}
.lista-regalo .text-article h3 .c-celeste {
margin-left: 10px;
}
.text-article p {
font-size: 17px;
margin-top: 10px;
}
#productos-lista figure,
.lista-regalo figure {
height: 182px;
}
#productos-lista img,
.lista-regalo img {
width: 57%;
margin-top: 20px;
margin-left: 20px;
}
.productos li {
background-color: rgba(255, 255, 255, 0.15);
border-radius: 40px;
width: 362px;
height: 301px;
margin-top: 45px;
} }  .modal-backdrop {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.65);
z-index: 10000;
}
.modal-backdrop.is-open {
display: flex;
animation: fadeIn 0.18s ease-out;
} .caja-modal {
width: min(460px, 92vw);
max-height: 92vh;
overflow: auto;
position: relative;
padding: 70px 28px 20px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 100px rgba(0, 0, 0, 0.9);
color: #fff;
transform: translateY(8px);
animation: slideUp 0.2s ease-out;
}
.contact-modal {
background: radial-gradient(120% 200% at 80% 25%,
rgba(21, 187, 224, 0.75) 0%,
rgba(21, 187, 224, 0) 60%),
linear-gradient(180deg, #0b1116 0%, #0b1116 100%);
} .modal-close {
position: absolute;
top: 12px;
right: 24px;
width: 36px;
height: 36px;
border: none;
background: transparent;
color: #fff;
font-size: 24px;
line-height: 1;
}
.modal-close:hover {
background: transparent;
} .contact-title {
font-size: clamp(20px, 1.63rem + 1.15vw, 31px);
margin: 0 0 24px;
text-align: center;
}
.field {
display: grid;
margin-bottom: 16px;
}
.field > span {
color: #cbd5e1;
font-size: 13px;
}
.contact-modal input {
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
color: #0b1116;
outline: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.contact-modal input::placeholder { opacity:1
font-family: -apple-system, BlinkMacSystemFont, "SF UI Display", sans-serif !important;
}
.contact-modal input:focus {
border-color: #18b4e7;
box-shadow: 0 0 0 3px rgba(24, 180, 231, 0.25);
}
.slick-slide {
text-align: center !important;
}
#video {
padding: 20px 0px 60px;
} .btn {
cursor: pointer;
border: none;
border-radius: 999px;
font-weight: 700;
}
.btn.primary {
background: linear-gradient(180deg, #1a3f7e 0%, #0f2f63 100%);
color: #fff;
padding: 14px 22px;
box-shadow: 0 10px 24px rgba(7, 21, 44, 0.45);
}
.btn.primary:hover {
filter: brightness(1.06);
}
.btn.full {
width: 100%;
margin-top: 10px;
} .contact-note {
text-align: center;
color: #fff;
opacity: 0.95;
margin: 14px 0 4px;
line-height: 1.35;
} @keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(18px);
}
to {
transform: translateY(8px);
}
}
@media (max-width: 520px) {
.sp-section-title{color:#FFF;}
.contact-title{
font-size: clamp(16px, 1.63rem + 1.15vw, 22px);
}
#cta.cta { padding: 70px 0px 160px; background-image: url(https://suma-pay.com/storage/2026/03/hechoenmexico-6.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
.w-70{width:490px; margin:45px 0px 50px;}
.container-tarjetas {
margin-left: 0%;
margin-top: 55px;
}
footer .social-icons .btn-link img {
width: 30px;
height: 30px;
}
.svne {
width: 260px;
}
.contenedor-download h3 .highlight {
color: var(--accent);
}
.sep {
width: 75%;
margin: auto;
}
.slick-prev:before,
.slick-next:before {
font-size: 36px !important;
}
.slick-prev {
left: -48px !important;
}
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 560px;
height: 315;
}
#video .sep h3 {
padding: 3rem;
font-size: clamp(1.75rem, 3vw, 3rem);
color: var(--accent);
text-align: center;
}
.card-plus:hover .info-popover,
.card-combustible:hover .info-popover,
.card-viaticos:hover .info-popover,
.card-despensa .info-popover {
background: #000000;
background: linear-gradient(180deg, rgb(16 24 28 / 50%) 38%, rgb(75 77 77) 100%);
width: 242px !important;
height: 85px;
display: flex;
-webkit-box-shadow: 2px 5px 31px -1px #3ad1f2;
box-shadow: 2px 5px 31px -1px #3ad1f2;
padding: 8px 15px;
}
.info-popover img {
width: 28px;
margin: 0px;
}
.info-popover .cont h4 span {
color: #3ad1f2;
}
.info-popover .cont {
padding-left: 10px;
display: flex;
flex-direction: column;
align-self: center;
}
.info-popover .cont h4 {
font-size: 13px;
text-align: left;
margin: 0px 0px 3px 0px;
}
.info-popover .cont p {
font-size: 12px;
text-align: left;
margin: 0px;
}
.container-tarjetas .slick-slide img {
width: 100%;
height: 230px;
object-fit: cover;
border-radius: 11px;
}
.imgflecha {
width: 100px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
width: 100%;
font-family: 'SF UI Display', sans-serif!important;
font-size: clamp(12px, 11.13px + 0.26vw, 14px);
padding: 14px;
}
input[type="checkbox"]{height:auto;}
.terms-container{
display: flex;
align-content: space-between;
align-items: center;
}
.hlya01{
width: 6%;
text-align: center;
}
.hlya02{
font-size: clamp(8px, 7.13px + 0.34vw, 9px);
width: 100%;
text-align: center;
}
.hlya03{
width:1%;
}
.hlya02 a{
color: var(--accent);
opacity: 0.7;
transition: all .25s ease-in-out;
}
.hlya02 a:hover, .hlya02 a:focus{
opacity: 1;
transition: all .25s ease-in-out;
} .headercontacto {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 63px;
}
.headercontacto .feature-layout {
display: flex;
justify-content: center;
align-items: baseline;
flex-direction: column;
}
.feature-slider2 .wpcf7 {
border: 2px solid rgba(58, 209, 242, 1);
border-radius: 15px;
background: rgba(0, 0, 0, 0.16);
width: min(480px, 92vw);
overflow: auto;
padding: 50px 24px 20px;
color: #fff;
transform: translateY(8px);
animation: slideUp 0.2s ease-out;
}
.headercontacto .field > span {
font-weight: 500;
line-height: 20px;
letter-spacing: 0.1px;
color: rgba(255, 255, 255, 1);
}
.headercontacto .wpcf7 input,
.headercontacto .wpcf7 select,
#wpcf7-f316-o1 select{
opacity: 1;
border-radius: 8px;
border: 1px solid rgba(195, 198, 216, 1);
width: 100%;
color: #929292;
font-size: 16px;
padding: 14px;
}
.headercontacto .wpcf7 input[type="submit"] {
opacity: 1;
border-radius: 15px;
padding: 18px;
border: none;
letter-spacing: 1.5px;
}
.headercontacto .wpcf7 .contact-note {
font-weight: 600;
text-align: center;
font-size: clamp(0.8rem, 0.4vw, 1rem);
margin: 0px
}
.headercontacto .highlight {
color: var(--accent);
}
.headercontacto p.subtitle {
font-weight: 700;
font-size: clamp(1.2rem, 1.8vw, 2.2rem);
letter-spacing: 0px;
margin-bottom: 50px
}
.headercontacto .listacorpo {
display: flex;
flex-direction: column;
width: 91%;
}
.headercontacto .listacorpo span {
font-weight: 400;
font-style: normal;
font-size: clamp(1.3rem, 1.33vw, 3.5rem);
letter-spacing: 0px;
margin-bottom: 13px;
}
.headercontacto h1 {
width: 90%;
font-size: clamp(2rem, 3.8vw, 4.5rem);
margin-bottom: 35px;
}
.feature-slider2 {
display: flex;
align-items: center;
width: 100%;
gap: 10px;
}
@media (max-width: 768px) {
.headercontacto .feature-layout {
width: 100%;
display: flex;
justify-content: space-around;
align-items: baseline;
flex-direction: column;
}
.headercontacto h1 {
width: 100%;
font-size: 33px;
}
.headercontacto p {
font-weight: 700;
font-style: Bold;
font-size: 27px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -3%;
vertical-align: middle;
margin-bottom: 15px;
margin-top: 15px;
}
.headercontacto .listacorpo {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 20px;
}
.headercontacto .listacorpo span {
font-weight: 400;
font-style: normal;
font-size: 22px;
leading-trim: NONE;
line-height: 27px;
letter-spacing: 0px;
vertical-align: middle;
margin-bottom: 17px;
}
.headercontacto .contenedor-funcionalidades {
display: flex;
width: 100%;
margin-bottom: 4rem;
padding-left: 31px;
padding-right: 27px;
}
.feature-slider .wpcf7 {
width: 100%;
border: 2px solid rgba(58, 209, 242, 1);
padding: 30px;
padding-left: 42px;
border-radius: 15px;
background: rgba(0, 0, 0, 0.16);
}
.headercontacto .wpcf7 input,
.headercontacto .wpcf7 select {
angle: 0 deg;
opacity: 1;
gap: 8px;
border-radius: 4px;
border-width: 1px;
border: 1px solid rgba(195, 198, 216, 1);
width: 100%;
}
.headercontacto .wpcf7 .field {
display: grid;
gap: 8px;
margin: 12px 0px;
}
.headercontacto .wpcf7 .contact-note {
font-weight: 600;
font-style: Semi Bold;
font-size: 14px;
leading-trim: NONE;
line-height: 19px;
letter-spacing: -2%;
text-align: center;
vertical-align: middle;
margin-top: -6px;
}
.feature-slider2 {
display: flex;
align-items: center;
width:100%;
gap: 10px;
margin-top: 23px;
}
} .nav-toggle,
#mobileMenu,
.img-mv {
display: none;
}
@media (max-width: 768px) {
.hero-content {
display: flex;
justify-content: center;
width: 100%;
min-height: 580px;
text-align: center;
position: relative;
z-index: 1;
flex: 1;
margin: auto;
}
body.menu-open .nav-toggle {
opacity: 0;
pointer-events: none;
}
.nav-toggle,
#mobileMenu,
.img-mv {
display: block;
}
.headercontacto .feature-layout {
width: 100%;
display: flex;
justify-content: space-around;
align-items: baseline;
flex-direction: column;
}
.headercontacto h1 {
width: 100%;
font-size: 37px;
}
.headercontacto p {
font-weight: 700;
font-style: Bold;
font-size: 27px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -3%;
vertical-align: middle;
margin-bottom: 15px;
margin-top: 15px;
}
.headercontacto .listacorpo {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 20px;
}
.headercontacto .listacorpo span {
font-weight: 400;
font-style: normal;
font-size: 22px;
leading-trim: NONE;
line-height: 27px;
letter-spacing: 0px;
vertical-align: middle;
margin-bottom: 17px;
}
.headercontacto .contenedor-funcionalidades {
display: flex;
width: 100%;
margin-bottom: 2rem;
padding-left: 25px;
padding-right: 25px;
}
.feature-slider .wpcf7 {
width: 100%;
border: 2px solid rgba(58, 209, 242, 1);
padding: 30px;
padding-left: 42px;
border-radius: 15px;
background: rgba(0, 0, 0, 0.16);
}
.headercontacto .wpcf7 input,
.headercontacto .wpcf7 select {
angle: 0 deg;
opacity: 1;
gap: 8px;
border-radius: 4px;
border-width: 1px;
border: 1px solid rgba(195, 198, 216, 1);
width: 100%;
}
.headercontacto .wpcf7 .field {
display: grid;
gap: 8px;
margin: 12px 0px;
}
.headercontacto .wpcf7 .contact-note {
font-weight: 600;
font-style: Semi Bold;
font-size: 14px;
leading-trim: NONE;
line-height: 19px;
letter-spacing: -2%;
text-align: center;
vertical-align: middle;
margin-top: -6px;
}
.feature-slider2 {
display: flex;
align-items: center;
max-width: 600px;
width: 100%;
gap: 10px;
margin-top: 23px;
}  .nav-toggle {
position: absolute;
top: 18px;
right: 18px;
width: 56px;
height: 56px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: grid;
place-items: center;
z-index: 1002;
cursor: pointer;
}
.nav-toggle__lines {
width: 24px;
height: 2px;
background: #fff;
display: block;
position: relative;
border-radius: 99px;
}
.nav-toggle__lines::before,
.nav-toggle__lines::after {
content: "";
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: #fff;
border-radius: 99px;
}
.nav-toggle__lines::before {
top: -7px;
}
.nav-toggle__lines::after {
top: 7px;
} .nav-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 1900;
opacity: 0;
transition: opacity 0.2s ease;
} .navbar-movil {
position: fixed;
top: 55px;
right: 20px;
padding: 38px 22px 38px;
border-radius: 13px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
z-index: 1901;
transform: translateY(-8px) scale(0.98);
opacity: 0;
pointer-events: none;
transition: transform 0.2s ease, opacity 0.2s ease;
max-width: 200px;
width: 100%;
}
.navbar {
display: inline;
align-items: center;
justify-content: space-around;
z-index: 1890;
margin-top: 1rem;
width: 100%;
}
.navbar-menu-movil {
list-style: none;
margin: 45px 0 0;
padding: 0;
display: grid;
gap: 21px;
text-align: center;
}
.navbar-menu-movil a {
color: #fff;
text-decoration: none;
font-size: 28px;
font-weight: 500;
letter-spacing: 0.2px;
font-weight: 600;
font-style: Semi Bold;
font-size: 20px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
}
.navbar-menu-movil a:hover {
opacity: 0.9;
}
.nav-close {
position: absolute;
top: 17px;
right: 13px;
width: 34px;
height: 34px;
border-radius: 999px;
border: 0;
background: transparent;
color: #fff;
font-size: 34px;
line-height: 1;
cursor: pointer;
} body.menu-open .nav-overlay {
opacity: 1;
}
body.menu-open .navbar-movil {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
} body.menu-open {
overflow: hidden;
} @media (min-width: 1024px) {
.nav-toggle,
.nav-overlay,
.navbar-movil {
display: none;
}
}
}
.contenido-poli {
width: 75%;
margin: auto;
margin-top: 86px;
}
@media (max-width: 480px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
width: 100%;
font-family: 'SF UI Display', sans-serif!important;
font-size: 16px;
padding: 14px;
}
.funcionalidades-app{
padding:50px 0px 30px;
}
.r-mobile{
text-align:right;
}
.footer .holder .titulo {
font-size: 30px;
line-height: 35px;
letter-spacing: -2px;
}
.headercontacto {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0px;
}
.headercontacto h1 {
width: 100%;
font-size: 43px;
margin-bottom: 16px;
text-align:center;
}
.headercontacto p.subtitle {
font-weight: 700;
font-size: clamp(1rem, 1.9vw, 2.5rem);
letter-spacing: 0px;
margin-bottom: 20px;
margin-top: 0;
line-height: 23px;
color: var(--accent);
}
.headercontacto .listacorpo {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 0px;
}
.headercontacto .listacorpo span {
font-weight: 400;
font-style: normal;
font-size: 15px;
line-height: 22px;
margin-bottom: 5px;
}
.feature-slider2 .wpcf7 {
width: 100%;
border: 2px solid rgba(58, 209, 242, 1);
border-radius: 15px;
background: rgba(0, 0, 0, 0.16);
max-width: 743px;
padding: 30px 16px 5px;
}
} input[type="checkbox"] { -webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important; width: 15px !important;
height: 15px !important;
min-width: 15px !important; min-height: 15px !important;
padding: 0 !important; margin: 0 5px 0 0 !important; background-color: #ffffff !important;
border: 1px solid #757575 !important; border-radius: 2px !important; display: inline-block !important;
vertical-align: middle !important;
position: relative !important;
cursor: pointer !important;
} input[type="checkbox"]:checked {
background-color: #0d6efd !important; border-color: #0d6efd !important; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e") !important;
background-size: 12px 12px !important; background-position: center !important;
background-repeat: no-repeat !important;
} dotlottie-player {
-webkit-transform: translate3d(0,0,0);
display: block;
margin: 0 auto;
}
@media (max-width: 520px) {
.custom-cursor{display:none!important;}
.cen{display: block;}
.contenedor-marcas{z-index: -2;}
} .btn-download { 
position: relative; 
display: inline-flex; 
justify-content: center; 
align-items: center; 
padding: 2px; border-radius: 12px; 
overflow: hidden; 
text-decoration: none; 
cursor: pointer; 
background-color: black; 
} 
.btn-download .inner-content { 
position: relative; 
z-index: 3; 
background-color: black; 
width: 100%; 
height: 100%; 
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px; 
} 
.btn-download img { 
max-width: 100%; 
display: block; 
} @media (max-width: 768px) { .btn-download::before { 
content: ''; 
position: absolute; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%; 
background: conic-gradient( 
transparent, transparent, transparent, transparent, transparent, 
#2fbbdf, #2fbbdf 
); 
animation: rotate-circuit 2.5s linear infinite; 
z-index: 1; 
} .btn-download::after { 
content: ''; 
position: absolute; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%; 
background: conic-gradient( 
transparent, transparent, transparent, transparent, transparent, 
#2fbbdf, #2fbbdf 
); 
animation: rotate-circuit 2.5s linear infinite; 
z-index: 2; 
filter: blur(8px) brightness(1.2); 
} @keyframes rotate-circuit { 
from { transform: rotate(0deg); } 
to { transform: rotate(360deg); } 
}
}
@media (max-width: 768px) {
#seccion-videos-final .titulo-videos, .cta h3, .cta h4{font-size: clamp(1.4rem, 6vw, 4rem);}
.sp__sbtitle {font-size: 1.1rem;line-height: 1.4rem;}
.hd____01{font-size:clamp(1rem, 1.5vw, 1.2rem)!important;font-family: 'SF UI Display', sans-serif !important;font-weight: 300;padding: 0px 50px;margin: -5px 0 0 0;}
.w-70{width:255px; margin:25px 0px;}
}