/*
Theme Name: sumapay
Author: Hivent
Version: 1.0.0
*/
/* ==========================================================================
ÍNDICE DE ESTILOS 
==========================================================================
1.  VARIABLES & RESET ......... [:root, body, reset]
2.  HEADER, NAV & HERO .......  [.navbar, .hero-content, menú móvil]
3.  HOME: HERO & CARDS ........ [Tarjetas flotantes, animaciones]
4.  HOME: SECCIONES ........... [Funcionalidades, Marcas, CTA]
5.  FOOTER .................... [Links, Redes sociales]
6.  MEDIA QUERIES ............. [Ajustes globales responsivos]
========================================================================== */
/* ==========================================================================
1. VARIABLES & RESET
========================================================================== */
/* Variables Globales (Colores, Radios, Sombras) */
:root {
	--bg-hero: #06111a;
	--text: #FFF;
	/* Blanco hueso para textos generales */
	--black: #000;
	/* Negro */
	--muted: #a9c3d9;
	/* Gris azulado para textos secundarios */
	--accent: #3ad1f2;
	/* Cyan Principal (El color de tu marca) */
	--btn-bg: #0e2b63;
	/* Azul oscuro botones */
	--btn-bg-hover: #16375a;
	--radius: 14px;
	--sombra-iluminacion: 0px 4px 68px 0px rgba(50, 214, 255, 0.486);
}
/* Estilos Base del Body */
body {
	margin: 0;
	background-color: var(--black) !important;
	color: var(--text) !important;
	font-family: 'SF UI Display', sans-serif;
	-webkit-font-smoothing: antialiased;
}
/* Reset Básico - Asegura que el padding no deforme las cajas */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
/* --- TIPOGRAFÍA GLOBAL --- */
h1,
h2,
h3,
h4,
h5,
h6,
h1>span,
h2>span,
h3>span,
h4>span,
h5>span,
h6>span {
	font-family: 'Geometos', sans-serif !important;
}
/* --- UTILIDADES GLOBALES --- */
.highlight {
	color: var(--accent);
}
.wpcf7-list-item {margin:0px!important}

/* ==========================================================================
2. HEADER, NAV & HERO
========================================================================== */
/* --- 2.1 BASE HERO (Contenedor Principal) --- */
/* ORIGEN: style.css (Línea ~59) - Posicionamiento de la barra */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-around;
	z-index: 5;
	margin-top: 3rem;
	width: 100%;
}
/* ORIGEN: style.css (Línea ~68) - Pastilla "Glassmorphism" */
.navbar-container {
	width: 60%;
	padding: 5px 20px;
	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:space-around;
}
/* ORIGEN: style.css (Línea ~80) */
.navbar-logo {
	height: auto;
	max-width: 248px;
	display: block;
}
/* ORIGEN: style.css (Línea ~86) */
.navbar-menu {
	list-style: none;
	display: flex;
	gap: 5rem;
	margin: 0;
	padding: 0;
}
/* ORIGEN: style.css (Línea ~93) */
.navbar-menu a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	opacity: 0.85;
	padding: 8px 10px;
	display: block;
	font-size: 20px;
}
.navbar-menu a:hover {
	opacity: 1;
}
/* --- 2.2 HERO CONTENT (Textos y CTAs) --- */
/* ORIGEN: style.css (Línea ~48) */
.hero {
	position: relative;
	min-height: 89vh;
	/* Altura mínima para pantallas grandes */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: url("/wp-content/uploads/2025/11/background-Home.png") no-repeat center / cover;
}
/* ORIGEN: style.css (Línea ~118) - Contenedor flex para centrar contenido */
.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;
}
/* ORIGEN: style.css (Línea ~334) - Wrapper de texto para que no se expanda demasiado */
.hero-text {
	max-width: 800px;
	position: relative;
	z-index: 2;
	pointer-events: none;
	/* Permite clickear elementos traseros si fuera necesario */
}
/* ORIGEN: style.css (Línea ~340) - Título Principal */
.hero h1 {
	margin: 0 0 12px;
	line-height: 1.2;
	font-weight: 800;
	font-size: clamp(1.8rem, 6vw, 4rem);
	/* Responsive typography nativa */
	letter-spacing: -1px;
}
/* ORIGEN: style.css (Línea ~348) - Span para color acento */
.hero .highlight {
	color: var(--accent);
}
/* ORIGEN: style.css (Línea ~352) - Descripción */
.hero-description {
	color: #FFF;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	margin: 10px 5px 30px;
	display: inline-block;
	width: 50%;
}
/* ORIGEN: style.css (Línea ~360) - Iconos decorativos (círculos vidrio) */
.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;
}
/* ORIGEN: style.css (Línea ~375) - Clase auxiliar detectada */
.glass-circle {
	width: 43px;
	height: 43px;
}
/* ORIGEN: style.css (Línea ~380) - Botón CTA Principal */
.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;
	/* Reactiva clicks sobre el botón */
}
.hero-btn:hover {
	background: var(--btn-bg-hover);
}
/* ORIGEN: style.css (Línea ~400) - Línea luminosa inferior */
.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;
}
/* NOTA: El MENÚ MÓVIL (.navbar-movil, .nav-toggle) se ha omitido intencionalmente 
de esta sección ya que no es visible en resoluciones de escritorio (XL, XXL). 
Se incluirá en la sección de MEDIA QUERIES. */
.modal-backdrop{
	background: rgba(0, 0, 0, 0.25)!important;
	backdrop-filter: blur(10px)!important;
	-webkit-backdrop-filter: blur(10px)!important;
}

