/* Custom colors based on Logo2.png */
:root {
    --color-aivlife-blue: #2A368F; /* Main Blue */
    --color-aivlife-yellow: #F2C94C; /* Accent Yellow */
    --color-aivlife-green-medium: #4CAF50; /* Medium Green */
    --color-aivlife-green-light: #A5D6A7; /* Light Green */
    --color-aivlife-gray-dark: #424242; /* Dark Gray for text */
    --color-aivlife-gray-light: #F8F8F8; /* Off-white background */
}
/* Estas clases se definen aquí para asegurar que Tailwind CDN las interprete correctamente */
        .bg-aivlife-blue { background-color: var(--color-aivlife-blue); }
        .text-aivlife-blue { color: var(--color-aivlife-blue); }
        .border-aivlife-blue { border-color: var(--color-aivlife-blue); }
        .hover\:bg-aivlife-blue-dark:hover { background-color: #202b70; }

        .bg-aivlife-yellow { background-color: var(--color-aivlife-yellow); }
        .text-aivlife-yellow { color: var(--color-aivlife-yellow); }
        .border-aivlife-yellow { border-color: var(--color-aivlife-yellow); }
        .hover\:bg-aivlife-yellow-dark:hover { background-color: #E6B620; }

        .bg-aivlife-green-medium { background-color: var(--color-aivlife-green-medium); }
        .text-aivlife-green-medium { color: var(--color-aivlife-green-medium); }

        .bg-aivlife-gray-light { background-color: var(--color-aivlife-gray-light); }
        .text-aivlife-gray-dark { color: var(--color-aivlife-gray-dark); }

        /* Gradientes personalizados */
        .bg-gradient-aivlife {
            background: linear-gradient(135deg, var(--color-aivlife-blue) 0%, var(--color-aivlife-green-medium) 100%);
        }
        .bg-gradient-yellow-blue {
            background: linear-gradient(45deg, var(--color-aivlife-yellow) 0%, var(--color-aivlife-blue) 100%);
        }

/* Base Styles */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-aivlife-gray-dark);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    margin-top: 0;
    margin-bottom: 1rem;
}

.container {
    max-width: 100%; /* Modificado de 1200px a 100% */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.container1 { 
    width: 100%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0; }

.container2 { 
    width: 100%;
    max-width: 65%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0; }

.container3 { 
    width: 100%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0; }

.container4 { 
    width: 100%;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0; }


.final-compra {
    max-width: 100%; /* Modificado de 1200px a 100% */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #000; /* Añade estilo y color al borde */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
.compra-final {
    text-align: center;
    max-width: 90%; /* Modificado de 1200px a 100% */
    margin-left: auto;
    margin-right: auto;
}

/* Utility Classes (mimicking some Tailwind behaviors) */
.body-base {
    background-color: var(--color-aivlife-gray-light);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 0rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.rounded-md { border-radius: 0.375rem; }
.rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.rounded-t-xl { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }

.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.space-x-2 > *:not(:first-child) { margin-left: 0.5rem; }
.space-x-8 > *:not(:first-child) { margin-left: 2rem; }
.space-y-6 > *:not(:first-child) { margin-top: 1.5rem; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* Responsive Grid */



/* Specific Component Styles */

/* Preloader */





/* .preloader-base {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-aivlife-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
} */



/* Fondo del preloader */
.preloader-base {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-aivlife-blue);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
}

/* Contenedor del texto con efecto */
.preloader-container {
  position: relative;
  padding: 2rem 3rem;
  border-radius: 10px;
  animation: glowPulse 3s infinite;
  /* Efecto de brillo alrededor del texto */
  box-shadow: 
    0 0 10px rgba(255, 255, 0, 0.4),    /* Amarillo */
    0 0 20px rgba(255, 0, 255, 0.3),    /* Rosa */
    0 0 30px rgba(0, 0, 255, 0.2);      /* Azul */
}

/* Texto del preloader */
.preloader-text {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Animación de pulso de luz */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 
      0 0 10px rgba(255, 255, 0, 0.4),
      0 0 20px rgba(255, 0, 255, 0.3),
      0 0 30px rgba(0, 0, 255, 0.2);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(255, 255, 0, 0.6),
      0 0 30px rgba(255, 0, 255, 0.5),
      0 0 40px rgba(0, 0, 255, 0.4);
  }
}

/* Opcional: Efecto de brillo intermitente en el texto */
@keyframes pulse-light {
  0%, 100% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #c5f408, 0 0 40px #c5f408;
  }
  50% {
    text-shadow: 0 0 20px #ffff00, 0 0 30px #c5f408, 0 0 50px #c5f408, 0 0 60px #c5f408;
  }
}

.preloader-text {
  animation: pulse-light 2s infinite;
}










.preloader-text {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    animation: pulse-light 1.5s infinite ease-in-out;
}

/* Header */
.header-base {
    background-color: var(--color-aivlife-blue);
    color: white;
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom-left-radius: 0rem; /* Modificado a 0rem */
    border-bottom-right-radius: 0rem; /* Modificado a 0rem */
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-logo-link {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
    text-decoration: none; /* Ensure no underline on the link itself */
}
.header-logo-img {
    height: 3rem;
    width: 3rem;
    background-color: white; /* ✅ Fondo blanco completo */
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 
                0 2px 4px -1px rgba(231, 229, 229, 0.06);
}

.header-logo-text-group {
    display: flex;
    flex-direction: column; /* Textos en columnas */
    align-items: center;    /* Centra horizontalmente */
    text-align: center;     /* Centra el texto dentro del contenedor */
    color: white; /* Ensure text group is white */
}
.header-logo-text {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 800; /* font-extrabold */
    line-height: 1; /* Adjust line height to prevent extra space */
    color: white; /* Explicitly white */
    white-space: normal; /* Permite salto de línea */
}
.header-slogan {
    font-size: 0.875rem; /* text-sm */
    font-weight: 300; /* font-light */
    color: white; /* Changed to white for visibility */
    margin-left: 0.5rem; /* Small margin to separate from logo text */
    margin-top: 0rem; /* Espacio entre líneas */
    white-space: normal; /* Permite salto de línea */
}

/* Desktop Navigation List */
.nav-list {
    display: none; /* Hidden by default on mobile */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem; /* space-x-8 */
    font-size: 1.4rem; /* text-lg */
    font-weight: 600; /* font-semibold */
}

.nav-link {
    color: white;
    text-decoration: none;
    transition-property: color;
    transition-duration: 200ms;
}
.nav-link:hover {
    color: var(--color-aivlife-yellow);
}
.nav-link-affiliates {
    color: var(--color-aivlife-yellow);
}
.nav-link-affiliates:hover {
    color: white;
}

/* Mobile Menu Button (Hamburger) */
/* Botón hamburguesa base */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 51;
    padding: 0;
}

/* Líneas del botón */
.line {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease; /* Transición suave */
}

/* Ocultar en desktop */

/* ANIMACIÓN: Cuando se agrega la clase "active" */
.hamburger-menu.active .line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* Línea superior gira y se mueve */
}
.hamburger-menu.active .line:nth-child(2) {
    opacity: 0; /* Línea central desaparece */
}
.hamburger-menu.active .line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px); /* Línea inferior gira y se mueve */
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-aivlife-blue);
    opacity: 0; /* Initially transparent */
    z-index: 40;
    display: none; /* Initially hidden */
    transition: opacity 0.3s ease-in-out;
    flex-direction: column; /* Stack content vertically */
    align-items: center;
    justify-content: center;
}
.mobile-menu-overlay.is-active { /* Class added by JS when active */
    opacity: 0.95;
    display: flex; /* Show the overlay */
}
.mobile-menu-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
    position: absolute;
    top: 0;
    right: 0;
}
.mobile-menu-close-button {
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* space-y-6 */
    font-size: 1.25rem; /* text-xl */
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-nav-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}
.mobile-nav-link:hover {
    color: var(--color-aivlife-yellow);
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 75vh; /* Adjusted height for less vertical space */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow: hidden;
    border-bottom-left-radius: 0.2rem; /* Modificado a 0.2rem */
    border-bottom-right-radius: 0.2rem; /* Modificado a 0.2rem */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
}
.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--color-aivlife-blue) 0%, #065F46 100%); /* Adjusted green */
    opacity: 0.9; /* Increased opacity for text readability */
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 100%; /* Eliminado max-width de 800px */
    color: white;
    padding: 0.5rem 1rem; /* Reduced padding-top/bottom for hero-content */
    box-sizing: border-box; /* Ensure padding is included in width */
    transform: translateY(-5%); /* Moved up by 5% of its height, less aggressive */
}

