/* --------------------------- */
/* --- ESTILOS PRINCIPALES --- */
/* --------------------------- */

:root {
--primary: #007bff;
--primary-glow: rgba(0, 123, 255, 0.5);
--bg-dark: #050505;
--card-bg: #111111;
--text-gray: #aaa;
--text-white: #ffffff;
--btn-green: #28a745;
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* PROPIEDAD CLAVE: Suaviza el scroll y respeta el espacio del menú */
html, body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: clip; /* CAMBIO: 'clip' es más seguro que 'hidden' para el sticky */
position: relative;
scroll-behavior: smooth;
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--bg-dark);
color: white;
}

/* ---------------------------- */
/* --- ESTILOS MENÚ GENERAL --- */
/* ---------------------------- */

/* estilo contenedor del menu */

header, section {
position: relative;
z-index: 1; /* El nav tiene 1000, así que esto quedará por debajo[cite: 7] */
scroll-margin-top: 800px; 
}

.fondo_completo {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                      url("../img/fondo_11.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

nav {
padding: 15px 8%;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(5, 5, 5, 0.85); 
backdrop-filter: blur(15px);
position: sticky;
top: 0;
width: 90%;
z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}

/* estilo logo del menu */
.logo-img {
width: clamp(60px, 10vw, 130px);
height: auto;
}

/* estilo contenedor link del menu */
.nav-links {
display: flex;
align-items: center;
gap: 35px;
}

/* estilo link del menu */
.nav-links a {
color: var(--text-gray);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
position: relative;
transition: color 0.3s ease; 
}

/* estilo linea de los subrayado link del menu */
.nav-links a:not(.btn-contacto)::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--primary);
transition: width 0.3s ease;
}

/* estilo del link al pasar el mouse color blanco*/
.nav-links a:not(.btn-contacto):hover {
color: white;
}

/* estilo del link subrayado al pasar el mouse color blanco 100% ancho*/
.nav-links a:not(.btn-contacto):hover::after {
width: 100%;
}

/* estilo bonotes general*/
.btn {
padding: 16px 32px;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
display: inline-flex; 
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
cursor: pointer;
position: relative;
overflow: hidden;
}

/* estilo bonotes crear mi tarjeta*/
.btn-primary, 
.btn-contacto {
background: var(--primary);
color: white !important;
box-shadow: 0 4px 15px var(--primary-glow);
border: none;
position: relative;
overflow: hidden;  
}

/* estilo bonotes crear mi tarjeta al pasar el mouse por encima*/
.btn-primary:hover, 
.btn-contacto:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.6);
background: #0069d9;  
}

/* estilo efecto bonotes crear mi tarjeta al pasar el mouse por encima*/
.btn-primary::before,
.btn-contacto::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3), 
    transparent
    );
transition: all 0.6s ease;
}

/* estilo efecto bonotes crear mi tarjeta al salir el mouse de encima*/
.btn-primary:hover::before,
.btn-contacto:hover::before {
    left: 100%;
}

/* estilo efecto bonotes ver beneficio, y seleccionar*/
.btn-outline {
border: 1px solid #444;
color: white;
margin-left: 15px;
background: transparent; 
}

/* estilo efecto bonotes ver beneficio, y seleccionar al pasar el mouse por encima*/
.btn-outline:hover {
border-color: white;
background: rgba(255, 255, 255, 0.1);
transform: translateY(-3px);
}

/* -------------------------- */
/* --- ESTILOS MENÚ MÓVIL --- */
/* -------------------------- */

/* Ocultar botones de control en escritorio */
.menu-toggle, .menu-close {
display: none;
background: none;
border: none;
color: white;
font-size: 2rem;
cursor: pointer;
}

header, 
section {
scroll-margin-top: 100px; 
}


/* ---------------------------------------------------- */
/* --- ESTILOS CONTENEDOR 1 TARJETA FISICA, VIRTUAL --- */
/* ---------------------------------------------------- */