/* ==========================================================================
3. HOME: HERO & CARDS
========================================================================== */
/* --- CONTENEDOR PRINCIPAL DE TARJETAS --- */
/* Posicionamiento absoluto sobre el Hero para crear el efecto 3D */
.hero-cards {
	position: absolute;
	width: 100%;
	inset: 0;
	display: flex;
	justify-content: center;
	max-width: 1400px;
	/* Limite para pantallas ultra-wide */
	margin: 0 auto;
	pointer-events: none;
	/* Permite clicks en el fondo si no tocas una tarjeta */
}
.hero-cards>div {
	width: 23%;
	height: auto;
	max-height: 250px;
	z-index: 2;
	pointer-events: auto;
	/* Reactiva clicks en las tarjetas */
}
/* --- TARJETA 1: DESPENSA (Celeste) --- */
.card-despensa {
	position: relative;
	transition: transform 0.3s ease-in-out;
	transform-origin: center center;
	top: 30px;
	right: 80px;
}
.card-despensa:hover {
	cursor: pointer;
}
/* Imagen de la tarjeta (rotación y zoom al hover) */
.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;
}
/* Icono flotante (desaparece al hover) */
.despensa {
	position: absolute;
	/* Agregado para asegurar posición */
	top: 164px;
	left: 155px;
	transition: opacity 0.3s ease-in-out;
}
.card-despensa:hover .despensa {
	opacity: 0;
}
/* --- TARJETA 2: VIÁTICOS --- */
.card-viaticos {
	position: relative;
	transition: transform 0.3s ease-in-out;
	transform-origin: center center;
	top: 140px;
	left: -130px;
}
.card-viaticos:hover {
	cursor: pointer;
}
.card-viaticos .img-card {
	position: absolute;
	transition: transform 0.3s ease-in-out;
	bottom: 30px;
	left: 19px;
	top: 111px;
}
.card-viaticos:hover .img-card {
	transform-origin: center center;
	transform: scale(1.1) rotate(-16deg) translateX(5px);
}
.viaticos {
	position: absolute;
	bottom: 100px;
	right: auto;
	left: 183px;
	top: 277px;
	transition: opacity 0.3s ease-in-out;
}
.card-viaticos:hover .viaticos {
	opacity: 0;
}
/* --- TARJETA 3: COMBUSTIBLE (Gris) --- */
.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;
}
/* --- TARJETA 4: PLUS (Negra) --- */
.card-plus {
	position: relative;
	transition: transform 0.3s ease-in-out;
	transform-origin: bottom left;
	top: 30px;
	left: 90px;
}
.card-plus:hover {
	cursor: pointer;
}
.card-plus .img-card {
	position: absolute;
	transition: transform 0.3s ease-in-out;
	top: -50px;
	right: 100px;
}
.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: 90px;
	top: 95px;
	transition: opacity 0.3s ease-in-out;
}
.card-plus:hover .plus {
	opacity: 0;
}
/* --- ELEMENTOS GLOBALES DE TARJETAS --- */
/* Estilo base de los iconos flotantes (círculos borrosos) */
.icon-card {
	position: absolute;
	backdrop-filter: blur(16px);
	border-radius: 50%;
}
/* Popover genérico de info (Tooltip oculto inicialmente) */
.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;
	/* Estilos visuales del popover */
	background: #000000;
	/* Fallback */
	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;
}
/* Contenido del Popover */
.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;
	/* Color acento */
}
.info-popover .cont p {
	font-size: 12px;
	text-align: left;
	margin: 0px;
}
/* Posicionamiento específico de los Popovers por tarjeta */
.card-despensa:hover .info-popover {
	opacity: 1;
	transform: translateY(-60px);
	top: 211px;
	/* Posición base */
}
.card-viaticos .info-popover {
	bottom: 0px;
	top: 257px;
	left: 0px;
}
.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: 146px;
	left: auto;
	right: 10px;
	bottom: 60px;
}
.card-plus:hover .info-popover {
	opacity: 1;
	transform: translateY(-60px);
}