.hero-title {
    font-size: 2.25rem; /* text-5xl */
    font-weight: 800; /* font-extrabold */
    line-height: 1.25; /* leading-tight */
    margin-bottom: 1.5rem; /* mb-6 */
    color: var(--color-aivlife-yellow);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* drop-shadow-2xl */
    max-width: 80%; /* Added for 80% width */
    margin-left: auto; /* Centering the block */
    margin-right: auto; /* Centering the block */
    word-break: break-word; /* Allow long words to break */
    animation: animate-fadeInScale 0.8s ease-out forwards, aurora-zoom-effect 4s infinite ease-in-out; /* Combined animations */
}


.hero-subtitle {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 2rem; /* mb-8 */
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4); /* drop-shadow-lg */
}

.hero-button {
    display: inline-block;
    background-color: var(--color-aivlife-yellow);
    color: var(--color-aivlife-blue);
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    padding: 1rem 2.5rem; /* py-4 px-10 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
}
.hero-button:hover {
    background-color: #E6B620; /* hover:bg-aivlife-yellow-dark */
    transform: scale(1.05);
}

/* Section Base Styles */
section {
    padding-top: 0.5rem; /* Modificado de 5rem a 0.5rem */
    padding-bottom: 0.5rem; /* Modificado de 5rem a 0.5rem */
   
}

.section-container1 {
    width: 100%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.texto-normal {
    text-align: center;
    max-width: 70%;
    margin-top: 20px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.section-title-primary {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    color: var(--color-aivlife-blue);
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}
.section-title-secondary {
    font-size: 1.9rem; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    color: white;
    text-align: center;
    margin-bottom: 1rem; /* mb-12 */
}

/* Our Promise Section */
.section-promise {
    background-color: white;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 40px 20px 40px; 
}

.grid-cols-3-gap {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2.5rem; /* gap-10 */
}
.grid-cols-3-gap1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 8.5rem; /* gap-10 */
}

.section-card {
    background-color: var(--color-aivlife-gray-light);
    padding: 2rem; /* p-8 */
    border-radius: 1rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-md */
    text-align: center;
    transition: transform 0.3s ease-in-out;
}
.section-card:hover {
    transform: translateY(-5px);
}
.section-card1 {
    background-color: var(--color-aivlife-gray-light);
    padding: 1rem; /* p-8 */
    border-radius: 1rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-md */
    text-align: center;
    transition: transform 0.3s ease-in-out;
}
.section-card1:hover {
    transform: translateY(-5px);
}
.card-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem; /* mb-6 */
    height: 9rem;
    width: 9rem;
}

.card-icon1 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.3rem; /* mb-6 */
    height: 10rem;
    width: 20rem;
}

.card-icon2 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.3rem; /* mb-6 */
    height: 13rem;
    width: 20rem;
}
.card-title {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: var(--color-aivlife-blue);
    margin-bottom: 0.75rem; /* mb-3 */
}
.card-description {
    color: var(--color-aivlife-gray-dark);
}

/* The Journey Section */
.section-journey {
    background-color: var(--color-aivlife-green-medium);
    color: white;
}
.journey-steps-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.journey-timeline-line {
    display: none; /* Hidden on mobile */
    position: absolute;
    height: 100%;
    width: 4px;
    background-color: var(--color-aivlife-yellow);
    left: 50%;
    transform: translateX(-50%);
}

.journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 4rem; /* mb-16 */
    position: relative;
}


.journey-text-content {
    text-align: center;
    margin-bottom: 1.5rem; /* mb-6 */
}

.journey-step-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: var(--color-aivlife-yellow);
    margin-bottom: 0.75rem; /* mb-3 */
}
.journey-step-description {
    font-size: 1.125rem; /* text-lg */
    color: #e5e7eb; /* text-gray-100 */
}
.journey-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    border-radius: 9999px; /* rounded-full */
    background-color: var(--color-aivlife-yellow);
    color: var(--color-aivlife-blue);
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    flex-shrink: 0;
    z-index: 10; /* Above timeline line */
    margin-bottom: 1.5rem; /* mb-6 */
}

.icon-img {
    width: 3rem; /* w-10 */
    height: 3rem; /* h-10 */
}
.journey-step-image-wrapper {
    text-align: center;
}

.journey-step-image {
    border-radius: 0.75rem; /* rounded-xl */
    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */
    max-width: 100%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}



/* Product Section */
.section-products {
    background-color: white;
}
.grid-cols-4-gap {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem; /* gap-8 */
}


