/* Reset and Base Styles */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Universal box-sizing para un layout consistente */
}

html, body {
    background: #ffffff !important;
    color: #333;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    overflow-x: hidden;
    max-width: 100%;
    touch-action: manipulation;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body, p, div {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

ul, ol {
    margin: 0.5rem 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header - Improved */
header {
    background: linear-gradient(135deg, #0E4D92 0%, #1a5ba8 100%);
    color: white;
    padding: 0.7rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

/* Se han re-añadido los estilos del logo del header */
.logo img {
    height: 65px;
    width: auto;
}

.logo svg {
    fill: white;
}

/* Se ha eliminado la referencia a hero-logo-text ya que ya no existe en el HTML del hero */
.menu-toggle {
    display: block;
    font-size: 1.2rem;
    cursor: pointer;
    color: white;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

/* MENÚ HAMBURGUESA CORREGIDO */
.nav-links {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: 60px;
    right: 5px;
    background: rgba(14, 77, 146, 0.98);
    backdrop-filter: blur(15px);
    padding: 1.2rem;
    border-radius: 12px;
    z-index: 999;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    pointer-events: none;
    list-style: none;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    min-width: 180px;
}

.nav-links a {
    color: white !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 12px 8px;
    font-size: 1rem;
    display: block;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.nav-links a:hover {
    color: #25D366 !important;
    background: rgba(255,255,255,0.1);
    transform: translateX(5px);
}

.nav-links.show {
    max-height: 300px;
    opacity: 1;
    display: flex;
    pointer-events: auto;
}

.nav-links li {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeInLink 0.4s forwards;
}

.nav-links li:last-child {
    border-bottom: none;
}

/* ANIMACIÓN MEJORADA PARA LOS LINKS */
@keyframes fadeInLink {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-links.show li:nth-child(1) { animation-delay: 0.1s; }
.nav-links.show li:nth-child(2) { animation-delay: 0.15s; }
.nav-links.show li:nth-child(3) { animation-delay: 0.2s; }
.nav-links.show li:nth-child(4) { animation-delay: 0.25s; }

/* Hamburger Menu Animation */
.hamburger-icon .bar {
    fill: white;
    transition: all 0.5s ease-in-out;
    transform-origin: center;
}

.menu-toggle.active .bar.top {
    transform: translateY(22.5px) rotate(45deg);
}

.menu-toggle.active .bar.middle {
    opacity: 0;
}

.menu-toggle.active .bar.bottom {
    transform: translateY(-22.5px) rotate(-45deg);
}

/* Hero Section */
/* Se ha actualizado el fondo para usar la imagen proporcionada */
.hero {
    background: linear-gradient(
        135deg,
        rgba(14, 77, 146, 0.50) 0%,
        rgba(26, 91, 168, 0.50) 100%
    ),
    /* Se corrigió la ruta de la imagen */
    url('index-page.jpeg') center/cover no-repeat;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Aquí se ajustó el padding-top para darle más espacio al título */
    padding: 120px 0 50px;
    min-height: 60vh;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Se han ajustado los estilos del h1 para que se vea más grande y con más espacio */
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.hero-logo-text img {
    height: 160px;
    width: auto;
    transform: translateY(10px);
}

.hero-logo-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
    animation: fadeSlideDown 1s ease-in-out forwards;
}

.hero-logo-text h1 {
    font-size: 2.5rem;
    margin: 0;
    font-weight: bold;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    opacity: 0.9;
    animation: slideInUp 1s ease-out 0.3s both;
}

.hero-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
}

/* Intro Section */
.intro-section {
    padding: 15px 0;
    background: #ffffff;
}

.intro-box {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
    border-left: 4px solid #0E4D92;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.intro-box h2 {
    color: #0E4D92;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.intro-box p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Token Explanation Section */
.token-explanation {
    padding: 50px 0;
    background: #ffffff;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #0E4D92;
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    color: #666;
}

.token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.token-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
}

.token-card:hover {
    transform: translateY(-5px);
}

.token-icon {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.token-icon img {
    width: 60px;
    height: auto;
    max-height: 60px;
}

.token-card h3 {
    color: #0E4D92;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.token-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
}

/* Token Usage Section */
.token-usage {
    padding: 50px 0;
    background: #ffffff;
}

.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.usage-item {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    transition: transform 0.3s;
}

.usage-item:hover {
    transform: translateX(5px);
}

.usage-icon {
    margin-right: 1rem;
    color: #0E4D92;
    flex-shrink: 0;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.usage-icon img {
    width: 50px;
    height: auto;
    max-height: 50px;
}

.usage-text {
    flex: 1;
    font-size: 1rem;
}

.usage-text strong {
    color: #0E4D92;
    font-size: 1.1rem;
}

.usage-tokens {
    background: #0E4D92;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: 1rem;
    flex-shrink: 0;
}

/* Services Section */
.services-section {
    padding: 50px 0;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.service-card {
    background: #ffffff;
    border-left: 4px solid #0E4D92;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.service-card h3 {
    color: #0E4D92;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.service-card p {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

/* Packages Section */
.packages {
    padding: 60px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.paquete {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid #0E4D92;
    transition: all 0.5s ease-in-out;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
}

.paquete:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.paquete::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0E4D92, #25D366);
}

.paquete-header {
    margin-bottom: 1.5rem;
}

.icono {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    margin-bottom: 1rem;
}

.icono img {
    width: 80px;
    height: auto;
    max-height: 80px;
}

.paquete-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #0E4D92;
    margin-bottom: 0.5rem;
}

.precio {
    font-size: 1.8rem;
    color: #0E4D92;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.paquete-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    flex-grow: 1;
}

.paquete-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 1rem;
}

.paquete-features li:last-child {
    border-bottom: none;
}

.paquete-features li::before {
    content: '✓';
    color: #25D366;
    font-weight: bold;
    margin-right: 0.5rem;
}

/* CTA Section */
.cta-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #0E4D92 0%, #1a5ba8 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.cta-description {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(45deg, #25D366, #20c55a);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.5s ease-in-out;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    animation: pulse 2s infinite;
}

.whatsapp-btn::before {
    content: '';
    width: 36px;
    height: 36px;
    margin-right: 0.7rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 222-99.6 222-222 0-59.3-23.2-115-65.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.9-5-4.2-10.5-7z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.whatsapp-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Botón CTA azul del sitio */
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #0E4D92, #1a5ba8);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.5s ease-in-out;
    box-shadow: 0 4px 15px rgba(14, 77, 146, 0.3);
    animation: pulse 2s infinite;
    border: none;
    cursor: pointer;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(14, 77, 146, 0.4);
    color: white;
}

.cta-btn:active {
    transform: translateY(-1px);
}

/* Bordes azul-verde para cajas */
.token-card,
.service-card,
.paquete,
.intro-box,
.usage-item {
    border-top: 4px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(90deg, #0E4D92, #25D366) border-box;
    transition: all 0.3s ease;
}

.token-card:hover,
.service-card:hover,
.paquete:hover,
.intro-box:hover,
.usage-item:hover {
    border-top: 4px solid #25D366;
}

/* Footer */
footer {
    background: #333;
    color: white;
    text-align: center; /* Esto centra la línea de copyright final */
    padding: 2.5rem 0;
    position: relative;
    overflow: hidden;
}

/* Asegúrate de que esta clase exista en tu HTML y esté aplicada correctamente */
.container {
    max-width: 1200px; /* Ancho máximo del contenido del footer */
    margin: 0 auto; /* Esto centra el contenedor .container en la página */
    padding: 0 15px; /* Añade un poco de relleno horizontal para evitar que el contenido toque los bordes en pantallas pequeñas */
}

.footer-content {
    display: grid;
    /* Usa auto-fit con un minmax flexible para escritorio */
    /* Esto permite que las columnas se ajusten y crezcan para llenar el espacio */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem; /* Espacio entre los elementos de la cuadrícula */
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;

    /* Centra el grid si hay espacio extra dentro del .container */
    justify-content: center;
    align-items: start; /* Alinea los elementos al inicio de su celda de cuadrícula verticalmente */
}

/* Asegura que el texto de las secciones individuales esté alineado como se desea */
.footer-section {
    text-align: center; /* Centra el texto dentro de cada sección del footer */
    padding: 0 10px; /* Añade un poco de padding interno para evitar que el texto toque los bordes */
}

.footer-section h3 {
    color: #25D366;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* Asegura que los enlaces dentro de h3 en el footer hereden el tamaño de fuente */
.footer-section h3 a {
    font-size: inherit; /* Hereda el tamaño de fuente del h3 padre */
    color: inherit; /* Hereda el color del h3 padre */
}

.footer-section p,
.footer-section a {
    color: #ccc;
    text-decoration: none;
    line-height: 1.6;
    font-size: 1rem;
}

.footer-section a:hover {
    color: #25D366;
}

/* Si el texto de copyright también se está desplazando, asegúrate de que esté dirigido específicamente */
footer .container > p { /* Dirige el párrafo directamente dentro del contenedor en el footer */
    text-align: center;
    margin-top: 2rem; /* Añade espacio encima del texto de copyright */
    font-size: 0.9rem;
    color: #aaa; /* Color ligeramente más claro para el copyright */
}

/* Ajustes responsivos para pantallas más pequeñas (opcional, pero recomendado) */
@media (max-width: 768px) {
    .float-contacto {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }

    .intro-section,
    .token-explanation,
    .token-usage,
    .services-section,
    .packages,
    .cta-section {
        padding: 40px 0;
    }
}

.intro-box {
    border-left: 4px solid #0E4D92;
    border-top: 4px solid #0E4D92;
    transition: all 0.3s ease;
}

.intro-box:hover {
    border-left: 4px solid #25D366;
    border-top: 4px solid #25D366;
}footer-content {
        /* En pantallas más pequeñas, apila las secciones en una sola columna */
        grid-template-columns: 1fr;
        /* Asegura que ocupe el 100% del ancho disponible en móvil */
        max-width: 100%; /* Asegura que ocupe el ancho completo del contenedor en móvil */
        text-align: center; /* Centra el contenido en las secciones apiladas si se desea */
    }

    .footer-section {
        text-align: center; /* Centra el contenido dentro de cada sección cuando están apiladas */
        padding: 0; /* Elimina el padding horizontal extra en móvil si no es necesario */
    }
}

/* Floating Contact Button */
.float-contacto {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #0E4D92;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
    animation: pulseEffect 2s infinite;
}

.float-contacto:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

.float-contacto:hover svg path {
    fill: #0E4D92;
}

/* Eliminar efectos bokeh */
.bokeh {
    display: none !important;
}

.hero::before {
    display: none !important;
}

/* Imagen de fondo del index.html */
.hero {
    /* Aquí se ajustó el padding-top para darle más espacio al título */
    padding: 120px 0 50px;
    /* Se ha actualizado el fondo para usar la imagen proporcionada y un overlay */
    background: linear-gradient(
        135deg,
        rgba(14, 77, 146, 0.50) 0%,
        rgba(26, 91, 168, 0.50) 100%
    ),
    url('index-page.jpeg') center/cover no-repeat;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 60vh;
}
.hero-content {
    position: relative;
    z-index: 2;
}
/* Se han ajustado los estilos del h1 para que se vea más grande y con más espacio */
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
    .logo img {
        height: 35px;
    }

    .logo {
        font-size: 1.3rem;
        gap: 0.15rem;
    }
    /* Se ha actualizado el padding del hero para móvil */
    .hero {
        padding: 100px 0 50px;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
    /* Se ha actualizado el font-size del h1 para móvil */
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-logo-text {
        flex-direction: column;
        gap: 0.1rem;
    }

    .hero-logo-text h1 {
        font-size: 1.8rem;
    }

    .hero-logo-text img {
        height: 100px;
        transform: translateY(8px);
    }

    .section-title {
        font-size: 1.6rem;
    }

    .packages-grid,
    .token-grid,
    .usage-grid,
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .paquete {
        padding: 2rem;
    }

    .usage-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .usage-icon {
        margin-right: 0;
        width: auto;
    }

    .usage-tokens {
        margin-left: 0;
    }

    .cta-title {
        font-size: 1.8rem;
    }

    .nav-links {
        right: 5px;
        top: 65px;
        background: rgba(14, 77, 146, 0.98);
        backdrop-filter: blur(15px);
        min-width: 160px;
    }

    .nav-links a {
        font-size: 0.95rem;
        padding: 10px 8px;
    }
}