/* ==========================================================================
4. HOME: SECCIONES
========================================================================== */
/* ==========================================================================
4.1 FUNCIONALIDADES APP
========================================================================== */
.funcionalidades-app {
	background: url("/wp-content/uploads/2025/11/BGFuncionalidades.png") no-repeat center / cover;
	background-position: top;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px 0px 30px;
}

/* [Origen: style.css líneas ~415-418] */
.funcionalidades-app h2 {
	margin-bottom: 30px;
	font-size: 3rem;
}

/* [Origen: style.css líneas ~420] */
.funcionalidades-app .highlight {
	color: var(--accent);
}
/* [Origen: style.css líneas ~422-426] */
.contenedor-funcionalidades {
	display: flex;
	width: 75%;
	margin-bottom: 4rem;
}
/* [Origen: style.css líneas ~428-433] */
.feature-layout {
	width: 80vw;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
/* [Origen: style.css líneas ~435-440] */
.feature-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
/* [Origen: style.css líneas ~442-448] */
.brand-logos {
	display: inline-flex;
	width: max-content;
	gap: 1rem;
	align-items: center;
	overflow-x: auto;
}
/* ========== Slider de funcionalidades ========== */
/* Viewport recorta el carrusel; inner se desplaza; slide ocupa 100% */
.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;
}
/* Botones de navegación (con estados y animaciones) */
.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;
}
/* Efecto de relleno al hover (pseudo-fondo interno) */
.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);
}
/* Micro desplazamiento */
.next-btn:hover,
.prev-btn:hover {
	transform: translateY(-2px);
}
/* Tinte del icono hacia --accent al hover */
.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);
}