.product-card {
    background-color: var(--color-aivlife-gray-light);
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 70%;
}
.product-image {
    border-radius: 0.5rem; /* rounded-lg */
    margin-bottom: 1rem; /* mb-4 */
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}
.product-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    color: var(--color-aivlife-blue);
    margin-bottom: 0.5rem; /* mb-2 */
}
.product-description {
    color: var(--color-aivlife-gray-dark);
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 1rem; /* mb-4 */
}
.product-button {
    background-color: var(--color-aivlife-yellow);
    color: var(--color-aivlife-blue);
    font-weight: 600; /* font-semibold */
    padding: 0.5rem 1.5rem; /* py-2 px-6 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}
.product-button:hover {
    background-color: #E6B620; /* hover:bg-aivlife-yellow-dark */
}

/* Community Section */
.section-community {
    background-color: var(--color-aivlife-gray-light);
}
.grid-cols-2-gap {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2.5rem; /* gap-10 */
}

.community-image {
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    max-width: 100%;
    height: auto;
}
.community-text-content {
    text-align: center;
}
.community-description {
    font-size: 1.125rem; /* text-lg */
    color: var(--color-aivlife-gray-dark);
    line-height: 1.7; /* leading-relaxed */
    margin-bottom: 1.5rem; /* mb-6 */
}
.community-blockquote {
    font-style: italic;
    font-size: 1.25rem; /* text-xl */
    color: var(--color-aivlife-blue);
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
}
.community-quote-author {
    font-weight: 700; /* font-bold */
    color: var(--color-aivlife-yellow);
}

/* Call to Action Buttons */
.button-primary {
    display: inline-block;
    background-color: var(--color-aivlife-blue);
    color: white;
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
}
.button-primary:hover {
    background-color: #202b70;
    transform: scale(1.05);
}

.button-secondary {
    display: inline-block;
    background-color: var(--color-aivlife-yellow);
    color: var(--color-aivlife-blue);
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
}
.button-secondary:hover {
    background-color: #E6B620; /* hover:bg-aivlife-yellow-dark */
    transform: scale(1.05);
}

/* Final Call to Action Section */
.section-join-us {
    background: linear-gradient(to right, var(--color-aivlife-blue) 0%, var(--color-aivlife-green-medium) 100%);
    color: white;
    padding-top: 5rem; /* py-20 */
    padding-bottom: 5rem; /* py-20 */
    text-align: center;
    border-top-left-radius: 0.75rem; /* rounded-t-xl */
    border-top-right-radius: 0.75rem; /* rounded-t-xl */
    box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}
.section-title-cta {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    line-height: 1.25; /* leading-tight */
    margin-bottom: 1.5rem; /* mb-6 */
}

.color-amarillo{
    color: var(--color-aivlife-yellow);
}

.section-description-cta {
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 2.5rem; /* mb-10 */
}

.button-cta {
    display: inline-block;
    background-color: var(--color-aivlife-yellow);
    color: var(--color-aivlife-blue);
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    padding: 1rem 3rem; /* py-4 px-12 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
}
.button-cta:hover {
    background-color: #E6B620; /* hover:bg-aivlife-yellow-dark */
    transform: scale(1.05);
}

/* Footer */
.footer-base {
    background-color: var(--color-aivlife-blue);
    color: white;
    padding-top: 3rem; /* py-12 */
    padding-bottom: 3rem; /* py-12 */
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem; /* gap-8 */
}

.footer-col-1 {
    text-align: center;
}
.footer-logo {
    background-color: white;
    height: 3rem; /* h-20 */
    width: 3rem; /* w-20 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem; /* mb-4 */
}

.footer-description {
    font-size: 0.875rem; /* text-sm */
    color: #d1d5db; /* text-gray-300 */
}
.footer-heading {
    font-weight: 700; /* font-bold */
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 1rem; /* mb-4 */
    color: var(--color-aivlife-yellow);
}
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-list li {
    margin-bottom: 0.5rem; /* mb-2 */
}
.footer-link {
    color: #d1d5db; /* text-gray-300 */
    text-decoration: none;
    transition: color 0.3s;
}
.footer-link:hover {
    color: white;
}
.footer-copyright {
    text-align: center;
    color: #9ca3af; /* text-gray-400 */
    font-size: 0.875rem; /* text-sm */
    margin-top: 2rem; /* mt-8 */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Aurora Zoom Effect */
@keyframes aurora-zoom-effect {
    0% {
        transform: scale(1);
        text-shadow: 0 0 5px var(--color-aivlife-yellow), 0 0 10px var(--color-aivlife-blue); }
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 10px var(--color-aivlife-yellow), 0 0 20px var(--color-aivlife-blue), 0 0 30px rgba(255,255,255,0.3); }
    100% {
        transform: scale(1);
        text-shadow: 0 0 5px var(--color-aivlife-yellow), 0 0 10px var(--color-aivlife-blue); }
}




/* Mobile Menu Button (Hamburger) */
/* Botón hamburguesa base */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 51;
    padding: 0;
}

/* Líneas del botón */
.line {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease; /* Transición suave */
}

/* Ocultar en desktop */

/* ANIMACIÓN: Cuando se agrega la clase "active" */
.hamburger-menu.active .line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* Línea superior gira y se mueve */
}
.hamburger-menu.active .line:nth-child(2) {
    opacity: 0; /* Línea central desaparece */
}
.hamburger-menu.active .line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px); /* Línea inferior gira y se mueve */
}



/* ----- VIDEO CENTRADO ----- */
.video-oportunidad {
  justify-content: center; /* Centra horizontalmente */
  align-items: center;      /* Centra verticalmente (opcional) */
   max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    padding-top: 0px;
}




.video-centrado {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Contenedor del Video con Placeholder */
.video-container-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #ccc; 
    border-radius: 8px;
    border: 6px solid #2A368F; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.video-container-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; 
}

/* Mensaje de ayuda para el audio */
.audio-help-text {
    color: #dc3545;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
    padding: 10px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb; 
    border-radius: 5px;
}


.compensation-plan-section { 
    background-color: var(--aiv-blue);
}

.compensation-plan-section p {
    color: var(--aiv-blue);
    text-align: center;
} 

.compensation-plan-section img {
  display: block; 
  width: 100%; 
  max-width: 70%; 
  height: auto; 
  margin: 0 auto;
} 

/* Títulos y subtítulos dentro de esta sección */
.compensation-plan-section .section-title { /* Para "Plan BAMBUSA: Tu Camino Hacia la Abundancia" */
    color: var(--aiv-yellow); /* Título principal en amarillo */
    font-family: var(--font-secondary);
    font-size: 1.7rem; /* Ajustar según diseño móvil */
    font-weight: 800;
    margin-bottom: 15px;
    text-align: center;
}
.compensation-plan-section .section-subtitle { /* Para el párrafo descriptivo debajo del título */
    color: #e0e0e0; /* Subtítulo en un gris claro o blanco suave */
    font-size: 1rem; /* Ajustar según diseño móvil */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.6;
}