.main-container {
display: flex;
max-width: 1160px;
width: 100%;
gap: 40px; 
align-items: center; 
justify-content: center; 
padding-top: 50px;
margin: 0 auto;
}

/* Estilo Contenedor izquierdo Tarjeta Fisica */
.left-column {
flex: 1; 
display: flex;
flex-direction: column;
}

/* Estilo "Conecta. Comparte. Destaca." */
.header-text h3 {
font-size: 1.2rem;
font-weight: normal;
margin: 0 0 10px 0;
color: var(--text-white);
}

/* Estilo texto bloque 1 "tu tarjeta sin limite y tu tarjeta digital qr nfc" */
.header-text h1, 
header h1 {
font-size: 3rem; 
margin: 0 0 15px 0;
line-height: 1.1;
font-weight: 800;
}

/* Estilo texto bloque 1 "le da el color azul a sin limite" */
.header-text h1 span {
color: #007bff;
}

/* Estilo texto bloque 1 "Comparte tu información de forma... comparte al limite..." */
header div p {
color: var(--text-gray);
font-size: 1.1rem;
line-height: 1.5;
}

/* Estilo contenedor principal de Tarjeta Fisica */
.cards-container {
position: relative;
margin-top: auto; 
}

/* Estilo texto "Tarjeta Fisica" */
.tag-physical {
background-color: #007bff;
color: var(--text-white);
padding: 8px 16px;
border-radius: 5px;
font-weight: bold;
display: inline-block;
margin-bottom: 15px;
text-transform: uppercase;
font-size: 0.8rem;
}

/* Estilo contenedor imagenes "Tarjeta Fisica y Tarjeta Digital Telefono" */
.cards-image {
max-width: 550px;
height: auto;
display: block;
filter: drop-shadow(0 0 20px rgba(0, 123, 255, 0.35));
transition: filter 0.3s ease, transform 0.3s ease;
}

/* Estilo contenedor imagenes centrada "Tarjeta Digital Telefono" */
.center-column {
flex: 0 0 auto; 
display: flex;
justify-content: center;
align-items: center;
}

/* Estilo contenedor "Tarjeta Digital Telefono" destello azul */
.phone-image, .center-column .cards-image {
max-height: 80vh;
width: auto;
display: block;
filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.35));
transition: filter 0.3s ease, transform 0.3s ease;
}

/* Estilo contenedor "Tarjeta Digital Telefono" destello azul al pasar el mouse */
.cards-image:hover {
filter: drop-shadow(0 0 10px rgba(0, 123, 255, 0.5));
transform: translateY(-5px); 
}

/* Estilo contenedor descripcion texto e iconos "Tarjeta Digital Telefono" */
.right-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 60px; 
padding-top: 30px; 
}

/* Estilo texto "Tarjeta Digital" */
.tag-virtual {
background-color: #007bff;
color: var(--text-white);
padding: 8px 16px;
border-radius: 5px;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8rem;
align-self: flex-start;
margin-bottom: 20px;
}

/* Estilo contenedor icono y texo descripcion "Tarjeta QR, NFC, SEGURIDAD" */
.info-block {
display: flex;
align-items: flex-start;
gap: 20px;
}

/* Estilo icono "QR, NFC, SEGURIDAD" */
.icon-container {
flex: 0 0 50px; 
display: flex;
width: 40px;
height: 40px;
fill: #007bff;
}

/* Estilo texto "QR, NFC, SEGURIDAD" */
.text-container h2 {
font-size: 1.2rem;
margin: 0 0 5px 0;
color: #007bff;
}

/* Estilo texto descriptivo "QR, NFC, SEGURIDAD" */
.text-container p {
color: var(--text-gray);
font-size: 0.9rem;
margin: 0;
line-height: 1.4;   
}

/* Estilo contenedor barra "RAPIDO, GLOBAL, ECOLOGICO, PROFESIONAL" */
.features-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 10px;
margin: 50px auto;
margin-top: 50px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.08);
width: 70%;
}