/* ==========================================================================
4.2 LA TARJETA IDEAL (Grid y Slider)
========================================================================== */
/* Contenedor Principal */
.sp-section-wrapper {
	padding-top: 60px;
	padding-bottom: 60px;
	overflow: hidden;
	min-height: 650px;
}
/* Títulos Específicos de esta sección */
/* Rescatamos el h2{font-size: 3rem} pero lo limitamos a esta sección para no romper otras */
.sp-section-wrapper h2 {
	font-size: 3rem;
	text-align: center;
	margin-bottom: 0.5rem;
	/* Ajuste visual */
}
/* Subtítulo específico que mencionaste */
.sp__sbtitle {
	font-size: 1.6rem;
	line-height: 1.9rem;
	margin-bottom: 2.5rem;
	text-align: center;
	color: #fff;
}
/* Título secundario (Tarjetas Digitales) */
.sp-section-title {
	color: #ffffff;
	text-align: center;
	margin-top: 60px;
	margin-bottom: 40px;
	font-size: 2rem;
}
/* --- TARJETAS (Componente Visual) --- */
.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);
	/* Altura reactiva original */
	object-fit: cover;
	display: block;
	border-radius: 11px;
}
.sp-card-content {
	padding: 1.5rem;
	text-align: left;
}
/* Tipografías Internas Tarjeta */
.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;
	/* Forzamos SF UI aquí */
	color: #ffffff !important;
	font-size: 0.85rem;
	line-height: 1.4;
	font-weight: 300;
	margin: 0;
	letter-spacing: 1px;
	text-align: left;
}
/* Botón decorativo "Ver más tarjetas" */
.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;
}
/* Ajustes Swiper Específicos */
.swiper {
	padding: 13px 8px !important;
}
.swiper-slide {
	cursor: grab;
}
.swiper-slide:active {
	cursor: grabbing;
}
/* Utilidades JS (Toggle Grid/Carousel) */
.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;
}
/* ==========================================================================
4.3 HOME: APP & MARCAS (200 Servicios)
========================================================================== */
/* Contenedor Principal con Fondo */
.logo-marquee-section {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: url("/wp-content/uploads/2025/11/Bg-marcas.png");
	background-repeat: repeat;
	background-size: cover; /* Ajuste para cubrir */
	background-position: center;
	color: var(--text);
	width: 100%;
	overflow-x: clip; /* Evita scroll horizontal por animaciones */
	position: relative;
	contain: paint; /* Optimización de renderizado */
	padding: 50px 0px 20px;
}

/* Wrapper Flex para centrar contenido (Clase .cen en PHP) */
.cen {
	display: flex;
	/* En desktop se alinean horizontalmente por defecto */
}

/* --- TEXTOS (Izquierda) --- */
.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);
}

/* --- CARRUSEL DE LOGOS (Centro/Fondo) --- */
.contenedor-marcas {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	align-self: flex-end;
	padding-bottom: 0px;
	overflow-x: clip;
	contain: paint;
	/* z-index bajo para estar detrás del celular si fuera necesario */
}

.logo-marquee-container {
	width: 100%;
	position: relative;
	overflow-x: clip;
	/* Máscara para desvanecer bordes */
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 10%,
		black 90%,
		transparent 100%
	);
}

/* Pista de Animación */
.logo-track {
	list-style: none;
	gap: 64px;
	padding: 0;
	display: inline-flex;
	will-change: transform;
	animation: marquee-scroll 20s linear infinite;
}

/* Pausar animación al pasar el mouse */
.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;
}

/* Carril Inferior (Dirección opuesta) */
.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); }
}

/* --- IMAGEN CELULAR (Derecha) --- */
.contenedor-celular {
	height: 100%;
	z-index: 2;
	margin: 0px;
}

.logo-marquee-section img {
	/* OJO: Esto afecta a la imagen del celular dentro de la sección */
	max-width: 632px;
	height: auto;
	margin: 30px 0;
}