.tools-support-section { 
    background-color: var(--aiv-white); /* Fondo blanco para esta sección */
    /* .section-padding ya debería manejar el padding vertical si lo usas globalmente */
}

/* Estilos para los títulos dentro de esta sección específica si necesitas diferenciarlos */
.tools-support-section .section-title {
    color: var(--aiv-blue); /* Título principal en azul */
}
.tools-support-section .section-subtitle {
    color: var(--aiv-gray-dark); /* Subtítulo en gris oscuro */
}


.support-card {
    background-color: var(--aiv-gray-light); /* Fondo gris claro para las tarjetas */
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.support-card-icon {
    font-size: 2.5rem; /* Tamaño del emoji/icono en móvil */
    color: var(--aiv-green); /* Color verde para los iconos */
    margin-bottom: 15px; /* Espacio debajo del icono */
    line-height: 1; /* Para asegurar que el emoji no tenga espacio extra */
}






/* ========================================================================== */
/* --- BREAKPOINTS (TABLET: MIN-WIDTH 768PX) --- */
/* ========================================================================== */
@media (min-width: 768px) {
    .final-compra {
    max-width: 100%; /* Modificado de 1200px a 100% */
    width: 80%;
}
.compra-final {
    max-width: 80%; /* Modificado de 1200px a 100% */
}
.compensation-plan-section { 
    background-color: var(--aiv-blue);
}

.compensation-plan-section .section-title { /* Para "Plan BAMBUSA: Tu Camino Hacia la Abundancia" */
    font-size: 2rem; /* Ajustar según diseño móvil */
    font-weight: 800;
    text-align: center;
}
.compensation-plan-section .section-subtitle { /* Para el párrafo descriptivo debajo del título */
    font-size: 1rem; /* Ajustar según diseño móvil */
    max-width: 600px;
    text-align: center;
    line-height: 1.6;
}´
.product-card {
    max-width: 90%;
}

    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:flex-row { flex-direction: row; }
    .md\:flex-row-reverse { flex-direction: row; margin-bottom: 5rem; }
    .md\:text-left { text-align: left; }
    .md\:text-right { text-align: right; }
    .md\:pr-12 { padding-right: 3rem; }
    .md\:pl-12 { padding-left: 3rem; }
    .md\:mb-0 { margin-bottom: 0; }
    .md\:mr-8 { margin-right: 2rem; }
    .md\:ml-0 { margin-left: 0; }
    .md\:w-1\/2 { width: 50%; }
    .nav-list { display: flex; }
    .hamburger-menu { display: none; }
    .hero-content { padding: 1rem 1rem; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.5rem; }
    .video-centrado { padding: 15px; margin: 15px; }
    .grid-cols-3-gap { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-3-gap1 { grid-template-columns: repeat(3, 1fr); }
    .journey-timeline-line { display: block; }
    .journey-step { flex-direction: row; margin-bottom: 5rem; }
    .journey-step:nth-child(even) { flex-direction: row-reverse; }
    .journey-step:nth-child(odd) .journey-text-content { width: 50%; padding-right: 3rem; text-align: right; margin-bottom: 0; }
    .journey-step:nth-child(even) .journey-text-content { width: 50%; padding-left: 3rem; text-align: left; margin-bottom: 0; }
    .journey-step-icon { margin-bottom: 0; }
    .journey-step:nth-child(odd) .journey-step-image-wrapper { width: 50%; padding-left: 3rem; text-align: left; }
    .journey-step:nth-child(even) .journey-step-image-wrapper { width: 50%; padding-right: 3rem; text-align: right; }
    .journey-step-image { margin-left: 0; margin-right: 0; }
    .journey-step:nth-child(odd) .journey-step-image { margin-left: 0; margin-right: auto; }
    .journey-step:nth-child(even) .journey-step-image { margin-left: auto; margin-right: 0; }
    .grid-cols-4-gap { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-2-gap { grid-template-columns: repeat(2, 1fr); }
    .community-text-content { text-align: left; }
    .section-title-cta { font-size: 3rem; }
    .section-description-cta { font-size: 1.5rem; }
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-col-1 { text-align: left; }
    .footer-logo { margin-left: 0; margin-right: 0; height: 3rem; width: 3rem;background-color: white;}

.compensation-plan-section img {
  max-width: 50%;
  margin-top: 30px;
} 

.section-title-secondary {
    font-size: 2rem; /* text-4xl */
}
.container2 { 
    max-width: 95%;
}

.community-description {
    padding-top: 20px;

}


}









/* ========================================================================== */
/* --- BREAKPOINTS (DESKTOP: MIN-WIDTH 1024PX) --- */
/* ========================================================================== */
@media (min-width: 1024px) {
   .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
       .grid-cols-4-gap {
        grid-template-columns: repeat(4, 1fr); }

    .hero-title {
        font-size: 3.5rem; /* Smaller font for better fit */
        max-width: 90%; /* Allow a bit more width on small screens */ }

.section-title-secondary {
    font-size: 2.25rem;
    color: white;
}


    .final-compra {
    max-width: 100%; /* Modificado de 1200px a 100% */
    width: 60%;
}
.compra-final {
    max-width: 80%; /* Modificado de 1200px a 100% */
}
.compensation-plan-section { 
    background-color: var(--aiv-blue);
}

.compensation-plan-section img {
  max-width: 80%;
  margin-top: 30px;
} 

.footer-logo { margin-left: 0; margin-right: 0; height: 3rem; width: 3rem;background-color: white;}

.product-card {
    max-width: 100%;
}
.container2 { 
    max-width: 95%;
}
.community-description {
    padding-top: 50px;

}
}






/* styles_oportunidad.css */

/* Asegúrate de que las variables de color y estilos base 
   estén definidos antes de este bloque, usualmente al inicio de tu archivo CSS 
   o en un archivo importado. Ejemplo de variables que este bloque espera:
*/

:root {
    --aiv-blue: #2A368F;
    --aiv-yellow: #F2C94C;
    --aiv-green: #4CAF50; 
    --aiv-gray-dark: #424242;
    --aiv-gray-light: #f8f9fa; 
    --aiv-white: #ffffff;
    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

.section-padding {
    padding: 40px 0;
}

.text-center {
    text-align: center;
}
.button.primary-button {
    display: inline-block;
    background-color: var(--aiv-yellow);
    color: var(--aiv-blue);
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1rem; 
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s, transform 0.3s;
}
.button.primary-button:hover {
    background-color: #1e2a75; 
    transform: translateY(-2px);
}


/* Fin de ejemplo de estilos base y variables */


/* Compensation Plan Section */
.compensation-plan-section { 
    background-color: var(--aiv-blue); /* Fondo azul para esta sección */
    /* Asume que .section-padding (si lo usas) ya define el padding vertical y horizontal adecuado */
}

/* Títulos y subtítulos dentro de esta sección */
.compensation-plan-section .section-title { /* Para "Plan BAMBUSA: Tu Camino Hacia la Abundancia" */
    color: var(--aiv-yellow); /* Título principal en amarillo */
    font-family: var(--font-secondary);
    font-size: 2rem; /* Ajustar según diseño móvil */
    font-weight: 800;
    margin-bottom: 15px;
    text-align: center;
}
.compensation-plan-section .section-subtitle { /* Para el párrafo descriptivo debajo del título */
    color: #e0e0e0; /* Subtítulo en un gris claro o blanco suave */
    font-size: 1rem; /* Ajustar según diseño móvil */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.6;
}

/* Contenedor de las tarjetas de los pilares */
.compensation-pillars-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto para móviles */
    gap: 2.5rem; /* Espacio entre tarjetas en móvil */
}

/* Estilo individual de cada tarjeta de pilar */
.pillar-card {
    background-color: rgba(255,255,255,0.08); /* Fondo sutil y translúcido para las tarjetas */
    padding: 0px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(242, 201, 76, 0.3); /* Borde amarillo sutil */
    display: flex; 
    flex-direction: column;
    align-items: center; 
    transition: transform 0.3s, box-shadow 0.3s;
}
.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.pillar-card-icon {
    height: 60px; 
    width: auto;
    max-width: 100px; 
    margin-bottom: 0px;
    object-fit: contain; 
}

.pillar-card-title {
    font-family: var(--font-secondary);
    font-size: 1.2rem; 
    color: var(--aiv-yellow); 
    margin-bottom: 10px;
    font-weight: 700;
}

.pillar-card p { 
    font-size: 0.9rem;
    color: #d1d5db; 
    line-height: 1.5;
    flex-grow: 1; /* Ayuda a que todas las tarjetas tengan una altura similar si el texto varía */
}

/* Contenedor para el botón de Call to Action (CTA) */
.compensation-plan-section .section-cta { 
    margin-top: 40px; 
    text-align: center;
}

/* Estilos específicos para el botón dentro de esta sección, si es necesario */



/* --- Media Queries para Escritorio (min-width: 769px) --- */
@media (min-width: 768px) {
    .compensation-pillars-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorio */
    }
    
    .pillar-card-icon {
        height: 200px; 
        max-width: 350px;
    }

    .pillar-card-title {
        font-size: 1.4rem; 
    }
    
    .pillar-card p {
        font-size: 1rem; 
    }
}



/* ========================================================================== */
/* --- BREAKPOINTS (DESKTOP: MIN-WIDTH 1024PX) --- */
/* ========================================================================== */


@media (min-width: 1024px) {
    .compensation-pillars-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorio */
    }

    .pillar-card-icon {
        height: 200px; 
        max-width: 350px;
    }

    .pillar-card-title {
        font-size: 1.4rem; 
    }
    
    .pillar-card p {
        font-size: 1rem; 
    }
}


.tools-support-section { 
    background-color: var(--aiv-white); /* Fondo blanco para esta sección */
    /* .section-padding ya debería manejar el padding vertical si lo usas globalmente */
}

/* Estilos para los títulos dentro de esta sección específica si necesitas diferenciarlos */
.tools-support-section .section-title {
    color: var(--aiv-blue); /* Título principal en azul */
}
.tools-support-section .section-subtitle {
    color: var(--aiv-gray-dark); /* Subtítulo en gris oscuro */
}

/* Contenedor de las tarjetas de soporte */
.support-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto para móviles */
    gap: 25px; /* Espacio entre tarjetas en móvil */
    margin-top: 30px; /* Espacio después del subtítulo */
}