/* Estilo contenedor "RAPIDO, GLOBAL, ECOLOGICO, PROFESIONAL" y descripcion*/
.feature-item {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
transition: transform 0.2s ease, background 0.2s ease;
padding: 10px;
border-radius: 12px;
text-align: left;
}

/* Estilo contenedor "RAPIDO, GLOBAL, ECOLOGICO, PROFESIONAL" y descripcion* al pasar el mouse por encima */
.feature-item:hover {
transform: translateY(-3px);
background: rgba(255,255,255,0.05);
}

/* Estilo iconos "RAPIDO, GLOBAL, ECOLOGICO, PROFESIONAL" */
.feature-item i {
font-size: 24px;
color: var(--primary);
background: rgba(0, 123, 255, 0.15);
padding: 10px;
border-radius: 10px;
}

/* Estilo texto "RAPIDO, GLOBAL, ECOLOGICO, PROFESIONAL" */
.feature-item strong {
display: block;
font-size: 14px;
letter-spacing: 0.5px;
}

/* Estilo texto descripcion "RAPIDO, GLOBAL, ECOLOGICO, PROFESIONAL" */
.feature-item span {
font-size: 13px;
color: #aaa;
}

/* Estilo contenedor principal del texto (tarjeta digital con QR y NFC...) */
.footer-hero {
display: flex;
flex-direction: column;
align-items: center;  
text-align: center;  
margin: 80px auto 0;
width: 100%;
padding: 100px 5%;
max-width: 1200px;
}

/* Estilo texto "QR, NFC" */
.footer-hero h1 span {
background: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
filter: drop-shadow(0 0 15px rgba(0, 123, 255, 0.3));
}

/* Estilo texto descriptivo "GaeVans, adaptan a ti"******************************************************************/
.footer-hero p {
font-size: 1.2rem;
color: var(--text-gray);
max-width: 600px;
margin: 0 auto;
font-weight: 400;
opacity: 0.8;
}


/* Estilo contenedor principal del texto (Por qué elegirGaeVans Landing Card...) */
.benefits-section {
padding: 100px 5%;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}

/* Estilo texto principal del titulo (Por qué elegirGaeVans Landing Card... y Planes que se adaptan a ti y descripcion) */
.section-title {
text-align: center;
margin-bottom: 60px;
}

/* Estilo texto principal del titulo (Por qué elegirGaeVans Landing Card... y Planes que se adaptan a ti) */
.section-title h2 {
font-size: 3.5rem; 
font-weight: 800;
letter-spacing: -1.5px; 
color: white;
margin-bottom: 10px;
line-height: 1.2;
}

/* Estilo contenedor (Sin aplicaciones, Actualizacion en vivo, impacto inmediato, control total) */
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); 
gap: 20px; 
width: 100%;
}

/* Estilo contenedor por carta (Sin aplicaciones, Actualizacion en vivo, impacto inmediato, control total) */
.benefit-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 25px 20px; 
border-radius: 20px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}

/* Estilo contenedor por carta al pasar el mouse encima (Sin aplicaciones, Actualizacion en vivo, impacto inmediato, control total) */
.benefit-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--primary);
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 123, 255, 0.1);
}

/* Estilo iconos de la carta (Sin aplicaciones, Actualizacion en vivo, impacto inmediato, control total) */
.benefit-card i {
font-size: 2rem;
color: var(--primary);
margin-bottom: 15px;
display: inline-block;
transition: transform 0.4s ease;
}

/* Estilo iconos de la carta cuando pasas el mouse encima (Sin aplicaciones, Actualizacion en vivo, impacto inmediato, control total) */
.benefit-card:hover i {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 0 10px var(--primary-glow));
}

/* Estilo titulos de la carta (Sin aplicaciones, Actualizacion en vivo, impacto inmediato, control total) */
.benefit-card h4 {
color: #fff;
font-size: 1.1rem; 
margin-bottom: 10px;
}