/* ==========================================================================
4.4 HOME: DOWNLOAD & CURSOR
========================================================================== */
/* --- SECCIÓN DESCARGA (Caja con borde) --- */
.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;
	gap: 30px;
	width: 70%;
	height: 517px;
	border: 1px solid #fff;
	border-radius: 50px;
	max-height: 517px;
	position: relative;
	overflow: hidden;
}
.contenedor-download h3 {
	font-size: clamp(2.5rem, 4vw, 3rem);
	text-align: center;
}
/* Botones de Tiendas (App Store / Play Store) */
.down-buttons {
	display: flex;
	width: 50%;
	justify-content: space-around;
	gap: 20px;
	margin-top: 45px;
}
/* --- ANIMACIÓN CURSOR (La Flecha) --- */
.custom-cursor {
	display: block;
	position: absolute;
	z-index: 10;
	/* Duración total del ciclo de la flecha */
	animation: moveCursor 8s infinite ease-in-out; 
}
/* Keyframes de la ruta de la flecha */
@keyframes moveCursor {
	0%   { top: 74%; left: 110%; } /* Entra desde la derecha */
	5%   { top: 74%; left: 63%; transform: scale(0.5); } /* Clic 1 */
	11%  { top: 74%; left: 63%; transform: scale(0.5); }
	13%  { top: 74%; left: 63%; transform: scale(0.3); } /* Efecto pulsación */
	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); } /* Mueve a botón 2 */
	35%  { top: 74%; left: 37%; transform: scale(0.5); }
	37%  { top: 74%; left: 37%; transform: scale(0.3); } /* Clic 2 */
	39%  { top: 74%; left: 37%; transform: scale(0.5); }
	45%  { top: 74%; left: 37%; transform: scale(0.5); }
	50%  { top: 74%; left: -10%; } /* Sale por la izquierda */
	100% { top: 74%; left: -10%; } /* Espera fuera */
}

/* ==========================================================================
4.5 HOME: CTA (HECHO EN MÉXICO)
========================================================================== */
/* Sección Hecho en México */
#cta.cta {
	/* Dimensiones y Margen */
	padding: clamp(105px, 18.5vw - 115px, 240px) 0px;
	/* Fondo con la imagen del render */
	background-image: url('https://suma-pay.com/wp-content/uploads/2026/02/Render11.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Centrado Absoluto (Flexbox) */
	display: flex;
	align-items: center;
	/* Centrado vertical */
	justify-content: center;
	/* Centrado horizontal */
	text-align: center;
}

.cta h3 {
	color: var(--accent);
	font-size: 40px;
	text-align: center;
}

.cta p {
	text-align: center;
	text-transform: uppercase;
	font-size: 13px;
}

.contenedor-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.cta-btn {
	width: 400px;
	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: 16px;
	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 visual entre secciones */
.separador {
	width: 80%;
	border: none;
	border-top: 1px solid #fff;
	display: block;
	margin: 0 auto;
}

/* ==========================================================================
4.6 CAROUSEL VIDEOS (
========================================================================== */

/* --- CARRUSEL DE TESTIMONIOS (VIDEOS) --- */

#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;
	color: var(--accent);
	text-align: center;
	margin-bottom: 40px;
	font-size: 3rem; /* Tamaño base desktop */
}

/* Wrapper Relativo para centrar flechas correctamente */
#seccion-videos-final .slider-wrapper-relative {
	position: relative;
	width: 100%;
}

/* Container específico (Desktop Default) */
#seccion-videos-final .container-videos {
	position: relative;
	padding: 0 70px; /* Padding ancho para escritorio */
}

/* Contenedor del video individual */
#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);
}

/* Aspect Ratios */
#seccion-videos-final .ratio-desktop { padding-bottom: 56.25%; } /* 16:9 */
#seccion-videos-final .ratio-mobile { padding-bottom: 177.77%; } /* 9:16 */

#seccion-videos-final .video-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	z-index: 1;
}

/* Escudo para el Drag (Mejora UX al arrastrar sobre iframes) */
#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; }

/* Ajustes Swiper Videos (Desktop Default) */
#seccion-videos-final .swiper-videos {
	width: 100%;
	overflow: hidden; /* Ocultamos el desborde en escritorio para que se vea limpio */
	padding: 10px 0; 
}

#seccion-videos-final .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* --- FLECHAS DE NAVEGACIÓN --- */
#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;
}

/* Posición de flechas */
#seccion-videos-final .swiper-button-prev { left: -60px; }
#seccion-videos-final .swiper-button-next { right: -60px; }

/* Clases de utilidad para videos (Bootstrap like) */
.d-none { display: none !important; }
.d-block { display: block !important; }

/* En desktop mostramos video horizontal y ocultamos vertical */
.ratio-desktop { display: block; }
.ratio-mobile { display: none; }
/* ==========================================================================
5 FOOTER
========================================================================== */
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;
}