/* Estilo individual de cada tarjeta de soporte */
.support-card {
    background-color: var(--aiv-gray-light); /* Fondo gris claro para las tarjetas */
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.support-card-icon {
    font-size: 2.5rem; /* Tamaño del emoji/icono en móvil */
    color: var(--aiv-green); /* Color verde para los iconos */
    margin-bottom: 15px; /* Espacio debajo del icono */
    line-height: 1; /* Para asegurar que el emoji no tenga espacio extra */
}

.support-card-title {
    font-family: var(--font-secondary);
    font-size: 1.3rem; /* Tamaño del título de la tarjeta en móvil */
    color: var(--aiv-blue); /* Título de la tarjeta en azul */
    margin-bottom: 10px;
    font-weight: 700;
}

.support-card p { 
    font-size: 0.9rem;
    color: var(--aiv-gray-dark); /* Texto descriptivo en gris oscuro */
    line-height: 1.5;
    flex-grow: 1; /* Ayuda a que el texto ocupe el espacio disponible */
}

/* --- Media Queries para Escritorio (min-width: 769px) --- */
@media (min-width: 769px) {
    
    .tools-support-section .section-title {
        font-size: 2.5rem; /* Título más grande en escritorio */
    }
    .tools-support-section .section-subtitle {
        font-size: 1.1rem; /* Subtítulo más grande en escritorio */
        margin-bottom: 40px;
    }

    .support-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorio */
        gap: 30px; /* Espacio mayor entre tarjetas en escritorio */
    }

    .support-card-icon { 
        font-size: 3rem; /* Iconos un poco más grandes en escritorio */
        margin-bottom: 20px;
    }
    .support-card-title { 
        font-size: 1.5rem; /* Títulos de tarjeta más grandes */
    }
     .support-card p {
        font-size: 1rem; /* Texto de descripción un poco más grande */
    }
}




/* Testimonials Section Inicio */
.testimonials-section {
    background-color: var(--aiv-white); /* Fondo blanco para esta sección */
    /* .section-padding ya debería manejar el padding vertical */
}

.testimonials-section .section-title {
    color: var(--aiv-blue); /* Título principal en azul */
}
.testimonials-section .section-subtitle {
    color: var(--aiv-gray-dark); /* Subtítulo en gris oscuro */
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto para móviles */
    gap: 25px; /* Espacio entre tarjetas en móvil */
    margin-top: 30px; /* Espacio después del subtítulo */
}