/* Estilo descripcion de la carta (Sin aplicaciones, Actualizacion en vivo, impacto inmediato, control total) */
.benefit-card p {
color: var(--text-gray);
font-size: 0.85rem; 
line-height: 1.4;
}

/* Estilo texto "GaeVans, adaptan a ti" */
.section-title h2 span {
background: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
filter: drop-shadow(0 0 15px rgba(0, 123, 255, 0.3));
}

/* Estilo texto descriptivo "GaeVans, adaptan a ti"*/
.section-title p {
font-size: 1.2rem;
color: var(--text-gray);
max-width: 600px;
margin: 0 auto;
font-weight: 400;
opacity: 0.8;
}

/* Estilo contenedor planes */
.pricing-section {
padding: 100px 5%;
max-width: 1200px;
margin: 0 auto;
}

/* Estilo contenedor cartas de planes */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 50px;
}

/* Estilo contenedor cartas precios de planes */
.price-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 40px 30px; 
display: flex;
flex-direction: column;
transition: all 0.4s ease;
position: relative;
box-sizing: border-box; 
}

select option {
    background-color: #020617; /* Fondo oscuro para las opciones en PC */
    color: white;
}

.plan-selector select:hover {
    border-color: #22c55e; /* Cambia a verde al pasar el mouse */
    transition: 0.3s;
}

/* Estilo botones de contenedor cartas precios de planes */
.price-card .btn {
width: 100%;        
margin-left: 0;     
margin-right: 0;
padding: 14px 0;    
display: flex;
box-sizing: border-box;
}

/* Estilo precios de contenedor cartas precios de planes */
.price-card.featured {
border-color: var(--primary);
background: rgba(0, 123, 255, 0.05);
transform: scale(1.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 123, 255, 0.15);
}

/* Estilo de contenedor cartas precios de planes al pasar por encima */
.price-card:hover {
border-color: var(--primary);
transform: translateY(-10px);
}

/* Estilo de titulo de contenedor cartas precios de planes*/
.price-card h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: white;
}

/* Estilo de texto cartas precios de planes*/
.price-card .price {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 20px;
color: var(--primary);
}

/* Estilo de texto cartas "Año, Pago Unico"" de planes*/
.price-card .price span {
font-size: 1rem;
color: var(--text-gray);
font-weight: 400;
}

/* Estilo de contenedor descripcion de planes*/
.price-card ul {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
flex-grow: 1;
}

/* Estilo de contenedor descripcion de planes */
.price-card ul li {
color: var(--text-gray);
margin-bottom: 12px;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 10px;
}

/* Estilo de icono descripcion de planes */
.price-card ul li i {
color: var(--primary);
}

/* Estilo de Footer */
footer {
padding: 10px 5% 10px;
background: #050505;
border-top: 1px solid rgba(255, 255, 255, 0.05);
text-align: center;
position: relative;
margin-top: 50px;
}

/* Estilo linea superior de Footer  */
footer::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 30%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

/* Estilo contenedor de Footer */
.footer-content {
max-width: 1200px;
margin: 0 auto;
}

/* Estilo primera linea del Footer */
.footer-copy {
color: var(--text-white);
font-size: 1rem;
margin-bottom: 10px;
letter-spacing: 0.5px;
}

/* Estilo segunda linea del Footer */
.footer-author {
color: var(--text-gray);
font-size: 0.85rem;
font-weight: 400;
}

/* Estilo nombre de autor del Footer */
.footer-author strong {
color: var(--primary);
font-weight: 600;
transition: color 0.3s ease;
}

/* Estilo nombre de autor al mover el mouse encima del Footer */
.footer-author strong:hover {
color: #00d4ff;
cursor: default;
}

/* Estilo movimiento en la pagina */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estilo movimiento activado en la pagina */
.reveal.active {
opacity: 1;
transform: translateY(0);
}