/* ==========================================================================
ESPECIAL CONTACT ANIMATION SECTION
========================================================================== */


#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; /* Ancho reducido para formalidad */
  margin: 0 auto;
  text-align: justify;
}

/* Reset de contadores para numeración jerárquica */
#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;
}

/* Generador de número nivel 1 (1., 2., 3.) */
#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;
}

/* Sub-listas (Nivel 1.1, 1.2) */
#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;
}

/* Listas informativas con Bullets (UL) */
#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; /* Color institucional o azul de Bootstrap */
  font-weight: bold;
  position: absolute;
  left: -1.2rem;
}

/* Estilos de texto */
#legal-container-3k9w2m p {
  margin-bottom: 1rem;
}

/* Desktop first: Ajustes mobile */
@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;
}

/* Modificación para fondo oscuro */
#legal-terms-9v4m2x .legal-content {
  color: #FFF !important; 
  max-width: 900px; /* Ancho reducido para formalidad */
  margin: 0 auto;
  text-align: justify;
}

/* Estructura nativa para numeración Romana (I, II, III).
  Se apagan los contadores manuales y se usa el estándar HTML/CSS.
*/
#legal-terms-9v4m2x .legal-list-main {
  list-style-type: upper-roman !important;
  padding-left: 2.5rem; /* Espacio para que quepan números largos como VIII */
  margin-top: 2rem;
}

#legal-terms-9v4m2x .legal-list-main > li {
  margin-bottom: 2rem;
  padding-left: 0.5rem; /* Separación entre el número y el texto */
  font-weight: bold; /* Hace que el número romano se vea grueso */
  color: #FFF !important; 
}

/* Apagamos pseudo-elementos previos por si quedó caché */
#legal-terms-9v4m2x .legal-list-main > li::before {
  display: none !important;
  content: none !important;
}

/* Quitamos la negrita al texto normal para que solo destaque el número romano */
#legal-terms-9v4m2x .legal-list-main > li p,
#legal-terms-9v4m2x .legal-list-main > li ul {
  font-weight: normal;
}

/* Sub-listas Romanas (I.I, I.II) - Apagadas por ahora según tu requerimiento, 
   pero pre-configuradas nativamente por si acaso */
#legal-terms-9v4m2x .legal-list-sub {
  list-style-type: upper-roman !important;
  margin-top: 1rem;
  padding-left: 2.5rem;
}

/* Listas informativas con Bullets (UL) */
#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; /* Asegura que la lista de bullets no herede negrita */
}

#legal-terms-9v4m2x .legal-info-list li::before {
  content: "•" !important;
  display: block !important;
  color: #007bff; /* Azul institucional */
  font-weight: bold;
  font-size: 1.2rem;
  position: absolute;
  left: -1.2rem;
  top: 0;
}

/* Estilos de texto general */
#legal-terms-9v4m2x p {
  margin-bottom: 1rem;
}

#legal-terms-9v4m2x strong {
  color: #FFF !important;
}

/* Desktop first: Ajustes mobile */
@media (max-width: 768px) {
  #legal-terms-9v4m2x .legal-content {
    padding: 0 15px;
  }
  
  #legal-terms-9v4m2x .legal-list-main {
    padding-left: 2rem; /* En mobile reducimos el margen izquierdo */
  }
}