.testimonial-card {
    background-color: var(--aiv-gray-light); /* Fondo gris claro para las tarjetas */
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.testimonial-card-image {
    width: 100px; /* Tamaño de la imagen en móvil */
    height: 100px;
    border-radius: 50%; /* Imagen redonda */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
    margin-bottom: 15px;
    border: 3px solid var(--aiv-yellow); /* Borde amarillo para la imagen */
}

.testimonial-card-name {
    font-family: var(--font-secondary);
    font-size: 1.2rem; /* Tamaño del nombre en móvil */
    color: var(--aiv-blue); /* Nombre en azul */
    font-weight: 700;
    margin-bottom: 5px;
}

.testimonial-card-rank {
    font-size: 0.9rem;
    color: var(--aiv-green); /* Rango/Título en color verde */
    font-weight: 600;
    margin-bottom: 10px;
}

.testimonial-card-quote {
    font-size: 0.95rem;
    color: var(--aiv-gray-dark); /* Cita en gris oscuro */
    font-style: italic;
    line-height: 1.5;
    flex-grow: 1; /* Ayuda a que las tarjetas tengan alturas similares */
}

/* --- Media Queries para Escritorio (min-width: 769px) --- */
@media (min-width: 769px) {
    
    .testimonials-section .section-title {
        font-size: 2.5rem; /* Título más grande en escritorio */
    }
    .testimonials-section .section-subtitle {
        font-size: 1.1rem; /* Subtítulo más grande en escritorio */
        margin-bottom: 40px;
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorio */
        gap: 30px; /* Espacio mayor entre tarjetas en escritorio */
    }

    .testimonial-card-image {
        width: 120px; /* Imagen un poco más grande en escritorio */
        height: 120px;
        margin-bottom: 20px;
    }
    .testimonial-card-name {
        font-size: 1.4rem; /* Nombre más grande */
    }
    .testimonial-card-rank {
        font-size: 1rem; /* Rango un poco más grande */
        margin-bottom: 15px;
    }
    .testimonial-card-quote {
        font-size: 1rem; /* Cita un poco más grande */
    }
}






/* Final CTA Section */
/* css/styles_inicio.css */

/* Asegúrate de que las variables de color y estilos base 
   estén definidos antes de este bloque. Ejemplo:
:root {
    --aiv-blue: #2A368F;
    --aiv-yellow: #F2C94C;
    --aiv-green: #4CAF50;
    --aiv-white: #ffffff;
    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}
.section-padding { padding: 40px 0; }
.text-center { text-align: center; }
.container { width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.button { /* Estilos base para botones si los tienes */ 





.final-cta-section-inicio .section-title-cta { /* Para "¡Tu Futuro Brillante Comienza Hoy con Aivlife!" */
    font-family: var(--font-secondary);
    font-size: 2rem; /* Móvil */
    color: var(--color-aivlife-yellow);
    margin-bottom: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.final-cta-section-inicio .section-description-cta { /* Para el párrafo descriptivo */
    font-size: 1.1rem; /* Móvil */
    color: #e0e0e0; /* Un blanco un poco más suave */
    max-width: 600px;
    margin: 0 auto 25px auto; /* Centrado y con margen inferior */
    line-height: 1.6;
}

/* Estilo del botón de Call to Action específico para esta sección */
.final-cta-section-inicio .cta-button-inicio {
    display: inline-block;
    background-color: var(--aiv-blue); /* Color de fondo azul */
    color: var(--aiv-white);          /* Texto blanco */
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 1.1rem; /* Móvil */
    padding: 14px 30px;
    border-radius: 50px; /* Botón bien redondeado */
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--aiv-yellow);
    animation: pulse-blue 2s infinite; /* Nueva animación de pulso azul */
}

.final-cta-section-inicio .cta-button-inicio:hover,
.final-cta-section-inicio .cta-button-inicio:focus {
    background-color: #1E2A75; /* Azul un poco más oscuro al hacer hover/focus */
    color: var(--aiv-yellow); /* Texto amarillo al hacer hover/focus */
    transform: translateY(-3px) scale(1.03); /* Efecto de elevación y ligero zoom */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    animation-play-state: paused; /* Pausar la animación de pulso en hover/focus */
}

/* Nueva animación de pulso para el botón azul */
@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 var(--aiv-yellow), 0 5px 15px rgba(0,0,0,0.2); /* Sombra azul y sombra normal */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(42, 54, 143, 0), 0 8px 25px rgba(0,0,0,0.3); /* Expande sombra azul, sombra normal más grande */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(42, 54, 143, 0), 0 5px 15px rgba(0,0,0,0.2); /* Sombra azul desaparece, vuelve sombra normal */
    }
}


/* --- Media Queries para Escritorio (min-width: 769px) --- */
@media (min-width: 769px) {

    .section-description-cta { font-size: 1.25rem; margin-bottom: 30px; }

    .final-cta-section-inicio .section-title-cta {
        font-size: 2.8rem; /* Título más grande en escritorio */
    }

    .final-cta-section-inicio .section-description-cta {
        font-size: 1.25rem; /* Subtítulo más grande en escritorio */
        margin-bottom: 35px;
    }

    .final-cta-section-inicio .cta-button-inicio {
        font-size: 1.2rem; /* Botón un poco más grande */
        padding: 18px 45px;
    }
}


.section-description-cta {
    font-size: 1.1rem; /* Móvil */
    color: #e0e0e0;
    max-width: 600px;
    margin: 0 auto 25px auto;
}













/* Testimonials Section Inicio */
.testimonials-section { /* ID: testimonials-inicio */
    background-color: var(--aiv-white); /* Fondo blanco para esta sección */
    /* .section-padding ya debería manejar el padding vertical si lo usas globalmente */
}

.testimonials-section .section-title { /* Para "Historias que Inspiran" */
    color: var(--aiv-blue); /* Título principal en azul */
}
.testimonials-section .section-subtitle { /* Para el párrafo descriptivo */
    color: var(--aiv-gray-dark); /* Subtítulo en gris oscuro */
}

/* Contenedor de las tarjetas de testimonios */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto para móviles */
    gap: 25px; /* Espacio entre tarjetas en móvil */
    margin-top: 30px; /* Espacio después del subtítulo */
}