/* Estilo movimiento activado en la pagina tiempo de duracion */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

@media (max-width: 768px) {
    
.main-container {
flex-direction: column;
padding-top: 20px;
gap: 30px;
width: 90%; /* Evita que toque los bordes laterales */
margin: 0 auto;
}

.logo-img {
width: clamp(100px, 10vw, 150px);
height: auto;
}

/* CORRECCIÓN DE TÍTULOS: Tamaño más pequeño para que no se corten */
.header-text h1, 
header h1,
.section-title h2 {
font-size: 2rem !important; /* Bajamos de 3rem a 2rem */
line-height: 1.2;
}

.footer-hero p {
font-size: 1.2rem;
color: var(--text-gray);
max-width: 500px;
margin: 0 auto;
font-weight: 400;
opacity: 0.8;
}


.center-column img {
max-width: 200px !important; /* El teléfono más pequeño en móvil */
margin: 0 auto;
}

.cards-image, 
.phone-image {
max-width: 320px !important; /* Limitamos el ancho físico */
height: auto;
margin: 0 auto;
display: block;
}

.features-bar {
grid-template-columns: repeat(1, 1fr);
gap: 1px;
padding: 1px;
border-style: solid;
border-color: rgb(156, 156, 156);
}

.benefits-grid {
grid-template-columns: 1fr;
}

.section-title h2 {
font-size: 2.2rem; 
}

.pricing-grid { 
grid-template-columns: 1fr; 
gap: 40px; 
}

.price-card.featured {
transform: scale(1); 
}

.menu-toggle {
display: block;
background: none;
border: none;
color: white;
font-size: 2.2rem;
cursor: pointer;
z-index: 1001;
}


.nav-links {
position: fixed;
top: 0;
right: -100%; /* CAMBIO: Más lejos para que no se vea la solapa */
width: 100%;
max-width: 300px;
height: 100vh;
background: #0a0a0a;
flex-direction: column;
align-items: center !important;
padding: 80px 20px;
gap: 25px;
z-index: 2000;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -10px 0 30px rgba(0,0,0,0.8);
visibility: hidden; /* CAMBIO: Invisible mientras está cerrado */

}

/* Clase que activaremos con JS para mostrar el menú */
.nav-links.active {
right: 0;
visibility: visible;
}

.menu-close {
display: block;
position: absolute;
top: 25px;
right: 25px;
background: none;
border: none;
color: white;
font-size: 2rem;
z-index: 2001; 
background: none;
cursor: pointer;
}

/* Capa oscura de fondo */
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(8px);
display: none; /* Oculto por defecto */
z-index: 1500;
}

.nav-overlay.active {
display: block;
}

/* Estilo del botón dentro del menú móvil */
.nav-links .btn-primary {
width: 100%;
margin-top: 10px;
}

.nav-links a {
display: block; /* Hace que toda la línea sea clickeable */
width: 100%;
padding: 15px 0; /* Aumenta el área táctil para el dedo */
}

/* Evitamos que los links tengan efectos raros en móvil */
.nav-links a::after {
display: none !important;
}

.btn-primary {
font-size: 0.9rem;
width: 100%;
}
    
.header-text h1 {
font-size: 2.2rem !important; /* Título más acorde al móvil */
}

/* CORRECCIÓN DE IMÁGENES: Que no ocupen más del ancho de la pantalla */

/* Ajuste de los bloques de iconos en la derecha */
.right-column {
gap: 30px;
padding-top: 10px;
}

/* Botones apilados */
.hero-btns {
flex-direction:column;
width: 80%;
gap: 10px;
display: flex;
align-items: center;
}

.btn-outline {
width: 80%;
gap: 10px;
margin-left: 0 !important;

}
    
.main-container, .features-bar, .footer-hero, section {
max-width: 100vw; /* Asegura que nada supere el ancho de la ventana */
box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
overflow: hidden; /* Evita que las animaciones reveal generen scroll */
}


}