/* ==========================================================================
6. MEDIA QUERIES
========================================================================== */
/* --------------------------------------------------------------------------
LARGE DEVICES (Laptops & Desktops pequeños) - Max 1200px
[Origen: Migración de tus estilos 1024px a estándar Bootstrap 1200px]
-------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	/* --- 2. HEADER & NAV --- */
	/* [Origen: style.css líneas previas de navbar responsive] */
	.navbar {
		margin: 2rem;
	}
	.navbar-container {
		/* Aquí ocultamos la pastilla de vidrio del escritorio */
		width: 70%;
		gap: 10px;
		padding: 8px 14px;
	}
	.navbar-menu {
		gap: 16px;
	}
	/* Activamos los elementos del menú móvil desde aquí */
	.nav-toggle,
	.nav-overlay,
	.navbar-movil {
		display: block; 
	}
	.nav-toggle { 
		display: grid; 
	}
	/* --- 3. HOME: HERO --- */
	.hero-content {
		min-height: 100vh;
	}
	/* --- 4. HOME: SECCIONES --- */
	/* 4.1 Funcionalidades (Celular + Slider) */
	.contenedor-funcionalidades {
		flex-direction: column;
		align-items: center;
	}
	/* 4.2 Tarjetas / Productos */
	.productos header p {
		font-size: 1.5rem;
		padding-top: 1rem;
	}
	#btn-mas, 
	#btn-menos {
		margin-right: 4rem;
	}
	/* Ajuste de Grilla a 2 Columnas */
	.productos.is-open #productos-lista,
	.lista-regalo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		margin: 0;
		padding: 20px;
	}
	/* 4.3 Marcas */
	.logo-marquee-section header {
		padding: 4rem;
	}
	/* 4.4 Download & CTA */
	.down-buttons {
		flex-direction: column;
		align-items: center;
		width: 100%;
		gap: 20px;
	}
	.cta {
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
	}
	.cta-btn {
		width: 300px;
	}
	.contenedor-cta {
		gap: 20px;
	}
	/* --- 5. MÓDULOS GLOBALES (Videos & Footer) --- */
	/* Ajustes del Carrusel de Videos (Testimonios) */
	/* [Origen: slider-videos.php logic] */
	#seccion-videos-final .container-videos {
		padding: 0 15px; /* Quitamos padding ancho de escritorio */
	}
	#seccion-videos-final .swiper-videos {
		overflow: visible; /* Permitimos que se salga un poco */
	}
	/* Cambio de Video Horizontal a Vertical (si aplica según tu lógica de array) */
	#seccion-videos-final .ratio-desktop { display: none; }
	#seccion-videos-final .ratio-mobile { display: block; }

	/* Footer */
	footer {
		flex-direction: column;
		gap: 20px;
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
MEDIUM DEVICES (Tablets Verticales / Laptops Pequeñas) - Max 992px
[Origen: Ajustes de tipografía y espaciado de estilos previos]
-------------------------------------------------------------------------- */
@media (max-width: 992px) {

	/* --- 4. SECCIONES HOME --- */

	/* 4.1 Funcionalidades / App */
	/* Ajuste de títulos gigantes para que no se corten */
	.sumapay .titulo {
		font-size: 60px;
		line-height: 65px;
	}

	/* Caja de opciones (lado derecho del celular) */
	.sumapay .opciones {
		padding: 20px;
		max-width: 300px; /* Reducimos ancho para que quepa */
	}

	/* 4.6 Servicios */
	.servicios .titulo {
		font-size: 60px;
		line-height: 65px;
	}

	/* 4.7 Preguntas Frecuentes (FAQ) */
	.preguntas-frecuentes .titulo {
		font-size: 60px;
		line-height: 65px;
	}

	.preguntas-frecuentes .items .item {
		/* Reducimos el padding interno de las cajas de preguntas */
		padding: 30px 20px !important; 
	}

	/* --- 5. FOOTER --- */

	.footer {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.footer .holder {
		/* Ajuste de la caja gris del footer */
		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; /* Hacemos que los textos legales caigan uno bajo otro */
	}

	.footer .border-top .texto span:not(.t) {
		display: none; /* Ocultamos separadores de texto si existen */
	}

	.footer .border-top .texto span.t {
		margin-bottom: 20px;
	}

	.footer .border-top .texto a {
		display: inline-block;
		width: 100%; /* Links ocupan todo el ancho para fácil clic */
	}

	.footer .border-top .redes {
		margin-top: 20px;
	}

	/* Ajuste general de secciones (Padding vertical) */
	.page-section {
		padding-top: 3rem;
	}
}


/* --------------------------------------------------------------------------
SMALL DEVICES (Tablets Verticales / Móviles) - Max 768px
[El punto de quiebre principal]
-------------------------------------------------------------------------- */

@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: 0px 5px 30px;
	}
	.sp-section-wrapper p {
		font-size: clamp(1rem, 1.5vw, 1.2rem);
		line-height: 1.5;
	}
	#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: 2.2rem;
	}
	.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: 300px;
	}
	.contenedor-cta {
		gap: 20px;
	}
	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;
	}
	/* slider */

}