/* Estilo individual de cada tarjeta de testimonio */
.testimonial-card {
    background-color: var(--aiv-gray-light); /* Fondo gris claro para las tarjetas */
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.testimonial-card-image {
    width: 100px; /* Tamaño de la imagen en móvil */
    height: 100px;
    border-radius: 50%; /* Imagen redonda */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
    margin-bottom: 15px;
    border: 3px solid var(--aiv-yellow); /* Borde amarillo para la imagen */
}

.testimonial-card-name {
    font-family: var(--font-secondary);
    font-size: 1.2rem; /* Tamaño del nombre en móvil */
    color: var(--aiv-blue); /* Nombre en azul */
    font-weight: 700;
    margin-bottom: 5px;
}

.testimonial-card-rank {
    font-size: 0.9rem;
    color: var(--aiv-green); /* Rango/Título en color verde */
    font-weight: 600;
    margin-bottom: 10px;
}

.testimonial-card-quote {
    font-size: 0.95rem;
    color: var(--aiv-gray-dark); /* Cita en gris oscuro */
    font-style: italic;
    line-height: 1.5;
    flex-grow: 1; /* Ayuda a que las tarjetas tengan alturas similares */
}

/* --- Media Queries para Escritorio (min-width: 769px) --- */
@media (min-width: 769px) {
    
    .testimonials-section .section-title {
        font-size: 2.5rem; /* Título más grande en escritorio */
    }
    .testimonials-section .section-subtitle {
        font-size: 1.1rem; /* Subtítulo más grande en escritorio */
        margin-bottom: 40px;
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorio */
        gap: 30px; /* Espacio mayor entre tarjetas en escritorio */
    }

    .testimonial-card-image {
        width: 120px; /* Imagen un poco más grande en escritorio */
        height: 120px;
        margin-bottom: 20px;
    }
    .testimonial-card-name {
        font-size: 1.4rem; /* Nombre más grande */
    }
    .testimonial-card-rank {
        font-size: 1rem; /* Rango un poco más grande */
        margin-bottom: 15px;
    }
    .testimonial-card-quote {
        font-size: 1rem; /* Cita un poco más grande */
    }
}


























/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
---------------------Pagina Producto-----------------------------------
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.page-catalogo { font-family: var(--font-primary); font-size: 16px; color: var(--aiv-gray-dark); background-color: var(--aiv-white); display: flex; flex-direction: column; min-height: 100vh; line-height: 1.6; }
main { flex-grow: 1; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { font-family: var(--font-secondary); font-weight: 700; margin-bottom: 0.75em; color: var(--aiv-blue); }
p { margin-bottom: 1em; }
a { text-decoration: none; color: var(--aiv-green); }
ul { list-style: none; }
.container { width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 20px 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Catalog Section */
.catalog-section { padding: 30px 0; }
.catalog-subtitle { font-size: 1.1rem; text-align: center; margin-bottom: 40px; color: var(--aiv-gray-dark); max-width: 700px; margin-left: auto; margin-right: auto; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.product-card-catalogo { background-color: var(--aiv-white); border: 1px solid #e9ecef; border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.product-card-catalogo:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.product-image-container-catalogo { width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; overflow: hidden; }
.product-card-image-catalogo { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-card-name-catalogo { font-size: 1.25rem; font-weight: 700; color: var(--aiv-blue); margin-bottom: 8px; min-height: 2.8em; line-height: 1.4; }
.product-card-description-catalogo { display: none; } /* Ocultamos la descripción original, ya no se usa */
.product-card-points-container {
    margin-bottom: 15px;
    font-size: 1rem;
    color: var(--aiv-gray-dark);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.points-label { margin-right: 8px; font-weight: 600; }
.points-value { font-weight: 700; font-family: var(--font-secondary); color: var(--aiv-blue); background-color: var(--aiv-yellow); padding: 2px 8px; border-radius: 4px; }
.product-card-price-container-catalogo { margin-bottom: 12px; }
.product-card-price-catalogo { font-size: 1.3rem; font-weight: bold; color: var(--aiv-green); }
.product-card-role-label-catalogo { font-size: 0.75rem; color: var(--aiv-gray-dark); display: block; margin-top: 3px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: all 0.2s; border: none; }
.product-card-quantity-selector-catalogo { margin: 10px auto; }
.product-card-actions { display: flex; gap: 10px; margin-bottom: 10px; }
.product-quantity-input-catalogo { width: 60px; text-align: center; border: 1px solid #ccc; border-radius: 5px; }
.add-to-cart-btn-catalogo-new { flex-grow: 1; background-color: var(--aiv-green); color: var(--aiv-white); }
.add-to-cart-btn-catalogo-new:hover { background-color: #3e8e41; }
.more-info-btn-catalogo { background-color: transparent; color: var(--aiv-blue); border: 1px solid var(--aiv-blue); width: 100%; margin-top: auto; }
.more-info-btn-catalogo:hover { background-color: var(--aiv-blue); color: var(--aiv-white); }

/* Product Info Modal (Popup) */
.product-info-modal-catalogo { display: none; position: fixed; inset: 0; background-color: rgba(0,0,0,0.6); align-items: center; justify-content: center; z-index: 2050; padding: 15px; backdrop-filter: blur(3px); }
.product-info-modal-content-catalogo { background-color: var(--aiv-white); width: 90%; max-width: 550px; padding: 20px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); position: relative; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; }
.close-product-info-modal-btn-catalogo { position: absolute; top: 10px; right: 15px; font-size: 2.2rem; background: none; border: none; cursor: pointer; color: var(--aiv-gray-dark); line-height: 1; padding: 5px; z-index: 10; }
.product-info-modal-layout-catalogo { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.product-info-modal-gallery-catalogo { display: flex; justify-content: center; margin-bottom: 15px; width: 100%; text-align: center; }
.product-info-modal-gallery-catalogo img { max-width: 100%; max-height: 300px; object-fit: contain; }
.product-info-modal-details-catalogo { text-align: left; width: 100%; padding-top: 10px; }
.info-modal-product-name-catalogo { font-size: 1.4rem; margin-bottom: 15px; text-align: center; }
.product-info-modal-details-catalogo h3 { font-size: 1.1rem; color: var(--aiv-blue); margin-top: 20px; margin-bottom: 8px; font-weight: 700; border-bottom: 1px solid #eee; padding-bottom: 8px;}
.info-modal-description-catalogo, .info-modal-how-to-use-catalogo { font-size: 0.95rem; color: var(--aiv-gray-dark); margin-bottom: 15px; line-height: 1.6; }
.info-modal-benefits-list { list-style-type: disc; padding-left: 20px; margin-top: 10px; margin-bottom: 15px; }
.info-modal-benefits-list li { margin-bottom: 8px; line-height: 1.5; color: #333; }

/* Role Selector, Cart, Checkout, etc. */
.role-selector-container-catalogo { position: fixed; top: 80px; right: 20px; z-index: 1001; }
.role-selector-btn-catalogo { background-color: var(--aiv-yellow); color: var(--aiv-blue); border: none; padding: 10px 15px; border-radius: 5px; font-weight: bold; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.role-modal-catalogo { display: none; position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 2000; }
.role-modal-content-catalogo { background-color: white; padding: 30px; border-radius: 8px; text-align: center; }
.role-modal-catalogo h3 { margin-bottom: 20px; }
.role-modal-catalogo button { background-color: var(--aiv-blue); color: white; border: none; padding: 10px 20px; margin: 5px; border-radius: 5px; cursor: pointer; }
.cart-icon-btn-catalogo { position: fixed; bottom: 20px; right: 20px; background-color: var(--aiv-blue); color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1001;}
.cart-count-catalogo { position: absolute; top: -5px; right: -5px; background-color: var(--aiv-yellow); color: var(--aiv-blue); font-size: 0.8rem; font-weight: bold; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-popup-catalogo { display: none; position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 2000; }
.cart-popup-content-catalogo { background-color: white; width: 100%; max-width: 700px; max-height: 80vh; padding: 20px; border-radius: 8px; display: flex; flex-direction: column;}
.cart-popup-catalogo h3 { text-align: center; margin-bottom: 20px; }
#cartItemsContainerCatalogo { flex-grow: 1; overflow-y: auto; margin-bottom: 15px;}
.cart-item { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
.cart-item-details { flex-grow: 1; max-width: 300px; margin-right: 10px; text-align: left;}
.cart-item-name { font-weight: bold; }
.cart-item-price, .cart-item-quantity-input { font-size: 0.9rem; }
.cart-item-quantity-input { width: 50px; text-align: center; border: 1px solid #ccc; border-radius: 3px; padding: 3px;}
.cart-item-subtotal { min-width: 60px; text-align: right; }
.cart-item-remove-btn { background: none; border: none; color: #dc3545; font-size: 1.2rem; cursor: pointer; padding: 5px; }
.cart-total-catalogo { text-align: right; font-weight: bold; font-size: 1rem; margin-top: 5px; margin-bottom: 0px; }
.cart-actions-catalogo { margin-top: 20px; display: flex; justify-content: space-between; }
.close-cart-btn-catalogo { background-color: #6c757d; color: white; }
.proceed-checkout-btn-catalogo { background-color: var(--aiv-green); color: white; }
.proceed-checkout-btn-catalogo:disabled { background-color: #ccc; cursor: not-allowed; }

/* Checkout Section Styles */
.checkout-section-catalogo { display: none; padding: 40px 0; background-color: var(--aiv-gray-light); }
.final-compra { max-width: 600px; margin: auto; background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.checkout-form-catalogo label { display: block; margin-bottom: 5px; font-weight: 600; }
.checkout-form-catalogo input, .checkout-form-catalogo textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; }
.checkout-summary-catalogo { background-color: #f9f9f9; padding: 15px; border-radius: 8px; margin-top: 20px; }
.checkout-summary-catalogo h3 { margin-bottom: 15px; }
.finalize-purchase-btn-catalogo { background-color: var(--aiv-green); color: white; width: 100%; margin-top: 20px; padding: 12px; }
.back-to-catalog-btn-catalogo { display: block; text-align: center; margin-top: 20px; color: var(--aiv-blue); font-weight: 600; }

@media (min-width: 769px) {
    .product-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .product-info-modal-layout-catalogo { gap: 0px; align-items: flex-start;}
    .product-info-modal-gallery-catalogo { flex: 1; }
    .product-info-modal-details-catalogo { flex: 1.5; }
}


















/* ============================================== */
/* === ESTILOS PARA MODAL DE PATROCINADOR ======= */
/* ============================================== */

/* El overlay que cubre toda la pantalla */
.sponsor-modal-overlay {
    position: fixed;
    inset: 0; /* Abarca toda la pantalla (top:0, right:0, bottom:0, left:0) */
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000; /* Asegura que esté por encima de otros elementos */
    display: none; /* Inicia oculto */
    align-items: center;
    justify-content: center;
    padding: 15px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.sponsor-modal-overlay.is-visible {
    display: flex; /* Se hace visible con JS */
    opacity: 1;
}

/* El contenido del modal */
.sponsor-modal-content {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 500px;
    text-align: center;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}
.sponsor-modal-overlay.is-visible .sponsor-modal-content {
    transform: scale(1); /* Efecto de zoom al aparecer */
}



.sponsor-modal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-aivlife-gray-dark, #424242);
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Estilos para el Paso 1 (Confirmación) */
.sponsor-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background-color: var(--color-aivlife-gray-light, #F8F8F8);
    border-radius: 8px;
    border: 1px solid #eee;
}
.sponsor-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-aivlife-yellow, #F2C94C);
}
.sponsor-details {
    text-align: center;
}
.sponsor-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-aivlife-blue, #2A368F);
    margin: 0;
}
.sponsor-location {
    font-size: 0.9rem;
    color: var(--color-aivlife-gray-dark, #424242);
    margin: 5px 0 0 0;
}
.flag-icon {
    font-size: 1.1em;
    vertical-align: middle;
}
.button.button-confirm {
    background-color: var(--color-aivlife-green-medium, #4CAF50);
    color: var(--aiv-white, #ffffff);
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    text-decoration: none;
    border: none;
}
.button.button-confirm:hover {
    background-color: #388e3c;
}

.button.button-confirm-new {
    background-color: var(--color-aivlife-green-medium, #4CAF50);
    color: var(--aiv-white, #ffffff);
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    text-decoration: none;
    border: none;
}
.button.button-confirm-new:hover {
    background-color: #388e3c;
}

.sponsor-change-prompt {
    margin-top: 25px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.sponsor-change-prompt p {
    font-size: 0.9rem;
    color: var(--color-aivlife-gray-dark, #424242);
    margin-bottom: 10px;
}
.button.button-change-sponsor {
    background-color: #6c757d; /* Gris */
    color: var(--aiv-white, #ffffff);
    padding: 10px 20px;
    font-size: 0.9rem;
    width: auto;
    border: none;
}
.button.button-change-sponsor:hover {
    background-color: #5a6268;
}

/* Estilos para el Paso 2 (Ingresar nuevo patrocinador) */
.back-button {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-aivlife-gray-dark, #424242);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}
.sponsor-input-group {
    margin-top: 20px;
}
#new-sponsor-codigo {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: center;
}
.sponsor-input-group .button.button-continue {
    width: 100%;
}
.sponsor-input-helper {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 8px;
}

/* Media Queries para Escritorio */
@media (min-width: 769px) {
    .sponsor-info {
        flex-direction: row;
        text-align: left;
    }
    .sponsor-modal-title {
        font-size: 1.4rem;
    }
}