/* ========== Modal de contacto ========== */
/* Backdrop centrado y animado */
.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 de modal (tema oscuro con acento celeste) */
.caja-modal {
	width: min(460px, 92vw);
	max-height: 92vh;
	overflow: auto;
	position: relative;
	padding: 70px 24px 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%);
}
/* Cerrar modal */
.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;
}
/* Campos y tipografía del modal */
.contact-title {
	font-size: 23px;
	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 {
	/*color:#929292;*/
	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;
}
/* Botones */
.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;
}
/* Nota informativa al pie del modal */
.contact-note {
	text-align: center;
	color: #fff;
	opacity: 0.95;
	margin: 14px 0 4px;
	line-height: 1.35;
}
/* Animaciones de modal */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes slideUp {
	from {
		transform: translateY(18px);
	}
	to {
		transform: translateY(8px);
	}
}
@media (max-width: 520px) {
	#cta.cta {
		/* Dimensiones y Margen */
		padding: 50px 0px 270px;
		/* Fondo con la imagen del render */
		background-image: url('https://suma-pay.com/wp-content/uploads/2026/02/Editable-1.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.contact-title {
		font-size: 28px;
	}
}
.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%;
	/* 16:9 */
	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;
}
/* Contacto */
.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: clamp(12px, 11.13px + 0.26vw, 14px);
	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;
	}
}
/*Menu movil*/
.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;
	}
	/* Menu mv */
	/* ====== Botón hamburguesa ====== */
	.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;
	}
	/* ====== Overlay (oscurece + blur) ====== */
	.nav-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.25);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		z-index: 1000;
		opacity: 0;
		transition: opacity 0.2s ease;
	}
	/* ====== Panel menú (glassmorphism) ====== */
	.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: 1001;
		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: 5;
		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;
	}
	/* ====== Estado abierto ====== */
	body.menu-open .nav-overlay {
		opacity: 1;
	}
	body.menu-open .navbar-movil {
		transform: translateY(0) scale(1);
		opacity: 1;
		pointer-events: auto;
	}
	/* opcional: evitar scroll del body cuando está abierto */
	body.menu-open {
		overflow: hidden;
	}
	/* ====== Responsive ====== */
	@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) {
	.funcionalidades-app{
		padding:10px 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;
	}
}
/* Checkbox Pequeño y Estándar (15px fijos para todos) */
input[type="checkbox"] {
    /* 1. Quitamos el estilo nativo que causa problemas en Mac */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* 2. Definimos el tamaño exacto y quitamos rellenos extra */
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important; /* Evita que el tema lo aplaste */
    min-height: 15px !important;
    padding: 0 !important;      /* CRÍTICO: Elimina el relleno que lo hace gigante en Mac */
    margin: 0 5px 0 0 !important;

    /* 3. Dibujamos el cuadrito estilo Android/Windows */
    background-color: #ffffff !important;
    border: 1px solid #757575 !important; /* Gris estándar */
    border-radius: 2px !important; /* Ligeramente redondeado como en Android */
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    cursor: pointer !important;
}

/* 4. Dibujamos la palomita (check) cuando se selecciona */
input[type="checkbox"]:checked {
    background-color: #0d6efd !important; /* Azul (puedes cambiarlo a gris si prefieres) */
    border-color: #0d6efd !important;
    /* Icono de palomita ajustado para 15px */
    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; /* Tamaño de la palomita */
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Esto fuerza a iOS a usar la aceleración por hardware para el reproductor */
dotlottie-player {
    -webkit-transform: translate3d(0,0,0);
    display: block;
    margin: 0 auto;
}